Hi! Startups :)<br />
Andreas Fendri<br />User Interface Designer for Yahoo! Koprol<br />k - @wandre<br />t - @andreasfendri<br />w – andreasfen...
lets talk about<br />User Interface Design<br />
So, What is User Interface Design?<br />the design of apps, websites, etc, with the focus on the user's experience and int...
Visual<br />Design<br />functionality<br />
Five Attributes Usability Aspects<br />Easy to learn<br />Efficient to use<br />Easy to remember<br />Few errors<br />Plea...
The Spectrum of UX  Design<br />
Information Architecture in Functional Wireframes<br />Functional wireframes simply assert the information that will <br /...
Wireframing<br />1. Sketching / Paper Prototyping<br />sketch paper, post-it, mechanic pen, color fine liner, etc<br />2. ...
Designer as IA?<br />DESIGN<br />IA<br />IA + Design<br />
Iterative in UI Design<br />
Suggestions<br />Clear & Appealing Call to Action<br />Progressive Disclosure<br />Optimize active whitespace<br />Technic...
Good in UI, Good in IA<br />
Reuters Mega Drop Down<br />
References<br />uxmag.com , uxmyths.comuxbooth,<br />Inspirations: house of buttons, wireframes gallery (both on tumblr)<b...
Mobile Interface<br />
Thanks :)<br />
Upcoming SlideShare
Loading in...5
×

SparxUp-UI by Andreas Fendri

659

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
659
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
0
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "SparxUp-UI by Andreas Fendri"

  1. 1. Hi! Startups :)<br />
  2. 2. Andreas Fendri<br />User Interface Designer for Yahoo! Koprol<br />k - @wandre<br />t - @andreasfendri<br />w – andreasfendri.com<br />
  3. 3. lets talk about<br />User Interface Design<br />
  4. 4. So, What is User Interface Design?<br />the design of apps, websites, etc, with the focus on the user's experience and interaction. <br />What’s the primary goal?<br />to make the user's interaction as simple and efficient as possible, in terms of accomplishing user goals—what is often calledUSER-CENTERED DESIGN.<br />
  5. 5. Visual<br />Design<br />functionality<br />
  6. 6. Five Attributes Usability Aspects<br />Easy to learn<br />Efficient to use<br />Easy to remember<br />Few errors<br />Pleasant to use<br />Jacob Nielsen, Useit.com<br />
  7. 7. The Spectrum of UX Design<br />
  8. 8.
  9. 9. Information Architecture in Functional Wireframes<br />Functional wireframes simply assert the information that will <br />be displayed on any given page and nothing more.<br />- NishantKothary (MIX Online)<br />
  10. 10. Wireframing<br />1. Sketching / Paper Prototyping<br />sketch paper, post-it, mechanic pen, color fine liner, etc<br />2. Diagramming Software<br />e.gOmniGraffle (Mac), Balsamiq, Axure<br />3. HTML Wireframes<br />Knowledge in HTML & CSS, takes longer, high details<br />
  11. 11. Designer as IA?<br />DESIGN<br />IA<br />IA + Design<br />
  12. 12. Iterative in UI Design<br />
  13. 13. Suggestions<br />Clear & Appealing Call to Action<br />Progressive Disclosure<br />Optimize active whitespace<br />Technical case: Mega Drop Down Menu<br />
  14. 14. Good in UI, Good in IA<br />
  15. 15. Reuters Mega Drop Down<br />
  16. 16. References<br />uxmag.com , uxmyths.comuxbooth,<br />Inspirations: house of buttons, wireframes gallery (both on tumblr)<br />Wikipedia keywords/topics: UI, UX, UxD (User Interaction Design), Iterative Design<br />
  17. 17. Mobile Interface<br />
  18. 18. Thanks :)<br />

×