if you're new to web design then you need to know what you don't know so I'm going to take you through four essential principles that you need to be familiar with showing you lots of examples so you can understand what these things mean and then help you take the next step in your journey in each of these areas with more resources my name's Matt I've got many years of experience designing websites and all kinds of other graphic communication so let's get straight into it with our first idea number one there are different types of websites
we might be thinking about online shopping people want to buy something it might be a media website where content is loaded and changing in that site all the time and that's what populates the site like YouTube the site that you're on or a Blog a News website it might be a marketing website where they are trying to sell something and the goal is really for people to become interested in the product or service to become excited about it and perhaps make an inquiry or it might be an app so rather than just simply you know
a website that's presenting information there's actually some sort of backend processes going on there so when you enter information you actually change things so social media websites like Facebook is an app something like trust pilot is an app Airbnb is an app there things where users upload and that creates the content and there's different functions that you can sort of use and and and create and it's just kind of served in the browser or perhaps on your phone or something like that but it's actually a separate thing so you need to be aware when you
start what kind of website is it because that will lead towards the goal on a shop people want to buy a media website they probably want to read view or listen on a marketing website you're usually wanting them to make an inquiry and on an app people come there to fulfill some sort of task having that goal in mind is really really important and remember not all websites are the same therefore they're not all designed and built the same secondly imagery makes or breaks the design so when we talk about imagery we mean photography and
illustration in a very general sense that can be handr illustration that can be 3D elements that could be generated elements it could be textures it could be lots of different things but but the images that we bring into there can actually make or break our entire layout in the hero section for this site Howe we have this sort of loading animation where all these different line art illustrations make up the word mark and it just adds that little bit of visual interest that we wouldn't have Beyond just type on this website the photography is very
very beautiful and this really lifts and Elevate the website I mean if you look in these particular frames like without this beautifully lit photography here what would we have there there's not much there's lots of negative space and just some uh simple type in Black so it really is the photography that sells and makes this website imagery can add visual interest it builds emotional resonance we we really feel something about an image and it transports us into a place so you're beginning to help the pulse Quicken a little bit of your viewer and it can
also be a form of communication this is what we're doing with websites it's communication design so we're giving some information we're letting people know perhaps we're letting them know that it's a small business or a large business we're letting them know this is a luxury good or it's a thing that's more on the value end of the spectrum but we can tell a lot and we can say a lot by communicating through images even if the website is something more where you think would necessarily lend itself to Great imagery like Industrial Coatings we have this
3D shape here which actually gives a sense of depth to the composition because it's rotating in 3D with this lighting and because it goes over and under the type here so that gives us a bit of Interest as we scroll through and then again we have now in this panel a full bleed image in the background and again it's making this sculptural it's making it interesting it's just these turbine Towers something that could be photographed in a very boring way but they've made this interesting they've made it artistic because of the composition and that is
the power of imagery again people in a sort of a clinical uh environment or factory environment but they've actually made this a very stylized thing and that is the power of imagery and how you can really Elevate even things that seem quite boring so when you're working with photographs ask yourself some basic questions like is it in high resolution we don't want pixelated images is the image in focus is it well lit so first of all making sure it just meets basic standards then we want to make sure we're showing it in its best possible
light so how should we crop that image to make the most of the composition does it need grading that's uh playing with the colors and and the light the levels within the image do we need to retouch any elements of the image can we customize the imagery to make it more unique or fit the overall branding this is the work that web designers do to really make imagery sing on a website when imagery is on point we get this kind of effect this feels like very much like a stock photo this image of the family
here it doesn't feel customized um you know and it's kind of washed out as well and then we just have again isolated on a background this inflatable slide here and these things just don't bear any relation to each other and just make this thing kind of feel pretty sort of cheap and sort of homemade a branding agency can really you know create elevated sort of imagery this is the sort of work you know I do as an art director so you see here even with simple thing like something like a pipe you can actually create
really interesting imagery for a brand even again in a more industrial space but what's quite interesting was that is that although this has been developed as a a style in this brand guidelines when I've looked at the actual website here that's not apparent it's not a great use of space this layout with things kind of pushed over to the right here but then look at this image here they've tried to customize it with these Graphics over the top and the logo but again this feels very stock it feels very generic it feels like it's just
borrowed it's nothing bespoke to them um it's at the wrong sort of scale and this doesn't have that particularity that developed in the brand guidelines and that's why it's let down a better example would be this gin maker from France and again their images are specifically art directed we have the bottle in the foreground the lemons in the background to just you know it tells us something about this gen and and what it tastes like and the place and all these images they evoke what the copy is saying the Sun the sea the countryside the
southwest of France and we have you know the stripes looks very French all these little details details on the hand again with a crop part of this image is cut out and then we have the background visible on the other part all these little stylized things put the bottle up in a tree you know it just all little touches we've also brought in illustration here as well as photography for these different sort of ingredients and here at the side with this Lighthouse uh with this little label that sticks over the top so we've got some
layers we've got some depth and it's just art directing our imagery so it feels really deliberate this is really going to lift the quality of the site upgrade your imagery and your viewer will perceive your offering as of higher quality number three bad topography leads to bad ux now ux stands for user experience and with any kind of digital design the user must come first so we're prioritizing what is the best for them and we're thinking about what their experien is going to be through the site and by topography we're talking about the way we
select and arrange time let's show you some examples of this this escape room in Canada appears to be using lots of different fonts and that makes it really difficult for us to understand what's going on we've got this type which is kind of a yellowy green and it's not very legible because it is small and it's not very contrasted from this moving background which makes things even harder to read we don't have enough leading the line out here on these times all the different colors all the different fonts some things are bold tallic it's just
kind of like a mess of things going on and it's a bad experience because I don't know how to take in this information bit by bit and section by section and understand what's going on and make sense of it so I have to do the work to to stop and figure out what's happening instead of this being made easy for me and it just feels a little little bit cheap and nasty really using all these different fonts and colored up type A far better example would be this spectacle maker there's plenty of negative space here
around this title so we can clearly read it but we have fonts that really fit with this aesthetic which is timeless but modern and it really is nicely typed set we've got a nice line length here the number of characters on each line it's not so long that our heads on a swivel and everything just align neatly to the left great contrast here CU it's black on white as much contrast as we can get and it's just all typ set correctly and it allows us to take in each part promises so then we can take
in each one of these panels and they're just aligned nicely to the image so that we can understand what we are and we've got this variation in scale here where we go to these large headlines after these very small captions and all the way through things are just arranged very tidily so that we can take in each panel of the website one at a time the typography as a web designer involves selecting fonts first of all so you want to choose fonts that are appropriate to the feel of the website they give off the right
mood but also that are legible that are easy to read and then nextly it's about type settings so it's the actual arranging of that type on the screen making sure the lengths aren't too long making sure the line Height's appropriate making sure it's a good point size having different contrasts between the size of different fonts all this stuff is involved in typ setting now if I can take you through that step by step as I said at the beginning we're going to leave a bunch of videos in the description of this and there's one all
about typ setting and there's another one about selecting fonts that I'll leave there for you so you can take your next steps to get really comfortable with this you can see how fonts evoke different moods on these sides on this website for Chocolate Company Kinder they've got this writing like where it says moments here in red or a lot at the top and this looks like it's handwritten Maybe by a child because this is chocolate that is aimed at children and it it's there in the headlines but then even with this body copy it using
this humanist Sans serif it kind of just gives that uh sense of something which is just you know quite a quite default and sort of family oriented and not too rarified and not too you know elitist and here again we have got sort of this type where it says bringing little moments of Joy it looks like it's sort of handwritten they're all different they've gone into the detail here like well we've got two T's together they're different from one another so it doesn't look like a font but it feels more like it's a handwritten thing
and it just gives more of a playfulness to it more of a lightess to the whole design where another European Chocolate Company same location same sort of product same category has a different approach to type we have this elegant sort of uh here it is italic serif at the top which gives that sort of old world heritage sense and then we've gone more for a grotesque instead of humanist s Ser so it just allows it to be that little bit more rarified and more of a a Timeless class to it a bit of quality a
bit of uh design uh to it a bit more Elegance to it and so overall there's just the the way things are laid out and the way the typography is done although obviously the imagery and everything about it is also appropriate to the product there's specific differences here between the type that appropriate and type can quickly create that different kind of mood and if we swap these tight faces around they wouldn't seem to fit they wouldn't look right next to the images and next to these particular Brands and finally number four the principle of most
important is the most important principle which is another way of saying that hierarchy is the most important principle that's the principle of most important we want to make sure that we make a decision about what is the priority and that's what hierarchy is you know an order of importance going back to the escape room website there's a pretty poor sense of hierarchy you know we kind of our eyes pulled into this moving background image we've got this big colorful image in the Middle where it says let's party and there's faces which is something we're naturally
look to as humans so we're drawn to that but then their logo is at the top but again that's hard to read and we've got all these sort of medium-sized elements just stacked on top of one another and then these things are put in boxes and such which again give them the sense of like kind of mediumsized blocks and it's really hard to make sense of this because there's not been a clear decision about what's most important so make a decision what is of primary importance secondary importance tertiary importance make that decision and then usually
there's a way to say that okay the primary importance is going to be the biggest thing that's why we're going to express hierarchy visually it's going to have the heaviest weight so that's probably going to be some sort of imagery which tells your story then secondary importance it's probably going to be either something like a logo to orient people where they are a big or a big title or a big sort of headline and then tertiary importance is going to be some sort of communication of value some some smaller sort of type it's probably going
to be thirdly let's look at that examples like on this furniture website it's much clearer CU straight away we have this huge image of the furniture so that gives us a real sense of where we are the kind of furniture it is you already know whether this is something for you or maybe it's not your kind of thing then the large thing is the logo which is kind of split with an icon on the right and then we have got the word mark on the left so it tells us the brand name it tells us
where we are and it lodges that brand name in our head and then underneath we have the by line This explanation with a call to action furniture designed to last crafted for sustainable living it's short it's succinct there's a button underneath which is clearly visible as a button but because there's plenty of negative space around that type it means that we still see it clearly even though it's kind of the third thing we go to in the hierarchy it's not hidden or buried anywhere that's a tidy way of doing it even if your website has
a lot more information and things are changing much more often like an event venue like the Sydney Opera House you can still follow the same principles so they have this large image which goes full bleed from left to right across the page and this gives us a real sense of where we are they obviously have uh so much incredible footage from all the events they do and from their world famous venue and the architecture that they can show off so they're able to Showcase that quickly through this video but we still have this legible uh
headline and just a simple call to action of what's on and then below the fold we have grouped together on the white the highlights of the events so we know that where the navigation is at the top that's kind of the third size element then we have that big uh bar across with the video that's the primary and secondary is the events underneath and then that encourages us to scroll and then when we do this could be very messy but because they're all together in this grid the the grouping just helps them to not be
and helps us make sense and just sort of move our eyes uh through this and as you continue to scroll again we've now got three columns each one of them has this little drop shadow around it so each one becomes a unit and the headlines are the titles of each card are clearly larger than the body copy so again we've got that one two three hierarchy of the photograph getting here so we have the iconic building photographed then we have the title secondary and then tertiary we have the text hierarchy is the most important principle
so so when it comes to hierarchy be decisive make those decisions about what's most important and don't be pushed um to you know try and put everything to the Forefront when you emphasize everything you emphasize nothing so you have to make that decision this is the most important thing and that's where you're going to direct the viewer and then have a large contrast between things so that there's a clear contrast there's a clear delineation that will help you actually establish that hierarchy I've got more videos on the whole principles of layout with hierarchy being one
of them so follow through them so you can really start to figure out how you can make layouts work these ideas are of course not new but if a website just knows what kind of website it's supposed to be has beautiful appealing appropriate imager excellent type setting and a clear hierarchy then it's probably going to be better than 95% of the websites out there remember that in the description of this video there's links to lots of other videos that will just help you take the next step in whatever area you want to focus on next
whether it's developing your type setting skills or mastering hierarchy and layout have a look down in the description and until next time happy designing
