Beginner Web Design Mistakes You Should Avoid

web design confusion and problems

“Quo Vadis?” illustration by Charis Tsevis/Flickr

Web design can be tough for a lot of reasons. But the biggest challenge is probably that there are so many ways to approach a problem. Many websites set a bad example for beginners. Even big brands known for quality can often mess up. I could list a lot of things, but here are the top web design mistakes I see over and over again that need to stop.

Modals and Pop-Ups

You’ve seen this before. You click on a link to a news article or a blog post, and a gigantic modal pop-up window covers the content. This makes absolutely no sense. If you’re requesting a specific article, obviously that’s why you’re visiting the site.

Screenshot of a pop up modal window that says, "Annoying Modal Window: Oh, sorry. Were you trying to read this article? Too bad! Sign up for our newsletter first and make sure you tweet about us!"

Modal windows can ruin your mood.

Let them read and enjoy the experience you’re offering. No need to spoil the purity of their intent by redirecting them someplace else. If the visitor likes the site or they’re interested in the advertisements, they’ll click around and explore on their own. Modal windows aren’t bad by themselves, but putting it up as the very first thing that people see is lazy and desperate.

ExceptionS and Alternatives

Despite their potential for abuse, modal windows are useful in many scenarios where leaving the current page may not be the best option. For example, if your website has a contact button, it might not merit leaving the current page. Presenting a modal window with a simple contact form allows for the site visitor to fill it out and then return to the current task.

Walls of Text

Web design is a wonderful medium that allows you to combine text, images, and other multimedia into an interactive experience. To that end, it’s not a good idea to turn a website into something that it’s not, like a tri-fold brochure or an information pamphlet. If you’re marketing yourself or a business, don’t present the site visitor with a huge wall of text on the first page. Instead, make the home page something very simple that explains exactly what the site is about. If they want to know more, they’ll dig in. Treehouse is a good example of using a simple explanation:

Screenshot of the Treehouse homepage.

Treehouse uses a simple line of text on the homepage that clearly states the site’s purpose.

A giant block of text is not only intimidating, it’s also not always pretty to look at. Text is an important part of web design, and when abstracted as a visual element (rather than something that’s meant to be read) it can add a lot of rough “texture” to the page. When you’re trying to invite people inside a website to learn more, this can add a lot of undesirable visual friction.

EXCEPTIONS AND ALTERNATIVES

If you’re tempted to put a lot of text on a page, first try to cut it down and summarize portions. Then, break up each major idea into its own section, possibly including some pictures or illustrations. The page at teamtreehouse.com/features is a good example. There’s lots of text on the page, but it’s presented in small chunks.

Not Enough Space

Every beginner web designer and developer has done this one (myself included). They feel compelled to fill the page with interesting information and stuff for people to look at and click on. Poor use of space around the elements just compounds the problem and the result is a cluttered mess with no clear purpose.

Two examples of space. The first box reads "Do you ever feel like the walls are closing in on you?" The second box reads, "Space... The final frontier."

Don’t let text run up against the edge of an element. Give it space!

Humans crave simplicity, and it can be easier for you to provide that to them by presenting just a few things at a time as they become relevant. The web facilitates this through a number of mechanisms, but practically speaking, you should always make sure each piece of information is appropriately grouped with other related design elements and that there’s enough separation between each group.

EXCEPTIONS AND ALTERNATIVES

It can be hard to know when to use space if you’re just starting. Instead of inventing all the aesthetics yourself, I recommend you try a front-end framework like Bootstrap or Foundation. The grid and typography frameworks contained within will help you space your elements appropriately.

Thinking Too Far Outside the Box

Every new web design project is filled with limitless possibilities, so it can be tempting to try things that have never been done before. Innovation is important, but too much can sometimes be a bad thing. You want to create experiences that feel familiar to site visitors so they can explore your site right away with no learning curve. Getting the basics right is difficult enough, so if you haven’t made too many websites yet, it’s a good idea to embrace common design patterns. Simplicity can be just as exciting as innovation if it’s done well.

EXCEPTIONS AND ALTERNATIVES

Even if you’re not very experienced, you can certainly experiment in the right context. It’s rarely a good idea to take a big risk on a big client project, but if you’ve executed something well already in a side project, then using it in production is the next step. Continuously building side projects and exploring new approaches will help evolve your professional work.

Mysterious and Complex Navigation

Navigation is probably one of the most difficult aspects of web design. In all my projects, I’ve spent quite a lot of time thinking about how all the screens flow together, how everything is labeled, what should be on its own page and what can be combined, and so on. If there’s any single word that can make a huge impact on your site’s usability, it’s probably something in the navigation.

Massive sites like Wikipedia or Facebook have millions of pages, but they all flow together in a stream of consciousness without overwhelming visitors. It seems effortless because they do such a great job. But if you’re just starting out, try to make projects with just a few pages. Be clear and explicit about what each page contains, then label it accordingly in your navigation. Mixing intentions makes things feel confusing.

EXCEPTIONS AND ALTERNATIVES

It’s almost never a good idea to intentionally create confusing navigation, but there are some rare instances when it can be good. If you’re creating an experiential website (one that’s not necessarily meant to inform), some mystery might work to your advantage. For example, you might promote a highly anticipated movie or a new product by creating a game in which visitors solve riddles and clues, eventually leading them to the next part of the game. This is a special use case, so be careful with its execution.

If you have any other common mistakes you’ve seen around the web, I’d love for you to share them in the comments!

Free Workshops

Watch one of our expert, full-length teaching videos. Choose from HTML, CSS or WordPress.

Start Learning

Nick Pettit

Nick is a designer, public speaker, and teacher at Treehouse. He is also a co-host of The Treehouse Show. Twitter: @nickrp

Comments

12 comments on “Beginner Web Design Mistakes You Should Avoid

  1. Thanks for the tips, they are great.
    Additionally, consider spacing between elements when designing sites for mobile, because it’s hard to tap on them if they are close to each other.
    Also, font size for mobile should be adjusted.

    There is actually the http://www.testize.com service that validates your site readiness for mobile and devices and provides you with recommendation if there is enough space between elements for page on touch devices and appropriate font sizing.

    • Hi nice resource but this site seems like scam to me. It shows english language with 9 spelling errors on my site however my site is in slovak language and it’s stated in html lang attribute. And it shows up that my site is much better seooptimized than treehouse site but I have some doubts about it . :)

  2. I think loading a massive 3,270.65 KB screenshot of your homepage should be a no,no too ;)

  3. Nice article, useful tips to remember!

    One thing about this very site that kinda annoys me though, is the placement of the share dialog thingy that’s constantly following me whilst reading the article. Talking about space to breath, it actually feels quite suffocating to me.

    Besides this silly point, keep up the good work :)!

    • I think a bigger problem is the massive amount of errors and slowness Digg Digg causes. I don’t mind the floating bar but since that plugin has stopped all development, I wish people would start looking at alternatives.

      Fantastic post though!

  4. I really appreciate the comment about unsolicited modal windows. They do nothing but make me uninterested in the website, it’s content, and it’s author.

  5. Whenever I find myself on a website to read an article and there’s some kind of overlay interfering with that for any reason before I can even read a line. I immediately leave the site & don’t bother coming back. I often wonder how many viewers they lose like this. They probably don’t even realize they lose viewers ’cause they just look at the visitor logs & say “hey, we got 100 readers today”, when 70 of them might’ve just decided not to bother or couldn’t find a way to X out the modal/overlay and moved on elsewhere.

  6. Great list. I feel like Modals don’t get enough criticism. They might have a proper use 5% of the time they’re actually used.

    Good point about not “Thinking Too Far Outside the Box” too. When I started off designing I treated my site as an art project. That’s not a good approach, especially for beginners. Your goal should be to pass the test. For business purposes if it has a good design who cares that you used a template that 200 other sites have. Its makes zero difference to your customers and the bottom line.

    Ryan, http://www.radiumcrm.com

  7. Spacing and walls of text are tough to defend sometimes. Especially when people without any design skills have the final say on the product. ‘Wel,l just put an explanation text there, shrink that, push that together and voila everything fits’. ‘…and now it’s a mess nobody will read’, ‘oh thats not true’, ‘fine, go ahead’