I was recently asked to design a new website for Bill Erickson – a WordPress consultant, an entrepreneur, and a founder of The Creative Space and BIL Conference. Bill is also a well-known developer in the Genesis framework community.
You may have already seen this project in my portfolio. I decided to write a quick “making of” article and explain the entire design process step by step.
My typical design process includes:
- Brainstorming and sketches
- Creating wireframes
- Choosing colors, typography and visual design style
- Designing the first home page concept
- Designing the sub pages
- Delivering the final design files
Of course, each of these steps is supported by conducting research, contacting the client, getting feedback, applying a round of changes, etc. However, in this post, I’m going to focus on some more important steps and design decisions we made.
This is my first step of the design process. By this point, I’ve already gotten some project info and have gone through a bunch of questions/answers with a client.
I usually start the brainstorming with a pen and my sketchbook.
I didn’t go for any inspirations at this step. I didn’t want to influence my initial ideas with some other projects. So, I started with a few quick general layout thumbnails to help myself visualize the entire home page:
Based on that I tried to pick one, or rather, a mix of a few ideas and create one bigger sketch with some more details.
Also, at this stage I considered the mobile version of the site and made sure the layout I came up with would be easily responsive.
I never show any of my sketches to the client. First, I convert my sketches into a digital wireframe. I use Photoshop and my own wireframe kit PSD for this.
I drag and drop all basic elements from my wireframe PSD into the project. I’m trying to keep the actual dimensions of the page, sidebars, etc. These are not perfectly accurate yet but very close to what it will be in the final design concept.
This is the first home page wireframe sent to the client:
Note: be careful with sending wireframes to clients. In this case, Bill is a professional web developer and has a lot of experience working with designers. I didn’t have any problems with showing him the website’s wireframe. However, some clients may not understand the wireframe concept, so make sure to explain the entire process to them. In some cases, you may want to skip showing wireframes to clients. However, it’s still good to do it for yourself.
After getting some feedback from the client and applying some changes, we’re good to move to the next step.
3. Colors and typography
If you read my previous blog post, you know why I always start the visual design process with defining the typography first. In this step, I create a simple guideline of colors, typography and general visual design style.
That’s the moment when I open my browser and start searching for some inspiration. I’m looking for some other projects that might contain a style that would be close to the project I’m working on.
I knew that Bill was looking for something simple, clean, and minimalist and he also wanted to keep his current color scheme as well as similar typography set. I took his original color, fixed it a bit and combined it with some gray scale colors.
Next, I tried a few different typography combinations in the colors I chose and picked the one I liked the most:
In the last step, I created a simple guideline file using both the colors and typography I chose. I designed a sample headline, body text, button and a content box.
4. Design concept
This is my favorite part of the web design process – creating the first home page design concept. Based on the approved wireframe and my design style guideline I created this concept:
Also, that was the second moment when I sent the design update to the client. I want my client to see the typography and colors used in the actual design concept, so it’s easier to visualize how it all looks.
After some feedback from Bill and exchanging a couple more emails we made some changes to the original concept:
I’m really happy with the changes we made and as you can see we managed to find a good solution that both looked better and was exactly what Bill needed.
Of course, the project was not over yet. I was hired to design a few more pages like: Services, Blog, Contact and the landing pages.
5. Deliver the final project
Once all the designed pages were approved by Bill, I had to prepare the final package that included all PSD files and fonts used in the project. I always make sure my PSD files are cleaned up and that all layers are properly named and organized.
Note: I use the “Links” Photoshop extension to share some smart objects between the PSD files. It’s very helpful especially if you work on a few sub pages. Thanks to this extension you can share some common elements like navigation or footer. If you need to make any changes to these elements, make them only once and update automatically in all PSD files. To find out more, read Mark Steinnruck’s article “Linked Smart Objects in Photoshop”.
If you have any questions about my design process, please leave your comments below.
Also, I’d like to hear your feedback about this kind of blog post, and if you like it, I’ll post more “making of” posts in the future.