Post on 26-Dec-2015
July 2007 PvT, EBUS325 CTU 1
Successful Website Layout
exploring Web Design
Chapter 2
exploring Web Design
Chapter 2
July 2007 PvT, EBUS325 CTU 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.
July 2007 PvT, EBUS325 CTU 3
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 2007 PvT, EBUS325 CTU 4
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
July 2007 PvT, EBUS325 CTU 5
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 2007 PvT, EBUS325 CTU 6
Classic Inverted L Shape
July 2007 PvT, EBUS325 CTU 7
The Top Header
July 2007 PvT, EBUS325 CTU 8
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 2007 PvT, EBUS325 CTU 9
The Side Navigation
July 2007 PvT, EBUS325 CTU 10
Box
July 2007 PvT, EBUS325 CTU 11
Classic Header, Content, and Footer
July 2007 PvT, EBUS325 CTU 12
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 2007 PvT, EBUS325 CTU 13
Left-Justified
July 2007 PvT, EBUS325 CTU 14
Right-Justified
July 2007 PvT, EBUS325 CTU 15
No Interface, Just White Space
July 2007 PvT, EBUS325 CTU 16
Full Design, No Room for White Space
July 2007 PvT, EBUS325 CTU 17
Middle Interface
July 2007 PvT, EBUS325 CTU 18
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 2007 PvT, EBUS325 CTU 19
The Classic Black Site with Green or Red Text
July 2007 PvT, EBUS325 CTU 20
3D Design
July 2007 PvT, EBUS325 CTU 21
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 2007 PvT, EBUS325 CTU 22
Horizontal Scrolling
July 2007 PvT, EBUS325 CTU 23
Unconventional Styles
July 2007 PvT, EBUS325 CTU 24
Always Keep the Principles of Design
in Mind
July 2007 PvT, EBUS325 CTU 25
Template
Resource
s
» http://www.4templates.com/view/web/» http://www.4templates.com/view/web/
July 2007 PvT, EBUS325 CTU 26
http://www.freesitetemplates.com/
More Template Resources
Design/Layout Ideas
July 2007 PvT, EBUS325 CTU 27
http://www.entheosweb.com/photoshop_templates/default.asp