Monday, November 2, 2015

3 Ways to Prevent Your Web Design from Becoming “Generic”

From time to time, we might find ourselves overworked. Perhaps there’s one month (or several) in the year where clients are snowballing left, right and center. You decide to cut corners and use Font Awesome instead of designing your own icon set, or researching some other kind of CSS-based icon toolkit.

And that’s how it starts. Before you know it, you’re automating your design choices without even so much as a second thought.

Let's explore 3 ways that we can break out of that awful slump.

Generic Web Design - Call to action button

1. Ditch Font Awesome and Try Other Icon Styles

Right, let me start by saying that there is actually nothing wrong with Font Awesome – I use it quite often. Not every single element on the webpage needs to be constantly clamouring for attention. Font Awesome is subtle, and sometimes all the user needs is a subtle hint.

However, sometimes we need to use icons on a much larger scale – often side-by-side with blocks of text as a means of adding further context while explaining things to the user – and this is where we cross the line from being subtlely understated to, unfortunately, generic.

Make no mistake: this is not a case of being flashy for flashy's sake. Icons are an ideal way of establishing a strong, memorable brand and they’re an essential factor in creating a style guide for any serious business.

As a quick rule of thumb: if your first choice of iconography is Font Awesome and you’re not researching any other icon styles, then your visual aesthetic has very likely become generic.

Font Awesome

Design marketplaces such as Creative Market and UI8 are crawling with endless choices of fresh icon sets that are well made and very reasonably priced.

So, go and take a look!

2. Don’t Choose Flat Design Just Because Everybody Else Is

A lot can be said about flat design, both good and bad, and the same applies to Google's Material Design as well. I’ll say the same thing that I said regarding Photoshop and Sketch - it’s not about which is the better tool – it’s about which is better suited to the task at hand. Any competent designer should be able to compare both and decide which is most suitable (if any) on a technical level.

[author_more]

[/author_more]

Not only that, but both styles come with their own set of suggested fonts and colours, with Material Design being a lot more specific than the general principles of flat design.

It’s also important to remember that you don’t have to adopt the entire set of principles laid out by these styles of design, and instead I would suggest using them as a breeding ground for your own spawn of design aesthetic.

Colors

3. Fullscreen Headers Are a Big Risk

Having a huge, fullscreen header can make a bold statement – there’s no denying that – but it’s a wasted opportunity if you’re using the same old fonts, the same old “startup stocks” and the same old rounded corner (or “ghost”) buttons. It says nothing about you or your business and causes a delay in the user reading the awesome incentives of converting to your service.

[caption id="attachment_118285" align="aligncenter" width="798"]Big headers have been 'on trend' for a long time. Big headers have been 'on trend' for a long time.[/caption]

Consider these three alternatives instead:

  1. Reduce the big header by 10/20/30% to let the user know that there’s more to be read. If you need an attention-seeking “down arrow” to suggest that there’s more content, you’re probably doing it wrong. Websites shouldn’t need to come with a user manual.
  2. It’s highly unlikely that you’ll convert a user within a few seconds, but they will make a decision to keep reading or turn back within that critical time. Instead, use creative typography and alternative layouts to create a smart “mini-advert”.

Provoking a reaction is what will motivate the user to dedicate their valued time to learning more about what you’re selling. Adding a conversion button is plain common sense, but making it the sole focus of your entire above-the-fold content is aimless. It's like asking for the credit card of someone who is simply looking in your shop window. The timing is wrong

  1. Eliminate it altogether. If you can explain your website in a single sentence (or two), and offer three smashing reasons to buy it, then include a big conversion button and call it a day, then why bother with a big header?

Simply include a thorough FAQ and an easy way for the user to contact you, otherwise you may run the risk of overselling it or boring the user completely. For bigger commitments, such as expensive items or long-term subscriptions, this wouldn’t be suitable, but if you’re selling something small or inexpensive, there’s no need to make the website longer than it needs to be.

Big Hero Headers

Continue reading %3 Ways to Prevent Your Web Design from Becoming “Generic”%


by Daniel Schwarz via SitePoint

No comments:

Post a Comment