10 Common Mistakes Made by Novice Web Designers

I struggled with the title of this article. It should be: “10 Common Mistakes Made by Graphic Artists Who Think They’re Web Designers and Hand You a PhotoShop File Without Any Understanding of the Medium.” Not very snappy, but it’s what I meant.

There’s a serious point to this post. It doesn’t matter whether you’re coming from a design or development angle, the same mistakes are made by people who label themselves to be “Web Designers.” So here’s my list of pet peeves…

1. No consideration for the browser viewport
The problem with flat PhotoShop mock-ups is that they’re a fixed height and width but a browser is a window with variable dimensions. This is a particularly troublesome concept for those with backgrounds in print design.

An HTML/CSS coder needs to know what happens when the browser is enlarged or reduced beyond the dimensions of your mock-up. Does the background tile? Does it fade to whitespace? Do the elements resize? Is the width variable but only within certain limits? Your design is not complete until you have answers to these questions.

Whatever you do, don’t attempt to constrict the browser’s behavior. A designer once asked me to open a new fixed-dimension browser window so their design would work. The browser wasn’t the problem…

2. Enforcing fixed heights and widths
In a perfect world, all the content would be written before a design was created. That doesn’t happen and, even if it did, the text would certainly change. Unfortunately, novice designers rarely consider the impact of text being added or removed from an element. Their 5 lines of “Lorem Ipsum” text lines up perfectly and they’re happy.

Navigation structures are especially important. Consider what happens when pages are added and removed from the site — is there space for additional menu items?

3. Making assumptions about the user experience
Just because you have a 24-inch 1920×1080 monitor, it doesn’t follow that all users have the same equipment. It’s even worse in the mobile world — designers and developers rarely think about devices other than their own smartphone.

4. Sub-pixel mock-ups
Your 300 DPI graphical mock-up will never look the same on a 72 DPI screen. Browsers show whole pixels; you cannot render half a pixel.

5. No understanding of font stacks
Typography is becoming easier on the web but it’s still not possible to use any font you desire. Not every OS/browser supports the font you want to use. Some commercial fonts cannot be distributed. Some don’t work well on screen even though it looks great at 10.5pt-sharp in PhotoShop.

6. Not considering development practicalities
A typical example: headings featuring fancy fonts and effects which can only achieved using a graphic. That’s fine if your site has 5 pages, but what if it has 500? What about 5,000? Designers soon realize their mistake when they’re asked to create 57 unique titles every day.

Consistency is another factor. If you’re using icons which are 96px2 in size, don’t suddenly change them to 98px2 on another mock-up because you couldn’t get one icon to look right.

7. Forgetting about links
Links are the foundation of the web. If you’re not differentiating links by color and/or style, you’re causing fundamental problems for your users.

Many usability experts argue that blue underscored text should be used in all situations. I don’t necessarily agree with that restriction but, whatever you do, never, never, never use blue underscored text for something which is not a link!

8. No thoughts for animation or effects
One of the worst aspects about PhotoShop mock-ups is that they can’t show typical HTML, CSS or JavaScript effects such as rollovers or animation. It’s a good argument for not using a graphics package when presenting your ideas: a working browser prototype will provide more realistic expectations.

9. Bizarre or inaccessible form controls
Form controls are boring. Why don’t we make that text box carat into a carrot?!!

Form controls may not be interesting, but browsers can render them easily and users understand them. There are occasions when your application requires a unique control which isn’t available in standard HTML but, those situations are the exception rather than the norm.

Progressive enhancement aficionados will tell you that fancy sliders or color pickers are great, but ensure standard HTML is used beneath the surface. Your application will continue to work if a user has JavaScript disabled.

10. Little appreciation of the technologies
HTML and Flash are the same — they’re in a browser, right?

You can do things with Flash that are almost impossible in HTML (although HTML5 hopes to change that). Similarly, you can do things in HTML that are impractical in Flash. You’re asking for trouble if you haven’t discussed the technologies with the client and the developer.

Enough of my ranting. What aspects of novice web designs annoy you the most?

(Angry designers should now head over to 10 Common Mistakes Made by Novice Web Developers…)

Win an Annual Membership to Learnable,

SitePoint's Learning Platform

  • Act14

    Absolutely well said! What I find annoying is the alignment! They hardly bother to look at text or graphics alignment.

    http://www.act14.com

  • johnsee

    I was expecting this list to be stupid, but was pleasantly surprised. You’ve really hit the nail on the head with all 10.

    All I’d add is calling it PhotoShop instead of Photoshop ;)

    • http://www.optimalworks.net/ Craig Buckler

      Ahh, potato-potahtoe!

      Actually, talking of Photoshop/Shop, there’s another thing I hate with a passion. That’s the designer who helpfully flattens all the layers or rasterizes the text so it can’t be copied. Yeah, cheers … perhaps I’ll only accept designs done in MS Paint!

      • Adelante

        High 5!

      • http://www.myspace.com/pas_non pas_non

        I just got one of those to code out this very afternoon! lol

    • designerdesigner

      actually, it’s “Photoshop” with a lowercase s. Just check out the adobe website or pick up a CS package.

  • Jeff

    What aspects of novice web designs annoy you the most?

    All of the above…

    • http://webdesignbysteve.com stevestuff

      I must disagree here. Fixed widths layouts play an important part, especially for websites that are graphically oriented.

      From http://www.zmogo.com/design/why-i-design-fixed-width-websites/:
      “I would dare to say that the majority of sites produced recently, both professional and amateur, use fixed-width designs. These sites include the micro-blogging service Twitter, photo sharing site Flickr, and social networking giant Facebook. ”

      But the designer MUST keep in mind not to make websites that will force users to scroll sideways.

  • Alex

    I think you’ve got it just about spot on there. Many, many, many times I’ve had a designer design a beautiful site that simply won’t work for various typographic/graphic/size reasons.

    The one that gets me most is those stupidly huge background images they create that are over a meg in size after optimisation! That’s great, and looks lovely, but no-one is going to wait for it to download!

  • Ketira

    The one thing I find totally annoying is the use of *music* in a web site. I’m not talking about sound effects; many sites (i.e. both Coca-Cola’s & Pepsi’s) use them effectively to either enhance the experience or to further try to sell the product they’re advertising.

    But put in a sound track in the background of a site (especially if there’s no way to turn it OFF) and I’m gone in 10 seconds. Everyone has their own taste in music; web designers need to realize that not Everyone will like the kind of music your client likes.

    ((p.s – seems that Google Chrome doesn’t like the login for some reason. I *know* I put in the right password, but nothing happened when I clicked on the “login” button. Just thought you admins should know that.))

    • http://www.rwtconsultants.com israelisassi

      “If you have music playing on your site, and you’re not a musician, lose the music. you’re driving away customers and losing sales.” – Bob Parsons, CEO of GoDaddy.com

      • Applewasp

        What if they are a musician? I still appreciate it when music doesn’t automatically play. If you locate the player well, users who want to hear your music will still have the opportunity. Nothing is worse than frantically trying to find the stop button.

  • http://www.tyssendesign.com.au Tyssen

    You pretty much covered most of them, but maybe you could include “being obsessively anal about everything being exactly the same as your original PSD in all browsers, even down to a couple of pixels difference in vertical spacing, when your layout has much more serious usability problems”.

    • http://www.optimalworks.net/ Craig Buckler

      Agreed!

      Photoshop has a completely different text rendering method to, well, everything else. Yet some designers insist on pixel-perfect representation in a browser on a different OS which doesn’t have the the wacky fonts they’ve used.

  • callmestupidbut

    I like how the designer will email you the PhotoShop file as a single image and make out like they’ve done all the hard work for you, so all you have to do is paste it into Dreamweaver and send it. If only they knew!

    The image will no doubt contain paragraphs of text in 6pt Times – like that’s going to legible at 72dpi. There’s just so much more to consider now with Outlook 2007 not displaying background images, form elements etc – designers should be aware of these before their nice design gets ripped apart in the html build process.

    Great post!

    • http://www.optimalworks.net/ Craig Buckler

      Actually, one of the early HTML editors (which will remain nameless) did exactly that. It converted any design into a huge GIF file which rendered perfectly in the browser! Perhaps that’s the best way to satisfy your newbie designer?

  • ricktheartist

    I would amend #7 to say that nothing should be underlined, no matter what color it is, except anchors. This eliminates confusion for the user in every case (visited, or not). Underlines are just plain ugly anyway, so why use them on anything if you do not have to (I know you do not “have to” use them on anchors either, but usability is more important than aesthetics – so I always have anchors underlined).

    • http://www.optimalworks.net/ Craig Buckler

      Yep, you’re absolutely right. I can’t think of any instances where underlines should be used when it’s not a link. Although you may need to be careful with border-bottom in some cases.

  • mathieuf

    Great post! #1 is my pet peeve. Designers (novice or pro) who force a fixed width on the user have not graduated from paper.

  • Vincent Roman

    Why blame a novice web designer, when you can blame the client for imposing their lack of knowledge too. I suppose a web designer has to start somewhere, but clients never learn :)

    • http://www.iraqtimeline.com/maxdesign Black Max

      It’s not the client’s job to learn; at least not their primary task. It’s our job to help them understand that being standards-compliant and so forth is not only the “right” way to do their sites, but is best for their needs. A really good client will learn enough about Web design to be a positive participant in the design process, just like you might bone up enough on troubleshooting your car’s problems to be of some assistance to your mechanic. But chances are you’ll stand back and let your mechanic work his wizardry. If you’re a chowderhead, you’ll insist on being part of the process — “Don’t that wire connect up on that pokey thing right there?” — while if you’re an average client with some common sense, you might look over the guy’s shoulder, but you’ll let him do his job. Same with a design client.
      A contractor’s “rate sheet:”
      $65.00 per hour
      $75.00 per hour if you watch
      $85.00 per hour if you ask questions
      $100.00 per hour if you help
      $125.00 per hour if you say “it’s an easy job”
      $135.00 per hour if you complain
      $150.00 per hour if you did the job, then called us to fix it

  • AO

    Thank you! This was a very useful post. I am (almost ashamedly) one of those print designers who has begun to try her hand at website design, although I have no intention of taking on the programming—knowing what the programmer needs and what issues are problematic is most helpful!

    In my discerning research, I’ve noticed (and taken into account,) the no fixed width/height issue, as well as the problems that can be encountered with non-standard fonts. I resoundingly agree with the hatred of flattened .psd files! … I like maintaining the option to change elements far too much! :) I have tried not to take on too much in my beginning stages, and to only take on sites that are relatively simple (less than 10 pages). We’ll see how they go before I broach anything more complex. ;) Wish me luck!

    • Pete

      In all honesty if you are getting into web design then you *should* have a handle on the “programming”. It’s a point of much debate but personally I don’t think it’s optional. You don’t necessarily need to produce the final HTML, CSS and Javascript but you do need to have an understanding of it; which can only be achieved by learning the basics.

      It isn’t programming as such anyway, just markup. HTML simply identifies what things on your page *are* to give them semantic meaning.

      CSS is another kettle of fish and can be, due to browser foibles, a bit of a minefield. But it doesn’t take a huge amount of time and effort before you start getting the hang of it and to know where pitfalls may lie.

      Javascript is the closest you’ll come to “programming” and does represent a bit of a challenge. However libraries like jQuery have made it much easier to enhance your pages with greater interactivity and effects and have brought simple Javascript into the hands of the designer.

      Only by understanding the tool you’re using can you really get the best of it. You’re selling your self short as a designer if you don’t have a basic understanding of the tools in your toolbox.

      • http://www.madmacreations.com TMacFarlane

        Here is a good method for a novice web designer to familiarize yourself with HTML/CSS: Enable the “Develop” Menu in Safari.

        Find a web page with a layout you like. Right-click on any element, and choose “Inspect Element” from the context-menu. This will give you a plethora of information without a wall of cryptic markup code.

        You can explore websites you like and get a feel for what your peers are doing.

        Try it!

  • noonnope

    It’s not really true to the title. In fact, it’s all about #6: Not considering development practicalities.

  • NewEraWebdesigns

    Well I’m a novice designer…I’m transitioning from the world of PS and Illustrator to DW, CSS and JavaScript and I have encountered these issues many times. However you will note a lot of tutorials and so forth showcase websites being designed in PS and than moved in a web interface editor. Which would lead me to believe thats the standard. So while this is good info you don’t have to be sour about it…. I think we can bridge the gap easily with this great info.

  • http://www.egracecreative.com egracecreative

    This is why, if given the choice, I go straight to code and make my graphics fit the code instead of the other way around. I’d rather have a coded and working model and take a screenshot as a mockup than guess at what will work correctly.

    • http://webdesignbysteve.com stevestuff

      Bravo! I use this occasionally. This works well if you’re designing dynamic websites, especially if you want to give the client some options. Mock-up in HTML for the PHP.

  • TrippleE

    This is a great post…I am a web designer and have done designs for some of the biggest companies in the world. I cannot write code to save my life. While I agree with most of the post, I do have to say that design is ultimately what sells the job at the end of the day so I think both worlds need to simply communicate what they are capable and not capable of doing. I have worked with coding wizards who can take any design and make it work in any browser without a hitch, why…because they have the know-how and the financial motivation to want to do so. I’ve also worked with code writers who do nothing but complain, and make their own jobs difficult. I do think understanding all the things stated above helps to alleviate the pain for the coder but I also feel the more us designers push the envelope, the more we get to weed out the best coders from the weak ones. Technology in general was perfected because someone pushed the envelope. Let’s not be lazy. Communicate with your designers but don’t restrict them to something because you think it can’t be done. I’ve become very successful as a designer today because I refuse to be put in a box of limits. I have found what one coder won’t do the next is more than hungry to prove otherwise. Nothing is impossible in this day and age, we just have to work hard at finding the cracks. Great post Craig!

    • Anonymous

      Keep in mind that we(front-end coders and interactive developers) consider the amount of time to take a crazy design and make it work in a very limited timeline for browsers with more bugs than you can kill with raid. Its easy for someone in a closed environment like Photoshop or illustrator to not understand that we know that all things are possible, but we look at the scope of the project and the deadline and let you (the graphic designer) know that we don’t just take a pen tool and draw it out and call it good.

      You must think about your creative ideas working on a browser that hasn’t released an update in almost 10 years. A good front-end developer will want to push the envelope, but they also know that we’re still supporting IE6 so your drop-shadows and 100% height gradients for a box that will change size is annoying. We will use your ideas as an outline for what we’re about to code knowing that the code will look different on every browser, so why would you expect a pixel perfect rendition of the code?

      Now I’m not saying create designs the same as 10 years ago, but design in a way that you could strip out some of the frills and your art could still stand on its own. This is just like music – you can layer all the sounds in the world, but if the building blocks / flow for a good song isn’t there, you’re just adding crap on top of crap.

      And a real quick tangent on the subject of .psd files. ORGANIZE THEM! When I get a 100mb psd that takes forever to open I know i’m going to be sorting through layers removing all the stuff graphic designers have hidden and never removed. If its not used in the page, or if its hidden and not an obvious alternate style for a hover state or similar, remove it. Recently I’ve gotten tons of files that could benefit from some layers being flattened – but the best idea would be to ask your developer what they’d like to see. It makes us happy.

    • printyprint

      Now that’s a reasonable reply! I would have been more snotty. I’m one of those print designers just tryin’ to get along. I have lots to offer the web world having designed great work in print and would love professional consideration and communication – working together. Too bad the article had so much “us” and “them” (stupid “them” I might add). But I guess this was a rant and not meant to help bridge us. Good info. that I will consider…as I make my way through grumpy programmers and find those that respect what I bring to the table. I’ll be sure to return the favor.

  • http://www.rachelreveley.co.uk artemis

    A recent good one… supplying designs involving complex image maps with mouseover graphics changes and not providing all the graphics. We sent it back and asked for all of the graphics to be supplied. A week later and we are still waiting.

  • Darren884

    This is pretty much on the point. I make sure all my designers never make these mistakes.

  • rob busby

    This was a very good article. Lot’s of information from both sides of the creative world: Designers and Developers. Although everyone has given some good noted points, I am inclined to agree mostly with TrippleE. For the sake of our passion, we must think out of the box in order to accomplish what has eluded our predecessors. Being lazy and not giving the full effort to actually try and convert the creative art work into a usable creation for the Web is pointless. The Web has a plethora of tutorials for your craft. Find the best one that will help you accomplish the task.
    I also must humbly agree with a lot of the sentiment from others concerning the *.psd file. As Designers, we must think of our clients when sending Photoshop files. They need not be an “all-in-one” flat file. Although the client may agree it looks well at the time of the walk through, they just may have the urge to change their minds later and want to alter your creative art. Don’t be offended; it’s actually a compliment. Send the client the files in layers so they can make the corrective changes as needed. The more you help them, the more they help you with referrals for new clients.
    To all, thanks for your input and your enlightening views. Your information helps us all learn. Great post Craig!
    Regards,
    Rob

  • Don Elliott

    In our company I insist all of our designers know basic CSS and HTML, as well as the WordPress structure before they are released to design screenshots. In the scope of a project, we can dramatically cut down delivery time and cost just by having a designer who respects the work the coder has to go through. Sometimes simply modifying a design element just slightly can be the difference between slicing up 3 images, creating 2 extra divs with id’s and classes, or doing the entire thing purely in CSS with a single div. This process over the course of a few dozen websites can mean hours and hours of saved time.

    Elliott Design Inc.

    • noonnope

      when you bother a designer with code issues, it will indeed make coder’s job easier. why you need a coder than? by what you’re describing, you’re in need of a WYSIWYG, not a coder.

      i guess modifying design elements means also paid work, so i don’t agree with that issue also.

      i agree with TrippleE: a lazy developer will definitely lose you clients big time.

  • http://otilas.com.au Mel81

    My biggest annoyance is getting a messy PSD with no structure or labeled layers. Pieces of the same element might be spread over layers that are not even next to each other or in the same group/folder, because the designer was too lazy to keep the PSD clean and organized.

  • Garrett Winder

    Great post. Another issue that I see come up a lot is making sure there are specific styles for h1-h6, forms, tables, blockquotes, etc, etc, etc in the photoshop files.

  • picohax

    Hey!
    Thanks a ton! We web developers have to fight with *ML, CSS, Javascript, code with PHP/MySQL, and continue suffering with MSIE, and yet produce running software which can be deployed to any number of users when it goes to production.

    And in all the commotion, the designer comes up and says “you idiot, you don’t even understand basic design”. I used to think I was supposed to know “basic design”. Well, now that I have read this, I think I am a far better designer than they are web developers!!
    More power and glory to you, brother! ;)

  • GraphicDesigner

    I know, why don’t I rant on about web designers who think they can design but their websites look pants… (hmphhh) Like someone said, we all have to get along and there’s no need to be so sour about it, just communicate (and nicely please).

  • starfish

    People have to remember that you are talking about novice web designers here, so they are not going to be perfect at everything (they are novices after all). Cut them some slack, even intermediate and advanced web designers/programmers are not perfect and still make mistakes. (in fact today I had to point out a mistake made by a programmer (I’m really a web designer, but I dabble in code every now and again.) It’s fair enough I’m not knocking the fact that he made a mistake, it was an easy one to miss, I’ve made much worse ones and I don’t doubt that the chap knows a lot more about php than I do, but it just shows that it works both ways no one is perfect.)
    Also you have to remember what it was like when you started to learn about web design/coding/programming.
    It’s not that easy, and it take time and practise.
    When people start working in web design often you dont get on the job training as such, I had to figure it out myself pretty much and it took time, I will admit there are still tonnes of things I don’t know and yet I wouldn’t consider myself to be a novice.
    Also I find all too often people will put down novice designers as a way of bigging themselves up and getting a kick out of the fact they think know something more than someone else does. This doesn’t help. If a web designer is doing something you dont like, tell them what it is and importantly if they dont understand, show them how to do it. When people are learning on the job as is often the case you have to help them out a bit, there are too many big egos out there who just want people to fail.
    I think it is very helpful as a web designer to know html and css and possibly javascript because it helps you understand what you are designing but it does take time and practise and people shouldn’t be put off if they find it difficult, it is possible to learn it. HTML isn’t too bad to pick up but css can be awkward, I used to find css really tricky, even now I make an effort to look up helpful tips and so on so I can improve, I don’t know everything about css, but who knows everything anyway?

    The other thing is you do get the opposite problem where people can be patronising and think that because I am a web designer I know nothing about programming, this isn’t the case, I know some javascript, some php and also Flash actionscript. Ok, I’m not saying I am an amazing programmer at all, but I am good enough to get by and I know enough to do what I need to do and I understand what programmers are talking about.
    Also I think someone commented above about ‘javascript is the closest a web designer will get to programming’ implying that using javascript isn’t programming. Fair enough that javascript is a scripting language and not server side and it’s interpreted by the browser rather than being compiled like something like C++, but you are still programming. You are still using for loops and variables and functions etc, and you can do some complex things in javascript, so I don’t know how it can be implied that javascript is not programming. I know that there is some snobbery about what is a programming language and what is a scripting language but the basic ideas are the same.

    Also yes it can be helpful for a web designer to know some programming but you can’t expect a web designer to know everything about php or whatever because there isn’t enough time to know everything.
    Some of these things I suppose don’t apply to me because I don’t really do the mock up to pass to a coder stage, I do both stages but having said that surely some of these things are down to interpretation, eg:
    ‘An HTML/CSS coder needs to know what happens when the browser is enlarged or reduced beyond the dimensions of your mock-up. Does the background tile? Does it fade to whitespace? Do the elements resize? Is the width variable but only within certain limits? Your design is not complete until you have answers to these questions.’
    I don’t get this, if it isn’t specified by the designer, can’t the person doing the coding make a decision about this themselves? It’s almost bordering on getting the designer to do the coding for you. Or just ask the designer what they were after.

    • http://www.optimalworks.net/ Craig Buckler

      I totally agree with almost everything you said, but…

      can’t the person doing the coding make a decision about this themselves?

      Yes they can – but is it what you intended? Whether your page is fixed, fluid, or hybrid is absolutely fundamental to web design and the coding process. Knowing what happens beyond the visible part of your mock-up is essential.

      Not specifying that information is like a print designer not stating the size or type of paper they want. Would you be happy if your print shop provided A4 transparencies when you actually needed glossy business cards?

      Programmers will always need to ask questions about your design, but we often find ourselves asking the same questions again and again. A vague concept will not end up like you expect — but where will you aim the blame? At your incomplete design or at the shoddy developer who couldn’t comprehend your vision?

      • starfish

        Fair enough I do see what you mean. I work for a small company and so I usually do the html and css part myself, I don’t really have the experience of giving the mock up to a coder, or the opposite, having to make a html page from someone elses mock up. As a result I tend to design a working page straight away with html and css rather than seperating the two stages, so in that way I suppose I can’t really comment on that aspect of it.

        I think people have mentioned this before but I suppose it comes down to the problem that the job of designer or developer is quite open ended in terms of knowing what skills each has, it does seem to vary a lot and also of course depends on the type of company and how they’ve divided the roles up, the line seems to be quite blurred.

  • Stomme poes

    Same as someone else posted above, Chrome (on Linux) does not log in. Biggest pet peave? Stuff that looks great but only works in some browsers?

    Actually it’s probably 9px font sizes. I coded a design someone else did for a motorcycle school site (the designer generally does print, logos and advertising). It worked out ok within the constriction of the design, but then he went in and changed my fonts to .6em. Microscopic, yes, looks more professional. And with em’s they are enlargeable. But, there are enough people who don’t know about that, that it’s better to start out with a decent size in the first place. Measuring the resulting fonts, they seemed to have ended up at around 10px tall. Unreadable.

  • Victoria Blount

    I think this is a great article, i made some of these common mistakes when i began designing web pages, but once you have begin developing them, you quickly learn to think about all the questions above and preempt the answers, making it easier for yourself whilst still remaining a influential design.

  • billhannah

    I’ve worked with many, many designers over my career as a developer. Some are great, and have been doing web design for years. And it shows when I get the design and I don’t have a single question about what they intended, and it’s all easily doable with HTML.

    However, once in a while you get a designer who is a print designer who decided that today was the day they would put web on their list of achievements. I understand that it’s hard to go from print to web and you’re going to make mistakes, but sometimes it’s too late down the path to fix them in the design phase (ie, the customer already signed off the designs and the site is launching in 3 days. Happens all the time). Some issues I’ve had to deal with that make it really hard to work with the design:

    1. 5,6 or 7 pt font. Seriously! I tell the designer “Do this, Cmd+Option+0. Can you read that text? Ok, now change the canvas resolution to 72dpi (like you were told to do at the beginning). Ok, can you read it now? Didn’t think so. That’s what people coming to the site will see. This conversation usually starts with “I don’t know what you’re talking about. I printed the design and I can read the text just fine”. Seriously, they say that.

    2. The designer who heard at one time that web design must be 800x600px. “Well, I’ll take a non-tiling background, and resize/mask to 800×600. Now take these form fields, and make them small enough so I can fit all of them into my box. Now I have to put a title and text in. Oops, form fields are in the way. Guess I’ll have to make them smaller. There you go. 8pt font with text fields that are 10px high and 25px wide. Looks GREAT!” When told that because 8pt font is too small for body text because we don’t all have Super Vision(TM), then he comes back with a revised design that has scroll bars on his 800×600 box that are brown. And he insists that the scrollbars be brown, because the “blue clashes with the rest of the site”. There is a designer I have to work with where every design is like this. For 3 years. And I’ve given up trying to explain to him that web pages have this marvelous ability to grow with the content, and that anything under 9pt is unacceptable for a text size because that’s as small as Firefox will make a font so it’s going to be 9pt anyway.

    3. A design supplied as an .IDD file. First, we don’t have InDesign because we aren’t a printer. So I can’t open your file. I can see your 300dpi assets, and the fonts for your awesome creation, but I have no idea how it all goes together. So, you supply it as a .pdf. Thanks. But if you look at the creative brief, we said all designs have to be supplied as .psd of Fireworks .png because it’s hard to extract things from a .pdf. So, you take your .idd file and “Save As -> .psd”. Now I have your design as a flat file. Might as well give me a .bmp. Man, I’m such a jerk! Just because I want to be able to slice up your awesome design I make you jump through hoops. This has happened so many times that I even found a way to convert a .pdf into a layered .psd (takes about 30 minutes). Open PDF in Illustrator. Save As ->.ai. Open .ai with Fireworks. Ungroup all groups. Save As -> .psd.
    It’s ugly, but it’s so much easier than trying to explain to the print designer why you can’t work with InDesign files. If you try this, make sure you ungroup any groups that have anything you need to extract because any groups get rasterized when converting to .psd. Also, text isn’t editable (gets rasterized since .pdfs only seem to store the outlines, and not the actual glyphs and Fireworks avoids converting them to vector layers in the .psd).

    I usually give the novice web designer some slack because we all start somewhere. But when the same designer makes the same mistake over and over and over and over again and refuses to change their habits, then, my friend, stop calling yourself a web designer and go back to designing cereal boxes.

  • JNorky

    For me, it’s underlines. I hate it when people try to emphasize text by underlining. I prefer they use bold – but then some people can go overkill on using bold. I’ve seen pages where the entire text was in bold.

    Also, I am not a fan of GIF animations especially the blinking ones. They are very annoying and are not recommended because they can cause seizures among epileptics.

  • AnchorWave

    A new designer needs to experiment and learn from their mistakes in order to gradually learn how to achieve creating a well working and popular site. Anchor Wave Internet Solutions is filled with hard workers that work together to create wonderful sites, for even the craziest of clients :)

  • marzy

    Although I believe if you are a web designer you should know about html and css if only at the basic level to give you the bigger picture of what you are designing for.

    I do also believe we need to stop being so anal about getting the final mock to look exactly the same in every browser. We should be taking the mock and getting it as close as possible without extreme measures.

    The mock should be used as the guide and then people who know how to actually code websites should build based on the mock but more importantly make the site usable. who cares if it does not look the same in every browser. how many people have multiple browsers and switch between them. Come on. website should be made to be usable and not pretty for the sake of it.

    • John

      Remember, be consistent in all you do.
      It’s very important to look the same in all browsers, then you will keep integrity of design, and professionalism. One more thing, colors, layout, shapes means a lot in people, you want to increase the amount of visitors in your site, so changing layouts, brands, style, due to different browsers it’s a risk can be confusing to users. Design may look the same, talking about web.
      Be consistent in all you do.

  • http://www.madmacreations.com TMacFarlane

    I will go to my grave remembering the look on one designer’s face when I told her there was no such thing as a half a pixel.

  • http://www.aplossystems.co.uk AplosSystems

    For me it is lack of spacing. I hate it when designers don’t space their content apart from borders or elements. It just makes it look squashed together as well as being harder to read.

    It’s also, as you pointed out in the post, seperating links. Although I don’t like the underline look, it can still look good in other areas of a site (specifically the footer). Different colour is the way to go, and if it fits, bold.

  • http://www.dmgx.com Michael Morris

    My biggest peeve is being sent a flat PSD file without proper layers so I can’t break the image up.

    • http://otilas.com.au Mel81

      oh yes or they refuse to supply the PSD and expect you to work from a jpg… I’ve had this sort of thing come through from agencies

  • basicxman

    I would have to add that a lot of new designers (including myself) get frustrated by thinking a good design looks bad, but only because there’s no content! It’s really hard to get the feel for a mockup if you haven’t included filler text or images.

  • Daniel

    Funny post. I’m waiting for the next article: “Why coders shouldn’t design.” Should be a good one.

    • jo

      LOL!

  • http://www.madmacreations.com TMacFarlane

    It’ll be mighty short & dry: coders are inherently better designers than designers are. Designers who don’t code have forsaken F.L. Wright’s paradigm of form-follows-function in favor of client-prostitution (they are not to blame: this whole culture of celebrity-designers and agencies have pressured the pedagogy.) Coders must stick by this paradigm just to make their work, well, work. When a website’s form follows its function properly, it is already well-designed. Putting lipstick on a pig may be what a designer does best, but it is ultimately the most throwaway aspect of any project.

  • thomaz

    about #4, does the dpi really matter on screen? screens don’t understand dpi, it’s all about pixels, so a mock up being 300dpi or 72dpi won’t affect what you see on screen.

    • sue

      What’s annoying about receiving a big file is having to wait 10 mins for Photoshop to open it. Plus the fact that designers don’t get the medium they’re designing for.

      • thomaz

        hmm the file being 300dpi or 72dpi or 1dpi, will not make photoshop to open it slower or faster.. file size(in kb) is the same regardless of dpi! image quality is also the same regardless of dpi..

        So i think that #4 is not a “web design mistake” because it really doesn’t matter if the mock is 1dpi, 100dpi or 10000dpi

  • sue

    Maybe someone’s already commented on this, I regarding #3 I also find that graphic designers are creating taller and taller headers/Flash areas, like 300 px high because they have these humongous screens. And to comment on the person who suggested an article on why coders shouldn’t design, yeah most coders know better than trying to design. But graphic designers think they know everything when clearly they don’t. And for the record, I’m a designer and coder who has learned the fine balance!

  • McCoder

    1. The client and the designer spend three weeks meticulously tweaking colors, pixels, swapping graphics, and finally turn it over to me at 5:30 PM on Friday. “We’re ready to go on Monday morning, right? Oh, and we also want people to be able to post comments and upload videos.”

    2. When the client / designer says “Should be easy.”

    3. The design has colored gradient drop shadows on all elements. The drop shadows span regions, each of which has a different patterned gradient for a background.

    4. Form elements are in the center line of two different regions, each of which has a different patterned gradient for a background.

    5. The general attitude of, “It looks fine in Photoshop.”

    6. The general attitude of, “A web site is 99.999% design and afterwards whatever else you need to do.” I think that a client says, “I need a web designer”, and the designer says, “Oh, that’s me!” and think that all he needs after that is someone to “publish” his design. “Should be easy!”

  • Phanyxx

    Many of the items in this list are very elementary. If you’re working with ‘graphic designers’ that are mocking up a website in 300dpi or are unsure what a font stack is, then I’m not sure what type of projects you’ve been working on.

    • thomaz

      there are no problems with 300dpi or 1dpi mockups, dpi doesn’t matter on screen! I could make a 100000dpi mockup, it would make no difference and still display fine.

  • Jo

    This is a good post, but would be even better if there was further detail provided for novice designers to remedy these problems instead of just ranting about them. I even read through all the comments and I think I only saw one that offered a helpful solution.

  • Anonymous

    The #1 mistake for me ist when I hear from a designer “I don’t like it, let’s try it that way.”

    Newsflash: It doesn’t matter that much if you like it, nor if the client or I like it. What matters depends on what has to be achieved with the site, usually it is if the clients of the client likes it and perform the desired activities on the site!

  • http://www.madmacreations.com TMacFarlane

    Yano? The biggest mistake is when a huge corporate powerhouse like Adobe markets its products with the express message: designers don’t need to dirty their hands with coding. Other institutions and corporate entities have to just throw up their hands and shrug.

    The next iteration of their Creative Suite is being touted with an even stronger message. As much as we grouse about it, this mind-set is becoming even more entrenched, and those of us who disagree are being relegated to guerillas.

  • McMarkup
  • Loige

    Great article!
    Really good for inexperienced web designers but also a “good reminder” for experienced ones!
    Tnx for sharing ;)

  • scott

    One I see all the time — not figuring validation error messages into the design.

  • Jeremy Carlson

    I find it funny at some of the comments on here about #4. thomaz above actually seems to get it. DPI doesn’t matter 1 freakin’ bit in web design. Go do a test: Take an image at whatever size you want, say 400×400, save it at 300dpi, and then save it at 72dpi. Nothing changes as long as the 400×400 size remains the same.

    I can’t stress this enough. Its the file size and size of the image that counts. DPI doesn’t change anything for the web.

    • http://www.optimalworks.net/ Craig Buckler

      In my experience, the worst problems are caused by a designer using Illustrator or another vector-based app which can create sub-pixel graphics.

  • andi*pandi

    I thougth the “fancy fonts need to be graphics” issue is becoming somewhat moot with css font techniques.

    • http://www.optimalworks.net/ Craig Buckler

      CSS3 (and SVG) allows a lot of control, such as custom fonts, drop-shadows and gradients, but they certainly don’t cater for the infinite variety of options a designer can imagine.

  • Melissa

    How can you be a web designer without knowing HTML or CSS? Wouldn’t that make you a graphic designer? If you aren’t designing the actual web page, code and all, you’re just making graphics.

    as someone who can do both, that irks me.

  • Jasmyn

    I am pleasantly surprised by this post. It’s definitely not the “What Not to Do for Dummies” list that blogs usually post. Thanks for putting together a thoughtful, descriptive post for people who are actually looking to grow as designers, not just continue to hear/read the same ol’ things over and over.

  • Joe

    Wireframes!

  • http://www.madmacreations.com TMacFarlane

    OK Then!

    Here’s hoping that this is the very last word on this very long thread. It certainly shut my mouth on the subject!

    Matthew Richmond, executive creative director and director at the Chopping Block design studio did a presentation for the HOW Design Conference called “Web Design Concepts for Non-Web Designers”:

    http://choppingblock.com/presentations/201006_HOW_WebDesign/#slide1

  • http://webdesignbysteve.com stevestuff

    #11) Making a website with images only, with all the text embedded. I had to do a re-design of one of these, & use the original text.

  • http://www.myspace.com/pas_non pas_non

    resizing images in Dreamweaver rather than Photoshop! I love waiting 1 full minute for a tiny image to download, then right clicking and viewing it in it’s original full-screen glory! lol.

  • Clarissa

    I hate it when people design sites using images that contain text rather than text itself. I’ve had to clean up the messes of many “web designers” who actually have these jobs when I’m just a freelancer seeking full-time employment.
    If they can get hired pulling stunts like that, the people hiring them need to be a little more selective.

  • johan

    I So hate when so called webdesigns with no fundamental understanding of the web delivers the clients customer logos inside a table in a microsoft word document.