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, 2011
Thursday, 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

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


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 -


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

?
CONCEPT

GETTING STARTED
❖ What, Who, Where and How?
❖ The (Business) Plan
❖ Is The Content Ready
❖ Any Existing Guidelines / Requirements?
❖ Special Campaign / Message?


CONCEPT

RESEARCH
❖ What are the boundaries?
❖ Screen resolutions
❖ Browsers
THANKS TO
Flash enabled?
FIREFOX
❖

❖ Special plugins?
❖ User behaviors

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
JOB BOARD

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?


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


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.


WIREFRAME

INFORMATION
GROUPING
❖ Group by Elements
Main content, meta, toolbar,
comment, form?

❖ Use Color & Spacing
Use different color & white space to
group contents


WIREFRAME

ALIGNMENTS
❖ Align by Vertical Lines
Use imaginary vertical lines as
boundaries

❖ Space Horizontally
Use spacing to separate content
horizontally


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



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!



(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


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 :)


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


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?


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


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


END

Phew! I’m Done!
❖ Question? Ivan.Sielegar@gmail.com

❖ Twitter? @IvanSielegar

❖ Blog? http://navinot.com

❖ Project? http://goorme.com

Thank You!

Web UI & UX design by Ivan Sielegar

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (15)

Recently uploaded

Recently uploaded (20)

Web UI & UX design by Ivan Sielegar