[Music] tip hello everybody and welcome back to tiptop today as another basics for beginners we're taking a look at shape Theory now before I get started let me just tell you this is not going to be a comprehensive guide this is more of an intro um for those who really want to get started in design and understanding how shapes invoke meaning just inherently in in the very being that they are they have meaning assigned to them subliminally um and this is going to touch upon that and then off hopefully offer some uh ways for you
to advance your knowledge even further past this so let's get started so shape theory for beginners then basically much in the same way that the human mind derives meaning from color as we spoke about in our color theory tutorial uh it two derives meaning from shape meaning that when we see a certain shape a certain pattern on the screen our mind subliminally unconsciously derives meaning from that and depending on the shapes and lines and corners and things like that we de derive different meanings from what we see um without even really realizing it until we
sit down and actually analyze it ourselves so a designer therefore can use this to infer meaning within their designs um basically everything that you put on the page will have a meaning of some kind and you want to make sure that as much as you put down as possible is actually sort of on purpose meaning what it is plenty of designs designers out there put things on the page for no other reason than it looks good and that's fine that's totally fine thing to do but what makes a great designer stand out and I wouldn't
put myself in that bracket I'm still very much learning but what makes a great designer Stand Out is understanding um what their shapes and what their elements on their page mean what they infer basically so I'm just going to take you through the basic shapes and their bog standard entry level understandings and what it is they convey um so let's start off then with circles over and ellipses now Circles by their very nature evoke a positive message um they're often linked with things like Community Unity friendship love things like that and that's because of their
natural shape if you look at a circle your eye is drawn around it and back to where you started just by the very nature of the curve now you can see here on a high contrast background for example our blue circle and the red background naturally you find your eye moving around it now as a western audience you read from left or right so the first thing you'll probably read is the sentence circles ovals and ellipses evoke and then the shape of that Circle draws you around it and almost back onto itself again um and
that's where that sort of sense of community and Unity comes from uh in that it yes it is involving and it's accepting um and it's a shape that imbus a sense of acceptance but it also it does that by separating itself from every other element on the page um everything within the circle is a sense of community um so you can use circles to link objects together um and things like that now Rings evoke the similar sort of thing however they are in Western culture at least um attributed also to marriage and partnership and Longevity
and Longevity especially because of that nature like I said of a circle or a ring in itself um you're naturally bringing it back around to where it starts um ignoring of course the fact that there is no obvious place where a circle starts and ends there that age-old you know saying um but if you pick any point on a circle your eye will naturally draw yourself background to that point and that's where that idea of longevity and marriage and partnership by marriage doesn't mean literally getting married it can do but the marriage of two separate
things if you like not necessarily marriage as in you know the Christian ceremony that some people do or sorry the religious ceremony that some people do um also Sonic the Hedgehog uh cuz rings so here's some examples of logos there now this isn't just um logo design we're going to talk about we're going to talk about other things as well but logos are a great place to start because they have to convey their meaning in as simple way as possible basically now think about some of those things that we just talked about marriage partnership longevity
but also positivity Community Unity friendship love all these things now look at these logos and think of how they include those let's take the Walt Disney one for example W Disney is known for being this familyfriendly on the surface at least uh familyfriendly loving um film franchise okay so there's this collection of films and all of them have a certain theme and all of them run along the certain lines um and there is this sense of family and Community within Walt Disney they are their own contained thing and everyone you know have seen a Disney
film now the way that they invoke that in the uh logo for example is this sort of uh star line or moon shape that goes across the top half basically draws everything together it encapsulates that castle it Ates the name Disney it encapsulates all that and brings it into one thing and says this is all one thing together they're all parts of a whole um now if you move over to the NASA one for example uh this is an idea of this again this encompassing hole yeah as in NASA the um space agency okay so
it's trying to portray this idea that NASA itself takes this vast idea of space and makes it manageable to the the commoner if that makes sense you know to the layman term um this idea that through NASA this unbreachable um expanse is achievable by the community by this group of people uh and you can see that they've actually got two circles using here obviously the main Circle that encompasses the logo but then this oval or this ellipse that uh represents a star in orbit uh or a planetary body in orbit not necessarily a star around
the NASA logo um which is sort of layers upon layers of community and uh longevity obviously especially in this one um Google logo then for example is incredibly welld designed um and has got a perfect use of circles to obviously here you're working with text so you are limited by um the shapes of the letters that they need to be however you can see that they've made the O's in Google absolutely perfectly symmetrical same goes for the G's uh the capital G especially has been worked out to be a perfect circle even to the point
where the length of the um sort of I don't know what you call it that the prong of the G if you'd like would perfectly fit inside the Gap um that is left behind so it's almost like they've just taken a segment out of the circle to make it a g so the the circle here is very very prominent similar thing for Burger King however the different waiting also gives it a sense of movement things like that as well it's like a big swoosh around the burger um Starbucks same sort of thing obviously Community is
very important because it doesn't sell coffee it sells a state of mind that's what Starbucks does um and Vodafone again it's a mobile network network the very key word of that is a sense of community a sense of acceptance you know come with us we are trustworthy we will not take all your money um we will take all your money and provide to you in return a community and a sense of worth now that's a lot to draw from a circle but there are people who are paid millions of pounds um to determine this and
to understand the theory behind it I am in no way one of those people my understanding of logo design and and shape theory is probably not much better than your own but I am just trying to impart a little bit of knowledge here uh for the observations that I have made um throughout my time working as a designer so here for example circles don't necessarily have to be the dominant element to portray their meaning now you can see here in these two websites uh and there's a link in the bottom right hand corner of the
page if you want to go check out more of these um the circles are almost used on the left design they're very dominant okay the two o's in Zoom they're sort of the main focal point of the page again using Color to make them the focal point surrounding them in a darker gray so that they stand out but also the circles are used to sort of draw your eye down the page um as well as around so you can see that here the waiting is very much from the top left to the bottom right and
your eye naturally moves that as it follows the curves of the shapes um now they are just a web design company um based in India but uh what they're trying to do is a sense of again this worldwide yeah they're based in India but they are a community they're a community you can trust uh to build your website for for you um this is what they're trying to say I have no idea what they are actually any of this um but they're trying to remain accessible yeah so it's very child friendly not child friendly but
very friendly colors you know quite childish colors rather um and this sense of this kind of almost sanserif font um and especially the circles using the word design up there uh they all are trying to imbue this sense of trustworthy you know longevity Community as in we'll always be here for you and we are in ourselves a community uh same thing goes on to the right however um the circles here are less dominant uh it's just going to show that even subtle shapes can still portray what you want them to portray and here just explores
again a little bit of color so combining it with the yellow makes it pop it makes you think happy sunshine you know um Victory I think in this case uh as a man that overcomes HIV I think this website is uh and this this sense of um Power because of the color and obviously the circle um gives that sense as well this all-encompassing uh Power now on the left hand side you've got the more toned down colors because it's um actually I think a green campaign it's about a campus going green and being sustainable uh
and the colors there used again with the sense of community that the circles portray have this Tranquility to it and that's something that curved lines also portray is this Tranquility this calm and we'll get a bit to that later but um it's good to understand how all these elements come together to portray a meaning so moving on to squares and rectangles then now squares and other harded shapes uh like triangles but we'll move on to that later they represent or they they don't represent they portray naturally in their very being a sense of stability um
inherent in this becomes balance and efficiency uh but also sense of strength okay so when you look at a square it looks by its very nature solid okay and I've reinforced this hereby having a shadow that's being cast so there's other things that you can attribute that to um sort of augment your portrayal um but squares and rectangles by their very nature look Dependable they look strong um and they look professional now unfortunately if you combine hard Ed shapes with the cooler colors on the Spectrum uh it can make a designer kind inviting um now
this isn't necessarily true for example the NES um console system by Nintendo that's all great and it's all hard edged but it was marketed in such a way that it didn't matter um plus back in the ' 80s and '90s um ' 80s for the N uh those colors were very much the colors of Technology whereas now it's more cool cool Blues um and dark Grays uh kind sort of coming back into Trend now just a warning there color is very important when you're combining it with shapes uh some logos then for example now one
great example here is the Hillary Clinton logo but we'll talk a little bit more about that later um because of this great use of the arrow um as well bu built in there but for example all these huge companies Microsoft Marvel BBC all want to have a sense of professionalism stability yeah especially the BBC the BBC's idea behind them is they're always going to be here you can trust the BBC the BBC was the first uh television channel in England um it dominated had a huge Monopoly over most television for a long long time in
England and still does not so much nowadays because they're not really keeping up with the times however this logo is built to say I am solid I am Dependable I will always be here I am the BBC yeah and it gets that by having these fre solid equally space squares that very much State just by looking at it you can tell this is supposed to be a solid Dependable logo okay no frills no funny business just efficiency okay similar sort of thing with the Microsoft logo um with the windows obviously however they' throwing some poppy
colors in there to make it a bit more approachable um Marvel again the same sort of thing nice bold red to say that they're a bit out of the ordinary but again a big solid Dependable rectangle Adobe of course because they're trying to say that they are the leading manufacturer of artistic software okay and you've got to be Dependable you got to be solid and understandable also they throw themselves out there as sort of not teachers necessarily but the people with the knowledge okay and to be the people with the knowledge you have to be
dependable and therefore they've gone for this sort of hard-edged um quite angular logo um even in the font face that they've chosen for example um just to say that we are the be all and end all of design okay Flipboard similar sort of thing Domino's Pizza I just threw that one in there because I'm not sure why they chose a square now I know why they did because it's a bloody Domino yeah as in the game dominoes but it just goes to show that you can twist this on its side and have a diamond a
square doesn't have to be square flat edged yeah it could be rotated you can do whatever you want however then that does start to um portray this similar sort of things as triangles and things like that just something to be aware of now DHL for example doesn't inherently have rectangular things about it there are the rectangles on the side and some of the letters have been cut up to be part of rectangles but it's a bit more unique in that the rectangle here is more abstract if that makes sense now the text is tilted to
the right to give it an idea of speed because obviously they're delivery company things like that um and they kind of supposed to look like a tire tread as well is my understanding hence cut in half things that so there's all these things that are imbued in there but the basic thing if you look at the border of it it's still a rectangle okay and it's still a square shapes and solid hard edges to say we're Dependable we're efficient and we're going to get your package to on time oops um so yeah if you break
down a logo to its basic shapes these ideas they never change they're always there because naturally that is the way the human mind destruct uh deconstructs them okay so squares are often used in web design um because the back end of web design is grids mainly um oh excuse me that was my hand knocking there um now it's easy to build web apps and websites based off of grids because that's how a computer understands the world it's easy to chop it up into squares uh that doesn't mean they have to be boring however um for
example on these next Pages here uh just because they're made up of grids doesn't mean they have to be regimented you can be quite abstract with the positioning with the colors uh for example on the left here you've got all sorts of different sizes that's all FP Flipboard style and on the right you've got all the pastel colors and the asymmetrical layout to imbue that sense of yes we're dependable and we reliable but we're also still inventive and that's the important thing Square doesn't have to be boring that is a complete fabrication you can do
some wonderful things with squares triangles then um let's move on to triangles triangles are often associated with uh things like power science religion law order those sort of things um because the triangle in itself in terms of um construction is probably one of the strongest shapes you can have and now whether that's related or not I don't know um all I know is that if you use it for the Triforce then it's got to be important am I right um so there's this natural inherent um being that a triangle has that Associates it with power
now personally I think this is because triangles they always tend to point towards something okay because they have um three points to them so whichever way they go they're pointing at something yeah so it's this idea of progress of moving forward of going towards an aim yeah or uh a goal or a being or something it's progress of moving towards something and I think personally that's where this idea of power and especially religion um comes from this idea of making progress towards a goal um however like squares and rectangles they also convey the things such
as stability balance professionalism efficiency strength due to their hardge edges okay so you can combine triangles and squares quite easily uh for example here here in these logos uh the network rail one for example um they taken a triangle taken a couple of strips out of it to make it look like a railway um and it's pointing to the right it makes it gives that idea of progress um but also that stuff of not necessarily Law and Order and religion of there however triangles their other main conveyancing um conveyancing that's not a word there other
main what they mean is progress yeah they always Point that's my point they always my point is they always point so it's this idea of making progress this idea of power a goal to go towards okay even with Adobe for example uh the triangle of the a gives them that sense of Law and Order and we are the ones you can trust uh cat for example make manufacturing things like boots for example is the most famous thing they make um and they are a brand that is well known for their still toeat boots which are
solid Dependable okay powerful yeah um now here's Google Play for example not necessarily Dependable not necessar powerful not necessar religious however that Arrow comes back that progress Arrow it's universally accepted now that an arrow facing towards the right is a play button okay now but even way before that it gave you that sense of progress especially in the Western Hemisphere where we read from left to right um it gives you that sense of moving forward of play yeah of go um now they're inherently masculine as well and I don't mean that in you know the
mku manly but I mean that in the way that um for years and years this idea of masculinity has been associated with power now I'm not going to get into whether that's right or wrong um I don't think it's right but there is that Association that advertisers use to get that you to buy their products yeah Mustang mitab bishy pretty much all car manufacturers have got if they GE towards men have got some form of triangle in their logo or in their designs okay it's just something to be aware of and something you should maybe
try to um notice in the real world a bit more uh so triangles are great building tools because they're very versatile now on this uh on the left here there's not necessarily at first glance a prominent triangle okay there is in the top of course the menu things like that but if you dissect those rhombuses that make up the background they're not actually rectangles they're closer to a triangle design the way that it's weighted for example makes your eye naturally makes it make a cut from that middle point in the top middle of the screen
down through the Classico word to that bottom uh right Brown section your eye naturally kind of chops that up due to the placement of the text which means that you dissect this page in your brain as a series of triangles not as a series of rectangles or at least I do and then on the right here for example it makes a really interesting way to uh lay out a grid that isn't necessarily a square okay um now technically it is they are bound they're boxed by squares so if you look at each triangle for example
you can put an imagin imaginary box around it um and they're lined up in that sort of 2x3 or 3x two um layout however the use of the triangle um and coupled with a let's go rally yeah it gives you that idea of movement of progress of power of doing things and that's where I think that understanding of Science and religion comes from this power of this uh presence of progress this presence of um going and doing which is ironic really in the state of religion certainly um but I'm not going to get into that
I alienate half my audience there maybe um so yeah absolutely just keep that in mind triangles a great build tools because you can use them in so many different ways so they work equally well as a dominant or a tertiary feature much like the circles before now a dominant feature on the left here because your eye obviously goes straight to the center of the screen and draws out from there and this is a really great composition a perfect way of combining rectangles and triangles okay something to keep in mind this is beautifully constructed this web
page on the left um your eye naturally follows exactly where it's want to go along those lines yeah it dissects the page it gives you this idea of they're in control of their environment okay um which is obviously what they're trying to portray here with the man climbing the rocks and the women doing exercise and things like that uh on the right hand for example the triangle bursts out from the page because the rest of it is locked in with these regimented squares yeah the content of the squares doesn't even really matter it's the fact
that this triangle stands out in the center um as a dominant feature okay um as something to draw your eye and to be the focus of your attention which is what triangles are great at okay they being the focus of things so let's move on quickly then to horizontal and vertical lines I'm not going to get into too much detail here because they're inherent in the shapes that they um uh sort built from if that makes sense so vertical lines then for whatever reason tend to give you a sense of masculinity of strength of aggression
okay I think this is because um this idea of you look up and down okay it's this idea of um not necessarily horizontal is obviously Pro progress but looking up at things and looking down at things can either be daunting if looking up or you give you a sense of power if you're looking down and it's that idea of your eye is drawn up and down the page that gives you that sense of you're either in control or something is in control of you um horizontal lines on the other hand or curved horizontal lines as
you can see there give you that sense of community tranquility and calm that's why waves always represented by this horizontal curved line okay it's not just because it looks like a wave it's because it gives you that idea of the ocean uh this idea of like Tranquility um and sort of not Mel col but acceptance again it comes back to this community thing okay your ey is drawn along you're making progress yeah um so we've only just scratched the surface of shape Theory there's so so much more one thing I highly recommend you check out
is gestal Theory um which is one of the core um foundations of understanding uh the theory behind everything to do with what is on the page okay so composition waiting uh balance shapes colors things of that um cutouts negative space positive space everything you want to know basically starts in gastal theory so check make sure you check that out um my rule one it sounds a bit cheesy but my rule one is everything should mean something if you put it on the page it means something because meaning is everything whatever you're doing whatever you're making
whatever piece of media you're making it has a meaning whether you think it does or doesn't even if the meaning is I just want this to look good yeah you still have to understand how to do that and you still have to understand how the things you put on the page influence that um and everything you do does have meaning everything should have meaning and the worst thing I think you can do as a diner is just put something there because yeah just plunk it down because you think oh it looks a bit boring oh
it looks a bit this whatever if you want to do that that's fine I'm not knocking it at all I'm just saying that what separates good designers from great designers which again I don't think I am I'm I'm definitely trying to be it's what I aspire to be what separates good designers and great designers is great designers know why every single thing on their page is there why every single element is where it is and looks the way it does and they understand that um and that's what separates the men from the boys and the
ladies from the girls um so thank you for watching everybody I hope you enjoyed this sorry it was a bit of a long one um but I think it was worth it I hope you do too um if you have any tips or advice or anything like that please just pop them in the comments below or actually I have an email address now info@ tip. XYZ and you can check it out there pop any questions along that you have uh however in the meantime I really hope you enjoyed the video guys and I'll see you
all next time remember to subscribe for more tips tricks and tutorials thanks for watching
