There is a wide range of designers in the world - textile, print, web, app, etc. When designing in any medium, there are a lot of elements that remain constant – contrast, balance, composition, color, etc. Print and digital designers work with vectored and rasterized images and, when including text, appropriate color-contrast for readability. However, there are distinct differences between designing for print and designing for digital devices.
Usually designers make a somewhat difficult transition from print to web design, occasionally frustrating web and app developers. In this digital age, some individuals may have learned to create websites first and try to create posters or other printed documents later, frustrating the printers that need certain specifications to print the project properly. This article is intended to define the basics of working in either medium, so you'll have a baseline of knowledge to use on future projects, regardless of the end product.
DESIGNING FOR PRINT
First and foremost of the differences between print and web is the color modes you use. You can learn more about them in my article CMYK & RGB – Understanding Your Color Modes. Print design uses the CMYK color mode – an acronym for Cyan, Magenta, Yellow, Key (Black). Unless special circumstances exist, printers require that projects use the CMYK color mode to print properly. Many printers, and even some software, like Adobe’s InDesign, will warn you if the color mode is incorrect.
Because computer monitors vary in calibration, you can’t trust that the colors displayed on your screen will match what prints on paper. To fix that problem and avoid numerous, costly test prints, color books were created. The most popular is the Pantone system. Pantone is used in print design, but also fashion, interiors, and textiles. Pantone creates and catalogs thousands of spot colors – colors that are formulated into their own ink, rather than being created by a combination of inks like CMYK. And those swatches are compiled into swatch books like the one pictured below. Each printable Pantone swatch has equivalent CMYK code, so you can be confident of the end result on a normal CMYK printer. These swatch books are expensive but an absolute necessity for print designers.
Additionally, print designers need to be aware of printer constraints. Printers and cutting machines often shift slightly during their processes. Because of this, most printing companies recommend that you use a printing template, like the one pictured below, to assure that the printed design looks as close as possible to the provided file.
Most printers can’t print what is referred to as a “full bleed,” or ink extending all the way to the edge of the page. A bleed is the area beyond the edge of the design that gets cut off. Printing instructions usually require that you extend the canvas and any images touching the borders a small amount beyond the finished size, so it can be trimmed down without potentially showing any blank edges.
Crop marks can show printers (the people, not the machines) where to cut, even when the edges of the design have a white background. Most printers also recommend margins – a barrier between text or important images and the trimmed edge. Because printers and cutting machines can shift, anything between the margin and trim lines could potentially be cut off. Outside the bleed line is the slug. The slug contains color registration marks and any instructions for the printer, if including them is deemed necessary.
Ultimately, each printing company has different requirements due to the software and equipment they use. Always ask for the printing guidelines before submitting a design. If you can, find out the printing specifications BEFORE starting your design, so you can properly set up your document settings from the beginning.
DESIGNING FOR WEB
Designing for the web is a very different experience. Web designers must be aware of developer constraints. Depending on the tools or frameworks they use, they may not have full control over the code to match every style exactly. However, if you're familiar with those constraints, most design aspects are still within your control.
First, any digital project should be designed in the RGB (Red, Green, Blue) color mode so that the colors display correctly through light. Like CMYK, you can learn more about RGB in my article CMYK & RGB – Understanding Your Color Modes. Developers will need the colors you use in your design in hexadecimal codes. Luckily, programs like Adobe XD can easily export Design Specs that include colors, sizes, fonts, and more. Still, web designers should also be aware that not all monitors are properly color-calibrated. In fact, the colors on most monitors vary slightly. There’s not much that can be done about it, except making sure that your own monitors are calibrated well.
As for fonts, only some are what we call “web safe.” Web safe fonts are fonts that are pre-installed on most computers – fonts like Arial and Times New Roman. My favorite list of web safe fonts is on CSS Font Stack because it’s more specific about the availability of those fonts between operating systems. Though Helvetica is a commonly-used font, you’ll notice on the link above that it’s available on all Mac systems, but rarely on Windows. That’s why even web safe fonts should include a fallback system. Font fallbacks are simply fonts that should load if the desired fonts aren’t available, ultimately followed by “serif” or “sans-serif”. In CSS, your fonts should look something like this:
font-family: Helvetica, Arial, sans-serif;
This CSS specifies Helvetica as the desired font, but if it’s not available, Arial will load. If Arial is also not available, the web page will load a basic sans-serif font. You can have as many fonts in the fallback system as you’d like, though it’s not usually necessary to have more than a few.
Don’t worry about being restricted to that small list of over-used fonts, though. Additional fonts can be added to websites using Google Fonts or other custom fonts with a simple line of HTML code. However, font fallbacks should still be included, just in case the page doesn’t load correctly.
Several terms in design are different in CSS, and you’ll need to know them if you ever need to provide the CSS for the developers. For example, you wouldn’t define “Arial Italic.” Instead, you’d define “Arial” in the font-family and then add font-style: italic; as a separate line of CSS. Bolded typefaces would be defined in a similar way, using font-weight: bold;. Some designers will define the various levels of bold-ness in custom fonts with multiples of 100 (from 100 to 900). This works especially well for fonts with many variations like “Thin,” “Book,” “Medium,” “Bold,” or “Black.” Additionally, text can easily be transformed to all uppercase, all lowercase, or capitalized with the text-transform CSS style.
In print, text spacing is adjusted using leading (the space between lines of text), tracking (the space between each letter in a line of text), and kerning (the space between individual pairs of letters). In CSS, however, leading is referred to as “line-height.” Tracking is referred to as “letter-spacing.” And kerning is automatically applied via the browser and font specifications. There is some CSS capability to turn the kerning off, but there is rarely any need for that.
Web designers should be extra aware when preparing images for development. Images of fonts or other vector images should be saved as SVGs (Scalable Vector Graphics) because they are able to scale or shrink without losing resolution and are often smaller in file size than rasterized images. When using rasterized images (created using pixels instead of calculated points), you should usually use JPG/JPEGs or PNGs. PNGs are usually larger in file size but will preserve any transparencies. JPG/JPEG images will always display as a rectangle, filling any transparency with the background color selected when the file is saved. If you’re saving images with any transparency, always use a file type, like a PNG, that can display it. Trying to match the background color of an image to the background color of your website is nearly impossible, even sometimes with white if your image has lost resolution.
You may notice that image files can be rather large, sometimes several megabytes. Adobe XD easily exports images to-size, ready for the web, but if you prefer designing in Photoshop, you can go to Export --> Save for Web (Legacy) to save images at a significantly decreased file size without losing much resolution. I highly recommend that you set up your documents properly, whether you use Photoshop, Illustrator, Sketch, or Adobe XD. If your canvas is accurately-sized, your images can be exported to the size they will be on the web page, which may make things easier for the developers. But more than anything, make sure you keep your file sizes down. Larger files slow down page load times, creating a poor user experience and lowering search engine optimization for your site.
RESPONSIVE DESIGN
You may have heard the term “responsive design” repeatedly throughout the web industry. If its meaning still alludes you, it refers to design that has CSS assess the width of the device to determine the layout. As a designer, you’ll need to make sure you have prototypes for the developers of what the design looks like on web, tablet, and mobile. You may want to check with the developers and ask what breakpoints (pixel widths) they generally use. My personal standard is designing for minimum widths of 1200px (full-size monitors), 768px (tablets), and 320px (mobile phones). I don’t know of any smartphones smaller than 320px wide that get used regularly, so designing for any devices below that is usually unnecessary. It’s not unusual for designers to have exceptionally large monitor screens, so responsive design is especially important for making sure that the designs we create are visible to all users without the added effort of side-scrolling or zooming in.
Within the last few years, “mobile-first” design has become a popular trend. However, when designing for smaller screens, designers may forget to optimize their designs for larger widths. Regardless of what device your initial design is for, make sure you’re adapting it to other screens that will display it.
To do responsive design well, many designers recommend using a grid system. To understand how grids work, I recommend this article, A Comprehensive Introduction to Grids in Web Design. The most popular grid system is Bootstrap. My personal favorite is CSS Grid because it’s incredibly flexible. You can learn it by playing CSS Grid Garden, but I recommend you have a solid understanding of CSS Flexbox first. They work very well together. A pretty comprehensive list of grid systems is available here. Talk to your developers about what system they use so you can design accordingly.
One of the biggest advantages of designing with a grid is the ease of moving blocks of content into a different order as the screen size shrinks. This also helps us, as designers, remember that the design should shift for responsive design and not change completely. Each component of the original design should be fairly close in appearance for the desktop, tablet, and mobile versions. Significant changes to the look and feel add unnecessary strain to the development efforts.
As UX/UI professionals, we should always put significant effort into researching the needs of the users, but our abilities to implement the findings of our research into a functional design will greatly affect the end user experience. An in-depth understanding of the tools and mediums we use will greatly enhance our abilities to make our best products while strengthening our relationships with the developers that bring our designs to life.
Works Cited
Fig.1 - Pantone Plus CMYK, https://www.colormanagement.hu/shop/pantone-ral-ncs-szinskalak/pantone-plus-cmyk/
Fig. 2 - How to Set a Print Bleed, https://helpx.adobe.com/in/indesign/how-to/set-print-bleed.html