HICapacity UI talk by Kathryne Sakata

  • View
    2.535

  • Download
    1

  • Category

    Design

Preview:

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

pRiNt

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

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

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!

Recommended