Corrosive Online
- Web Design
- Graphic Design
- Articles
- Tutorials
- Downloads
Articles
Top Ten Web Design Beginner Mistakes
Introduction
This article takes a light-hearted look at the mistakes that are often made by beginners in the field of web design. We were all beginners once and everyone has to start somewhere so I felt that offering a guide to the top ten 'noob' pitfalls would help others who are tentatively stepping into the world of online design. Having contributed to and moderated a few forums over my time as a web designer I know the questions that get asked again and again and don't forget I have been there myself. So I will attempt to answer some of these questions here.
Designing yourself into a corner
I can now look back at some of the sites I created when I started and weep, especially when the person I designed the site for wants an update. I begin shuffling my feet and avoiding eye-contact because I know what a horrendous job it will be to make even the slightest change...yes, I have designed myself into a corner!
The main things to look out for when designing your page in your favourite graphics editor are using background images on the main page area and items such as curved edge boxes. If you don't give your design room to 'breathe' then your content will become a slave to your layout. By this I mean that you will be trimming or adding content just so that it fits your page. This sounds like a very bad idea and generally is! This pitfall can be avoided if you understand the principals and capabilities of a web page before you start your design. Folks who do it the other way round will usually end up in a design cul-de-sac.
Creating an entire site from images
"Look at my lovely site" and, from a human point of view, it is lovely but then you realise that the poor noob has built the whole thing from images. There is no text for Search Engines to read so, they assume that the page is blank, and move on. The temptation to do this is huge when you first start out as it means you can use any font you like and really create the entire site in Photoshop with the ability to place everything exactly where you want it like you would with a print design. You must include some HTML text in your website (or make sure you have a MASSIVE adwords budget) or you'll never get visitors to your website.
Exporting as HTML from Photoshop
Thankfully this is not something I have ever done but I see it again and again with new web designers. Those who know me well will know that I personally blame YouTube 'tutorials' for this epidemic but I guess that it is down to the individual looking for an 'easy'option.
The problems with this approach are many as far as I'm concerned. Firstly, the code it produces is usually table-based and can contain any number of superfluous images as Photoshop tries to make sense of your design layout. It is quite common to see lots of gif 'spacer' images which can slow down the loading speed of each page considerably. Secondly, updating a page built in this way can be a minefield. The forum question usually runs along the lines of "I've created my page in Photoshop and exported it. Now I have opened it in Dreamweaver, how do I add text over the images?" The answer is "with great difficulty". The third issue is what have you learned about building a website? How will you change or develop it without going back to Photoshop and exporting the whole thing again? All of a sudden, what seems like an easy option to get a page up online, becomes an absolute ball-ache.
You wouldn't imagine a surgeon learning how to do a tricky operation from YouTube and you probably wouldn't even do something more mundane, like learn to drive, based on the videos there. So why get your web design skills from YouTube videos? I've seen the guy with the Diet Coke and the Mentos!
Not choosing the correct tools for the job
OK, once and for all and definitively...Tables are for tabular data, frames are for displaying another web page or site within your site and CSS styled div tags are for layout. Actually that may well change with HTML5 but the principal is the same. Noobs who see tables as an easy option risk massive cross-browser issues further down the line and frames are an SEO black hole. The answer is to learn how to use the right tools for the right job even if it seems a bit daunting at first. You wouldn't use a spatula to knock in a nail into a wall would you?
Relying on WYSIWYG editors
Don't get me wrong I use Dreamweaver, which does offer a WYSIWYG (what you see is what you get) interface, and it has saved me hours and hours as a web designer. But I would urge new web designers to at least use a 'split' view where they can see what code is going in where to make the magic happen.
Relying solely on what Dreamweaver calls 'Design View' teaches you nothing about website design and I can promise you that you will run into problems that cannot be solved using Design View alone.
I would also add that owning a copy of Dreamweaver doesn't make you a web designer as much as owning a camera (no matter how flash or expensive) does not make you a photographer. There is a lot to learn when it comes to web design and it continues to amaze me just how much I don't know. I do know one thing though, I'd know a lot less about web design if I'd never weened myself off Design View.
Not giving yourself enough time to learn
You need your website up and running in two weeks? Forget it. You might be able to get a page up there using the Photoshop method I trashed a few paragraphs ago or with tables and Design View but consider how long it actually takes to learn a new skill. Web design is no different. I often think that people who come on to forums with a two week deadline to get their business up on the web think web designers are taking the mickey. Trust me whan I say that it takes us a long time to learn our craft and we are not ripping you off with a skill that you could pick up yourself in a matter of days!
So be realistic. Give yourself at least six months to get the basics down and play with some designs where it doesn't matter how it looks or what the code is like for a while. Personal websites are great for this. If you don't care then you can experiement freely.
If you have a tight deadline and don't have the time to build your own website properly then hire a web designer. That is what they are for.
There is a footnote to this section. Just because you built your own website doesn't mean that you have the skill levels to build them commercially for someone else. Too often I see someone who has started their own business and built their own site add 'web design' to their list of services. "Bozo The Clown, children's entertainer and web designer"... What? Really?
Not considering scemantic mark-up
Here's the question, "I have finished building my website and now I want to be top of Google, can you help please?" This question is usually followed by a link to a website that uses nothing but span tags to style text, there isn't an 'h' or 'p' tag in sight and the page structure makes no sense at all to man or Search Engine. Probably another symptom of the WYSIWYG code editor but it is a serious issue if you want to top the Search Engine charts. The hapless Noob has only scratched the surface of what good page mark-up should be and the worst-case scenario is that the design has to be pulled apart and started again. Trust me as someone who has had to do this, it is soul destroying and frustrating. The answer is to do some research on HTML and scemantic page mark-up before you start building your site as that sinking feeling, when some smart-arse on a forum points out the error of your ways, can be too much to take.
Not checking different browsers or screen resolutions
"Best viewed in Firefox @1024*768" Is this a thing of the past? No way, I took this off a website today! It still happens a lot with new designers. There you are happily designing away at your own PC or Mac with your favourite screen resolution and your web browser of choice and it looks great. You eagerly e-mail a friend with a triumphant "I've finished my website. What do you think?" and they e-mail back and say "It looks all messed up on my computer". This is gutting...and I have done it.
This one is pretty easy to avoid with regular checks of your website. Try downloading and running as many different browsers as you can locally. Make use of sites such as browsershots.org or software like IE Tester and research about how to tackle those little browser quirks to get your site looking the same across as many browsers as you can. Also try switching your own PC screen resolution or ask your friends to view your website as you build it to get a good idea if you are heading in the right direction.
The perpetual 're-design'
As humans we are never happy with what we have. That is why capitalism works the way it does. If you have been to Corrosive Online before then you'll know I am as guilty as the next designer when it comes to site re-designs. It is inevitable that your designs will change and develop, especially in the first few months of learning web design, but I guess the trick is knowing when to stop. If anyone has any further information on this then please let me know before I launch into Corrosive Online Version 5 Beta!
Not considering how you will update your website
OK, so you've followed all my advice so far and avoided the first nine noob pitfalls but this is the one that will destroy you if you don't give it serious consideration before you start.
Imagine you have a nice big website with 100 or so pages (or even a smaller one come to that). There are times when you are going to want to make changes to it and this can be a real problem without giving it any consideration at the designing stage.
I'm not talking about total re-designs of course, but maybe you want to change your header image because it is Christmas or perhaps you want to add an extra menu item that has to appear on every single page. It is these kind of changes that mean you must get to grips with using external Cascading Style Sheets (CSS) and something like PHP 'Server Side Includes' or Dreamweaver's 'Template (.dwt) system before you begin your website build.
Conclusion
Of course there are a whole heap more traps awaiting the unwary new designer but these are the ones that seem to crop up again and again. If you need help with any of the potential problems discussed in this article then why not join the forum to get some further help and advice? In the meantime try to learn by my and others mistakes.
