Week 6-Layout-sv

Category: Education

Presentation Description

No description available.


Presentation Transcript


Layout Week 6

Webpages are made up of three parts: :

Webpages are made up of three parts: presentation structure behavior

Screen Resolution or Real Estate:

Screen Resolution or Real Estate Common resolutions for smartphone screens vary from 240×320 to 720×1280. Computer screens can vary (800x600) to 1400 x 1050 pixels and more. Smartphone vary from 240×320 to 720×1280 Android phones 480×800 or 540×960 iPhone 4/4S at 640×960 Galaxy Nexus and HTC Rezound at 720×1280.

Fluid Design :

Fluid Design Also called Liquid Design Refers to design & layout elements that stretch/shrink to fit the user's display As opposed to sites with fixed height and width which are called rigid , or fixed Problem: If text is stretched too long, it gets uncomfortable to read

Rigid Design:

Rigid Design Made to fit a specific resolution Problem: the screen below was made for 1024x768

Content is King:

Content is King Simplifying your site maximizes screen real estate Only include content of direct use to the customer “ Content should account for at least half of a page's design, and preferably closer to 80% .”-- Jakob Nielson

Illustrations & Photographs :

Illustrations & Photographs

Layout Conventions :

Layout Conventions "Good designers borrow, great designers steal.“

Page Names:

Page Names Every page needs a name The name needs to be visible Needs to match what I clicked to get there

LSD Design (Logo, Search, and Directory):

LSD Design (Logo, Search, and Directory) Home page, Logo – tells us were we are Primary Page Navigation moves us forward White-Space visually organizes content Visual cues – tells us were we can go.


Breadcrumbs List all pages the customer visited Customer can revisit any of the pages by clicking the link

Primary Navigation :

Primary Navigation All navigation should have Links to all primary sections Consistent from page to page Horizontal Navigation Font size indicates prominence Position indicates hierarchy Vertical Navigation Stacked boxes Text and box should be clickable

Expanding/Collapsing Menus :

Expanding/Collapsing Menus Section organized as if in outline Icons are used to expand or collapse sections Sections remain expanded once clicked Items with buttons are links and have no subsections.

The Drop-Down Menu :

The Drop-Down Menu Advantage Fun Minimizes use of screen real estate. drop-down menu appears on mouse-over , or hover --that is, when a user positions his/her cursor over an object or link without clicking. Disadvantage Hide secondary sections Customer must remember were link are on page.


Tabs Advantages Everyone understands tabs Hard to miss Suggest physical space.

Shopping Cart Elements :

Shopping Cart Elements Add to cart Contains quantity and add to cart button SSL encryption beyond this point protect customer privacy. View Cart Lists items in cart Change quantity/remove items Option to continue shopping Calculate shipping Usually asks for address or shipping Sign in often requested Billing Information Credit Card / Billing address Final Approval & Confirmation


References http://yahoo.com http://www.apple.com http://www.amazon.com http://www.sony.com http://www.cnn.com http://www.google.com Browser Compatibility Testing with Browser Photo http://www.netmechanic.com/products/browser-index.shtml Bank, Larissa, Create Photoshop Layouts http://www.larabank.com/class/ Steinja http://desource.uvu.edu/dgm/2740/IN/steinja/lessons/

authorStream Live Help