Designing the Planet 4 style tile
In the redesign of the new greenpeace.org, we’ve been exploring a variety of ways that allow people to contribute to what we’re building, an engagement platform which will drive people to action and, in the long term, lead the way towards greater change in online activism. We want people to be passionate and take ownership of Planet 4, and today, we’re inviting YOU to contribute to the stylistic direction of Greenpeace’s digital identity.
Easy instructions on how to help are all the way at the bottom, but first, a bit of context on how we got here and why Planet 4 needs all your creativity, once again.
What won’t change on Greenpeace websites
The logo, an important asset of the organisation, providing a legal trademark and guarantee of quality and integrity
What will change
Every. Single. Other. Thing. Yep, we are completely redesigning how people experience Greenpeace in a digital environment. Planet 4 will have new fonts, new colours, new image treatments. We’ll be building new content, new navigation, new everything.
The Planet 4 revised concept proposes a bold vision of what it means to be part of and support Greenpeace. Our new site should help everyone understand that Greenpeace is not, nor has it ever been just about the environment. Our mission is to have a green and peaceful world. As a non-profit with a mission to protect the planet in all its biodiversity, the high quality of the stories Greenpeace produces should engage people and achieve the highest impact and outreach through an innovative digital presence, to finally put the ecological movement on an equal playing field with forces that have more resources.
That means we need to design something that helps people act on behalf of our planet.
First off, we’d like to welcome Will Morris-Julien to the team! Will has been working with Greenpeace as a freelance designer for a number of years, and he’s going to help make sure Planet 4 is as beautiful and functional as we all imagine it to be.
Over the past few weeks, we’ve been asking people to contribute inspirations and ideas to the Planet 4 Moodboard. Will’s first task in getting acquainted with the project was to clean up and organize the moodboard. He carefully considered community inputs and began separating them into elements:
These fonts are some examples of suitable typefaces for regular content and navigation.They’re easy to read online and fulfil legibility requirements we have as a global network.
The campaign fonts moodboard represents some ideas for what headlines and calls to action might look like. Campaign fonts will have to be checked carefully to ensure global compatibility.
From twelve to one column grid, from one-page parallax to non-scrolling designs. All selected from the P4 Layout Pinterest board.
Navigation, Buttons & Links
Examples of navigation from the traditional drop-down to abstract landscapes. These are all
from the P4 Pinterest board. Click throughs are indicated by a red arrow. Button press with a red circle.
Visual Assets and Data Viz
These are examples of images, photos, illustrations, infographics and data visualisation. These are all from the P4 Pinterest board.
Front-end animation from Parallax (on scroll) to type animation, animated gifs and data visualisation. All parallax, gifs and type animation selected from the P4 Layout Pinterest board. Data visualisation examples added to show other animation styles.
We need help! Create and upload your style tile
Now that the community has provided inspiration, we’d like to ask everyone to contribute for design. If you were designing P4, what you want it to look like?
To establish a few design directions, every contributor can create style tiles, panels that visually communicate the essence of a brand for the web. Feel free to gather with others and work in teams of creative folks!
Here’s how to contribute:
- Send the Planet 4 team your name and contact information, it will be a pleasure to welcome you among the P4 style tile creators. You can also leave a comment below, we’ll be in touch..
- Create your style title (or multiple ones!) with web elements such as color palette, fonts, heading styles, links and image treatment. Here’s a template to get you started (Illustrator, Photoshop or Sketch file). If it’s easier for you, you can design an example issue page instead. Here’s some sample content to include.
- Include design patterns, textures, illustrations styles or interface components (such as button and navigation styles) and any other elements you feel are essential for the design of the pilot site.
- Save your style documents to the Design folder (if you can’t add to this folder, just let the project team know!).
In need of more inspiration? Check these examples of tiles.
* If your Sketch file doesn’t work, please run a Sketch update. That should do it.
The Planet 4 Design Principles
- Greenpeace has your back
- People power is social
- Clear vision leads to decisive action
- Change is everywhere
Please keep in mind that in the end Planet 4 will only have one style direction. All creations, however, will give stakeholders options to talk about and serve as inspiration for others, so please be bold and unleash your creativity!
IMPORTANT NOTE — Anything you submit to the Planet 4 team should be licensed CC-BY-SA or a more permissible license. This project is using open practices, and we want to share your work with the global community.