Layout
Download
1 / 62

Today - PowerPoint PPT Presentation


  • 161 Views
  • Uploaded on

Layout and Grid-based Design IS 403 – Fall 2013 12. Today. FREEDOM From HTML From user-centered design basics Next few weeks Basics of visual design Making sites that look good (and work well).

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' Today' - chaeli


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript

Layout and Grid-based DesignIS 403 – Fall 2013 12


Today
Today

  • FREEDOM

    • From HTML

    • From user-centereddesign basics

  • Next few weeks

    • Basics of visualdesign

    • Making sites that look good (and work well)


Comments on a1
Comments on A1

  • Back after class (75% got an A or A-, the rest B or B-)

  • In general, good, but a few places to improve

    • How did tasks map to your comments?

    • Use images to help, not just eye candy

    • Pick sites that you have something to say about

    • Writing quality

      • Run on sentences, grammar, etc.

      • Too many words

      • Sentences that don’t say anything


Writing tips
Writing tips

  • Don’t speak for users that you don’t know

    • “this will be confusing to most users”

  • Simple sentences

    • “the main home page displayed a highly contrasted scheme with light background and dark text that enabled easy reading”

    • “the home page had a high-contrast color scheme that was easy to read”


Writing help
Writing help

  • UMBC writing center

    • http://umbc.edu/lrc/writing_center.html

  • Get friends/family to proofread

  • More drafts

    • More drafts

    • More drafts

  • I will look at writing during office hours (or by appointment)


Upcoming
Upcoming

  • Thursday 10/10: Intro to type

  • Tuesday 10/15: A4 demos in class

  • Thursday 10/17: Guest lecture

    • Shaun at youth STEM mentoring event

  • Tuesday 10/22: Guest lecture

    • Shaun at ASSETS ’13 conference


Why layout matters
Why layout matters

  • Lead the eye

    • Reading order

  • What goes together?

    • Things that go togethershould look that way

    • Things that don’t…shouldn’t

  • And maybe it will look nice too…


The non designer s design book
The Non-Designer’s Design Book

It’s really good

You should buy it



Robin williams s principles of design1
Robin Williams’s principles of design

Contrast

Alignment

Repetition

Proximity


Contrast
Contrast

“If two items are not exactly the same, then make them different. Really different.”


Contrast1
Contrast

  • “If two items are not exactly the same, then make them different. Really different.”

  • How can items differ?

    • Color (light vs. dark, bright vs. muted)

    • Size

    • Weight (heavy/bold or light)

    • Border effects etc.


Repetition
Repetition

  • “Repeat some aspect of the design throughout the entire piece.”

  • Why?

    • Create a consistent “design language”

    • Give readers something familiar to latch on to


Proximity
Proximity

“Robin’s Principle of Proximity states that you group related items together, move them physically close to each other so the related items are seen as one cohesive group rather than a bunch of unrelated bits.”


Alignment
Alignment

“Nothing should be placed on the page arbitrarily. Every item should have a visual connection with something else on the page.”


Center alignment
Center alignment

Tyger! Tyger! burning bright

In the forests of the night:

What immortal hand or eye

Could frame thy fearful symmetry?

In what distant deeps or skies

Burnt the fire of thine eyes?

On what wings dare he aspire?

What the hand dare sieze the fire?


Center alignment1
Center alignment

Tyger! Tyger! burning bright

In the forests of the night:

What immortal hand or eye

Could frame thy fearful symmetry?

In what distant deeps or skies

Burnt the fire of thine eyes?

On what wings dare he aspire?

What the hand dare sieze the fire?


Center alignment2
Center alignment

And what shoulder, & what art

Could twist the sinews of thy heart?

And when thy heart began to beat

What dread hand? & what dread feet?

What the hammer? what the chain?

In what furnace was thy brain?

What the anvil? What dread grasp

Dare its deadly terrors clasp?


Center alignment3
Center alignment

And what shoulder, & what art

Could twist the sinews of thy heart?

And when thy heart began to beat

What dread hand? & what dread feet?

What the hammer? what the chain?

In what furnace was thy brain?

What the anvil? What dread grasp

Dare its deadly terrors clasp?


White space
White space

Literally just empty space in the document

Helps “chunk” related items

Space around the edges help with reading too


White space1
White space

Literally just empty space in the document

Helps “chunk” related items

Space around the edges help with reading too


Is this all subjective
Is this all subjective?

  • Yes, but there are useful principles and guidelines for design

  • For this class: be able to justify your design decisions based on readings or principles

  • Breaking design rules can be good

    • Especially to attract attention



Thumbnail sketching
Thumbnail sketching

  • Sketch to get the major points of the piece

    • But not get bogged down by details


Let s try it
Let’s try it

Take this boring business card and spice it up with contrast, alignment, repetition, proximity

4 minutes

(design one side only)


Your Name Here

IS 403 student

Skills: UI design, HTML and CSS, user-centered design, prototyping

[email protected]

http://umbc.edu/~yourusername


Your Name Here

IS 403 student

Skills: UI design, HTML and CSS, user-centered design, prototyping

[email protected]

http://umbc.edu/~yourusername

Your Name Here

IS 403 student

Skills: UI design, HTML and CSS, user-centered design, prototyping

[email protected]

http://umbc.edu/~yourusername


The typographic grid

Next:

The typographic grid


The problem
The problem

Why do we need grids?


The problem1
The problem

Complex documents can be too cluttered, difficult to search

Providing a grid structure improves visual search

Grids help even if the user doesn’t notice them


How to do it
How to do it

  • Lay out a page on a 2D-grid

  • Identify an underlying grid structure (rows, columns)

    • Grid cell sizes are multiples of some “base” size

  • Fill grid cells with content

    • Grid columns may not be same size

    • Elements may fill more than one row/column


1x

2x

4x

4x




Ur doin it wrong
urdoin it wrong



Grids in html
Grids in HTML

  • The old way: HTML tables

    • Possible; bad for several reasons

  • Using CSS

    • The “box model”

    • Hard to get right… but some libraries can help

      • http://getbootstrap.com

      • http://960.gs/

      • http://yuilibrary.com/yui/docs/cssgrids/

      • http://www.thegridsystem.org/


Let s try it1
Let’s try it

Put Blackboard on a grid

Next time:Working withtype


ad