Turning a Brand Identity Into a Custom Website

okay so a client has come to you ready for a website redesign or design project how do you take a brand identity an existing brand identity and turn it into a website well in this video I'm going to show you my process from start to finish on how I translate an existing brand identity into a website let's get into it so a little while ago I did the visual identity for a conceptual project called Benji's deli and Co and they are a subscription food brand basically focused on creating family friendly meals which the kids can get involved in in the kitchen making food a whole lot more fun and accessible for families I'm going to talk you through the process that I took in converting that visual identity into a website landing page for this imaginary client and I just want to mention three key points when it comes to translating a visual brand into a website and the key things to keep in mind mind number one is you have to keep in mind the audience at all times half of translating a visual identity into a website is making sure that that language or those visuals or everything from copy to which pictures you choose to put on the website need to connect with the audience you want to make sure that you're Gathering as much information about the audience and the people who are going to be using the site as possible the second biggest piece of advice is to keep in mind the brand it should go without saying but it's actually quite difficult sometimes to take a logo design and turn it into something that includes font systems color hierarchy image Choice all of those things so if you're in the position where a client has come to you with very little assets then what you really want to focus in on is making sure that you've got a defined color palette for the website making sure that you've got two or three primary fonts that you're going to be using and then I'll obviously making sure that you've got as close as possible on brand imagery to use or at least graphic assets like illustrations iconography and things like that and the last but probably the most important thing when it comes to designing a website for a brand and translating identity is going to be your content now as a designer this might be incredibly frustrating because not all of us as designers are writers and it can be really frustrating in that design process I'm sure if you've designed a website you know that one of the most challenging aspects of this process is actually receiving content from your clients so there's two key ways to solve this problem you can Outsource it to a professional content writer who comes in early on in the process so that you've got defined content to work with you don't really have to worry about it or you can learn how to write it yourself and actually produce the content for your clients and I tend to gravitate towards that option I trained early on as a writer as well and so I actually produce for the most part when I'm dealing with smaller clients I produce their content for them and then obviously allow them to have input on what exactly needs to be said on the site with all of that being said let's jump straight into the first part of the process and this is the wireframing so in the wireframing process I usually start out with a pin and a notepad and I'm going to basically just start planning out which sections I want usually for a full website design I will spend a day or two doing this for all of the different pages and I'll actually come up with multiple different ways of laying out content I'm not really even thinking about content at the stage or even being too finicky about layout all I want to know is okay my page is going to be structured as follows from start to finish it's going to need a hero section I want to include FAQ I want to make sure that there's a slider or something like that roughly so let's go and have a look at my wireframing process okay so we're here in the wireframing phase and and really when I set up an XD artboard I'm always using the 1920 artboard I don't really know where this started but I basically always design with like the largest screen available because the developer that I work with to build websites on webflow we use the Wizardry method to do this and so it just translates really well because we use EMS and Rems as our measurement device so when I set things up you know I'm not too worried about pixels and things like that but I always like designing for the biggest screen available um because it it's much easier to then compress the design down than it is to try and create a version of the site for bigger screens so I always start with the largest artboard and what I usually do is set myself up with a custom grid by converting the grid into one panel and then I usually just decide how much space I want on the left and right when going through that and then I usually just set up my gutters again turn my columns back into 12 and then set up at least like a 30 pixel column in between it just it in my years of designing websites this just works really well for me and then I usually finesse the spacing when it comes to the development side of things but this usually just gives us a really nice base to work off of um so what I'm doing here is just referencing the wireframes and then going in and adding in the text and I usually honestly when I start out I will do a wireframe without any content at all because what I'm doing is it's a bit of a visual layout thing I'm working out you know okay how big do I want these headings you know what do I want to structure the sections as and I'm really just laying these out with um placeholder text at this stage and Adobe xd's got a really great plug-in for this it's literally called Laura mipsum and you can really just add a whole bunch of placeholder text which I find really useful in my design process so here I'm doing what you could pretty much call a high fidelity wireframe where I'm using you know basic fonts and structure I'm not adding any color but I'm planning out how I want the sections to look roughly what I want the layout to look like and how I want to use my grid I'm then going to build out all the rest of the sections as well using the same philosophy I'll probably add illustrations and iconography here as well I know from the brand Suite that we've got some really cool illustrations to use so I know that I've got a lot of flexibility here so what I'm doing here now is I just realized that I wanted to quickly have a look at what the other hero section layouts might look like before I went too far on with the page so now I'm just building out the rest of the sections and you can really see that I'm just I'm using my grid but I'm not you know I'm not measuring everything exactly but what I will do is in the final design phases I'll actually refine the spacing and check the layout and make sure that you know my top and bottom padding is all correct the margins are correct this app that I'm using here is called icons for design through Adobe XD and it's really great it's got a lot of very versatile icons and I really like just pulling them all in and just using them in the design this is really where I'm starting to think out that some general functionality arrows usually indicate a slider of some kind you can also see that I've started playing with type hierarchy here so I've got myself a main heading I've got myself a supporting heading I've got a large body text a smaller body text you know button text Etc usually when you're working with an existing brand they will give you a guideline on what fonts are supposed to be used where um and then obviously you want to follow that as closely as possible but I do think that there is room for flexibility sometimes with web design specifically you know sometimes print application doesn't work as well for web so you do want to keep that in mind and make sure that you're chatting that through with your client at all times because they are really the ambassadors of the brand and and need to be happy with how you're applying the various items but we'll get to that in the design phase what you can see here is I just wanted to create the third version of the hero section so I've just copied and pasted the page and this option is going to go for a burger menu which is going to go in the top right corner so it's a slightly different approach to design much the same hierarchy in terms of information so now I'm just checking the layouts making sure I'm happy with all my sections and then pretty much we're going to send these off to the client but now we don't have a real client so what we'll do is we'll just make an assumption about which one they'll choose and the next phase is apply applying the design choosing a color palette working out the hierarchy of the fonts and bringing this wireframe to life moving into the design phase of this project I'm really going to focus on two main things I'm going to be focusing on how to convey the brand properly on this web page and then of course just making sure that we're connecting to the audience and keeping them in mind and the kind of look and feel that they might be attracted to we're obviously conveying a very specific message with our web page designs and we need to keep in mind that this is really where Brands come to life is online usually when I'm designing websites I must be honest I don't have a fixed process for what I do first versus what I do second but I usually start with color and then I start applying fonts and this is really where I start getting the feel for the site and I start getting the energy right and I start looking at how I want to do things but the other thing that you can really do is with things like buttons and iconography they are the most I find that they're the most underrated way of adding personality to a website right and I really like giving careful thought to how I want to treat things like buttons and illustrations and icons because in my experience with web design they are the most simple ways of adding that character to a design so for Benji's website because we're going for a fine light-hearted and playful look and we really want the brand to be very friendly and approachable I have opted for rounded buttons because I just think that they look a lot more playful and you can add a really cool animation style to them when you start building the website out and then you can see here that I'm really starting to build in the fonts and as I'm working I'm just giving careful thought to what I want to do in terms of styling and color application currently I'm just saving in some Styles which makes updating things a lot quicker and easier I'm also you know adding some basic styling to my buttons and actually turning them into a component so I can just copy and paste one of the most used useful things I've found when I'm working with web design especially in Adobe XD which I've now been using for a couple of years so I'm very familiar with it is using these cool plugins either for placeholder text like Laura mipsum or actually these profile images I find this you know there's a couple of different types of plugins where they give the option to select your shapes and then you go in and choose a bunch of images and they pull them in from stock websites like unsplash and pixels Etc you can see in the background there that it gives you the option to choose the whole process for me is is very backwards and forwards because as I'm going I'm coming up with new ways of communicating the brand and one of those key ways is by adding icons like I said so what I'm doing here is I'm just jumping into illustrator I'm grabbing my pencil tool and I'm drawing a little asset which I'm going to use for the testimonial section and I've gone for a little hand-drawn heart and I'm just going to pull that straight in and read resize and restructure and this adds immediately a little bit of personality to the design now obviously not every brand is going to suit hand-drawn staff but whether you're creating more structured icons or assets or whether you're purchasing them or downloading them from the Internet or hiring somebody to do them for you any which way that you can add something custom to the design of the site I would recommend you do that because this is one of the easiest ways to make things feel on brand so what I'm doing here is also replacing the check marks or the icons or bullet points with a custom illustration and then I'm pulling in the brand assets obviously if you've been given a brand identity and you've got things like stamps stickers and patterns you want to include those on the web design they don't just have to be for packaging or you know brand collateral use them on the website I've got a really good feel for this brand and so what I'm doing is I'm now going to update some of the content based on what I know the brand looks and sounds like so what I'm doing here is I'm just bringing in a sign up form because I remembered from the brand strategy that they wanted to grow a mailing list and you can see that I'm applying the same design to the form I'm gone for these little round Fields now I'm going to jump into pixels which is one of my favorite places to find stock images unsplash as well is really good because obviously for this brand I don't have official photography so if you're in that stage where you're trying to gather example photography for your client to show them what kinds of things they need to shoot then this is a great place to find temporary content like this I'm then going to move into doing the footer and one of my biggest pieces of advice for you designers out there doing websites please do not ignore your Footers they are the last thing your clients or the viewers are going to see on the web website and if you abandon it and leave it and do something really bad then you really do leave a sour taste in people's mouths and I find that a footer is one of my favorite ways to finish up a website do it really beautifully and make sure that it actually looks good so now that I've got that footer designed and I'm more or less happy with it I'm gonna go in and just have a look at the rest of the page and see how I feel about adding in a couple of extra bits and pieces here and there and I sort of had this idea to start enlarging some of the illustrations and pushing them into the background and I really liked that this added a bit of layering and started feeling really complete and started finishing up the design nicely basically I'm just now going back into the design and refining everything I want to make sure that the layout is well balanced and then started realizing you know I'm gonna actually play with some live content so I go ahead and add in some FAQs and as not updating the content with what would be technically real content just so that I can see if I can add a bit more personality to the design so now that we've wrapped up design and assuming that we've gone through a couple of revision rounds with the clients we've now landed on a home page design that we're all happy with so as you can see I'm just going to take you through the design now and just summarize some of the key thoughts so that we can round things off so having a look here what we ended up with is I wanted to keep in mind that we wanted a notification bar for the client usually on a website like this they're going to be doing a lot of promotions and so I wanted to make sure that we had something that they can customize later on where they can announce some of the key things that they've been doing as a company then of course we have our navigation bar with our logo front and center and we've got some of the key pages that we'd probably include and then an option to log into my account or sign up obviously then we've got our hero section which has got some of the basics of a really great hero section obviously a benefit statement we then explain how we do it so fun easy recipes you will love to cook and your kids will gobble down delivered weekly straight to your door so that gives me an idea of what I'm looking at and then I'm going to go straight to pricing plans I want to know how much it costs then I'm going to back up my statement with a testimonial from a very happy customer and basically share with the world why it's working and then I'm really using the brand assets to convey that sense of playfulness and fun for the bengies brand so I've opted for a fairly unconventional option here where I haven't gone for one illustration or an image or a background image I've gone for something that's very on brand for the client and having had a look at their sort of creative presentation and having a look at how the packaging has been designed I know that they've got big blocks of color and then they use the illustrations to support the design as opposed to an overwhelming like photographic approach then we've obviously got some benefit statements over here with a bit more context we're using the icons again to create that playful and engaging feel what's inside and then we've got our custom bullet points our custom slider arrows and our illustrations in the background then they can scroll through the recipes that are on or available for this week or what's being cooked and delivered to the various households this week got a bit more of the brand coming in with our stickers our custom illustration for our testimonial section decided to outline the little images that they look a bit more playful this is something creatively that could come through on social media Etc and something that could be really fun for stickers or badges or something like that going forward so this is just how we're adding brand with a bit of extra color as well another brand badge some more images happy kids Happy Food it's healthy it looks delicious so really kind of conveying that colorful playful feel again for the brand and then a really strong footer just finalizing the site's design with a nice anchor so that pretty much wraps it up if you've got any questions about how to tackle it's designing a website and making it feel on brand to match an identity do let us know in the comments and we'll get back to you with our tips and tricks other than that thanks for watching and I'll see you in the next one bye [Music] thank you

Channel: Flux Academy

Views: 89,501

Keywords: become a web designer 2022, freelance web designer, graphic designer job, web design, web design freelance, web design business 2022, web design freelancer, web design business, web design 2022, web designer career, web design school, ran segall, Flux academy

Id: AWfGGWZMSVY

Length: 18min 51sec (1131 seconds)

Published: Wed Oct 26 2022