HICapacity UI talk by Kathryne Sakata

UI & UXIndustry Practices
kat sakata + @katroppi
tiffany higa + @thinktifferent

Ui (user interface)
DEFINED AS:
The design of computers, appliances, machines, mobile communication,
software applications and websites
the big idea:
Not necessarily to make things as simple as possible, to make them as
obvious as possible
• Provide a user-friendly experience
• Complete Goals, Efficient
RESULT:
Reduction in training, costs, happier, satisfied and highly engaged users!

“Don’t make me think.”
– Steve Krug, Usability Expert

the process
foundation is key!

the client
sitemap
grid & layout
wireframe
trends & inspirations
typography
tips & UI Recap

The client
Primary Objective & goal:
Any sort of information or description you can find out
• What will users be doing? • What is the need?
• Likes and dislikes • CMS, RWD, Cart...?
Target Audience (Know thy user):
Young, old, male, female, mom, dad, social workers, students, etc...
Competitors:
Who has done it and is it working?
• What the client say they needs vs what they really need
result: Defined goal & making sure that all interests are understood

“Obsess over customers...
Start with customers &
work backward.”
– Jeff Bezos, Founder & CEO of Amazon

site promoting app for kids
The cLient – Kapu, The digital toy box

portfolio website
the client – DF

shopping cart
the client – Lazy made

rwd
the client – food sense (youner audience)

the sitemap
Defined as:
To organize the structure and layout of the website
Purpose:
• Lists all the pages
• To create reference materials for client signoff
• Knowing what you’re getting yourself into!
• Speak the user’s language

“If you think every pixel, every icon,
every typeface matters, then you also
need to believe every letter matters. ”
– Getting Real by 37 Signals

New york
arizona
SF
hawaii
Intwfb
mission
the team
interests specialty
ceo
designer
director
developer
print
web
identity
poster
stationery
packaging
Home
footer
productsservicesabout
consult
build
the design
training
maintenance
sale
archived
new
gallery contact
32 pages

mission
the team
print
Home Intwfb
productsservicesabout
consult
buildinterests
the design
training
maintenance
sale
archived specialty
new web
gallery contact
footer
20 pages

grid & layout
Dimensions 960 x 1024 px (1280px) – The Norm
1024 x 768 px (1280px) – Standard Monitor
800 x 600 px (1280px) – Least
Common 320 x 480 px – iPhone
Widths 768 x 1024 px – iPad
1200px – L. Desktop
Smashing Magazine http://mobile.smashingmagazine.com/2013/03/21/responsive-web-de
sign-with-physical-units/
99 Designs http://99designs.com/designer-blog/2012/12/03/responsive-web-design-
key-tips-and-approaches/

setting up your psd file
grid & layout

setting up your psd file for RWD
grid & layout

twitter bootstrap
foundation skeleton gumby 2
grid & layout

your layout
equation:
Order + Harmony + Balance + Comfort =
Dramatically improves the communication of your design
Keep in mind:
• Horizontal Balance • Size
• Vertical Balance • Color
• Radial Balance • Shape
• Symmetrical Balance • Value
• Asymmetrical Balance • Position

wireframe
Defined as:
Simple visual guide to show you what a Web page would look like
focusing on the site structure
Rule of thumb:
Keep it bare bones & don’t add color, typeface and graphics
Pages to create wireframes for:
HOME sub gallery contact

– Jakob Nielson, Web Usability Consultant
“The more users’ expectations
prove right, the more they will feel
in control of the system and the
more they will like it.”

the latest trends
keep in mind: trendy, doesn’t make it a great solution

flat design: Most popular
trends

trends

trends – microsoft’s windows 8 helped pioneer flat design

trends – Google and facebook are doing it too

trends – flexibility and the amount of pre-existing patterns and functionality built in
twitter bootstrap: snap, there it is again!

trends – Smooth scalability, easy sizing, 1 file rather than multiple sprites
icon fonts

trends – resolutions are increasing, make it look good on any device
retina support

FULL BROWSER
TRENDS – PLAYGROUND INC, A CREATIVE AGENCY

trends – LEAN ANALYTICS
FULL BROWSER

“we’ve been spoiled.”
– Jason Santa Maria, Co-Founder & Creative Director of Editorially
&

typography
basic guide to choosing your typefaces:
Contrast, Body Copy, Explore Different Styles

A A
Sans
typography: contrast
The most important thing to keep in mind!
serif

Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem
Ipsum has been the industry’s standard
dummy text ever since the 1500s, when an
unknown printer took a galley of type and
scrambled it to make a type specimen book.
It has survived not only five centuries, but
also the leap into electronic typesetting,
remaining essentially unchanged.
typography: start with text face for body copy
1. Sturdy and legible at smaller size 2. Healthy contrast between character
3. As text get smaller, choose text type with slightly larger x-height
old standard
Lorem Ipsum is simply dummy text of the
printing and typesetting industry. Lorem
Ipsum has been the industry’s standard
dummy text ever since the 1500s, when
an unknown printer took a galley of type
and scrambled it to make a type specimen
book. It has survived not only five
centuries, but also the leap into electronic
typesetting, remaining essentially
georgia
Ha Ha
cap height
X height
baseline

typography: contrast
Exploring different styles

the client
sitemap
grid & layout
wireframe
trends & inspirations
typography
tips & UI recap

Make sure you:
Set resolution to: 72 PPI, RGB, Set your dimensions, Snap to: Guide
tips to setup

UI RECAP
NO WORRIES, ALMOST PAU!

1. The client
• Basic summary
Get as much information as you can
• Primary objective
What will this website be used for?
• Target Audience
Know thy user
• Competitors
What’s been done

2. sitemap
• to organize the structure
• reference material
Everyone is on board, sounds good
• small vs. big
Knowing what you’re getting into
• users language
At this point, begin thinking about terms...

3. grid and layout
• norm 960px (1280px)
• standard 1024px (1280px)
• least 800px (1280px)
• RWD: frameworks
• equation
Order + Harmony + Balance + Comfort = Improvement in comm.
• Balance, size, color, shape, value, position

4. wireframe
• visual guide
Site structure w/o color, typeface, and graphics
• stick to it
Try not to stray far from it, easy that way
• make frames for...
Home, Sub, Contact, Blog, Gallery
• rough, extreme, digital

5. trends & inspirations
• trendiest: flat design
Cultural and Technological reasons
• isn’t always the best solution
• twitter bootstrap
Flexible, pre-existing patterns and functionality
• full browser
• one pagers & parallax sites (?)

6. typography
• contrast: sans vs. serif
Most important thing to remember
• text face for body copy
Frist thing you should do
Make sure it’s sturdy and legible when small
Healthy contrast between characters
Higher x-height
• styles
Choose type with choke styles to play with, ex: Proxima Nova

7. tips for you son!
• 72 PPI (Pixels per inch)
• dimensions
Start at 1280px and set your guides up
• snap to: guide
• Color
Default CMYK, change to RGB with Proof Colors

colour lovers
color
pltts kuler color scheme designer

webdesigner depot
blogs
smashing magazine CODROPS css tricks

Behance
Great resource for inspirations
dribble creattica

css mania
gallery
flat design niice the best designs

TYPECAST
typography
A LIST APART ARTICLE FONT DECK GOOGLE WEB FONTS
TYPEKIT BY ADOBE

disregarding everything! Provided by Chris sass
OMG, S**t mother f**K, &%$#)*@!+(%$!!!!!!!!!

HICapacity UI talk by Kathryne Sakata

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (17)

Similar to HICapacity UI talk by Kathryne Sakata

Similar to HICapacity UI talk by Kathryne Sakata (20)

Recently uploaded

Recently uploaded (20)

HICapacity UI talk by Kathryne Sakata