DESIGN+UX ESSENTIALS FOR A BETTER TAGGED

Development Workshops 2011.09.29 Ran Tao

We enable anyone to meet and socialize with new people

DESIGN + UX

GOAL: Allow everyone to have an understanding of basic Design+UX principles key to creating and delivering top-quality product

DESIGN + UX

AGENDA: + Design + UX + Basic

Principles (Aesthetics)

+ Best Practices (User Experience)

+ Style Guide + Grid System

(960) + Responsive

Web Design

DESIGN + UX

DESIGN+UX +  Everyone should keep basic design

and ux practices in mind when building products (no matter what discipline you are)

+  Design principles are similar in nature to engineering practices +  Keep it simple +  Prioritize and maintain hierarchy +  Consistency +  Flexibility

DESIGN + UX

BASIC PRINCIPLES +  Alignment +  Whitespace +  Color +  Contrast +  Hierarchy +  Consistency +  Priorities

DESIGN + UX

ALIGNMENT Line up elements on the page! Elements that are misaligned are distracting and create an unfinished impression. This will be easier if a grid system is used (explained in a later slide)

DESIGN + UX

WHITESPACE Allow for elements on a page to breath. Make sure elements aren’t too close together or far apart. Good use of white space allows for better legibility and usability

DESIGN + UX

DESIGN + UX

CONTRAST This helps pull the eye to what’s important. Contrast needs to be strong. But it should not be distracting. It should help the content stand out.

DESIGN + UX

HIERARCHY There needs to be visual hierarchy. Similar to code hierarchy when building a product, there is also an equivalent sense of importance.

DESIGN + UX

CONSISTENCY Maintain coherence between pages and within a page. This strengthens the brand and gives the user a consistent experience and a sense of familiarity.

DESIGN + UX

PRIORITIES What are the most important elements. Don’t design for edge cases. Figure out what elements are absolutely necessary first. These should be the essentials that, without them, you cannot achieve the product goal. This will help clean up the layout and avoid clutter.

DESIGN + UX

BEST PRACTICES +  Start with a site map or page flow +  Does the flow make sense +  What is the main user scenario +  Who is the user +  How can a user complete the task +  Make sure the user doesn’t have to think +  What’s the CTA +  Only include the essentials; no distractions

DESIGN + UX

STYLE GUIDE +  Common CSS elements, classes to

provide consistency across products +  Use one main CSS file and only add

exceptions when needed +  Fonts: ?TextLarge, ?TextSmall etc

+  Spacing: ?PaddingLarge, ?PaddingSmall etc

+  Colors: ?PrimaryTextColor, ?SecondaryTextColor etc

DESIGN + UX

STYLE GUIDE +  Standardize as many common

controls on the site as possible +  Buttons +  Navigation +  Modal windows +  Selection +  Tabs +  More…

DESIGN + UX

GRID SYSTEM +  The 960 grid +  Easily divide into any number of

layouts

(960 is divisible by 2, 3, 4, 5, 6, 8, 10, 12, 15, 16, 20, 24, 30, 32, 40, 48, 60, 64, 80, 96, 120, 160, 192, 240, 320 and 480)

Columns: 60px Margins: 10px Gutters: 20px 960.gs

DESIGN + UX

RESPONSIVE WEB +  Infinite screen sizes (mobile, tablet,

desktop) +  Design so that content should

dynamically adapt to users screen size

+  Design for mobile first!

DESIGN + UX

RESPONSIVE WEB Boston Globe

DESIGN + UX

USERS ARE #1

DESIGN + UX

USERS ARE #1 QUESTIONS

+ COMMENTS

?