How Do You Give Good Directions to Web Designers/Developers?

Whether you're building a new project or revising an existing one, it's important to be able to communicate effectively with your web designer or developer.

At Web Pro Geeks, we know it's important to be flexible when working together on a project. But there are some tried and true methods and tips that make it so we can get your design or revisions done quicker and more efficiently:

• Understand and use the correct terminology
• Avoid relying on emails
• Always reference the page and the section of the page
• Identify if you need an addition or a change
• Use numbered lists
• Include screenshots
• Provide images in an organized way
• Be clear about your expectations
• Communicate the purpose or importance of things
• Be open to feedback
• Ask for alternatives if told no

Understand and use the correct terminology

If you're ever concerned or confused about what a part of a website is called, please ask. To prevent misunderstandings, it benefits you to ensure you're describing things correctly.

Use this image to learn what sections of a webpage are called and what they're for.

A. The URL or domain of the website.  Every site has a different domain (in this case, sensorysafe.org), and the pages of the same site will have different URLS. For example, sensorysafe.org/contact

B. The browser window. You open this on your computer or phone to go to a site and can open a new tab to go to a different site or page. Examples include Safari, Google Chrome, etc.

C. The site logo. This always links to the homepage.

D. The header. It contains the logo, navigation, and can contain other things like search bars and icons. It is the same on every page of the website and does not change.

E. The navigation. It's a list of site pages people can click on. Arrows open up dropdowns or submenus with additional related pages.

F. The hero section. It appears usually at the top of the homepage or special landing page and usually consists of a full-width image, header, subheader, and buttons.

G. The page title. There can only be one formatted this way so its important to pick a good one.

H. Buttons. When clicked they take you to another page or a new part of the same page. They are different from links.

I. Subheading. Large text phrases that helps break up content. They should be used often to help users skim the page to find the information they want.

J. Embedded image. Different from a background image or icon.

K. Copy. The written sentences and paragraphs that make up most of the content of the website.

L. Columns. If you want copy separated into multiple sections side by side, you want multiple columns.  In this example there are 2 columns.

M. Form. Usually contains a title and description, but at the very least needs a submit button and at least one form field which is where a user types or selects an answer to a question.

N. CTA or Call to Action. A section - usually at the end of a page - that is meant to be big, clear, and focused on directing the user to take an important action like select a button. Most commonly made up of a title, description, and button or link.

O. Footer. Similar to the header. A section at the bottom of every single page that can contain information like a navigation, sign up, icons, important trademark information, etc.

P. Icons. Different from images. Small graphics that are representative of an idea. They can be decoration or linked to a page.

Avoid relying on emails

If you're sending content, direction, or revisions try to avoid using emails only. It's a much better idea to have a Google Drive or Dropbox where you can add text documents, images, etc. rather than using email attachments.

If possible, use one document or a project management tool to send and discuss revisions. If you have to use email, it's a good idea to start a new email chain every single time you have a new set of requests. Sometimes a specific email in a thread can get lost and its a pain to have to comb through a long chain in order to find one specific note from months ago.

Always reference the page and the section of the page

When providing a revision or direction make sure you state what page you're referring to, either by the URL or page name.  Also make sure to describe the location of the content in question, like "to the right of the Mission Statement section" or "directly under the hero section"

Identify if you need an addition or a replacement

This is a weirdly common detail people can forget to state. If you're giving a designer a piece of content - text, image, etc. - identify if this is going to be a brand new section or if it's replacing something else.

Use numbered lists

This is one of the most powerful things you can do when providing direction. Numbering items can help you stay organized and potentially communicate priority. Your designer will be able to reference each change individually by number so everyone knows exactly what's being discussed.

Include screenshots

This is a good tip if something is broken or not behaving correctly and it's difficult for you to describe. Use your computers native features or an extension to take a picture of the ENTIRE screen, including the browser window.

Provide images in an organized way

If you're providing images to be added to a site, it's a good idea to put them all in one single folder and send that to a designer rather than as individual attachments. Also, make sure to name or title each image clearly. This has the added benefit of being good for SEO but also makes it easy for you to reference an image, like when describing where you want it placed. Being able to say "Headshot-Sally-2.png" is much more clear than "the photo of the woman with the blue jacket."

Be clear about your expectations

Make sure your designer knows what you expect from them. For example, do you want to see the changes before they are pushed live? Are certain changes more urgent than others? Do they need to be performed immediately or can the updates wait?

Be open to feedback

Sometimes you might request something that can't be done, or shouldn't be done. A good designer or developer will not just blindly follow direction, but let you know if they advise against a choice. For example, if you ask for colors on the page to be changed, your designer may let you know that those colors will make it harder for people to see or read the content.

Ask for alternatives if told no

If your designer or developer does reply with a negative response, make sure to ask questions so that you understand why. They should provide you with an alternative solution so you can still accomplish your end goal. Prompt them if they don't.

Some other content revision tips to keep in mind:

If you're providing content, here are a few more specific tips we wanted to include.

1. If providing a link - either in text or a button - specify if you want the link to open in a new tab or the same window.
2. If you're asking for a new page to be created, think about if you want it added to the navigation menu in the header or footer.
3. Remember that website users skim websites. Rarely do people sit and read everything on an entire page. When writing content, use subheadings to help guide the reader. There should be no more than 300 words between subheadings.