Intro to Web Design: Creating a Professionally Branded Website | Alexa Roberts | Skillshare

Playback Speed

  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

Intro to Web Design: Creating a Professionally Branded Website

teacher avatar Alexa Roberts, Web Designer | Solving Small Biz Pains

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

9 Lessons (23m)
    • 1. Intro

    • 2. Branding On Autopilot

    • 3. The Vibe

    • 4. Begin Where You Are

    • 5. Visual Necessities

    • 6. Creating New Elements

    • 7. Brand + Website Auditing

    • 8. What You'll Gain

    • 9. What We've Learned

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.





About This Class

Learn how to create a website that showcases and unifies your brand, on autopilot! Because the easiest way to build trust with your clientele is having a website that looks like you know what you’re doing.

This class will teach you:

  • how to translate your brand to your website
  • how to use color schemes, typefaces and logs to represent your brand
  • ways to keep your branding cohesive online
  • tips to make visual branding easy wherever you design your website

This class is aimed at students at the beginner skill level. All that is required for you to do at this point is look at your website and start thinking of small things to improve the overall branding- (which I teach you how to do! )

If you’re ahead of the game and have access to your website hosting platform, you can immediately start implementing the tips you’ll learn about.

Let’s get branding!


Music by HOODI3 Beats on Soundcloud

Vector Icons created by Flaticon and edited by Voulu Creative

Meet Your Teacher

Teacher Profile Image

Alexa Roberts

Web Designer | Solving Small Biz Pains


Web Designer | Solving Small Biz Pain Points Through Web Design | Owner of Voulu Creative

 I build websites to help businesses and entrepreneurs solve their operations and client interaction pain points! I design custom websites for clients, provide website audits and create improvement plans, maintain online stores, blogs, and informational sites. Marrying automation systems, consistent visual branding and SEO is my favorite way to help clients stress less when it comes to their online presence! 

In my free time I can be found reading four different books at a time, doing yoga, and escaping to Savannah, Georgia.

See full profile

Class Ratings

Expectations Met?
  • Exceeded!
  • Yes
  • Somewhat
  • Not really
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.


1. Intro: um can we finish this video trying to teach people Hi. And my name is Alexa Roberts. I'm a captain on Web designer and owner Pollute creative, recreate beautiful and functional sites for clients that make their lives easier. And today we're gonna be talking all about how to create a professionally branded website. This class is perfect for beginners. Don't have a ton of experience in creating a website at all. Or maybe you do have a website already, and you just wanted to love more cohesive and feel like it was done by a professional. Discourses for you to some of the skills that you'll be able to learn here are performing quick and visual web on its of your website. Being able to identify things that do and don't align with your brand learning visual branding necessities your website needs. Got a brand. Your website have applied the same exact bringing knowledge. Anything else in your business, Whether that's a brand guide business cars, flyers, other promotional materials packaging will be able to make improvements your website that are going to improve your visual branding like your color palette, simplifying your font choices and recognizing what visual elements really do align with your brand and represent your company of the best these air, some things that you're really struggling with in your business. Let's get started. 2. Branding On Autopilot: Well, first off, let's talk about the importance of a cohesive brand. Why can't you just throw up your logo? Half brand website Hafsa business card to meet. Why does it all even need to look professional? Your business is the best reflection of you, right? Especially the clients that I work with all the time that are first generation business owners. They really want this business to represent them. Well, you're putting all of us working to it, so it should. So it's so important for me when I'm creating sites that it seems that the theme of the say is representing the business owner while the company well in the services that they provide . So my goal for your website is that it should brand on autopilot. You shouldn't have to be the ones saying this is what we believe and this is what our company does it. This is what our products are gonna look like. Your website should be able to just say all of that for you. And lastly what a professionally branded website does is it really protects your image and it builds that trust with your clients. If you have a website that looks like a three year old designed. It just looks kind of thrown together, Your clan's heir going to feel like they can't trust you. If you didn't even take that much time building something for your own company, how can they trust you with their work and their clients and their needs? If you have a professional rebranded website that has a great looking logo, great color scheme that goes everything funds that really tell your story, clients are gonna look at that and they're going to say, Wow, this company has it together. They take pride in what they do, They pay attention to details, and they're gonna trust you so much more. 3. The Vibe: So let's start at the basics of what makes a website look really professional and branded. You know, you've been to those websites where you look at them and you just think this looks really out deeded. Haven't even updated this recently. That's not what you want people to think when they visit your website. On the other hand, you know you've had sites where you go to them and you're like how this just looks so put together. It looks like they really took some time, does a scientist, and it looks like they spent a lot of money to do it by a professional. Alternatively, a good way to understand this is just looking at some brands that you love. You wouldn't know what to expect because you know the kind of style that they have now. If you went to their website and you saw something totally different, those ideas clash. What makes the professionally Brianna website is just making it match your brand. Let's say that you have a line of hair care products. If you as a hair stylist are very outgoing and lively, if you're probably gonna wanna have some color and something exciting is This was exactly the case with the past. Client of ours owned a hair salon and wanted to sell her products in an e commerce stories well to really embody herbal personality through her brand on the website, we opened up the whole stage with the scrolling video as well as, Ah, hot pink over They. On top of the video, we carried the bright pink, true to her product lines, further town on the home page. Additionally, on the product for ages, while the photographs have a dark color and background, we backed off on the text on the side here because we wanted to focus to be on the products that she's selling the hair extensions, not necessarily on a super super bright neon text on the left hand side of the page. So we chose to keep the rest of the design minimal and still keep within her color scheme. And every single brand that you love every professional brand does this just without you. Noticing. What it's really about is creating that same five that same feeling that seem experience over and over and over for your clients. They're going to know what your brand looks like visually, they're gonna know what feelings surround your brand. They're gonna know what your brand stands for, and your website should be no exception for that. Now, what is sometimes hard for my clients that I've noticed is figuring out what their professional brand is versus what their personal likes are. So something that I find that clients struggle with. A lot is saying no to the things that don't necessarily align with their brand even though they like it. So there may be cool funds and cool images and cool graphics and colors that you just love . But if they don't online with your brand and they're not on your brand guide and they have nothing to do with your mood board, please do not put them on your website. You can still love those colors. You can still love those different visual elements, but as far as them representing your brand, you need to stay consistent. If you don't, you're gonna throw everything that's a hodgepodge of what you love onto your website. It's gonna look messy, and it's gonna look like it was thrown together and a hodgepodge of things that you love and your clan's heir gonna be like What is going? Oh, this is not a professional website. It can't be which is not what you want them to think. You can be creative and you can choose things that you love. You feel lying with your brand. But as soon as you come across something that you love but isn't exactly on your brand don't put it on the website. Don't do it. Don't even put it in a little tiny corner of the website. Don't even put on one page. Don't do it. Stay consistent over everything. 4. Begin Where You Are: you are in that place. Maybe you're like, Oh, now that I kind of look at my website and look at the other like different variations of branding that I have in my company, I need to get it together. And what do I do now? Because I'm overwhelmed and I'm so sorry did not mean to make you that way. The good news is you can change those things at any time, especially a website. I told my clients this all the time. You know, do not apologize if we need to make changes because it's your site and it should really represent exactly who you want the company to be. It should, inviting everything that you've ever imagined it to be and who you want to represent your clients as so if we need to make changes, it's no big deal, so don't be afraid of that at all. So let's say you're in that place where you're like, Wow, I need to make some changes immediately and I have some business cards and I have some print material that house and packaging, and I have some products. But how do I get that onto my website? So My very best advice for you is just start with where you are. You are where you are right now. You've built so much. Don't neglect all the work that you've done thus far unless you just absolutely, really, really hate it, Which I doubt because it sometime you did really like it. Your business can evolve and it could grow over time just as a website can. So go ahead and look at the print that you have. Look at that marketing material or that logo that's on the business cards already. And transfer that over to the website. Maybe a social media banner colors that you find on your instagram feed. And you can sample those colors and put those straight into a mood board. Or create a brand guide where you just decided, Hey, these were gonna be the colors that we used because that's where we are right now. That is totally okay. Brands evolve over time, they rebrand all the time, and it doesn't have to be a big ordeal if you decided to change that to your website because it's so easy. And if you do really come across something, you have design dirty that you just absolutely hate. I don't want to take it into the future of your business. Don't It's that easy. You don't have to take that into the next phase of the life of the business if you don't want it to be there. And the good news about having a website is you can make quick decisions. Where if you just taken old logo that you're working with right now from a business card, You put that on the website in two weeks later, you decided? Hey, I'm going after it and we're gonna get a new logo. You can throw that on the website immediately. I'm gonna show you how I would do this within Wicks. But really, any Web site editor is pretty similar in the way that you do this. So we have our old logo right here. And this actually was an example of an old logo for when we first started the company. So let's just evolve it to something that we've moved past for now. But for example, sake. So we're gonna go over here and click, add, we're gonna go up to images and then over to my image, uploads this is exactly where you can pull things into wicks from your computer, uh, or things that you already have in your gallery here. So right here we already have another variation of the logo, so you can also crop in and it thes if you need to within the weeks editor. But for now, we're just gonna add it to the page than it will pop it right there on the page. Can scoot that over, delete this old one out of the way, and then we can drag this to exactly where we need it. We can even resize it if we like Teoh and put it where we'd like to on the page, rather than having three or four mismatching styles on your site. It's much better to just have a few elements that you really love and our cohesive across the multiple platforms of your business. Your clients are gonna appreciate it more because they're gonna feel like you're being decisive and making choices and showing them who your brand really is in your visual. Users of the website are gonna love it because it's gonna make it easier for them to visually navigate your website ist well 5. Visual Necessities: Let's talk about those visual elements that I consider it my clients. Absolute necessities tohave under website if you want it to look professional. Number one cohesive colors. We talked about a little bit before us. Faras the brands that you love and creating that by but having those cohesive colors are a must. Keep it between three and four colors. Max. 3 to 4 different colors is plenty. You can have rights, you can have neutrals and they're still in all depends on what you're going for. But that should be plenty. A really great resource that I have found to create your own custom color palette is colors dot co. You can actually go on here and use their generator to choose different color schemes, and I don't even give you an option. Teoh, Change the saturation. Change the Hughes. Change the brightness so you can really customize the color Exactly how you want it, Teoh. A little off which I think is amazing. Once you find the correct color that you're looking for, it don't even give you this color code here at the bottom. That way you can go into something like Camba or Illustrator or any Web design platform that you're using, you can actually paged this code in and use that exact color on your Web design platform. So it's really a great resource if you want to just mess around. I mean, I could spend hours on here and to change all of the colors of ones. You just press the space bar, and it's gonna give you a whole different set to start hanging around with. In the same way colors can create an overall feel for your professional website. So confronts. And this is where people get a little carried away. Sometimes simple is better. You would rather keep it a little bit more simple and have it legible and easy for people to read than some crazy wacky out their funds that you think is really cool and probably is really cool but that nobody can read. They're just going to navigate from your site immediately without even giving it a shot, which is not what you want that's know what your business deserves. Now the big power horse visual images that I tell my clients that absolutely need to be on their site or, if they already exist, need to be confused with the feel of the website to make it look professional or things like your logos, your ads, any promo material that you've had created in the past when with that view, things like canvas were things that were professionally created. YouTube banners, um, Hartner ads from other companies they work with, and they require you to have their badges on their site. You don't want things like that to be a completely different feel than your website. I definitely have experiences like this with clients in the past to have worked with third party vendors, and they needed to display those badges on their website. So what I actually did for that was I pulled those images into something like Illustrator photo shop edited those items, and then I was able to make sure that it matched the feel the color scheme of the client site because I wasn't gonna throw something on there that say their site was blue and orange and white. I wasn't gonna throw something on their site that was like black and purple. That was like my brand. It just wouldn't look right. So even a tiny, tiny things like that can completely change the feel of your site and make it feel like you really did give it some thought and that it was done by a professional. 6. Creating New Elements: your website is evolving and you may be, are ready to create those new elements that are gonna give it a really professional and put together look something I always recommend, even if it's never to show anybody or she'll a client just to kind of help your head space a little bit. Kind of know where you want the branding to go. Started a blank canvas on camera. Start creating a mood board with something like that when I mean my mood board is just a blank space that has inspiring images, colors that you like, funds that go well together. Pictures that have just a feel of five that you really like and you think would go with your branch. Well, start creating those visual elements like that just to clear of your head space a little bit. It will help you so much when you go to redesign the Web site or to just add some additional elements into the website to help support that professional branded look. No, this isn't technically a visual element, but it's still kind of is because you're seeing the words when you're putting things like content writing blog's articles on your website. That content also needs to look professionally put together, so that means having the same voice, and you're writing as well. Now that's not my expertise. I have a client who doesn't necessarily have all that content that has the correct voice and that correct kind of five going on already. I always recommend that they consider hiring a copywriter for them. Nice sit down. We really hone in and focus on making sure that that written content fits the colors and fits that feel that they're going for and also fits the visual graphics that are on the site already. In addition of things like logos and photographs and written content on the same, you also need to think about things like custom created graphics, whether that's from a graphic designer or from whatever what platform you're using to design, make sure that those air also fitting the theme of your site and fitting the color scheme like, Have you ever just been to a website? Really? Wow, everything matches here. This is really pleasing toe. Look at that's why, because somebody took the time to think about really tiny details like that, which is not very hard to do. You just have to be aware of the fact that you're doing it. A great little trick is using custom creative graphics through your Web designer or through a graphic designer to kind of implement your color scheme into those stock graphics or stock photos, making it feel really professionally put together. You can see here in Wicks how we've used custom created graphic strolling with our color scheme. We've used them down here and our services to explain what we dio is. Well, it's further down under portfolios and even behind an image right here. So show you how to do that. What you're gonna do is go over to the side bar and Wicks Goto ad and we specifically used factor. So this is an example. One factor. Images that idiots. Let's just say we want to add it. Another one of these. We drive it there, and these were the original colors. But we can also Dio is going to the design and shoes, the specific color stuff you want and this is all going to depend under color scheme. But you can choose exactly what you're gonna want it till it like, and it's gonna change it for you. 7. Brand + Website Auditing: you kind of know all of the different elements that are professionally branded. Website needs to function together as a whole. How do you necessarily audit your own website? It's so much easier than you really think that it iss all the website it audit is is making a mental or physical checklist of the things that you know are important to your customer and your clients about your products and important lessons that we've learned from this video to check off and make sure that your website has things that your website should have when you're opting, it are those things like the brand guidelines. If there are certain themes that you found when you're looking at style that you like, or the style that your business already has any kind of wood board, take that into account also and see for website is matching that stylus well, additionally looking or other social media channels now I know I know this is a course about Web design and it is, I promise. But your other social media channels do make a difference because if you have a professional brand website, it's still gonna make your brand is a whole look unprofessional. If you have other social media channels that just look completely different, try to tell my clients, you know, let's kneel down the Web design first. Things like your social media, their social media strategists You can work with where you can just kind of implement the same visual rules that we've talked about today on those social media channels. An example of this you can see on our instagram how we've gone back and implemented a grid system so that it totally matches our website. Colors are funds are custom graphics that we've created, and we decided to be a little fancy. So we integrated that instagram grid into our website, which is such a cool thing to be able to do, because then it's like, Oh, my instagram feed just looks like another part of my website. Also think about the things that you already have created again things like your packaging . Any sign is that you may have a physical locations, print materials. Make sure that all of those are coming into your thoughts as well when you're thinking about the auditing because you don't want to go back and change everything on this website and the whole website looks super profession and cohesive. And then you have these fiscal locations that have signs that look nothing like the business. So just take that into consideration, Teoh, that if you do need to do a little bit of rebranding, that may be an additional cost that you may have to consider a swell. 8. What You'll Gain: So we've talked about the technical things that you can gain out of having a professionally braided website. But let's kind of talk about what you really gay. What is really improved in your life, in your business, from having a professional and creative website and why that's important, really Spend less time running around, trying to make sure that everything matches because hello, Everything just already matches because you took the time to bring and everything and it does. And you don't even have to give it a second guess. And you probably have already created that move board or that brand guideline when you decided what things you likes. And now you don't ever have to think about it ever again when you need to order more business cards already know what they're going to look like. Once again, you're gonna have that client trust. You're gonna have more clients that are aligned with you also, because you're not gonna get random. Clients that don't agree with your brand were don't have the same style issue. You're also gonna get a website that markets your company for you. You don't have to tell them. This is what colors we like and this is who we are. And this is what we believe. Your website's gonna do all that for you already, which is always a plus because it saves you time. 9. What We've Learned: some of the things that we've talked about today are learning. Hutch means later brand to your website directly learning how to use those color schemes, different fonts and typefaces and logos to represent your brand well. We used to keep your brand cohesive online, whether it be your website or your social media channels and tips to make your visual branding super easy, wherever it is that you're designing your Web site, whether that be squarespace wigs through any other kind of online website platform or whether it's a Web designer doing it for you. I really enjoyed sharing all of these tips and tricks with you to create a professionally branded website that you and your clients are going toe love and wishing all the best of luck in that were Web design endeavors. And, as always, I'm here for questions. Clarifications. Send many emails they have around creating a professional greens, a website, and I will see in the next video