Upgrade to Pro — share decks privately, control downloads, hide ads and more …

IA Essentials: How to prioritize, design, and present your clients content

A74cfc2ac33be24e9b2392dbd331e634?s=47 James Barrett
April 26, 2014
Design
2
360

IA Essentials: How to prioritize, design, and present your clients content

My Information Architecture presentation from WordCamp Minneapolis 2014,

A74cfc2ac33be24e9b2392dbd331e634?s=128

James Barrett

April 26, 2014
Tweet

More Decks by James Barrett

See All by James Barrett
Fish Fingers & Custard: How to give your client what they want, even if they don’t know they want it.
A74cfc2ac33be24e9b2392dbd331e634?s=48 jimbrts
0
43

Other Decks in Design

See All in Design
Talent Show-Down (2022)
Eb0cae63029ad6b66dfe7005e89c1473?s=48 gyroidz
1
200
"Friendship" - Personal Story Sequence
A2b28582eb2007b9efe661942bb29a94?s=48 innsamity
1
370
Mijii & Gnochi Go Swimming
B896d135180958999cd053869215f3f0?s=48 ohtristanart
PRO
0
600
The Frog Bandit
B789f3884732c5e0bd031a91f1930f3e?s=48 senamiyazaki
0
130
Visional 新卒デザイナー向け 会社説明資料 / Visional Company Briefing for Designer
B703da7cc05ce9718d63f9b2c6028ff7?s=48 visional_design
2
3.2k
UI/UXデザイナーになるには　日常編
633aea3a27016b588cfa67cce4df7f15?s=48 kimurakei
0
410
We meet again
9b32c41cb126732f3d05f1323078e037?s=48 seleliao
0
520
The Party! - Story Sequence
77b4173a70942a13969b84335c2e7695?s=48 diablicos_
0
140
バーチャル街づくり連合（構想V1）
8c36fb60ec838f3116b7fbebe778948e?s=48 showyingart
0
1.3k
今から始めるFigma超入門
Cb42953bfedcd81daf5b1330d98712c3?s=48 448jp
0
580
Doll.pdf
49242d21840cf877de57fb44d752e4fa?s=48 yzhang0425
0
240
アプリデザインの 難しさ
0b035ebcffb3af51d4b759733619beb0?s=48 yutaabe200
0
180

Featured

See All Featured
Designing Dashboards & Data Visualisations in Web Apps
Fde6c3a50ca518a909ef35c22c0ee0e4?s=48 destraynor
224
49k
Automating Front-end Workflow
96270e4c3e5e9806cf7245475c00b275?s=48 addyosmani
1351
200k
Stop Working from a Prison Cell
C1daf20e5c49ff910745198ef9869ac2?s=48 hatefulcrawdad
261
17k
Bash Introduction
812e1705ff0f8bc1bcf18587bde687d5?s=48 62gerente
597
210k
WebSockets: Embracing the real-time Web
E76911cbe088e5b850d966de3fc7435b?s=48 robhawkes
57
5.3k
BBQ
761be20b5ebd271008bcee1244fc5b52?s=48 matthewcrist
74
7.9k
The MySQL Ecosystem @ GitHub 2015
Be9caeb9d4ef9944d151af909063ed6e?s=48 samlambert
238
11k
Navigating Team Friction
245cee81a9c424266e5e401d844ea881?s=48 lara
175
11k
A better future with KSS
5f2da528927a2ec9ba4fec2069cbc958?s=48 kneath
225
15k
The Success of Rails: Ensuring Growth for the Next 100 Years
C44e1f7e22c3f23cff7bc130871047ef?s=48 eileencodes
10
3.4k
For a Future-Friendly Web
F68cb25ae3e5c2106997454b13b7737d?s=48 brad_frost
166
7.4k
Statistics for Hackers
56c4053438af8e8b90d6f53cbb7573be?s=48 jakevdp
781
210k

Transcript

  1. IA Essentials: How to prioritize, design, and present your clients

    content

  2. James Barrett Design Engineer - 10up @jimbrts

  3. Why Information Architecture is Important

  4. Why Information Architecture is important •Websites are non linear •Information

    is vast and varied •Websites should be goal oriented.

  5. 5 Websites are non linear

  6. 6 Information is vast and varied Image Gallery Testimonials Blog

    Posts User Comments Links Page Content Quotes Code snippets Forms

  7. Websites should be goal oriented. GOAL

  8. Let’s get Started

  9. 9 Getting Started •Finding a “voice” •Content Organizing •Visual layout

    and prioritization

  10. The “Voice” of a Website •The stakeholder sets the tone.

    •Listen. Then Listen some more. Then Listen again. •Pay attention to patterns and repeated ideas.

  11. The “Voice” of a Website Get in Touch vs Let’s

    Chat vs Contact Us

  12. Organizing your Content

  13. None
  14. None
  15. None
  16. None
  17. None

  18. Visual layout and prioritization

  19. 19 Visual layout and prioritization •Structure your design so that

    its guides readers to your goal. ! •Visual Design compliments good information architecture ! •Give readers plenty of opportunities to drive deeper into the site

  20. 20 Structure your site’s layout so it guides readers to

    your goal

  21. 21 Structure your site’s layout so it guides readers to

    your goal

  22. 22 Structure your site’s layout so it guide’s readers to

    your goal

  23. 23 Structure your site’s layout so it guide’s readers to

    your goal

  24. 24 Structure your site’s layout so it guide’s readers to

    your goal

  25. 25 Structure your site’s layout so it guides readers to

    your goal

  26. 26 Structure your site’s layout so it guides readers to

    your goal

  27. 27 Structure your site’s layout so it guides readers to

    your goal

  28. 28 Structure your site’s layout so it guide’s readers to

    your goal

  29. 29 Visual Design Compliments Good IA •Design supports content •Interactions

    should be easily identifiable ! •links should be clearly identified.

  30. 30 Example: Gallery Design

  31. None
  32. None
  33. None
  34. None

  35. Example: 404

  36. None
  37. None
  38. None

  39. Give readers plenty of opportunities to drive deeper into the

    site •At least 3 CTAs per page to your goal * •Evenly space the through out the page ! •Maintain your “voice” * Opinion. not fact

  40. Give readers plenty of opportunities to drive deeper into the

    site

  41. Maintain your “Voice” Get in Touch vs Let’s Chat vs

    Contact Us

  42. Final Thoughts •Find your Voice •Organize your Content ! •Keep

    your site goal oriented.

  43. Questions? @jimbrts