An exploration of fonts, colors, layouts, graphic elements and various treatments
Background
The current FIC website (fic.tufts.edu) has been unchanged for a number of years. In the interim, design standards and technologies have evolved. As a result, the first impression is “outdated.”
- Non-responsive design
- Not scoring well on accessibility
- Font size too small in places
- Color combinations are not legible for a number of viewers
- Keyboard access limited
Additional motivations for updating the look:
- An opportunity for a large audience with the FIC 25 Anniversary this fall
- New director/vision and content focus
- Concerns that the site looks dark and static
- Opportunity to modify as the platform changes to Drupal.
Realities and timeline:
October 2022 marks the 25th Anniversary of FIC. In the meantime, the site is being migrated to Drupal. It’s an opportunity to make a few cosmetic changes provided they don’t hold up the launch. To this end, the brand refresh ideas need to be completed by August 12 so there is time to integrate. That means:
- Easy to implement in Drupal without significant customization
- Doesn’t increase the workload for generating content
- Some design ideas might be staged out after launch as time and bandwidth become available
Brand Refresh Strategy
To incorporate big picture concepts for the long term but keep an eye on what can be implemented successfully in time for a successful launch in October. Because the web is dynamic and forgiving, there is room to respond, modify and expand after launch.
FIC Concepts:
- Dignified – professional, authoritative
- Light – uplifting, positive, focus on resilience, humane, fun not gloomy
- Rigor – solid research methods, peer-reviewed
- Humble – ethos, walk the talk, local involvement, respect
- Appropriate – flexible, creative, inclusive, best method for results; from participatory meetings to GPS trackers
- The Journey – on the ground with people, moving toward a global aspiration
Brand Refresh Goals:
- Work with existing Tufts guidelines
- Tufts Logo guidelines
- Colors – keep the green, focus on accessibility, and find a secondary color (purple)
- Typography – Whitney => web equivalent
- Fix current website issues
- Boxy, rigid, non-responsive layout
- Dark, serious, looming
- Content organization is not engaging; needs to be more people-oriented
- Text size, color, legibility problems
- Launch timeline and beyond
- Minimum viable for launch refresh
- Bigger picture, direction and wishlist
- Design inspiration
- Stockholm Resilience website – visual focus, simple headlines, to the point, white space, clean
- YMCA – headlines and blocks are simple and focus on the viewer “you”
Design Approach:
Round 1
- Lighten up the site by featuring a white background
- Get colorful with the existing Tufts palette – cheerful, playful
- Retain the FIC signature green (PMS 369)
- Use the Tufts blue version of the Tufts logo – lighter feel, more color
- Check accessibility of labels – many colors require black type for contrast
- Soften image edges with rounded corners – like Stockholm Resilience, YMCA, and others.
- Feature the pot – visually playful, upbeat, organic, non-linear – also symbolic of saving food/water
- Chunk information to easily scan and works with mobile
Round 2
Much of the above except:
- Keep the lightness of the white background but tone down the use of color which is making it look less serious. Needs to come across as more professional, and less playful.
- Use sample content for all examples for a similar comparison
- Explore different palettes, fonts, and any other graphic ideas that might work as elements.
Round 3 + beyond
Refinements to Center and Left-aligned layouts, plus explore clean, bold, image-intensive Grid layouts that are more often seen in Architecture and portfolio websites.
- Simplify content categories – Zero Hunger / Human Resilience / The Center as the entry point
- Alternative organizations of content – create a “project” container that has a variety of components. Like a mini website, each “project” will have publications, briefs, videos, process diagrams and sketches, interviews, data, infographics, newsletters, etc. Maybe you can subscribe for updates to the project.