Graphic design techniques can be beautiful, but they don’t translate well to development. Here’s everything you need to know about designing a web-ready file.
There’s one main difference between print and web design: print is tangible, web is intangible. When you design for print or even digital spaces like social media, you design something that exists in a space that you can control. Web design is fluid, (or dare I say responsive) needing the ability to change size and flow to appear correct on any size screen. This may seem like a simple difference, but it affects your design in many ways.
Font Size
DON’T
Never use points when determining size for web. Points have a physical size of 1/72 inch and web design should never be in inches. Using points will usually result in the fonts on the website appearing much larger than they should.
DO
Opt for the simple pixel unit, as your entire design should be pixel based.
Also: Ems are another unit in web design that operates from a base pixel size. Rems are a more responsive version if you’re feeling ambitious. Learn the difference between px, ems, and rems and try using this rem calculator
Grid
DON’T
Never place the objects in your design randomly.
DO
Operate in a grid. The structure of most modern websites work on a flexible 12 column grid like bootstrap. Define the size of your container and your columns and go from there. Your elements should be placed and sized intentionally based on these constructs so that they respond in a predictable way at different sizes.
Also: Experiment with using a full width grid on sections that break your main container. Another web-friendly way to break your grid is to play with absolute positioning. Whether your developer is using WordPress Elementor or another system, work with your developer to ensure that your absolute positioned objects work on all responsive sizes.
Responsive
DON’T
Don’t forget to account for responsiveness. Definitely do not forget about mobile.
DO
ind out what your screen resolution is and consider beginning your design at that size since you’re familiar with it. This way you won’t be surprised with the size of the final live web product. Next, think about the other major screen sizes users have. The complexity of your design will determine how many sizes of your design you need to make. A simple idea may only need a desktop and mobile design (or even just a desktop if you really trust your developer), but a complex design may need up to 6 different sizes to ensure things resize properly.
Also: Consider designing mobile first as mobile users account for half of web traffic these days. Learn how display resolution affects your website.
More Tips
If you want your developer to build a pixel perfect website you need to create a pixel perfect design.
Don’t use too many colours
Create a colour scheme that includes the different shades of your colours necessary for your design and then stick to it. There’s nothing a developer hates more than keeping track of 20 different shades of grey.
Also: Try creating meaningful names for your colours using a generator. Your developer will like that.
Use good numbers
Make a decision what your smallest increment is and make all your measurements a multiple of that. 10 is an easy place to start. 8 gives you a little bit more control.
Understand that your text will move
The best thing about print design is the total control of your typography. Web typography is a whole other animal. You won’t be able to accurately avoid widows and orphans, and live kerning options just don’t exist. Focus on creating great movement instead of controlling these factors.
Test your design in a browser
I cannot stress this one enough. If you only view your design in your design program, you won’t get a feel for the flow and you won’t catch your own mistakes. If you’re using a prototyping tool like InVision, great! Set the view to ‘hide horizontal overflow’ to view at actual size for the best results.
Also: If you’re not using a prototyping tool, a quick-and-dirty test is to export as a 1x image and open that image in your browser. You’ll get a very similar result.
Get in touch at leverage.it and we’ll talk about how to get your next idea off the ground.
