The transition from print design to web design can be a tiresome process. I know I had some rough moments. Therefore here is the quick list of things to get you going.

Multiply

Designers with a background in print are used to using Photoshop and Illustrator. Photoshop is the most common tool to use for web design too. And there is nothing wrong with that. The thing is it has to be used in different way.

For example, none of the colour blending options are allowed in web design. The reason for this is because there’s no css property for them. Opacity is a decent substitute for it.

Fonts

Playing around with different fonts and even handwritten letters is really fun, but only in print design. Using more than two different fonts on a web page can significantly slow down loading time of your website, and that’s something users won’t accept. You’ll have to stick with a limit of two fonts per website. Even though nowadays you can embed any font into a website, with font generators like fontsquirrel.com, my recommendation is to use Google fonts.

The reason is, when generating a random font, for web use, it might appear bolder in some browsers. On the other hand Google fonts are shown the same in all browsers.

Collaboration

Whereas print designers tend to be a pretty solitary bunch of people, on the web there’s a lot more collaboration – and for good reason: it’s difficult to have every skill necessary to create a complete web experience.

You might be good at designing engaging layouts and writing a 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.

The most successful websites combine a number of different technologies, requiring disparate skills.

Don’t be scared of asking experts for help. It can be a worthwhile investment, and is part of what makes the web such a vibrant community.

Fluid layouts

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

This difference means you need to let go of the idea that you can completely control how your design is going to render, but it also has benefits.

Responsive layout order

Loading website on a phone and then reading the content on a tablet and finally viewing it on desktop is a great feature that almost every site now embraces. For this to happen effectively, for the website to be truly responsive, it needs to be designed that way.

When you organize a web page layout for the desktop, always remember how it’s going to rearrange on a smaller screen.

Structural organization of html is the same as text, content starts from the top left corner and ends in bottom right.

That means, if you have 3 columns (1-2-3 left to right) of content in layout for a desktop screen, naturally you’ll have them in same order from top to bottom on a mobile screen.

Rearranging the content for smaller screens is possible, but it is considered hard coding.

Grid

Aligning every element to the grid is one of the essential things for good web design.

It helps developers a lot, so they can code with ease.

Arranging things on web only by visual context is possible, but when you consider that layouts are supposed to be fluid and responsive, using grid is something that helps you in design process too.

Proofs

Here is something that is actually similar to the print design process. Just like you have to approve proofs for print design, you have to team up with your front end developer and check every detail together so the final product looks perfect.

Learn Basics of HTML and CSS

Learning the basics of coding (HTML and CSS) will give you the perspective to better look at designing for web.

This I have resisted for such a long time. Now I finally added this to my knowledge base and it was worth my time. Now I am responsive as well as my work!