This post is a follow up to my previous post, Best practices for mobile friendly Web design, which I wrote a couple years ago. Having recently worked on several projects with graphic artists from print backgrounds, I am reminded how important it is for designers to be cognizant of the development process when designing for the web. Here are three things that web designers should always keep in mind:
- One of the most important things to do when designing is the dimensions and scale the design match up with the framework that the design is going to be developed in.
- Another important thing is the fonts! It is helpful to design using pixels and standard fonts or web fonts when designing with development in mind.
- It also helps to be consistent throughout the site design by reusing element styles and treatments, unless there is reason to change them.
Scaling design based framework
Scaling your design based on the framework you are using is important to have the design translate to development. For example if you are designing for the Bootstrap Framework you would most likely want to design for a 1200px grid (1140px active window) that is divided into with gutters of 15px on each side. Having some full width elements is cool but most screens won’t be larger than 1200px so you want to keep that in mind. You will want to design what your base template will look like in mobile browsers.
Fonts! Fonts! Fonts!
It makes things much easier and more predictable when a designer uses standard fonts (Arial,Times, Verdana, Helvetica, etc) that everyone has on their devices. If a user doesn’t have the specified font on their device, it will substitute a font. This will change the look and feel of the design. Web fonts are a great solution (Google Web Fonts https://www.google.com/fonts/ is an amazing free library). Web fonts are hosted externally and served to the user. The designer downloads the uses it in Photoshop or Illustrator then the developer can duplicate the font exactly.
Another important thing is to design in pixels, in scale so that the size of the fonts match up from the design to development. It is very helpful to create a style guide that lists the fonts, sizes, colors as a development guide Styleguides or Frontify are 2 of many online style guide tools available.
Keeping consistent headings and layouts
As a general rule, a website’s headlines and fonts should be pretty consistent throughout the site. HTML provides a hierarchy of heading tags, H1 through H7, and for consistency’s sake (as well as the sanity of the developer) you will want all the H1s to look the same, H3 etc. It is OK to change the headings or layouts when you are trying to highlight a piece of content or your content demands it, but overall you want it to be the same. For example, you may change the font color on a heading in each section to give the user a visual cue that they are in a different section. But if one page randomly has a different heading it just confuses the user. Keeping things consistent also makes a site cleaner and easier to maintain.
Designing with development in mind smooths out the kinks in the total web project. It also helps developers produce a functional design that closely resembles the mock up that was created by the designer.