Website Design

While working as a contract-to-hire at my most recent job, I was tasked with leading a project of creating a website for one of our new products. The website was to be up and running within two weeks of our start time.

Drawing it Out

Primary Concept
Secondary Concept

The team had already bought a template to use for the site, so I went to work laying out the necessary pages and how to navigate them. 

Pen and paper are my go-to conceptual tools – I’ve been drawing my whole life, so it’s the quickest way for me to visualize things. 

After coming up with the page layout, I created a second concept of the entire site just in case we needed a Plan B.

Primary Concept
Secondary Concept

The team had already bought a template to use for the site, so I went to work laying out the necessary pages and how to navigate them. 

Pen and paper are my go-to conceptual tools – I’ve been drawing my whole life, so it’s the quickest way for me to visualize things. 

After coming up with the page layout, I created a second concept of the entire site just in case we needed a Plan B.

Making it Function

Wireframe + Prototyping

Once we established the general flow and page count for the site, I wireframed the concept to help with laying it out. 

Being a designer, focusing only on the practical elements of the project – such as the order in which pages flowed, and where buttons were placed – was a challenge to me. I really wanted to add color and images along the way, but getting the concept to work was the top priority.

I finished the wireframe and turned it into a prototype to test everything out. It worked! It’s such a satisfying feeling to take a bunch of minimalistic pages made from basic grey shapes, plug them into each other, and see them operate the way they were intended. 

Once we established the general flow and page count for the site, I wireframed the concept to help with laying it out. 

Being a designer, focusing only on the practical elements of the project – such as the order in which pages flowed, and where buttons were placed – was a challenge to me. I really wanted to add color and images along the way, but getting the concept to work was the top priority.

I finished the wireframe and turned it into a prototype to test everything out. It worked! It’s such a satisfying feeling to take a bunch of minimalistic pages made from basic grey shapes, plug them into each other, and see them operate the way they were intended. 

Wireframe + Prototyping

Ever-Changing Finish Line

Final

After quite a few adjustments and bouts of troubleshooting – not to mention some awesome teamwork – my teammate and I managed to get the site created and running before our deadline. 

This is one of my most favorite projects because it challenged me the most. I had to learn WordPress in less than a week to tackle the task!