The tell-tale signs of an amateur Web Site and how to avoid them
Web design takes a bit of practice to get good at. Each and every one of us goes through a period of learning and adjustment, which means that the latest projects will look considerably better than the first ones. This improvement felt throughout the various aspects of the project, and not just on slight improvements in the coding or in the graphics created using Photoshop. The key to creating a great project is in one’s ability to grasp and detail all the various components that make up web design.
One develops more and more skills through an understanding and appreciation of new trends –which one can use to develop new ones. One’s own aesthetic sense can be refined and developed by knowing instinctively when a given choice is considered appropriate or not. One develops more skills when it comes as no surprise that previous mistakes, both careless and big ones, are not there anymore in the most recent projects.
SI have decided to share this article with you after reading many forum posts and talking with many new web designers, because many of their concerns and problems are addressed here. These are the most common errors made by those new in the field, which have a negative tendency of giving their websites that uncertain, amateurish look.
Which elements give my site an amateurish look?
There’s a saying in Italy which says, “If you know them, you will avoid them.” This refers to anything which is unpleasant and unwanted. In this case, let’s take a look at the various elements which give your site that unprofessional, amateurish look so that you can avoid making these same mistakes.
Graphic, visual and audio elements
- Background music: Only a select few sites can pretend to have background music on their page. There’s nothing more shocking than having some loud electronica playing when first entering a website, especially if the music is ‘out-of-beat’ with the contents on the webpage. So, unless you are designing a website for your favorite nightclub, it is best to leave out tracks that are too loud. In some other cases, soft-playing music can be beneficial in making a great website, as long as the music does not repeat from the beginning when a page is switched over and as long as the user is able to turn the music off at his or her own wish.
- Animated Gifs: I was hoping to skip this subject entirely, but I’ve noticed that they are still being used in a lot of website. Let me be clear on this once and for all: animated gifs epitomize everything that is considered amateurish and unprofessional in the web developing world. They can find solace in a teen blog and other low-key websites, so think carefully about using them in your next project.
- Low quality images: Using low quality images in your site can negatively affect the overall look of the site. This can convey a strong sense of carelessness to the viewer, something that will be very hard to put with. Therefore, when you are looking for images to put on your site, try to make an accurate selection in one of the free sites such as Sxc and Freefoto. And if you don’t find anything, think about making a small investment for your images: on this site, for instance, you can find some beautiful and professional looking set of images.
- Images taken from google: Same as above. A great image can make or break a website, so why not pay some attention while making a selection? Your client base needs to be adequately represented using images that are trendy, gorgeous and truly original. Furthermore, a large percentage of images found on google are copyright protected, so using them might be problematic
- Shinystat Counter: The need for displaying the number of visitor on your website is quite pointless, and it can be detrimental to your website’s image and status if you have a very low number of visitors showing on your newly created site. There are many ways to keep these statistics hidden from the people visiting your website.
- Google adsense and other ads: even if the goal behind your website is to earn using advertising space, it is not the best thing to paste too many banners and google adsense ads. This is especially true if your site lacks content, so presenting a website that is full of only ads can make it lose a lot of credibility.
- Out-of-style trends: Some graphic elements that were acceptable 10 years ago include: 3d buttons, shadows, glowing lights, and the now-popular round in-relief effect.
Recently, I’ve come across this message on a forum::
«-do you need a logo only for a website or one that can be used on paper (as well as in other media)? If it’s only for a website, one can go overboard with shadings, shadows, animated gifs, 3d effects…- »
This comment basically asserts that a website is less important than an actual printed edition, so that it is completely acceptable to experiment with online content. Such is not the case; a website is an online representation of one’s own activities, which is accessible 24 hours a day, every day of the month. Think about the image you want to convey to others?
Don’t stay clinched to fading trends and styles. If you want to develop a quality website –that appeals to the public – you must build on your previous projects and stay up to date with the latest trends, otherwise your work might not be given the full credit it is due. Specifically, you should try to avoid the following:
- Shadows under the text
- Glowing buttons that can have an exaggerated 3d effect
- Effects in relief or embedded
- Excessive shading: A color shading scheme, which includes a wide range of colors passing from purple to acid green is not the best choice. This is evident even if one is not a professional graphic designer.
- Colors: We have covered how important colors are in a website. Then why does one still happen to find pink text on a green background? Here one must rely on good taste, as well as following a general rule of thumb. Your graphic projects should have monochromatic colors or colors which complement each other. Try to avoid using haphazard color arrangements, adopting colors that don’t follow any sort of logic reasoning. Do you want to learn more? Then you should read this article.
- Relevance: When it’s possible, make sure that each graphic element shares an affinity with the project’s main theme. For example, a background made up of flowers is certainly an appropriate background to use for a flower shop website. However, if this same background was used for a fishing website, it would feel definitely out of place. The graphics of a website allow you to convey the key concepts behind a website to other people, so it is best to have a set of graphic elements (images, colors, icons) which can blend in with the main concept of a website.
In a last article we have already talked about the errors one should try not to make, however let’s refresh our memory and summarize them in a few key points.
- Colors with a low contrast or improper chromatic arrangement: avoid writing headers with a red font, if your site’s background is a shade of blue. There isn’t a specific rule, its only a matter of good taste and judgment. Some colors just match well with others and it’s up to you to know which ones are good matches. In any case, try not to use too many colors so that you can avoid looking clownish and inappropriate.
- Correct line spacing: Your website can be hard to read if the line spacing is too narrow. The correct line spacing is between 20 px and 22 px, depending on the font used.
- Margins out of alignment: text has to appear proportional and symmetrical. This means that if you apply a 20px right-hand margin, you will need to apply one of the same dimensions on the left side as well. This is to avoid something that looks like the following:
As you can see, the text is 70px away from the images, and on the right-hand side it is almost touching the border. Also, the images aren’t aligned properly. These kind of inconsistencies can make your site look as if it hasn’t been updated in a long time.
- Use the tables: develpers who switch from using table layouts to tableless style sheets might encounter some difficultires at first but it is not that difficult once you get used to it. If you’re starting from scratch, try to work with style sheets and avoid using tables. It’s easier than what you think and the advantages are enormous.
- Editing images using html: It is quite tedious having to open Photoshop or an image editor for each image, but this has to be done because editing images with html is not correct. First of all, images would lose a lot of their quality (which would bring us back to the 3rd point of the “Graphic, visual and audio elements” section) and also because their relative size remains unchanged. This means that even if you create a small thumbnail gallery, each of the images might weight 150kb and the images will take much longer to load.
- Invalid code: I recommend you to get a copy of this useful Firefox plugin: html validator . Once installed, it will notify you about any validation errors with a red ‘X’ icon, and with a green icon it will indicate that the code is valid.
In this way, while you are working on the code you will be able to see and correct the potential problems in the script.
- On firefox it runs, on Internet Explorer it doesn’t: before going live with the website, you must test if the site runs smoothly on all the major web browsers: Firefox, Internet Explorer, Safari, Opera, Google Chrome. And, until there is an adequate replacement, Internet Explorer version 6. It is best practice to test it wile you are developing the code, so that you will be able to correct eventual errors.
- The site is not visualized well on a 19-inch screen: you will have to take into account different resolutions: 1280 x 1024, 800 x 600, 1680 x1050…Change the resolution settings of your screen, look at how the site layout changes?
Let’s look at some of the most common errors?
- A blue blade, a purple line…the graphics don’t represent the company and it’s incoherent. Furthermore, each graphic element seems out of place as if they were pasted in without any regard to location.
- Moving Text: this is similar to gifs, to be avoided at all costs.
- Arching Text: A classic type of wordart. Not very profressional, it looks just like cliparts.
- The menu has an outdated graphic setup. Moreover, links use a Comic Sans font, very amateur-looking.
- Clipart: As I’ve said before, clipart is distinctive of websites that are improvised and made in little time.
- Errors in the code: The SGML analyser found 76 errors in the home page code.
- Left-hand Indentation: Left-hand alignment should be avoided, especially due to the proliferation of widescreen displays. Avoid this so that the site is not aligned to the left, leaving an empty side. Aesthetically it is not great, especially if background is white and there isn’t any other applied background effect.
- Animated Gif: can a rotating cookie accurately represent a company?
- Shaded links: heaving shading doesn’t improve the graphics of the website, rather it makes the text harder to read.
- Shinystat Counter:As I’ve said before, there’s no sense in using this counter. It’s also quite ugly to look at, and it always gives the impression of being out of place.
This website shows some of the mistakes covered in this article: the font of the 3d logo, the heavy shading in the oval background under the photo, and a color scheme that doesn’t match well (it includes blue, yellow, and green).
All of these things make the website less appealing graphically and you run the risk of people shunning a site because of its lack of appeal.
Now that we’ve addressed the various mistakes that can hinder the quality of your webpages, it’s time to look at them in a new light: be critical and constructive.
Professionally, you will be able to develop the moment you realize what your main defects and limits are, and you feel the need to improve on them.
In tutti questi anni abbiamo ricevuto centinaia di richieste di approfondimento sulle numerose tematiche del web design vissuto da freelance. Le abbiamo affrontate volta per volta. Ma ci siamo resi conto che era necessario fare qualcosa di più. Ecco perché è nato One Year Together, un vero e proprio master per web designer freelance che apre finalmente le porte al mondo del lavoro.
Scopri One Year Together »