LearnBeginner 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.


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.


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.


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.


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!

25 Responses to “Beginner Web Design Mistakes You Should Avoid”

  1. nicki minaj the empire cheats on August 11, 2017 at 7:36 am said:

    It’s amazing to pay a quick visit this web site and reading the views of all colleagues about this piece of writing, while I am also eager of getting experience.

  2. Ohh you really remind me of my past mistakes that I did while designing ! anyway thank you too much Nick

  3. Marcus Alonso on May 16, 2017 at 6:34 am said:

    Web design is one of those careers where knowing what *not to* do is often more valuable than knowing what *to* do.

    Okay, I might be exaggerating a bit, but what I’m trying to say is that being at the start of your adventure with web design is full of unexpected traps, seemingly good ideas just waiting to bite you back, as well as client requirements that are very much “there,” but just not spoken out loud.

  4. Priya Patel on March 16, 2017 at 10:42 pm said:

    Hi Nick,

    Nice post, You did really good job over here by posting this article. I am beginner in web development your article will really helpful for me. I read lots of post never got such useful steps for web designing.

    Thanks for sharing,

  5. The headline “not enough space” taught me something good even I’m a designer not a developer yet. And your talking about navigation made me filling good. because I was so disappointed about navigation designing. now I knew that it’s really tough one. thanks

  6. Karen Edwards on January 3, 2017 at 12:14 pm said:

    Ohh you really remind me of my past mistakes that I did while designing ! anyway thank you too much Nick !

  7. Abegail Louise Acosta on November 27, 2016 at 9:22 pm said:

    Great article, this really helps me a lot as a newbie in this industry working in a professional website development company.

  8. Sarvesh on August 29, 2016 at 5:14 am said:

    Hi Nick. This is really helpful article for those who are newbie in the field of web design. Not only newbie but also experienced people also make mistakes that you stated above.Thanks for nice article.

  9. Ruth Belmont on June 27, 2016 at 11:22 pm said:

    Very nice post. Thanks for sharing. I’m a beginner in this field. So I always keep researching in this area. I found your blog very helpful & will definitely wont commit at least these mistakes in my work from now onwards. Thanks again. Keep sharing.

  10. Hello,

    Well, Quite a decent article.

    I have made many mistakes, when I just started my career. I was not aware of the fact that, i need a responsive website, so for a long period of time, I was running website just for the desktop users.

    Also, the navigation was not easy, but with time, I have improved my websites layout and design a lot.

    But still many are making similar mistakes, so this would help many of them resolve issues with their website design.

    Keep up the good work.

  11. williamjacques on January 21, 2016 at 10:00 pm said:

    I like reading your whole blog post.Thanks for sharing it.

  12. William Jacques on December 17, 2015 at 10:32 pm said:

    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.

  13. This is a nice post.

    I just started learning webdesign and development. I have learnt much of html and css and little of java. ive been able to make a clone of two sites. (Bbc and dipped 4rm 1st web designer). Ive actually not built my site because i’ve been thinking of what to put on my website and how to go about it. The layout to use, color schemes…etc.

    I have seen so much awesome websites and i keep getting intimidated and always feel like i should get to a pro level before i build one. But now this article just explained to me how to really start.

    Start “simple and nice” and keep learning and building on it. Thanks for the awesome article. I learnt what not to put on my website. NICE POST!

  14. semi di maria online on March 20, 2014 at 2:36 pm said:

    Fare domande sono davvero realtà bello cosa se non si sta
    capendo nulla tutto , eccezione article prevede gradevole comprensione persino

    Visit my homepage semi di maria online

  15. 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’

  16. Ryan Grush on March 14, 2014 at 5:14 pm said:

    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

  17. 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.

  18. 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.

  19. How about unremovable social network bars which float over your content (as seen on this page): http://i.imgur.com/ktOqezi.png

    • Michael on March 14, 2014 at 2:24 pm said:

      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!

  20. 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 :)!

  21. I think loading a massive 3,270.65 KB screenshot of your homepage should be a no,no too 😉

    • Nick Pettit on March 14, 2014 at 1:35 pm said:

      Ew, you’re right. That should have been resized and compressed. Just fixed it, thanks for bringing it up!

  22. Stan Beloff on March 14, 2014 at 10:33 am said:

    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 . 🙂

Leave a Reply

Want to learn more about Design?

Design refers to visuals, interaction flows, wireframes, branding, and more. Learn how to use good design to enhance your website, mobile app, or business.

Learn more