Adobe Creative Cloud

Design

June 23, 2016 /

9 Most Common Mistakes of Beginner Web Designers + How to Avoid Them

Web design is one of those careers where knowing what *not to* do is often more valuable than knowing what *to* do.

Okay, I might be exaggerating a bit, but what I’m trying to say is that being at the start of your adventure with web design is full of unexpected traps, seemingly good ideas just waiting to bite you back, as well as client requirements that are very much “there,” but just not spoken out loud.

So let’s dive into the most common mistakes of beginner web designers and try to find a way to avoid them:

1. Making mobile an afterthought

This may surprise you as the #1 mistake on the list, but there’s a good reason for it.

As I’m writing this, the mobile web has taken over pretty much entirely. These days, more than 80 percent of people navigating the web own a smartphone, and the number isn’t likely to go down anytime soon.

680 Cold 100%

Even more interestingly, in some parts of the world, more people have access to a smartphone than to a working toilet (no joke).

What that means to a designer is that we can no longer treat mobile as an afterthought – as something we optimize for later on, once the bulk of the design work has already been done. At that point, it’s too late.

An alternative approach – a better approach – is to go mobile first.

Design for mobile devices first. Go that route because it’s always easier to scale up from there (from mobile to desktop) than the other way around. Besides, you can’t really disregard 80 percent of your potential visitors and still call your design good.

2. Not giving business goals sufficient attention

Web design and business goals have this love-hate relationship between them.

On the one hand, every web designer wants to make whatever project they’re working on beautiful and impressive. But on the other, at the end of the day, the beautifulness of a website has little to do with its quality, or better yet its ability to attract clients or customers and achieve certain business goals.

A common trap for beginner web designers is focusing too much on the visual side of things, and too little on the business aspect of the website. As a result, we’re ending up with a site that might look good in a portfolio, but isn’t suitable for anything else.

How to avoid that? Start with the business goals first. Namely:

  • What is it that you (or your client) want to achieve with/through the site?
  • What is the #1 most important goal?
  • What is the #1 most valuable tool/vehicle to make that goal possible?
  • Take that goal and build everything else around it – treat it as an oracle when deciding whether or not a given design choice is going to be good for the final website design.

3. Replicating the same style over and over again

Everyone has their own signature style. For the most part, it’s a good thing, makes you recognizable. But it’s also a short path to making your every project look alike, which (a) probably neglects specific business goals behind each site, and (b) inhibits your growth as a web designer, as you’re constantly using the same style or design choices.

One way out of this is to get out of your comfort zone and always try something new in every next thing that you’re working on.

Now, I don’t necessarily mean doing everything differently compared to your previous project, but even if you integrate just one or two completely new elements then it’s a step in the right direction.

ghost

4. Making typography an afterthought

“Let’s just put Arial here.” – sound like you?

Typography is one of the easiest things to neglect when building a new website design. We often get routinely caught up working on countless visual elements of our designs, up to a point where the typography – the actual content presentation – is just delegated to that one last thing we “need to” set before calling it a day.

This is bad. Typography is crucial for content presentation, and it’s one of the few – albeit surprising – design tools that convey the site’s brand more than anything else.

On the one hand, yes, the logo, the header graphics, and etc. do much for branding, but on the other, it’s way too easy to chuck all that away with poor typography.

A good way to avoid that is to focus on the content that’s going to appear on the website and build the design around it, instead of doing it the other way around – starting with some arbitrary design and making the content “fit” afterwards.

To make your job easier, you can try experimenting with tested font pairings to get an overall feel of the emotion that you want to convey, and then find the perfect fonts and their combinations with tools like Typekit, for example. Using professional fonts almost always gives you better results than the free ones that come with your system.

Typekit

This brings me to:

5. Using stock copy

Copy is very often one of the missing elements during a web design project. Depending on the client you’re working with, you might be forced to do just with some general guidelines, branding identity details, goals for the site, and the overall direction that the client wants you to take. But when it comes to the actual text that’s going to appear on the site, there might be nothing.

And that’s a big problem. Because once you hand over the project, you might get contacted by the client and hear that the new copy just doesn’t fit … that there’s too much copy for one area of the page, too much blank space in the other, and so on.

For that reason, getting the majority of the copy done prior to finishing up the design, or at least having the scaffolding for the copy, is a much better situation to be in. Having a good idea of what the final copy is going to look like improves your chances of delivering a great design that’s in tune with all the requirements and the client’s overall vision.

So how to get this done? Well, copy is something that’s unfortunately (or fortunately?) not all up to you, so you need to work with the client closely and make sure that they understand the limitations of designing without the copy. Explain to them that the copy is an integral part of the design and if you don’t have it at hand, you won’t be able to deliver your best work.

lorem

6. Not optimizing visuals

Images routinely account for the majority of any website’s consumed bandwidth. It’s not text, not videos (which are usually served from external video sites), not user generated content, but images.

Different sources estimate that images take up anything from 60-90 percent of a site’s bandwidth.

For a designer, at first, this might not spell trouble. After all, we want our clients to get the best visuals we can produce and to experience them at their full glory. But that has a downside. Mainly, an uncompressed image can take up 100-500 percent more disk space than an optimized one.

Long story short, unoptimized images are more expensive to maintain from a hosting-cost point of view. So to make things more affordable for your clients on a month-to-month basis, you need to make your images smaller.

Take advantage of Photoshop’s image compression settings, and save each image with a compression level that makes the image look great, but at the same time doesn’t make it too bloated in disk size.

7. Not sending over every attachment that’s part of the project

This is a mistake that beginner web designers often make.

The thing is that every web design project consists of tens if not hundreds of elements – different files. Those elements, when put together, make up the final thing.

Now, depending on the final “production” state of the project, not all of those individual elements might be needed. For instance, a header graphic in its entirety can sometimes work as is. But other times, each individual element might have to be re-processed individually for one reason or the other.

So the problem comes up if the designer sends over the project in some completed state, but without also delivering each of the small elements individually. And even more problems arise if, when asked, the designer admits that they don’t even have those individual elements anymore because they “erase the sources after finishing up a project,” or something.

There are two things you can do to avoid problems like that:

  • As you’re working on a project, save every little element separately, and then send those elements over along with the final product. You just never know if you’re the last designer working on the job. Someone else might then come after you and need all those elements.
  • Keep a record of every completed project for at least 24 months on your local hard drive. Really, disk space is not that expensive. Plus, you can save a client’s life (and earn additional points) in case anything bad happens to their copy of your work.

8. Using too much whitespace remover

The whitespace remover is one of the all-time favorite design tools out there.

So what you do is just take a can of the remover and spray some of it onto your design. After a minute, you’ll see the whitespace vanishing, things tightening up, and the whole design being more dense in general.

A whitespace remover can looks somewhat like WD-40, by the way. Look in your nearest Home Depot…

Okay, just kidding.

But the concept of whitespace removing indeed is all-too-familiar among beginner web designers. At first, it feels right to use less whitespace, and instead populate the design with “things that matter” … buttons, text, icons, menus, sidebars, whatever. The more there is, the more pleased the client will be. After all, who would pay for more whitespace.

On the contrary, though. Whitespace is, in fact, one of the most valuable design tools out there. It’s through whitespace how you make the important stuff more visible. We talked about it in one of the previous posts (check it out for the how-to). So for now, let me just say this: chuck your trusty ol’ can of whitespace remover, and start feeling more confident about using more whitespace. A lot more whitespace!

Here’s a do-this example by Field Notes (courtesy of ecomm.design):

field-notes

(Please notice the amount of whitespace all through that page.)

9. No contrast

Let’s save ourselves the Wikipedia definition, and just say that contrast is the #1 tool to use in order to make the contents of any given design more visible.

Therefore, the mistake that many beginner web designers make is going for too much of an “artsy” feel and exchanging contrast for what they consider smooth visual appearance.

I mean, when everything is of similar color then, at first sight, it seems to fit more, and deliver a less confusing overall experience. But this isn’t true. We need contrast to convey which elements of the design are important, and where the visitor should focus most of their attention.

It’s through good contrast that we make text readable, links clear, and buttons obvious. At the end of the day, we want the design to be somewhat predictable – in a way that everyone knows where to click and how to interact with the individual elements of the design.

Simply speaking, a confused visitor is as good as gone.

So just keep in mind that high contrast is your friend, not foe. And additionally, help yourself to tools like our own Adobe Color CC library to find good colors and color combinations.

adobe-color

Conclusion

That’s it for this list, but we could probably continue and go high above just 9 common mistakes. Feel free to comment and let us know what else is there. Is there anything particularly embarrassing that you used to do back in the day?