Imagery adds visual interest and strengthens our site, emails, social media, documents and presentations. To keep our materials feeling cohesive, bright, inviting, and professional we have put together some tips and guidelines for creating great images.
- Ping in the #mofo-design slack channel if you need help with editing a photo or creating a graphic.
Image Sizes
Images on our websites and on social media/ads need to follow set dimensions.
⇓ View dimensions in this spreadsheet.
An .ai image template can be downloaded here and offers image sizes and export instructions for the various Mozilla Foundation social, foundation site, and blog needs. A Figma file for the hero image template can be downloaded here and offers specifications with examples of past hero images and dimensions for mobile devices.
Exporting Images
Compress images: Be sure to reduce the file size of images to help improve page load time. Tools to do this include: Tiny png, ImageOptim, or compressor.io
Name your files: This will improve accessibility and seo. Be descriptive and fill in alt text field to help discoverability. Use hyphens to separate words in the file name instead of spaces to improve its readability.
Add files to Drive: Add both the working files and the exports to Google Drive so other staff can find and use them.
Accessibility Guidelines
Avoid putting text in images: Text is images can not be read by screen readers, can't be translated to other languages, and text will be too small on mobile devices. If you must put text in images, make sure there is enough contrast between the text color and the background and add the text as alt text.
Examples
Here is a gallery of our visual identity expressed through various applications and initiatives.
Trustworthy AI
Example of a Sub-Theme
This theme is closely linked to our strategic initiatives, theory of change and movement activities housed at the Mozilla Foundation. We have chosen to use the term AI (Artificial Intelligence) because it is a term that resonates with a broad audience, is used extensively by industry and policymakers, and is currently at the center of critical debate about the future of technology. Mozilla is working towards what we call trustworthy AI and we are defining it as AI that is demonstrably worthy of trust.
In situ examples, visuals, Trustworthy AI interpretations of the brand:
