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.
Graphic layout
- 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.
Typography
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.
Coding
- 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.
- Loading a larger-sized image on the same page: This is something to avoid so that users will not have to go back to the previous page. Also, graphically it is considered a quite annoying defect. You can find dozens of free javascript that are simple to use and integrate, which will make your gallery look much better.
- 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.
Compatibility
- 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.
*****************************************
L'immagine principale dell'articolo è stata fornita da @Fotolia
The Author
Related Posts
You may be interested in the following articles:
44 comments
Trackback e pingback
-
uberVU - social comments
Social comments and analytics for this post... This post was mentioned on Twitter by nando_p: RT @YIW The tell-tale signs of ... -
CSS Brigit |
... How to avoid common mistake in webdesign and make a professional site. The tell tale signs of an amateur website.... -
links for 2010-02-24 « random thoughts and casual ruminations
[...] The tell-tale signs of an amateur Web Site and how to avoid them | Your Inspiration Web (tags: web_design) ... -
“Promoting Your Children’s Book Illustration Online” « Deystudio – "The illustration site"
[...] Building a web presence… It is really best if you have a website to showcase your online portfolio. Create your ... -
Information Architecture & Usability blog » Blog Archive » Does your site look amateurish?
[...] Your Inspiration Web site has a great article, “The tell-tale signs of an amateur Web Site and how to ... -
florystyka
Website worth visiting... below you’ll find the link to some sites that we think you should visit... -
TUT: The tell-tale signs of an amateur Web Site and how to avoid them | mmc blog
[...] http://www.yourinspirationweb.com/en/the-tell-tale-signs-of-an-amateur-web-site-and-how-to-avoid-the... [...]
Very Helpful, thanks! I can’t believe that there are people who still make this mistake but it is the reality, ugh!
Hi Shawn, welcome to YIW!
Unfortunately there are still those who worked so, argh!
Ha, funilly enough someone has just sent me some PSD files to mock up a website with, and they all pretty much violate the first three sections!
I have to say though, a website that makes me laugh still is http://www.norcalis.com
Ahah Mike, the ducks in the background rocks!
Great article Sara, really helpful
Hi Mike, welcome in our community.
Hi Just, thank you
Take care,
S.
Sarah, I’m sure you’re a good person and all, and there are some great common sense tips in here (i.e. use image editors to edit images!) but your section on Graphic Layout is just plain awful advice.
I implore anyone who has read through this article and has made it to my measly comment all the way down on the bottom of this page to please – do NOT think that the path to great web design is to “stay up to date with the latest trends” and avoid elements like drop shadow, relief or embedded text, a wide color range, and low contrast.
I know you wrote this article to help, Sarah, but when you give terrible advice like this, I’m afraid I’ve gotta call you out.
“What makes great design great is not a trendy technique, but the logic and conceptual aspect that were figured out in the designer’s mind—or on more likely, on paper—before a mouse cursor ever opened Photoshop.
“So ignore those top x lists and articles on trends. Seek out quality content about the logic and reason that goes in to design”
~ Astheria, http://astheria.com/design/learn-about-design-not-making-things-pretty
This is the true approach one should have toward design.
And all of those elements you were preaching to avoid, those “tell-tale signs of an amateur Web Site”? I think you’d be hard pressed to tell atebits.com and crushlovely.com that their sites are amateurish because they dared to use the dreaded drop shadow.
I for one would be able to look metalabdesign.com in the eye and sneer amateur because they dared to use a relief effect on a majority of their text.
When you pronounce (oh so boldly) “your graphic projects should have monochromatic colors” you seemingly give little wiggle room for a site like the aptly named ilovecolors.com.ar or anything by designsensory.com to use its wide gamut (pink on tan?! Red on green?! Say it ain’t so!) Heaven forbid designers like cheapshotentertainment.com/temp even radically experiment with conflicting color and hue because the your label has been thrown down that doing so is “amateurish.”
(And just for good measure, check out nosotroshq.com to see what low contrast can do for the look and feel of a site and markjardine.com, riotindustries.com, or weareinstrument.com for the dreaded left-aligned layout.)
Like I said, Sarah, your heart is in the right place. But my fear is that an actual amateur who is trying to get better and looking for good advice might mistake this article for something informative and that your point of view may inadvertently stifle the creativity of the next great web designer (which may very well include yourself.)
Correction:
“I for one would be able to look metalabdesign.com in the eye” should read “would NOT be able to”
Proofreading can make a world of a difference.
I understand your points Roger, but obviously Sara’s point was “the abuse of these techniques will give a site an amateurish look”.
An amateur would use drop shadow on every title because “It’s cool”, but an expert web designer knows when and how to use them.
An expert web designer could mix three or four different fonts in his work, giving balance and grace, while an amateur would would ruin his design. And so on…
These are intended not to be “rules”,but to be guidelines
@JustB
I think you’re right, but she simply brought it the wrong way. They aren’t bad effects, they’re simply effects overused and badly implemented. However in her article she points them out as being bad per see.
It is simply how well it’s implemented, and those websites aren’t bad because of breaking 1 rule, they’re bad because they break a lot of rules. This makes them look amateuristic. For example it’s much more how the elements are used, placed, defined, how you glide over the interface, where the focus is and so on. NOT the bad effects per see.
So I think her intentions were good, but the way she wrote the article just makes it rub off you in the wrong way.
The key is really to remain subtle with your effects, always.
Hi Nereriu, welcome to YIW.
“overused and badly implemented” … it was just what I meant. Thanks for the clarification!
Take care
S
Hi Roger,
welcome on YIW. It’s always a pleasure to talk with someone who has different thoughts, but can express himself so kindly.
Just as JustB said, my advices were just that, advices, and not rules (does rules exist in design?).
Obviously good web design doesn’t consist in following this or that trend, or not using an animated gif, I never said this: my article wasn’t meant as a treaty on the matter of web design
It was just a list of some suggestion for those who realizes websites good for 1999, but nowadays are really outdated. Can you admit that the websites I showed aren’t an amateur’s work? 
The websites you showed in your comment are really awesome and professional, and the advices I listed don’t apply to them. I think that the difference between good and bad design is in not overusing some effects.
There’s a huge difference between the use of shadows in the sites proposed in this article and metalabdesign one. The same applies to left aligning. I wrote an article on this very subject, telling that I really like left-aligned websites, and showing a gallery of some of really good looking ones.
But that isn’t always the norm. In this article I point out some outdated websites that, given the low resolution, weren’t centered, and now, with larger screens, are pushed to a corner, leaving a good portion of the screen white, void. I think this is really of bad taste.
All of this list’s elements are common to poor budget websites, but I don’t think that a 3D button is always bad. It’s their overuse and a bad implementation that makes the difference (in bad). It’s all very subjective, in my opinion.
I hope that my thoughand the article’s meaning are now more clear.
Thank you for commenting, I really enjoy these type of discussions.
@Nerieru
Agreed, it was a matter of tone.
It seems Sara explained herself in the previous comment.
Very nice article. Good advice, given succinctly. For a less mature look at animated gifs visit your friends at hardtolive.com.
http://www.hardtolive.com/2010/02/ani-wolves_23.html
Sincerely yours, Easygenius.
PS. NSFW Language
Thanks Easy Genius
@Sarah No problem. I can’t seem to reply to your thanks, so I’ll just reply to my own comment. I don’t have to help you explain yourself to Roger but I just wanted to add a few things.
Namely, the beauty of the web is that you no longer have to be a designer or programmer or developer to share your content. You just have to have something to say. The result is a multitude of either very amateurish or very generic looking websites.
For those who aren’t designers by trade but do want to customize the look of their site, a few simple do’s and don’ts can make a world of difference on the web.
But don’t forget, content is still king. If it looks good but sits idle with no updates for months, chances are visitors won’t keep coming back to look at your pretty CSS. Some of the most successful sites I know started out very simple. Several of them remain simple.
Anyway, have fun on the internet. Cheers.
Easygenius
Seems like a lot of personal opinion…
Hi Ted, welcome!
Sure, there are many personal opinions, this article is not the Webdesign Bible
I think that there is a cycle that designers go through. When first starting out, many designers tend to overuse effects like drop shadows or embossing in Photoshop. These effects end up being implemented because they look “cool” even though they don’t.
Eventually, the designer begins to realize that they have not been implementing these effects well and abandon them altogether, for fear of looking “amateurish”, as this article outlines.
Later, though, they may come back to these effects, this time with more experience and poise, and the understanding that these effects can be very useful when implemented with care and purpose.
To my way of thinking, this process marks the movement from amateur to professional.
Hi Matt, welcome.
Very interesting analysis, I agree with you. Thank you for expressing your opinion:)
I strongly agree with you, Matt. I often found my first-time-try design failed, but when I re-applied the same technique on the latter design it worked out well, much better. The key is practice on the technique over and over to move swiftly from amateurish look.
Anyway, thanks for this article, Sarah. It’s kind of checklist before I plan on my design
Welcome eggster
and thanks for your message.
Why does this site give all these guidlines, yet has a horrible un-readable logo or whatever that is at the top?
Hi Paula, welcome.
It’s not the first time we talk about our logo’s illegibility: the font is designed to be eclectic and a little bit unconventional to attract attention. And believe me, our brand is easily recognizable even if it’s not easy to read. For now this is enough for us.
See you
Sarah,
I’m a huge fan of typography and logo design. Don’t listen to Paula, I love your crazy cool logo!
Hi Sarah,
This is really a wonderful article and also obviously one great post. Thanks for the valuable information and insights you have so provided to us. Keep up the good work.
Shadows work just fine if you know how to use them, i think that the rest is ok
Hi David, i’m agree with you, shadows can be fine if the designer know how to work.
tht article is very helpful so thx
and i want u also take a look at my project and tell me wat i i have like problems so my wordpress is http://psdesigne.wordpress.com/
so plz visit it cause i need advices
thx anyway
I’ve just recently found your website and ive been a visiting daily. I thought i would take this opportunity to thank you for some of the great articles ive read so far.
Keep up the great work, and i will continue to visit regular.
I enjoyed this article, im just starting out in web design, so all the help and tips are more then well readable for me.
Thank You.
Hi John, welcome to YIW.
Thank you SO MOUCH for your very kind comment
I had a good laugh with a few, like animated gifs, etc, but definitely heeded certain other things such as coding! Thanks for a great article LOVE this website!!!
I’m glad you like it.
Another sign of an amateurish website is an abundance of misspellings. This article is full of them.
Greetings from Florida! I’m bored at work so I decided to browse your blog on my iphone during lunch break. I really like the info you provide here and can’t wait to take a look when I get home. I’m amazed at how fast your blog loaded on my phone .. I’m not even using WIFI, just 3G .. Anyhow, great blog!
Bonsoir les gens quel est votre point de vue de mon nouveau blog sur le diagnostic immobilier?
I simply had to say thanks again. I am not sure what I would have created without these techniques documented by you directly on that topic. It seemed to be an absolute daunting issue for me, however , looking at the very specialized avenue you processed that forced me to jump for contentment. Now i am grateful for this help and in addition trust you find out what an amazing job you are carrying out teaching many others through a blog. More than likely you’ve never encountered any of us.