Pure Blue Redesign

Full website redesign

Client: PureBlue Technologies

Task: Redesign the entire website of an engineering start-up to give the company a new identity.

I used Photoshop and Illustrator to completely redesign four pages of a website of an engineering company start-up. It began the way I always begin—meeting with a client and sketching ideas out on paper. I was effectively responsible for: managing client needs, information architecture, typography, color, custom illustrations, infographics, effective copy, call-to-actions, photo editing, alignment and contrast.

Paper Prototype

Paper is the best tool a designer can use. Don’t let anyone impress you with Photoshop or Sketch. All great ideas start on paper, a medium that’s flexible and fast. I used construction paper and a ruler to lay out the main content of the site. The target audience for the site is potential customers (pilot partners).

Digital Wireframe

The next step was to begin with digital tools. I used Photoshop to construct the initial wireframe.

Revised Wireframe

Rough at the edges, I embarked on a series of revisions with one of my mentors to improve the design. Sharper alignment and contrast were the big takeaways.

We continued to improve the layout while at the same time, wireframes from the other pages began to come to life.

Client Feedback

Getting feedback from a client early and often is critical in what I do. With this feedback, the wireframe began to take shape.

Colors

Adding mock-up elements including colors and font styling is a BIG job. Colors have to be consistent throughout a site and work well with one another.

Mock-Up

The new home page, with color and improved fonts, looked like this:

Visual Design

The final stage was illustration. To complete this project, I knew there were some illustrations that had to be done. I sketched multiple ideas for each infographic concept until deciding on one.

I used Illustrator to turn these into digital graphics.

Final Mock-Ups

Combining everything together and making final changes to the mock-ups, I presented this to the client. They came a long way from sketches on paper!

Here are mock-ups of the three other pages I designed:

The site is in the process of being coded by a front-end developer.