Have every post delivered to your inbox and get access to hundreds of useful design freebies.
As many of you may have seen we’ve really been putting a lot of effort into expanding PSDFAN recently. We’ve been publishing more content than ever, including some really high quality tutorials and articles. We recently got featured on Adobe’s official Photoshop Facebook page, and our traffic has generally been growing and growing. Our popular 30 minute redesigns series is nearing it’s 50th week, and next week we’ll be publishing our 100th Texture Thursday!
Rather than just sit back and enjoy all this progress, I’m really keen to provide as much quality content as we can. That’s why today I’d like to introduce a new weekly post series – Thursday Theory! Whilst roundups and inspiration posts will always be popular, I feel they’ve really overtaken more theoretical, practical articles within the community. Very few blogs take the time to give in depth analysis of prevalent design issues any more, meaning that whilst many readers are ‘consuming’, very few are actually learning more about good design. I really hope that this new weekly series will encourage some discussions amongst our great community, and that you’ll get involved and share your voice!
Today, to kick things off, we’ll be looking at common mistakes that people make when it comes to designing their own websites.
This post was inspired by our hugely popular 30 minute redesign series, which apart from being a lot of fun, has really highlighted some common issues in modern design for me. In this article I’ll be looking at some of the most common issues I’ve seen during these weeks redesigning, and teaching you how to avoid them!
There should be a feeling of continuity and order amongst your websites visual aspects. This means that colors should compliment each other, and fonts should be limited to a few choices. Too much variety means your design will likely fall down by overwhelming the viewer, and feel disorganized and random. Just take a look at the examples below and how adding some continuity can really bring a design together:
Capitol Church of God really lacked continuity. The original site used a variety of fonts and styling, which really made the site feel random. The range of colors is far too extensive, and even the photos used don’t seem to match up that well. Even the content areas don’t appear to fit into any kind of grid system, as content boxes don’t align with each other.
For the redesign I reduced the color palette to a few complimentary colors. The typography is far more cohesive, and the content lines up much better.
You want your viewer to see your most important content straight away, as this is what should be drawing them into your site. If the content is pushed down to the bottom of the browser screen, or worse – the user is forced to scroll to view it, then you’re simply cutting of potential readers.
Remember – it is not your visitors job to look for your content, it should be presented to them. Why would they spend time scrolling or hunting for content when they likely have dozens of other websites they could be reading?
The adverts in the header of Dan’s Cartoons were pushing down their daily cartoon, which given the nature of their website is their most crucial content. The cartoon seems to be bottom of the visual hierarchy in the original design, being pushed below welcome paragraph, logo, text, subscription options and navigation.
In my redesign I tried to reduce the amount of content above the featured cartoon, thus bringing it up the layout and reducing scrolling. I also made the cartoon more prominent by giving it an attractive border and browsing buttons.
This is one of the most off-putting things you can do for your visitors, yet it’s something I see again and again! The logic is that your content is important, and therefore you want to place as much as it as possible onto your homepage, so that people read it.
The reality is that by doing this, your homepage appears cluttered, disorganized and worst of all overwhelming to your readers. Rather than drawing them further into your website and making them feel comfortable, you’re scaring them off by bombarding them with information.
Austin Luker’s portfolio used to just be a homepage full of text. He was trying to provide every bit of information he could, and put it on his homepage. To make matters worse, due to the single column layout the lines of text are incredibly wide. Generally you don’t want your paragraphs of text to span across your entire layout, as this is simply too large an area of text to hold your visitors attention.
My redesign tried to show how you don’t always need to use a huge amount of content to portray a point. In this example the idea was ‘a picture is worth a thousand words’. By replacing the huge blocks of text with concise bullet points, and use featured photographs, Austin can showcase his talent instantly, rather than expect visitors to browse down lots of textual content.
Even if your homepage content looks great, you should be prompting your visitors to delve further into your website. It’s simply not good enough to hope that they might explore your navigation. You know what I’m talking about – calls to action!
Calls to action can be incredibly powerful, as you are directly encouraging readers to take action, rather than leaving it entirely up to them. Calls to action can come in many forms, but often the most understated examples, such as ‘learn more’ buttons, special offers, or ‘meet our team’ banners can be hugely effective.
The crucial theory here, is that as users are drawn deeper into your site, it will be harder for them to leave. They will feel somewhat committed to your website, and with every page they read, they gain trust, security and familiarity.
Cachaca Wruck had literally nothing drawing users further into their website apart from their menu. The only homepage content was an image that didn’t really tell the visitor anything about what the website did.
In an effort to draw users further into the site I integrated a call-to-action button, and an engaging paragraph to encourage users to want to learn more.
The navigational menu is one of the most important aspects of a successful website. If visitors can’t easily browse your website without a second thought then you will never be successful!
D Lists had one of the strangest menus I’ve worked with. The only visible menu link was ‘About’ and it was positioned unconventionally in the top right of the page. Furthermore the typography made it look like a headline, or even part of the header design, rather than a link.
In my redesign I replaced the abstract navigational with a more conventional menu bar, including an active tab to help visitors know where they are within the site. The clear menu bar is far easier to understand than the randomly positioned ‘About’ link.
Even if your layout is strong, and you’ve followed all of the guidelines above, if there is nothing engaging about your design, it won’t really interest people. You can do everything right, but visitors will turn off if you don’t visually engage them!
Climb Addict had some clear layout issues, but for me the main thing I wanted to do was to make the site more interesting. Aside from the slightly grungy logo design, the layout could really apply to any business. When you’re designing your layout you want everything to relate to the subject matter or business model. What would you like your colors to reflect – corporate business, soft and girly, fun and trendy? Everything from colors to typography should be relevant to your websites subject matter.
In my redesign I broke away from the boxy design of the original, and integrated some great rocky textures that instantly related to the rock climbing theme of the site. Combined with some funky typography and additional design quirks and this is one visually stimulating layout!
This whole point of these Thursday Theory posts is to encourage discussion and let you have your say on pressing design issues.
Do you make any of the common mistakes above, and what do you think about the issues raised? Please leave a comment below.
Tom is the founder of PSDFAN. He loves writing tutorials, learning more about design and interacting with the community. On a more interesting note he can also play guitar hero drunk with his teeth.
Do you know the basic tools in Photoshop but feel that your work is still looking average? Join our creative community at FanExtra and get the direction you need to take your work to the next level.