G'day Ladies and Gentlemen, Welcome to Draw
With Jazza! I'm Jazza and today we're
going to talk about web design. Having
your own website is one of the most
important things, when it comes to
building your brand, building an audience
or serving a product. I'm going to be sharing
some tips, tricks and techniques that you
can use to make your website stand out
that, when applied, will help your website
serve it's core purpose to the best of
its ability, be it to sell your product
your artwork, to build an audience, so on
and so forth.
This video is sponsored by wix.com, an
amazing place where you can build your
own website fast and easy! It's an
incredible place to build any kind of
website, from a really simple portfolio
or contact page, through to a really
robust business website with e-commerce
and more. So if after this video you want
to start a website, perhaps as an art
portfolio or a place to sell your work
or find freelance or tell your story
WIX is a really great place to do that
and get started today, for free. So i'm
going to jump into today's video by
breaking it down into eight different
parts and I want to talk about these
eight different principles and give some
examples of each in application.
The first and most important thing to
ask yourself when building a website is,
'What is it's purpose?' Specifically broken
down into two questions; 'What is the hook?'
and 'What is the call-to-action?'
This website is an example of someone
who sells typography posters for
children. As soon as you visit the
website you see examples of the
typography posters, as well as a clear
statement of what the product is and the
name of the brand. Immediately after that
you see the call-to-action- 'SHOP NOW'
which when you click on it, then
immediately people are able to make
their purchases and the call-to-action
has been made. There are, of course, other
parts of the website; all posters, custom
things, statements and 'About' sections but
really, as soon as you go to the website
these are the most commanding aspects
that you see. Further browsing the web
site reveals all the other stuff but
really, that call-to-action and the hook
has been served immediately. Here's a website
where, even though it's in Turkish and I
can't understand it, it is a great example of
how the first thing you actually see is
the call-to-action, that being booking a
stay in what seems to be a hotel,
and it gives some very large, very
colorful images to help make that happen.
Before you jump into designing the
visual aspect of your website you first
want to understand what you want the
viewer to do and then you need to ask
yourself 'How can I keep them there long
enough to convince them to do that?' The
next thing I want to talk about is
clarity. I've seen time and time again,
when people design their first website,
they follow an instinct quite often of
putting as much content on the website
as possible.
Essentially, the instinct being followed
there is the thought that, the more you
offer, the more value the viewer gets.
But the reality is, people who visit your
website are used to visiting a lot of
websites very quickly and dismissing
them just as quickly.
Most people are familiar with the same
don't judge a book by it's cover, but
anyone who's ever been into a bookshop
knows that you do tend to judge books by
their covers!
It's only natural and when you visit a
website, you're presented with the cover
and you're only really going to scan the
synopsis and scan the cover before you
decide whether you're going to invest
more time in this or not. Imagine that
this is a book that you picked up in a
shop. You know that it's pretty, it's
really simple and straightforward and if
you want to find more information all
you need do is go to one of these few
links; gallery, video or contact. It's that
straightforward. They just show you their
product and invite you to see perhaps
more if you're interested or to contact
them if you want it. Here's the landing page
of a photography website which, as you
can see, is extremely simple and when you
click to enter it then you're presented
with a gallery of their work, which is
easy to click on and navigate and
explore, highlighting the work and what
the creator of the website, the
photographer, wants you to see. When you
design your website treat it as if it's
going to be a book, flipped through
casually, by people not necessarily
invested in what you're writing, or
putting out there. Make things clear and
simple and make the hook and call-to
-action appealing and immediate. Now let's
talk about reading rules. This is
probably something you may be familiar
with and that is quite clearly that
people read from left to right and from
top to bottom. This is important when it
comes to design, especially because our eye
naturally scans over a page, rather than
reading meticulously through everything
presented. As a result designers often
put the most prominent information in
the top left and design the rest of the
webpage in, a sort of F shape design. Not
of course having nothing in the bottom
right, but prioritizing the information
and imagery and text towards the top
left corner. Here's a great example of a
website that uses this left to right and
top to bottom viewing experience. Our
eye's immediately drawn to the upper left
where we can see first the logo and then
of course, the menu options, but that is
complemented subconsciously by this very
attractive image, also clearly
demonstrating the service offered and
reinforcing the quality and the brand of
this artist. Here's a really different
context using a similar principle. Of
course, a very large image takes up this
home space, even on the homepage, we're
presented with a large image that takes
up the majority of the space, but our eye
is almost immediately drawn up to the
top left where we see the logo and the
business name. And then, now that we've
already seen this large image and the
logo, we are brought to our different options
at the website, immediately enticed to
browse their services. There are
exceptions to this rule but this is
really important to keep in mind, because
it's a behavior pattern that has been
scientifically tested and proven. The
next we want to talk about is making your
website mobile friendly, and it's funny
that so many people think of this as a
feature.
I'm sorry people, it's 2016 going on 2017
and having a mobile-friendly website is
no longer feature, it's a necessity! More
people browse the internet on mobile
devices than on desktop computers. On top
of this exponentially changing trend,
the other thing to remember is that
viewer habits also change, along with
this. So aside from just having a website
that presents clean and clearly on a
mobile device, I recommend keeping in
mind two things. Keep in mind scroll
fatigue- people aren't endlessly going to
scroll down and down and down on your
webpage on a mobile device. They're going
to leave before they have to scroll too
far. And, of course, remember to use a
'click economy'- essentially meaning you
don't want people to have to press too
many links or buttons to get to a place
you want them to go through. If you want
someone to buy an item from a shop, you
want that checkout process to involve as
few clicks as possible, from the moment
they make the decision to buy something,
all the way
through to completion of the purchase.
Likewise, if you want people to sign up
to a newsletter or contact you, make sure
to keep the 'click economy' in mind. Now
let's talk about text. This is a pretty
straightforward one. I'm sure a lot of you
who are sort of 'design savvy' will know
the difference between 'Serif' and 'Sans
Serif' font, so just quickly cover that.
Simply put, the difference between Serif
and Sans Serif fonts are that Serif
fonts have little structural details or
embellishments. So, as you can see here,
for example, the lines on the edges of
the S, on the bottom of the R, I and F.
However, on Sans Serif fonts, these
embellishments and details are not
present. The reason it's worth mentioning
this is that, while Serif or Sans Serif
fonts are both equally usable or
appealing for titles and headers, it's
highly recommended that, in areas of the
body text of the website, that you use
sans-serif. Now, when it comes to text
it's not just the fonts that have the
potential to entice or push away the
reader. This wall of text here is an
article that I copied and pasted,
written by Matthew Schnipper, that is on
virtual reality, but when presented like
this, nobody in their right mind,
especially if they're visiting a
website for the first time, is going to have
any interest in reading this, no matter
how interesting the article is, unless of
course they already know and trust the
author. All of a sudden, just by slightly
repackaging and breaking apart the wall
of information that we had, even a larger
article can be much more enticing and
readable. This is just a really simple
scratch together example of what I'm
talking about. You can see by using a
different font for the title, something
that makes a bit more of a statement,
catches the attention and entices the
reader to start scanning that article
bit. Aside from breaking apart the
information into easily digested
paragraphs, there are also a few key
segments of the article that I made
stand out in different ways, either by
indenting and italicizing, like up here
in the top left, or selecting a slightly
cryptic or mysterious statement like 'not
enough it turned...' out, isolating that
putting that in the middle there, just so
that people know that a story is going
to be told to them. And then later on
something big happens, the reveal of a
'two billion dollar.... 'something" just by
simply scanning over
this article top-to-bottom, the person
can get an idea as to whether this is a
story that they may not be engaged in, and
you sort of do a lot of that work for
them.
The other thing worth mentioning when it
comes to text is that there are some, I
suppose you could say, 'blacklisted' or
very unappealing fonts to people, simply
because of how overused or inappropriate
they tend to be for design. So it may be
worth a little bit of your time or
energy to google search what some of the
font trends are and what some of the
front 'no-no's' are. Now let's talk briefly
about images. If a picture says a
thousand words, then surely it stands to
reason that you just want as many great
images on your website as possible, and
you'll be giving as much value to people
visiting your website as they can get?
But once again, it comes down to quality
over quantity and we also come back to
that 'less is more' principle. I really
recommend not overusing images, but where
you use them make sure that they do one
of these three things; that they
effectively inform your visitor of any
information you're presenting, or any
service you're providing; or that your
image intellectually or emotionally
connect the visitor of your website with
your service, product or brand; or of
course, that the imagery on your website
reinforces the identity of your business.
Now, I want to talk briefly about schemes.
Essentially, color palettes and methods
of structure that will entail the
foundation of the visual presentation of
your website. Your website is an
interactive user experience and as such
you're building their expectations of
that experience from the moment they
land on your website, so you want the
browsing and the visual presentation to
be consistent across every single page,
so that the interaction with your
website and the way that they learn
about your product, service or business
is effortless and consistent. Last but
not least and most certainly worth
reiterating is 'less is more'!
Also echoed in the design principle
adage 'Keep it simple, Stupid!' Also known
as the KISS principle. Always remember,
whether it comes to the content of your
website, or the visual presentation of
your design, that less is more and that
effective simplicity is far more
appealing than an approach of design or
content that overwhelms your viewer. I
thought it'd be fun for we go to
take you through a bit of a trip through
time. In getting ready for this video and
preparing the content and the lesson
plan I actually dug through all of my
old versions of the JazzaStudios.com
website and found deep within the
archives of my storage and folders and
backups, the folder called 'Old Poo'
which has my oldest versions of Jazza
Studios. I was 15 years old when I made
this, you can see there's this really
great, you know, repetition of the
background across here. I think I
acknowledged I wasn't a coder and so I
tried to build my website in Flash and
this was my first attempt to do that.
What does this look like? There we go.
So this was my Jazza Studios website in
Flash. What's this? Hosted by Freddy Jr. Jr.
dot com. No, doesn't exist anymore! Okay... and
then I think this was actually my first
official release of Jazza Studios, nicely
anchored in the top left corner there
because I didn't know how to center things.
HTML. I didn't know how to put the content on there
so I just had buttons that led to other
places. Do keep in mind this was when I
was like 15, 16 years old and then
eventually I did painstakingly start to
learn to code and put things together. And
eventually ended up with something like
this, but the amount of pain and effort I
went to to put this stuff together. It
took me months and months to like piece
any website together because I am NOT
a coder! I just needed a place to
show off my stuff and I had to make it
work. I wanted to show you that because I
wanted to reiterate the reason that I'm
really excited about WIX being the
sponsor of this video, because if I had of
had the tools that WIX provides, back
then, to make Jazza Studios, it would have looked a
lot better and a lot different and it
would have taken me a few days as
opposed to a few months. Before making
this video I spent a full day using
WIX.com, making a free website. Seeing how
it feels just to put together a bit of a
sample portfolio website with a contact
page in a gallery and it really only
took me like two hours which is
mind-blowing compared to what the job
used to entail, when I built my earlier
website. So if you're an artist or writer
or a designer and you need a place
to showcase your work or get freelance
or feedback, go check out WIX.com because
you can start today for free.
Keep in mind some of the tips and tricks I
shared through this video, when putting
website together, but there are loads of
great templates you can use and it
really just simplifies the whole process
because they handle the hosting and
security, search engine optimization and
all that stuff and once again you don't
need to know any code, which for people
like me, is a big thumbs up!
That's it for this video, Ladies and Gentlemen.
Thank you so much for watching!
Make sure to like and subscribe if you
haven't yet and, until next time, I'll see
you later. Thanks for watching! Make sure
to subscribe to my channel for new
content every week. If you want to
support my work and get some goodies for
yourself, head over to my store for
archives, ebooks, digital brushes, video
courses and more. If you enjoyed this
video, here's a link to another video you might
like from this channel. If you want even
more, make sure to check out all my
behind-the-scenes action on my vlog
channel, Daily Jazza. That's it for now!
Thanks for joining the 'Arty Party' and
until next time, I'll see you later.