Page Grids

1.- Page Grids- Divine Proportion

What exactly is Golden ratio?

• 1.618033988749895  aprox -> 1.618
• Related to the sum of the Fibonacci sequence

Page Grids - Rule of thirds

• Alternative to divine proportion.The four points formed by the intersections of these lines can be used to place the most important elements - the elements you’d like to give a prominent or dominant position in your designs.
• Be careful with responsive design. Responsiveness should respect this rules for aesthetic results.

Page Grids

• Websites have a need for consistency for:
• main areas (ads, branding, navigation, and general content)
• Even for unconventional layout designs.
• While there are a few variations of this design pattern, the following generally applies:
• Branding(logo, tagline, etc.) are at the top left
• Navigation is towards the top, preferably as left as possible.
• Content lies within the middle of the page.
• Adds are to the right, in a secondary spot
• Footer content includes things that are not essential, but should still be usable and interesting since it is the last impression on the reader

2.- Vertical navigation Bar

• Left or right navigation bars have become less and less common as we tend towards more simplistic websites and horizontal navigation
• Vertical sidebar navigation is perfect for more complex navigation
• Take Amazon.com for example

3.- Horizontal navigation bar

• More simple forms of navigation (less than 10 categories), this interface can be a huge space saver.

4.- Modular Tabs

• Modular tabs can compact extra content in a clean and organized way, and hide it until it is wanted by the user.

5.- Breadcrumbs

• Breadcrumbs (a path which shows from where one came from) are a visual representation of navigational hierarchy.

6.- Archives

• A smart archive design pattern though can display all the content on one page, by title, date and possibly category.

7.- Content Footers

• Fat footer content is best for leading the user to new content at the end of the page, and so should therefore be easily scannable and in a format that is intriguing.

8.- Pagination

• UI Patterns describes pagination use in terms of design solution as follows.
• bits that are manageable for the user to read an cope with
• conveys information to the user about, how big dataset is

9.- Lazy registration

• Interface design is all about not making the user think, and a lazy registration page can help in doing just that.

10.- Form Wizard

• Wizards break down and label steps, so the user can identify where they are in the process and how much more work is required.

11.- Hierarchical actions

• Simple things such as a shape around a primary action and plain text for the secondary action, change in color vibrancy
• Create hierarchical order between two or more items
• People is lazy. Use the fact that most people will only read/notice big and shiny things to your advantage
  
  

  

   An example of a website with poor design, this is something me must avoid