Web UI & UX design by Ivan Sielegar

WEB UI & UX DESIGN FOR (BACK-END) DEVELOPERS Ivan Sielegar Chief Innovation Ofﬁcer @ GOORME (.com) Online Strategist @ NavinoT (.com) Firefox 4 Launch Party / Surabaya / May 4th, 2011Thursday, May 5, 2011

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 ❖ Don’t 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

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! ❖ Let’s 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

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

START DESIGN (NOT ART) ❖ It’s 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

? 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

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

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

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

WIREFRAME DESIGN: INSIDE OR OUTSIDE? ❖ Content Variety How much description? Tech specs? ❖ The Highlight Any speciﬁc 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

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. Don’t 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

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

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

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

PROTOTYPE & INTEGRATION COLOR & CONTRAST ❖ Color Scheme Pick only a few (http://colourlovers.com should help) ❖ Start with Branding Color Ofﬁcial 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

PROTOTYPE & INTEGRATION (MY) +1 RULES ❖ Weight of Elements Which one more important? ❖ Photo vs. Text Ofﬁcial 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

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! You’re a good Web Designer now! In the 90’s :) 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

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 conﬁrmation 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

USABILITY TESTING TRANSITIONS, FEEDBACK & CONFIRMATION ❖ Loading Animation Simple way to say “Wait a minute...” ❖ Error Messages Oops! But where is it? What’s wrong? ❖ Conﬁrmation 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

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? ❖ Reﬁne 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

END UI & UX IN SHORT ❖ Keep It Simple Don’t try to create new rules ❖ Some Theories Color theory, maintain contrast, weight, and alignment ❖ AJAX Pay attention to transitions, feedback and conﬁrmations 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

END Phew! I’m 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

http://www.suwec.com	29
http://rumahdot.com	19

Web UI & UX design by Ivan Sielegar

by imammtq

Accessibility

Categories

Upload Details

Usage Rights

2 Embeds 48

Statistics