Web Meeting March 8, Riny Ledgerwood Marc Pastor

Transcription

1 Web Meeting March 8, 2016 Riny Ledgerwood Marc Pastor

2 Agenda Style Guide Discussion Continued Web Typography Working Group Report and Next Steps Marc OU Campus CMS Discussion Feedback and Interest Riny & Marc

3 Next Meeting: April 12 Mobile Web Discussion Brett Pollak, Director of Workplace Technology Services at UCSD will be our guest speaker. UCSD has been providing a mobile web experience for their campus for about 7 years. Brett will present and lead a discussion on their experiences providing a mobile capability for UCSD students, staff and faculty.

4 WTWG Contributors Giselle Luevanos (MarComm) Co-Chair Marc Pastor (ITS) Co-Chair Eric Ackerman (College of Sciences) Candy Carson (Student Affairs) Jeff Ernst (MarComm) Alex Herbias (Library) Brett Pelphrey (Business & Financial Affairs) Stacy Warner (Enrollment Services)

5 What is the WTWG s challenge? The challenge with any design system is they normally don t work, don t get adopted, don t grow or get used if they are imposed top-down without an awful lot of consultation The tricky thing for us designers is that is rarely how we re engaged to create these things. Mark Boulton, "Design systems in difficult places"

6 What is the WTWG s goal? To come to a consensus on a recommended font family (or font families) for use in the SDSU Web Style Guide and the BFA OU Campus implementation. Improve consistency of SDSU Brand Create a resource for SDSU web professionals Practice the habit of collaboration

7 How did the WTWG pick a font?

8 Meeting #1: Pre-Homework Select up to five fonts to share with the group. For each font, be prepared to share/discuss: A type specimen sheet (online preferred) Your thoughts on the "voice" of this font. What tone/emotion(s) do you feel it expresses? The readability of the font, particularly at smaller sizes. At least three examples of its usage.

9 These were a few of the choices

10 We narrowed down to 4 families Museo Sans & Slab - Open Sans - Proxima Nova - Playfair Display - Homework for Meeting #2: Find and/or create web design samples using these four families.

11 At the end of Meeting #2, we agreed on two families:

12 For Meeting #3, we compared the two fonts in boilerplate layouts

13 For Meeting #3, we compared the two fonts in boilerplate layouts

14 We inspected other CSU homepages

15 We even did a little usability testing Try it out! Go to:

16 Our choice: Proxima Nova

17 What they say about Proxima Nova As a design, Proxima Nova is well suited for low-resolution environments: it has very little stroke contrast, a large x-height, and simple, clear letterforms. It was also one of the first font families to be well hinted for the screen. It also has many weights, allowing for flexibility of hierarchy, size, and color options. Stephen Coles, Co-founder of FontsInUse.com & Typographica.org. Author of The Anatomy of Type

18 More on Proxima Nova While sans-serif fonts are generally plain and minimal, many fonts have a lot of personality that may not be suitable for everything. As a designer at a media company, I try not to over-design so that the content speaks for itself. Proxima Nova does just that. Tri Branch Vo, Why Proxima Nova Is Everywhere c687a6#.81ddseakt

19 The last word on Proxima Nova It s no surprise that Proxima Nova made the list again this year. It just edged out Gotham to take the #3 position. I keep thinking that Proxima Nova will fall out of favor, yet every year designers continue using it. Jeremiah Shoaf, The 10 Most Popular Web Fonts of

20 Next Steps for WTWG Establish ongoing feedback process Obtain campus licensing for Proxima Nova Develop code examples, use cases for Proxima Nova

21 Interest in future working groups? Potential working group topics: Color Layout Usability Frameworks Eventual goal is to build a working style guide. OU Campus rollout can be a vehicle for future WG products and recommendations.

22 Business & Financial Affairs Web Project Timeline Task From To Content Organization Glantz Consulting (off-site research, onsite meetings with stake holders, report findings) 12/14/15 2/12/16 Red Rooster Design (create wireframes, new site map, navigation & content elements; Design; Build HTML/CSS Pages; Edits/demo templates hand off to Omni Update for implementation) 1/25/16 5/9/16 Omni Update CMS and SDSU Web Server Setup 11/25/15 2/28/16 Create Templates in CMS 5/9/16 7/1/16 CMS Training (Admin, Train-the-trainer & Template) 7/5/16 7/15/16 Develop BFA sites & content migration 7/16/16 9/16/16 Testing & Approval 9/19/16 9/30/16 Launch BFA Pilot Sites 10/3/16 10/3/16

23 Thanks! Please any questions or other ideas to Riny Ledgerwood Marc Pastor