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.
Tidak ada komentar:
Posting Komentar