Creating a logo, choosing fonts, and designing a brand identity

[Applause] [Music] [Applause] [Music] welcome friends back to another video in our best for series building a Squarespace site from scratch start to finish this is why I do the acronym and you do the explanation and your defense scratch and start both start with us oh and they both have a C in them finish yeah there we go okay so in this video last video you walked people through the mood board kind of the initial color exploration visuals in this video you actually build what I would call is the brand as the assistant creative director on this project I would call it the brand which is really fun and I again like I watched these videos back not seeing the whole process and I get to see what you go through and it's just so fun to watch oh yeah you picked that font oh that fall in looks cool oh wow it now is a logo like how did you just make that a logo I hate logo design I'm so bad at it so it's fun that is in my opinion what's really fun about this video is you are gonna see the kind of meandering wandering oh wow that's our brand name is wandering in favor of my brain that build up this brand from just the mood boards so I take you through looking at the mood board picking out design elements searching things like creative market for cool thoughts or graphic elements that are pre-made that we can use in the the brand styles and then ultimately you'll see it all culminate in some fonts that I pick out for the brand our color palette and then a logo and some graphic elements and it really does start to kind of build it out into this entire brand and that is what I'm going to take forward into creating the Squarespace and what I think is really fun about this is again if you watch the intro video to this series what we talked about was we're gonna sell this whole package the brand the site everything when it's done and my hope is that someone watching this just goes I can literally just change my name in this font that you've chosen and that becomes my logo and it just becomes everything for you and it's done it's literally out of the box done for you you just have to change a word in the logo so that's really fun and I think that as you watch this back you'll you might be able to see just how different this could evolve for depending on what type of business you have like it's not just for creative studio which is how you set this up it could be for a lot of different things a photographer and artist musician anything could be really fun yeah so I hope in this video it's longer than the last video hello don't I know but I'm just saying I'm getting them prepared cozy up you're gonna learn a lot of those kind of tips and tricks you're gonna learn some secrets that I use in order to test run different graphic elements before I buy them and hopefully you're just entertained by the like I said meandering way that we ultimately arrive at this brand so without further ado let's get it alright in this video I am going to show you how I take this mood board for the fictional brand that I'm creating and I'm going to transform it into all of the different brand elements that are going to go into the final website design so the typography the fictional logo that I'm creating the graphic elements all of that I need to design those different pieces so that when it comes time to build the website I'll have this fictional brand too based off of now normally in my design process I follow a very specific order to coming up with these different brand elements it's the order that I go over inside better branding course and I usually start with typography and then I solidify my color I come up with the graphic elements and then I use all those elements to build a logo and then finally photography and that's sort of the order that I recommend people use especially if they're starting out and building their own brands but in this case you are going to see me kind of Bop around and use different inspiration points until I arrive at all those different elements probably at different times you've already seen that I've used the mood board process to come up with my color palette and I don't stray too far from that so since the colors are already decided now you'll see how I pick up these different pieces along the way of the typography and the graphic elements and you're gonna get to watch that journey inside my crazy brain as it unfolds so the first thing that I'm going to do is I'm going to use what I call my visual vocabulary to look at this mood board and pull out any design elements that specifically speak to my five tone words here so when I say visual vocabulary what I really mean is just design elements that evoke a specific tone word so to give you an idea of how my brain works I will go through each of these tone words than see using my visual vocabulary which design elements I think speak to this word so first let's take creative what is giving me that feeling of being creative and you start to identify the actual visual elements that are speaking to that tone so these brush strokes for example feel creative to me and also maybe in this top image you can see almost like a canvas or a you know brushstroke texture to that top one so that feels very creative now for organic we all have our words that evoke different feelings for us for me when I say organic I really mean both this this mixture of earthy and grounded but then also this idea of very unstructured and so not rigid so it kind of it occupies those two places of meaning in my brain so I look look for images with design elements that speak to that word so quite literally that is something like you know a botanical or a leaf shape here that kind of has that organic feeling but then also for example the randomness of the shapes here that that very unstructured shape that could feel organic same with just the movement of this painting and additionally these shapes down here all of that feels very fluid and organic okay now quirky kind of feels for some reason in my mind a little bit retro a little bit unexpected maybe playful and so I can look at this board and see things like definitely the shapes and the unconventional nature of this arrangement of letters feels kind of playful and quirky to me I think the color combination of these two feels quirky to me and really just this overall kind of vintage vibe like this chair and this cool booth here they all just feel a little bit unexpected a little bit left of center as for bold whenever I think bold I think of contra asked so I love the thickness of this font in this image I also just love the the boldness of the couch in what is otherwise a more simple design interior design the boldness of this shape of the leaf that's more of a dark color compared to the white background that feels bold to me lastly we have this word refined which I think provides a nice balance to the previous word bold and in my mind refined means something a little bit more subtle a little bit more delicate and maybe a little bit more simple so for example in this image the serif font here feels a little bit delicate more refined compared to say the boldness of this font I also love for example in here we have both because this font with the M and the Morgan may feels a little bit bolder and maybe even a little quirky because it has that retro look to it but then this very delicate and simple circle to me adds a little bit more of a refined nature to it so what I'm doing as I go through all of these is I'm just taking sort of mental notes of any of these visual cues that I can pull from and then I'm going to start a new art word big surprise and I'm gonna write down some ideas of places that I can go hunting for some of those visual elements so what I wrote down for this was some type of cool serif display thought which was largely inspired by this image here but I thought that could definitely pick up the bold and also quirky kind of retro feeling of those two tone words then maybe some organic in perfect shapes definitely I was inspired by this image as well as the Lula image down here and to me that occupies the more organic maybe even quirky and playful position there on the tone words the other idea I wrote down was randomly placed simple geometric shapes which is just my convoluted way of saying I really picked up on in this Morgan may image the simple geometrics and how not just simple but how perfect those geometric shapes are in contrast with some of these more imperfect shapes I thought there could be something into staying there playing off of those two elements together so that way I was getting still a little bit more of that creative unstructured placement of them but the shapes themselves could be a little bit more refined and simple and then finally painterly brushstrokes I picked up on initially just to occupy that creative word on the brand tone word so I think between all four of these jumping-off points I've pretty much hit on all five of my tone words and that is my goal with all of this is can I look for enough of these different elements to come together in order to represent visually these five colors okay so let's go hunting together let's say I'm looking for this cool serif display font here the first place that I go every time is to creative market this is for a couple of reasons I think that the quality of design assets here if you've never been a creative market it's just basically a marketplace for all these different types of design elements I really like it because it's affordable typically but you're still not utilizing free assets that just anybody on the internet can have so usually the quality is a little bit better and then I also feel great supporting other artists and designers and just throwing some money their way because they take the time to design all these things not to mention it saves me a lot of time if I'm buying things like patterns or graphic elements I don't have to create those myself so I love looking for different brand elements on here not to mention I often find a lot of inspiration just from the display images that people put together because they're incredible so you could do something like search retro serif font just here in the search bar and you would get all of these different options here that you could look through but in this particular case another way that I do this is I'll go to Pintrest and I'll just search creative market and that pulls in a lot of these display images on creative market but the algorithm is kind of filtering based on things I've already looked at which I find very helpful so this was actually an image that I came across in my mood board journey and it's for this font called Ryland created by Jen Wagner and immediately it stood out to me because it fits to me the bill perfectly it's got a little bit of a retro vibe to it so to me it's kind of that quirky throwback but then it's also something about these thin parts of the letters here feel a little bit more refined as well as it just being kind of a serif font but then the thickness of the strokes themselves feel really bold now just a reminder I'm super over analyzing these things are all kind of going on in my head instantaneously I'm just like oh that fits the vibe of what I'm looking for but I'm trying to really verbalize it for you guys so that if you're not a designer you can really see what my process is like and you can start to pick up on a lot of this like I said visual vocabulary like oh I didn't know why I thought that that font felt bold but it's because like Caroline said the strokes are really thick so I hope that gives you some type of rationale when you're searching for images and design assets online as well what I also love about this is a it's very reasonably priced 19 dollars it also comes with this companion font which is called Cairo grotesque I don't know if I'll use that but I like the way those play together in the first image but then what I also really love is the third thing it comes with are all of these hand-painted high-resolution shapes so these are what I would call a graphic element and what's cool about that is it takes a lot of the boxes that I just mentioned to you guys it's brush stroke so it's got that creative vibe to it there are sort of geometric shapes but they're very imperfectly drawn so maybe they have a little bit more of that organic texture to them and so if you can get all of this with $19 that to me is a heck of a deal so this to me feels like a really great place to start because like I said it checks a lot of different boxes what I'll do during this part of the process is just kind of copy and paste a lot of these images that I find inspiring so that I can see things at a glance and how they kind of combine with what I've already created so these are just a bunch of images I found I think these were some textures on creative market this was a stock photography pack that I felt was very serendipitously aligned with the color palette it just felt kind of earthy but also simple and refined and I knew that this fictional brand that I wanted to create I want it to be some sort of creative consultancy or creative studio somebody who is in a creative field but maybe they have clients and then maybe they have like an online course related to whatever they do like social media consultant for example I also found this Instagram story templates with these abstract lines not that I'm looking for Instagram stories but this is something that I could be inspired by and recreate my own version of these sort of organic lines I thought I was really neat and then I keep coming back to these imperfect shapes overlapping with some of this transparency you see it here you see it here and then you see it up here in the mood board so to me that is a cue that maybe I want to create something or combine elements in a way that gives off that effect once I feel like I have quite a few different graphic element options to choose from this is the phase that I like to call try before you buy so I don't know about you but I don't want to just go and draw even if it's $20 I don't want to drop $20 on a font that I'm not going to end up using because for some reason it doesn't go with X Y & Z other element that I create so for all of these different graphic elements I like to try them out before I actually say okay these are the things that I want not to mention in my head I'm kind of trying to keep my overall cost under a hundred dollars I think a hundred dollars is a fair investment in design elements that you're gonna create into this beautiful brand so I also like to kind of price things out before I just impulsively buy one thing now I have a couple of secret tips on how to try different things before you buy them I'm gonna share them with you in this video since I feel really really inspired by this Rylan font that's actually where I'm going to start over here on creative market where the font is listed a lot of times you will see an area to do preview text here and you'll see it pop up below for some reason the preview is not working on this font but that did not deter me friends I know that Jenn Wagner has her own website so i typed in Jenn Wagner Rylan font and I looked to see the font listed on her site and she actually has a font preview down here so that's what you're looking for is a font preview usually like I said you'll see it on a creative market but this for this particular case I didn't see it but can't stop me because I I tracked it down so what I like to do here is put my brand name like if I if I thought I was gonna maybe use this font for my logo or a headline on my website but for this brand I know that this is what I want to use for the logo font and I'm calling this kind of fictional brand galactic creative agency so let's say I want to use that we're galactic you'll see why I picked the name a little bit later didn't cut it didn't come along until further in the process but I'll should kind of share with you my inspiration okay so once I have that I am going to on my Mac hit command shift 4 and that gives me these little crosshairs to do a screenshot so now I'm going to head back over to Adobe XD and drop in my screenshot here and I'm telling you this will make a huge difference if you're seeing it in your brand name or in the environment that you are in the context rather of where you're trying to use this font and you can decide if you really like it so I really like this font I think it goes with the vibe of what I'm trying to create up here now I can start being inspired by that and kind of seeing where it leads me and playing around with okay let's just pretend I'm gonna build out my logo here so where I went from this is I kind of wanted to pick a font I knew let's say for my fictional brand I'm gonna create galactic creative agency since this is so ornate I want a thought pairing that's a lot more streamlined I think what I went with was just this all caps adèle sans and I made sure to increase the letter spacing so that it was a little bit more refined and because the other font is so bold I wanted it to have a little bit more white space in between the create and it was just this happy accident that where my brain spaced it was right in between the gray background color of the text preview but I I just was like oh that's a happy accident I should also say it and just remind you guys when I say try before you buy there's no part of me that is trying to swipe this font for free and try to like use it in my website it's really just to test run here in this program and then I decide that I like it I'm definitely gonna pay for it so that you can actually use it on the website but just want to make sure I explicitly said that so now that we're building this together I really like it the way that these are pairing but now I thought okay let's go one step further and see what the spot would look like in our brand colors since we've already decided the color palette and so here is where I get super super sleuthy to try and see what the spot would look like in a different color obviously I can't just highlight this text and change it because it's a screenshot so instead of doing that what I can do is open my screenshot in Photoshop and then I can go up here to select color ranch and I can just I drop this gray background color I can address adjust the fuzziness but I think this will be fine and click OK and that's gonna pretty much select the entire background color and I just hit delete it'll get a little bit grainy the more you kind of zoom in but pretty much it'll give you an idea of this font with without the background color and what you can do from here is now I can go into my color overlay and I can choose my brand color let me show you a cool thing with colors by the way while I'm here another reason I love XD is because of this little assets folder here so if I delete all of these this is how you'll start out with zero colors here if you just highlight this little color palette of all these shapes that I've created and I click Add it'll automatically swatch all of the hex codes and I can have those as an asset like a color library throughout my whole document so that comes in handy big time so to pop back over to photoshop I can just right click this coarse green color click copy and then I can paste it and voila we have this here in the fourth screen so I'm going to hit command a to select all of it copy it here from Photoshop and bring it back over here and so now you can start to see what this would look like in green and so I actually already kind of built this out so I had my creative studio now in the green and then instead of that gray background I decided to make the background this parchment color - nicely kind of encapsulate those items and now I can say okay I really really like this font I'm already leaning towards it and this is already giving me a great place to start with my brand elements once I had two of the fonts picked out that's when I wanted to start playing around with the more graphic elements like those blob shapes or maybe other geometric shapes those other things that I had on my graphic elements list so in order to do that I came in to procreate on my iPad and the first place I found inspiration was in this image from my mood board if you remember I was talking about how I liked the idea of these very perfect geometric shapes but maybe they were in like a texture that was more imperfect and more creative looking so that was my initial kind of point of illustration I have these brushes that I have purchased before that are called crayons and so they have this cool crayon texture to them that's more rough but then I thought okay if I can create more of a perfect circular shape but in this more rough texture that might look kind of cool and what if I had a lot of different ones you know like a line like here core square or whatever so that was my initial point of inspiration I played around with that until I kind of came up with these little shapes in my color scheme and I thought oh those are kind of interesting refined yet playful and quirky because I'm playing with the proportions and then they're creative because they're in that rough texture it just brought together a lot of my different elements and I also decided to add these little background colors that you can see with a more solid wash of color and I purposefully kind of made them a skew so they weren't perfectly colored in I thought oh that's interesting so the final bit of inspiration came when I realized that if I if I took this kind of pink shape and then I rotated the more mustard line like I just did this sort of on accident it created what looked like a little planet and then I thought okay what if I instead of doing this X what if I turn that into a little star and suddenly before I knew it this idea of these little you know star shapes that definitely feel like something when they're aligned like this but could also be much more abstract and it wouldn't have to be so literal and so that's where the galactic name came in I had a different name before that but I thought oh that's cute I'll do this very loose kind of space theme but if somebody wanted to retrofit this website for their brand and they didn't want anything to do a space you could use some of these more star shapes and rather than creating the sort of planet alignment you know you can use them separately so that was my inspiration point and once I had some of these elements I brought them back over to my Adobe XD document okay so once I had this final kind of cornerstone brand assembled together this is my fictional logo so it has the font that I wanted it's got a secondary font here and it's got these graphic elements that's plenty for me to kind of pull from and build off the brand from there so I took this logo and I started surprise surprise a new artboard and so this is where I'm going to build out all of my fonts and the different graphic elements that I'm going to use using this as my inspiration point also just as an aside I did want to see what this lock up this logo lock up could look like if you replaced your brand name with it so I tested it with made vibrant and I still think it looks really cute and again like I mentioned before you could change these elements if you didn't want it to be so kind of Spacey but I still think it feels abstract and not too literal so with the website if you did want to just revamp your logo you could totally do that from here it's pretty obvious what our headline font is gonna be since we like that Ryland fonts so much so I went ahead and used my little Photoshop hack to type in let's say like what I think could be a brand tagline or a headline on on this website I typed that into the font preview and then use the Photoshop hack to see what it would look like in these brand colors but once I did that I got kind of curious about different color combinations aspects especially going back to the inspiration and knowing that this coral and pink looked really cool and so I just wanted to play around with what color combinations could work so I did things on coral I did the mustard on the tan I did the pink on the hunter green and then I did the mustard on what I'm calling mist and so all of these color combinations looked really cool to me and I just put them in here so that I would remember when it comes time to do the website maybe some cool design treatments with these different color combinations also like I said I pretty much already picked out my h2 font just by accident knowing that it paired really nicely in the logo with my headline font so I'm just gonna call that my h2 font and I used the same letter spacing and everything as in the logo for that so that was pretty easy for me and then finally I thought let me at least pick out some potential body fonts so that I can use that on the website when it comes time for the design I don't have to decide exactly right now because like I said I'm not creating this brand it's more for the website and so the three that I thought of that I thought could occupy something missing between these two fonts I picked out a serif font called Laura these are all google fonts because I know that Squarespace plays really nicely with google fonts and I also wanted to knowing that Rylan was a lot more custom I wanted to offer up a brand font that could be really accessible and you can download google fonts for free and use them on a lot of different programs like keynote and Google slides and all that stuff so the three I went with were Laura Futura and quicksand Laura I thought was cool because it's like a lighter serif font but I wanted to have at least one serif font in there too just to see what it would look like on the website and if I liked it and I felt like it went with the brand better that way Futura has a cool kind of retro yet modern vibe to it that feels a little bit kind of outer-spacey to me but also just fits with the mood board and then finally quicksand is a little bit thinner than Futura but occupies the same space it has a really grotesque which is another font term but grotesque vibe to it but then also has some like softer edges anyway without getting too much into it those are the three that I chose so I'll try those out on the website and then of course we have the colors that we already chose but the last piece before I was ready to take this to the Squarespace website was I wanted to incorporate more of these graphic elements and so I went back to my trusty Rylan font and if you remember I saw that with the font you get these painted shapes and so in true try before you buy fashion I wanted to use some of those to see if I could turn them into graphic elements so that's when I hopped back onto my iPad so all I did here was I copied the preview image from creative market for those hand-painted shapes that come with the riling font and I just pasted it right here into my procreate document again I am gonna try and play around with this image and manipulate the shapes here it's gonna be a low resolution version of whatever I would do because remember this is just kind of trying before I buy to make sure that these shapes are the direction that I want to go and so I'm just testing it out in my own here if I use these for the final brand in the site I will purchase the font I will get the high-res vector shapes here and I'll manipulate those and it'll be a much cleaner high-resolution version but for now we're just gonna do it in a low res environment and play around with some different techniques so in order to isolate some of these shapes I am gonna need to remove the background image from them so the first thing I'm gonna do is kind of remove this top text here I'm just gonna cut that right out and now I'm gonna go back to my selection tool and use the automatic selection to select this background and you can see it kind of inverts the colors there so you know what is selected so the black area is what's gonna be selected so when I go to my selection tool there I can just literally move that background there's still a couple of little cutouts here that I need to remove okay so now you can actually see that I've removed the background and now all of these shapes are the only thing on the layer so now what I did was I cut out a couple of them to play around with them and I'm just gonna walk you through my layers because I already did this step so I have I just basically cut and pasted these three shapes onto their own individual layers and I used my color palette to recolor them so I already did the green and the pink and now if you want to see what I did for the rust color here you want to make sure that your shape is has alpha lock selected and what that means is you'll see the transparent where's pop up behind that element and that just means that when you apply a brush to that layer you're only gonna be able to paint on that object so I'll just show you without alpha lock this is what it would look like if I if I added a brush to that layer but with alpha lock I can only go within that so that's a fun way to recolor elements so let's say I wanted to recolor this element in this mustard color and I couldn't use my crayon shape to kind of give like a rough texture to it so that's what I did with those three elements but if you remember from the mood board one of the treatments that I wanted to try out was this overlapping shape with maybe some transparency between them so I took these three elements and I basically positioned them really really large on this background image and you can see the reason that it's grainy and everything like I said as I'm working with a low-resolution so I manipulated I'm manipulating just one image but remember in the future this would be a high-resolution element so you can do things like this but the pink that's on top of this green square you just go to the you click this little N or M here and you can apply all of these layer styles so I'm on multiply but you can do linear burn color burn you can kind of go through the whole mix here I like to multiply because it was kind of subtle and so I did the same thing with this circle and I really like what's going on here there's texture so you've got some of that creative tone word there's the geometrics that we talked about as a as a graphic element there's the imperfect nature of the way that the shapes are created so it's a little bit more organic and I love the play of the transparency I think it's very visually really interesting and so that's when I started bringing in some of these elements from the logo that I already created like the little planet or the circle with the line through it the Stars and just all of these other little hand drawn elements in my different brand colors and to do that all I did was create a new layer and then make sure that my brush was on the crayon here and I chose one of my brand colors and then you can just create all of these little doodles and these will probably change perhaps when I start to go create the website because a lot of times I'm creating the graphic elements that I need for the context of the website but this gives me such a visual language and a visual library to be able to play with and a lot of really unique elements to add to the website design the final step of this stage is just to come back to my brand element or here and to paste that image so I can kind of see how it plays the rest of my elements and I really like that like I said so I think that pretty much solidifies in my mind that I'm going to go ahead and purchase that font with the hand-painted elements I know I can use those and then the other graphic element that I was deciding on was the stock photos because I know I'm gonna need that for the website build and the one that I found was over here on creative market it was this I think it was called tan lifestyle photos and I like that it comes with little mock-ups too so again keeping in mind that this target fictional brand would be a creative studio of some kind so maybe they'd want to show their work or things that they've designed or clients that they've worked with etc on the mock-ups so I did just copy like screenshot again try before you buy one of those images to see how it played with the colors and I like that the graphic elements are much more free-flowing and creative and quirky and all of those tone words but then to me these photos bring in that simplicity and refined part of the brand tone words so I really like the way that these play off of each other and I just mocked up a little headline style here that I might play around with just again to see how all the elements play together and I added my little shapes there so I'm really happy with the way that these all balance one another and as I said my next step is going to be to purchase those two items the stock photos and the Ryland font with the shapes and now I have all the elements I think that I need in order to start designing this website

Channel: Wandering Aimfully

Views: 30,025

Rating: 4.9859815 out of 5

Keywords: wandering aimfully, jason zook, caroline zook, building a business, entrepreneur couple, creative business idea, how to create a logo, making a logo, simple logo design, creating brand elements, graphic elements, creative market tricks, find fonts on creative market, rylan font, branding 101, creating a brand, procreate logo design, basssf, choosing fonts, designing brand identity, creating a logo

Id: 6W7bgX5D_Bc

Length: 34min 21sec (2061 seconds)

Published: Sat Jul 06 2019