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 is why it’s important to make your designs web ready. It 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 works 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 predictably 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 absolutely positioned objects work on all responsive sizes.
Responsive
DON’T
Don’t forget to account for responsiveness. Do not forget about mobile.
DO
To ensure your design is web ready, start by determining your screen resolution and consider beginning your design at that size, as it’s the one you’re most familiar with. This will help avoid surprises with the final live web product’s size. After that, think about the other major screen sizes that users commonly have. The complexity of your design will guide how many versions you need to create. A simple design might only require desktop and mobile versions (or just desktop if you’re confident in your developer’s skills), while a more complex design may need up to six different sizes to ensure everything resizes 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, especially when it comes to making content web ready. 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. To ensure your design is truly web ready, always preview it in the environment where it will be displayed. 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. This will give you a clearer sense of how it will look and function on the web.
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.
Frequently Asked Questions
What does it mean for a design to be web ready?
A web ready design refers to a layout and style that is optimized for use on websites. It ensures that elements like fonts, images, and layout grids are correctly sized and formatted for responsive design, ensuring the website looks great on all screen sizes and devices.
How do I ensure my design is web ready?
To make your design web ready, use pixel-based measurements, employ a flexible grid system like Bootstrap, and design with responsiveness in mind. It’s important to test your design in various browsers and screen sizes to ensure it functions as expected on all devices.
Why is it important to make my design web ready?
Making your design web ready is crucial because the web is fluid, meaning it must adapt to different screen sizes. A web ready design ensures consistency and usability across desktop, tablet, and mobile devices, leading to a better user experience and smoother development.
Can I use print design for the web?
No, print design is not inherently web ready. While print designs are tangible and static, web designs need to be fluid and responsive. This means that elements in print designs, such as fixed fonts and grids, may not work well on the web unless adjusted for responsiveness.
How can I make sure my text is web ready?
To make your text web ready, avoid using points for font sizes, as they are meant for print. Instead, opt for pixel-based measurements (px) or use rems and ems for more responsive typography. This ensures that your text will appear correctly across different devices.
