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 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).

IMG_0580

IMG_0582

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

Home_Page_wireframe_v2

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.

Home_Page_wireframe_v4

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

Technology_v1 Contact_Us_v1 About_Us_v1

 

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

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.

Brand book primary and secondary colors

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

Home_Page_wireframe_v7 (10-6-2015)

The final stage was illustration. I am not an artist. But 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.

IMG_2396-1.jpg

I used Illustrator to turn these into digital graphics.

Portfolio drawings_Page_1

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!
PB_Home_Page_10-28-2015 for post

PB_Technology_PB_10-28-2015

PB_About_Us_PB_10-28-2015

PB_Contact_Us_PB_10-28-2015

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

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s