- Welcome to The Journey.
Today we're gonna talk about
15 website design mistakes.
And we're curious, are
you making any of these?
Alright. So there's 15 areas
that we wanna dive into
and where we see a lot
of mistakes happening,
starting with Above-the-fold.
This is your intro.
What are customers going to
see and what they should see
when they land on your website right away?
So we have an example,
thanks to our buddy Nealey.
He created a site just for
this episode, just for us.
So Sam and I had stuff to pick at,
and also a visual example
to share with you all today.
So first off, taking a
look at the screen here.
Emma's Restaurant.
No, you guys, I don't have a restaurant.
How could I handle restaurant
plus Coffee and Kickflips?
I mean, come on.
- She can do it, she being modest
- I'm only one woman.
But here you see on the top
of the website right away,
the title of the business,
Emma's Restaurant.
I'd probably come up with
something more creative
for my restaurant than
that, but Emma's restaurant.
It's great because right
at the top you have
the about section services, et
cetera, where you can go to.
However, you do wanna make
sure the name of your business
is there, products and services.
But one thing I'd recommend
is having like a little guide
on the side where all of this is,
like the three bars you could
click on it and it cleans
it up a little bit.
I mean, that looks a little distracted.
- [Sam] It's busy.
- [Emma] It's busy exactly.
- [Sam] It's a lot of different, if it's me.
If I'm looking at this,
it's a lot of different
things that I can choose
and am thinking, Oh,
which one should I choose?
- [Emma] Yeah. And for example,
there's a social media here,
but Facebook next to it.
So why wouldn't that be done together?
So could have some work on
the above the fold here.
- So number 2: Speed.
You wanna make sure that
your website loads quickly,
and I did notice for this one,
it did load rather quickly,
- God job Nealey.
- Shout out to Nealey
for making sure it did.
So making sure it loads
quickly on desktop, tablet,
and mobile is important.
- All three.
- So number 3: Responsiveness.
You wanna make sure that your
website looks just as good
on your desktop, as it also
does on your mobile device.
- Number 4: Intuitiveness.
Is it obvious what the
user should do once they
land on your website?
And in our case, it's not so clear.
It's definitely not obvious
because you land and you know
you're at Emma's restaurant.
There's a lot of different
options at the top
of where to go. But in
addition, there's this photo,
which I do like the photo,
but the text that actually
prompts you to do something
is not visible right away.
You've to scroll down like
this and not to mention the
spelling error there, but here it says,
get added to our newsletter,
So that's clearly what the
restaurant wants us to do.
However, it's not so intuitive
at first because it's not
visible when you first get to the website.
- Alright. So number 5:
Navigational simplicity.
Is it easy for people to
navigate your site? Let's see.
- [Emma] Well, where do you wanna go?
- [Sam] Let's go to the about section.
- [Emma] Yeah. Let's
learn about my restaurant
because I don't know anything about it.
This new to me (laughing)
And when I click about, what happens?
- [Sam] Blank page
- [Emma] 404. Page not found.
- So you wanna make sure
that when you have places for
people to go, you actually go
to where you want them to go.
- [Emma] Or maybe it
works for Story. I mean,
maybe that's where the about
section was supposed to be.
- [Sam] Let's see.
- [Emma] Nealey. What's up?
You're fired. Page not found again.
Navigational issues on probably
all of these (chuckles)
Number 6: Readability.
Is the text on your website
actually easy to read?
And when you look at ours,
well, I like the boldness
besides the spelling error,
get added to our newsletter,
we need to scroll down a little further.
Yeah. About, okay.
- [Sam] The text kinda
blends into the background,
the white background.
- [Emma] Yes, it's gray on white.
- [Sam] Exactly.
- [Emma] I'm hurting my vision
just reading my own website.
- [Sam] You've taking the
time to put this on here.
You want people to
actually understand what
you're putting on there.
So think about the colors
when you have your audience
in mind.
Are they gonna be able to see it?
- Yeah. The color of the font,
as well as the background.
Now, thankfully Nealey didn't do this,
but make sure that when
you have a display file,
it's easy to read. You don't
want this fancy scripty font.
It's just gonna strain the eyes.
- So number 7: Scannability.
Is it going to be easy
for users to quickly
scan your website and see what they need?
Looking at this one,
it's a little difficult
- Yeah, people don't want
to search for too long,
search too hard to find
what they're looking for.
And in this case, there's
just a lot going on
and it's rather distracting.
Number 8: Cleanliness.
Is your website copy clear and error free?
Now, we've already been scrolling
through for a little bit
and you guys are probably noticed some
of the spelling errors.
So, if you know someone
who's great at proofreading,
kudos, hit them up, let
them review your website,
have multiple people do
it, because right away
that's gonna give a pretty poor impression
of Emma's restaurant.
If I have these spelling
errors like we saw earlier
up top here with our restaurant,
restaurant spelled wrong.
Who's gonna trust my food?
If I can't even spell
restaurant right on my website.
- [Sam] You can lose credibility
- But also you can hire a copywriter.
So that way you don't even
have to worry about it.
That's a professional.
They can take care of all of that for you.
- Copywriter, professional
proofreader, or both.
- So number 9: Elegance,
White space also known as negative space.
You want people to focus on
the areas you want them to pay
attention to, for
instance, high end stores.
- Good example.
- They don't cram a
whole lot into one space,
They have wide aisles and
they want you to focus on the
merchandise that they want you to buy.
- Just made me think of
the last time I went into
an antique store, which was
the exact opposite of this.
There's so much crammed into one space.
It's very distracting.
I often ended up leaving
with zero purchases.
- You don't want that to
happen to your website.
So in the same frame, you want
your website to be very clear
and able to have people focus
on what you want them to see.
Here, this website, we
don't really have that.
It's a lot of different
colors and it's really busy
and really making my eyes hurt.
- [Emma] Yeah. So use white space
as a primary design element.
Number 10:Branding.
So on your website, you
should definitely have
certain colors that you're
using that are on brand
and then be consistent as well
as the font and the style.
And then that's gonna set the
stage for the rest of your
platforms as well, because
this needs to be consistent.
The website. Oh yeah, and logo.
Be consistent across your
Facebook and Twitter,
Instagram, et cetera.
And on this site here, so far no logo.
And I know we have one,
so we need to fix that.
And there's a variety of fonts.
The colors, while it starts
off with a very organic food
vibe spices. I love the coloring here.
You don't scroll down too
far, we're getting into
a whole another color scheme.
- [Sam] Reds and blues.
- [Emma] And there's bright
red and the bright blue.
- [Sam] Purple and tan.
- [Emma] Oh my gosh, horrible
purple with a weird mustard
yellow, it's all over the place.
- So number 11: Contact Info.
So say for some reason you
still wanna eat at this
restaurant. There's really
no way for you to get in touch.
There's no address the links don't work,
no phone number to tell them
how horrible the website is.
So you wanna make sure your
contact info is clear and easily
discoverable on your website.
- Alright. Number 12: Search.
How well does your search
bar work or feature on your
website?
As you can tell him, maybe
this is for a reason,
there is no search bar on this.
So even if you did wanna do
a quick glance at the menu
and you type in menu,
there's no way to do that.
So now there's no way to
even google or googling.
Yes, that is a verb.
- It's a word
- (chuckles) No way for it to occur
on Emma's restaurant's website.
- So number 13: Timeliness.
Now, as you'll notice at the
bottom of this site, 25% off,
and it expires 2014, way overdue.
You wanna make sure anything
on your site, like your menu,
your contact info, or any other offers.
You want that to be up to date.
- Number 14: Annoyances.
While this website has many
things that annoy both of us.
One thing it actually doesn't
have and be mindful if this
was yours. Popups,
- Flash.
- Flash.
- Autoplay with videos.
- Yeah. Think about it.
we've all been in a
coffee shop at some point.
It's quiet. You're gonna
check on your website,
maybe to figure out where
you're gonna get dinner tonight,
and then this video pops
up and music is playing
and someone's talking and
everyone's looking at you
and you're just trying to
figure out how to close it.
And then you end up leaving the website.
You don't want this to
happen to your customers.
So be mindful of annoyances.
- Alright. And finally
number 15: Error Handling.
That we already know a lot of
these links don't go anywhere.
You oftentimes have options
of having a 404 page
or somewhere it says,
"Hey, we don't have this page
set up yet, go back here"
so that you can actually go to where
information actually is.
- Yeah. I just get a
page not found there's no
404 page error there.
So you wanna make sure you clear that up.
And yeah, like Sam said,
make it easy to get back to
where you're supposed to be.
But additionally, I should
have links on all of these
and take off consultations.
'Cause what is that about?
What are we gonna consult
my restaurant about?
That's a wrap. You just learned
15 website design mistakes.
Comment below.
Tell me which mistake on my
site caught your interest
and be sure to like this video.
- And subscribe to our
channel and ring the bell,
So you're notified when
we're having fresh content
coming out.
This is The Journey.
See you next time.
