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

July 2007PvT, EBUS325 CTU2 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.

July 2007PvT, EBUS325 CTU3 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.

July 2007PvT, EBUS325 CTU4 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…. Logo Navigation Content

July 2007PvT, EBUS325 CTU5 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

July 2007PvT, EBUS325 CTU6 Classic Inverted L Shape

July 2007PvT, EBUS325 CTU7 The Top Header

July 2007PvT, EBUS325 CTU8 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.

July 2007PvT, EBUS325 CTU9 The Side Navigation

July 2007PvT, EBUS325 CTU10 Box

July 2007PvT, EBUS325 CTU11 Classic Header, Content, and Footer

July 2007PvT, EBUS325 CTU12 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

July 2007PvT, EBUS325 CTU13 Left-Justified

July 2007PvT, EBUS325 CTU14 Right-Justified

July 2007PvT, EBUS325 CTU15 No Interface, Just White Space

July 2007PvT, EBUS325 CTU16 Full Design, No Room for White Space

July 2007PvT, EBUS325 CTU17 Middle Interface

July 2007PvT, EBUS325 CTU18 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.

July 2007PvT, EBUS325 CTU19 The Classic Black Site with Green or Red Text

July 2007PvT, EBUS325 CTU20 3D Design

July 2007PvT, EBUS325 CTU21 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.

July 2007PvT, EBUS325 CTU22 Horizontal Scrolling

July 2007PvT, EBUS325 CTU23 Unconventional Styles

July 2007PvT, EBUS325 CTU24 Always Keep the Principles of Design in Mind

July 2007PvT, EBUS325 CTU25 Template Resource s »

July 2007PvT, EBUS325 CTU26 More Template Resources

Design/Layout Ideas July 2007PvT, EBUS325 CTU27 fault.asp