Rules for all media (print and screen)
- Create a focal point to draw people’s attention.
- Maintain the hierarchy of information: use font size, contrast, and color to visually convey the relative importance of information
- Use consistency, repeat key design elements, especially in multi-page documents.
- Flush left layout for a body copy
- Avoid 'widows', 'orphans', 'runts':
Widow: A widow occurs when the last line of a paragraph is not able to fit at the bottom of a page or column. Instead, it sits at the top of the next page.
Orphan: An orphan is the exact opposite of a widow. It's when the first line of a paragraph sits at the bottom of a page by itself.
Runt: A runt can occur anywhere throughout a page or column - when the last line found in a paragraph ends with a single word.
- Format the elements like heading and body type as paragraph styles (we will learn it).
- Limit the total number of fonts you use in a design and select fonts that pair well together.
- Use kerning, tracking, leading and alignment to make your text more readable.
- Ensure there is enough contrast between the text and the background.
- Avoid all caps for a body copy
- Spell-check your text, and proofread it to catch errors that spell-check misses.
Difference in Screen vs. Print
1. Measurement:
Don’t think in terms of print. Digital design uses pixels, not picas or inches, to measure dimensions. Computer monitor resolution is 72 dpi.
2. Colors:
- You will work with RGB (Red, Green, and Blue), not CMYK (Cyan, Magenta, Yellow, and Black).
- Brightness and saturation of colors are much more intense on screen than on paper.
- Display on different devices can vary – computers (Mac vs. PC), monitors (calibrated quality), digital display screens, TV (latest screen technology), etc.
3. Typography:
- Pay special attention to readability – the amount of effort it takes to read your text; it is more difficult to read from the screen (the presence of light, glare, and reflections)
- Font size should not be too small, 14-18 px. is OK
- Choose simple, legible typefaces.
- Do not make your text lines too long or too short for the medium. The number of characters (with spaces) per line should be around 55-75, 60 is perfect number (smaller for mobile devices: 30-40 characters)
Text line width in pixels: about 500 pixels with fonts set to around 14-16px – normal browser defaults
4. Interactivity
We will use some basic simple interactivity such as navigation and buttons, but be careful:
- Consider the medium - not all interactions work in all formats and on all devices.
- Use interactivity consistently. For example, make sure navigation is consistent between pages.
- Do not use too much interactivity, it will confuse the viewer.
- Do not forget to test!
5. Saving
Method 1:
The Export dialog offers two options for PDF: print and interactive. You have to save it as Adobe PDF (Interactive), otherwise interactivity will not work.
Method 2:
Choose File > Publish Online to publish any InDesign document to the web and share it on social networks, via email, or as a standalone URL. The online document supports all of your InDesign document’s interactivity.
Publish online tutorial