How many of you truly understand the proper steps in a web site mock-up? I bet many of you are already thinking of wireframes, grey boxing, sketching, and probably storyboarding. However, how many of you have truly come to love a custom system that you employ?
A truly great web site mock-up should not only be enjoyable to create but it should culminate into a beautiful / usable work of art for your client. Don’t get weighed down by the conformist proxies of our trade. Break the norm and develop your own process for a web site mock-up. I have my own process which I call sketchedbox-comp-storyframing-grey-modeling. I will discuss this method with you below.
When I mock-up a new web site I always like to get the competition’s web sites printed and laid out directly in front of me (I call this, comp-wireframe-storyboxing). Next, I take a primitive yet capable tool out of my toolbox that combines a hard wood casing with a lead core (my light-saber) and a bright, rigid yet flexible writing platform (some affectionately refer to as paper). With these two antiquated tools I start the sketchedbox-comp-storyframing-grey-modeling (herein referred to as a “sketch”). The first step in my sketch process is to mark the area that will lie above the fold when the design is present on a screen. Then I split the sketch into a grid of columns (I typically use thirds as a starting point.) and I Continually remind myself to think of spacing and placement by concentrating on good concepts of visually communicative design, such as the rule of thirds, asymmetrical / symmetrical balance, rhythm, effective use of white-space, and the primary optical area. I begin with the most basic elements, including the branding and the navigation. I Remember to keep this step simple and don’t get too caught up with styles or typography. I Utilize Greek text for headlines and I don’t think about my body copy (simply by using squiggly lines to illustrate body copy). When I’m happy with the branding and navigation I move forward with the main content area (above the fold). The main content area will be of most value to the client and should represent the main point you want to get across to the audience. This can be anything from a good or service to a movement or idea. This is usually a good section to rely on some rich graphics or rich media that “pop” off the stage. Upon completion of the main content area I begin the tertiary sections of the sketch. This should include other content that should be of interest to the audience. Keep this section among all the rest short and light on body copy. When finished with the tertiary areas I tend to take a break, usually celebrated by filling a cylindrical, glass-blown drinking vessel with the coolest, filtered drinking water I can find (a glass of water). Then I repeat the previous steps until I am happy with a select few (the quantity of which is typically requested by the client in the contract) and only then will I scan them onto the hard drive and begin to flesh them out in Adobe Photoshop or Illustrator. In this way I have forced my mind to only think of good design principles and disregard anything else that would hinder the mock-up.
Whether you call the aforementioned process sketching, wireframing, or sketchedbox-comp-storyframing-grey-modeling (facetiously speaking of course), I challenge you to come up with your own process to create a good web site mock-up. Some of the more tried an true examples may actually be of benefit for you. I have used the tried and true methods before but always seem to come back to a rough sketch. In the end, simplicity is beauty, less is more, and it seems that fine arts really are useful in designing for the web. On the plus side it also makes for some interesting concept images for your portfolio.
Related posts
How many of you truly understand the proper steps in a web site mock-up? I bet many of you are already thinking of wireframes, grey boxing, sketching, and probably storyboarding. However, how many of you have truly come to love a custom system that you employ?