User Interface Trends09

Loading...

Flash Player 9 (or above) is needed to view presentations.
We have detected that you do not have it on your computer. To install it, go here.

1 comments

Comments 1 - 1 of 1 previous next Post a comment

  • + danielspronk Daniel Spronk 5 months ago
    Dang my notes weren’t even exported, so I thought I’d put them down here in a comment.
    (note to SlideShare: would be great to support noted in iWork Keynote ’09 or being able to add them later on.

    Slide 3
    twitter @danielspronk, founder of eight media, total experience and soocial and gilana! ;)

    Slide 4
    ui trends 2009 - not just looking for practical tips but we’re going to look at the usability principles driving these trends

    Slide 5
    apple got it right - lots of mp3 players out there but we all bought iPod’s because the interface was simple and beautiful. it’s the interface, stoopid.

    Slide 6
    experience is more important than features
    easiest way to get simplicity is to reduce
    reduce noise!

    Slide 7
    first law of simplicity - reduce - use the methodology ‘she’: shrink - hide - embody
    book tip: the laws of simplicity by John Maeda

    Slide 8
    Interface quiz: which option is better and why?
    (2nd option: visual distinction, primary action gets more attention..)

    Slide 9
    book tip: Don’t make me think by Steve Kruger

    Slide 10
    ui trends in 2009 were started in 2008 but they’re maturing in 2009.

    Slide 12
    modal windows - good example of “SHE”
    when should you consider to use modal windows?

    Slide 13 & 14
    Sign-up forms and login pages:
    no loading new pages - user is focused on action in relevant context

    Slide 16
    in-line help functions - great for modal windows

    Slide 17
    typography is coming to the forefront of interface design

    Slide 18
    big is the new black

    Slide 19
    fat big fonts - your content is the design now

    Slide 20
    big fat headlines AND big font size in body - you find yourself reading the whole page now

    Slide 21
    big headlines and big font for blog (16pt), right line widths

    Slide 22
    learn your typography. we can learn a lot from the art of typography for print.
    learn which line widths are suited for the screen, learn to look at kerning when using font replacements. leading is key to making body content readable.

    Slide 23
    book tip: the fundamentals of typography Gavin Ambrose

    Slide 26
    sifr made using non-system fonts feasible (SEO friendly)
    this gives designers more freedom and more experience for the user
    new technology: cufon (>3x faster than SiFR)
    Excited about Typekit by Jeffrey Veen: true freedom for fonts

    Slide 27
    important trend because it’s focused on communication

    Slide 28
    homepages are evolving, thank goodness. We don’t want to see ‘welcome’ introduction pieces anymore and list of ‘news’ articles on the homepage. Tell your visitors what you’re about and what you’re good at. Start with the needs the visitor might have. The homepage is the place where you and the user need to ‘match’.

    Slide 29
    big headlines - portfolio previews are connected to the content of the headlines.

    Slide 30
    companies need to think about what they want to communicate on the homepage - think of a cool concept. and write really good copy to make it hit home.

    Slide 31
    content and usability go hand in hand... good copy is more essential than top notch usability

    Slide 33
    wonderfully designed icon’s and illustrations
    adds a lot to the experience of the website

    Slide 34
    lots of detail and attention to headers of typography, emboss - cut-outs, inner shadows and gradients...yummy!

    Slide 35
    some go all-out on headers - fantastic for experience oriented websites.

    Slide 36
    ‘hd’ grids...i know it sounds lame...but proportion have shifted from 4:3 to 16:9 and lately to 16:10 on computer screens. we have a lot more horizontal space to use.

    Slide 37
    law 2 of simplicity: organizing. good organizing makes a lot of elements seems less.
    we should use the horizontal space well - we’ve got landscape screens now!
    these 960 grids are great and cater well to multi-column layouts

    Slide 38
    more multi-collumned designs - lots of trends here:
    big headlines, rich illustrations, lighting, lots of whitespace, separate section for navigation and a copy oriented design.

    Slide 39
    great resource for your 960 grids and css
Post a comment
Embed Video
Edit your comment Cancel

Notes on slide 1



twitter @danielspronk, founder of eight media, total experience and soocial and gilana! ;)

ui trends 2009 - not just looking for practical tips but we’re going to look at the usability principles driving these trends

apple got it right - lots of mp3 players out there but we all bought iPod’s because the interface was simple and beautiful. it’s the interface, stoopid.

experience rich, poor in features
easiest way to get simplicity is to reduce
reduce noise!

first law of simplicity -reduce - use the methodology ‘she’: shrink - hide - embody
book tip: the laws of simplicity by John Maeda

first law of simplicity -reduce - use the methodology ‘she’: shrink - hide - embody
book tip: the laws of simplicity by John Maeda

first law of simplicity -reduce - use the methodology ‘she’: shrink - hide - embody
book tip: the laws of simplicity by John Maeda

which option is better and why?

book tip: Don’t make me think by Steve Kruger

ui trends in 2009 were started in 2008 but they’re maturing in 2009.


modal windows - good example of “SHE”
when should you consider to use modal windows?

contact forms

no loading new pages - write your message in relevant context

sign up & log in forms

in-line help functions - great for modal windows

typography is coming to the forefront of design

big is the new black

fat big fonts - your content is the design now

big fat headlines AND big font size in body - you actually read it now!

big headlines and big font for blog (16pt), right line widths

learn your typography. we can learn a lot from the art of typography for print.
learn which line widths are suited for the screen, learn to look at kerning when using font replacements.
leading is key to making body content readable.

book tip: the fundamentals of typography Gavin Ambrose



sifr made using non-system fonts feasible (SEO friendly)
this gives designers more freedom and more experience for the user
new tehcnology: cufon (>3x faster than SiFR)
Excited about Typekit: true freedom for fonts

this is a really nice trend

homepages are evolving, thank goodness. We don’t want to see ‘welcome’ introduction pieces anymore and list of ‘news’ articles on the homepage. Tell your visitors what you’re about and what you’re good at. Start with the needs the visitor might have. The homepage is the place where you and the user need to ‘match’.
weg met welkomsteksten en nieuwsberichten

big headlines - portfolio previews are connected to the content of the headlines.

companies need to think about what they want to communicate on the homepage - think of a cool concept. and write really good copy to make it hit home.

content and usability go hand in hand... good copy is more essential than top notch usability


fantastically designed icon’s and illustrations
adds a lot to the experience of the website

lots of detail and attention to headers of typography, emboss - cut-outs, inner shadows and gradients...yummy!

some go all-out on headers - fantastic for experience oriented websites.

‘hd’ grids...i know it sounds lame...but proportion have shifted from 4:3 to 16:9 and lately to 16:10 on computer screens

law 2 of simplicity: organizing. good organizing makes a lot of elements seems less.
we should use the horizontal space well - we’ve got landscape screens now!
these 960 grids are great and cater well to multi-column layouts

more multi-collumned designs - lots of trends here:
big headlines, rich illustrations, lighting, lots of whitespace, separate section for navigation and a copy oriented design.

great resource for your grids and css


21 Favorites & 1 Event

User Interface Trends09 - Presentation Transcript

  1. UI TRENDS FOR WEB 2.0
  2. DANIEL SPRONK
  3. @danielspronk
  4. UI TRENDS TOP 5
  5. THE INTERFACE IS THE SYSTEM
  6. THE INTERFACE IS THE SYSTEM
  7. SIMPLICITY
  8. REDUCE
  9. REDUCE
  10. REDUCE
  11. 1. 2.
  12. UI TRENDS 2009
  13. 1 MODAL WINDOWS
  14. WHEN TO USE
  15. 2 EXPERIENCE TYPOGRAPHY
  16. BIG
  17. FONT REPLACEMENT
  18. 3 INTRODUCTION HEADERS
  19. §
  20. CONTENT IS KING
  21. 4 RICHNESS IN DETAILS
  22. 5 HD GRIDS
  23. THANK YOU • @danielspronk • linkedin/in/danielspronk • www.soocial.com • www.eight.nl • www.totalexperience.nl

+ Daniel SpronkDaniel Spronk, 5 months ago

custom

1232 views, 21 favs, 3 embeds more stats

A presentation on the top 5 trends for User Interfa more

More info about this document

CC Attribution-ShareAlike LicenseCC Attribution-ShareAlike License

Go to text version

  • Total Views 1232
    • 1226 on SlideShare
    • 6 from embeds
  • Comments 1
  • Favorites 21
  • Downloads 153
Most viewed embeds
  • 3 views on http://www.deondernemers.nl
  • 2 views on http://www.slideshare.net
  • 1 views on http://www.thenextweb.eu

more

All embeds
  • 3 views on http://www.deondernemers.nl
  • 2 views on http://www.slideshare.net
  • 1 views on http://www.thenextweb.eu

less

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate. If needed, use the feedback form to let us know more details.

Cancel
File a copyright complaint
Having problems? Go to our helpdesk?

Categories