The description of a “website designer” has drastically changed over the years.
When I first started building websites a designer didn’t touch code or really have any knowledge of it. Designers worked in their preferred design program and when their design was complete, they passed the design files on to the developer and their part of the project was complete.
Many designers these days have at the very least a basic knowledge of HTML & CSS, along with competency in SEO, copywriting, site optimization and more. Some don’t.
Websites are so interactive, with so many possibilities that many times a static design file doesn’t provide enough information for a developer. Animations, transitions, responsive design and other modern website functionality can make the design process vastly different from what it used to be. It is important that designers learn what is possible, and stay educated as the web progresses to keep up.
With that said, there are still some amazing designers who work exclusively in design software. Below are a few tips for web designers to make the lives of developers a little easier!
1. Vary the Amount of Dummy Text You Use
Make sure you don’t use the same exact amount of text in all of your mock-ups. From page content to things like testimonials, job descriptions, blog posts, text overlay on images, navigation text and more, make sure to vary the length of content to mirror what the live website may look like.
Providing varying amounts of text will ensure you, as the designer, think through the different ways site modules may render based on the amount of text being used. Something that may seem very simple, may actually be a bit more complex if you think about how it must render for different amounts of text.
A typical example of this is a testimonial slider. Lets say you have 10 testimonials, so you create a nice slider that will rotate through testimonials. It looks great in the mockup with the dummy testimonials, but what if the end user has a super short or very long testimonial? How will that layout work? Thinking through these things ahead of time will save some headaches down the road.
2. Be Consistent with Page Templates
Make sure to have consistency among page templates. Not only is this important for the site to have a uniform professional look, but it can be very difficult on a developer if templates don’t have any sort of consistency. Having inconsistent things like margins, padding and letter-spacing can cause the developer to add additional CSS or classes that shouldn’t be needed.
I always find it helpful to come up with standards in the first page I design. Then stick with those standards through the project. For example, all interior sections may have a 75px padding. All page headers may have 2px letter-spacing. The max-width on all pages may be 1200px. Try to come up with site-wide standards and stick to them as much as possible.
3. Be Consistent with Font & Header Usage
Along the same lines, you’ll want to be consistent with font and header sizing. Create a style guide that defines things like fonts, colors, heading sizes, buttons, etc…and stick to it! This will make sure you are consistent and the developer knows exactly what you want.
I’ve worked on MANY projects that there are slight variations — 0.2rem increase in H1 on only one blog post for example — on basic elements throughout the site, and it forces me to use additional CSS when it really isn’t needed.
Checkout Rafal Tomal’s free design tools — that is where my Style Guide template came from.
4. Clearly Communicate Your Design Ideas
Be sure to communicate any unique design attributes that may not be easy to notice in a static mock-up. Things like slideshows, videos, full-width layouts, transitions, animations and mobile navigation may not be clearly defined by just looking at a static mockup.
Provide written details of items like this in a shared document, or within the design files, that the developer can reference as needed. This will help cut-down on back-and-forth between the designer and developer and help with a smooth development process.
While it may be obvious to the person designing the site, it may not be obvious to the person developing the site. The more details, the better!
5. Learn Simple CSS/HTML
It is probably a good idea to learn some basic CSS / HTML. Communicating your needs with the developer is much easier if you speak the same language; even on a basic level. While concepts like padding and margin are very basic to anyone who codes, the nuance between the two to a designer may not be as clear.
I’ve found that working with designers who have some coding knowledge/skill is significantly easier that those without. As a very basic example saying “can you make the space between the big font and the smaller font a little bigger” isn’t nearly as helpful as, “can you increase the margin by 10px between the H1 and the body copy”.
The first statement gives very vague direction that could be interpreted differently. The latter is very specific and can’t really be interpreted incorrectly.
6. Learn Basic Image Optimization
One things that tends to slow down my development on many projects is taking the images provided and getting them prepared to actually use. While images may look correct in the mock-up, if they aren’t properly scaled and prepared for the site, I have to manually crop and optimize images prior production. If I don’t do this, you end up with bloated images which can hurt performance.
Canva Photo Editor is a simple, free tool that will allow you to crop and scale images easily. There are a variety of great image optimization plugins for WordPress that can help with this process – here is a great post on image optimization.
At the very least, use “Save for web” from your design software!
Communication is also very important. I’ve been fortunate enough to work with some amazing designers. None have left me hanging and done the “hand off and disappear”. Transparent and frequency communication will help in a major way during the design and development process.
Hopefully these tips will help designers learn some developer friendly techniques and improve project quality for everyone!