053: Ensure The Website You Design Is What Your Developer Delivers

Get Back To Design: Design Business | Designer | Creative Business

A big concern of a lot of designers who are considering working with a developer is that the final website won’t look like the mockups they’ve worked so hard on.

This is a very valid concern. I’ve seen websites where you can’t tell the difference between the website and mockups and others where you’re kind of left wondering what the developer was looking at when they coded the site.

With that being said, you want to be confident that your client sites will turn out just how you expected.

Manage your expectations

Some of you may be wondering what you should even expect when you work with a developer. Will some things just always be a little off? Should I expect it to be pixel-perfect?

This is all up to you, but for the most part, it should be closer to pixel perfect than having several things off.

Krista here! How precise I am when working on the development of a website depends on the designer I’m working with. For example, Kory doesn’t go in and measure everything pixel-by-pixel, so I don’t spend hours making sure that if there’s 73px of spacing between something that I didn’t accidentally do 72px.

However, there are a couple designers I work with who do that type of precise measuring. With those designers I know to quote extra so I can spend that extra time making sure everything lines up just the way they’d like.

All-in-all, you should expect that what you get looks just like your mockups. While pixel-perfect is a lot to ask, there shouldn’t be any glaring differences.

How to make near perfection possible in your mockups

If you want your developer to translate your mockups perfectly to a website, there are a few things you need to do to make it possible.

Design on a grid

First, think of the content area of your design as being made up of 12 columns. This makes precise measurements and scaling possible.

Designing on a grid also makes it easier to be consistent with your margins and sizes. As you can imagine, it’s frustrating for your developer if you’re using 20px margins in some places, but randomly switch to different sizes in others.

Design to scale

Next, make your mockups the same size that you want the final website to be. A lot of the time, the mockups I get from designers are way too big and I end up eyeballing it.

Having things designed to scale allows your developer to measure exact sizes of elements, including font sizes.

Use the correct measurements and terminology

Along the same lines, make sure you’re using the correct units of measurement and terminology within your mockups.

For example, “points” means nothing in terms of web designs. Instead, you want to use pixels.

The same goes with tracking and leading. Those words don’t mean much to most developers. Instead you want to use letter spacing and line height.

Again, this keeps your developer from having to eyeball things. Instead they can get it just right.

Use the right tools for your mockups

Over the last couple years of collaborating with designers, I’ve received mockups in the following formats: PNG, PDF, InDesign, Photoshop, Illustrator, InVision.

To state it bluntly, PNG, PDF, and InDesign files don’t cut it when you’re working with a developer and are expecting a good outcome.

You’ll likely find that most developers prefer Photoshop, although InVision is my personal favorite for several reasons that we went over in the episode.

Know what to give your developer

Last, you need to know what to pass off to your developer. If you just give them mockups and call it good, your developer won’t be able to do their job effectively. The more you give them, the more accurate they can be.

Helpful resources include things like colors, fonts, heading styles, buttons styles, and more. Yes, they can get some of these things from your mockups, but it never hurts to make things as clear as possible.

You can also expect your developer to want images cropped and correctly sized, font files, copy, and details on hover and transition effects.

Clear Communication

As important as everything is that we just went over, communication is just as important. This includes everything from the information you pass along to how you organize it and where communication takes place.

The most important things to note with communication are:

• Don’t assume your developer should know anything – make it all crystal clear
• Decide on one single place to communicate, rather than jumping between email and a project management tool

Choose the right developer

No matter how perfect your mockups are or how organized your communication is, if you don’t choose someone who knows what they’re doing, the final website isn’t going to turn out how you want.

We’ll go into this more in a future episode, but as an overview:

• Look for someone with experience
• Determine where you fall on the scale of experience versus cost (experienced developers will always cost more)
• Find someone who specializes in working with designers

Action Steps

1. Look at the mockups for the last design you did and consider whether they’d allow a developer to translate your vision into a website, based on what we went over
2. If you’re missing something, either do a quick test project by mocking up a single page or keep these things in mind for your next project

Resources

• 960 Grid System
• Sketch
• From Mockup To Code Toolkit

Tweet That

[clickToTweet tweet=” – Kory” quote=” – Kory”]

[clickToTweet tweet=” – Krista” quote=” – Krista”]

The post 053: Ensure The Website You Design Is What Your Developer Delivers appeared first on Get Back To Design.