Layout options

 

When designing you generally have these layout options. Using any of these patterns often will have pros/cons and consequences on the flow and rest of the page design. Possible factors/pro-con considerations influencing your decision are:

  • real-estate  (and fold)
  • visibility/prominence
  • suitability
  • loss of orientation
  • convention versus intuition

 

Vertical layouts

Vertical tabs

 

Cards

google-now-cards-600x318

 

 

 

CON: Everything is shown expanded resulting in information overload and clutter.
PRO: No sub-navigation is needed

 

Accordions   –  popular with mobile  (risks)

Anchor links –  https://www.nngroup.com/articles/in-page-links/

Carousel

  • Warning: http://bradfrostweb.com/blog/post/carousels/

‘More details’ link (half-way accordion)

 

Horizontal layouts

Horizontal tabs

Row of links

Row of buttons

Thumbnails

 

 

Other layouts

Rollover tooltip / toast message

Lightbox

Navigate to a different page

‘next’ button

Progressive menu (or expandable tree)  –  popular with mobile

Filters   (or row of toggles)

Swap content  (flip div)

A combination   –   e.g.

, expand an accordion, slider/carrousel, …  (for lightbox overlays that appear after a user clicks something)

 

Some things to note

NOTE:

  • Tabs can also look like buttons or large links
  • Re-use page templates  (see Consistency post)

 

ENIMAGE1346765261199

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Further reading:

http://www.smashingmagazine.com/2009/05/19/8-layout-solutions-to-improve-your-designs/

http://bradfrost.github.io/this-is-responsive/patterns.html

http://designingwebinterfaces.com/essential_controls

https://www.patternfly.org/wikis/patterns/pattern-development/pattern-whiteboards/secondarylocal-navigation/

 

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: