Web Design
Principles
Designing a Website
When setting out to design a new website, we have plenty of decisions
to make. Standard web design principles offer us some guidance on
key aspects, such as:
◼ Choice of a site color scheme.
◼ Choice of text font and size.
◼ Placeholder text.
◼ Use of white space.
◼ Location of navigation menus.
◼ Planning for different browsers and screen resolutions.
◼ Testing
Choosing a Color Scheme
The background colors and graphics we use have a tremendous effect
on the mood evoked for our visitors. We can use a color wheel to assist
us with making selections:
Lime Yellow
We should limit the number of main
colors on our site to four (excluding
black and white).
Aqua Red
Color selection should always be made
with our target audience in mind. A
color scheme for a site aimed at teens
would be very different than one
targeted at business customers.
Blue Fuchsia
Complementary Color Scheme
Complementary colors are directly across from each other on the color
wheel:
Lime Yellow
Aqua Red
This strong contrast lends a
vibrant, energetic feeling to a site.
Blue Fuchsia
Triad Color Scheme
Triads are three different colors equidistant from one another on the
color wheel:
Lime Yellow
Aqua Red
Color triads offer a vibrant feel
with a lot of color diversity.
Blue Fuchsia
Analogous Color Scheme
Analogous colors are those that are next to each other on the color
wheel:
Lime Yellow
Aqua Red
Analogous colors are pleasing to
the eye and make for a peaceful,
serene design.
Blue Fuchsia
Choosing Fonts and Sizes
When choosing fonts, font sizes, and text colors for our site, we should
keep the following tips in mind:
◼ Many designers use two different fonts for their sites: one for headings and
one for regular body text.
◼ Font size must be large enough to read easily. Consider 12px to be the
minimum acceptable size.
◼ Black text on a white background is the most common. However, any light
color text with a dark background or dark color text with a light background
can be acceptable, provided there is strong contrast.
◼ Avoid using bright colors for text.
◼ Avoid underlining text or making text blue for emphasis, as this can easily
be mistaken for link text. Use bold or italics for emphasis instead.
Placeholder Text
Often when designing a web page, we don't have our text content written
yet, but we want to see a mock-up of how text will look on the page. In
these cases, we can use the "Lorem Ipsum" text temporarily:
"Lorem Ipsum" is text in Latin
that we copy and paste into our
pages for testing. A copy is
available free at lipsum.com and
many other sites.
White Space
White space is the space between the elements of your web page. It
does not literally have to be white; it can be the color of your background:
Too many elements crammed onto a page can be overwhelming to the visitor.
Plenty of white space makes for an uncluttered and easy-to-read page.
Navigation Menus
Most websites have their navigation links across the top or down the left
side of the screen:
The logo or name of the
site in the header is
traditionally a link back
to the home page.
Navigation menus
should be consistent on
all pages of a site.
More Design Tips
Here are a few more design tips to bear in mind when setting out to
build a website:
◼ Aim for consistency in the look and feel of the site. Logos, headers, footers,
and navigations bars should reside in the same spot from page to page, and
site colors and text should remain consistent site-wide.
◼ Align groups of elements horizontally or vertically on the page. Alignment
makes a site both easier to use and more visually appealing.
◼ Always proofread your site content. There's no excuse to have misspelled
words or grammatical errors. Such errors reflect poorly on you as a
designer.
Reference:
https://www.ttsdschools.org/site/handlers/filedownload.ashx?moduleinstancei
d=565&dataid=3264&FileName=23--Web-Design-Principles.ppt
