STEPS WE WILL TAKE IN DESIGNING OUR WEBSITES:
Multi-stage web design process
Stage 1: Conceptualization and planning (flowcharts) March 25- March 28
Our process will begin on a piece of paper using a flowchart. A flowchart provides a visual chart illustrating the structure of your website. How many main navigational items will your website contain? What will these items be called? Will there be any pages contained within the main pages? What will they be called? By planning out your website using a flowchart, you get a head start on:
Information organization
Usability
Determining the volume of content required
Stage 2: Modeling
In the modeling stage, static mockups are created for each unique web page. To create wireframes, one may use either:
- paper and pencil
- mockup software such as Adobe Photoshop
A few things one should take into consideration when creating wireframes:
Be sure to include all important elements that will be used (logo, navigation, content placement, images/video placement, login box, search, 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 third stage)
Focus on clean, well-organized, user-friendly layout; avoid cluttered layouts
Stage 3: Execution
The third stage in our professional web design process includes:
Creating the graphical user interface (GUI), also known as the design
Creating the content
Converting the web designs from images into code (markup) which web browsers use to present your website on the Internet
Stage 4: High-quality design
Who and what determines a “high-quality design”? There isn’t one answer. Often times something that is appealing to one person may be extremely unappealing to another. Despite this fact, there are several things that a high-quality design should have:
Balance. Balance refers to the equal distribution of the heavy and the light elements on a single page.
Unity. Unity keeps all of the similar elements in the website alike and those that are diverse further apart; everything should be pulled into one integrated whole.
Emphasis. Emphasis involves the main points where the eye is drawn into the design; also known as “focal points”.
Contrast. Not just color contrast, but also contrasting shapes, sizes, textures, and even typography.
Rhythm. Also known as repetition, rhythm brings internal consistency into your web design.
Stage 5: Attention to detail
When professionally designing a website, every little detail is thought out and planned. Should there be a line above the headers, and if so, why? If you use rounded corners for your main body, should you be consistent and use rounded corners for everything else? Does your logo look better with a reflection underneath? The only way to answer any of these questions is to experiment. Sometimes the best results come from accidental experimentation. Don’t always be happy with the first design. Work to improve upon the design and go through a few revisions, each time asking yourself “What can be done to make the design look better?”, be more consistent, and most importantly, give your website a stronger identity and image.
Remember: Less is more. Use details, but don’t abuse details.
Stage 6: Well written, interesting, grammatically-correct content
One thing that greatly compromises the quality and credibility of a website is poorly written, grammatically incorrect, misspelled content. We will run through our content a few times to confirm that everything makes sense, is interesting, and is spelled correctly. We will look more professional and people will take what we have to say more seriously.