Inspect Elementhttp://inspectelement.com
Strategies for Web DesignersWed, 25 Feb 2015 09:24:10 +0000en-UShourly1http://wordpress.org/?v=4.0.1The Truth about Web Design Trendshttp://feedproxy.google.com/~r/InspectElement/~3/LF1cLrLOsao/
http://inspectelement.com/articles/web-design-trends-reality/#commentsWed, 25 Feb 2015 09:23:09 +0000http://inspectelement.com/?p=10228This is a loving rant, designed to help you rather than just a way to let off steam, although it’s good for that as well! You see, I have a problem with design trends. They’re the biggest thing web designers waste time on.

I tweeted as much a little while ago but now I want to go into more depth of the reasons why.

Unfortunately it seems like the web design industry will always be obsessed with trends. Probably the biggest thing designers waste time on.

Designers love talking about trends but it’s almost completely pointless.

When was the last time thinking about trends has helped you produce your best work? Many sites look very similar these days, lacking their own identity, which is a real shame and it means we aren’t producing our best work for those who need it if we’re just copying all the trends out there. Can you imagine if the Coca-Cola logo looked generic, or the Nike swoosh wasn’t unique?

In a previous article, I highlighted a company who still use a skeuomorphic design, and it looks great. More importantly, they aren’t failing because they haven’t followed the latest trends. If anything it works very well for them and makes them stand out more. The important thing is they make a great product and have marketed it in an easy to understand way and the design assists in doing just that.

Change is Inevitable

One thing will never change in this industry is that web design will always change. We know web design changes because it always has done and it won’t stop going forward. It’s one of the major reasons we love design. With this ever-changing landscape, it’s easy to be enchanted by the latest trends but we’ve gone too far. Trends are a reflection of our ever-changing landscape but it’s hard to extract any real value out of them.

Even when trends change, helping our clients and bosses deliver value to their customers remains constant. It doesn’t matter if in 50 years we’re designing for holographic space interfaces, we still have to help deliver value to their customers, build trust and create emotional connections. That is the core of what we do.

Ignore Useless Predicions

Let’s look at some trend predictions for this year found in recent articles and I’ll show you why you shouldn’t be paying any attention to them at all. Remember, these are real predictions. I’m guessing they’ve been published with the intention of helping designers but with only a little thought, you can see they’re a complete waste of time.

During the wiriting of this article, this tweet popped up in my Twitter timeline:

“Are Super Gradients the next big web design trend?”

I can’t believe what I saw. Who cares?! Seriously. This is not important! Sure, gradients are interesting and something you can use but it doesn’t matter if they are a trend or not. There is nothing useful for you here. How is a gradient going to help a business get more customers or communicate with their customers more effectively or anything useful beyond just aesthetics?

More gibberish I found in my research: “Responsive design calls for a ‘lean back’ content that will improve more substantive content.” Of course! Wait, what? What a gem, as is this: “A prominent tag line and a ghost button along with an elegant image is the winning recipe for a unique website.” This person must have been looking at a different internet. Both quotes were taken from the same article which, confusingly, recieved over 14,000 views.

“Absence of large header background images”

Lately, big background images have been in fashion. I’m guilty of doing the same on the Inspect Element homepage but at least I’ve injected some character with colour and I didn’t do it to follow trends. It works well for what I want it to do which is for designers to sign up to my newsletter so I can help them by sending my articles straight to them every week. A background image gives the contrast I need without resorting to a plain background which wouldn’t be as interesting.

Now we’re being recommended that an absence of these background images is a trend. Why? If a big background image works for want you want to achieve, USE ONE! If it doesn’t, then don’t. Don’t just copy others because they’re doing it or because someone has identified it as a trend. Do it for your own reasons and ones that make sense to what you’re creating.

“Fix width centered site layout”

Is this really the kind of advice that will make your work better? There’s nothing wrong with a fixed width centered layout but this isn’t a trend. Are you going to condense a complex web app into a single column? Probably not. There are times when it will be appropriate and times when it won’t be. You know when that will be regardless of others telling you.

“Professional high quality custom photography”

We know stock imagery mostly looks bad and generic. Why should this be just a trend and not the way we try to always handle photography if possible? You should always encourage your clients to source original photos and imagery.

“Better Typography”

Typography has been improving on the web for years and as more and more designers improve, typography is of course also going to get better. I’d be a bit worried if it didn’t but I don’t understand why “better typography” should suddenly be a trend this year. Good designers know they need to always improve typography just like any other aspect of their work.

“Ghost Buttons”

Ghost buttons are basically buttons that allow content to show through underneath, with only the text and a border colour visible. I’ve seen this in a few articles list posts and it’s nothing more than a visual design choice. They can look good but probably aren’t the best choice for all situations, especially as content can obscure the button text. I’ve seen it happen and it isn’t pretty.

It’s not enough to say they’re a trend and be done with it. Anyone with a blog can do that. It’s much more useful to teach how to use them. For example, they can be used effectively as secondary buttons to provide visual hierarchy when placed alongside a solid primary call-to-action, even without the need for a separate colour. Much more useful than creating a list of pages using them.

Other gems include “vibrant design”, “semi-flat design”, “the rise of material design” and “no more boxes”. None of those will help you make better websites and don’t get me started on designers’ obsession with material design. I hope it improves and evolves over time, like design should, because at the moment it seems a little uninspiring. Credit to Google for focusing more on design though.

Explain Every Design Decision You Make

You’re in the position of explaining your design to your client or boss and they ask you why you’ve chosen a particular style or made a certain decision. Is your answer going to be “because everyone else is doing it”? I hope not. You should be able to explain every design decision you make with substantial reasons behind them.

Focus on Useful Trends

It’s been painful researching this article because the vast majority of “advice” out there on trends is useless crap and as you know, here on Inspect Element I want to truly help you get more from design, not just create a top 10 list, calling them “crucial”, “essential” or “important” just to get more clicks.

I get why people want to know about trends as everyone would love to be able to look into the future somehow, so we can have a better design life and create better work. It’s also fun to predict things but don’t get bogged down with those “17 Super Ultra Mega Ultimate Crucial 2015 Web Design Trends” list posts and instead focus on the needs of your projects first and foremost.

However, there is value in keeping up with the latest trends in the sense you don’t want to look out of touch with the world around you. Familiarity has its advantages when it comes to usability but style needs to be more unique.

Back in 2010, I called for simplicity to be the trend of the year. The recent “trend” of flat design has helped with that somewhat, as visual design has been stripped down to only the elements that are necessary, although that can be to the detriment of character and soul of design. I meant simplicity in terms of usability when I wrote that article 5 years ago. That’s a useful trend I’m fully behind.

Trends are just a distraction from the real value of web design. They aren’t ever something that can deliver real value on their own, so let’s focus more on the value of design and less on trends.

]]>http://inspectelement.com/articles/web-design-trends-reality/feed/0http://inspectelement.com/articles/web-design-trends-reality/Design to Delighthttp://feedproxy.google.com/~r/InspectElement/~3/u6Fcid2oZO0/
http://inspectelement.com/articles/design-to-delight/#commentsWed, 18 Feb 2015 10:46:11 +0000http://inspectelement.com/?p=10214What do people want from web designers? Generally, help to sell more of their product or service through a website. Good business owners know they need to create meaningful relationships with their customers and to help do this for them, we have to assist in delivering value to their customers, build trust and create an emotional connection. One of the most effective ways of achieving this is designing to delight.

Delight creates an emotional connection between the business and their customers. Those who have an emotional connection will tell other people about their experience. Simply put, designing to delight promotes word of mouth and word of mouth is one of the most effective types of promotion. Here’s why:

You know you’re helping people: If they’re sharing a product or service you’ve helped design, it’s because it has helped them or they’ve had a great experience. Why else would they share it?

Others trust them more: Trust is built in other people as a result of this sharing. If you know someone or trust them and they share something with you, you’re more likely to trust what they like and use.

It doesn’t cost you anything: Well, the work you put into designing to delight might cost you something but the marketing push from your own customers doesn’t.

Adding Character to a Service to Delight

While my wife and I are travelling the world, we need a way of allowing us to pretend we’re still in the UK, so we can watch TV anywhere in the world. We’re UK citizens and we still pay for things like Netflix, so why shouldn’t we be allowed to watch it in New Zealand, Japan or anywhere else while we’re travelling?

We tried a few options. The first was a boring free Chrome extension that worked well for a while but became more unreliable over time until it completely stopped working. Then we tried Hotspot Shield which works fine but displays ads while you’re browsing, unless you pay but it looks and feels too corporate. Basically a bit dull. This led me on another search where I stumbled across an app called TunnelBear.

Already the name is intriguing and it turns out it has more character than of all similar apps combined! A bear pops its head out of a pipe, which looks similar to the ones found in Mario.

TunnelBear’s homepage

TunnelBear is also much easier to use than the others. The ultimate compliment is how much my wife loves it and she isn’t the type to install new software on her computer, and if you believe one of the reviews for the iPhone version, even pensioners can use it without any help.

They have a generous free plan but once my wife decided she liked them, she handed over her money immediately for the full service. They won because they delighted her. I’m also sharing our experience here with thousands of people because they designed to delight.

Oh and yes, they still use a skeuomorphic visual design. Remember that?! I think it looks great.

Even the pricing page is delightful

Maslow’s Hierarchy of Web Design

You’re probably familiar with Maslow’s Hierarchy of Need so it was interesting to come across a modified version in Aaron Walter’s book, Designing for Emotion:

Aaron Walter adapts Maslow’s Hierarchy of Needs to web design

It brilliantly illustrates a layer of design that is often neglected. As you can see, it’s labelled it as “missing” and generally that is true. Rightly so, we’re focused on functional, reliable and usable design but the pleasurable side isn’t something that gets as much attention. I would argue though you could probably split that into two, visual design and delight. We definitely focus on visual design, as we should, but delight is the often missed part.

That isn’t to say you should take the graphic literally. Visual design and delight aren’t something you layer on top, they’re key components of the design as a whole.

TunnelBear designed to delight, making all the difference

The pleasurable part (including visual design and delight) was missing in the apps in the example above, until we came across TunnelBear.

MailChimp

MailChimp sent me a free t-shirt just for being a customer. I can’t even remember why they gave it to me. They sent it just before I went away for a year so I haven’t even seen it yet but just the fact they were willing to do so made me a happier customer. Very few companies give away things like that for free, so when they do, it definitely stands out. I didn’t even think twice about sharing it with my followers.

Sent only my second ever email with @MailChimp last week and they are sending me a free t-shirt. How nice of them!

The t-shirt confirmation email I received included the above delightful animation. Even the text included in the email is delightful:

Your t-shirt has been lovingly packed and is on its way to you. Wear it like a hug from us to you.

Learn from the Best

In the monthly series here on Inspect Element called Learn from Great Design, I study the best and show you the best ways you can use design on the web. All the websites I’ve studied so far are set up to delight their customers; one important aspect of why they are the best.

Orangina delight their visitors with simple but fun interactions that match with the brand values of the company itself. You won’t find many better examples of web design delighting visitors through the brand itself.

An alternative way of thinking about how to design to delight is to find out where people have anxiety and try to help them, basically solve peoples’ problems.

Harry’s discovered men were not exactly happy with the prices the big razor companies were charging and decided to do something about it. I’ve long been cursing the price of razors and I bet many men (and probably women too) have been doing so for years too.

The Delight of Customisation

Another way to delight people is to help them customise an app or service to make it feel more personal. Take the Barclays mobile app for example.

Customising the Barclays mobile app

As you can see you can add your own photo in the header of the app. Pulling down to reload your accounts revealing the full image is a nice detail. The interesting clouds I captured over Lake Taupo in New Zealand can now be seen in my app. By the way, I instinctively wrote “my app” (without editing) because that’s almost what it has become.

Remarkably, Barclays also offer a way of customising your bank card with a photo of your own choosing too. We have a strong emotional relationship with our money, making banking one of the most personal services we use but it’s rare to see a bank actually make it feel personal.

You Have the Right to Delight

If there’s one thing you should add to your next project, it’s design to delight.

]]>http://inspectelement.com/articles/design-to-delight/feed/0http://inspectelement.com/articles/design-to-delight/Logo Design Case Study: The Introvert Travellerhttp://feedproxy.google.com/~r/InspectElement/~3/gYpqxjVvbzg/
http://inspectelement.com/tutorials/logo-design-case-study-the-introvert-traveller/#commentsWed, 11 Feb 2015 10:58:03 +0000http://inspectelement.com/?p=10201Designing logos isn’t a requirement of a web designer but if you can add it to your skills, you’re instantly more desirable for anyone who needs both a website and a logo. You can really add extra value to a client or project if it is something you can do, plus you get the added benefit controlling more of the design.

With that in mind, I thought it would be helpful to show you my logo design process.

My wife Sandra started a blog to document our round the world trip and at first she simply setup a wordpress.com account and started writing. It’s great to see her get started with something but the designer in me wasn’t happy. I wanted to design something for her, so I set about designing a logo for her, followed by designing her own blog.

Before I Started

The first thing I did when my wife wanted a logo for her blog, was to learn more by watching. I hadn’t designed a logo for maybe a year to two, so I decided to watch a video by one of the best logo designers out there. I’ve mentioned it here on Inspect Element before, but Aaron Draplin’s logo design challenge is incredible.

The video reminded me of the best way to start. Start with the foundation of knowing exactly who your client is and exactly what they need. Once you have that, have fun experimenting to find the best option and don’t worry about the initial design because you’ll build upon them as you experiment. There’s very little chance of freezing at the blank screen stage with creative block if you start this way.

I started the initial discussion with my wife at dinner which isn’t your typical client meeting place but we came up with a few ideas to try. Immediately, I wrote them down so we didn’t forget them.

Getting Started

The title of the Sandra’s blog really says all I needed to start with but I know she writes well so I wanted to express that quality in the logo. These are the initial starting points:

Introvert

Traveller

Elegance

That all I really needed to think about in order to start experimenting, as it already gave me a number of ideas. If you can clearly define what the brand is and who you are designing for, it will become much easier to narrow down your focus on ideas. In this case it was easy to start with but other logos may require more thinking at this stage.

What did require more thought, was the introvert aspect of the logo. Initially we struggled with something that could represent an introvert but I kept experimenting to let the ideas evolve.

The First Idea

My first idea was to have a tree with the an “I” cutout starting the word Introvert with Traveller underneath. In my mind I hadn’t thought about where the word The would go but I knew I could figure that out by experimenting.

Time to Experiment

I’m going to take you through the stages of experimenting that led to the final design so you can see how it evolved and to show you how to quickly validate your idea and evolve it into something you’ll love.

Stage 1

The draft version of the logo

This is just a draft version of what our logo could look like. Most designers will start this stage by sketching, which is great, but I’m terrible at drawing, so I tend to head straight into Illustrator.

As you can see it looks incomplete but it at this point I knew it had potential. This is what this stage is all about. Get something onto paper/screen as quick as possible to see if your idea will work. Generally you can tell almost immediately if it will work or not and this way, you won’t waste much time finding out.

The initial draft version used Georgia because I knew the “I” had nice serifs that would make it stand out amongst the tree to make it more noticeable that it was a letter. As I knew this, I didn’t have to spend time trying to find a font; I just briefly used Georgia. A nice serif font would also be suitable to capture the elegance my wife and I were looking for.

I’m just testing the validity of my idea. Sometimes the idea can look terrible once you actually see it and this way, I won’t have wasted much time if I know it isn’t a direction I want to pursue.

Pro tip: Get your rough idea(s) down not screen/paper as quick as possible to see if they are worth developing or not.

Stage 2

Looking much better with Kepler

Georgia isn’t a suitable choice for a logo, so it was time to dump it and find something more appropriate now that I have validated my idea. Thank you for your help Georgia, but please step aside.

My first step in looking for a font was to consult Typekit. I wanted to use a font that I could use on the web as following the logo design, I will be designing the blog itself.

Font selection is almost always an arduous process of trying a number of different ones before finding the ideal match but luckily I stumbled across Kepler almost immediately. Maybe I could have found an even better choice but then it would definitely turn into an arduous process. It would have been tough to find something better so Kepler it is.

Notice how I’m playing around with simple colour changes. It’s fine to do so throughout the actual creation of a logo. I like to experiment with colour at the same time as designing a logo in order to make some progress with that too.

Pro tip: When you’ve found something that works really well in a design, don’t get bogged down trying to find something better. You can always come back to it later if you have time.

Stage 3

What to do with “The”?

Now I have chosen the font and the overall layout of the logo in a good state, I could see something odd about it. The word “The” was drawing too much attention. It’s the most insignificant word in the logo, so it doesn’t need to be so big.

I noticed there was a nice little space where it could sit underneath the tree and above the word Introvert. Luckily I didn’t have to recreate the tree or find another one to achieve the same outcome as this one fit perfectly.

Right now, I could say I’m happy with it but it still lacks some personality. After, all this is for wife’s personal blog. I’ll start experiment with that in the next stage.

On top of that, the tree now looks a little empty. It doesn’t look bad but it certainly seems like the spot where I can experiment with adding some personality in the next stage.

Pro tip: At the first stage you think you’re “done” with a design, push on for a stage or two more to turn a good design into a great design.

Stage 4

Experimenting to add some personality

The first thing that came to mind was to place a bird in the tree so I started with a humming bird because of its cute and friendly look. It works well as you can see but I didn’t want to stop there because I’ve only tried one bird. Maybe there’s a more appropriate one.

The idea behind using a bird is to represent travelling. As we’re halfway through our year long journey, we know exactly how it feels by now and you really do feel as free as a bird.

For some reason, Sandra felt the humming bird look slightly aggressive. My first thought was how could you say that about a cute humming bird, but in a silhouette, I can see how it can look like that. It almost looks like it is ready to attack.

Pro tip: Include the client in the process at different stages. They can help you improve your work along the way by making it more suitable for them.

Stage 5: The Final Design

The finished logo

Thinking of a different bird was tough, especially as the humming bird looks great, so I went back to my original notes at the initial starting point with the words “Introvert”, “Traveller” and “Elegance”. We needed to find a bird that could express as much of those as possible.

Photography is one of my hobbies and for some reason, I have a little obsession of taking pictures of herons. They’re fascinating to me, especially the way their neck curls up into an s-shape. They look so elegant! Keyword found!

Not only this, I’ve only ever seen them alone, going about their own business. They seem very introverted. Another keyword! Of course they travel by flying so a heron is literally the perfect bird to use. I wouldn’t have discovered that if I didn’t look back to what the design needed to achieve.

Now I just need to fit a heron into the design. From a quick Google search, a flying heron doesn’t quite look as distinctive as when standing. The heron has to be distinctive in silhouette form in the logo, as well as at smaller sizes such as when used on the website.

Photo of a heron I took in the Maldives

Once I made that observation, I knew I already had a photo I could potentially use to cutout out a heron and sit him proudly on top of the “I”. The photo above is from our honeymoon in the Maldives, so it turns out I unintentionally did some work on my honeymoon without even realising it.

The logo is complete. I’m happy I achieved the goals of the project and, most importantly, my wife loves her new logo.

Pro tip: Other creative hobbies, such as photography, can help you in your everyday design work.

Experiment, Experiment, Experiment

If you haven’t noticed, that’s the theme of this case study.

Experimenting is one of the key ways to overcome creative block. I didn’t struggle with creative block on this project because I always knew I should be experimenting.

Keep designing, keep experimenting.

]]>http://inspectelement.com/tutorials/logo-design-case-study-the-introvert-traveller/feed/0http://inspectelement.com/tutorials/logo-design-case-study-the-introvert-traveller/Learn from Great Design: Harry’shttp://feedproxy.google.com/~r/InspectElement/~3/lGqybaxB-Yc/
http://inspectelement.com/reviews/learn-from-great-design-harrys/#commentsWed, 04 Feb 2015 11:51:47 +0000http://inspectelement.com/?p=10185Once upon a time, two men were fed up with the ridiculous prices large companies were charging for razors and decided to create a business with a better and more convenient service, without sacrificing quality and at lower prices for their customers. These two men are Andy Katz-Mayfield and Jeff Raider and they created Harry’s, where you can subscribe to have shaving goods delivered to you on a regular basis.
Harry’s homepage

The first thing you notice about the design is the sophisticated look and feel. And it’s very important they portray a great visual aesthetic. After all, they’re selling a product to help men look their best. Would people trust them with a site that didn’t look great too? Probably not as much. First impressions count on the web as much as they do face-to-face.

Shave Plans

The main selling point is the subscription service. You can choose from a pre-made plan:

Shave plans

Or you can create your own shave plan:

Create your own shave plans

The use of natural language is a great way of literally talking to your audience, or your audience talking to you, in this case. It’s super simple to understand and it is very easy to scan and understand even if you only focus on the interactive elements. Another example of design by writing.

Update: During the process of writing this (at the last minute no less!), Harry’s have changed the design of this page and seemed to simplify it even further. It now no longer has the create your own option but only offers choice based on frequency instead.

Harry’s new shaving page design

Now the simple question of “How often do you shave?” is introduced, with simplified call to action areas which visually have more weight than previously and with less wording, only focused on how often someone shaves. They’ve removed the slightly ambiguous terms “everyday shaver”, “occasional shaver” and “infrequent shaver”, which were pointless considering they had the actual frequency underneath.

Interestingly, the wording of the call to actions have changed from “Enroll” (which I always thought was a little odd) to “This is me”. This change feels much more personal and assertive. Enroll sounds too scholarly, far from the target audience.

It’s entirely possible I saw a version of an A/B test but I have no way of knowing. Perhaps they’re testing whether people will create their own by using the checkout cart page to edit quantities and add/remove items or perhaps they’ve done user testing and found this is the best way. Either way, it’s worth including so you can see the difference and possible evolution of the design.

Product Page

The product pages include fantastic looking images. As items are arranged into sets, they are laid out neatly. This practice is known as “knolling”. It’s basically a term for laying out things in a neat fashion. For Harry’s in particular, it exudes quality and there’s something to knolling that gives a real sense of attention to detail.

Harry’s Product Page

Knolling the items also allows them to swap specific items out depending on options selected on the product page. Here you’ll see the image change to include an engraving example as I’ve selected to have the handle engraved.

Engraving selectedSelecting shave cream instead of foaming gel

This is a very effective (and simple) way of informing the user what they have selected and what they will receive. Rather than simply selecting the option and see that as an indicator, you will see the image change to reflect your chosen selection too.

Checkout

Harry’s checkout page

The first thing you’ll notice about the checkout page is how simple and clean it is. They do try to upsell you but it’s subtle and not annoying. In fact it will probably be helpful for some customers.

Other than the tidiness of the page design, you’ll notice the call to action is extremely prominent and in fact, appears twice on the page, giving it extra attention. I assume it is included at the top and the bottom in case there’s a large list of items but the majority of the time you will see two “Checkout” buttons, which isn’t a problem at all.

Harry’s do a great job of telling their story, as you’ll find in their about section. Here’s the very first wording on the page:

Harry’s was built out of respect for quality craftsmanship, simple design, modern convenience and most importantly for guys who know they shouldn’t have to overpay for a great shave.

“Respect”, “quality craftsmanship”, “simple”, “convenience” and “shouldn’t have to overpay” are the key words and phrases here. They are talking about everything the big companies aren’t even thinking about. They don’t have respect for anything in that list really. Gillette have only started their own subscription service because companies like Harry’s exist and could eat into their market and even then, they don’t have respect for price as they don’t seem to have reduced them.

The story supplements their offering of what their audience want with the actual service without getting in the way. It exists for those who want to go exploring to find out more about the company, so it’s in a completely different section of the navigation and never distracts from the main focus of the website.

Other Examples

I’ve already run through some wording changes on the most recent version of the shave plans page but the following text is worth noting too:

You can cancel or modify your plan at any time, no questions asked (but why would you do that?)

The decision to include the phrase “but why would you do that?” at the end of the share plans page is bold but demonstrates they have confidence in the service and products they offer, doing so in a fun and memorable way.

Special Edition

Harry’s Special Edition microsite

At the time of writing, Harry’s have a promotion on special editions of their razors, using some mountain climbers. They set up this interesting microsite to promote them and it is very well designed.

It does have one strange quirk though. You start at the bottom of the page and scroll up. It works well once you realise they’re using it in the context of climbing up a mountain. Even though that particular aspect feels a little odd at first, by going against the way sites are normally used (without being difficult to use), it makes it more memorable.

Mobile

Strangely, Harry’s website isn’t responsive. You would think this is the ideal design to make responsive, as anyone with any experience of responsive design can imagine how they would easily turn it into a responsive site. I’m sure you’re doing that right now.

Harry’s mobile site

What they do have instead is a separate mobile site, so at least they’ve created some sort of dedicated experience, rather than making people pinch and zoom.

The important thing however, is that you can do everything on the mobile site that you can do on the desktop version. It even contains the same natural language system for building your own shave plan.

I know many designers would probably scoff at it not being responsive but at the end of the day it doesn’t really matter if it is responsive or not. What really matters is the experience and they definitely haven’t compromised on that. Sure, responsive design could make development easier but the customers don’t care about that.

How are they doing?

At the end of 2014, Harry’s have raised $200 million of funding, which is staggering considering they’re not even 2 years old yet. They’ve even inspired a copy-cat company to launch the idea over here in the UK, before Harry’s make their way over here, if they decide to.

Really the magic is in the unique service (at least it was when they launched) but how much is their website helping with this? We can’t be entirely sure of course, but we do know it’s the gateway to purchasing their products and the only way to do so, so obviously it plays a major role.

You can definitely say they understand mens’ appearance, given their success, and that shines through in their website. If the actual shaving experience is anything like their web design, they’re on to a winner.

]]>http://inspectelement.com/reviews/learn-from-great-design-harrys/feed/0http://inspectelement.com/reviews/learn-from-great-design-harrys/Learn More by Watchinghttp://feedproxy.google.com/~r/InspectElement/~3/uB_j2dBuh1I/
http://inspectelement.com/articles/how-to-learn-more-by-watching/#commentsWed, 28 Jan 2015 12:32:26 +0000http://inspectelement.com/?p=10174I hadn’t played football for about six months which was enough time for me to be “rusty” the next time I played. I can’t even remember why I hadn’t played for so long but during that time I watched more football I had ever watched in any six month period before. Somehow it was one of the best football matches I had played for about a year prior to my six months of not playing.

I immersed myself into the world of watching the world’s best footballers and became better at playing football while not actually playing. It sounds crazy but that’s exactly what happened.

Ever since then, I realised the value of learning more by watching. I can actively not do something but watch someone else do it and still be good at it, if not better, months down the line. That means if I learn more by watching when I’m actually working on something (not at the same time of course), I can learn so much more effectively than I ever have before. It has been a huge eye opener.

Enough football talk, let’s get back to design.

How it Helped Me Design a Logo

Take this video of Aaron Draplin designing a logo for example:

http://vimeo.com/113751583

Just like watching football, you’re watching one of the best logo designers in the world at the top of their game. I haven’t designed a logo for a while (web design as a whole is my main focus) but I know that with this expert teaching, I can go into the next logo design with much more confidence than I would have and indeed I did.

I’m currently travelling the world with my wife and she has started writing a blog but it’s only on a wordpress.com domain with a simple theme (I’ll be linking to is as a case study in few weeks here on Inspect Element when the website is designed and live). I decided her writing and photos deserve something better so I’m in the process of designing her a logo and a website.

I haven’t designed a logo for maybe a year or two but I was able to sit down with my wife (she’s the boss at all times, not just when she was a client here ;) and design something we were both very happy with.

Just like I thought I would be rusty at football because I hadn’t played for a long time, I thought designing a logo wouldn’t come easy to me this time because I hadn’t created one for a year or two. Thanks to learning by watching (and Aaron’s expert advice) I was able to do them to the best of my ability (actually better because it took less time than usual), despite being a while since I last designed one.

Learning CSS Quickly by Watching

I learnt CSS by watching Andy Clarke and Molly Holzschlag’s fantastic CSS for Designers video tutorials. They’re a bit dated now but at a time when I was intimidated by learning any code at all, they helped me learn CSS in the fastest way possible, so I could get a website up and running to apply for a new job.

Now I can build every site I design (at least the front-end, sometimes the back-end too) which has made me more valuable. I know for a fact I once landed a full-time job because I knew how to design and build, including creating WordPress themes.

How to Learn More by Watching

Dedicate an amount of time to watch more about design. I recommend at least starting with an hour a week or a couple of videos to get into the habit of doing this and choose a particular day. Choose one that works best for you, put it on your calendar (with a reminder) and make a commitment to do it. Build the habit of watching to learn.

Watch this fascinating video of BJ Fogg teaching habit change to understand how to build habits. Yep, learn by watching! He explains how you need motivation, ability and a trigger to happen at the same time. For example, the reminder in your calendar is the trigger to get you to watch something, motivation is the desire to learn more and the ability is creating time to watch more. You’ll get what I mean if you watch the video.

Take Notes!

Don’t just watch something and then get on with your day. You’ll remember much more if you take notes and the better notes you take, the easier you’ll remember.

Even better, if you can, is to write an article, even if you don’t publish it, you’ll remember more and you’ll have something to refer back to which will be quicker to read than watching a long video.

Recommendations

Most people come away from design conferences feeling very inspired. You’ve just been watching some of the best designers talk. Ok, you haven’t been watching them work as such, but you probably have acquired insight into how they work.

If you don’t know where to start, I have some recommendations for you. Almost all of these are from conferences.

Designing for Credibility – This is actually aimed at business owners who don’t know too much about design but it is still fantastic to watch to pick on a few things here as designers, specifically on the subject of credibility.

On Web Typography – Jason Santa Maria delivers an expert view on how to use typography on the web, filled with fantastic examples.

The Shape of Design – Frank Chimero says “through storytelling, we can seduce people to do really wonderful things and if you seduce them, you don’t need to conquer them”.

How to Charge What You’re Worth – Ramit Sethi teaches how craft alone isn’t going to get us work with the best clients. He delves into the psychology of how clients think and how you can use that to genuinely help them, without being dishonest. Lots of great insights here. I first saw this video a while ago and I just watched it again three times because it’s so good (and so I could make some notes).

During my research for this article, I found a couple of websites with a good selection of videos for web designers called Vinery and another called Besquare. They both don’t seem to have been updated for a while so don’t come back expecting new videos but there is still enough there to keep you learning for a while.

There are also other places to learn by watching such as Treehouse, who offer in-depth courses on various topics including web design (by the way, that link gives you 50% off your first month after the free 14 day trial period).

Learn More by Watching the Best

One other thing you can learn from the best that I haven’t mentioned, and I want to quickly touch upon, is storytelling. Watch the videos above by BJ Fogg and Ramit Sethi and see how effortlessly they give their speeches. They know their story inside out. Imagine showing your design work with the kind of conviction and confidence they exude.

Learning is one of the best skills you can have in the fast moving industry of web design and watching the best at work is one of the most effective ways to improve.

]]>http://inspectelement.com/articles/how-to-learn-more-by-watching/feed/0http://inspectelement.com/articles/how-to-learn-more-by-watching/5 Web Design Tips You Probably Haven’t Heard Beforehttp://feedproxy.google.com/~r/InspectElement/~3/HuSPLz4GWIg/
http://inspectelement.com/articles/5-unheard-web-design-tips/#commentsWed, 21 Jan 2015 10:08:58 +0000http://inspectelement.com/?p=10168Here on Inspect Element, I don’t want to just give you standard advice that you’ve heard before, although there is value in that. I still refresh myself on things I learnt years ago. Alongside that, hearing advice multiple times helps it settle in more as it takes 7 times to retain new information. Saying that, I don’t want to give you “standard” advice, I want to go above and beyond with advice that will help you get more out of your web design career.

1. Design for the Extremes

Too many times, I’ve seen content breaking designs. It looks sloppy and can happen if you don’t account for it at the design level.

For example, what happens if someone adds 75 characters of text into a title for an item and you only had 20 in the design? It looked great with your example text of 20 characters but does it break the design completely or will it stand the test of someone entering in more text than you expected? Expect the unexpected and design for it.

Forgetting about the extremes leads to more work as you now have to go back and come up with a solution to fix this problem, likely taking you away from another project you are supposed to be working on.

There are ways around this. For a previous client, we set a limit of 30 characters which was agreed with the content team. They know the “extremes”, so it was best to work with them and find out what would be a good amount to limit the titles to.

2. Benefits are More Important than Code or Techniques

The web design world has an obsession with learning code and techniques. Not that there’s anything wrong with that, to a certain extent. It’s tempting to gravitate towards the latest and greatest shiny thing but is that really the best use of your time for completing a project?

Invest more time into what actually helps clients improve their business unless the latest and greatest shiny thing does just that. One great example of this is responsive web design. When it was first discovered and shared with the world by Ethan Marcotte, everyone knew it was code and techniques you can learn to improve any website.

Clients, bosses and business owners don’t care about your great code unless you can link it to benefits for them. Sure, it helps you to do your job better but don’t sell yourself and your work on technical abilities alone. You need to give a good reason why it will benefit them and their business. With this in mind, which designer below would you hire?

Designer 1: “I design and build websites in HTML and CSS with efficient code using CSS3, the latest javascript techniques and responsive code.”

Designer 2: “With proven design techniques and performance optimised code, I will help improve conversion rates to get you more customers and sales.”

Why oh why, designer 1? I own a business and I come across your website but I have no idea what that all means and how does it help me? I have no idea. I’m off to find someone who can help me.

Designer 2 relates their skills directly to benefits for the business they are working for and doesn’t talk about technical details because there’s no need. Businesses are taking a risk hiring you, so you need to make sure you seem like less of a risk than everyone else. Very few designers do this, so you will almost certainly stand out if you do.

Bonus tip: Don’t create a chart of your skills where you give each skill a percentage score. Are you only 30% good at jQuery? Does that mean 70% of the jQuery work you do is terrible? Most importantly, it doesn’t relate to how you will actually help a business.

3. Writing Improves Your Design Work and Career

You may have heard of this one before from me. I’ve written about this before but it’s worth bringing up again, even if you’ve already read it. Most designers don’t write at all, yet improving your writing can help your design career and work, not to mention other areas of your life too.

Improving my communication skills has given me more confidence to reach out to others. I’m a classic introvert, so this doesn’t come easy to me but now I can much more easily communicate my thoughts and ideas to people than ever before. Less time is wasted and it feels great.

Writing can even help you overcome creative block. Getting my ideas down onto paper means I don’t forget them but also allows me to develop them. If I purposely write about my ideas, it leads me to refine them much more easily than if they were just in my head and laid out in Photoshop. I also don’t forget them when I write them down which has saved me on more than one occasion.

I am constantly surprised by how much writing has helped me in my design career. It’s not something I thought would help as it isn’t advice you’ll normally hear but it’s one of the best skills you can improve.

4. Don’t Take Criticism Personally

You created the work. It’s your design, your baby. You believe in the work you do because you’re a good designer but when someone else comes along to make some suggestions, it can be hard not to take it personally. It’s one of the best skills you can develop. That’s right, it’s a skill. It’s something you can build up and get better at over time. I know because I used to be terrible at it but now I understand people just want to help. They don’t hate you or your work.

Truth is, it’s much easier for someone stepping into the problem fresh to see where designs can be improved than it is for you. You’ve had your head stuck in your work for hours, so it will be more difficult for you to see what others will notice.

You’ve probably done this multiple times yourself. It can be difficult to use the web normally as a web designer because you’re continuously scrutinising every design you see. You can see improvements you would make on every site you visit. You can see how much easier it is to suggest improvements if you see others’ work because you do it all the time!

5. Learn from Other Industries

Read books outside the norm. If you read the same material as everyone else, then you’ll think in the same way as everyone else. You can’t expect to see problems in a new way if you’re reading all the same things as your classmates, co-workers, or peers. So, either read books that are seldom read by the rest of your group or read books that are outside your area of interest, but can overlap with it in some way. In other words, look for answers in unexpected places.

For example, learning about how architects approach a certain problem may just spark something in your mind that can help your design process or researching how artists in other fields get past creative block can help you approach problems from different angles to come up with better solutions of your own.

For me photography has been beneficial to the way I approach design for a number of reasons. It has given me the freedom to be creatively expressive in a way that I wasn’t doing with web design. I now don’t worry as much about what others think and have more confidence in the work I do.

Photography also improves my composition work. The composition of a photo is key and can completely change a photo. First impression are key in the world of web design and plays an important role in photography. Composition has a starring role in making a good first impression.

Don’t limit yourself to learning only about web design. Here are some areas you could explore:

Movies and TV shows

Architecture

Book and magazine design

Music

Writing

Photography

Interior design

Animation

Product design

I’m sure you can think of more areas to explore but hopefully it should be a good starting point.

Don’t Take the Easy Route

Some of these tips aren’t easy, or just isn’t the typical advice you normally hear but you know great design isn’t easy and if you follow what everyone else is doing you’ll end up doing the same. Taking the easy route will only lead you to mediocrity but you’re better than that.

]]>http://inspectelement.com/articles/5-unheard-web-design-tips/feed/0http://inspectelement.com/articles/5-unheard-web-design-tips/UX is Key to Brandinghttp://feedproxy.google.com/~r/InspectElement/~3/AM48788n8Fk/
http://inspectelement.com/articles/ux-branding/#commentsWed, 14 Jan 2015 10:26:57 +0000http://inspectelement.com/?p=10163In the last issue of Learn from Great Design, I mentioned that user experience is an important component of branding. I want to elaborate on that just to underline the importance.

First of all, let’s look at what a brand is not. A brand is not just visual. There’s so much more to it than just a logo, which is a common mistake.

A brand can be better thought of as others’ perception of the company, product or service.

If a website is frustrating to use, what will you think of it? You may well think they don’t care about making things easier for you, which will taint the perception you have of them. Now when you see or think of that company, you will likely think of any bad experiences you’ve had. Your perception of that company has changed because of the user experience. Similarly, if you’ve had a wonderful experience with a website, you now have a more positive association of that brand.

Every time I need to rent a car, I now think of how my experience of using Avis’ website was so fantastic. They’ve risen to the top as my favourite car rental company because they made the effort to think about me by creating the best user experience in the business. See more about Avis in the first issue of Learn from Great Design, including comparisons with their main competitors.

Whenever I see a big competitor of theirs, especially the ones with dated websites, I immediately think they don’t care. Why haven’t they invested in helping me? They’re stuck in the past and you can see how this has negatively affected my perception of them. I will almost certainly never ever use Enterprise to hire a car, for example, even if they do redesign their website and improve the user experience. My negative perception of them is far too strong at this point.

Everyone is in UX

To be honest, I’m not quite sure where the term UX designer came from. If you’re a web designer, you’re also a UX designer even if you’re classed as a “visual web designer” (if you are, get a new job where they respect you). Aesthetics are also an important part of a brand but web designers do much more than visual work. If you’re a UI designer and designing the UI of an web app, you’re deciding on how people will interact with it, forming a key part of the user experience.

User experience shouldn’t be the sole responsibility of one person, or a team. Everyone involved contributes to the user experience, even copywriters, email designers and marketing teams are contributing to the user experience.

User Experience as Branding Examples

Think of some of your favourite brands online.

Google’s initial success came from a search box on a white screen and Gmail’s popularity was from creating a better email experience, including huge amounts of storage space. Dropbox attracted the attention of Steve Jobs because they solved a a complex problem (cloud syncing) in a simple way. Apple focuses on the user experience in everything they do, even right down to the way they package their products so the experience of opening them is the best it can be (others have since followed Apple’s lead).

Imagine what would have happened if any of those companies compromised on their user experiences. It’s easy to think of them as giants now, but they had to start somewhere and they started with great experiences. The experiences defined their brands.

Let’s look at a couple of lesser known examples.

Photojojo sell physical goods but their product pages are filled with fun elements, including a switch labelled “do not pull”, a ballon that shows a customer’s photo of a product when clicked and even an animated dinosaur taking a photo if you scroll beyond the bottom of the page.

Harry’s focuses on “quality craftsmanship” and “simple design” in their product line of razors and shaving goods. Their web design exhibits quality through the elegant use of typography, whitespace and colour. Simplicity shines through when purchasing, thanks to a simple set of subscription plans to choose from and an easy way to build your own. Their actual service is convenient (shaving gear regularly delivered to you) and the usability of their store needs to reflect that too, and it does.

Branding Can Inform UX and UX Can Define Branding

Remember how important the user experience is to branding on your next project. Doing so will also make the user experience true to the brand values. On the other hand, the user experience you design will contribute to forming a brand too if you happen to be designing a website for a new business.

When working on a brand that has already been defined you should bake it into the user experience. In the Learn from Great Design where I wrote about Orangina, I mentioned how the agency, Achtung!, took the existing shaking action associated with Orangina’s drinks as a starting point for the user experience. What resulted from that was a fantastic website perfectly suited to Orangina.

Going back to the Harry’s example above, I believe they only existed online initially, so they needed the online user experience to help define their brand and get their sales up and running. It was a key cog in the machine.

You already know how important a great user experience is, but hopefully now you know the role it plays in branding and how you can use existing brands to create an appropriate user experience or use it to help define a brand. Either way, it plays a key part.

The website for Orangina is dripping with character (pun intended). It’s fun, colourful and alive. In this edition of Learn from Great Design, I will be looking at how an external design agency has breathed new life into the website of a drink brand almost 80 years old.

Having just been to Japan for six weeks, as part of travelling the world for a year with my wife, soft drinks have been a source of fascination for me. The selection in Japan is tremendous, so when I came across the Orangina site, I immediately knew I wanted to review it because we can learn from the great design and also because the fascination born from my time in Japan.

Shake Things Up!

I actually noticed Orangina bottles while I was in Japan (Orangina is currently owned by a Japanese company called Suntory) but I didn’t ever have the urge to buy one because they didn’t stand out to me in the sea of amazing drinks in the vast array of vending machines and combinis (convenience stores) all over the country. That was probably because I was wowed by all the new drinks I had never seen before.

Orangina’s heritage page

I used to love Orangina as a kid. It seemed special to me because of the bottle, but without realising it, I saw their drinks as “old and tired” once I got older and haven’t drunk one for about fifteen to twenty years or so.

Orangina are rebranding themselves in an attempt to stand out again, with design agency Achtung! taking up the role of the creative work. As a starting point, here’s the recent posters they created:

Orangina’s new poster designs

Personally, I find the posters to be a bit plain, and what on earth does a overweight topless man, stretching in exercise gear have to with shaking things up?! The other two posters look really nice visually but they don’t really stand out. They’re generic and the message gets lost. They certainly aren’t anywhere near as iconic as the old posters for Orangina:

Orangina’s old iconic poster designs

Now, those are great designs, even if a little dated. Anyway, I digress. Wasn’t I supposed to be reviewing their website? Of course, this is Learn from Great Design in web design but I want to demonstrate what the website does that the posters don’t, and that is, stand out.

The analysis is split into the following sections: branding and visual design, photography, animation and typography. These are the key areas of the new Orangina design.

Branding and Visual Design

Previously, in the first issue of Learn from Great Design, I showed you why Avis are miles ahead of their competition. Orangina is a purely informational site. You can’t do anything on the Orangina site, other than learn about Orangina but that doesn’t mean there weren’t branding lessons to learn from Avis too.

It’s important to always remember this:

User experience is a key component of branding.

That means everything you do on the site, even how you go from point A to point B is part of the brand. The mere fact that Avis had created a great user experience adds to their brand. They put themselves ahead of the competition online and that user experience will be remembered as part of Avis.

Visual Design

Often confused as the only element of branding, visual design is certainly still an important part of a brand, including web design of course, and Orangina does not disappoint. Strong colours are derived from the products themselves which sit on top of the blue background with orange contrasting very well for buttons, icons and anything else that needs to stand out or to simply help with visual hierarchy.

Menu design (with and without icons to demonstrate effectiveness)

Look at the top menu for example. The orange icons are not only look great, they also add a visual element to the menu, making it more noticeable as well as differentiating the three sections.

In the lower part of the image above, I’ve removed the icons to demonstrate their effectiveness in this particular design. You can see how we’ve already lost an element of the strong visual design in something as simple as the menu. It functions just fine, but doesn’t contribute to the overall fun and fresh look and feel as effectively.

Buttons

You’ve probably never seen buttons designed quite like this, yet they’re still easily recognisable as buttons. Above are a few examples. They have a unique shape, yet aren’t too distorted from the expected shape. They demonstrate how we can “shake things up” and do something different even something small like this and with standard elements such as buttons.

Photography

I’m a keen photographer in my spare time and I believe learning photography has helped me become a better designer. You can see how great photography has helped with the design of Orangina’s website, not that the designer has taken the photos but it helps create better composition.

Orangina’s products

Actually, I wouldn’t be surprised to discover the bottles were created in 3D modelling software and made to look exactly like the real life thing. This allows them to place the bottles however they like, without having to assemble an expensive studio and use them over and over again. If you look closely at the condensation on the outside of each bottle, you will notice they’re identical, suggesting they’re most likely to be 3D renders.

I’m not saying you have to learn 3D modelling, of course the web designer wouldn’t have created them, but it’s interesting to know what goes on behind the scenes. Entire rooms are created in 3D these days and no-one even notices. This is the new age of (product) photography.

Imagine if you were designing a product site like this and you could have images from any angle or position you like with a simple request to a 3D designer. Perhaps something to consider for future projects, budget permitting.

Animation

The animations make the site feel more alive and evoke the brand of Orangina, much more so than if it was motionless. By doing so, they squeeze (pun intended, again) more out of the brand on the web.

Menu animation

CSS3 animations give life to the various flavours of Orangina drinks on the products page. Upon hover, they shake as though you are actually shaking them, as instructed to do so when you’r physically holding a bottle in your hand.

We took the all-time famous Orangina shaking gesture as our starting point. We also developed brand new product design materials accompanied by a total revamp of Orangina’s online presence, including social and mobile.

It’s important to note they haven’t overdone the animations. Too much and it would dilute (yet another pun!) the effect and become distracting. Too little and it won’t add anything worthwhile. They’ve got the balance just right.

Much of the animation on the web up until now has been used for aesthetic purposes. Thankfully we’ve long gone past the days of pointless Flash animations and I believe we’re entering a period where designers are using animation to add more meaning to designs.

Typography

The main typeface choice of Berthold Block Condensed is organic in style, with its not-rough but not-smooth edges. It’s subtle but very effective at fitting in with the design as a whole.

The screenshot below shows how the slight irregularities of Berthold, used for headings, compliments the design so well.

Berthold Block Condensed in all its glory

Mobile

Unfortunately, the vast majority of animations on the mobile responsive version are lost, due to the lack of hover of course. I would have liked to see the bottles randomly shake (not too frequently though) on the products page as a way to keep some of that animation alive.

Orangina is responsive

The strong visual design is adapted perfectly well to mobile screens. The simple layout of the site appears just as you would expect on a mobile device.

Additional Notes

To be daring in everything we do with the aim of delighting our local consumers with fun, refreshing and natural moments of pleasure.

I wouldn’t necessarily say it is “daring” but the new design certainly delights with fun, refreshing moments of pleasure. I’ve looked at the site for hours as part of my research for this Learn from Great Design series and I still find it to be just as fresh as when I first saw it.

Shake it Up

The message of shaking Orangina is prominently displayed through the site, whether it’s the actual message itself on the product page or by the bottles and icons shaking too. Like the animations, it doesn’t draw too much attention but still gets the message across.

As a result of everything they’ve done, the site is fresh (last pun, I promise!), fun and unique to the values of the Orangina brand.

If you’ve ever held an Orangina bottle, you will know it has a dimpled texture, imitating that of the peel of an orange itself (like I said, I haven’t drank Orangina for over ten years but the feeling of the bottle has stayed with me). It’s great to see Achtung! have also paid attention to detail in bringing the new Orangina brand onto the web.

It’s this kind of attention to detail that allows Orangina to “shake things up”.

]]>http://inspectelement.com/reviews/learn-from-great-design-orangina/feed/0http://inspectelement.com/reviews/learn-from-great-design-orangina/The 80/20 Hybrid Approach to Designing in the Browserhttp://feedproxy.google.com/~r/InspectElement/~3/j3NDExvipGA/
http://inspectelement.com/articles/the-8020-hybrid-approach-to-designing-in-the-browser/#commentsThu, 04 Dec 2014 17:23:27 +0000http://inspectelement.com/?p=10123Designing in the browser has been a point of discussion for a few years now and still is. With the web design world switching to flat design, designing in the browser has been seen as the future, but it is really that effective?

The Search for Speed

The driving force behind designing in the browser is the desire to improve the speed at which we design and build websites in a responsive world where we can present our work to clients/bosses on multiple devices.

It’s a search I’m fully behind but we need to be careful about not degrading the quality of our work just for the sake of speeding it up. There needs to be a balance.

The 80/20 Hybrid Approach

If you’re building the design you’ve created, I find an 80/20 hybrid approach is the most effective way to get to a finished website without sacrificing design quality. Simply put, it roughly works out like below:

80% in a dedicated design tool / 20% in HTML and CSS

I still like to use Photoshop to get to the closest possible point to a finished design because it’s the fastest way arrive to a point of good quality work. I really like the way Dan Mall expressed this in an interview:

The value of Photoshop for me has always been that it’s the path of least resistance to the most expressive result. It’s a great tool for me to quickly get to some useful approximations.

Sure, designing in the browser can be faster than designing and then building the website separately but you will likely find that you’ll sacrifice the quality of your design work.

Unless you think and dream in HTML and CSS, designing in the browser puts an unnecessary barrier between your great design ideas and the most effective way you can actually design them. You can’t manipulate your design directly with code. The HTML and CSS code effectively acts as a middleman between your brain and your design work. Why would you want something getting in the way of that?

I’ve tried designing in the browser many times and often find the results to be a bit dull because you just don’t have anywhere near as much creative freedom as a tool like Photoshop gives you. In fact, many of the complaints about flat design when the trend began was blandness which coincides with the design in the browser movement. To me, it’s no coincidence and the two are related. Attempts at designing in the browser are unfortunately contributing to the blandness.

That’s why I’ve been sharing Photoshop productivity tips (latest here and here) recently and will continue to do so unless something better comes along. Until then, we have to make our tools as invisible as possible so we can concentrate more of our thoughts on the actual design work itself.

Tweaking the Final 20% in the Browser

This is where CSS shines. You’ve already reached 80% with your choice of dedicated design tool and you’ve already written the HTML and CSS. Now it’s time to make tweaks or even any additions to the last 20% of the design work through the power of CSS.

What about Style Tiles?

Style tiles was another much praised approach which seemed as great to me initially as it did to everyone else. In practice however, it’s difficult for clients to visualise the end results no matter how many pieces they can see. This is what I’ve found from my own experiences, talking to other designers and researching what others say online.

A style tile won’t show a business owner how a customer uses certain features of their website and a wireframe still leaves too much to the imagination.

The only time a style guide has really worked well for me was when I was part of an internal team. They are probably best utilised as an internal tool for yourself or a team to pull from, and not something to show the client unless you present it to them alongside your designs to give them something to use going forward.

That sure makes designing in the browser easier. I can see how they’ve made that work for them when that has been set as a foundation.

Your Thoughts

Like any process, this won’t work for everyone but I thought it would be useful to share part of my process and why it is the best way for me but I would love to know your thoughts about it and what you do. Simply let me know on twitter @tkenny or send me an email and I’ll add any anything interesting to the additional notes.

]]>http://inspectelement.com/articles/the-8020-hybrid-approach-to-designing-in-the-browser/feed/0http://inspectelement.com/articles/the-8020-hybrid-approach-to-designing-in-the-browser/Learn from Great Design: Avis Car Hirehttp://feedproxy.google.com/~r/InspectElement/~3/k7L1UJCktSQ/
http://inspectelement.com/reviews/learn-from-great-design-avis-car-hire/#commentsWed, 26 Nov 2014 15:51:12 +0000http://inspectelement.com/?p=10083Welcome to the first in a monthly series about great web design, where I dissect the best websites out there, and show you what makes them great.

On our last trip to Iceland we hired a car from Avis Car Hire’s UK website and it was a fantastic experience. Their website is by far the best I’ve ever used to book a rental car. Not that that was saying much because they’ve pretty much been stuck ten years in the past.

The design is beautiful but it doesn’t let that beauty get in the way of a great, usable experience. In fact, it contributes to the experience as I will show you but you will probably see what I mean when you try the site out yourself. Visual design is an important part of the design process but it isn’t the only part of course.

Avis Car Hire

I’m currently on a round the world trip with my wife. We’ll be in New Zealand next month, so I will be running through the site as though we’re hiring a car in Auckland (which we are).

While I don’t know the reasons for the design decisions made, I am certainly going to dissect it and show you why I love it.

The Homepage

Immediately you see a beautiful image of mountains and a road, with the words “Unlock the world” reinforcing their status as a worldwide brand or introducing you to that fact if you weren’t already aware.

Before we move on, let’s examine the wording some more. It’s very short and to the point but it doesn’t just say something bland like “hire a car”. It invites you in to explore the world and Avis are here to help you do just that. Not only that but it’s a clever use of the word “unlock” referring, of course, to unlocking your car; your gateway to the world.

Overlaid on the image representing the vast landscapes of the world, is a prominent search bar. This is the clear call to action and nothing takes much attention away from it. What are you here to do? Hire a car! Avis have made that the focus and I love it.

The search bar is the prominent factor on this page, and so it should be. There are promotions and offers on the homepage but they don’t distract too much from the search as they are placed below, visually indicating they’re secondary. It’s clear the user comes first, ahead of different department wants in this case. Fantastic.

It’s as close to all round web design perfection as I’ve ever seen. Yes, I think this is one of the best designs on the web. Let’s move on to see why.

Selecting a Location

Selecting a location

As you can see from the animation above, Auckland has multiple locations where we can hire a car. The good thing about this, as the animation show, is selecting different places causes the map to move between locations. This is the kind of detail that makes the difference between good design and great design. Immediately I can see where there each are relative to each other, without me having to do any extra work.

If it didn’t animate between selections, I would have to navigate the map or another map myself to see where they are in relation to the other locations.

We’ll be flying into Auckland, so we’re going to pick up a car from the airport.

Selecting Dates and Times

As soon as you’ve chosen your pickup location, you’re greeted with the following date screen:

Choosing a pickup date

What’s great about this is how the focus is purely on picking a date. The entire width of the page is dedicated to it, allowing it to show three full months. This is great for those who are travelling for a couple of weeks in the next few months but also those who will need a car for much longer, like us. I imagine it covers at least most, if not all situations. Simple but effective.

It’s also worth pointing out that the area next to the location shows the dates and times for pickup and drop-off as you chose them. These are also clickable so you can change them anytime. My only gripe is they aren’t obviously clickable so it takes a little investigating to discover you can change them.

Choosing a pickup time

Selecting times also gets the same treatment even though time can’t really benefit from the extra space like the date selection can. Avis do conveniently display opening times for your chosen location which is a great use of context. I don’t have to hunt around the site for opening hours which is something I may not have even thought about had it not been listed. I’m given the information when I need it. Great decision.

Why Split the Process into Multiple Parts?

When working with a client of mine, we discovered that splitting a registration form into multiple steps improved the conversion rate. While this isn’t exactly the same, the process of booking a car requires a number of steps but Avis has even split sections into even more steps than a traditional car booking site.

Choosing a date is focused on just that, reducing distractions and improving the usability in the process. I would bet they’ve also improved conversion rates by doing so.

It seems counter intuitive but in this instance, you can see how it helps. One giant form can be intimidating. Splitting it up into easy to manage chunks can be less of a deterrent. Hiring a car certainly has a number of necessary requirements and Avis’ approach gently guides you through the process.

Choosing a Car

The car listing page is a thing of beauty. Take a look for yourself:

Car listing

As well as looking great, it’s also is fantastic to use. As I mentioned earlier, this is a great example of how visual design helps usability.

Look at how the cars are displayed. They all have a consistent style and appearance so you can scroll the list and easily compare cars just by looking at them. Clearly some work was done to photograph each car in a certain way or at least the images were edited with a uniform style. Either way, significant care and attention has been taken to make them look consistently good.

Imagine if all the cars were at weird angles or had different lighting. It would certainly be a distraction. With them all facing the same direction, it reduces the visual complexity of the page. Also notice how they point towards the information about the car. This design flows nicely from left to right as a result, guiding the customer in the right direction.

Typography and Visual Hierarchy

Not only unique to this page but the use of the Avenir Next typeface across the site is fantastic. I know Avenir Next well having worked with it extensively on a previous project so I know how versatile it can be. As you can see here they’ve used it for headings at large font sizes as well as small copy with some being set completely in uppercase and it all looks great. Superb choice and well used.

What this great use of typography does is easily allow you to scan down the list comparing various properties. For example, you can scroll the list fairly quickly and notice the size of each car: small, mid-size, large, etc. The same can be said about the price. Scanning down the list looking at the price is very comfortable.

Colour

Personally I admire sites that can use one colour effectively and Avis certainly does. To show you what I mean with a simple example, let’s see what happen when you remove the colour from the size label:

Removing the red of the car size property to show the difference colour makes

What happens now is the property “merges” in with the colour of the car name and gets slightly lost, especially when scrolling the page in search of a car to choose. You can see this is also a good use of colour despite being the same as the main call-to-action colour. Nothing distracts much from the call-to-action buttons on this page. It’s immediately obvious what you need to click on to take you to the next step once you’ve chosen a car.

One Strange Interaction

The only odd aspect of this page is when you click on the car image itself, it slides to the right and hides the information. I can’t see any benefit to this. It seems pointless but it isn’t an interaction you have to use so you can just ignore it and I’m not going to dwell on it.

Car Details

Clicking/tapping on the car details link gives you more information about the car, loading the information in a full-screen view over the page. It doesn’t load another page as hitting back immediately takes you back to the car list view.

The car details screen gives you more information about the rental car and does it in a beautiful full-screen layout. You could possible argue that the red floor is too distracting from the main call-to-action but this is only something testing could determine. It certainly looks good, that’s for sure.

Beyond the Car Selection

I’m going to stop here because this is the core experience of the site. Sure, checkout steps are important to get right too but I feel as though there is already plenty to learn from at this point.

Mobile

As you’re well aware by now, mobile is an extremely important part of web design. The same client I mentioned above recently saw mobile usage overtake desktop usage for the first time a few months ago. That’s over 3 million registered users who are mostly shopping from a mobile device.

Avis.co.uk on the iPhone

The Avis redesign is responsive and doesn’t disappoint. It scales down sensibly to mobile screen sizes just as you would expect.

There are small changes I would make on mobile without having had much time to think about it. Probably the biggest one would be to keep the back button always visible on the car details page, as when you scroll down, which can be quite far, direct access to a way to go back would be nice. Not a major point though.

Competitors

I don’t want to spend too much time on Avis’ main competitors but I will briefly touch on them as it will further demonstrate why the Avis website is so well designed.

Hertz seem more interested in promoting as much as possible to you as soon as you arrive. Picture yourself walking into a shop and someone coming up to you immediately and telling you what they have on offer as soon as you step foot in the door. No shop does that in the real world, why is it ok on a car rental site? It isn’t.

Hertz homepage

The car listing page doesn’t show the same type of care and attention that Avis gave theirs. They’re trying to squeeze more information into a smaller space. When you give elements room to breathe, you give your users the respect they deserve. The opposite is true too.

Europcar are the closest to the experience of Avis with a large focus on the search bar but they are also far too keen to promote something to you.

Europcar homepage

They know you’re probably visiting because you want a car/vehicle but they don’t know much beyond that at this stage so why show a promotion for Australia? It’s pointless and a waste of space. If they do want to go to Australia they will chose Australia, then show them the promotion. At that point you know they’re going to Australia and now they will be receptive to the promotion. Use that space more wisely.

Yes, this is really the web site for Enterprise and it’s a mess even beyond the dull visual design and the archaic 800px width of the site. Someone remind me what year this is. I seem to have travelled back in time.

Enterprise’s homepage

First of all you have to select a country from the giant dropdown list and then when you do select one, the page refreshes and it isn’t fast, even on my fast internet connection.

Have a look at what happens when I select the UK and then type in London.

Enterprise’s terrible location list

I’m done with Enterprise. I’m out.

Competitors Verdict

Additional Notes

Currently the redesign is only live on the UK site, at least as far as I know. The US site doesn’t have the new design at the time of writing. I have no idea why this is the case but it could be simply because they are testing it on the UK site before rolling out worldwide.

It’s worth nothing that I haven’t done any user testing, nor do I know what affect this is happening on Avis’ website performance since the new design. I’ve contacted them to see if they’re willing to share any performance data but haven’t received a reply at the time of writing. I will update if I get a response from Avis.

Disclaimer

I have no affiliation with Avis in anyway. I simply used their service to rent a car for our holiday in Iceland and was very impressed with their website.

Try Harder

Avis have simplified at every possible stage of the car renting process, making it a joy to use. Simplifying is hard to do but then again, Avis’s tagline is “we try harder” and it certainly shows.