Elements of Website Design

Homepage

● first page of the website● website title● general introduction● authors or creators information● date updated● navigation tools listing pages

Pages● viewers are scanners - people scan information

on the internet they don’t read it● less is more - break up information on multiple

pages● consistency - same or similar format to other

pages (just like this presentation)("The 7 Golden Rules For A Great Website.")

Keep page layouts simpleA simple design invites people into your site, allowing them to find what they are looking for and to make a purchase.

● Use easy-to-read fonts. Use sans-serif fonts like Arial or Helvetica and keep type size at 12 point and above so everyone can read your site.

● Allow breathing room. White space can serve to break up overpowering blocks of text and also emphasize important points that you want your reader to see.

● Make smaller pages. You have three seconds for your page to open before your visitors click away. Limit bandwidth by replacing large graphics with smaller ones. Ensure optimal website performance by using a reliable web hosting provider with a superior service level agreement.

Guide customers with good navigationWebsite visitors prefer a simple, intuitive navigation system based on popular, accepted design principles.

● Include links. Provide easy-to-find links to your homepage and main category pages so customers can navigate around your site more easily.

● Place the search tool prominently. A simple search tool can provide a much faster and cleaner experience for shoppers, especially those who already know what they’re looking for.

● Obey the three-click rule. Shoppers generally need to find what they are looking for in three clicks; otherwise they move on. Prominent icons, such as your shopping cart and clearly labeled products and categories, can simplify the search process.

Example

A simple design invites people into your site, allowing them to find what they are looking.

● Use easy-to-read fonts - Use sans-serif fonts like Arial or Helvetica and keep type size at 12 point and above so everyone can read your site.

● Allow breathing room - blank spaces can serve to break up blocks of text and also emphasize important points that you want your reader to see.

● Make simple pages - Pages load faster with fewer pictures. You have three seconds for your page to open before your visitors click away.

Example (reformatted)

Navigation● all pages should be linked to the

navigation bar on the home page● location - along the top or side of the

page● same location on each page

Graphics and Links● include pictures and links to other websites or

documents● different presentational formats

o image - one pictureo gallery - many related pictureso slideshow - multiple pictures are display one

at a time

Appearance

● easy to read fonts● consistent text color and size● similar background on all pages● correct spelling and grammar● appealing colors● relevant pictures - visually explain

Example

Text - size, color, font, color of background, position, grammar, spelling

Picture - quality of picture, size, relevant

Because GIF images have a limited palette of 256 colors, they should almost never be used for phetographs, but they are excellent for graphics that use solid colors, or a limited number of colors. For Photographs, either JPEG compression, or the PNG Lossless format should typically be used.

GIF images have a limited palette of 256 colors, they should almost never be used for Photographs, but they are excellent for graphics that use solid colors, or a limited number of colors. For photographs, either JPEG compression, or the PNG Lossless format should typically be used.

Example (reformatted)

Blog Page

● Let your Audience Speak!● What is a Blog? - personal journal

for questions and comments on a website

● Questions: should be related to the website

Mobile Devices

● Design the website to be viewed on different devices.

● tables, cell phones, etc.

Photos and Pictures● Orientation ● Patterns● Texture● Frames

The quality and uniqueness of pictures can help keep views on your website longer

Orientation

Horizontal vs. VerticalThe best orientation of a photo depends on what is in the picture

pictures can be cropped and resized for the best orientation depending on what is in the picture

The long road ahead

Patterns

Pictures with patterns can make a website more interesting making viewers spend more time on your website

FramesFraming is the technique of drawing attention to the subject of your image by blocking other parts of the image

Credit

● All information that is borrowed from another website or source must be cited.

● MLA format - EasyBib"The 7 Golden Rules For A Great Website."

OPEN Forum. N.p., n.d. Web. 21 Oct. 2014.

"Understanding Composition for Better Website Photos." Inspiration Center. N.p., n.d. Web. 27 Oct. 2014.