web ui & ux design by ivan sielegar
Post on 01-Nov-2014
6.909 Views
Preview:
DESCRIPTION
TRANSCRIPT
Firefox 4 Launch Party / Surabaya / May 4th, 2011
WEB UI & UX DESIGNFOR (BACK-END) DEVELOPERS
Ivan SielegarChief Innovation Officer @ GOORME (.com)
Online Strategist @ NavinoT (.com)
Thursday, May 5, 2011
Firefox 4 Launch Party / Surabaya / May 4th, 2011
START
Firefox 4 Launch Party / Surabaya / May 4th, 2011
Ivan Sielegar / Navinot.com / Goorme.com
❖ 10+ Years Experience Not as professional
❖ Forget formal educationMaster in Structural Engineering
❖ Web Designer: Second on-campus jobFirst job was a Gym Front Desk. ID Please? :P
❖ Don’t trust me!Just listen and think about it...
ABOUT ME
Thursday, May 5, 2011
Firefox 4 Launch Party / Surabaya / May 4th, 2011
START
Firefox 4 Launch Party / Surabaya / May 4th, 2011
Ivan Sielegar / Navinot.com / Goorme.com
❖ Why for Developers?Design ignorance to the max
❖ True Web Designers are RareGraphic Design vs. Computer Science
❖ Art vs. LogicHTML & CSS are OK. JavaScript? No Way!
❖ Let’s create some logic to understand this
INTRO...
Thursday, May 5, 2011
Firefox 4 Launch Party / Surabaya / May 4th, 2011
START
Firefox 4 Launch Party / Surabaya / May 4th, 2011
Ivan Sielegar / Navinot.com / Goorme.com
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.
USER INTERFACE?
- Wikipedia -
Thursday, May 5, 2011
Firefox 4 Launch Party / Surabaya / May 4th, 2011
START
Firefox 4 Launch Party / Surabaya / May 4th, 2011
Ivan Sielegar / Navinot.com / Goorme.com
❖ It’s about communication
❖ Easier to justify
❖ Some theory available
❖ Not about personal opinion
❖ Not always black & white
❖ Practice & experience matter
DESIGN (NOT ART)
Thursday, May 5, 2011
Firefox 4 Launch Party / Surabaya / May 4th, 2011
CONCEPT
Firefox 4 Launch Party / Surabaya / May 4th, 2011
Ivan Sielegar / Navinot.com / Goorme.com
?❖ What, Who, Where and How?
❖ The (Business) Plan
❖ Is The Content Ready
❖ Any Existing Guidelines / Requirements?
❖ Special Campaign / Message?
GETTING STARTED
Thursday, May 5, 2011
Firefox 4 Launch Party / Surabaya / May 4th, 2011
CONCEPT
Firefox 4 Launch Party / Surabaya / May 4th, 2011
Ivan Sielegar / Navinot.com / Goorme.com
❖ What are the boundaries?
❖ Screen resolutions
❖ Browsers
❖ Flash enabled?
❖ Special plugins?
❖ User behaviors
RESEARCH
THANKS TOFIREFOX
Thursday, May 5, 2011
Firefox 4 Launch Party / Surabaya / May 4th, 2011
CONCEPT
Firefox 4 Launch Party / Surabaya / May 4th, 2011
Ivan Sielegar / Navinot.com / Goorme.com
❖ Blog? What about photo blog?
❖ Content DynamicsHow often being updated?
❖ Content TypesText, Images or Videos
❖ User Interaction Flow1 or 2 layer deep?
CONTENT RULES!BLOG
NEWS PORTALPHOTO BLOG
PORTFOLIOCOMPARISON SHOPPING
COMPANY PROFILEMARKETPLACEONLINE STORE
SOCIAL NETWORKFINANCE
GAMESJOB BOARD
Thursday, May 5, 2011
Firefox 4 Launch Party / Surabaya / May 4th, 2011
CONCEPT
Firefox 4 Launch Party / Surabaya / May 4th, 2011
Ivan Sielegar / Navinot.com / Goorme.com
❖ Build a Sitemap
❖ Main NavigationInformation grouping about how users will access the content
❖ User Interaction FlowHow to checkout? How to jump between pages? How to go back home?
❖ Pick a LayoutConsider content types & banner ads sizes. Fluid, Fixed, or Grid?
INFORMATION ARCHITECTURE
Thursday, May 5, 2011
Firefox 4 Launch Party / Surabaya / May 4th, 2011
WIREFRAME
Firefox 4 Launch Party / Surabaya / May 4th, 2011
Ivan Sielegar / Navinot.com / Goorme.com
❖ Content VarietyHow much description? Tech specs?
❖ The HighlightAny specific features to showcase?
❖ Set Goals for Every PageSet the goals for users to accomplish on every page
❖ Set by PrioritySort by priority from the most to the least important
DESIGN: INSIDE OR OUTSIDE?
Thursday, May 5, 2011
Firefox 4 Launch Party / Surabaya / May 4th, 2011
WIREFRAME
Firefox 4 Launch Party / Surabaya / May 4th, 2011
Ivan Sielegar / Navinot.com / Goorme.com
❖ Plain SketchPen & Paper is Best. Speed wise.
❖ Content / Information GroupingTitle, body, metadata, toolbars, etc.
❖ Try as many mockupsWhile still on paper. Don’t waste time later.
WIRE-FRAMING
Thursday, May 5, 2011
Firefox 4 Launch Party / Surabaya / May 4th, 2011
WIREFRAME
Firefox 4 Launch Party / Surabaya / May 4th, 2011
Ivan Sielegar / Navinot.com / Goorme.com
❖ Group by ElementsMain content, meta, toolbar, comment, form?
❖ Use Color & SpacingUse different color & white space to group contents
INFORMATION GROUPING
Thursday, May 5, 2011
Firefox 4 Launch Party / Surabaya / May 4th, 2011
WIREFRAME
Firefox 4 Launch Party / Surabaya / May 4th, 2011
Ivan Sielegar / Navinot.com / Goorme.com
❖ Align by Vertical LinesUse imaginary vertical lines as boundaries
❖ Space HorizontallyUse spacing to separate content horizontally
ALIGNMENTS
Thursday, May 5, 2011
Firefox 4 Launch Party / Surabaya / May 4th, 2011
PROTOTYPE & INTEGRATION
Firefox 4 Launch Party / Surabaya / May 4th, 2011
Ivan Sielegar / Navinot.com / Goorme.com
❖ Photoshop
❖ HTML & CSS
❖ Some JavaScriptHighly recommended (to test interaction)
❖ Color SchemePick some colors to start with
❖ TypographyFont family, font size, heading, body text
PROTOTYPEPHOTOSHOP
HTMLCSS
JAVASCRIPTCOLOR
TYPOGRAPHY
Thursday, May 5, 2011
Firefox 4 Launch Party / Surabaya / May 4th, 2011
PROTOTYPE & INTEGRATION
Firefox 4 Launch Party / Surabaya / May 4th, 2011
Ivan Sielegar / Navinot.com / Goorme.com
❖ Color SchemePick only a few (http://colourlovers.com should help)
❖ Start with Branding ColorOfficial from the client/company
❖ Check Contrastbackground, body text, headings, meta, links
❖ Confused with Colors?Do it in greyscale first!
COLOR & CONTRAST
Thursday, May 5, 2011
Firefox 4 Launch Party / Surabaya / May 4th, 2011
PROTOTYPE & INTEGRATION
Firefox 4 Launch Party / Surabaya / May 4th, 2011
Ivan Sielegar / Navinot.com / Goorme.com
❖ Weight of ElementsWhich one more important?
❖ Photo vs. TextOfficial from the client/company
❖ Color & SizeColors & size also decide the importance of an element
❖ Bold, Italics, Uppercase (Font)To create difference between text
(MY) +1 RULES
Thursday, May 5, 2011
Firefox 4 Launch Party / Surabaya / May 4th, 2011
USABILITY TESTING
Firefox 4 Launch Party / Surabaya / May 4th, 2011
Ivan Sielegar / Navinot.com / Goorme.com
❖ We just covered all the basicsYes, believe it or not :)
❖ It should be enjoyableEven in greyscale!
❖ Clear NavigationInformation structure is set and things are easy to find
❖ Congrats! You’re a good Web Designer now!In the 90’s :)
USER EXPERIENCE
Thursday, May 5, 2011
Firefox 4 Launch Party / Surabaya / May 4th, 2011
USABILITY TESTING
Firefox 4 Launch Party / Surabaya / May 4th, 2011
Ivan Sielegar / Navinot.com / Goorme.com
❖ What is this?Asynchronous JavaScript and XML
❖ Rich User InteractionsMore to do, on the same page
❖ No Full Page ReloadsSaves you bandwidth too!
❖ Problem!Page reload is no longer a feedback or confirmation
AJAX? YAY!
Thursday, May 5, 2011
Firefox 4 Launch Party / Surabaya / May 4th, 2011
USABILITY TESTING
Firefox 4 Launch Party / Surabaya / May 4th, 2011
Ivan Sielegar / Navinot.com / Goorme.com
❖ Loading AnimationSimple way to say “Wait a minute...”
❖ Error MessagesOops! But where is it? What’s wrong?
❖ Confirmation MessagesIs it really saved?
❖ Post-ActionWhat if I want to cancel? Undo? Go where?
TRANSITIONS, FEEDBACK & CONFIRMATION
Thursday, May 5, 2011
Firefox 4 Launch Party / Surabaya / May 4th, 2011
USABILITY TESTING
Firefox 4 Launch Party / Surabaya / May 4th, 2011
Ivan Sielegar / Navinot.com / Goorme.com
❖ Prepare for The UnexpectedUse your imagination with user interactions
❖ General ConsensusDo what others have been doing. Safer!
❖ Usability TestOK with contrast? Is content highlighted properly?
❖ Refine ThingsFix and improve for better user experience
KEEP TESTING & REFINE
Thursday, May 5, 2011
Firefox 4 Launch Party / Surabaya / May 4th, 2011
END
Firefox 4 Launch Party / Surabaya / May 4th, 2011
Ivan Sielegar / Navinot.com / Goorme.com
❖ Keep It SimpleDon’t try to create new rules
❖ Some TheoriesColor theory, maintain contrast, weight, and alignment
❖ AJAXPay attention to transitions, feedback and confirmations
UI & UX IN SHORT
Thursday, May 5, 2011
Firefox 4 Launch Party / Surabaya / May 4th, 2011
END
Firefox 4 Launch Party / Surabaya / May 4th, 2011
Ivan Sielegar / Navinot.com / Goorme.com
❖ Question? Ivan.Sielegar@gmail.com
❖ Twitter? @IvanSielegar
❖ Blog? http://navinot.com
❖ Project? http://goorme.com
Phew! I’m Done!
Thank You!Thursday, May 5, 2011
top related