Step 1: Multi-stage web design process
We’ve already written anextensive articleon the basics of a professional web design process, so we’re just going to list some of the article’s key points for the sake of avoiding redundancy.
Stage 1: Conceptualization and planning (flowcharts)
When designing a website, one should not begin the process inside of a text editor (BBedit) or website builder application (Dreamweaver, GoLive, etc). Instead, the process should begin on a piece of paper or within flowchart software. According toWikipedia, a flowchart is:a schematic representation of an algorithm or a process.In layman’s terms, a flowchart provides a visual chart illustrating the structure of your website. How many main navigational items will your website contain? What willthese items be called? Will there be any pages contained within the main pages? Whatwill they be called? By planning out your website using a flowchart, you get a headstart on:1.Information organization2.Usability3.Determining the volume of content required
Stage 2: Modeling (wireframes)
In the modeling stage, static “wireframe” mockups are created for each unique web page. To create wireframes, one may use either:
•
paper and pencil
•
mockup software such as Adobe Photoshop or our personal choice,OmniGraffle ProfessionalThese wireframes contain a bare-bones skeleton which illustrate the layout of a particular web page. Where will the logo go? Where will the content be located? Willthere be breadcrumbs? Will you have a login box? Each of these questions (and manymore) are answered in the modeling stage. A few things one should take intoconsideration when creating wireframes:
•
be sure to include all important elements that will be used (logo, navigation,content placement, images/video placement, login box, search, breadcrumbs,etc)
•
reference the flowchart which you created in Stage 1
•
don’t use graphics - wireframes are meant to be bare-bones: boxes/circles/ovals which illustrate the placement of objects
•
only use text to label the elements, don’t use body text (thats for the thirdstage)
•
focus on clean, well-organized, user-friendly layout; avoid cluttered layouts
Leave a Comment