CMS Design & Layout Best Practices
•
1 like•874 views
Learn how to create more dynamic pages using NYU's central CMS with these design and layout best practices. Note: these are shared slides from an in-person training delivered by Katie Santo and Logan Johnson of NYU's Digital Communications Group and are meant to be an aid for CMS users at NYU.
More Related Content
What's hot
What's hot (20)
Viewers also liked
Similar to CMS Design & Layout Best Practices
Similar to CMS Design & Layout Best Practices (20)
Recently uploaded
Recently uploaded (20)
CMS Design & Layout Best Practices
- 1. CMS DESIGN & LAYOUT BEST PRACTICES KATIE SANTO WEB TRAINING & CONTENT SUPPORT SPECIALIST DIGITAL COMMUNICATIONS GROUP LOGAN JOHNSON WEB DESIGNER DIGITAL COMMUNICATIONS GROUP
- 2. AGENDA • Thoughtful Design • Case Study • Best Practices • Resources • Question & Answer
- 4. Design is the rendering of intent. The designer imagines an outcome and puts forth activities to make that outcome real. Jared Spool Founder, User Interface Engineering
- 7. CREATIVE BRIEF • Describe the goal of the page using relevant background info: What is the purpose of this page?
- 8. CREATIVE BRIEF • Describe the goal of the page using relevant background info: What is the purpose of this page? • Use personas to become an advocate for your target audience: What types of people are we designing this page for?
- 9. CREATIVE BRIEF • Describe the goal of the page using relevant background info: What is the purpose of this page? • Use personas to become an advocate for your target audience: What types of people are we designing this page for? • Identify how visiting your page will benefit users: How can the design make their lives better?
- 10. CREATIVE BRIEF • Describe the goal of the page using relevant background info: What is the purpose of this page? • Use personas to become an advocate for your target audience: What types of people are we designing this page for? • Identify how visiting your page will benefit users: How can the design make their lives better? • Organize your content based on hierarchy: What is primary information versus secondary information?
- 11. CREATIVE BRIEF • Describe the goal of the page using relevant background info: What is the purpose of this page? • Use personas to become an advocate for your target audience: What types of people are we designing this page for? • Identify how visiting your page will benefit users: How can the design make their lives better? • Organize your content based on hierarchy: What is primary information versus secondary information?
- 13. It’s dancing before you can walk. It’s doing all kinds of tricks just for the sake of doing tricks, not the sake of solving the problem. Paul Rand Art Director and Graphic Designer
- 15. CASE STUDY: NYU FOOTBALL • Sketch how you would design this page • Refer back to our Creative Brief questions • Potential content may include: - Ticket information - Schedule - Scores - Team roster - News releases - Primary photo - Photo gallery - Contact information
- 16. Content Template with Sidebar | Image, Rich Text, Table, Photo Gallery, Basic Promo
- 17. Content Template with Sidebar | Image, Rich Text, Contact Us, Follow Us, Photo Gallery, Basic Promo, Button Promo
- 18. Content Template | Column Control, Image, Rich Text, Contact Us, Follow Us, Photo Gallery, Basic Promo, Button Promo
- 19. CASE STUDY: NYU FOOTBALL • What is the purpose of this page? • What types of people are we designing this page for? - Drive ticket sales - Share schedule & scores - Highlight roster - Promote team news Students & Alumni Faculty & Administrators Parents & Family Neighbors
- 20. CASE STUDY: NYU FOOTBALL • How can the design make their lives better? • What is primary information versus secondary information? - Create a convenient way to buy tickets online - Make it easy for site viewers to learn about the team Primary Information: - Team Photo (Primary Photo) - Ticket Sales Information - Schedule & Scores Secondary Information: - News Releases - Photo Gallery - Contact Information
- 21. BEST PRACTICES
- 22. BEST PRACTICES • Review your content to make sure it’s mobile-friendly; column control goes a long way to help make your page dynamic
- 23. Let’s take a closer look at how content reflows…
- 24. CONTENT TEMPLATE WITH SIDEBAR
- 25. A B C D navigation 33% 210px 33% 210px 33% 210px 66% 450px 66% 450px 50% 330px 50% 330px 33% 210px 33% 210px sidebar 1200px 1200px + Fixed CONTENT TEMPLATE WITH SIDEBAR
- 26. A B C D navigation 60% 270px 60% 270px 50% 225px 50% 225px 50% 225px 50% 225px 40% 180px 40% 180px 50% 225px sidebar 930px 1199 - 930 px Fixed CONTENT TEMPLATE WITH SIDEBAR
- 27. A B C D 60% 240px* 60% 240px* 40% 180px* 40% 180px* 50% 210px 50% 210px 50% 210px 50% 210px 50% 210px sidebar 690px 929 - 690px Fixed CONTENT TEMPLATE WITH SIDEBAR
- 28. A B C D sidebar 50% 210px 50% 210px 50% 210px 40% 180px* 60% 240px* 60% 240px* 40% 180px* 50% 210px 50% 210px 480px 689 - 480px Fixed CONTENT TEMPLATE WITH SIDEBAR
- 29. 100% 100% 100% 100% 100% 100% 50% 50% 50% sidebar A B C D 320px 479 - 320px Liquid CONTENT TEMPLATE WITH SIDEBAR
- 30. CONTENT TEMPLATE
- 35. E F G H I J K 100% 100% 100% 100% 100% 100% 100% 100% 100% 100% 50% 50% 50% 50% 50% 50% 50% CONTENT TEMPLATE 320px 479 - 320px Liquid
- 36. BEST PRACTICES • Review your content to make sure it’s mobile-friendly; column control goes a long way to help make your page dynamic • Take advantage of the different promo style options available
- 38. BEST PRACTICES • Review your content to make sure it’s mobile-friendly; column control goes a long way to help make your page dynamic • Take advantage of the different promo style options available • Remember that images accent and enhance your content; avoid embedding text like dates, email addresses, or phone numbers
- 40. BEST PRACTICES • Review your content to make sure it’s mobile-friendly; column control goes a long way to help make your page dynamic • Take advantage of the different promo style options available • Remember that images accent and enhance your content; avoid embedding text like dates, email addresses, or phone numbers • Use the header format to add a hierarchy to your content but be careful not to skip any header levels in the process
- 41. BEST PRACTICES • Review your content to make sure it’s mobile-friendly; column control goes a long way to help make your page dynamic • Take advantage of the different promo style options available • Remember that images accent and enhance your content; avoid embedding text like dates, email addresses, or phone numbers • Use the header format to add a hierarchy to your content but be careful not to skip any header levels in the process • Remove any duplicated or outdated logos from your pages
- 42. BEST PRACTICES • Review your content to make sure it’s mobile-friendly; column control goes a long way to help make your page dynamic • Take advantage of the different promo style options available • Remember that images accent and enhance your content; avoid embedding text like dates, email addresses, or phone numbers • Use the header format to add a hierarchy to your content but be careful not to skip any header levels in the process • Remove any duplicated or outdated logos from your pages • Reconsider the updated design of the divider before adding it
- 43. BEST PRACTICES • Review your content to make sure it’s mobile-friendly; column control goes a long way to help make your page dynamic • Take advantage of the different promo style options available • Remember that images accent and enhance your content; avoid embedding text like dates, email addresses, or phone numbers • Use the header format to add a hierarchy to your content but be careful not to skip any header levels in the process • Remove any duplicated or outdated logos from your pages • Reconsider the updated design of the divider before adding it
- 44. RESOURCES
- 45. RESOURCES • Creative Brief • Blank Templates • Design Tools (Spreadsheet)
- 47. NYU.EDU/CMS PO.ST/DESIGNRESOURCES ASKIT@NYU.EDU / 212-998-3333 CMS.TRAINING@NYU.EDU @NYUDIGICOMM
- 48. THANK YOU