Web Design Process: Sketch to Wireframe to Web Design Concept

I thought I would share some of the thought process and steps that go into taking a custom web design from an idea to something you can see and understand.  The web design process always starts with identifying the goals of the site and the user, the content to be utilized and the features needed.

Below is a project we have recently started with example of the sketch, the wireframe and the final website concept for the home page.  With most projects, we are repeating this process for  2 to 5 types of layouts and pages based on content and functions.

Web Design Sketch
I like to start mapping things out on paper from what I envision in my head.  As we discuss the goals and content of the website, I often sketch out how I see things coming together.

web design sketch

Web Design Wireframe
The next step is the team discussing the sketch and starting to formalize the content areas and web design elements needed.  Things move from a loose drawing to a more detailed wireframe.

wireframe web design example

Web Design Creative Mock
Once the wireframe is completed, we then get down to the details of colors, shading, exact sizing and other finishing touches.  The web design concept brings the initial ideas to life with the look of a website ready to be clicked.

custom web design mock

As you can see, adjustments are made in between these phases as we work together on making the finished product the right tool for the client and the targeted user.

Hope you enjoyed this brief peek at some of the initial stages of the web design process.  We’re moving on to coding this one!

2 thoughts on “Web Design Process: Sketch to Wireframe to Web Design Concept”

  1. Great post Aaron. Clearly demonstrates the simplicity of the web design process, but shows how effective this is in producing a high quality end product. Nice site!

  2. It’s great to see how other developers visualise the design process.. and so important I think to get something sketched up before turning on the computer!

Leave a Reply

Your email address will not be published. Required fields are marked *

*