7 Web Design Elements You Shouldn’t Overlook

Earlier last month, I completed my custom WordPress website. I decided to work with a well qualified developer, so that I could focus on design and not be limited by my minimal HTML + CSS knowledge. I was SO glad that I invested in a quality developer, and I am pleased with the results. Through the process of handing off files for development, I learned a few things.

Here are a few common web design elements that designers neglect to include for their web developer:

01Consistency

Consistency is key when designing a website. From specific colors, consistent typefaces + font size, spacing, image treatment, etc. The list goes on. Behind any successful web design, is an intention of consistency throughout the design. I plan on creating a blog post that dives deeper into how to achieve consistency throughout your website/blog, but for now I will focus on how to make your web developer happy through consistency in design.

When handing off my web design to my developer, I created a style guide that the developer could easily reference. Looking back, I realize I could have been a bit more specific on the design elements, but you live and learn. What I would have done differently is label the type H1, H2, Paragraph, etc. This may seem minor, but it would have helped me think in terms of my live site, rather than just the design.

Here is an example of the style guide I created for my site:

02 Active/Hover states

When you are used to designing in print, and not for web, it is easy to overlook providing the active/hover states of buttons + navigation. This is a common forgotten element, as the website looks complete, but you often forget about the user experience! I include these states on a separate layer, clearly labeled + organized. I also include this on the style guide, to make sure I am consistent throughout the entire web design.

03 Default Page

I completely neglected designing my default page for WordPress, and am now trying to carve out time to update this on my own… whoops! Luckily this was just for my own site, and not for a client, so it is good that I learned this novice mistake at my own expense.

When your site is live, your content + pages should be set for a while! What happens when you, or your client, want to create a new page listing out new services, products, etc? They can easily create a page by selecting “default” within WordPress. If you do not design this default page, than most likely it will just have your navigation at the top, along with the footer below, and a wide area of white space for all content. It looks like it wasn’t designed specifically for your site. If your website, like mine, has an area for hero images below the navigation, simply draft up a default page including this image placeholder, as well as the appropriate text box width, and any other elements you want included on future pages. This will make updating your site with new pages a smooth + easy task.

04 Auto-Response Form

This element is pretty self-explanatory, however it is commonly overlooked! If you have a contact form, newsletter sign-up, or any other form on your website, you should design what happens when the user clicks “submit.” A simple “thank you for getting in touch! I will respond to your inquiry shortly” will do just fine. If you only respond to project inquiries on Fridays, make sure to include that so that the user isn’t left anticipating your response for a week. This is a great way to set expectations, so they don’t think you are flaky or non-responsive!

05 The 404 Page

Another commonly overlooked page, is the 404 page. This is the page that the user is directed to if they type in the wrong URL within your domain, or if a link is no longer active on your site. If you don’t design this, and you’ve hired a reliable developer, chances are they will go ahead and create the 404 page for you. If you hire a cheap developer, you might not have a 404 page at all, which looks horribly unprofessional, and leaves the user confused. Even if your developer designs the 404 page for you, wouldn’t you rather have control over this and make sure it is in line with your existing brand identity? I try to provide as much as I can for the developer, so they don’t have any guess work for the design on their end. This results in a smooth designer-developer relationship, and gets you the web design just as you like it.

06 Double Resolution for Responsive Images

If your site is responsive, your images should be double the resolution. If they are not doubled, than they will appear low-res on smaller devices. I don’t really understand why they would look low-res, but it is a simple fix to just double image resolution!

07 Design with Actual Content

I can’t stress this enough, but you should always design with as close to final content for your website as possible. Designers love using Lorem Ipsum text as placeholder, however this can cause problems once you have actual content. Lorem Ipsum fills the text box with a perfect amount of words, making your design look seamless. What happens when you, or the client, need to add more words? Bullet points? Your design will not look as great as it did with the placeholder text.

Also, once you have final content, you have an opportunity to brainstorm the page layout + site map more effectively. If you have placeholder text, you miss an opportunity to thoughtfully consider the structure of your site. Content is often the holdup for clients, when I design their site. Though this may delay the process, I stand behind the notion that it is pertinent they explore the fullness of what they want to communicate to their site visitors. This results in less revisions down the road as well, which is nice.

Do you have any other tips, that designers often forget to hand off to the developer? Let me know in the comments below!