As this is a design guide, it is only natural that much of our content uses imagery to communicate. Not only is it more appealing, some concepts can also be more effectively communicated visually. Whether it’s flow charts, interface mock-ups, interactive prototypes, animations or videos, feel free to explore to find the best way to capture your ideas.
Creative direction #
The basic design of this website was intentionally kept minimal, so authors have more freedom to express their own creative ideas in the content they create. Experiment and express yourself, just keep in mind that the total experience of the guide should still be coherent to readers and allow for easy absorption of the content. Visuals should primarily be used for communicating content, not solely for decoration. Regularly discussing your ideas with others and getting feedback is the best way to ensure we can achieve this. Also make sure to look around and take inspiration from what others have done.
Image sources #
We collaborate on visuals the same way we collaborate on text. Please make the source files for your illustrations publicly accessible. For file-based visuals (Sketch, Photoshop, etc), use cloud hosting like a Github repository, Dropbox folder or other similar service. For Figma file, share a link to the source file.
Each markdown file should contain a comment at the top that include links to these source files. For example:
<!-- Editor's notes This page provides an overview to... Illustration sources - https://www.figma.com/file/qzvCvqhSRx3Jq8aywaSjlr/Bitcoin-Design-Guide-Illustrations-CO?node-id=862%3A2982 -->
File folders #
All images in the guide are located in the
assets/images/guide folder. Create a subfolder that matches the URL of your page and place your images there.
For example, the URL for this page is:
Images for this page are located in:
File names #
Keep your file names in lowercase and avoid any special characters (including spaces). Keep them short and descriptive.
My übercool image.PNG
JPG, PNG or GIF? #
For static images, use JPG or PNG. The two formats use different compression methods. PNG files are better for images with flat colors, while JPGs can compress photos and heavily textures visuals better. When in doubt, export both file types and see which one looks best at an acceptable file size.
For short animations, use GIFs. Be aware that GIFs can easily bloat in file size and have limited color depth.
Export images at the right sizes #
This ensures images render crisp and clear while keeping file download size and speed reasonable.
Overall, there are five layout options for images, each one resulting in a different image size. Aditionally, desktop and mobile layout logic differs, and we also need to support regular and retina screen resolutions. Result is that each image needs to be exported at four different sizes. For examples, view the Formatting page.
Pay attention to the image width when you export. Image height is up you, based on the image content.
Image width specifications are as follows, with widths provided in pixels. 2x images are for retina screens and always double the size of the regular image.
|1. Header banner||Desktop||1600|
|2. Extra wide||Desktop||1024|
|4. Desktop inline||Desktop||<400|
|5. Small inline||Desktop||<400|
Example image set:
my-ubercool-image.png email@example.com my-ubercool-image-mobile.png firstname.lastname@example.org
Distinct landscape and mobile images #
Create and specify differently laid out images for desktop and mobile as needed. Many times, using landscape images on mobile is problematic as the image gets so small that its content is no longer recognizable.
File size optimization #
Optimize your images before committing them. The easiest way is to build and run this repository locally. Images will be automatically compressed as you add them. After compression, ensure that the quality is still acceptable. Heavily textured images are sometimes heavily compressed resulting in visible compression crystals, blurry lines and other visual artefacts.
Link preview images #
Social and messaging services typically show a preview image when sharing links. This is a custom image that needs to be prepared and defined in the front matter of each page. The file name should combine the page name and the
-preview suffix, for example
getting-started-preview.jpg for the
Getting started page. The image resolution needs to be 1200x630px for best display across social networks, both JPG and PNG file types can be used. Twitter and Facebook provide handy link preview tools to check if your image turns out correctly.
Next, find out what options are available for formatting your content. Take a look.