Web UI & UX design by Ivan Sielegar

Download Web UI & UX design by Ivan Sielegar

Post on 01-Nov-2014

6.891 views

Category:

Design

6 download

DESCRIPTION

 

TRANSCRIPT

  • 1. WEB UI & UX DESIGN FOR (BACK-END) DEVELOPERS Ivan Sielegar Chief Innovation Ofcer @ GOORME (.com) Online Strategist @ NavinoT (.com) Firefox 4 Launch Party / Surabaya / May 4th, 2011Thursday, May 5, 2011
  • 2. START ABOUT ME 10+ Years Experience Not as professional Forget formal education Master in Structural Engineering Web Designer: Second on-campus job First job was a Gym Front Desk. ID Please? :P Dont trust me! Just listen and think about it... Ivan Sielegar / Navinot.com / Goorme.com Firefox 4 Launch Party / Surabaya / May 4th, 2011 Firefox 4 Launch Party / Surabaya / May 4th, 2011Thursday, May 5, 2011
  • 3. START INTRO... Why for Developers? Design ignorance to the max True Web Designers are Rare Graphic Design vs. Computer Science Art vs. Logic HTML & CSS are OK. JavaScript? No Way! Lets create some logic to understand this Ivan Sielegar / Navinot.com / Goorme.com Firefox 4 Launch Party / Surabaya / May 4th, 2011 Firefox 4 Launch Party / Surabaya / May 4th, 2011Thursday, May 5, 2011
  • 4. START USER INTERFACE? The user interface is the space where interaction between humans and machines occurs. The goal of interaction between a human and a machine at the user interface is effective operation and control of the machine, and feedback from the machine which aids the operator in making operational decisions. - Wikipedia - Ivan Sielegar / Navinot.com / Goorme.com Firefox 4 Launch Party / Surabaya / May 4th, 2011 Firefox 4 Launch Party / Surabaya / May 4th, 2011Thursday, May 5, 2011
  • 5. START DESIGN (NOT ART) Its about communication Easier to justify Some theory available Not about personal opinion Not always black & white Practice & experience matter Ivan Sielegar / Navinot.com / Goorme.com Firefox 4 Launch Party / Surabaya / May 4th, 2011 Firefox 4 Launch Party / Surabaya / May 4th, 2011Thursday, May 5, 2011
  • 6. ? CONCEPT GETTING STARTED What, Who, Where and How? The (Business) Plan Is The Content Ready Any Existing Guidelines / Requirements? Special Campaign / Message? Ivan Sielegar / Navinot.com / Goorme.com Firefox 4 Launch Party / Surabaya / May 4th, 2011 Firefox 4 Launch Party / Surabaya / May 4th, 2011Thursday, May 5, 2011
  • 7. CONCEPT RESEARCH What are the boundaries? Screen resolutions Browsers THANKS TO Flash enabled? FIREFOX Special plugins? User behaviors Ivan Sielegar / Navinot.com / Goorme.com Firefox 4 Launch Party / Surabaya / May 4th, 2011 Firefox 4 Launch Party / Surabaya / May 4th, 2011Thursday, May 5, 2011
  • 8. BLOG CONCEPT NEWS PORTAL CONTENT RULES! PHOTO BLOG PORTFOLIO Blog? COMPARISON SHOPPING What about photo blog? COMPANY PROFILE Content Dynamics MARKETPLACE How often being updated? ONLINE STORE Content Types SOCIAL NETWORK Text, Images or Videos FINANCE User Interaction Flow 1 or 2 layer deep? GAMES Ivan Sielegar / Navinot.com / Goorme.com JOB BOARD Firefox 4 Launch Party / Surabaya / May 4th, 2011 Firefox 4 Launch Party / Surabaya / May 4th, 2011Thursday, May 5, 2011
  • 9. CONCEPT INFORMATION ARCHITECTURE Build a Sitemap Main Navigation Information grouping about how users will access the content User Interaction Flow How to checkout? How to jump between pages? How to go back home? Pick a Layout Consider content types & banner ads sizes. Fluid, Fixed, or Grid? Ivan Sielegar / Navinot.com / Goorme.com Firefox 4 Launch Party / Surabaya / May 4th, 2011 Firefox 4 Launch Party / Surabaya / May 4th, 2011Thursday, May 5, 2011
  • 10. WIREFRAME DESIGN: INSIDE OR OUTSIDE? Content Variety How much description? Tech specs? The Highlight Any specic features to showcase? Set Goals for Every Page Set the goals for users to accomplish on every page Set by Priority Sort by priority from the most to the least important Ivan Sielegar / Navinot.com / Goorme.com Firefox 4 Launch Party / Surabaya / May 4th, 2011 Firefox 4 Launch Party / Surabaya / May 4th, 2011Thursday, May 5, 2011
  • 11. WIREFRAME WIRE-FRAMING Plain Sketch Pen & Paper is Best. Speed wise. Content / Information Grouping Title, body, metadata, toolbars, etc. Try as many mockups While still on paper. Dont waste time later. Ivan Sielegar / Navinot.com / Goorme.com Firefox 4 Launch Party / Surabaya / May 4th, 2011 Firefox 4 Launch Party / Surabaya / May 4th, 2011Thursday, May 5, 2011
  • 12. WIREFRAME INFORMATION GROUPING Group by Elements Main content, meta, toolbar, comment, form? Use Color & Spacing Use different color & white space to group contents Ivan Sielegar / Navinot.com / Goorme.com Firefox 4 Launch Party / Surabaya / May 4th, 2011 Firefox 4 Launch Party / Surabaya / May 4th, 2011Thursday, May 5, 2011
  • 13. WIREFRAME ALIGNMENTS Align by Vertical Lines Use imaginary vertical lines as boundaries Space Horizontally Use spacing to separate content horizontally Ivan Sielegar / Navinot.com / Goorme.com Firefox 4 Launch Party / Surabaya / May 4th, 2011 Firefox 4 Launch Party / Surabaya / May 4th, 2011Thursday, May 5, 2011
  • 14. PROTOTYPE & INTEGRATION PROTOTYPE Photoshop PHOTOSHOP HTML & CSS HTML Some JavaScript CSS JAVASCRIPT Highly recommended (to test interaction) Color Scheme Pick some colors to start with COLOR Typography TYPOGRAPHY Font family, font size, heading, body text Ivan Sielegar / Navinot.com / Goorme.com Firefox 4 Launch Party / Surabaya / May 4th, 2011 Firefox 4 Launch Party / Surabaya / May 4th, 2011Thursday, May 5, 2011
  • 15. PROTOTYPE & INTEGRATION COLOR & CONTRAST Color Scheme Pick only a few (http://colourlovers.com should help) Start with Branding Color Ofcial from the client/company Check Contrast background, body text, headings, meta, links Confused with Colors? Do it in greyscale rst! Ivan Sielegar / Navinot.com / Goorme.com Firefox 4 Launch Party / Surabaya / May 4th, 2011 Firefox 4 Launch Party / Surabaya / May 4th, 2011Thursday, May 5, 2011
  • 16. PROTOTYPE & INTEGRATION (MY) +1 RULES Weight of Elements Which one more important? Photo vs. Text Ofcial from the client/company Color & Size Colors & size also decide the importance of an element Bold, Italics, Uppercase (Font) To create difference between text Ivan Sielegar / Navinot.com / Goorme.com Firefox 4 Launch Party / Surabaya / May 4th, 2011 Firefox 4 Launch Party / Surabaya / May 4th, 2011Thursday, May 5, 2011
  • 17. USABILITY TESTING USER EXPERIENCE We just covered all the basics Yes, believe it or not :) It should be enjoyable Even in greyscale! Clear Navigation Information structure is set and things are easy to nd Congrats! Youre a good Web Designer now! In the 90s :) Ivan Sielegar / Navinot.com / Goorme.com Firefox 4 Launch Party / Surabaya / May 4th, 2011 Firefox 4 Launch Party / Surabaya / May 4th, 2011Thursday, May 5, 2011
  • 18. USABILITY TESTING AJAX? YAY! What is this? Asynchronous JavaScript and XML Rich User Interactions More to do, on the same page No Full Page Reloads Saves you bandwidth too! Problem! Page reload is no longer a feedback or conrmation Ivan Sielegar / Navinot.com / Goorme.com Firefox 4 Launch Party / Surabaya / May 4th, 2011 Firefox 4 Launch Party / Surabaya / May 4th, 2011Thursday, May 5, 2011
  • 19. USABILITY TESTING TRANSITIONS, FEEDBACK & CONFIRMATION Loading Animation Simple way to say Wait a minute... Error Messages Oops! But where is it? Whats wrong? Conrmation Messages Is it really saved? Post-Action What if I want to cancel? Undo? Go where? Ivan Sielegar / Navinot.com / Goorme.com Firefox 4 Launch Party / Surabaya / May 4th, 2011 Firefox 4 Launch Party / Surabaya / May 4th, 2011Thursday, May 5, 2011
  • 20. USABILITY TESTING KEEP TESTING & REFINE Prepare for The Unexpected Use your imagination with user interactions General Consensus Do what others have been doing. Safer! Usability Test OK with contrast? Is content highlighted properly? Rene Things Fix and improve for better user experience Ivan Sielegar / Navinot.com / Goorme.com Firefox 4 Launch Party / Surabaya / May 4th, 2011 Firefox 4 Launch Party / Surabaya / May 4th, 2011Thursday, May 5, 2011
  • 21. END UI & UX IN SHORT Keep It Simple Dont try to create new rules Some Theories Color theory, maintain contrast, weight, and alignment AJAX Pay attention to transitions, feedback and conrmations Ivan Sielegar / Navinot.com / Goorme.com Firefox 4 Launch Party / Surabaya / May 4th, 2011 Firefox 4 Launch Party / Surabaya / May 4th, 2011Thursday, May 5, 2011
  • 22. END Phew! Im Done! Question? Ivan.Sielegar@gmail.com Twitter? @IvanSielegar Blog? http://navinot.com Project? http://goorme.com Ivan Sielegar / Navinot.com / Goorme.com Thank You! Firefox 4 Launch Party / Surabaya / May 4th, 2011 Firefox 4 Launch Party / Surabaya / May 4th, 2011Thursday, May 5, 2011