© 2012 Above the Fold
© 2012 Above the Fold
© 2012 Above the Fold
Create successful ePaper yourself
Turn your PDF publications into a flip-book with our unique Google optimized e-Paper software.
i<br />
Introduction<br />
GETTING STARTED<br />
1<br />
2<br />
3<br />
4<br />
5<br />
6<br />
7<br />
8<br />
9<br />
10<br />
Think big picture<br />
Connect <strong>the</strong> goals<br />
Get everyone involved<br />
Hold fewer (more relevant)<br />
meetings<br />
Hear every voice<br />
Look beyond feature requests<br />
Design collaboratively<br />
Over-communicate<br />
Share knowledge early<br />
Build relationships<br />
USER RESEARCH<br />
11<br />
12<br />
13<br />
14<br />
15<br />
16<br />
17<br />
18<br />
Build personas<br />
Get face time with your users<br />
Use paper prototypes<br />
Test usability...online<br />
Listen to actions<br />
Vet your ideas<br />
Choose your test wisely<br />
Follow <strong>the</strong> flow<br />
UI DESIGN<br />
19<br />
20<br />
21<br />
22<br />
23<br />
24<br />
25<br />
26<br />
Prioritize top tasks<br />
Obey real-world rules<br />
Sketch your ideas<br />
Research UI patterns<br />
Follow <strong>the</strong> MAYA principle<br />
Document your UI patterns<br />
Use tabs effectively<br />
Reduce clutter: show actions on<br />
hover<br />
27<br />
28<br />
29<br />
30<br />
Provide lazy registration<br />
Take advantage of web<br />
typography<br />
Design your color palette<br />
Provide instant feedback<br />
CONTENT STRATEGY<br />
31<br />
32<br />
33<br />
34<br />
35<br />
36<br />
37<br />
38<br />
39<br />
40<br />
Tell a story<br />
Remember <strong>the</strong> microcopy<br />
Learn <strong>the</strong> jargon<br />
Plan a content audit<br />
Rewrite, reuse, republish<br />
Supplement with synonyms<br />
Vary your medium<br />
Split test your content<br />
Account for edge cases<br />
Anticipate errors<br />
FRONT-END DEVELOPMENT<br />
41<br />
42<br />
43<br />
44<br />
45<br />
46<br />
47<br />
48<br />
49<br />
50<br />
ii<br />
iii<br />
iv<br />
Highlight real-time changes<br />
Load lazily<br />
Build with progressive<br />
enhancement<br />
Strategize for <strong>the</strong> small screen<br />
Research your UI approach<br />
Use sprites to improve<br />
performance<br />
Take advantage of HTML5<br />
Organize your CSS<br />
Consolidate your files<br />
Separate CSS classes from IDs<br />
Learn more<br />
About ATF<br />
Appendix
Change language