504 - Design for Screen - From Print to Screen

While the fundamental aspects of good design very much apply - size, colour, position, white space, typographical best practice and so on - there are many unique characteristics that make transitioning from print to screen a challenge.

Here are some of the things I have identified as primary differences to consider when designing for screen, rather than print:
Space is Unlimited

When you’re designing for print, you’re limited by the amount of page space you can use. This tends to mean that you need to get all your key messages communicated on a single spread, leading to heavier marketing that isn’t always subtle and refined.
On the web, you can use the medium to tease out your marketing messages across a virtually unlimited amount of space, allowing you to refine your approach. Crucially, don’t automatically assume that the same copy will work equally well on screen as it does in print; attention spans are shorter on the web, but you can spread your copy out to become more refined and subtle.

Use of Various Media
One of the biggest differences between designing for print and the web is that in print you’re limited to words and pictures, while on the web you have the opportunity to use a variety of different media to help tell a story, engage the reader and demand their attention. Clever use of video, audio and user interaction can help you to establish a relationship with your visitor (reader), causing them to spend more time on your website, spend more money in your online shop or recommend your content to more people.
That’s not to say that you should automatically shoehorn every kind of media you can lay your hands on into a page; content of any sort should add value to the user experience, offering them an experience or content they can’t get elsewhere. If you achieve the right balance, you’ll have not only moved beyond what you could have achieved in print, but you’ll also develop loyal visitors.

Relationships with Developers
It is difficult to have every skill necessary to create a complete web experience. You might be good at designing engaging layouts and writing tight copy, but without the ability to code PHP and JavaScript your website will be static and unintelligent, or it may be that you can code HTML with the best of them, but you’re not so hot on designing user interface controls.
Successful digital design combine a number of different technologies, requiring different skills. As the designer I am required to produce all the visual mockups to communicate how it wall all come together, which will be passed onto external developers.

Sizing

When designing a digital experience, in the modern day, there are many different platforms to consider. The screen will fit differently and require various layouts adaptions so it can be optimal for all. For example, on desktop, laptop, tablet and phone etc, and now even smart watch and VR. 

User Experience

Unlike print, the web is an interactive medium that can provide instant feedback to a user. As such, designing a website is much more like creating a user experience than a designing a brochure. You need to consider how the reader can move around your content, navigating from page to page.
Keep in mind that a website is often also acting as a brand ambassador, so it needs to convey all the values of the business it represents. Focus on usability, making interactive areas (such as links navigation bars, image galleries and videos) simple to spot and use.


One of the most difficult things for print designers to learn is that web pages can be fluid in their layout. Instead of prescribing fixed sized content areas, on the web, individual text boxes, images and columns can be sized according to the width of the browser window (the viewport). The problem is that there are so many different screen resolutions across devices, and users can resize their browser windows, such that what you see as the fold on your computer will almost certainly differ substantially from what everyone else sees.