1. Preface 1. Preface 1. Preface

1. Preface

Pixel School © AREA 17
AREA 17 and the Pixel School

Intro

The Pixel School is a design methodology created by Arnaud Mercier (May 10, 1972 – September 26, 2011) and formalized by AREA 17. It is a defined way of working that has great impact on the final product. It consists of a set of design principles and the techniques to achieve them.

Disenchanted with the quality of design on the web, Arnaud created the Pixel School in 1999. It became a cornerstone of his design process and the predominant characteristic of his influential body of work. In 2005, Arnaud established the Pixel School as AREA 17’s design methodology. Later, it was formalized in collaboration with Kemp Attwood, David Lamothe and Martin Rettenbacher.

The Pixel School is a living document, updated as we refine our design approach and process. It is part of a series of guides that define how we do things as an agency. While all other guides are private, we have made the Pixel School available to the public.

Why Illustrator

Note: The Pixel School was formalized at a time when Photoshop was the dominant screen design software. Foremost, it is a set of design principles and the techniques demonstrated in Illustrator can be applied using most modern vector-based tools, such as Sketch.

While some designers may be surprised to learn that we design exclusively in Illustrator, it quickly becomes clear why Illustrator is much better suited to creating user centered web systems than Photoshop and other raster-based tools as it’s based on vectors which are related to numbers and numbers are the basis of code.

It takes time and discipline—a keen eye on pixel accuracy—for some of these techniques to be effective. Once learned, they give the designer that employs them a great advantage since he or she can work much more efficiently and quickly. Nearly all designers that have passed through the AREA 17 design studio retain this method of working.

The techniques explained throughout this document answer the intial question in more detail, but the main reasons we use Illustrator include:

  1. Illustrator works with numbers and can facilitate the transition from design into development as the system is created around numeric principles.
CSS only works with boxes
An interactive system is defined by numbers. CSS only works with boxes
  1. Illustrator makes it easy to select objects directly on the canvas. With just one click you are able to place, move and duplicate objects at specific coordinates, making it fast and precise to design and iterate within a system.
Objects are based on geometric vector shapes
Objects are based on geometric vector shapes
  1. Illustrator lets you easily set up different grid systems which help to achieve pixel perfect designs.
Grids are the basis for pixel perfect design
Grids are the basis for pixel perfect design
  1. lllustrator allows you to create modular designs with centralised vector libraries such as Symbols and Swatches which help maintain a design consistency throughout the entire system.
Centralised libraries speed up the work process and allow for consistency
Centralised libraries speed up the work process and allow for consistency
  1. Illustrator is vector-based so a single design can produce appropriate assets for various screen resolutions (as well as print media).
Infinitely scalable vector graphics allow flexibility for various sizes and platforms
Infinitely scalable vector graphics allow flexibility for various sizes and platforms
  1. Illustrator generates very light and agile files which help streamline workflows. Multiple pages are consolidated within a single document (one document = one system) to make file sharing and global edits more efficient.
Light and agile working files keep the system tight: one document = one system
Light and agile working files keep the system tight
  1. Illustrator provides optimum control for creating and modifying geometric shapes, including sub-pixel accuracy for optimal rendering on screen-based media.
Optimum control regarding placement, size, and anti-aliasing of geometric objects
Optimum control regarding placement, size, and anti-aliasing of geometric objects

2. File organization

At AREA 17 we believe that clarity and order should not only be applied to our design work but also to our internal file organization.

Missing files, lost typefaces and folders that are not properly sorted can become a problem when facing a deadline. A decent file organization helps designers and developers to easily share files between each other and it helps you to find your way much faster through any archived files from years back.

General file handling

At AREA 17 we use the following folder stucture for projects. Folders which don’t apply get deleted (and numbers will adapt):

00 strategySOW, proposals, contracts
01 project management – meeting notes, schedules, briefs, questionnaires, etc.
02 requirements – requirements documentation, incl. business, functional, QA, etc.
03 architecture – wireframes, sitemap, flow-charts, diagrams, prototypes etc.
04 assets – brand assets, tech assets, analytics, ad specs etc.
05 references – design research, competitive landscape etc.
06 design explorations – initial moodboards, art direction organized in rounds
07 design – designs to be presented to the client, organized in rounds
08 development – design specifications, design working files, graphic assets
09 deliverables – source files, development files, cms user guide etc.

Internal – There is an internal folder in each of the above folders to be used for working files and internal preview images for A17 eyes only.

Project folder structure
Project folder structure

We share design and document files internally and with clients on our studio website — studio.area17.com. The following file naming rules apply:

  1. File names should be lowercase: “01b_fair_landing_diaporama.png”. → This creates a consistent and clean URL when sharing files on our studio site. Exceptions can be made for company names like “AREA 17” and “IBM” or specific terms like “iPad” etc.
  2. Replace spaces in file names with underscores “_”.
  3. Names should be grouped by dashes: “maison-et-objet_design_01.ai” instead of “maison_et_objet_design_01.ai”.
  4. The folder structure should be as flat as possible, the less folders in folders, the better!
  5. File names should be short: “mo_home_01.ai” instead of “maison-et-objet_homepage_design_01.ai” or simply “home_01.ai” if there is already a folder with the client name “maison-et-objet”.
  6. Design files should be named by section (homepage, landing page, …) starting with numbers, followed by letters (01a, 01b, 02a, …). For bigger projects it’s helpful to plan ahead in batches, like 01-09 (batch A), 10-29 (batch B), 90-99 (batch C). See an example of a more complex file structure for Opéra National de Paris below.
  7. Latest files should be in the root folder, older files get archived in round folders: “round_01_brand-explorations”. Apply the same structure to “00_internal” folders.
A17 studio organization (FTP)
A17 studio organization (FTP)
Opéra National de Paris — File order system
Opéra National de Paris — File order system

File management

Each project is split into multiple design rounds:
— Design exploration (Initial moodboards, art direction)
— Design (Designs to be presented to the client)
— Development (Design production and hand off)

Each major design update is saved as a new Illustrator file with an updated version number.

File organization in Finder
File organization in Finder

Image links

Keeping all raster images in a folder “Links” and placing them to the artboard keeps the actual Illustrator file small and easy to manage. Generally all image editing takes place in Photoshop and will be updated automatically.

When placing raster images in Illustrator make sure to link to them instead of embedding them (See screenshot).

Place dialog box: [ command ] + [ shift ] + [ P ]
Place dialog box: [ command ] + [ shift ] + [ P ]
The “Include Linked Files” checkbox should stay unchecked when saving the file in Illustrator (File > Save as).

Illustrator Save As
Save As dialog box

Image raster settings

We tend to “Place” images at the exact size to our artboard. This is very important to keep our file size small and to have a good performance in Illustrator.

Then when working on responsive designs for tablet and mobile we mostly need to scale down images (rather then scaling them up). This means we should have some pixel buffer when exporting for high-resolution screens to test on tablet or mobile. However, scaling down images in Illustrator ends up in blurry edges and fuzzy pixel attributes, so we need to add a rasterize filter (Effect > Rasterize) with “Art Optimization” on each individual image object to avoid this happening. Choose the resolution setting to be “Use Document Raster Effects Resolution” so the effect will apply always to the global image raster setting. This is helpful when we need to export for instance in 2x, 144dpi (200%).

Art Optimized Rasterize filter <br /> Tip — Create a keyboard shortcut to be able to easily apply the filter on each image which gets added to the canvas. E.g. [ Command ] + [ Shift ] + [ R ]
Art Optimized Rasterize filter
Tip — Resolution should be set to “Use Document Raster Effects Resolution” so the effect will adapt to the global image raster settings (helpful when exporting in 2x)
Tip — Create a keyboard shortcut to be able to easily apply the filter on each image which gets added to the canvas. e.g. [ command ] + [ shift ] + [ R ]

The image quality depends on the scale percentage, the more we scale down a big image the stronger the pixel artefacts, even with a rasterize filter applied.

25% scaled down images The image on the left has no rasterize filter, the image on the right has an art optimized rasterize filter
25% Scaled down images
The image on the left has no rasterize filter, the image on the right has an art optimized rasterize filter

Layer organization

The “Layers” panel (Windows > Layers) is really powerful when it comes to organising files. Think of Illustrator layers as folders like in Photoshop and try to keep objects organised by grouping them into multiple layers and sublayers. A decent file organisation helps you not only to establish a proper system for your design, but also to hand-off your files easier and to find your way through archived files much faster.

  1. Keep the folder structure as flat as possible by not creating too many sublayers. This makes it easier to get an immediate overview over your system.
  2. Group elements which appear on every page of your website (header or footer elements) into one single layer either at the top or at the bottom of the panel, rather than duplicating them into every single layer.
  3. Use one document for the whole system if possible (one document = one system). It will make it easier to copy elements from one page to another and share the same libraries (e.g. Swatches and Styles).
  4. Stick to the same file naming and order for your exported files. This makes it easy when exporting layer by layer for a presentation and sharing your files. (See 2.1 – General file handling for consistent layer naming).
Layer organization for Dering Hall<br /> Global elements like header and footer are on individual layers (starting with a "#") so they don't need to be repeated within each section layer
Layer organization for Dering Hall
Global elements like header and footer are on individual layers (starting with a “#”) so they don’t need to be repeated within each section layer

3. Grid

Grid-based design is a foundational aspect of AREA 17’s design philosophy. Every system we design is based on a grid.

Working with a grid is an essential starting point for any project. It is the controlling principle helping to create an organized graphic system that is tight and easy to understand, while also providing a framework for making design choices.

The grid defines a mathematical system for the design and provides rules for the size and placement of objects within it. The number of possibilities for any given decision is reduced, making it faster to explore and iterate solutions.

Because Illustrator’s vector drawing space is also math-based, the tools provided by the program are more efficient than using the mouse. Moving objects along the grid using the cursor keys, the transform window or the move function is much faster and precise.

5 x 5 pixel grid

At AREA 17 we have settled on a modular grid of 5 x 5 pixels. Every measurement of the page becomes a multiple of 5, including column width, margin and paddings, image heights and widths, leading and spacing between elements.

Choosing objects, image sizes and spacings to be a multiple of your modular pixel grid helps to ensure that all elements are perfectly aligned—pixel perfect—vertically and horizontally. This way moving objects around on the canvas is much easier and faster because the math is simple.

With the help of the 5 x 5 pixel grid we can establish a consistent repeated pattern which makes our designs more balanced and readable. (Also see 3.2 — Baseline grid)

5 x 5 pixel grid in use
5 x 5 pixel grid in use

So here is how to set the modular grid to 5 x 5 pixels in your Illustrator Preferences.

Tip — Uncheck “Show Pixel Grid (Above 600% Zoom)” as the 5 x 5 pixel grid will show actual pixels at a zoom level of 600%. Depending on your background color, choose a color that is visible enough for your grid.
Tip — Uncheck “Show Pixel Grid (Above 600% Zoom)” as the 5 x 5 pixel grid will show actual pixels at a zoom level of 600%. Depending on your background color, choose a color that is visible enough for your grid.

Below is a graphic showing the example of a button aligned to the 5 x 5 pixel grid. Ideally we try to align our design perfectly on the baseline.

Button example on 5 x 5 pixel grid — Button text should be vertically centered within the height of your button. Ideally the text is aligned to the baseline (as shown on the image), but not a must.
Button on 5 x 5 pixel grid

However sometimes objects do not align on the 5 x 5 pixel grid. This can happen for example if you need to stick to a certain image ratio (4:3 or 16:9) or if your text paragraph leading doesn’t look good when aligned on multiples of 5.

Exceptions

— Button on grid, type not on baseline grid  →  As mentioned in the above example this can happen depending on the size of your button height and the chosen font / size. Most important is that the font is vertically centered within the height of your button, we can forget here about the alignment on to the 5 x 5 pixel grid.

— Type line height not a multiple of 5  →  First line is aligned on baseline, then it draws away. Try to catch the 5 x 5 pixel grid as soon as possible further down.

— Image listing with 1 pixel horizontal separation lines  →  Lines are on the 5 x 5 pixel grid which creates asymmetric spacing above and below the lines (like 30 versus 29 px). Here it is possible to “cheat” and forget about 1 px spacing difference, rather keeping the content on the 5 x 5 pixel grid. This is easier to work with and developers will know the space should be the same.

— Image has a 16:9 ratio and its height doesn’t align on the grid (e.g. 300 x 169)  →  In this case the top part of the image goes on the baseline. Try to put the next object on the baseline again.

Baseline grid

The 5 x 5 pixel grid comes also into play as baseline grid for all elements such as type, images, strokes and other objects. This helps to establish a vertical rhythm which improves readability and creates harmony within page elements.

Align text to the baseline, preferably choosing a line height which is a multiple of 5  (e.g. 15, 20, 25, 30, …) to keep easy control of your layout. In case that is not possible, we align the first line of a paragraph on the baseline grid. The goal should remain legibility and fine type setting.

Baseline Grid
Baseline grid

Vertical grid

In the beginning of each project at AREA 17 we spend time on choosing a good vertical grid which best suits the project requirements. Having defined layouts of different resolutions is becoming more important, so thinking about fixed versus fluid grids and possible “break points” for responsive layouts is part of the exercise.

Aligning the vertical columns on our 5 x 5 pixels grid will help to move objects faster and calculate measurements easier. However choosing a column width of a multiple of 5 might not always be possible and shouldn’t be a strict limitation.

→   Download an example Browser Template with predefined break points on our studio.

→   Compare devices regarding sizing and resolution on Google Device Metrics.

Vertical Grid, based on 5 x 5 Pixel Grid
Vertical grid, based on 5 x 5 pixel grid
Example grids for desktop to mobile
Example grids for desktop to mobile
Illustrator Template Layers
Tip — Use “Template Layers” in Illustrator for your grids. They can be turned on and off easily with a keyboard shortcut [ cmd ] + [ shift ] + [ W ] and will not be exported.

4. Drawing

Web-based graphic work requires pixel accuracy. This means objects must be drawn in Illustrator with great attention to detail. As Massimo Vignelli would say: “There is no room for sloppiness!”

For web graphics to appear sharp and crisp, designs must respect the pixel-based displays on which the work is viewed. This is equally true for retina and high resolution screens.

Because Illustrator allows for objects to be sized and placed on partial pixels, extra care needs to be taken to ensure objects are on the pixel grid. It also means that one has more control over how the object will be rasterized.

Vector versus pixel objects

Try to use as many vector objects as possible. This will keep the file size small and speeds up the process when exporting in bigger sizes for high resolution devices.

Pixel preview

The Pixel Preview option (View > Pixel Preview) should always be turned on so you can see exactly how objects will be rasterized by Illustrator when exported. Zoom in to see the details of Illustrator’s anti-aliasing and control it’s rendering on the Pixel Grid.

Pixel Preview on and off at 400% Zoom level
Pixel Preview on and off at 400% Zoom level

The pixel method

Even though we work in a vector-based program like Illustrator, we still respect the pixel aspect of the screen. Every new object we add to the page receives a lot of attention regarding how it renders (sharp versus soft anti-aliasing). When drawing, moving and resizing elements on the pixel grid, we take absolute control of their position and size.

Square on and off the pixel grid
Square on and off the pixel grid

This is the only way to achieve a crisp, pixel perfect design with Illustrator’s design environment.

Good logo construction — 200% Zoom level<br /> The black version is drawn on pixel grid specifically for web whereas the blue version has fuzzy edges
Good logo construction — 200% Zoom level
The black version is drawn on pixel grid specifically for web whereas the blue version has fuzzy edges

Drawing methods

When drawing objects turn on the modular grid [ cmd ] + [ ” ] and work at a larger zoom level. With a modular grid established, shapes are easier to draw because their size is defined by that underlying framework. Our 5 x 5 pixel grid starts to display exact pixels at a zoom level of 600%.

100% zoom level → 1 grid cell = 40 px
100% to 300% zoom level → 1 grid cell = 20 px
300% to 600% zoom level → 1 grid cell = 10 px
600% zoom level and above → 1 grid cell = 5 px

Icon on pixel grid at 600% zoom level
Icon on pixel grid at 600% zoom level

With the Rectangle Tool [ M ] active, clicking on the canvas opens the Rectangle dialog box showing the dimensions, allowing us to draw faster and more precisely than with the mouse.

Rectangle window
Rectangle dialog box

The Transform Window (Window > Tranform) is a very important control instrument to ensure the position and size of every single object on the artboard. The window displays the dimensions and exact position of each object so you can verify that it is on the pixel grid. With the registration point on one of the corners all fields should contain whole pixels.

Transform window
Transform window

If the mouse used, have Smart Guides (View > Smart Guides) turned on to see the dimensions of the shape in real time as it’s drawn. “Snap to Pixel” should be turned off.

mart Guides (5 x 5 Pixel Grid 600%)
Smart guides (5 x 5 pixel grid 600%)

Drawing shapes off the grid

Rectangular shapes and straight lines should always be sized and placed on whole pixels. The exception is when an object requires a little more softness.

Taking the example of a circle with its reference point at the center, the result will be a mathematically perfect circle, but results in hard edges (Top graphic). For smoother edges slightly reduce the size of the circle (Bottom graphic).

Top — Circle too boxy (center and sides on the grid) Bottom — Smooth circle (center on the grid, not its sides: they are 0.2 pixels off grid)
Top — Circle too boxy (center and sides on the grid)
Bottom — Smooth circle (center on the grid, not its sides: they are 0.2 pixels off grid)

The same principle would apply also to designing with strokes where we tend to draw anchor points off-grid to allow for sharp rendering. The example below shows a simple arrow with anchor points on half pixels (highlighted in yellow).

Stroke arrow drawn on half pixels
Stroke arrow drawn on half pixels

Transparency masks

Locking up objects in a Transparency Masks (the object is the mask) helps both to easily move them around on full numbers on your grid and to change their colors with just one click. It is also a great way to make all of your project icons consistent in terms of size as the Transparency Mask serves as container with just one defined width and height.

In our example of the circle which has it’s sides set to 19.6 x 19.6 pixels and a center registration, a Transparency Mask can be used to position its sides on the pixel grid. This way the circle can be moved around easily on full numbers.

19.6 x 19.6 pixels circle embedded in a 20 x 20 pixels rectangle Transparency Mask serves as container object so that we can align the box on full pixels (x: 0px + y: 0px)
19.6 x 19.6 pixels circle embedded in a 20 x 20 pixels rectangle
Transparency Mask serves as container object so that we can align the box on full pixels (x: 0px + y: 0px)

Also when designing logos and icons we often end up with complex objects consisting of shapes and strokes. Transparency Masks help to simplify the work flow by having just one object to select on the canvas.

Example of objects made out of strokes and shapes locked up with Transparency masks
Example of objects made out of strokes and shapes locked up with a Transparency Mask.

“Transparency Masks” need more attention when exporting for high definition devices. We need to adjust shapes and strokes to guarantee sharpness at a larger scale. Also, note that you need to unmask all objects when exporting as .SVG files. (See 8.3 – SVG Files)

Swatches

The Swatches panel allows you not only to change a color in the entire document with just one action, it also gives you a good overview over all the colors used in your design.

Try to keep the color scheme tight and easy to implement. Keep Swatches organised by creating folder groups (Strokes, text, links, accent, etc. …) and deleting all unnecessary colors.

Swatches Panel Organization in Adobe Illustrator (Dering Hall Website)
Swatches panel organization for Dering Hall

Swatches are a first step to CSS colors and keeping them organized will ease the transition to the build.

CSS Color Swatches for Dering Hall
CSS color swatches for Dering Hall

Note that you need to check the Color Type to be “Global” in the Swatch Options in order to be able to apply color changes to the entire document.

Illustrator — Global Swatches
Global swatches dialog box

Appearance

With the Appearance panel you can design complex graphic work with just a single object.

Example button that is made up of a text object — Changing the text will adjust the button width itself as it is based on the character length.
Example button that is made up of a text object — Changing the text will adjust the button width itself as it is based on the character length.
Example of custom text underline — Adding custom effects to the text objects allow you to customize the underline so it will grow with the length of the text (You might need to adjust the position of the text by 0.1 pt until the line becomes pixel perfect)
Example of custom text underline — Adding custom effects to the text objects allows you to customize the underline so it will grow with the length of the text. You might need to adjust the position of the text by 0.1 pt until the line becomes pixel perfect.

To be able to copy all attributes of an object with one click, make sure to enable Appearance in the Eyedropper Options. Double click the Eyedropper in the tools panel.

Eyedropper Options
Eyedropper Options
Tip — Use the Eyedropper tool and hold down the [ shift ] key to select a specific color in a photo

Symbols

If you create designs that repeat a lot of graphics you should make use of the Symbols feature to save time. Rather than just copying and pasting a graphic that you have created you can use a symbol to quickly add copies on your page and make changes to them by just editing your master symbol.

5. Moving and resizing

Precision and efficiency are principle components of the pixel method. For this reason our primary tools to move and resize objects on the canvas should be the cursor keys, the transform window and the move function.

Once again, because the size and placement of objects align precisely to the 5 x 5 pixel grid, moving and resizing objects can be done much faster and more precisely with the keyboard than the mouse when done in multiples of five or ten pixels.

It’s very important to ensure that objects moved and resized mathematically remain on the pixel grid by checking the Transform panel.

Snap to pixel

Although Snap to Pixel sounds like a feature we might always want turned on by default in order to execute pixel perfect designs, the opposite is true. In general, we leave the feature turned off and only activate it when drawing icons and simple shapes. This allows us to enable Smart Guides which is a helpful feature to move objects.

When Pixel Preview (View > Pixel Preview) is turned on, Snap to Pixel (View > Snap to Pixel) is automatically activated as well. Snap to Pixel will override the keyboard increment so that when the object is moved with the keyboard, Illustrator will try to snap it to the nearest pixel.

Snap to Pixel should be turned off, except when drawing on the Pixel Grid
Snap to Pixel should be turned off, except when drawing on the Pixel Grid

This is pretty handy when drawing icons and basic shapes and we should turn on Snap to Pixel when doing so. But sometimes we don’t want our objects to be on perfect numbers—as in the example of the circle (See 4.5 – Drawing shapes off the grid). In this case we need to turn this feature off or put the object in a transparency mask which itself is positioned on full integers.

Transform window

The Transform Window (Window > Tranform) is where we control the position and size of every object on the canvas. It is a very powerful tool for moving objects around by specifying new X, Y coordinates and you can easily resize objects by entering new width and height values (or any mathematical calculation).

Adobe Illustrator Transform Window Your page background should be set to X, Y = 0 as all objects will be related to this. Tip – Hitting [ Command ] + [ Return ] after entering a new height or width will constrain the porportions of the resized object.
Adobe Illustrator Transform panel
Your page background should be set to X, Y = 0 as all objects will be related to this.
Tip – Hitting [ command ] + [ return ] after entering a new height or width will constrain the porportions of the resized object.
Another technique for transforming objects while ensuring they stay on the grid is to use the Direct Selection Tool [ A ]. By selecting and moving individual points, an object can be resized using the keyboard or Move Tool.

Cursor keys

Objects can also be moved by a predefined increment using the cursor keys. The increment can be quickly changed by typing “Command-K” [ cmd ] + [ K ] to open the preferences dialog (Illustrator > Preferences > General).

Change the Keyboard Increment under General Preferences Tip — [ shift ] + [ ← ] [ → ] multiplies by 10 Tip — [ alt / option ] + [ ← ] [ → ] duplicates the object
Change the Keyboard Increment under General Preferences
Tip — [ shift ] + [ ← ] [ → ] multiplies by 10
Tip — [ alt / option ] + [ ← ] [ → ] duplicates the object

Move feature

When selecting an object with either of the Selection Tools active, [ V ] or [ A ], pressing the Enter key [ return ] will open the ever-powerful Move dialog box (Object > Transform > Move). The Move dialog box makes it easy to quickly change the position of any object along the X and Y axis.

Move window Tip 1 — [ alt / option ] + [ return ] copies object instead of moving it Tip 2 — [ command ] + [ D ] duplicates last action. This is very usefule to move or duplicate objects along a grid.
Adobe Illustrator Move dialog box
Tip 1 — [ alt / option ] + [ return ] copies object instead of moving it
Tip 2 — [ command ] + [ D ] duplicates last action. This is very usefule to move or duplicate objects along a grid.

6. Fonts

Keep your type choices simple and reduced. By limiting the use of fonts, your system will be tighter and easier to scan. You’ll reduce the amount of CSS required, making a cleaner site and a faster build.

Note that web fonts make page loads slower, for all devices and speeds. So when introducing new font styles to the design system ask yourself if the addition of the new font is absolutely necessary, supporting the overall hierarchy and communicating what you want to say in a better way.

Font system

A helpful way to quickly get the overview over your font styles while working on your designs, is to list them on a separate layer in Illustrator.

This way you can quickly apply the established font system to other type elements by using the Eyedropper Tool [ I ]. It also speeds up the hand-off process when specifying the fonts for developers.

Font system elements — Maison&Objet website
Font system elements — Maison & Objet website

Character and paragraph styles

If you know InDesign, you know the power of character and paragraph styles. They contain all formatting attributes which you can apply to a selected range of text and they save time and ensure consistent formatting. It’s not always easy to commit to them, but for a big project it can be very useful.

Character and Paragraph Styles panels
Character and Paragraph Styles panels

Text rendering

Consistent font smoothing does not exist in the web world and is a real struggle for any web designer. In Illustrator, you can choose different anti-aliasing methods in your Character panel to be closer to the end result in a web browser. Another easy trick to improve rendering is through color by avoiding the use of full black for body text as it tends to bleed.

Example: When choosing the "Strong" anti-aliasing for Adobe Garamond it looks much closer to the end result in a web browser (even if a bit more fuzzy in some areas). With the "Strong" filter selected you can also control the antialiasing of the font by vertically moving the font object in micro steps (e.g. 0.1px).
Example: When choosing the “Strong” anti-aliasing for Adobe Garamond it looks much closer to the end result in a web browser (even if a bit more fuzzy in some areas). With the “Strong” filter selected you can also control the antialiasing of the font by vertically moving the font object in micro steps (e.g. 0.1px).

However, don’t rely only on these Illustrator tips for improving the rendering of your fonts. Every web browser renders type through a layout engine in a different way and overrides the operating system’s default font smoothing settings. So browser testing becomes very important in order to make sure the end result looks good and the website is comfortable to read in every scenario. (More on this topic)

"Subpixel-antialiased" (left) versus "Antialiased" (right) font smoothing tests in Google Chrome —<br /> Antialiasing relies on whole pixels only (compared to sub-pixel rendering), which effectively reduces its smoothing sharpness by three times. Just in a few cases where light text is on dark backgrounds antialiased font rendering seems usable.
“Subpixel-antialiased” (left) versus “Antialiased” (right) font smoothing tests in Google Chrome —
Antialiasing relies on whole pixels only (compared to sub-pixel rendering), which effectively reduces its smoothing sharpness by three times. Just in a few cases where light text is on dark backgrounds antialiased font rendering seems usable.

Illustrator preview renders all vector text, but when exporting for web, it must have a Type Optimized raster filter applied to it in order to look sharp. We apply this filter globally when exporting our files with the Save for Web feature. (See 7.2 — Export as PNG)

Don’t vectorize fonts as they become “fuzzy” and will not look as sharp as editable fonts. This especially relates to wordmarks and logos.

A17 Typetester

As type foundries have been working on web versions of their typefaces, AREA 17 has developed its own tool to test the type rendering in a particular browser. ‘The Typetester’ is used by all designers at AREA 17.

Typetester by David Lamothe (2012)
Typetester by David Lamothe (2012)

7. Export settings

When it comes to exporting your files it is important to have a clear organization of your output files in mind. The better organized your files are, the faster the production process will be.

Artboard tool

With the Artboard Tool [ shift ] + [ O ] we can select any area on the page we want to export. When exporting page designs—layer by layer—selecting a manually created crop rectangle helps to have all our designs well lined up (starting at the same X and Y coordinates).

Artboard crop area (transparent rectangle) saved on its own layer
Artboard crop area (transparent rectangle) saved on its own layer

Export as PNG

With the Save for Web feature (File > Save for Web) we export our designs as PNG-24 images, including transparency if needed. File sizes tend to be bigger compared to exporting JPG files, but we want our designs to be exported at maximum quality.

Rasterize all type with the “Type Optimized” setting when exporting for web. Illustrator preview renders all vector text, but when exporting, it must have a raster filter applied in order to remain sharp. We apply this filter globally when exporting our files with the Save for Web feature.

All linked images should have a Art Optimized (Supersampling) filter on each individual image object. (See 2.4 – Image raster settings)

Save for Web feature
Save for Web feature

Exporting for multiple resolutions

We work with Illustrator in 100% or “actual” size view. Since most of our objects are in vector format we are able to easily export in any other resolution.

If our working environment is set to 72 pixels per inch, however, you need to export your files for retina and high definition displays with at least the double amount of pixels per inch. You can easily do that by changing your Document Raster Effect Settings (Effect > Document Raster Effects Settings) to 144 pixels per inch before exporting your designs in 200% percent.

Global Document Raster Effect Settings set to 144 pixels per inch
Global Document Raster Effect Settings set to 144 pixels per inch

When exporting your files in 2x, set Percent to “200” in the Save for Web dialogue window (File > Save for Web).

Note that when changing percentage via the Save for Web feature, your exports are vertically limited to 8192 pixels, so export your designs in multiple parts.

8. Production

Creating pixel perfect design mockups is great, but the users will only see the end result, which is the front-end and an interpretation of the design. So there is a gap between the final design and the result online.

As a designer it is our job to keep this gap as small as possible by working close with developers and guiding them through our design work. Creating basic specifications (grid, color, fonts,…) help to communicate the design system. Designers are also in charge of creating all graphic elements during the graphic production phase.

Design handoff

Here is how a typical handoff organization for development looks like:

  1. Approved designs  →  Approved pages for all devices
  2. Working files  →  Packaged Illustrator files including all fonts and links
  3. Graphic assets  →  All graphics and UI elements in SVG or PNG (@1x + @2x) format
  4. Specifications  →  Grid (responsive), color swatches, font system, basic spacings, interactions (hover states, animations, etc.)

Specifications

Working with a 5 x 5 pixel grid makes it easy to show distances between elements. Front End developers at AREA 17 will follow the 5 x 5 pixel grid and can simply pick up distances between elements when turning on the grid in Illustrator. Additionally we use measurement tools like xScope or browser plugins like the Chrome extension Dimensions.

Specs based on 5 x 5 pixel grid
Specs based on 5 x 5 pixel grid

Color swatches (See 4.7 — Swatches) and fonts (See 6.1 — Font system) should be listed and it is very important to specify any interaction separately.

Hover specifications for Télérama
Hover specifications for Télérama

SVG files

At AREA 17, designers export the SVG files. We copy all graphic and UI elements into a single separate file which gives a good overview over our graphic assets.

Icon system for Télérama
Icon system for Télérama

We need to verify how the icons are drawn and adjust shapes and strokes to guarantee sharpness at a larger scale (high-res displays). It is important that all vector shapes are as simple as possible as this will result in a cleaner outputted SVG code, which is faster to load and less prone to display errors. Make sure to extract icons from transparency masks and change text to be vectorized.

More about SVG files on opticalcortex.com

9. Resources

Grid tools

Grid calculator by Rasmus Schultz

Grid calculator by Nicolaj Kirkgaard Nielsen

Grid calculator by Big Bite Creative

 

Responsive

Google Design — Device Metrics

Google Design — Responsive UI

Google Design — Resizer

 

SVG

Opticalcortex — SVG Rendering in Browsers

A List Apart — Using SVG

Medialoot — Exporting SVG icons with Illustrator

Codrops — SVG Icons FTW

 

Online reading

Massimo Vignelli — Vignelli Canon

Dieter Rams — Vitsoe Speech 1976

Marcus Gärde — Grid system based on old books

 

Books

Joseph Müller Brockmann — Grid Systems

Massimo Vignelli — Unigrid System