This is a guide to creating featured Foundry post images. It’s important that our Foundry post images have a cohesive visual language. This gives The Foundry another level of credibility, visual polish, and supports the Sparkbox brand. By establishing some simple guidelines and providing a starting point, we maintain this visual language and make it easier for designers to create unique images.
There are several different types of images:
- General post images
- Case study images
- Meet the team images
- General announcement images
- Newsletter images
While 80–90% of the images we create will fall into the general post image category, it’s important that all of the image types be consistent and follow the same system. Here’s a breakdown of each image type style:
Follow these guidelines when creating a featured Foundry post image:
Don’t try too hard to explain what the article is about with the image. The image is simply there to complement the post and provide a unique visual identifier. Latch onto a high level concept (i.e. improving performance) and run with it. A short description of the post will be provided by the Foundry team in the FED Trello board. Use that to determine what concept to go with.
Each post falls into one of the four Foundry categories: UX/Content, Development, Culture, and Design. Each category has a pre-determined color palette (shown below): a background color, two accent colors, and a gradient. There are two global colors that may be used: white and Sparkbox Cyan. As seen in the examples, Sparkbox Cyan should be used as an accent in all images. The Foundry Starter Illustrator file has all of the swatches and backgrounds preloaded in the layers/swatch palette.
Use basic shapes like circles, squares, triangles, hexagons, etc. to create more complex shapes or patterns. More organic shapes are fine too—just make sure they aren’t too complex and fit with the visual intent of the existing images.
For example, if you are using two circles, a large and small, try sizing them at 40px and 10px. Use the same scale for applying strokes to objects (always set the stroke on the inner or outer edge) with the default stroke weight being 20px. This maintains consistency and helps us create images quickly.
- Don’t use text in general post images
- Don’t use texture
- Avoid blending modes like multiply or overlay—they tend to skew the color palette (transparency is okay)
- Don’t create complex backgrounds or environments
- Use transparency to create variation in the color palette
- Use a pattern
- Create recognizable objects or use icons that fit in the simplified style
When starting a post image, use this starter Illustrator file. https://www.dropbox.com/s/rx1m22xgybmh2mk/-Foundry%20Image%20Starter.ai?dl=0
The file above contains pre-created layers with each category background color. Designers can turn off the ones they don’t need, and they’re ready to go. Some layers also contain image examples, the color guide, and pre-populated color swatches.
A case study image will belong in one of the four Foundry categories: UX & Content, Design, Development, or Culture. This is because a case study typically focuses on one of these areas. Identify the appropriate case study layer in the starter file that contains the gradient stroke for that category. Place the client’s logo centered in the frame. Be sure to use ample white space around the logo.
Meet the team images are used with Foundry posts that introduce new team members. They exist in the Culture category, which uses blue from the color palette. When creating these images, open the starter file…
https://www.dropbox.com/s/aywolmsfn1pmrm4/Foundry%20Team%20Image.psd?dl=0
Drop in the person’s photo and run this Photoshop action:
https://www.dropbox.com/s/xxw877dh8u3o9lj/Foundry%20Culture%20Images.atn?dl=0
After running the action, it should look like these:
The announcement post image is used for Foundry posts that contain announcements like a job opening, appearance on a podcast, call for apprentice applications, workshop promotion, etc. Similar to case study images, announcement images could apply to any category. Announcement posts generally contain a title and Sparkbox logo. They can also optionally contain subtext which can serve to give more context. A keynote template file is provided for easy creation of these images. There are a few different types and variations of announcement images explained below:
Sparkbox newsletters like “Be Better” and “Let’s Talk” exist as posts in The Foundry. These images are also attached to one of the four categories. They use the icon associated with the newsletter. All of these images exist currently in the exported final images folder, so we’ll never need to create one, just pick the appropriate one to use.
This is a guide for how we handle sizing and optimizing images on The Foundry.
For images on The Foundry, both featured and in-post, it’s important that we create beautiful and engaging imagery to complement and enhance our written content, but the images should be optimized to ensure the best performance possible.
Faster page loading through images with the smallest file size possible (without sacrificing image quality).
This depends on the content of the image. If it is a graphic or something with a limited color palate, use a PNG file. If it is a photograph or something with lots of color, use a JPG. When in doubt, export both a .png and .jpg and see which has the smallest file size.
*A note on full-width images:
Currently, full-width Foundry images will never display larger than 720px wide. Why should they be saved as 1200px wide? The extra pixels are for retina screens, where the image will be downsized to fit the 720px width but will have a higher pixel density, resulting in a sharper image. If the images were only 720px wide, they would appear blurry on retina screens. Why not double the 720px size and use 1440px wide images? So far we’ve been using 1200px wide images with no noticeable loss of quality, but the smaller size means smaller files and faster load times.
We run every image through a compression tool to remove unnecessary data and enable an even smaller file size. Try these web based tools for their respective file types:
We follow this file naming convention to keep things organized and easy to find.
Use the author’s first initial, last name, year, month.
Example: a-spencer_19-5.jpg
Use the “case-study”, client name, project (if needed).
Example: case-study_ncsbn-timeline.jpg
Example: case-study_boom-crate.jpg
Use the “announcement”, name of conference or podcast (if applicable), year, month.
Example: announcement_how_19-5.jpg
Example: announcement_generic.jpg
Our images should be as small as they can get while still looking sharp. Our users will thank us! For more information on image performance, see this foundry article.