Audits and Inventories: How To Mise en Place Your University's Website Redesign
•
0 likes•200 views
This document discusses how to conduct audits and inventories as part of redesigning a website. It recommends starting with content audits and interface inventories to identify all existing patterns and inconsistencies. This lays the groundwork for establishing an effective design system using the Atomic Design methodology. Key aspects of the methodology include defining a shared vocabulary through an atomic workflow and creating a style guide and pattern library as the cornerstone of the new design. Presenting fully designed mockups is suggested as the most effective way to get stakeholder buy-in. The benefits outlined are cohesive experiences, increased team workflow, and establishing an accessible and future-proof foundation.
Report
Share
Audits and Inventories: How To Mise en Place Your University's Website Redesign
- 1. AUDITS AND INVENTORIES: HOW TO MISE EN PLACE YOUR WEBSITE REDESIGN CHRISTINA OLIVAS | SAN JOSE STATE UNIVERSITY @fontburger
- 5. “Can you show me what the homepage is going to look like.” —Your Boss
- 7. Show Them the Homepage, But
- 8. Tell Them the Whole Story DESIGN SYSTEM OF COMPONENTS
- 9. “We’re not designing pages, we’re designing systems of components.” —Stephen Hay From Atomic Design by Brad Frost
- 10. YOUR STYLE GUIDE AND PATTERN LIBRARY @fontburger
- 12. Style Guides Brad Frost - Style Guide Best Practices
- 16. Brad Frost - Style Guide Best Practices
- 17. styleguides.io
- 19. rivet.iu.edu
- 20. AKA: • Front-end style guides • UI libraries • Component libraries Pattern Libraries CORNERSTONE OF MODERN UI DESIGN • Purpose: establish and maintain an effective interface design system to create consistent UIs, speed up production, and create a watering hole for the team. • Audience: anyone touching the project: designers, developers, project managers, vendors, product managers, etc. • Can include: global elements, typography, image types, lists, navigation, blocks, media, animations, literally anything you include in a UI. Brad Frost – Atomic Design
- 22. Benefits of Pattern Libraries • Lead to cohesive, consistent experiences • Speed up your team’s workflow • Centralizes UI components • Establishes and documents a shared vocabulary • Make cross-browser/device, performance, and accessibility testing easier • Future-friendly foundation • Can be created in conjunction with a new or redesign project
- 25. Josh Duck’s Periodic Table of HTML Elements
- 26. Atomic Design Brad Frost Concept created by Brad Frost @bradfrost
- 29. Atomic Design
- 31. Call It Whatever You Want But establish a Shared Vocabulary
- 32. Atomic Design
- 34. Brad Frost - Style Guide Best Practices
- 35. THE ATOMIC WORKFLOW SHOW, DON’T TELL
- 36. Content Audits
- 37. Content Audits
- 40. Element Collages Concept created by Dan Mall @danmall
- 45. Benefits of Audits and Inventories • Captures all patterns and their inconsistencies • Gets organizational buy-in • Establishes a scope of work • Lays the groundwork to a sound interface design system
- 46. Naming things is hard.
- 47. Page Mockups
- 48. Presenting fully baked mockups is the most effective way to show [your stakeholders] what their website will never look like. —Stephen Hay Lesson Learned: From Atomic Design by Brad Frost
- 53. Publish Your Style Guide and Pattern Library ox.ac.uk/public-affairs/style-guide/digital-style-guide
- 54. THIS IS HARD WORK
- 55. DON’T OVER VALUE THE SPRINT
- 56. THANK YOU! PLEASE SHARE YOUR FEEDBACK: WWW.SLIDO.COM #OUTC19 SPECIAL THANKS TO BRENDEN SPARKS, JODY ULATE, MICHELLE FREY AND MONICA BOSQUE. SJSU IS LUCKY TO HAVE YOU. @fontburger