|
Wednesday, September 9, 2009
Web Design Process: From Wireframe to Website
Recently I wrote about sketching out a wireframe first, on paper, before opening up any software program. We call that Stage 2: Information Design. (Stage 1: Strategic Planning is all about getting and analyzing content and establishing a goal or objective for the website).
Well, I wanted you to see what became of that sketch. (It became a website, of course)
After I sketched out, on paper, where I wanted content to go, I used Adobe (or Macromedia) Fireworks to design the homepage wireframe.
 Matt Duncan Homepage Wireframe After a couple of revisions from the client, we moved onto Stage 3: Visual Design. This is the stage where all the colors and typefaces come in. We essentially wrap the design around the content.
 Matt Duncan Visual Design After a few revisions from the client, it’s onto Stage 4: Production. This is the stage where the picture above becomes a working website with links, rollovers, rotators, database integration and more.
Our sketched out wireframe is now a website: http://www.matthewjduncan.com/
Talk to us about designing your new website.
Posted by: Michael Swartz at 5:35 pm
Comments: 2 Comments | Filed under: Web Design
|
Hi Michael,
You might find my wireframing tool http://www.Simulify.com/ interesting.
It makes it extremely easy to create and share clickable wireframes from within browser and gather feedbacks.
It fits the workflow of a website builder company.
Thank you. I will check it out.