Close Menu

7 Web Design Elements You Shouldn’t Overlook

7 Web Design Elements You Shouldn't Overlook | Spruce Rd. #webdesign

7 Web Design Elements You Shouldn’t Overlook | Spruce Rd. #webdesign

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:


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:

Web Design Style Guide | Spruce Rd. #webdesign

Web Design Style Guide | Spruce Rd. #webdesign

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!


Leave a Reply

Your email address will not be published. Required fields are marked *

  1. Justin d

    Hi Jamie! It’s your old friend from txst. Regarding doubling image resolution, it is my understanding that the purpose of this is to account for higher resolution screens in general, not necessarily mobile devices only. For example, MacBook Pros with retina displays would need the @2x images as well, not just the increasingly high-res screens in mobile devices.
    This blog post goes in to more detail:

    Btw, love your site’s design!

    1. Jamie

      JUSTIN!!! It’s been so long! Thanks for commenting, that completely makes sense that it would be for retina displays. I will have to do some further investigating!

  2. Sasha-Shae

    So when you say double the resolution, if I would normally save the image at 72dpi, instead double that and save it at the higher dpi??

    1. Jamie

      Hi Sasha-Shae! Great question, and I was confused about this at first too! I usually double the pixels, but still save at 72dpi. For instance: Say the image is 1400 x 350. For responsive images, I would save at 2800 x 700 with 72dpi. Maybe doubling the dpi will work also, but I am not confident about the technical side of that! Hope that helps!

      1. Sasha-Shae

        Gotcha! I was initially thinking that very thing, but then I said wait, does she mean the whole dpi thing? Lol. But now I’m sure what you meant. And like you I did learn that the hard way, that images saved at regular nice quality sizes had to be doubled in order to look nicer on mobile, but then image file size can become a problem too. I wonder, maybe that dpi thing could really also work, because that could probably cut down on file sizes. I’ll try it and see. And thanks for the reply!

  3. Amanda

    I love your points. Number 7 is hard when you are waiting for content to be delivered. I generally tell people that I need x amount of words to fill the space. They usually do a good job with providing me that when needed. Great post!

    1. Jamie

      It is so hard to get past that phase of the project! I will try setting a word count next go around, and see if that helps! Thanks for the tip!

  4. Zoe Rooney

    These are great tips! I think this is kind of implied, but I would just add to discuss what you’ll be providing with the developer from the outset. If you’re going to be heavily customizing the 404 page, for example (which I’d love to see more often), that may need to be considered in the overall project scope. The site looks great, by the way!

    1. Jamie

      Thanks for the input Zoe, it is very valued over here! I agree, clarifying those details upfront is best practices for all projects: working with a client or developer!

Free Training

Want zero-revisions with your design clients?

Snag our Zero-Revision Presentation Method to nail your next client project. In this quick 10-minute training you’ll see exactly what our client presentations look like, the scripts we use and more to cut down revisions!