10 mistakes every aspiring web designer can easily avoid
You'll probably make a lot of mistakes as you start on your web design journey. Its learning from these mistakes will make you a better web designer. Here are a few of the most common mistakes newbies make when they join the web design world.
Knowing and trying to avoid them right out of the gate will make your life so much easier and encourage users stick around on your website - which should always be your goal!
Break up your content into easy-to-read paragraphs. A wall of text is hard to read. Filter through your content to make sure that you really need all of those words. Do you have a sentence that's 20 words? Could you get it down to 10? Brevity is key when it comes to writing!
Remember, contrast is your friend. Reading dark text on a dark background is nearly impossible. If your site's background is white, then your text shouldn't be gray because it's hard to read.
Also, make sure the fonts you've selected are easy to read on different devices. A beautiful Gothic font will look great on a desktop, but will be illegible on a cell phone's small screen.
Always get permission for the photos you use. Keep your images on your server and never link to other sites for their images. This is called "hotlinking" and is a theft of bandwidth from the site that you're linking to.
Maybe the other site will take that image down, or change its location. If that happens, your user will be stuck looking at something completely unrelated, or even a broken link. When a user is at your site, the other site will get site views too, but they're not genuine.
Grabbing a picture that you really like from someone's blog, saving it to your server and then using it is a big no-no as well, unless you have permission to use the image.
Don't steal.
There are a bunch of places online where images are available for your use and some of them are even free!
The same rules apply to fonts. Just because you picked up an awesome font from dafont.com for free, it doesn't mean that you can necessarily use that font on your site. Make sure you're checking the usage guidelines included with the font download.
If the font says "for personal use only" you shouldn't use it on your site. Usually there will be specifications for commercial use and prices posted under a documentation tab or file with the font.
A great start to testing is that you need to make sure your design is the same on different browsers. You might be a Google Chrome enthusiast, but you'll still need to install, at the very least, Firefox, Internet Explorer, Safari and Opera on a computer so you can do some basic testing.
Testing on a different browser isn't the only thing you should be testing, though. Make sure your site looks the same on different operating systems, like in Firefox for Macs vs. Firefox for PC.
Unnecessary blinking text, animated GIFs and auto-load sounds or music can be irritating and distracting to your user.
Maybe you really want to draw your user's attention to a link on the bottom of the page that says "Sign Up Now", so you surround it with flashing lights and make the text blink 21 different colors.
If you design your page properly, by understanding why your user wants to come to your site, you'll have created a great design that has the sign up button in a logical and obvious place without the need for flashy and irritating graphics. Which brings us to our next mistake...
Hard to read content
Break up your content into easy-to-read paragraphs. A wall of text is hard to read. Filter through your content to make sure that you really need all of those words. Do you have a sentence that's 20 words? Could you get it down to 10? Brevity is key when it comes to writing!
Remember, contrast is your friend. Reading dark text on a dark background is nearly impossible. If your site's background is white, then your text shouldn't be gray because it's hard to read.
Also, make sure the fonts you've selected are easy to read on different devices. A beautiful Gothic font will look great on a desktop, but will be illegible on a cell phone's small screen.
Unorganized files and code
Put everything where it goes and stay on top of keeping your files organized. If you have an image you're using on your page, put it in the image folder! CSS goes in the CSS folder, JavaScript goes in the JavaScript folder - you get the idea. Organization is also important with any wireframes you may have created in Photoshop or Illustrator. Make sure your layers are all labeled with relevant and meaningful names. Line 27 won't help you remember what it is later, but NavBottomLine will. This will help you if you need to create a complete design comp from your wireframe. Another organization tip, save your files with the correct extension, like ".html" or ".css" and that your code is formatted correctly. Use indentions to separate the different elements from their parent elements. There are plenty of code beautifiers available for free online that allow you to copy and paste all of your code and will fix the formatting for you.Horizontal Scrolling
It's annoying. Don't do it.Missing home page link
The simplest, most logical thing to do is to make the logo in your header a link to your home page. That way there's definitely a way for your user to always get back to the home page from whatever page he or she may be viewing. Adding a link back to the home page in the footer can't hurt either.Not playing by photo and font permission and licensing rules
Always get permission for the photos you use. Keep your images on your server and never link to other sites for their images. This is called "hotlinking" and is a theft of bandwidth from the site that you're linking to.
Maybe the other site will take that image down, or change its location. If that happens, your user will be stuck looking at something completely unrelated, or even a broken link. When a user is at your site, the other site will get site views too, but they're not genuine.
Grabbing a picture that you really like from someone's blog, saving it to your server and then using it is a big no-no as well, unless you have permission to use the image.
Don't steal.
There are a bunch of places online where images are available for your use and some of them are even free!
The same rules apply to fonts. Just because you picked up an awesome font from dafont.com for free, it doesn't mean that you can necessarily use that font on your site. Make sure you're checking the usage guidelines included with the font download.
If the font says "for personal use only" you shouldn't use it on your site. Usually there will be specifications for commercial use and prices posted under a documentation tab or file with the font.
Not testing your site
A great start to testing is that you need to make sure your design is the same on different browsers. You might be a Google Chrome enthusiast, but you'll still need to install, at the very least, Firefox, Internet Explorer, Safari and Opera on a computer so you can do some basic testing.
Testing on a different browser isn't the only thing you should be testing, though. Make sure your site looks the same on different operating systems, like in Firefox for Macs vs. Firefox for PC.
Creating ugly and bad links
Try not to use words like "click here" when making a link. Instead, just make whatever you're writing about a link. Like this: "Don't forget to check out our new web courses!" Instead of, "Click here to check out our new web courses!" Check and double-check the other pages that you're linking to to make sure they're working properly. Imagine your user's frustration when they go to follow a link you've provided them and are presented with a 404 error.Pop-ups
No one likes pop-ups. Avoid them if possible, especially since a lot of users probably have a pop-up blocker installed. The worst way to use a pop-up is to have vital information inside it. Most people will just close a pop-up without even looking at it since they assume it's spam or an ad. If a user thinks it's an ad, it'll leave a sour taste in their mouth about how they feel about your site.Using flashy graphics and music
Unnecessary blinking text, animated GIFs and auto-load sounds or music can be irritating and distracting to your user.
Maybe you really want to draw your user's attention to a link on the bottom of the page that says "Sign Up Now", so you surround it with flashing lights and make the text blink 21 different colors.
If you design your page properly, by understanding why your user wants to come to your site, you'll have created a great design that has the sign up button in a logical and obvious place without the need for flashy and irritating graphics. Which brings us to our next mistake...
