7 web design mistakes to avoid in Photoshop

Barin Cristian Doru

You’ve landed a nice web design project and now it’s crunch time. It’s time to work long, time to work hard, and time to deliver the goods. But before you hand over the finished product, make sure you avoid these 7 mistakes in Photoshop.

1. Avoid designs with jagged pixels (use anti-aliasing for text)

anti-aliasing

Anti-aliasing makes your pixels smooth and crisp. Not using this basic Photoshop feature for your text layers is pure heresy, and it makes your design look like it was made in 2002 due to all the jagged pixels. To solve this issue simply access the Character panel from ‘Window’, then choose an option depending on your needs. I find “Smooth” works best in most situations.

Tip: Make sure all your text layers are set to the same anti-aliasing style. For example, don’t set some on crisp, some on sharp and a few on strong — consistency is key.

2. Avoid a messy workflow (use folders to organize your layers)

folders

If you break this fundamental rule, you’re going to start hating everyone… included yourself. First of all, think of the developer who needs to sort through your layers to find the ones he needs. Then, consider how you might want to reuse some elements (header, footer, etc.) in another design. You’re going to have a major headache finding them, so save yourself the trouble and organize everything in properly-labeled folders.

Tip: Things like hover states and hidden drop-down menus can be color-coded so you don’t delete them by accident. It also helps the developer find them. To do that, simply right-click above the eye symbol next to your folder in the layers panel and choose one of the colors.

color-code

3. Avoid forgetting hover/down states (add it to buttons & menus)

hover

Hover/down states is one of the most overlooked things in web design. Since this isn’t something clients actively request, most web designers simply forget to include them. It’s not time-consuming or very demanding, yet people simply overlook them because they’re trying to get the project completed as soon as possible. Please take a few extra minutes and include these additional states in your final .psd. Attention to detail can set you apart from the competition.

Tip: You can quickly create hover/down states by using a Brightness/Contrast adjustment layer.

4. Avoid big file sizes (rasterize all smart objects)

smart

Smart objects are absolutely amazing, but they also eat up quite a lot of space. Don’t be surprised to see web design .psd files that are well over 200 mb because they’re jam packed with smart objects. While they may be useful in the design stage, they aren’t particularly helpful to anyone once the client signs off. Of course there are exceptions, yet in most cases it’s far better to rasterize your smart objects. You can easily reduce the .psd file size up to 90%!

Tip: Easily identify your smart objects by using “filter for smart object” tool in the top part of the layers panel (feature available in Photoshop CC).

5. Avoid only using common fonts (use modern fonts too)

font

Arial has its place in web design and nobody is suggesting you should take it off your list. But with many great choices like Google Webfonts, Adobe Typekit, FontSquirrel and more, you’d be a fool not to spice up your typography game. Plus, most of these are lightweight, free, and can be implemented by using only a few lines of code, so it’s a shame not to use them.

Tip: Make sure to explore all the weights a font family has to offer — using them wisely will surely enhance your design.

6. Avoid cramming elements together (create more whitespace)

cluttered-website

The reason I love designing websites in Photoshop is that I have full control over everything — like how much whitespace and breathing room I’d like to keep between elements. Even if your client has odd requests, like fitting 90% of the site above the oh-so-dead fold, you still have complete control over the outcome. So, use adequate space between your elements and it will make your design look much better.

Tip: If the end design looks amazing, the client won’t have much to say about the fold or anything else. But make sure you’re prepared to back up your choices with sound explanations.

7. Avoid forms that aren’t user-friendly (take time designing them)

forms

Forms aren’t all that exciting if you’re not into UI design, but for clients a great-looking field can mean the difference between a lead and a missed opportunity. Take the time to properly design your forms, from top to bottom, and include hints, error and success messages. This will surely score you high points with your clients.

Tip: Make sure to use Shift while arranging your fields so you keep spacing consistent. This sets your distances in increments of 10px, so you end up with a great looking forms.

What other mistakes do web designers do when using Photoshop?

The author

Barin Cristian Doru
Barin Cristian Doru

Barin Cristian Doru aka 'thislooksgreat' is an experienced web designer and proud member of the 99designs community: http://99designs.com/people/thislooksgreat Besides creating awesome website designs, he is also an entrepreneur, an Android App Developer and a content creator. His work ranges from freebie PSD files to small tips & tricks in Photoshop, all the way to a premium 16 hour long course on how to succeed on 99designs.

Related articles

The fundamentals of responsive website design

The fundamentals of responsive website design

The days of designing a website for a single desktop screen are well and truly over. Technology and the expansion of mobile websites are pushing web designers to re-think how their work is displayed across various devices. Think about it: how much browsing do you do every day on your phone vs. your desktop? Enter:…

The new Google Fonts is a win for designers

The new Google Fonts is a win for designers

Google launched Google Fonts in 2010 to provide web fonts free of charge. Over the next six years it grew considerably, becoming very popular with web designers—for the obvious reason of affordability. The original website was definitely what the startup world would call an MVP: minimal viable product. It got the job done, but it…

Current Design Contests

Designers, check out these contests so you can start building your career.
0%