I’ve made a few items for print, but to be honest I don’t know too much about it. I’m a web designer and this post outlines a few basic tips for print designers.

Before we get onto the technical stuff I want to consider what we’re designing and who it’s for.

Print designer – Magazine, Leaflet, poster
Web designer – Website, Email

Generally speaking, print products will be a physical object which you can hold in your hand. A web designer makes things that will be viewed on a monitor. It’s worth noting that the two things often overlap with online magazines and printed website designs presented to clients (so I believe you can be equally ace at both once you understand them).

Both web and print design share similar characteristics but generally speaking….

When creating print products such as posters or business cards you’re trying to catch peoples’ attention and spark an interest in your product or service, a good example is a book cover, or the first page of a brochure.
However print isn’t just about making things pretty, consider the inside of a book which needs to be well laid out and easy to read, two fundamental characteristics which exist in Web Design. You also have physical properties such as paper, textures and shapes to consider.

On the Web the main objective is to impress and keep an end user on your website for as long as possible – encouraging them to read, buy or whatever is needed. You’re not limited with space (as such) but you need to ensure that sites are easy to use, highly functional and appealing for the end user.

Styleguide

A styleguide is basically a document that outlines the visual rules and features to ensure consistency on screen (I Imagine these also exist in print, possibly in a different format?). It should make websites consistent, achievable, better UX, high usability and ultimately fulfill a website’s goals more effectively.

A styleguide outlines things such as fonts, colours, lists, images, borders, gradients, line heights etc. A extensive styleguide would include grid sizes and layouts, however unless it’s a huge/important build I think most layouts can be demonstrated clearly in the website designs.

Want a good example? Take a look at this excellent styleguide for the Medium website.

What’s the point?
Writing code is tough. Developers need to plan ahead and try make our code as well structured and modular as possible. By predefining  these design styles we can write neat and reusable CSS which can be used throughout our website.
In addition there should (generally) be a minimal amount of variations (layouts, styles) and typefaces on websites. Adding ten different font and layout variations to a series of website pages is not advisable.

This might be easier to explain with some code examples (vanilla CSS and BEM).

.header {
color: red;
font-size: 2em;
text-transfrom: uppercase;
}
.header--smaller {
font-size: 1.7em;
}
/*
 Then we can simply apply these rules to our code.
 We can reuse as much as we want.
 If something changes along the way then we only need to change one css rule
*/
<h2 class=“header header--smaller”>This is a small header</h2>

Using styleguides will very much depend on the designer, the budget and client etc and it’s not going to be viable for everyone. I try to push it into all my projects where possible. I think it helps designers/agencies by :-

• Pick and easily compare fonts, elements etc
• It allows a clear idea of what’s being designed from the beginning
• It makes thing easier to present to the client initially
• It gives a better representation of your work process
• You can refer to the styleguide at any time during the design process
• Offers a enhanced and professional design service that is potentially worth more money
• You can involve the clients at each step of the process.

Responsive design

In print the height and width of your work are pre-defined so you have to design within a certain area. As we know, websites can be fluid and can be as big – or small – as your screen allows. You’re allowed to make use of the whole screen! Check out these great examples of full width sites.

I wrote a rant about breakpoints recently and it’s something I really believe in…

Basically designs are  being made at 320px, 768px purely because they are iPhone/iPad sizes. We’ve now got the iPhone 6 which is bigger than all previous iPhones so all those 320px designs are now pointless.

To cut a long story short, the design should break where it needs to break. If the navigation is going to look shit at 300px then break it there and start the new breakpoint design.

Add as many or as few breakpoints as it takes to make your design achieve it’s potential on all screens regardless of their size. I generally use small, medium and large, I sometimes do a X-large when the design needs it.

Add as many or as few breakpoints as it takes to make your design achieve it’s potential on all screens regardless of their size

When coding, us Developers should adopt a mobile first approach.We’re working with a methodology called Progressive enhancement. You can read about that in this post but here’s a brief overview of it…

With progressive enhancement I get my mobile version looking spanking and then I continue to improve my website as it gets bigger. I’m not hiding anything and I’m not watering anything down, I’m just deciding how to enhance it and make it more robust.

In other words we start building the mobile site first and then move forwards though the breakpoints. This way we can consider everything right from the off.
I now adopt this ‘mobile first’ approach when designing. Many people think it’s ok to give a developer the desktop design and they “make it responsive“, this is not the case as there’s so much to consider. I also see many designers creating a desktop design first without thinking about how mobile is going to work. The aftermath is sometimes a shit, cramped & poorly thought out mobile design which is a pain in the ass for developers.

Important things to consider include

• Are you hiding something on mobile but showing on desktop? Why? It still runs in the code and slows our site down whilst offering the user less content. Be creative, thinking things through from the ground up.
• How images will look on smaller screens, will landscape images be tiny? Do you need to change the aspect ratio for different screens? Do you need to supply different images for the different screen sizes?
• Should fonts be larger on mobile? Should spacing between rows be smaller?
• Sliders, tabbed boxes, accordions, hidden content etc needs to be thought through (more on that later)

Designing for retina

The quality of screens are constantly improving and most apple devices now have a Retina display as standard.
Don’t know what a retina screen is? Read on..
You might have an iPad and an older desktop monitor with the same physical size but they have different pixel densities. The iPad has many more pixels crammed within its space, meaning that the display is much higher quality.

To summarise, these Retina devices require double the pixels to display a non-pixelated/blurry image. What developers need to do is take an image which is 2x the size and compress it so that it’s suitable for retina screens. This means that the designs need to be 2x the size. If you’re making a website that is wrapper in a 960px container then it needs to be 1920px! This applies for every design! Dont worry about the math after, we’re smart capable folk. 😉

Here’s some code to demonstrate these retina images.
The following @2x image is actually 200px x 200px in size but it’s compressed via our code for retina screens.

/* 
Default CSS
This adds a bg image to something with the class 'image'
*/
.image{
background: url (img.png); 
height: 100px; 
width: 100px;
}
/* 
Retina CSS
This makes the 'image' use the larger image and compressed it to look right
*/
@media print, (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi){
.image{ 
background: url ([email protected]); 
background-size: 100px 100px; 
} 
}

Screens will continue to improve and the new iPhone 6 plus has a higher PPI score than its ancestors. It won’t be long before we’re moving onto @3x images.

Alternatives?
Some alternatives include making use of non-raster images such as vectors (SVG) as they scale up and down and always look pixel perfect. SVG’s are quality and if it’s possible to use a vector over a raster image then you should definitely do so! Here are some excellent slides about making use of SVG’s on the web.

Another good idea is to make icon fonts. They are basically the fonts you seen on screen but in the shape of an image, they scale up and down perfectly as they’re a vector. You can use tools such as Icomoon to generate them or make use of awesome libraries such as Font Awesome. You can read more about icon fonts here.

There are also some new image formats (WepP and JPEG XR) which are being introduced by Google and Microsoft, but they aren’t anywhere near ready to be introduced to modern browsers.

It’s not like print

One of the biggest problems I’ve had is that designers complain that the site looks different to their designs.

They might have supplied me with a lovely neat PSD, but now all the content is in there it’s all over the shop. This is always going to happen, especially if a designer is using placeholder text such as lipsum. A good solution would be to obtain the content prior to design. Of course that’s not always possible so it’s important that designers think ahead of how additional/less content could potentially mess up their designs.

It’s also important to understand that the visualisation of a website depends on many different variables such as operating systems, users device and how the browser rendering engines work. So your fonts, colours, images, line heights and many other things are all going to look – slightly – different from screen to screen.

Over the top/talk to me

I’m often amazed and impressed at the amount of quality craft and detail that goes into print design. I’m also often amazed and dissapointed at the amount of quality craft and detail that print designers put into website designs.

Whilst it might look utterly brilliant in your PSD, I assure you it could be a web developers nightmare.
Almost anything is achievable with code but that doesn’t mean to say that it should be done. It’s important to find a balance between the design and development whilst considering factors such as browser support, timeframes and costs.

I think it’s important that designers work with the developer whilst designing a website. They need to ensure that the designs are sustainable and practical from a developer’s perspective. Designers shouldn’t really just present a website to a developer and expect it to be built.

Modern trends/UX

It’s important to keep up with what looks good and what’s in fashion whilst breaking new boundaries and designing exciting new stuff. There are dozens of inspirations sites, including mine and I try to constantly stay on top of what’s current.
Things like content sliders, tabbed boxes and accordians are often just stuck into designs to fill a gap. Nivo slider was a fantastic plugin and the web was awash with them five years ago.

In addition to the fact that they’re out of fashion it’s also important to consider the UX of your designs. Do you really need a slider with four slides? Do you think anyone is ever going to view slides 2, 3 or 4? If you’re ever thinking of using a content slider then think do you actually need it and then check with this site to see if it’s acceptable.
Hidden content is – in my opinion – pointless. Unless it’s adding something or it’s needed to enhance the website then just consider whether you actually need it to be concealed. You’ve got a massive amount of screen to play with and an infinite amount of pages to use. If you definitely need some hidden content then think things through and be creative with it.

What else?

They are just a few of the main points. Others include:-

• You can make things move! Check out some of the awesome effects we can make.
• If you’re making buttons or links then add a hover/active state. It’s annoying having to guess how they should look.
• People need to navigate around the site. Is the navigation easy to use, does the site flow easy and does the site attempt to keep the readers interest?
• You’re using RGB not CYMK
• You need a grid layout
• There are loads more being introduced everyday, the web is constantly evolving.

Well that’s another rant. I’m impressed you’ve made it this far. I hope I don’t sound patronising, that’s not my intention. If I’ve missed anything, made mistakes or I’m wrong then hit me up on Twitter – .

Thanks for reading!

Shane

• Article
• CSS
• HTML
• Learning
• Web Design