Scribd
Upload
26 views

Back To Design: Grids: INFO 1300: Introductory Web Design and Programming

This document discusses using grids in web design. It recommends designing pages with the user's experience in mind using personas. It then covers principles like contrast, repetition, alignment and proximity. It introduces grids and the golden ratio, noting how the golden ratio appears in nature and art. Grids can help design pages that are visually pleasing and guide users to find information easily.

Uploaded by

Mark Lu
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
26 views

Back To Design: Grids: INFO 1300: Introductory Web Design and Programming

This document discusses using grids in web design. It recommends designing pages with the user's experience in mind using personas. It then covers principles like contrast, repetition, alignment and proximity. It introduces grids and the golden ratio, noting how the golden ratio appears in nature and art. Grids can help design pages that are visually pleasing and guide users to find information easily.

Uploaded by

Mark Lu
Copyright
© Attribution Non-Commercial (BY-NC)
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 25

Back to Design: Grids

INFO 1300: Introductory Web Design and Programming

Its easy to get obsessed with the technology

And forget first principles

User-centered design
a.k.a. how to make a page people really love

Design your page with your users eyes.

This is harder than it sounds.

Persona
A persona is a concrete, fleshed-out individual you are designing the site for Define: what the person is like, what kind of personality they have, what they want from the site, how they use it 2-4 diverse personas guide design process

Think about using your technical tools to accomplish your goals

Themes and Metaphors

Information Architecture/ Navigation

Accessibility

C.R.A.P. Principles
Contrast make different things REALLY different Repetition provide some consistency of elements Alignment give the eyes something to rely on Proximity put related things together

Layout and Grids

Grids and the Golden Ratio

Golden Ratio

Fibonaccis Sequence 1, 1, 2, 3, 5, 8, 13, 21, 34, 55, 89, . Ratio of (n-1)/n (e.g., 55/89) converges to 0.618

Nature and the Golden Ratio

Art and the Golden Ratio

Beauty and the Golden Ratio

Rationalism/Standardization in Design

Grids and page design

Grids and page design

24 columns

Nested frames in golden ratio Main content is in larger frame

Remember the box model

Grid Frameworks
Packages of CSS code on which to build grid-based design http://www.blueprintcss.org Blueprint grid Blueprint sample Also http://developer.yahoo.com/yui/grids/

Lets look at some examples


http://www.instantshift.com/2009/05/21/gridstyle-in-modern-web-design-showcaseand-resources/

Wrap-up
CSS, golden ratio, and grids help you:
Design pages that are easy on the eyes Help guide users to information of interest Match natural aesthetics

You might also like