July 2007PvT, EBUS325 CTU1 Successful Website Layout exploring Web Design Chapter 2 exploring Web...

July 2007 PvT, EBUS325 CTU 1

Successful Website Layout

exploring Web Design

Chapter 2

exploring Web Design

Chapter 2


The Ideas Behind Web Layout

» Consider what the Website is suppose to do… Most web sites have one thing in common….to make money….» Exception is a personal site…??» Explicitly sell, or for good Public Relations, or for information that may later trigger a sale.

» Do not make the mistake that the Web site is all about design…the real objective of the site is the content and its communication.

» Consider what the Website is suppose to do… Most web sites have one thing in common….to make money….» Exception is a personal site…??» Explicitly sell, or for good Public Relations, or for information that may later trigger a sale.

» Do not make the mistake that the Web site is all about design…the real objective of the site is the content and its communication.


Layout is the First Thing a User Notices

about a Site» Why do we seem to see the same general navigation structure, logo placement, and layout design? Americans read from left to right, top to bottom…so …place the most important stuff first…and often stack it from top to bottom.

The largest element will also stand out

» The culture differences of how people read affects how their pages are arranged.

» Why do we seem to see the same general navigation structure, logo placement, and layout design? Americans read from left to right, top to bottom…so …place the most important stuff first…and often stack it from top to bottom.

The largest element will also stand out

» The culture differences of how people read affects how their pages are arranged.


The Rule of Thirds» Divide the composition into thirds both Horizontally and Vertically…center lines in each third as necessary….this generally makes for a pleasing layout….

» Divide the composition into thirds both Horizontally and Vertically…center lines in each third as necessary….this generally makes for a pleasing layout….

Logo

Navigation Content


The Layouts according to the Book

» The Classic Inverted L Shape Seeing this layout, people know almost instinctively where things are…

Very effective when done right. Most corporations use this layout as it appeals to a large demographic.

» Top Header Probably easiest to use Works great with dropdown Navigation

» The Classic Inverted L Shape Seeing this layout, people know almost instinctively where things are…

Very effective when done right. Most corporations use this layout as it appeals to a large demographic.

» Top Header Probably easiest to use Works great with dropdown Navigation


Classic Inverted L Shape


The Top Header


More Layouts» Side Navigation

Very clean in appearance and simple to use….used a lot..

» Box Shape Content is in the middle of the page with area surrounding it on all four sides

» Classic Header, Content, and Footer Stacking from top to bottom A very basic design style and a great way to organize important information.

» Side Navigation Very clean in appearance and simple to use….used a lot..

» Box Shape Content is in the middle of the page with area surrounding it on all four sides

» Classic Header, Content, and Footer Stacking from top to bottom A very basic design style and a great way to organize important information.


The Side Navigation


Box


Classic Header, Content, and Footer


More Layouts» Left or Right Justified

Content sticking to the left or right of the Browser window.

» White Space Elements are placed and seem to float on a totally white/colored background

» Full Design, not much white space Design covers the entire window and includes some kind of background graphic

A favorite of Web designers Drawbacks:

» Easy to make the design too complicated, too busy

» The audience maybe overwhelmed and confused. Usually used for a Business site if the style fits…insure that navigation is obvious

» Left or Right Justified Content sticking to the left or right of the Browser window.

» White Space Elements are placed and seem to float on a totally white/colored background

» Full Design, not much white space Design covers the entire window and includes some kind of background graphic

A favorite of Web designers Drawbacks:

» Easy to make the design too complicated, too busy

» The audience maybe overwhelmed and confused. Usually used for a Business site if the style fits…insure that navigation is obvious


Left-Justified


Right-Justified


No Interface, Just White Space


Full Design, No Room for White Space


Middle Interface


Last Two Covered in the Book

» Black with Green or Red Text This color combination is most suited for rock bands, sci-fi, video games, gothic sites, and personal sites.

» 3D Design Not very common today due to the real drawback of download speed limitations for 3D images….

Expect to see this more often in the future.

» Black with Green or Red Text This color combination is most suited for rock bands, sci-fi, video games, gothic sites, and personal sites.

» 3D Design Not very common today due to the real drawback of download speed limitations for 3D images….

Expect to see this more often in the future.


The Classic Black Site with Green or Red Text


3D Design


Additional Layout Notes

» Horizontal Scrolling Probably not a good choice in most circumstances….

» Unconventional Styles While these appeal to the graphic design community….be careful when using them for a general audience or even some targeted audiences.

» Horizontal Scrolling Probably not a good choice in most circumstances….

» Unconventional Styles While these appeal to the graphic design community….be careful when using them for a general audience or even some targeted audiences.


Horizontal Scrolling


Unconventional Styles


Always Keep the Principles of Design

in Mind


Template

Resource

s

» http://www.4templates.com/view/web/» http://www.4templates.com/view/web/


http://www.freesitetemplates.com/

More Template Resources

Design/Layout Ideas


http://www.entheosweb.com/photoshop_templates/default.asp

July 2007PvT, EBUS325 CTU1 Successful Website Layout exploring Web Design Chapter 2 exploring Web...

Documents

Transcript of July 2007PvT, EBUS325 CTU1 Successful Website Layout exploring Web Design Chapter 2 exploring Web...