Embed Size (px)
DESCRIPTION
HICap talk is to inform others of the necessary steps in creating a website and understanding the importance of UI (User Interface) + UX (User Experience) design. These steps may seem tedious, but as you dive into the design or even the development stage, you’ll quickly find out that this process will help to diminish problems that could occur down the road. These are the UI slides About Kathryne Sakata ==== Kat received her graphic design degree from the New Media Arts Interface Design Program at Kapiolani Community College. She is currently a Graphic Designer and Web Developer at Design Asylum, Inc. and the Lead UI Designer at Undefeated Games, Inc. Kat enjoys engaging with new people and sharing her enthusiasm for design. She is an active member of AIGA Honolulu, HI-Capacity and Alakai Young Professionals and participates in various events including Startup Weekend, HNL New Tech Meetup, and WetWare Weds. Event info: http://www.hicapacity.org/2013/05/23/ui-ux/
Citation preview
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 processfoundatIon Is key!
the cLIent
sItemaP
grId & Layout
wIreframe
trends & InsPIratIons
tyPograPhy
tIPs & uI recaP
the cLIent
sItemaP
grId & Layout
wIreframe
trends & InsPIratIons
tyPograPhy
tIPs & uI recaP
the cLIent
sItemaP
grId & Layout
wIreframe
trends & InsPIratIons
tyPograPhy
tIPs & uI recaP
the cLIent
sItemaP
grId & Layout
wIreframe
trends & InsPIratIons
tyPograPhy
tIPs & uI recaP
the cLIent
sItemaP
grId & Layout
wIreframe
trends & InsPIratIons
tyPograPhy
tIPs & uI recaP
the cLIent
sItemaP
grId & Layout
wIreframe
trends & InsPIratIons
tyPograPhy
tIPs & uI recaP
the cLIent
sItemaP
grId & Layout
wIreframe
trends & InsPIratIons
tyPograPhy
tIPs & uI recaP
the cLIent
sItemaP
grId & Layout
wIreframe
trends & InsPIratIons
tyPograPhy
tIPs & uI recaP
the cLIent
sItemaP
grId & Layout
wIreframe
trends & InsPIratIons
tyPograPhy
tIPs & uI recaP
the clIentPrImary 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 cLIent
sItemaP
grId & Layout
wIreframe
trends & InsPIratIons
tyPograPhy
tIPs & uI recaP
the sItemapdefIned 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
wEB
identity
poster
stationery
packaging
hOmE
FOOtER
pROdUCtSSERviCESABOUt
CONSUlt
BUild
thE dESiGN
tRAiNiNG
mAiNtENANCE
SAlE
ARChivEd
NEw
GAllERy CONtACt
32 pages
NEw yORK
ARizONA
SF
hAwAii
iNtwFB
miSSiON
thE tEAm
iNtEREStS SpECiAlty
ceo
designer
director
developer
wEB
identity
poster
stationery
packaging
hOmE
FOOtER
pROdUCtSSERviCESABOUt
CONSUlt
BUild
thE dESiGN
tRAiNiNG
mAiNtENANCE
SAlE
ARChivEd
NEw
GAllERy CONtACt
32 pages
miSSiON
thE tEAm
hOmE iNtwFB
pROdUCtSSERviCESABOUt
CONSUlt
BUildiNtEREStS
thE dESiGN
tRAiNiNG
mAiNtENANCE
SAlE
ARChivEd SpECiAlty
NEw wEB
GAllERy CONtACt
FOOtER 20 pages
sLIckPLan
grid & LayouT
the cLIent
sItemaP
grId & Layout
wIreframe
trends & InsPIratIons
tyPograPhy
tIPs & uI recaP
grID & layoUtdimensions 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
grid & LayouT
settIng uP your Psd fILe
grid & LayouT
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 layoUtequatIon:
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
baLance
grid & LayouT
baLance
grid & LayouT
radIaL baLance
grid & LayouT
the cLIent
sItemaP
grId & Layout
wIreframe
trends & InsPIratIons
tyPograPhy
tIPs & uI recaP
wIreframedefIned 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.”
rough
wireFrame
detaILed
wireFrame
dIgItaL
wireFrame
the cLIent
sItemaP
grId & Layout
wIreframe
trends & InsPIratIons
tyPograPhy
tIPs & uI recaP
the latest trenDskeeP In mInd: TRENDY, DOESN’T MAKE iT A GREAT SOLuTiON
fLat desIgn: most PoPuLar
Trends
Trends
fLat desIgn: most PoPuLar
Trends – microsoFT’s windows 8 heLped pioneer FLaT design
fLat desIgn: most PoPuLar
Trends – googLe and FacebooK are doing iT Too
fLat desIgn: most PoPuLar
fLat desIgn
Trends
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
the cLIent
sItemaP
grId & Layout
wIreframe
trends & InsPIratIons
tyPograPhy
tIPs & uI recaP
“we’ve been spoIleD.”
– Jason Santa maria, Co-Founder & Creative director of Editorially
&
typographybasIc guIde to choosIng your tyPefaces:
Contrast, Body Copy, Explore Different Styles
A ASANS
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 HaCAp 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 recapno 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
!InspIratIons#cheehoo
uI cart
paTTern
Pattern taP
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, &%$#)*@!+(%$!!!!!!!!!
mUchmahalos!
