5 Pitfalls to Avoid for New Web Designers

5 Pitfalls to Avoid for New Web Designers

New web designers often find themselves in a common scenario: fresh out of college or just barely starting your career… but unlike other careers where there are defined training programs to show you the ropes, you end up wandering around the internet, hoping to pick up enough experience to land a job. Today, I am going to discuss a few areas where rookie web designers can drop the frustration and begin making high quality web sites faster.


Pitfall 1. Don’t Try To Re-Invent Layout

A very common theme amongst beginners is trying to “re-invent the wheel” when it comes to layout. Why? One of the reasons that this happens is younger designers have little experience with actually having to develop the sites they design.

Other beginners hope to revolutionize the industry by creating wild and crazy approaches to simple design problems.

Perhaps a better analogy is trying to re-invent man’s invention of flight. What we take for granted right now took hundreds of years of trial and error to perfect. Just like flight, it would be silly to waste time trying to re-invent some of the fundamental design solutions for the most common problems on the web.

Common design themes like navigation, fixed content columns, and a footer are all perfectly acceptable ways to start a design… they aren’t boring because they work, they are effective and web surfers have come to expect them.


Starting with a basic layout like this is a great way to start a project on an established, successful layout.

There’s nothing wrong with improvising on a design or introducing new and exciting ideas, but learning when and where to introduce these kinds of ideas is crucial to succeeding as a designer. Remember, a web design should be functional first and foremost – interesting visuals and funky design patterns should always take a back seat to practicality.

Here are some tips:

  • Explore the Internet. Go out and look at your favorite five websites and acknowledge their layout. Notice anything similar? Different?
  • Don’t ever just start from scratch; With any project, take a look around the web to see how other designers laid out similar sites
  • Don’t dismiss a common layout because it’s “everywhere”
  • Define a desired layout and then build a website with only basic colors and standard fonts. Design for usability first, not appearance.

Remember that there are not 5,000 different types of web layouts out there… If you are a new designer and your website does not resemble anything you have ever seen, chances are you didn’t invent something new and useful, you just need to better understand layout. Creativity and innovation will come with time – learning the “fundamentals” is the best way to get there though!

Here on some layout tutorials that might help you get started:


Pitfall 2. Don’t Get Lost in “Design Land”

If haven’t already hit this stage in learning design, you soon might find it. I call this phase, “Getting Lost in Design Land”. Quite simply, once you go there, it’s hard to pull yourself back out. There is literally a never ending supply of gimmicks and “tools” on the internet at your disposal.

New designers often look at things like Photoshop brushes, flash plug ins, vector graphics, crazy fonts, and stock photography as “cheats”.

For intermediate to skilled designers, these are invaluable tools that are used sparingly for specific tasks. They are distractions for learning designers though, and can easily become crutches rather than the tools they were intended to be. Rookies find brushes and these interactive elements as “flashy” and they feel as though incorporating them into their design will make people think they are more advanced than they are.

In some cases, I have actually seen people pull this off… but the reality is that newer designers get lost in these things and use them to an inappropriate extent. Experienced designers can spot this kind of gimmicky silliness a mile away.

Not Three


Tips to Help You Overcome Add-On Addiction:

  • Don’t use them! Force yourself to find alternate methods of doing things. Instead of downloading some web 2.0 buttons from a random site, head over to PSDTUTS and learn how to build them from scratch!
  • Allow yourself to be average at first. Instead of having some “awesome” fire breathing dragon at the top of your page, try and do something clever but subtle with typography.
  • Don’t look for reasons or excuses to go and use a plug in or brush. If you are dead set on using something of this nature, look for and seek out exactly what you are looking for.
  • When you are in a situation where you are seeking a plug in or Photoshop brush, use proven vendors. Codecanyon, Graphic River, etc. Random things downloaded off the internet can oftentimes cause you trouble or make your site look really bad.
  • Clean out (or completely purge) your plugin and font libraries once every year – only keep the absolute essentials. You’ll be surprised what you can live without!

Here are some safe resources for professional downloadable plug-ins and content:


Pitfall 3. Setting Unrealistic Goals for Yourself

Today’s up and coming web designer is definitely an ambitious fellow. Most web designers spend a great deal of time learning on their own. It takes a special person to spend the amount of time it takes to master web design. With this in mind, it is also imperative that the goals you set on initial projects are realistic goals.

Ambitious people always have ambitious goals. Many times, when sitting down with new designers to go over their current project, the focus seems to always stray to what they “want to add”… but adding things isn’t always the best solution to a problem, is it?

For Example, “I’m going to add a video up here, an image slider over here, and I want this basketball to fly in from the right and go through the hoop over here.” Obviously, my first question is “Do you know how to execute these ideas?” The frequent response is a smile and a shaking of the head. It sounds great and all, but a bit unrealistic. Rookie designers spend a lot of time thinking about what they wish they could do, and not enough time learning what they can or should do.

Ways to Avoid Unrealistic Goals:

  • Set one “reach” goal per project. If you are doing your portfolio site and you want a lot of things you don’t know how to do, pick one of them and make it a goal to learn how to do it before the site is complete.
  • Don’t be discouraged that you are not capable of what more advanced designers are. Nobody will think less of you for starting simple and slowly building your skillset over time.
  • Ask questions! A simple, “Is this possible?” question on a message board would net you not only an answer, but oftentimes someone might attach a link to a tutorial explaining exactly how to accomplish what you are after.

Pitfall 4. Build Your Design Arsenal

Not Five

Web design is a very repetitive process… Most of your sites will start out the same way – and a lot of the techniques that you use carry over from site to site. Understanding this early on in your career can be extremely helpful in learning the craft of web design.

Rather than starting every project from scratch, you can learn to start with your own library of “building blocks” and “common design solutions” that you can customize to a particular project. Your “design arsenal” will naturally build up over time, and you’ll become a lot quicker (and better!) by applying what you’ve learned on past projects to your future ones.

Somewhere on your computer, you should keep track of everything that you do. If you did some special CSS effect on an image today, next month you should not be Googling the same effect. Have a folder where you keep your resources for future sites and you’ll quickly find yourself speeding up because you’re not constantly starting from scratch. Remember, it’s easier to customize an existing solution rather than trying to start completely from scratch. Yes, there is a time and a place for 100% customized solutions, but a design library will help you in your day to day projects.

What this also does is build confidence in yourself as a capable designer without supervision. When you learn something today by asking good questions and listening carefully, you set yourself up for success by keeping that lesson on file for future reference. Your goal when learning the ins and outs of designing web sites should always be to be able to do things without asking or looking for help someday.

Tips to Help Maintain Learning Resources

  • Set up easy to remember folders on your computer or hard drive. In these folders keep complete sites, plug-ins, tutorials, browser fixes, etc.
  • When you ask a question, take in the answer. Never ask a question to just get over a hurdle. Such as “Why is everything messed up in Internet Explorer 6?” Once you find out, you should be set up for many more battles with the infamous browser, not back on the message board next week with the same question.
  • Make sure you are commenting on all of your code. This is extremely important at the beginning because weeks later you might be able to copy and paste code, but you might not remember why you did something. If a comment is there, you can re-use the code and still remember what exactly you are doing with it as well.

Pitfall 5. Avoiding Professional Networking

Most people understand what Social Networking is and how to use it… but too often people only use “fun” social networking and avoid building professional networks that will help them through the rest of their career.

As an up and coming web developer, you should make sure you are using social networking to help you gain access to the things that are going to be of the most use to you. Myspace and Facebook are great for keeping in contact with people and making new friends. Twitter on the other hand, can be used as an excellent source for web design knowledge. Every site that offers training and tutorials has a twitter account. Follow enough people affiliated with web design and you will have a constant stream of updates, round ups, and tutorials daily. Places like Freelance Switch Message Boards or sites such as Creattica offer great opportunities for feedback and website reviews

Tips for Not Missing Out On Networking

  • Even if you are not a “post my life for the world to see” type of person, it is imperative that you get out on the front lines and see what’s out there. You don’t have to be a social butterfly to get a huge stream of information via twitter. You can quietly and anonymously take part in this huge sensation.
  • Put your work out there. Whether you feel confident in your work, or you feel like you need some work, the only way to know for certain what people think of your work is to put it out there. Places like Facebook, LinkedIN, Twitter are perfect to make a post and let the world look at what you have done.
  • Don’t wait to have the perfect portfolio or resume to get started.
  • Become friends with your peers. Believe it or not, you might be able to help someone even if you think you don’t know anything about web design. Yu would be surprised that in a classroom of 20 new designers, everyone is so conditioned that they have to “ask the teacher.” The truth is, the guy sitting next to you either had the same question or will have the same question after you. You never know unless you ask. By doing this you will spend a lot more time working and less time waiting for answers.

Conclusion

The great thing about starting out with web design is that everyone pretty much begins their journey in the same place… so even the most experience web designers out there know exactly what it’s like to get started. There’s absolutely nothing wrong with not knowing all of the in’s and out’s of web design – and there’s nothing to ever be ashamed of. Avoiding the common pitfalls that we discussed in this article can help you to succeed quicker, but the thing to really remember is to keep on practicing, learning, and trying out new things! A list like this can be helpful for stopping bad habits before they happen, but nothing will replace the experience you’ll get from immersing yourself in the industry, making friends with other web designers, and finding out your own personal style and approach to design.

We hope you enjoyed the article! Post your own “Pitfalls” down below in the comments section.

Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it. Find out more
  • http://www.belfastfootclinic.com Wacko

    Hey there,
    Thanks a lot for this article. As a new Web Designer a lot of this information is very helpful.
    My main problem is that i am swamped by information on the web about design and developing; HTML, CSS, PHP, Drupal, WordPress, Fireworks and the list goes on. I really wan’t to read all these tutorials and articles but i just don’t have to time to get to everything leaving me with a lot of questions about the in’s and out’s of it all.
    You can chaeck out my first website at http://www.belfastfootclinic.com if you want.

    Thanks,
    Wacko

    • http://www.lifesub.de Stefan Rynkowski

      Hi Wacko,
      in my opinion you should focus on a specific topic. For example take your time for HTML,CSS. After a while you should learning the next and so on.

    • http://codemonkeydev.com Thomas Cannon

      I really like the design, kudos!

      I agree with Stefan, focusing on specific topics incrementally is a sure-fire way to go. I’ve also found that if you try to learn absolutely everything about web development/design, you’re going to have an information overload. Or worse, you’re going to only be average at every field, and never have an area where you truly excel.

      Example: I am primarily a developer, but I’m focusing on improving my design skills at the moment. I feel my site designs are usable and pleasing, but lack the luster of attention-grabbing sites. After I improve the “shiny” factor of my designs, I’m going to focus back on development (my personal ideal is to be half as good of a designer as I am a developer).

      What it comes down to is finding your area of expertise, becoming competent in the other areas, and promoting your strengths. That way, you set yourself apart with your expertise, and can also handle some complications that will inevitably arise.

      • http://www.belfastfootclinic.com Wacko

        Thanks for the advice guys and i’m glad you liked my website. I have got 470 unintentional website visits since I posted this! Had not a clue what had happened but eventually found this post and realised why I had suddenly got so my views. Thanks again guys!

    • Zach Mathews

      AWESOME FIRST WEBSITE, although you should probably make the start button even with the other navigation on that slideshow.

      • Zach Mathews

        Oops replied to the wrong comment

    • Zach Mathews

      REPLY – AWESOME FIRST WEBSITE, although you should probably make the start button even with the other navigation on that slideshow.

    • http://www.adbhuth.in aditya menon

      are you sure that’s your first site? it’s excellent work! i think you’re one of those “born talented” designers. all the best for the future man :)

  • http://www.sz-media.org Sz-Media

    great article, not only for beginners. i find myself multiple time downloading some code snippit and edit it to fit for me the same way over and over. A folder with all the cool snippets i found would be smart ;-)

    I found myself in on the way to a designer in the article also… i think everyone were collection mass of that cool brushes when he/she started photoshop the first few times :)

  • Pingback: 5 Errores que deben evitarse para Diseñadores Web Nuevo

  • http://www.drivvedwebbyra.se Fredrik

    hehe funny but a good article! Thx Glen

    • http://www.glenhealy.com Glen
      Author

      Thank You for checking it out!

  • http://www.memango.se Nina

    Great article Glen! Thanx :)

  • Fily

    Great article!

    As Wacko said, Some times I also find my self spending too much time trying to learn stuff that sometimes I don’t even use, but I feel like I need to be prepare and that I need to know as much as possible. After reading this article I might start focusing on one subject at a time.

  • JVladaJ

    Thanks a lot for this article!
    I’m new web designer and articles like this one are very helpful for me.

    When I worked on my recent projects I wrote a lot of code. I wouldn’t like to deleted all of my written codes, so i saving it in separation folder (backup on external hard disk, my second computer and drop box folder) and since that time a used snippets of code and parts of designs many times and it saved mi lot of time.
    Now I’m switching to designing websites in photoshop and I’m doing the same. You never know when you need your recent works :)

    Part about unrealistic goals… It’s very, very hard didn’t do that. You started making designs, made some websites by tutorial, get your first job, earn your first money in your freelance live. You’re just like in paradise and you’re thinking you’re professional now and it’s very hard to return to earth :D

    Thanks this article I start thinking about lots of things in my web designer freelance “career” and my future in this branch.

    I’m so sorry for my wake English and thanks for this article again! :)

  • http://www.skunkwrkz.net paulehr

    I can honestly say I am guilty of all of these.

    This has negatively impacted me by never getting anything done because I am either trying to do too much or I get discouraged for not being able to come out with something kickass.

    One of the things I am trying to do to overcome this is I launched a new site with just the stock thematic theme for wordpress. I am going to work through sitepoint’s “Build your own wicked wordpress themes” and tutorials on nettuts/webdesigntuts to build a new theme and kinda blog about it as I go. Granted it will look plain for awhile but I hope to evolve it into something kickass.

  • http://mrhelp.pl/ MrHelp

    great article Glen, lots of useful tips!! thank you

  • http://www.gregoryhughdavidson.com Gregory Davidson

    Great Article. I think this first item is very valid.

  • Maran

    Valid points.. I hope I could follow it. Thanks

  • http://cardeo.ca matt

    Awesome post! Best summary of this type of info I’ve seen in awhile. The same points also hold true graphic designers who design but don’t code websites. Actually, a post more focused on those people would be sweet too

  • http://graphicarmory.com Matthew Simmons

    Great article!

    I think that this can be applied to all web designers, not just new ones. I’m not sure if I still qualify as new or if I’m past it yet (I guess I’m hanging off the edge =P).

    Anyway, I found the information to be helpful and will be applying a few points that I’m not already doing.

    Thanks!

  • Devonanne

    Very nice and thorough post, thanks! If I can add something for those who feel bogged down by the onslaught of materials out there dedicated to teaching HTML, CSS, etc: If you see a tutorial or book that looks useful, bookmark it or put it in your bookshelf and come back to it when you actually need to learn something new. I find trying to learn web design skills when I’m not applying them to an actual project really difficult and tedious. Instead, when I’m in the middle of a project and I think “hmm, how do I make this work?” I can grab a book and look it up on the spot. It may take a little while to learn and implement it, but the sense of urgency that comes from an actual project on the go helps me focus in and learn more quickly.

  • http://brittanyrubinstein.com/blog Brittany

    Thanks for this article. I’m definitely guilty of Trying to Re-Invent the layout. Great tips!

  • http://www.coreydocken.com Corey Docken

    Keep things simple.

    Makings designs complicated is another pitfall that I see. Glen touches up on this a pit in his first two pitfalls, but it’s important to put a little extra emphasis on it. In terms of design, if you don’t need it, you probably shouldn’t do it.

    Most users aren’t going to take the time to learn how to use your website, so some “really cool, new feature” could distract or prevent them from completing their goal.

  • http://ccpmultimedia.com Connor Crosby

    Great article! I myself have done a couple of these pitfalls :( But, hopefully with these tips I can improve. Thank you!

  • http://www.blur-estudio.com.ar Hernan

    Haaaaaaaaa!!!!!!! con razón…

    • ne

      Wow, what an amazing website you have!

  • Abhijeet

    Thanks for Great article! It help’s me a lot .

  • http://www.luke-king.com Luke

    I am especially guilty of not social networking. I only have a facebook and I keep that very private. However I have been meaning to get into social networking as barely any of my peers have continued into this field past their studies(so no real place to talk web!).

    Well I have been inspired to create a twitter account now and give this a shot ;)

    • http://codemonkeydev.com Thomas Cannon

      Cool, what’s your username?

    • http://codemonkeydev.com Thomas Cannon

      Cool, what’s your username? You can follow me as @LockeCole117 if you’d like :)

  • http://www.thomwensink.nl Thom Wensink

    Great article. lots of useful tips!

  • http://www.webdesignbychloe.co.uk Chloe

    I probably learned more from this article than any other blog post I’ve read on web design! Really good advice for all web designers.

  • gayle

    Great advice! Will refer to this often.

  • Czr

    Great post! Very clear, concise, and to the point. Now I wanna be a web designer :D

  • http://www.webdesign.janzaskolny.cz Jan Zaškolný

    One of the best tutorials I have read in last days!
    I like the fact that article is short but crowded with usefull information.
    Thank you.

  • http://filcp.com Filipe Carrano Pacheco

    Very good article, and very encouraging to me.
    I liked very much the fact that you point the problems, but you also suggest solutions to it.

  • Sarunas Savickas

    Helpful information.

  • Pingback: 5 Pitfalls to Avoid for New Web Designers | Shadowtek | Hosting and Design Solutions

  • http://rybaxs.com rybaxs

    Now I know after 3yrs of designing experience.

    I like the “Don’t try to re-invent the layout”..
    hahaha! I always argue and experience this mostly on some marketers and the boss, they always re-invent the web world layout.

  • http://www.think360studio.com/ Think360 Studio – Web Design Company

    great article..thanx :)

  • Obed

    Great article! Shy new web designer here with big ideas. Its the details that always get me.

  • http://codemonkeydev.com Thomas Cannon

    Thanks for the Article Glen, it was nice to have these points reinforced to me :)

  • AucT

    i just looked at the mirror reading it. I should try to do simple stuff b myself…

    good article I hope I will follow your advises

  • http://www.aniketkulkarni.com Aniket

    Guys ! This is a very nice article. After reading this, I would like to post my portfolio and ask a favor from everyone. Could you please review my portfolio and let me know what you all think about my design. any feeds backs will be greaaatly appreciated ! I am also designing another portfolio which I will connect to the current one !
    Thanks.

    Cheers !
    Aniket.

  • http://www.aniketkulkarni.com Aniket

    I though my website will also be posted here.
    So posting the same comment with my web url : http://www.aniketkulkarni.com
    Guys ! This is a very nice article. After reading this, I would like to post my portfolio and ask a favor from everyone. Could you please review my portfolio and let me know what you all think about my design. any feeds backs will be greaaatly appreciated ! I am also designing another portfolio which I will connect to the current one !
    Thanks.
    Cheers !
    Aniket.

  • http://dbelldesign.com.au Darren Bell

    Thanks for the article, for me it was more of an iteration of what I’ve learnt so far from books and online. I thought the social aspect of it was interesting, I don’t have friends who are designers or developers and don’t use any of the social networking sites. Twitter might be one to look into after reading this.

    So far I’ve been learning (solidly) for almost a year, mainly covering XHTML (which I’m fine with) and CSS (which seems like a never ending learning process) as well as other aspects such as typography, design, color theory etc.

    Sometimes I wish there was someone to chat with about this sort of stuff to get better a better grasp.

  • http://www.obstruc.tk aziq

    great tips and advices. Thanks

  • Pingback: Best of Tuts+ in February 2011 | Web-Busines.com

  • Pingback: Best of Tuts+ in February 2011 | Web Design Northamptonshire

  • Pingback: Best of Tuts+ in February 2011 « Tutorialz | Copy. Share. Enjoy.

  • Pingback: Best of Tuts+ in February 2011 | Webdesigntuts+

  • Pingback: Best of Tuts+ in February 2011 – Cape.de.ms!

  • Pingback: Best of Tuts+ in February 2011 | Shadowtek | Hosting and Design Solutions

  • Pingback: Best of Tuts+ in February 2011 | Wizpress.com

  • Diana

    This was a great article. Thanks. I am an experience graphic designer but fairly new on the web. I am soooo guilty of trying to re-invent. I’m finding that learning the qualities and limitations of CSS/HTML is really important, which is the same as any design project. Were your comments about social media to suggest we twitter or find good people to follow on twitter? Here’s my first site (actually a redo of my first site) http://www.ccleaders.org . I’m still working on setting up the links. Aniket your site is clever and memorable-artsy. Love the Adams quote. You might consider lining up the Current Project with World I Follow. Darren, I completely agree. I wish there was a local Designer club to join.

  • http://www.ikhlasgreetings.com David

    I’d like everyone to check out my first website, http://www.ikhlasgreetings.com.

    I designed it with Joomla & virtuemart using a template and then customizing with my knoweldge of CSS and also by finding tips online (e.g. adding an icon of a product in the shopping cart).

    Please let me know what you think and any constructive criticisms are welcome :)

  • Pingback: Best of Tuts+ in February 2011 | Top Tech

  • Pingback: Best of Tuts+ in February 2011 | Tech Times

  • http://www.graphiics.com Graphiics

    This is too much good

  • Pingback: Best of Tuts+ in February 2011 « OpeniBoot.org

  • http://www.stephenward.ie Stephen Ward

    Loved this article, thank you for penning it. I’m a beginner web designer / developer and this whole article just felt like a big hug :D

  • Pingback: The Design Community Offers Its Favorite Bits of Advice Design Informer

  • Pingback: Best of Tuts+ in February 2011 — gregloring

  • Pingback: so you want to be a web designer | Really Bad Graphics

  • Pingback: Best of Tuts+ in February 2011 | terrineri

  • http://www.webdesignarmory.com MPC

    Great article – As a web designer turned developer I am always falling back on the principles of design when I am building new site projects.

    I especially like the section on building an arsenal – my drives at the office are filled with misc. css files, layouts, psd files and scripts that I can call on at anytime.

    Part of my development is building tools for new webdesigners to help make building their client base easier and more streamlined.

    You can see some of the Internet marketing and web design tools here that I use regularly when building sites.

    Thanks for the refresher ;)

  • http://gauravmishra.com Gaurav Mishra

    Good one :- )

  • Pingback: 5 Pitfalls to Avoid « ART342~S11

  • Lissa

    Really enjoyed this article and can completely relate. I’m working at a place where it went from just working with html and css, then being thrown into php and jquery sooner than I was prepared to. I foud myself getting lost with the code. creating my own directory of code helped a lot, so I wasn’t googling the same thing again and again. stack overflow website helped me a lot too finding answers.

  • http://www.absentsolutions.com al-jerreau

    Great article, and so true. always found myself creating the same code over and over, and definitely recommend keeping every single design tip, and css work around for internet explorer, esspecially internet explorer 6. another tip would be to back up your important files you have collected over the years in a really good space like dropbox, because your hardrive might just decide not to work anymore and all your work and resources will be down the drain, luckily it happened to me early, so I did’nt lose to much :-)

  • http://www.andersonjuhasc.com Anderson Juhasc

    Olá Glen Healy,

    Muito bom o artigo, me ajudou com uma nova luz para conseguir com meu objetivo.
    Continue assim!

    Bye.

  • Anna

    Thank you so much for all your tips and tutorials! You really help me very much to realize myself professionally. You are great and best team. I wish you prosperity in this very useful business.

  • Pingback: Tweet-Parade (no.9 Feb - Mar 2011) | gonzoblog.nl

  • http://aboutwebsitedesign.wordpress.com/ Eric

    good article…thx

  • Giri

    Addon adiction? Plugin cultist? I have no idea what you’re talking about.

    *cough* 122 firefox tabs open in current session *cough* three milion more bookmarked ‘to check out later’ *cough, throat scrape*