Design techniques

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.

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.

We've now made an agency-wide transition to Figma . As such, the following is written through our previous lens using Illustrator. While the techniques employed are shared, we will soon be updating this guide to reflect the shifts we've made as a team through our change over to Figma (which is worth noting we are incredibly happy with!).

What is important to us is that our tool respects and supports discipline and time—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 initial question in more detail, but the main reasons we use Illustrator include:

Illustrator works with numbers and can facilitate the transition from design into development as the system is created around numeric principles.

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.

Illustrator lets you easily set up different grid systems which help to achieve pixel perfect designs.

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.

Illustrator is vector-based so a single design can produce appropriate assets for various screen resolutions (as well as print media).

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.

Illustrator provides optimum control for creating and modifying geometric shapes, including sub-pixel accuracy for optimal rendering on screen-based media.

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.

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

00 strategy – SOW, 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.

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

• 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.
• Replace spaces in file names with underscores "_".
• Names should be grouped by dashes: “maison-et-objet_design_01.ai” instead of “maison_et_objet_design_01.ai”.
• The folder structure should be as flat as possible, the less folders in folders, the better!
• 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”.
• 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.
• 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.

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.

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).

The “Include Linked Files” checkbox should stay unchecked when saving the file in Illustrator (File > Save as).

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).

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%).

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.

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.

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) 

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.

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.

When working with paragraphs of text make use of the “Area Type Options” feature which allows the first baseline to be set to “leading” thus matching the 5 x 5 pixel grid (Type >Area Type Options > First Baseline: Leading). Apart from your text areas being perfectly aligned to the 5 x 5 pixel grid, this feature is a real time saver when in explore mode, as changing fonts and type sizes will not “move” fonts from their baseline.

Additionally the option “Auto Size” (Type > Area Type Options > Auto Size) automatically adapts your text bounding area to the amount of text which makes the file much cleaner. This can be set globally as well (Preferences > Type > Auto Size New Area Type) so whenever a new text area is being created this feature gets applied.

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.

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.

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.

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.

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.

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.

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.

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.

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

When drawing objects turn on the modular grid + 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

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.

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.

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.

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).

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).

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.

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 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)

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 are a first step to CSS colors and keeping them organized will ease the transition to the build.

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.

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

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.

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.

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.

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.

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).

Tip – Hitting + 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 . By selecting and moving individual points, an object can be resized using the keyboard or Move Tool. 

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

Tip — [ shift ] + [ ← ] [ → ] multiplies by 10
Tip — [ alt / option ] + duplicates the object

When selecting an object with either of the Selection Tools active, or , pressing the Enter key 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.

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.

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.

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 . It also speeds up the hand-off process when specifying the fonts for developers.

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.

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.

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)

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.

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.

With the Artboard Tool + 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).

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.

When exporting files in 2x we often fall back to JPG exports with 80 or 60 compression — especially for photography heavy pages. As a basic rule, make sure your file size stays below 20 MB. By default, images larger than 20 MB will not get auto generated thumbnails on our studio website.

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)

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.

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.

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.

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

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

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.

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.

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.

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

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

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