Learn From Great Design Volume 1

LEARN
FROM
G R E AT
DESIGN
Vo l u m e 1
Tom Kenny
ILTE’ A
S RN
TF IRMOEM
TGO R E AT
LDEEASR I GNN
FROM
G R E AT
DESIGN
LEARN FROM GREAT DESIGN VOLUME 1
Most designers look at inspiration galleries when stuck but

what you’re seeing there is mostly visual and you know design
is more than just it looks.
That’s why I’ve created this series called Learn from Great
Design where I show you the best design on the web but also
show you why it is the best, by diving deep into the design
decisions they’ve made.
Not a single design gallery does this, so once you find a site on
there you like the look of, you have to spend the time trying to
find out if the design works well beyond just how good it looks.
With Learn from Great Design, I’ve taken the time to do the
work for you. You don’t need to look around the site and figure
out what makes it so great. Just read the case studies in this free
eBook and on inspectelement.com.
It’s time to learn from the best.
2
LEARN
FROM
G R E AT
DESIGN
AV I S C A R
HIRE
avis.co.uk
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
www.avis.co.uk 4
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.
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.
FIRST IMPRESSIONS
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
www.avis.co.uk 5
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.
www.avis.co.uk 6
SELECTING A LOCATION
As you can see from the video below (if you can’t see the video,
watch it here), Auckland has multiple locations where we can
hire a car. The good thing about this, as the video shows, is
selecting different places causes the map to transition between

locations. This is the kind of detail that makes the difference
between good design and great design. Immediately I can see
www.avis.co.uk 7
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 date screen
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.
www.avis.co.uk 8
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.
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
www.avis.co.uk 9
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.
www.avis.co.uk 10
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 (see next page).
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
www.avis.co.uk 11
12
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
Web design is considered 95% typography and most of the
impressive use of visual hierarchy is created by great
typography here.
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
www.avis.co.uk 13
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:
www.avis.co.uk 14
What happens now is the size 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-
www.avis.co.uk 15
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.
www.avis.co.uk 16
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.
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,
www.avis.co.uk 17
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.
www.avis.co.uk 18
Hertz
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.
www.avis.co.uk 19
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
www.avis.co.uk 20
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.
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.
The overall experience isn’t nearly as slick and focused as Avis.
Enterprise
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.
www.avis.co.uk 21
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.
22
Have a look at what happens when I select the UK and then

type in London.
I’m done with Enterprise. I’m out.
Competitors Verdict
I’m sorry I looked elsewhere Avis. I feel ashamed. Please don’t
tell anyone.
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
www.avis.co.uk 23
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.
WE 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.
www.avis.co.uk 24
LEARN
FROM
G R E AT
DESIGN
ORANGINA
orangina.eu
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
orangina.eu 26
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.
I used to love Orangina as a child. 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.eu 27
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:
28
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 chapter 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.
orangina.eu 29
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
orangina.eu 30
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.
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
orangina.eu 31
design in something as simple as the menu. It would function

just fine without the icons, but wouldn’t contribute to the
overall fun and fresh look and feel.
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.eu 32
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.
orangina.eu 33
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 (if you can’t see the animation, watch it here).
orangina.eu 34
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’re physically holding a bottle in your hand.
Shake it up
Rather smartly, Achtung! took the Orangina’s established

shaking gesture as the starting point for the rebrand which has
worked very well translating into animations (if you can’t see the
animation above, watch it here).
orangina.eu 35
“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.
orangina.eu 36
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.
MOBILE
Unfortunately, the vast majority of animations on the mobile
responsive version are lost, due to the lack of hover of course. I
orangina.eu 37
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.
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.
orangina.eu 38
ADDITIONAL NOTES
The Orangina-Schweppes mission statement (not directly
Orangina but it filters down) is as follows:
“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 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
orangina.eu 39
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”.
orangina.eu 40
LEARN
FROM
G R E AT
DESIGN
BELIYF
beliyf.com
Beliyf are a “strategic consulting firm” but that’s a bit boring, so

they’ve positioned themselves as much more interesting
through great design and copywriting. The creativity on show
here is superb and their passion really shines through with the
words they use.
FIRST IMPRESSION
The homepage is incredibly simple. So simple that it only
includes two headlines, a button and an image but it’s well
targeted to the type of people they want to help:
www.beliyf.com 42
“Your product can be copied in a heartbeat,

your prices undercut, your people
poached.”
“Uncover the one thing that can never be

stolen.”
The headlines speak directly to business owners’ common fear
of being copied. I know this is a common fear from learning
about business over the last couple of years myself. Beliyf have
hooked business owners in because they know this is one of
the biggest fears they have. It’s the ideal start to this great
design.
Great copywriting comes from a great understanding of

your customers.
Although the second headline is a little vague, it has enough

intrigue to find out what exactly can’t be stolen and only one
action to take, there can be no confusion as to what to do next.
www.beliyf.com 43
YOUR JOURNEY TO BELIYF

Following on from the Discover Beliyf page (another simple
page after the homepage), you arrive at the start of “Your
Journey to Beliyf”.
The design for this page is over 8,000 pixels long! For a while in
the design industry we’ve been told to keep as much above the
fold as we can, or at least the important stuff. This has changed
over the last few years as designers have become better at
communicating to clients that people do scroll.
See this study carried out by Huge Inc:
“We learned that participants almost

always scrolled, regardless of how they are
cued to do so – and that’s liberating. While
it’s hard to make universal
recommendations, we’d suggest that
designers use the cue that works best in its
context.”
www.beliyf.com 44
Explore the screenshot to see how well the page

flows from top to bottom, despite its length.
Clever use of the “stepping” stones guide you
through from one section to the next and each
section is clearly defined with its own beautifully
arranged collection of leaves.
Use the power of design to entice people

down a page.
The stunning tree assortment of leaves at the end

of the page is one of those moments where I
wished it was something I could design.
Excellent Copywriting on this Page

Visually this design is wonderful but it’s a joy to
read to. Here are some highlights:
“We’re here to take you on a

journey to discover, frame and
use the one thing nobody can
www.beliyf.com 45
ever steal. You.”
“Uncovering your Beliyf awakens a sense of

wonder and unstoppable energy across
your enterprise.”
“It turns customers into fans, employees

into evangelists and the competition into
dust.”
“How can every touchpoint be infused with

a sense of your soul and your heart? What
new opportunities are now revealed that
weren’t visible before?”
“From your people, to your products,

packaging to premises, we’ll help you
animate your entire organisation with
Beliyf.”
www.beliyf.com 46
“So we dig into your deepest truth – your

Beliyf, to draw creative inspiration and
reimagine your communications in a
coherent, consistent and compelling way.”
“Your Beliyf will become the life force of

your reawakened, reenergised and
uniquely vibrant organisation.”
“Wonder”, “energy”. “animate”. “awakens”. “reenergised”,

“vibrant”. “creative”.
Words that ooze positivity and excitement are sprinkled

generously throughout their story, expressing Beliyf’s passion
and enthusiasm for the work they do. You can tell they care
before you even talk to someone and if they’ve taken this
much care with their own site, they’ll do the same for you.
www.beliyf.com 47
The killer line comes at the end of the page:
“People will see themselves in your story

and use it to tell their own. You’ll become
an extension of who they are, making them
not just customers or employees, but
believers.”
Using all those positive words is all well and good, but at the
end of the day, potential customers want to know the benefits
of a product or service. Beliyf describe exactly what the result
of their help will do for their clients.
Notice the smart copywriting technique of the periodic use of

their name throughout this page, making sure you are aware of
who they are, which is especially beneficial as they have a
slightly odd name but this is their introduction to you so they
certainly want you to remember them.
Focus
It’s very clear they’re very focused on one thing. They don’t do
web design, SEO, web development, branding and every other
www.beliyf.com 48
digital service known to man. As they say themselves: “We help

organisations articulate who they are and why they matter.”
As an introduction to Beliyf and what they offer, they want to

guide you through the experience of who they are. You’ll find as
you explore the site that there aren’t four or five things you can
do, there’s only one. It’s very focused so they can achieve a
goal.
Their goal is for you to find out who they are, like what they
offer and contact them. The final step of this introduction
process is the contact page.
For the reason of aiming towards a focused goal, it’s a

perfectly fine choice to hide menu items behind a menu
button, even at desktop sizes. Those who want to find more
information can do so by exploring the menu.
The footer isn’t even included on previous pages until you

reach this one. That’s how you know they’re deliberately
focusing you down a path. General advice would say you must
www.beliyf.com 49
have a footer but there are times where ignoring design

conventions can increase the effectiveness of a design.
Long Pages can be Extremely Effective

The length of this page reminds me of a landing page Sean
McCabe designed to sell his Learn Lettering course:
“You’ll hear a lot of marketers tell you that

you have to have your subscription box
“above the fold,” but I’ve yet to hear of one
experiencing the kind of numbers I did.”
Sean went on to make over $93,587 in just a few days. Clearly
the length of the page didn’t negatively affect the success of his
project. In fact, a longer page almost certainly helped
because thoroughly why anyone should sign up and it was
wildly successful!
You’ll also hear marketers say you’ve got to keep things very
short and simple. An 8,000+ pixel long page is completely
opposite to that advice.
www.beliyf.com 50
When done well, long copy (and therefore long pages) can
seriously boost performance, as Ramit Sethi found:
“In repeated testing with tens of thousands

of data points, my long copy outperforms
shorter versions. For example, I recently ran
a test of 4 entirely different versions of an
email. There were long versions, short
versions, and minor variations on each.”
“In fact, the longest version won, beating

out the next-best-email by nearly 50%…in
revenue.”
The vast majority of “expert marketers” giving out advice
simply have not tested long designs or copy.
Arm yourself with this information the next time a client wants
to cram everything into the top of the page.
www.beliyf.com 51
CREATIVITY
It wasn’t a surprise to discover Beliyf was design by Mike Kus,
one of the most creative web designers out there.
The visual design stands out in this rather drab world of flat
design through the use of wonderful colours and painted
leaves, wood and stones. A quick look at Mike’s dribbble
account reveals his mix of digital and real world techniques:
“I collected the leaves, wood and pebbles

for this project. I painted the leaves and
then hand painted the patterns for the
leaves. I did the same for the pebbles and
the cross section of the tree trunk.”
It works beautifully and because no-one else is doing it, it feels
unique and fresh, even though it isn’t the first time anyone has
done something like this.
It contributes to a timeless design that will look just as good in

five years time.
www.beliyf.com 52
The creativity on show here is wonderful but it never takes away

from the main message but enhances it. Their service is all
about making their clients unique and they create trust by
displaying their own uniqueness to the world.
I can imagine the design brief was something along the lines of
“LET US CONTACT YOU”

How often do you see a company offer to contact you? It’s very
uncommon but that’s exactly what Beliyf do when you reach the
contact page.
“We’re excited to see you become more of yourself and less of

everyone else.”
Such a great way to encapsulate everything they’ve said

previously in a single sentence.
53
IMPROVEMENTS
The call to action buttons are a little weak, visually. They get a
little lost as a result. Being the great design it is however, there
isn’t much to distract you. Having said that, they would stand
out more if they were full colour buttons rather than text
surrounded by a border (sometime referred to as ghost
buttons).
www.beliyf.com 54
DISCOVER YOUR BELIYF

Make others believe in your own design work by learning from
the great design Beliyf have released into the world.
Find your unique 10% to take your design work to the next
level.
This is great design because it is simply good solid web design

at its best. Just simple, straight to the point design.
55
L EI S
D ACRO
NV E R
M
F ROORM E
G R E AT
DESIGN
DISCOVER
Get more great design studies with the Learn from Great
Design Volume 1 book and you'll be able to able to make
MORE
more informed design decisions, improve your eye for great
design, communicate design decisions with confidence, keep
up to date with modern design without the stress and get
better results for your clients all with hours and hours of
studies done for you.
Get the full book here

Learn From Great Design Volume 1

Uploaded by

Copyright:

Available Formats

Learn From Great Design Volume 1

Uploaded by

Document Information

Original Description:

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Learn From Great Design Volume 1

Uploaded by

Copyright:

Available Formats

LEARN

Most designers look at inspiration galleries when stuck but

It’s time to learn from the best.

I’m currently on a round the world trip with my wife. We’ll be in

Overlaid on the image representing the vast landscapes of the

The search bar is the prominent factor on this page, and so it

selecting different places causes the map to transition between

where there each are relative to each other, without me

If it didn’t animate between selections, I would have to navigate

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

SELECTING DATES AND TIMES

What’s great about this is how the focus is purely on picking a

Why Split the Process into Multiple Parts?

Choosing a date is focused on just that, reducing distractions

As well as looking great, it’s also is fantastic to use. As I

images were edited with a uniform style. Either way, significant

Imagine if all the cars were at weird angles or had different

TYPOGRAPHY AND VISUAL

it for headings at large font sizes as well as small copy with

What this great use of typography does is easily allow you to

What happens now is the size property “merges” in with the

One Strange Interaction

screen view over the page. It doesn’t load another page as

BEYOND THE CAR SELECTION

The Avis redesign is responsive and doesn’t disappoint. It scales

There are small changes I would make on mobile without

direct access to a way to go back would be nice. Not a major

Hertz seem more interested in promoting as much as possible

Europcar are the closest to the experience of Avis with a large

They know you’re probably visiting because you want a car/

The overall experience isn’t nearly as slick and focused as Avis.

Have a look at what happens when I select the UK and then

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

received a reply at the time of writing. I will update if I get a

The website for Orangina is dripping with character (pun

wanted to review it because we can learn from the great design

SHAKE THINGS UP!

I used to love Orangina as a child. It seemed special to me

Orangina are rebranding themselves in an attempt to stand out

Personally, I find the posters to be a bit plain, and what on earth

Now, those are great designs, even if a little dated. Anyway, I

The analysis is split into the following sections: branding and

BRANDING AND VISUAL DESIGN

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

top of the blue background with orange contrasting very well

design in something as simple as the menu. It would function

You’ve probably never seen buttons designed quite like this,

Actually, I wouldn’t be surprised to discover the bottles were

I’m not saying you have to learn 3D modelling, of course the

CSS3 animations give life to the various flavours of Orangina

Rather smartly, Achtung! took the Orangina’s established

“We took the all-time famous Orangina

The screenshot below shows how the slight irregularities of

The strong visual design is adapted perfectly well to mobile

“To be daring in everything we do with the

As a result of everything they’ve done, the site is fresh (last pun,

If you’ve ever held an Orangina bottle, you will know it has a