Tagged Development workshops are weekly workshops to promote development best practices and learn about how product and infrastructure gets built. Half an hour presentations, followed by Q&A.

1. DESIGN+UX
ESSENTIALS FOR A BETTER TAGGED
We enable anyone to meet and socialize with new people
2011.09.29 Ran Tao
Development Workshops

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

3. AGENDA:
+ Design + UX
+ Style Guide
+ Basic + Grid System
Principles (960)
(Aesthetics)
+ Responsive
+ Best Practices Web Design
(User Experience)
DESIGN + UX

4. 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

5. BASIC PRINCIPLES
+ Alignment
+ Whitespace
+ Color
+ Contrast
+ Hierarchy
+ Consistency
+ Priorities
DESIGN + UX

6. 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

7. 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

8. DESIGN + UX

9. 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

10. 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

11. 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

12. 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

13. 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

14. 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

15. STYLE GUIDE
+ Standardize as many common
controls on the site as possible
+ Buttons
+ Navigation
+ Modal windows
+ Selection
+ Tabs
+ More…
DESIGN + UX

16. GRID SYSTEM
+ The 960 grid
(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)
+ Easily divide into any number of
layouts
Columns:
60px
Margins:
10px
Gutters:
20px
960.gs
DESIGN + UX

17. 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

18. RESPONSIVE WEB
Boston Globe
DESIGN + UX

19. USERS ARE #1
DESIGN + UX

20. QUESTIONS
USERS+
ARE #1
COMMENTS
?
DESIGN + UX