Planning
The goal of rebranding Geek Powered Studios' website was to attract more and larger web design clients. The company logo had been redesigned a few years prior and it was time to catch-up the rest of the brand with the new aesthetic.
Like any good start to a design project we began with competitor research, site maps, sifting through heat maps and analytics, and finally with mood boards and wireframes.
Mood Boards
I decided to do a few types of mood boards. One was for site styling and overall look-and-feel. The second was for photography and the third consists of example page elements designed by me.
Wireframes
After the overall strategy was set for the project we focused on creating wire frames for all of the pages. These were done with paid advertising and search engine optimization in mind.
Stylescapes
Following the strategy and mood boards I started on a style guide for the project. Starting with a style guide allowed me to play with some design elements without being tied down by them in the final design. The style guide is a glimpse into what the overall look-and-feel will be.
The style guide above was a bit too long so I broke it up below to show detail.
Icons
Once the style guide was approved I moved on to the icons. To save time I used an already existing set of icons and modified them to fit our needs. I also had to create a few myself.
Mockups
Mockups are the final piece to get into place before building the site. It's always interesting to me to see how close the mockups are with the live site once it's finished. Below you'll find mockups of the homepage and the three main services pages for the site.
