Web Design for Beginners: How to Design a Website in Adobe XD (UX/UI) | Angelique Vestil | Skillshare
Drawer
Search

Playback Speed


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

Web Design for Beginners: How to Design a Website in Adobe XD (UX/UI)

teacher avatar Angelique Vestil, Web Design, Branding & Marketing Expert

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

    • 1.

      Welcome

      1:38

    • 2.

      Introduce Yourself

      1:02

    • 3.

      Your Class Projects

      2:07

    • 4.

      Graphic Design Resources

      3:22

    • 5.

      How to Design a High Converting Website

      13:55

    • 6.

      Home Page Copy Prompts & Anatomy

      6:14

    • 7.

      Brief 1: A Yoga Studio

      40:32

    • 8.

      Brief 2: A Mediterranean Restaurant

      46:13

    • 9.

      Brief 3: Discover Your Design Style

      27:39

    • 10.

      Brief 4: Your Personal Brand

      34:39

    • 11.

      Thank You

      0:41

  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels

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.

399

Students

2

Projects

About This Class

Want to learn how to design a website and create prototypes in Adobe XD?

This web design class will challenge you to discover your design style and streamline your creative process when designing websites for clients. I will be using Adobe XD, but feel free to use any website prototyping tool of your choice!


This web design class is for you if…

  • You’re a creative who want to learn how to design websites and envision design direction
  • You aspire to be a web designer and want to learn more about the web design process
  • You’re a graphic designer that wants more hands-on practice to challenge your creativity with website design
  • You want to explore website prototyping and UX/UI design in Adobe XD
  • You want to discover your design style and practice working with clients

If any of this sounds like you, you’ve come to the right place!

I have created four mock client project briefs which will help you discover you design style and give you exposure to what it’s like to working with design clients. You’ll get insight into my entire design process for how I’d approach each client brief (which often changes depending on the client), as well as the opportunity to gain hands on experience working with design clients in the real world! 

My goal is to provide you with the resources to tackle these four client briefs with confidence and grit! I truly believe that practice makes progress, so don’t be afraid to challenge your creativity and make mistakes, and along the way you’ll learn more about your design capabilities through each stage of the process!


In this class I will cover…

  • Graphic Design Resources. Where to source design inspiration, brand assets, colors, typography and more for all of your design needs.

  • How to Design a High Converting Website. Master website elements that are absolutely essential to drive conversions and sales.

  • Website Copy Prompts & Anatomy. Explore the anatomy of a website and website copy prompts that will help your client fine tune their website copy.

  • UX/UI Design Process. Learn how to prototype website designs and components in Adobe XD.

  • Simulate Client Projects. Engage in four different project briefs to challenge your creative process so you can simulate what it’s like to work with design clients in the real world.

  • Discover Your Web Design Style. Four client briefs with different design parameters, objectives and challenges to truly help you discover your design style.

By the end of this class, you'll have the confidence to prototype websites, projects you'll be able to showcase in your portfolio and the ability to apply this creative process to all future web design projects you encounter later on. 

CLICK HERE TO DOWNLOAD THE CLASS PROJECT ASSETS

Meet Your Teacher

Teacher Profile Image

Angelique Vestil

Web Design, Branding & Marketing Expert

Teacher


 

I'm Angelique and I'm a designer that specializes in web design, branding, and sales copywriting for marketing funnels! After graduating from university, I decided to go all in on my creative business instead of choosing to climb the traditional corporate ladder. I'm a self-taught graphic designer that runs my creative studio full-time from my laptop, whilst working with dream clients in the health, wellness, business and entrepreneurship industry. 

As a marketing funnel expert turned graphic designer, I love bringing together distinctive visuals, storytelling elements and optimized funnel strategies to ensure your brand stands out! My entire creative and design process is fueled by the power of storytell... See full profile

Level: Beginner

Class Ratings

Expectations Met?
    Exceeded!
  • 0%
  • Yes
  • 0%
  • Somewhat
  • 0%
  • Not really
  • 0%

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.

Transcripts

1. Welcome: Most people think you have to spend thousands of dollars on a design degree or immersive boot camps to get your star in the design industry today, that's just no longer the case. If you understand the fundamentals of good design and implement those designs strategies, interior design project, I promise you'll be able to succeed in your design career. I mentioned with steel and I'm a self-taught graphic designer that runs my business full time for my laptop, which essentially gives me the time freedom to do more of the things I love on a more frequent basis. I primarily focus on branding, web design, and writing sales coffee for businesses and the health, wellness and coaching industries. And I've worked with clients including the clear skin lab, the future quote, Sophie, dear, Qian harmony and so much more. I don't have a design degree and in theory, don't have the right credentials to be able to call myself a designer. But I've pretty much taught myself everything on the job by implementing strategies that I've learned in courses such as this one, my portfolio proves the point that you can become a designer no matter what. If you're ready to get your star in the design industry, you'll need to learn how to be resourceful, do the work, and start implementing the strategies to showcase your portfolio in a way that allows you to confidently show up in pitch or services to your ideal clients. I truly believe in active learning, which is why I've created for client briefs for the class project throughout the different lessons of this course, you'll be able to follow along and implement your learnings into the class projects that I've created for you. This course is designed for anyone who wants to get started in a web design industry, whether it's freelance or in the corporate world, or for those who want to learn a little bit more about the website prototyping process and Adobe XD. Thanks for choosing me to be a part of your design journey, and I can't wait to get started. 2. Introduce Yourself: Now that you know a little bit about me, I want to get to know you on a more personal level. Introduce yourself in the discussion section down below with your name, age, design background, where you're from, and what things about the design industry excite you the most. It'll be a really great chance to connect to network with other students who are also taking this class that are in a similar season of their career as you or to network with people who are in the industries that you aspire to be. I'll go first. I'm Angelica, I'm 25. I'm a freelance graphic designer that specializes in branding, web design, and copy, and have been in the industry for over three plus years and counting, I love being able to challenge my creativity pretty much on a day-to-day basis and working with multiple clients across multiple different business models, across multiple different states and countries. One of my all-time favorite things about my design business is being able to help entrepreneurs from all walks of business set up a home-base that allows them to confidently show up for their clients and spread their mission into the world. Now it's your turn. Be sure to introduce yourself in the discussion section below. 3. Your Class Projects: I have created a class PDF that goes along with all of the different project briefs that I go over in this class. So you can easily referenced assignments in your own time. Be sure to go to the Resources section to download your PDF and then we can dive into the class project section. Inside the PDF, you'll be able to find the four client briefs, as well as the different design parameters and challenges that you have that go along with each assignment. You'll also find a resources list which links all of the different platforms that are used on a day-to-day basis in my design business. In this class, I'll go over my entire process for each project brief. And you'll also be able to follow along and implement those strategies into your own class project, project brief one is a yoga studio called alchemy yoga. They have no brand assets, which means no imagery, colors, coffee or branding, but want to create a website that feels neutral and organic project brief to is the Mediterranean restaurant called catch 35. They have existing brand assets such as the logo, menu, imagery, and coffee. And they have been in business for ten plus years and want to modernize their website. And essentially you're going to take their existing brand assets and modernize their website in a way that you feel a bit. In project brief three, you have full creative reins to design a website and your own style. You'll have two options. Option one is to redesign the website of a business or brand of your choice. And option two is to design a website for a dream client's existing or make believe this project is designed to help you discover your own design style in the industry you aspire to be in an experiment with different design elements that you are naturally drawn to. And project brief is to design your own website. As a designer, the challenge will be to use your own imagery and write your own website copy that tells you as a sought after designer, you'll find my exact process on how I'd approach each client brief based on the parameters that were given projects. And you'll also be able to follow along and implement all those different strategies based on what you learned in each of the client briefs. I'm so excited to get started. Make sure you download the PDF in the resources section. And I'll see you in the next video. 4. Graphic Design Resources: So before I jump into showing you guys my exact process for designing websites, I wanted to really quickly walk you through some of my most loved resources when designing a website and prototyping a website in terms of design inspiration, if you've been in the design space, you've probably heard of lots of these resources, but obviously Pinterest is a really great place to find inspiration. You can just search in the search bar or web design and brand design, editorial design. And I'll also show you that in my design process later on, Behance is another really great platform for graphic designers in general, you can find web design inspiration, logo design inspiration, and also connect with other designers as well. And dribble with three Bs is also a really great resource for designers. You can use it as a hub to find inspiration for apps, for websites, for brands, pretty much anything design-related you can find on Dribble as well. So those are the top three design inspiration resources I use on a day-to-day basis in my projects. And they're all very, very useful in terms of where to find fonts, icons, and other brand assets. I use two primary resources. The first is Envato elements. So I have a monthly subscription to Envato Elements. I think it is so worth it because you pay a monthly subscription, but then have access to all sorts of fonts, all sorts of graphics, all sorts of templates. And you really can use this as a resource to find icons as well. So even if I go to graphic templates, you'll also see that there are mock-ups that you could use in your branding projects. And I just really love this platform and I genuinely use it on a day-to-day basis to find inspiration for all of my projects. You can find icons, anything you can think of, you can probably find on Envato elements. I really love this platform. This is honestly my go-to platform for everything I use design wise, Creative Market is another really great place to find. Fonts, icons, graphics templates, and whatnot. I have bought font packs on here before. And what I really love about Creative Market is that they have really good templates for branding. More specifically, I'd say, but you can pretty much find in most things on Creative Market from social media templates, mockups, resumes, presentations, anything design-related as well, you can find on Creative Market. So those are the top two places that I use to find fonts, icons, sometimes royalty-free imagery, sometimes royalty free videos, very often mock-ups for my branding projects. So if I want to showcase one of the logos I've designed on a storefront. They have mock-ups where you can do that. So those are my top two resources on where I find that the majority of my brand assets, and it's honestly my two most loved resources that I use every single day in terms of finding a color palette. So coolers.co is a really great place forum for trying to find color palettes. I also use this on a day-to-day basis. What's really useful as well is that they have colored names. So if you're designing a brand guide, you could also use this as some of you are color names in your brand guide. So coolers.com is a really great resource for finding colors and the color palette generator on Canva. Not really sure how you get here from the homepage, but I usually just Google Canva color palette generator and this shows up. What's really great about this is that you could upload any image and then they'll show you a color palette based on the image you've chosen. So this is really useful if your clients have their own imagery and you want to pull colors from their images, this is a really great resource for that as well. 5. How to Design a High Converting Website: So before I jump into my design process, I wanted to really quickly walk you through different features that help you create a high converting website in this day and age. You don't only just have to make something pretty, but you also have to make something strategically market the brand you are working with. So if you know how to design your websites with a funnel mentality, you'll be able to show results for your clients in more ways than just a pretty website. So I'm just going to walk you through some of the features, what I have on the majority of my websites. So first things first, we want to talk about creating a strategic funnel on your homepage. If you are a designer and you have no background in marketing, you might not really know what a funnel is. A basically a marketing funnel helps create a more strategic approach between getting someone who doesn't know the brand to really getting to know the brand, to actually reaching out to the brands, work together. Strategically positioning someone to actually reach out to the brand that you're designing a website for so that they can increase sales, book a call, purchase a product, and things along that nature. So the key is to make sure that they actually take action on whatever the main action you want them to take it. So the homepage of a website is a first impression and introduction to the brand, which is why it's extremely important to design them in a way that funnels people through the entire website. One thing to note is that your homepage should have a high level description of each page of the site and should naturally encouraged people to take the next step, which is to navigate through the rest of the site to learn more or to take some sort of action at the end of it all. So in terms of your homepage, your homepage should link to each inner page you have. So if I have a services page, I want to make sure on my homepage, I touch on the services page. If I have a portfolio page, I want to make sure that I touch on the Portfolio page on my homepage. The homepage serves as a funnel to the rest of your website. So any age you have in your navigation, you want to make sure you touch on that point in the homepage. So some ways to achieve this is to make sure you designate a section on the homepage for each page of the website. As you see on the right-hand side, there are call to actions pretty much on every single page and each section references those different pages. So if you look closely over here on the right-hand side, you'll see that those call to actions actually linked to the different pages that are in the main navigation. Another thing is to make sure that 80% of the sections on your homepage should have a call to action. And that is to call them to action. To click on the next page To learn more about the brand, to reach out to the brand to purchase products. The main thing on your homepage is to make sure that majority of the sections on your homepage have some sort of call to action so that we can strategically funnel people onto the next page of the website. And then finally, always, always, always include the final call-to-action on all pages of the site. Now, most websites will have one primary call to action, especially when you're just getting started, but sometimes they might have multiple call-to-action. So say e.g. you have a services page as well as a course page. On the services page, you want to make sure that the footer has the call to action to book a sales call, or to get in touch to learn more about how you can work together. And then on the course page you want to explicitly call to action the fact that you want someone to purchase. So that should be the final call-to-action on our course page. Making sure that you have one call to action on every main page. That's not your home page. This is getting a bit wordy, but this will all make sense once I actually go through my process. And then you can also always reference these points later on when you get into designing your own website, the next thing is to make sure you have a captivating hook and cohesive copy, the hero of your website, which is everything above the fold. The first thing you see when you land on a website should be written in a clear and captivating manner. They should serve as the hook of your entire brand to make sure you're drawing people in. It's basically a deciding factor on whether the interested prospect should keep reading through your website or if they should move on and think maybe this isn't for me. Be sure your copy as strategically written in a way that describes what the brand offers and the pain point itself. On the right-hand side, when my clients, Sophie, who's the self-worth coach, we created this hero section to make sure that we were learning in the correct people that she serves. And if they're not a good fit, they'll usually be able to tell from the first section on the website. And it's better to make sure you deter clients who aren't a good fit as early on as he can. So making sure your hero really calls to action your soulmate clients or the brand is super, super critical. So on this website we have, there may be thousands of things on your to-do list. There's only one you, as a self-worth coach, I help you design a life that serves your unique gifts and life vision so you can live the life. You can't stop thinking about. It kind of creates a feeling that captivates someone's interests who might think, oh, yes, I am worthy of living in more fulfilled life. And I'm gonna go read more about what this coach has to offer some things to make sure you include in your hero is what it is, what exactly it is that the brand does. Who is it for? Who are you calling to action and why do they need it? What pain point are you solving? So those are the main things your hook should cover in the main section above the fold. The next thing is three to five brand colors and consistency throughout. So colors obviously play a massive role in the cohesiveness of a website, which is why it's absolutely essential to choose a color palette and stick to it. When we stick to a consistent color palette, we are able to help bring a brand to life through colors and evoke different emotions based on the colors we choose. The right hand side you see the cohesiveness is really brought together by the main colors. So we have three main colors, like the blue, yellow, and orange. And then we have the accent colors, which is the white and off-white color to create that contrast. So I'd say two to three main a vibrant colors. And then you can have white, off-white and black. Those are typically what I use in my color palettes. If a brand wants to go a bit more vibrant than I'll have maybe a secondary color palette. But for the most part, especially on a website, it's really important that you choose no more than three to five brand colors. So you can kinda keep that consistency throughout. So some ways to achieve this, as I mentioned in the previous video, coolers.com is a really great way to solidify your brand colors. And then again, making sure you use three to five consistent colors as your primary brand colors. The next thing is a cohesive visual elements and imagery. Imagery evokes emotions without having to say anything and plays a crucial role in delivering the personality of the brand. It's really important for a website to have cohesive visual elements, whether that's through royalty-free imagery, a branded photo shoot, illustrations, or iconography, whatever you choose for your website that you're working on, it's essential that they all work together. So these two projects on the bottom right hand corner are two projects that I worked on. Obviously very different approaches for what we were trying to achieve for the clear skin lab, we wanted it to be really fun, playful, and feminine. For key on harmony. It was a bit more techie and we want it to go the illustration route, which was really cool. And obviously those illustrations go really well together. For the illustrations, I found them on Envato, and then for these images I found them on Pexels, which is really great royalty-free imagery website. So some ways to achieve this is to try to encourage your client to invest in a photo shoot. You could really help them cure write this by finding Pinterests inspiration and creating a mood board and then giving that to your client, to give to the photographer they choose to work with. So it's really all about making sure that you are able to capture the brand essence through imagery when it comes to asking your client to invest in a photo shoot, another way is to make sure you source illustrations or images from one Creator. For the clear skin lab, you can tell that a lot of the images work well together because they are done by one or two main photographers that I found on Pexels. So it took me awhile to find them. But obviously the more time is spent trying to find good imagery, the more it will show through in the brand Qian harmony as well. Same illustrator, I updated the colors a bit, but then it really brought to life the main brand, which was really, really cool to see. The next thing is a clear and concise navigation bar. On the right-hand side, we have a bunch of different brands that I've worked with in the past and the different navigation layouts we've created for each. So basically, your navigation should be clear to navigate and give your audience and understanding of what will happen once I click on a new page. If a website has several different offerings, It's a good rule of thumb to categorize things into folders with a drop-down arrow to keep your navigation bar as minimal as possible. So some ways to achieve this is to create drop-down sessions for categories that are similar. So if you have multiple courses, e.g. you can create a course menu with a drop-down linking all your different courses so it makes sure that that may navigation bar is relatively clean. Another way is to make sure you explicitly ask your clients what inner pages they imagined for their website. It's really helps your clients communicate what they're hoping to achieve with the website to you as a designer. And another thing is you want to make sure that the menu items look cohesive in the entire structure of the website. So e.g. the clear skin lab has three call to actions, and each call to action is a series of words. But that's okay because it works for that brand. It wouldn't make sense if you had multiple series of words and then one word for the next navigation item. So making sure that you have either a one-word menu or menu with multiple words, if that makes sense. So you kind of look through these different menu items and navigation bars and see what things you like in terms of layout. Yeah, it's really useful in that sense as well. I know I mentioned this in the beginning of the video, but a singular call-to-action on each page is so, so, so critical. You want to ask your clients what is the primary call to action that you want a prospect to take when they come to your website. This is a really good starting point to ensure you are able to design a website in a way that strategically works and create success for your clients. So make sure you include this always at the footer of your page and then give insight into why someone should be rushing out or why someone should be purchasing, or what should they do next? Basically. A website or a sales page or whatever it is you're designing to encourage someone to take some action, to promote a brand, to sell a product, to sell a service. And the primary call-to-action should be repeated not only throughout the website and throughout the sales page or throughout that page, but also at the footer to reiterate the main call-to-action, you want someone to take. Another really big and important part of designing websites is to make sure you break up any big chunks of text. Oftentimes, a few have a client who is trying to communicate what they offer, the words and the copy can get very, very wordy. So it's your job as a designer to make sure you help your clients breakup big chunks of texts into different sections. So the main thing should be the copy on the website should be very easy to digest. No one, and I mean, no one likes reading paragraphs and paragraphs of contents. So you want to make sure you can communicate your message in the simplest way possible to make sure you get your message across. Some ways to break up big chunks of taxes, to break them up into different sections, or with bullet points, icons, and imagery. On the right-hand side, you can see that this section obviously is all words, but because I've broken it down with different sections, it kind of helps make it a bit easier to read. It's still a lot of words, but then it's a lot of words broken up into smaller sections which usually encourages the reader read through it. If this was all listed on just like a blank white section, it would just look like a Word document and no one likes reading. People are naturally visually attracted to things based on the way it looks. So some ways to achieve this obviously is to use bullet points when possible, break up big chunks of texts into more sections and make sure you utilize a clear and consistent type hierarchy. So on the right-hand side you can also see the type hierarchy. You have subheaders, you have the main header font, you have the paragraph font, you have the call to action font. You have the notice section at the bottom. That's a different font as well. So just kind of trying to visually make the big chunks of texts most visually pleasing as you can do. Then next thing is type hierarchy. And it's honestly one of my favorite parts of the branding process is to strategically select fonts to help create a brand personality and a more memorable brand. So it's really important that you make sure you have one font for your headers, one font for your paragraphs, 1 font for your call to actions, one font for your subheaders, usually if you use a serif font, so like a swirly font like I use in my header, it's good to use a sans serif font in the paragraph form. And as you design more websites and design more brands, you'll get a better understanding of what fonts typically go well together. So usually if you use a serif font That's a bit more squiggly than using a more minimal Sans Serif font. The paragraphs are, the sub header is kind of helps break up those big chunks of texts and also makes things a bit more visually interesting. So those are the main sections. Be sure to check out the end of your class workbook to find more design resources and helpful hints. And then you can always come back and reference this video later on once you go through the designing process. But I will walk through all of these different aspects of designing a website as I go through my client project briefs later on in this class, I just really quickly wanted to cover and walk you through some of the main features before we dive into those process videos. 6. Home Page Copy Prompts & Anatomy: In this video, I'm gonna be going over copy prompts. I have created this resource for you to be able to use in your client projects for this class, as well as for future client projects, whether it's freelance or within a corporation or business that you are working in. Essentially this helps you here, right? The website copy that you'll be using for your clients websites and really conducting user experience. That messaging has an overall web design. So you will have some clients that have no idea how to write their own website copy. So in this video, I really wanted to cover very quickly the typical user flow in overall brand messaging. Obviously it will change based on the industry that the client is in that you are designing a website for. But this will give you a general idea. So going off of the UX designs that we created in the last video, I also created a similar look here as well and have broken it down with different paragraphs of texts that we can use to help cure rate copy. This is incredibly useful. Or your clients, if they don't have their copy. And what I typically do in my design projects is put these statements directly in a Google Doc and collaborate with my clients until we're happy with the direction of the copy. So I'm just going to go through this with you. Feel free to use these copy prompts in your designs for your client brief projects later on. Or you could just use this in your client projects with your real clients. I'm just going to walk through. Obviously we have the logo in the top left hand corner and the main header. So this will include your logo, your menu, your primary call-to-action. If you are working with an eCommerce brand, it might also include a link to the cart or a search bar. These are just general field features that you would have in your main header. And then you have the hero image, which is essentially the main place above the fold. The first thing people see when they come to your website. So what you want to make sure when it comes to copy and what you want to ensure your clients do is make sure you have a very powerful statement about the brand that will hook your audience's attention. This is so important because the hero of your website is basically when someone who is visiting your website, a prospect or a user or anyone in your audience besides, Oh, this website is for me. It sounds like it's for me. Or maybe they think, oh, this website, does it resonate with what I'm looking for at the moment, I can move on. So you want to make sure in this statement in your hero section, you're talking specific, hi fleet to the pain points you're solving who you are catering to and what exactly you offer. It's so important and lots of time as designers, sometimes we stray away from things that are centered around messaging because we are attracted to pretty things. But the number one rule I have in web design is making sure you have websites that convert. And that is why I feel like I have done so well in my career is because everything I design is centered around funneling people towards a main action we want our audience to take on a website. For this website, e.g. this could be for a service provider or course creator. Essentially, you want to make sure that the copywritten really helps nurture that user journey to make sure they get to either your contact form or they purchased a course, or they read about your services. We basically want to move them down the funnel so that they get closer to actually checking out or paying for a service or working with you. So the first section is the hero, and then we have another section here that is a deeper description that helps build an emotional connection. So critical that your website communicates your client's mission and messaging in a way that sounds really authentic. You are just selling, selling, selling without actually addressing the pain points that you solve, you might scare away your clients. You're basically saying, I'm the best without actually focusing in on the selfish reasons why your audience might be looking for someone like you. So again, another introduction, another common feature is introducing the different services or offers. So say, we offer web design and branding, but we also have an online course or something like that. We want to make sure we have sections addressed to each of the specific inner pages you have. So as you can see up here in my navigation, I have enough about services blog portfolio. The user journey of my homepage will follow the same format. So we have the Home section, which is the hero. We have a short About section. You have a services section. This introduces the blog, and then we have a portfolio. More info about the brand and the final get in touch. So you can kinda see that this web design and this copy prompt really funnels and tailors to all the different pieces, all the different links in the navigation bar. So again, we have the hero, we have a little bit about the brand. We have an introduction to the services. We have duction to the blog, we have the portfolio, we have meet the founder and then get in touch. So this is something that you can build when you are building the anatomy of the website that you are working on. And this is also really useful for if you are creating a template that you want to use over and over again. Because lots of times really, the only things that change in websites sometimes is imagery which completely changes the overall feel and look of a brand, or the font or the colors. So this is a really good starting point. Again, building off of designing the UX. Again, we have the UX, but instead we have copied prompts. So feel free to use these copy prompts. I have linked this file in the Google Drive, the class project section. So be sure to download it along with your workbook. And you'll also be able to use these in your client projects. So I just wanted to show you this resource because it is a good visual of how you can design a website without any imagery, with very simple colors, with very simple fonts. And then also aid your clients and helping them, right, so the correct messaging for them. 7. Brief 1: A Yoga Studio: Welcome to client brief one, where we will be working with a yoga studio. So you can find this project prompt in your workbook that I have provided in the class download section. I'm also going to go over the client brief and general and walk through my entire process with you so you can really get an understanding of how I approach client projects when they come to me, obviously, a client experience changes based on the client. So I really wanted to represent that in the different client briefs that I presented to you. So we have a few different assignments that you can choose from Orfeo free to choose all of them or feel free to choose one of them, or vice versa. I'm just going to zoom in here so we can really get to know the first question. So client brief one is a client named alchemy yoga. They are a Portland based yoga studio on a mission to bring a sense of calm into the lives of more people from all walks of life. We believe that yoga can transform you both on and off the mat. Website vision from clients. I want the website to be very neutral yet still feel very earthy. I love a minimal aesthetic because I feel like it exudes a feeling that is calm, inviting, and balanced. Alchemy yoga is a space where people from all walks of life can come practice and find a sense of calm in there, sometimes hectic and busy days. I really want that to come across on the website so that people instantly feel invited to the brand and the space we practice. So some adjectives that describe alchemy yoga would be mindful, earthy, organic, neutral, inviting a sense of calm, warm, and trustworthy. The main project challenge is because the brand is a startup. They don't have any imagery. This is very common in the web design space, especially when you are working with startups or new business owners, or people who are just trying to launch your business idea off the ground. So they need help sourcing royalty-free imagery that they can use as a placeholder until they are able to do their own brand shoot. They also have no experience writing website copy and one guidance to help formulate the brand's message to their audience. These are the main challenges we come across with this website projects. This very commonly happens when someone comes to you. They want a beautiful website, but they don't have beautiful imagery as of yet. If this is the case, you can either encourage your client to invest in a brand shoot with a local photographer and their area. Or you can set them up with royalty-free imagery that they can use for now and then can use as inspiration for our future brand shoot with a photographer when they're ready to invest in a brand shoot. So that is a primary project challenge for the assignment. I want you to design and prototype the homepage of alchemy yoga website in Adobe XD or whatever prototyping tool you'll be using. I'll be using Adobe, but feel free to use Figma or whatever other platform that you are comfortable using. So some helpful hints and projects steps. The first thing would be to ensure your source royalty-free imagery. It's really important that you spend some time looking for imagery that you will use. Because oftentimes imagery, sepsis, tone of the colors, you will select the fonts, you select the positioning of how you're going to be designing the website. And that will serve as the foundation. I often select my brand colors for a website based on imagery. So this is a good starting point and it's a point that I will be starting when I walk through my process. The next thing would be to choose a brand colors based on imagery. So I just mentioned this. I often like to choose my brand colors based on the imagery because it helps create and maintain a more cohesive look and then prototype the website homepage. So for this project in particular, I will only be doing the website homepage if you want to do the whole website by all means, go for it. But for this project, because it is our first client project, I will only be focusing on the homepage. An optional challenge that you can either choose to opt in or opt out of would be to use a copy prompts provided in this class and actually write the copy for your clients. It's often very challenging for designers because as designers we're not necessarily taught how to write coffee, but what we are taught is how to make things visually pleasing. So if you want to challenge yourself and actually come up with Mark copy for alchemy yoga. Feel free to do that and you can really help them formulate their brand message. And this is something that's very common as well in the design space. If you can write, copy and design websites, more power to you, you will sell a lot more services. So feel free to take on that optional challenge. I will personally only be using copy pumps in my website prototype, but feel free to do otherwise. So first things first, I'm going to start off with finding inspiration. This is always where I start off all of my design projects because I really want to get an idea of what things exist. Obviously, I have been a designer for quite some time now, so I already know what kind of direction I want to go in. But if this is your intro to design, It's always a really good idea to get yoga inspiration, to just kind of get those creative juices flowing so that you can really get a sense of what design you will be creating. I'll be looking up Yoga website and I will do the same on Pinterest as well. And now there are loads of different websites that we can start using for inspiration. Now, some adjectives that they used was very earthy, minimal and clean. So I really I love this look and I'm just going to continue to pull inspiration that I feel like represent the different adjectives listed in the client brief. So that I can really envision the brand and the direction we're going. Again, I'm just gonna go ahead and open some minimal website design styles that I really liked the look of, but don't seem too cliche. I feel like sometimes in the design space is almost too like basic. If that makes sense. I want it to be minimal. I want it to be clean, but I don't want it to look too cliche. I'm just going to go ahead and start opening different minimal web design styles. So I'm gonna do minimal web design and look up that. You don't have to look up web design layouts in the yoga space. You can look up different website design styles and then recreate them in yoga, it's more common to re-create a style or a theme than it is to particularly find a website inspiration, particularly in your niche that you are designing for. So again, I'm going to continue looking for minimal website designs. I really liked this one. I'm going to just keep looking, going to type in a few different adjectives into Pinterest just to make sure that I'm getting shown different things, really like this one. I love the texture there. So now I have a few different designs that I like and I really liked the colors here. We have very neutral colors, very soft colors. And because some of the adjectives used, warlike, organic, minimal, trustworthy, clean, simplistic. I really want that to come across. So now I have web design inspiration. And again, I'm just going to look at them more closely. You're on Pinterest and you see a website you like. You can actually scroll down and you'll actually get recommended more that looks similar to the one that you like. So that's very useful as well when you are looking for web design inspiration. I really loved that line. I feel like the summer vibes is really good. I also loved summer Fridays and yeah, so that's it for now. So the next thing is, I have some design inspiration that I can use as the foundation. Again, I don't have imagery, I don't have brand colors. I have nothing. I am completely starting from scratch. So the next thing I'm gonna do is find royalty-free imagery. So I'm going to open up a new tab and go to pixels. This is my go-to for royalty-free imagery. They are probably loads of other websites you can find royalty-free imagery on. There are also paid platforms they can find imagery on. I use pixels. This is what I use for pretty much every single client project that I have that needs their own imagery source, but feel free to use any other one of your choice. I'm going to look up yoga teacher because again, we want to communicate that we are working with a yoga brand and they don't have any imagery yet. We just want to get an idea of what types of imagery they can use to represent their brand. I love this one, and I'm just gonna go ahead and start downloading them. So I'm just going to click Download. I'm gonna do this for pretty much a bunch of different images. I really love this outdoorsy, earthy feel, I feel like it feels like it's a wellness retreat centers. So I'm going to download that one. I also love this. I love the earthy colors here, so I'm going to download these ones as well. And often times what you find is that you can obviously tell this is done by the same photographer. So if I click this in a new tab and open it up, you'll actually start to see images from the same exact photographer. So you could go ahead and download those, or you can even open up the actual photographer and go directly to their collection. And then maybe they have a collection here that is specific to the particular image that you were looking for. So I do really love Pexels. I feel like there is lots of really good photos on here. And I try to stray away from the very basic imagery. So here we have then a whole collection of imagery that's cohesive, that communicates a message. It really sells the idea of wellness and morning yoga and all those really nice earthy vibes. There's also videos here as well, which is great. I love that. I love that photo. So I'm going to download that. I'm basically just going to continue downloading imagery that I feel like represents the brand. So it takes some time trying to search for different yoga imagery. You don't have to copy me exactly. Feel free to do this at your own pace and take some time to figure out what type of yogurt brand you want to create. So if I go to Pexels, maybe there is a different set of images that I really liked the look of. And I can also look at that. I really liked the idea of having a teacher adjust. I feel like it also communicates the overarching. Goal of a yoga studio. I feel like they said, people from all walks of life. I think something that would also be really unique. It's finding an image that, Oh, I love this one. I think another thing that would be really unique is finding images of people from all different age groups, all different diversities, all different genders, ethnicities, all these different things to really communicate the fact that alchemy, yoga specifically mentioned that they care to people from all walks of life. So we don't want everything to be too flexible because we don't want to attract only super flexible people. They obviously want to attract people from all walks of life. So I really want to communicate that. So I'm going to maybe look up yoga class and see what things show up. It's going to scroll down. I also loved this moody imagery to kind of get a sense of maybe the classes who I love this class voted. So I'm going to save that. And basically, we probably won't use the majority of these photos. The best idea is to really use these as the foundation of your branding and your website. So again, I'm just going to scroll through and I'm going to look for more group class Kodos. So I love this one. I also love this one. And obviously these are all from the same photographer. You can see the same models, the same scene. I want you to pause this video until you're finished sourcing royalty-free imagery. This is the first task of this client projects and it's essential for setting the foundation of the website. So I want you to find all the imagery that you think represents alchemy yoga. And once you've done that, I want you to revisit this video and then we can proceed with the rest of the class. So now I have a whole folder of a bunch of different images that represent alchemy yoga from my interpretation of the brand. Now obviously, if you're working with a client, you'll probably get much more specific information about the brand then the client brief that I presented to you. But this is a really great starting point. So we have the imagery and we also have the web design inspiration to use as a starting point for the brand. So I'm going to just look through some of these ideas and really start playing around with the different UX in my Adobe XD file. I also really love this one, so I'm going to just open that one up as well. I love this script font and the shapes and the textures. So I want to start with this. I'm just gonna go ahead and split the screens, open up my XD file and basically start playing around with this. So going back to how I was prototyping either UX have a website, I'm going to basically do the same thing here and focus on the different elements of a website. So we have a square here, another shape here to represent that art shape. And again, we're going to round the corners. So I'm gonna go ahead and click here and round the corners. Perfect. So those are different shapes. Then I'm also going to make sure that there's a logo here. So logo, find just a font that I can use for now as a logo. Now this doesn't have to be perfect because we'll fine tune it again later on. But again, we just want to get the general idea of the direction we're going. This will all make sense as we continue to go through the different design elements. But I am just going to keep it as that one for now because it is very minimal. So we have that. And now what I'm gonna do is actually open up the different copy prompts because as I mentioned in the client brief, this client doesn't have any copies, so we want to make sure we represent the copy in a way that's specific to alchemy yoga. So I'm going to open up those copy prompts. And I have this copy prompts open. And what I'm gonna do is actually just copy and paste these over to my other documents so I could copy and paste this and paste it here. Good thing about Adobe XD is that you can copy and paste between files, which makes it really easy. So I'm going to change the color of the fonts to black. I'm going to left align this and change the size just so that it fits this particular design. I actually want to represent a button here as well. Hoping this here, I get black. And again, we'll be able to change these colors as we go through. But again, this is a really good starting point. And I have another one here. I wanted to save button, make it bold and make sure that it's in white so that I can see it. A quick way to switch to this selector tool is by clicking V. And it'll automatically select this button here, which is really useful in drag-and-drop that. Then we have that. And then I'm also going to use this same font for the navigation as well. It's gonna go bring that back up here as well, make that black. So we want to really represent a yoga brand here. So what are some of the different elements of the navigation bar would be home. Maybe. About maybe classes, yoga, maybe yoga classes are the same thing. So yoga contact book now, classes about maybe instead of about, I'm going to put philosophy just to kind of tailored directly to the actual offer that the brand has. And then I'm also going to make sure I center these and distribute them. So I'm going to center them vertically and then distribute them horizontally. And then I'm going to also open up my grid. So if I click Command Shift apostrophe, we can open up our grids and we can start to align things to our grid we have up now, I also want to align this to the outer grid so that we really have that look that we want to achieve. So we have that. You have the logo here. So I'm gonna put that in line here. And I'm going to close the grids again. So we have a powerful statement. And now I want to do is this. So I'm going to open it up. So right now this is considered the hero of the website. And again, the most important part of the websites. You want to make sure that visually captivating. So now what I want to do from here is put in imagery so I can get a better understanding of different colors that we can use throughout the website. So I am gonna go open my Finder tab. We have images here. And I want to play around with what I want to use as the primary header of the websites. I'm going to drag and drop that one because I feel like it represents a class. Maybe adjust this so we can see that better. I also love this one as well. So I want to play around with different images so I can kinda get a sense of the direction. You can see that the borders are on. So I'm going to highlight the images and make sure the border is unchecked. Those are a bit too similar. So I actually wanna get a different photo that has some sort of texture. I'm going to take this image. And I actually really like how that shape kind of corners off the corner of the website. So I'm actually going to keep that one as, as it for now. To stretch this out a little bit. I'm also going to align the main navigation navigation bar at the top a bit more. I'm going to just suggest that I feel like I don't necessarily like this, like off-center type of look, I'm going to experiment with what it would look like if that's centered. And this is perfectly vertical. I'm not sure I love that. But maybe I actually want to just get the tree. So I'm gonna expand this and maybe just get the trees of this photo. Because I want to create some sort of texture. That's not quite how I want it to look. But I feel like I definitely want some sort of neutral organic texture here. So I'm gonna go ahead and go to Pexels again. And I'm going to search aesthetic texture and see what comes up. Hopefully I'll be able to find something that will be able to be used in that space. And it might take some time with playing with different keywords because this is obviously not what I'm looking for. It's way too colorful. So I'm just going to type in aesthetic and see what comes up. Like this could be good, but it's not quite what I'm looking for. So I'm going to just open it up in a new tab. I love these colors, very minimal, neutral. Maybe if I search minimal, something else will come up. Yes, this is exactly what I'm looking for. I'm going to just download some of these texture photos. We can always adjust once we actually bring it into the design. But I definitely want to have something that's very neutral, very elegant. Maybe even looking up some shadows just to get that neutral organic texture that the client brief discuss. I want to find something that would represent that. Maybe organic is another keyword. I can look up. Organic, minimal aesthetic. Oh yes, I love the shadow here. You know, it takes sometimes a few tries of different keywords for what you're looking for to show up. So it's really just a game of guessing the SEO. So I love the shadow and something along those lines would be perfect for what I'm looking for. So this is definitely a lot more aligned with the vibe that I am hoping to achieve. I also love this towel here. It's a towel or maybe a blanket. But again, I want to create texture, but in a very neutral organic way. So I'm gonna go with that for now. I'm going to see if there are any similar shadow ones here, which are, which is great. I love the different shadow look. So I'm gonna go ahead and continue downloading some so I can really play around with all of these different textures in the design. So going back to my Adobe XD file, I am going to get sine those textures that I found and I'm going to just replace it here. So I definitely like the look of that better. But I feel like it's still a bit too dark, so I'm going to turn off the opacity a little bit so we can kind of get that effect, but in a bit more neutral of a way. We get that texture a bit, but it's slightly cooler and softer. So I'm just going to play with the opacity. And I feel like this picture doesn't necessarily match that color. I want something to be similar in the sense of color, but also representative of the brand. We're really just playing around with images until something feels right. I'm going to adjust this opacity to see you. That might be better. I'm actually really liking the look of that so far. I'm also going to just expand this so the texture is a bit more faded. Maybe I'll get the dark corner. Great. I love that. Slightly fade out a little bit. And I don't like that, the shape overlaps like that. So I'm actually going to add a border here. I'm going to make it 20 with border and I'm actually going to make it white so it looks like it blends in. I am loving, loving, loving that so far. And this is a good foundation that we can then use to then choose brand colors. So I'm happy with this hero section of the website and now I'm going to select colors, really bring together the cohesiveness of this website. So first things first, as I mentioned, is to choose colors based on imagery. So I am just going to draw square up here, turn off the border, and I'm going to use this eyedropper tool to pick a color from this screen. So I'm going to play around with this. Again using the eyedropper tool. I'm just going to try to select colors from the images that I might be able to use in this website. There's some green back here. Maybe I want to bring that in to the design. Just going to try to find a bunch of different colors. And then I'll be able to use a color selecting tool to really finalize the cohesion of the website in terms of colors. So maybe even a lighter tone down here, the same. Maybe this back wall here that can represent, right? So you can already see that you're able to see cohesion of some sense in terms of colors just by selecting colors from imagery. Obviously, good photography makes sense because of the colors in them. So choosing colors from imagery is a really great starting point. Once I've done that. I then also go to a website called coolers.com, which is a really great color generator for choosing color palettes in a super-fast way. This is one of my go-to websites for choosing color palettes. So I'm going to just select this color and copy the hex code and paste it into here. Then I'm going to lock it. Once I've put in the hex code, it will then be able to generate color palettes based on the hex code that I've put in. So say I also want to put in this green color because I really like it and I feel like it would be a really great brand color. Then I can put these next to each other, lock that. Then the next few colors that will be presented to me will be colors that go with it. I actually feel like this might be too dark. So I'm going to try using just a green color to see what different colors really resonate with the brand that I'm creating. So again, we really are going for a minimal look here. So I really want to find very neutral colors. So I love this champagne color, so I'm going to lock it, continued pressing the space bar until I'm happy with the final color palette. So this is not necessarily what you have to do to choose colors. It is a great resource to start off if you're having difficulty finding cohesive colors, we have an eye for colors That's also really great and you can also do that by all means. So I'm going to just copy this in. A good rule of thumb is to make sure that you select no more than five colors. So you can see that this color and this color are very similar. So I'm going to actually remove that one and replace it with this one. I also feel like this is slightly too dark and I definitely want to bring in black for the text as well. So I'm going to replace that with a black color. So we're going to have black, slightly green. I like arranging them from darkest to lightest so I can really see them next to each other. I don't necessarily like this pale color, so I'm going to go ahead and try to find a different shade. Actually really like that color. I love both of these colors. And then maybe we'll just go with General white. Another thing I like to do when I'm trying to get the correct shade is choose the same color from the color I'm trying to previously match. And then go to the color selector and slowly move my cursor until I find a color that I'm relatively happy with. I really like that shade of white and it's very, very, very subtle, which I love. I'm gonna go with that. And again, this is just a starting point. Say if I go through the entire website process and these colors don't actually fit or match the rest of the imagery, then I may adjust it later on. Save this as a final color palette. I'm happy with it. I can go over here to colors and click plus ones. I've highlighted them all and then I'll be able to select the colors very easily when I am editing something. So say e.g. I want to change this button color to be green. It automatically changes there, wants to change his whole menu bar also be green. It can be done there. If I want to change the whole background color to be gray, I can do that as well, but I am not because I want it to just be white. Those are some resources to finding colors. So we are starting to get a bit more of a cohesive look here. And what I'm gonna do actually is extend this slightly further and make this slightly bigger. The next thing I want to do is go back to the copy prompts and then I'm going to build the next section of the website. I'm just going to copy and paste this whole section because I want it to be similar format. And it's typically a good rule of thumb to make sure that you have alternating positions. So say if the text is on the right-hand side, the next section, the tax should be on the left-hand side, or in columns of three alternating different textiles is really, really important. So we have that. I'm going to delete that and I'm actually going to make this a components. So I'm going to group those together, make that a component and drag it and drop it here. Again, we want some sort of imagery that makes sense right here. So I'm gonna go ahead and maybe draw square, because maybe I want a square in this section here. I want to make sure it's aligned to the center. So I'm going to just drag and drop. I'm going to turn on my grid so I can see where I am in my design. And I'm going to align it to the center. Open up my photography and see what kind of photo I then want to add here. Again, I really love that look, this is too tall. So what I am seeing now and something that I don't like particularly right now doesn't necessarily mean it's wrong. It's just something that I don't necessarily like is that this white part goes all the way down. So what I want to do is actually play around with this background being a different color. So I'm going to just draw a box here, turn off the border, and maybe select a different color and send it to the back. So I don't really like that. Maybe this off-white color can be good here. Okay. I like that actually. So I'm going to make sure that border matches. So I'm going to choose the eyedropper selector of the border like that. So it looks like it really is cohesive in that sense. I quite like that. I'm not sure if I like these two colors together. So I'm actually going to play around with this hue slightly, and I want it to match this color. So I'm going to select that and slowly go up until I find something that seems really natural to me in terms of color matching. It's very subtle. I don't want it to be completely white, but I definitely want it to have a little hue in there to showcase different sections. So I love that color. I think it's very neutral. I also will match the border. I don't necessarily love the green, so I am going to replace that here, ungroup it, and then I'm going to select the fill bar. And again, I'm going to just use the color picker until I find something that I am happy with. I love that color, not quite green, but we still kind of get that earthy feel. It's a bit lighter, which I love. I'm gonna go ahead and group that, copy and paste it and put that down here. So I'm definitely getting a much better cohesive look. And I'm really happy with the direction we're going so far. So let's keep on going. I'm going to just adjust these logos slightly. And then the next section, I'm gonna go back to the copy prompts and copy these different sections and place them here and then continue building it here. Now I'm going to focus on the Offers section, and then I'm going to make another rectangle dropped behind here and send it to the back. So if you right-click and you click Send to Back, you can do that, or you can click these commands, which is Command Shift and the left bracket, and then it should go to the back. And then again, I want to play around with the different colors. These colors aren't yet perfect, so I don't really want to commit to them yet, but I definitely, I'm loving the look of that so far. I'm going to Everything and I am going to make the text white, and I'm also going to make the border white as well. And again, we're having a much more cohesive look here. I really love this design style and I feel like I'm really getting the minimal feel that I am hoping to produce with this particular design. So again, it's not perfect. We will finalize the text styles at the end. But again, it is a really, really great starting point. So we have that. I'm just gonna go ahead and add that in here. What I want to do is actually bring in this texture again. I'm going to copy this, paste it down here, and expand it so that we have that texture again. And what I want to do is maybe this will be a contact section or about an About section, but something that allows me to be able to design something that's really unique to the sprint. So I'm going to open up my grid again and draw a rectangle here because my grid and align this to the center. And I'm going to turn off the border and make sure the fill is white. Actually, you know what, maybe I do want a border, but instead of it being that color, I want it to be that color. So I'm gonna make it 20. And again, it kind of creates a cohesive look. A good rule of thumb is to make sure you have no more than five brand colors on a website to make sure everything is cohesive. So I'm going to just select this as black because I feel like it doesn't need to be that color in the center. This I'm going to adjust this a little bit, make it taller. I'm going to end it there actually. I'm going to make that a contact page, the contact form. Go ahead and go here, copy that, get in touch or book your next class. I'm going to just fill this out here. Copy and paste center that. Then again, copy the button. We have all of that in the center. I'm pretty happy with how this turned out. And now what I wanna do is finalized the font. So I'm gonna go ahead and click all the ones that I see. And I'm just going to go through the fonts and see what things I like, what things they don't like. And really try to find a font that represents what I want this brand to look like. I'm not really exactly sure what kind of style font I will like the look of. But I'll play around and hopefully come across something that I like. I really like that font. I feel like it's very minimal. I'm gonna make it slightly smaller because maybe I like it a bit more. Yeah, I like the look of that. I feel like it's gets that minimal vibe that I am hoping to create. You have that. And then I'm also going to change, ungroup these because these are grouped together. And make sure that that is the same font. So to make things easy for me, I'm going to add it to Character Styles. I'm going to select all of these by clicking one and then holding Shift and then clicking all of them. Then I'll click back. Then I'll select it in white. And I love that look so far. Just to make things a bit more cohesive, I'm going to add in a sub header up here. Then I'm just going to write something. I don't actually really liked these buttons. Text of these buttons. I like how this far Proxima Nova matches that, but I don't like the button font, so I'm gonna go ahead and change that by clicking here, here. Here. I'm also going to click here. And I'm going to maybe make it semi bold or maybe medium. And I'm also going to change the letter spacing because maybe that's not that's what I don't like about it. And maybe make it slightly smaller. Maybe change it back to semi bold. And I feel like that is much, much better. It's going to go ahead and center these. Just highlight it. Click these buttons here which easily centers centers on here. You can see that it's slightly a bit of border there. So I'm going to just then I'm going to change the logos. So I'm just going to use a word mark that logo for now to keep things simple and right, alchemy, yoga. So this is the exact same font that I used here, just in all caps. And I really love how it looks. Alchemy, yoga. Then I'm also going to make that color match this just to kind of keep that cohesion. And I'm really happy with how it turned out. Now I just want to take a closer look so I can see that there is a border here. So I'm going to turn that off. And now I can actually display my prototype in a way that allows me to interact with the website as I am viewing it on a website. So if I click this web button, I can even rename it as alchemy yoga homepage. I can then highlight that. Click this Play button up here. And then I can scroll as if it's a normal website. So I am loving it so far. I loved the colors, I love the feel. And this is a really good idea. You can see that there is a border here of some sort. So I'm just going to double-check that in my design. I think that's from this turn off the border. See if there's anything else that has a border that's not meant to. So again, going back into playing the full design, scrolling through, you can see that that line is gone. But in general, I love the colors here. So this is a really great place to get your ideas out on digital design paper. It's also a really great place to pick up clients, especially if you're working freelance, the direction of the website, it's much easier to disagree on a design at this stage of the design process than it is to disagree on the design once you've coded it and developed it on whatever platform you're building on. I highly recommend showcasing this to your clients and presenting this to your clients and walking through the website with your clients in this way. So much of how I'm doing now. So that is the website for alchemy yoga. If you want to share your design interpretation of this client brief, then feel free to upload it into the client project section. If you want to turn this into an image, you can go ahead and click this here, click Export. So you click Command E and it'll automatically open it up. I'm going to save it to my desktop. So I'm going to click Export. And then once I'm on my desktop, I'll be able to see it here. And then I have a screenshot of the website I just prototype. Thank you so much for joining me for designing this project brief for alchemy yoga. If you completed this and have designed alchemy yoga and your own style, don't forget to upload your project into the class project section. And I really love seeing your guises design. So I really hope you enjoyed it, found value in watching my process. And I'll see you in the next video for the next project brief. 8. Brief 2: A Mediterranean Restaurant: A brief two, we are working with a restaurant called catch 35. So I'm going to just read through the client brief and then I will show you guys the different assets will be working with. And then from there, I will walk you through my entire website process for prototyping a full website and Adobe XD catch 35 is a swanky Lounge bar and Mediterranean restaurant located in the city of Chicago. They have an open kitchen and a trendy atmosphere for their clients enjoy and have been servicing clients for over ten plus years. They want to re-brand their website to feel a bit more timeless, trendy and modern. The website vision for the client, my vision for the new catch 35 website is to modernize the overall look and feel of the website. Our interior is very monochromatic and style, so I'd love to see that come through on our website. I want the website to be very visual with very minimal website copy to help create a more trendy, luxurious and modern feel. I'm really inspired by editorial designs that are new age and trendy. Some adjectives describe the overall style they're going for is stylish, trendy, mature, modern, intimate, a lively atmosphere with elegant decor. The project challenge is that because the restaurant has been open for a few years, the restaurant has existing brand assets that they don't want to part ways with. The logo and existing brand assets are printed and showcased across several parts of the business, including menus, the storefront business cards and local advertisements. Imagery is also a huge part of the brand and we want to showcase that restaurant in a very visually interesting way. For this assignment, I want you to design and prototype the full catch 35 website so we can fully visualize the website and navigate through next page of the site as it was live. So some helpful hints to help you get started is to research editorial website design inspiration to get an idea of the direction you'd like to go with the assets. We have another thing, as mentioned in the previous client brief, I always loved choosing brand colors based on imagery and because they already have imagery of their interior, that team, the food they offer, I really want to make sure colors are chosen based on the imagery because it is such a big part of their brand that they want to portray. And then the third thing is I want you to prototype the entire website in Adobe XD. I will walk you through my entire process of designing not just the homepage, but also the inner pages, as well as linking it so that when you present this to your client before you go into development mode, or if you're working with a developer, you can really simulate what you want the website to interact and feel like as a user is going through each page of the website. So I'm just gonna go ahead and look through all the different assets we have. Here. We have the website copy, they have a homepage, a menu, and about page hours and location, and the ability to make a reservation. So 12345 pages, it seems like there isn't much. So I really want to showcase sub-brand in a very visual pleasing way using imagery. So let's have a look at the imagery. You can view this in the Google Docs, but I have already downloaded it to my desktop. So I'm just going to show you a different brand assets. So we have the logo, very simplistic. We have the existing menu, kind of getting a feel of the different things that they offer. And then we have some sort of texture. If we want to use this gray, if we don't want to use this, that's fine too. But just something that they have from their previous logo designer that is used for their menu. So we have the brand assets. Then we have loads of different imagery here. So we really get like dark, intimate, vibe, cozy, date night, really posh food, professional chefs. So I really want to showcase all of these different things on the website. And a big thing, as mentioned in the client brief, is there ambiance. It's a very luxurious, I really love the look of it. And these are all royalty-free imagery. So you'll notice not all of them perfectly fit together, but feel free to use any of these to really portray the look you want to have. Oftentimes when we have client briefs that we're working on, we have a load of different imagery based on different photographers are some images may not necessarily go with others. Your job to pair the imagery with the design that you're making. So to start, I'm gonna go ahead and go to Pinterest so I can start getting inspiration. Some keywords they had said was editorial design, restaurant designs. I really want to showcase that. And so I'm gonna go ahead and look up editorial design. And then I'm going to open up another tab because I also want to look up restaurants designs. I want to create a fusion between an editorial website which is typically used for high-end fashion with a restaurant. So I'm going to go ahead and look up restaurant and web design. And then I'm also going to go over here to editorial design. Editorial design, restaurant. We will have something to view. I'm seeing lots of menus, which isn't necessarily what I'm looking for. I'm just gonna go ahead and look at the different restaurant web designs. So we have that one. Yes, I love this one. We want it to be very simplistic in nature because there will be a lot of imagery. So I don't recommend using lots of colors or visual patterns because they do have lots of imagery. I want the brand to be showcased through the existing imagery because that is essentially what people are paying for when they go to this restaurant. I quite like the look of that. I'm just going to continue opening things into new tabs until I find something that I am truly inspired by. I really like the look of that. And it's really useful when you click into designs you like you're presented with a whole different new search. Really take that into your advantage. I typically like opening things into new tabs. Feel free to create your own board for the project you're working on. I usually do that for clients so that I can make sure I have everything in one place and can open things up when I'm working on a website design over the span of a few weeks or a few months. But she makes it really easy. I'm just going to continue looking through all of these things. I really liked the dark and moody vibe and I think that's what I want to portray on the website. But again, it may change based on imagery that we choose. I really like this chunky script font with this tall sans serif font. So that's something that could be really cool that we showcase. So basically I have a few different websites. We're obviously going for a really dark and moody vibe because that is what they mentioned they wanted in their website design. So now that I have a few pieces that I can use for inspiration, I'm gonna go ahead and open file. Now. I'm just going to take some of the brand assets and put them into the design. So first things first, I'm going to put in the logo, which is up here. And oftentimes they'll get a website design project with existing brand assets. Sometimes a few are also a brand designer. Clients might come to you with brands, but sometimes as well, people might already have existing assets. And if you specialize just in web design and then trying to take their existing assets, redesign them in a new way without straying too far away from the original brand assets. That is a really useful skill to have as well. We have the logo there. And because a lot of the websites I pulled for inspiration have a image background as the hero. I'm going to play around with that in my design as well. So I'm gonna go ahead and draw square to fit the whole hero section, turn off the border. Then I'm gonna go ahead and open up my images. I really want to find something that communicates the overarching and beyond and feeling of this RAM. So I really want you to find something that showcases that I really love this interior. So I'm going to put this as a background. I'm going to send that to the back because this is on a dark background. I actually want to change the logo to the white logo variation. So I'm gonna go ahead and upload that there. And I definitely like the look of that a bit more. Now I'm gonna go ahead and open the website copy prompts to see what sections they want. I'm gonna just copy this so that I have the option to paste it into my XD file down below. Click on this that I can really simulate the design that I want to make. Gonna go ahead and create a textbox, paste that into there. Now we're going to play around with font. So I'm just going to grab a color from here and make this 22. I also wanted to have a different header font. So I want to perhaps create my own headers because some of the things on the Google Doc doesn't actually have headers, it has paragraphs. So design wise, I know that headers kind of help break different sections of the design. So even though my clients only gave me this copy, I can still add different copy pieces to embellish the website a bit more. So we have that. And I'm also going to create another text box up here. Crafting exceptional experiences. I'm going to make that into a header size. And then now I'm going to find fonts that I feel like represents the brand. And maybe even I want that on top of this main section here, which we did see in the inspiration pieces that we found for now I'm going to put it there so I can really see the difference. And I am just going to go to the top of my fonts and click through to really see what I'm hoping for. I also, because I'm still in the experimental stage, I am going to experiment with different types of texts and maybe I want uppercase, which creates a different Experience. So I'm going to have both of them. They're just so I can see the text. I'm going to create a slight overlay on this image. So I'm going to just draw another block over this same one. Make it black. Or even I'm going to pull a color from this image. So nuts back, arrange send to back, and also arrange this Send to Back. Now I'm going to change the opacity of my overlay. So we kind of get a more custom color experience, but still maintaining the overarching look. And it also allows our text to pop out even more. I'm going to go ahead. Now I'm going to play around with fonts. I'm going to expand it a bit more so they don't overlap. I still want it to match the logo as well as the brand, so it doesn't have to be perfect here if we have open Ryan's to choose our fonts and our colors. But again, we really want to make sure that it matches the logo because that is the primary brand asset that they have. We want to make sure that the website matches that as well. So I really like this tall font, so I'm just gonna go ahead and put that to the side because I might want to use it later on. I'm still going to look through fonts just to see if there's anything else that catches my eye. I do like this script font. I may want to use it to embellish. So I'm going to also put that up there. And it's really all about trying to find fonts that pair well together. Oftentimes, it's really good to match different styles of fonts for different types of texts. So a header, e.g. if you have a serif header, you might want to use a sans serif paragraph font or vice versa. And now I want to create a book now page because it is a restaurant, the primary call to action will be to book. So I want to showcase that here. That might not be a color I use here, but I may use it somewhere else on the page. I just wanted to see what it would look like. So I'm going to copy and paste this button up here for now. Sometimes this is what your design space looks like. It's just putting a bunch of different assets you might like and may want to use as reference as you start to finalize your design. So I might not want that there, but I might want it on a white section to say maybe my white sections have a yellow call to action. My darker sections have a white call to action. So I'm gonna make this white and black. I also want to go ahead and make my header. So home about Menu, about Menu, about hours and location. And I want a section that refers to the book now button. So I'm gonna go ahead and copy this. Put it over here. I'm not sure if I like this image overlay, so I'm gonna go ahead and copy this and paste a new option here so I can really compare designs. So I'm gonna go ahead and move this down. And then I'm going to also draw a rectangle behind it that I still have that dark effect, but it's in its own menu bar. I'm going to use the color dropper tool to select a color and send that to the back. I'm not sure I love it yet, but that's okay. We're still at that part of the design process where it's okay that things are not yet perfect. And it's all about the learning experience really all centered. I'm going to remove that button up here. Maybe want this to be white. So I'm gonna just slightly play around with this color. So I really want it to be an onyx Black. And I don't actually like this font. So I'm gonna go ahead and change it to something else that I might like. And I like this font, Belgium. So I'm going to use this as my primary call to action font. Make it all caps to create that cohesive look. Expand this. Maybe I'll change this to just book a table. Great, I'm loving that so far. And now I can choose a font to go with it. So we have a header fonts, we have a call to action fonts and menu font, and we don't necessarily have a paragraph on yet, so I'm gonna go ahead and copy this, paste it there. I'm going to save this to my colors so I can finally change colors over here. I'm going to exit this. I'm gonna change this to you 44. Then I'm also going to grab this call to action button here. So I'm going to just add this color to the left-hand side. I'm not sure if I'll use it, but I definitely want it as a reference. I'm gonna go ahead and grab that color from over here and make this, right. I'm gonna go ahead and move that. So now we want to find a simplistic paragraph. I think I like that, but I'm going to play around with the line height. Not quite space out enough. We have a bucket table call to action here I want to test what this would look like with this yellow call-to-action. I'm gonna go ahead and move that up here. And I want to actually make this opacities slightly more. That's not what I want. So I'm going to make this the same color there. Yeah, I really liked that dark, really dark onyx look. I feel like it helps create a more luxurious feel. And I think seeing them side-by-side, I definitely like this right-hand side much, much, much more. So I'm gonna go ahead and keep going with this one. We have a book of table call-to-action. Then we have the menu. So oftentimes you'll go to websites to view the menu. So we have that here and I want to showcase that for this section. Now I want to create a collage because a big part of this website is the dining experience. So I want to create a collage of some sort showcasing the different meals that they offer and the different food that they are able to hear a. So I am going to just draw a bunch of squares here and really hopefully be able to create that collage. Look. I don't know yet if this is like perfect Lee in place. But for now I seem to like it. So I'm just gonna go ahead and adjust this even more. And at the moment, I'm really just eyeballing things. This is totally fine because we can always find tune later on. For this section, I really want to showcase all the different aspects of the brands. So I'm gonna go ahead and make this larger. Actually. I'm gonna go ahead and open up the different assets that we have. And they did mention they wanted a big part of the website to be imagery. So I really want to showcase that here. You want a mixture of drinks, food, and everything that includes basically the culinary experience or gives insight into what the brand offers. We also want some people, so these are all really beautiful photos, but I also want to create an ambience look and feel. So that often comes through when there are people in images. We have that and I'm going to turn off the border at the images are in place. I'm actually going to make this full width like that. Align this to the bottom to create that full collage effect. Ban the same width. I'm also going to adjust C-section so they all create a collage. I'm liking that so far. I feel like it's not the perfect collage yet, but that's totally fine. I'm going to actually span this to be slightly smaller. So we have a parallel pattern like this, spans the full width, spans the full width, and then this doesn't. So I kinda want to create the same effect here. Maybe here we make this slightly wider, nice. Maybe want to see what that would look like if that's full height. Okay. I think I liked that so far. I want to just see what it would look like if both of these spanned full height. Just slightly cool. I like that because it still has that parallel look. Another thing that might be off is the fact that this is slightly over centered. So I'm gonna go ahead and check with my grids and align them so that it seems a bit more centered. So we have that collage look and we definitely communicate the ambiance of the website. So I'm gonna go ahead and spin this down even more. I'm going to actually embellish this with a sideways tax. So I am a big fan of the sideways text. I pretty much use it and most of my design projects for my clients because it helps create a different look and feel. So I'm gonna go ahead and type in. Then I'm going to center this, group it together and then highlight all of this. Center it vertically. So I love that. Definitely like the look of that. And then I'm gonna go ahead and grab the next piece of copy for the homepage and put that here. So this is actually a section for viewing the menu. So I'm going to remove this menu call to action here because there's copy for viewing the money. I'm gonna put a table, I'm going to copy this, paste it down here. And I want to use this same black, but instead of it having an opacity overlay, I'm going to just make it fully black and then I'm going to make the text white. So now I'm gonna go back over here to my Google Doc and type in this section. I'm gonna go ahead and grab this section up here because I still want a sub-header. So I'm gonna go ahead and rotate that. You get white and drag it up here. I'm going to center all of these center. So we have that and I'm definitely liking the look of this website so far. Then finally, we have the final call to action from this Google Doc. So we have ability to reserve a table. So again, I'm just going to copy and paste this section up here, paste it down here. Align everything to the left because I want you to break up this center. Look, you can kinda see that this is centered, this is centered, this is centered. So I want to be able to create something that allows us to break up that center balance. So I'm gonna go ahead and make this left aligned. And again, I'm going to just copy and paste an image, put that over here. I'm going to replace that with an image of some sort. So I'm loving that so far. So I want to actually try to experiment with this being full width. So I'm going to just copy and paste it again so that I can easily compare my designs. This is really critical if you are trying to compare very subtle differences in InDesign. So I am just going to span this full width. So I'm gonna hold shift and it will automatically span it full width if I don't press Shift and it will scale, but it won't scale the images. So holding Shift allows you to really create that effect that I'm also going just move this down to see if I would like it and I don't like it. So I'm going to move it up a little bit so we still have that effect. Align this to the bottom and I definitely like the full-width look much better. So I'm gonna go ahead and continue designing with this in mind. Everything looks really good so far. So I'm happy with the way this is looking. And now I want to create the menu page. So I'm just going to adjust this until I know for certain it's perfect going to move this up there. And these two back. Like to look up that I'm happy with the way everything looks. So now I'm going to move forward with this design. I'm happy with it. It's definitely my favorite amongst these two. So I'm just gonna go ahead and delete them if you want to keep it in your toolbox and reference so that you could really see the progression, then you can just keep it there. But for now, I'm going to keep it there and I'm going to move this down because this is the design that I'm going to continue moving forward with. So I'm just going to name this by double-clicking here and type in catch 35. Next, I'm going to copy and paste it so we continue to have that cohesive look. And the next page we're going to work on is the menu. We have the menu here and assets, and it doesn't really need to be that special. What we want to do here is just showcase. It doesn't need to be perfect because this is just something they already have designed. So I'm going to just drag and drop it in. And I'm gonna put it here like that. I'm going to rename this to catch 35 menu. We have our menu here. And I feel like I want to create something that is visually a bit better to look at. So we have the menu and I want that to be clickable on the website. But for now, I also want a different image here to portray the different parts of the menu. So I'm going to just draw this square and do a split screen here. I'm a very big fan of this screen sections. And then I'm going to capture some of these photos over here to really showcase a brand. I'm gonna make this opacity and I'm going to grab the same color blocking from here, copy and paste it, and drag it over here so we can still create that dark and moody effects. I'm going to send that to back. So that's the bat. I'm going to take it so that it doesn't show on the menu. I'm actually going to move the menu down here so that it can be fully clickable and opened up my grid and span this to be the full width of the grid. Maybe not the full width because it will be too large, but maybe I'm gonna put that down here. I'm going to put some sort of text here. I'm gonna copy and paste this because it's the same design. And just to make this and this a slightly different look, I'm going to just experiment with having this be a yellow background. It might be too much and that's fine. But I just want to experiment with it to play with the look we're going for. Okay, not too, not too big of a fan. I liked the yellow to be subtle, but I do want this white to be slightly different from this section. So I'm gonna just draw a box here, turn off the border, send it to the back and slightly vary slightly, adjust this to be a shade darker. So I'm happy with the way that looks. I just copied this piece of texts from here. That's totally fine. This will just give you the opportunity to encourage your client to create a new paragraph of text. So if you want to, you can go ahead and change this. But for the use case of this project, I'm going to make it just like that. And I actually am going to span this menu to be the full width of the grid. And then now we have the about page. So I'm gonna go ahead and copy the homepage again and create the About page at the end of this video. Once you create each page, I'll be able to show you how to link the full website. And this is so useful when you create mock-ups for your client. And it really showcases the brand, which is really, really helpful. So we have the about page and let's just go ahead and look at the copy I'm going to remove. Actually, I'm going to keep that, but I'm gonna move this up, ungroup this, and make this white. I'm going to remove this and break this up into two different sections. And then I'm going to change the background here again with another piece of imagery. Love the look of that. And break apart this section created with love and passion. And now I want to showcase the owners. So I'm going to draw two squares within my grid and align it up to each of the grids. Then I'm going to have two photos of each of the brothers. Feel like those are too close together. So I'm just going to be on it. Then we have white. I'm going to make this all caps and then make this much larger center that the same thing over here. Then I'm gonna go ahead and go to our photos again. Go ahead and turn off my borders. Then we have another photo of the other brother. So we have that. Then we have hours and location. So I want to showcase that there as well. So I'm gonna go ahead and copy the main piece as well. So now we are focusing on hours and location. So we have let me go back to the copy now is in location. I'm going to grab this one over here because it's already left aligned for this section, I actually want to try to create a map section here. It won't be clickable here, but I just want to display a map. So I want to showcase some hours and location. We have that section and I'm gonna go ahead and open Google Maps. And just for the sake of this, I'm gonna go ahead and zoom in. And I'm just going to put this map here. This is a fake client, so they don't actually have a location, but I am just going to pretend it's over here somewhere. I'm just going to pretend it's fat and I'm going to take a screenshot. And then I'm going to grab that from my desktop screenshots and move that into here. I want to be able to showcase a Mac here so people can easily open it up on Google. I'm going to move this together, center it vertically. So we have our hours and location listed there. I'm going to see what this would look like if I spin it full width. And they get much better when it's fixed, then I'm going to copy and paste this section and move it over here so that we have final section that we can add. That looks good so far. Then we have the book a table page. So I'm just gonna go ahead and copy and paste that. And then I'm going to create a form. So the form details are number of people, date, time. So we have this, I'm just going to copy and paste that again. Let me group this book a table. I'm just going to keep this section very, very simple. So I'm going to draw just a few boxes here. The main paragraph font make it black. So we have number of people, date and time. So actually want these to the left. Keep that as is. Then book a table. I'm also going to draw a triangle because I want these dates and times to be a drop-down. So I'm gonna go ahead and draw a triangle, fill this as black, rotate it, and move that here, and then I'll make it smaller so it looks natural, not do the same thing where the time section, this just signifies that there is a section where we can input the date and the time. So we have that. And what I want to do is actually create this same effect in the background. So I'm going to send that to the back. And what I actually want to do is create an inner square so that it looks a bit more like a form. Turn that off, center it within this section and that's the back. And once again, I'll send the background to the back. And then we have the fact here that allows us to really book a table. So I'm going to group this section together. I'm going to move these down actually. Once again, I'm going to highlight this section, group it together. Then I'm going to center all of these different sections. I also want to create an effect that has a border because this is an important piece of the brand. So I'm going to just make a yellow border. She makes it slightly more unique and signifies a call to action. I have a book, a table, and now I have all of my different pages. So we have the Home, the Menu, the about the hours and location, and then The book, a table page. Now that I have this, I am happy to delete these, but you can really see where I started versus where I ended. And that is just part of the design process. Your first design will not look perfect, but as you continue moving through the different sections of the pages in more cohesive, it will look now that I'm looking at this next to each other, I see that I've used this image twice, so I'm just going to replace this image with a different image. Then I'm going to delete these sections up here. Also, I noticed that this is also the same images, that one because I did copy and paste that. So I'm going to replace this image. So different image just to have a slightly look and feel. I love, love, love, love. How this has turned out so far. So now I want to prototype the website. I have each of my pages designed. And now what I want to do is make sure that all of the buttons here are clickable so that when someone clicks this button, it will lead to a book, a table page. So for all of the call to actions, you basically want to make sure that all the buttons you want clickable are grouped together. So because the text and this rectangle are two different elements, you want to make sure you group them together. So if you click the font and hold Shift and then also click the rectangle, you'll be able to group them together and you'll be able to do this with all of the different buttons on your page. And this is really useful for the next section, which will be prototyping the actual user journey of this website. So we'll do the same for this. We have the and, but we have grouped all of the different elements together. Now we go ahead and click this prototype button at the top left-hand corner. And now we'll be able to make sure that all the buttons linked back to where they need to go. So we have the main navigation bar and now we want to make sure that each menu item in the navigation actually points to the correct place we want everything to go. So I'm gonna go ahead and click Home. And I want this to funnel to this homepage. I'm gonna go ahead and click Home. And then for the menu, I want this to go to the menu page. So I'm just gonna go ahead and take that arrow and pointed there. And you'll see that once I click that button, should go to the menu. I'll do the same thing with the about page, pointed to them about the hours and location page. Go to hours and location, and then we book a table page. We'll go to book a table. So there we have it. That is the full-blown menu. And what we want to do then is do that. Same thing for all of the buttons down here. So we have booking table and I want that to funnel to book a table page. I'll go ahead and pull that over there. This is about cats 35. So I'm going to put that to the about page. This says view our menu. So I'm going to put that to the menu page. Then this one finally again says bucket table. So I'm going to put that to the book a table page. Finally, because we want this menu to be showcased across all of the different designs, I'm gonna go ahead and take this and turn it into a component. From there, I'll be able to delete all of these different sections. So I'm gonna go ahead and do that. I'm going to drag and drop this component into here. You'll see a lot of it is already set to funnel to the correct pages. There's about there's hours and location. The one thing that is missing, however, is this home. So I want to make sure that home goes to this page. So that is going to the home. And we'll do the exact same thing with this book a table button. This will go to the book a table page. We'll do the same thing with this menu. So I'm going to delete this menu and replace it with the component. Then we have the homepage. So I'm gonna double-click that again and I am going to make sure it goes to this page. And the about page isn't clickable because we will be on that page and then we have this booklet table section. So again, funnel that to the book a table section. And then we'll do the same thing for the hours and location. Delete this section here, grabbed this component piece, do the exact same thing. All of those are pointed in the same direction. And then we have the home. You want to make sure that goes to the homepage. We have hours and location, and then we have a table, then book a table. And then last but not least, we do the exact same thing for this page. Take the component piece, drag and drop it into the book a table page. And then we want to take the Home button and make sure it's funneled towards the home. And then we're going to edit this and adjust this. Because for some reason this is. Staying altogether, we have that. And finally, there we have it. So now we can actually flow through this website as if it was a real website and I'll show you exactly how that worked. But this is really useful when you are presenting a website to your client for the first time, it's much easier to make design edits at this stage of your web design process when you're wireframing it just in the design, if you eventually want to develop websites for your clients as well, It's much easier to make the edits here. Then, after you've coded or developed a website builder that you're using, I always find that you need to finalize any edits or revisions when you're stage and creating this website prototype really helps you do that. So I'm gonna go ahead and highlight everything like that. And then I'm gonna go ahead and press play. So I will be on this book, a table page just because that was the last one I edited. But if I click Home, you'll see it will go to my homepage and I'll be able to scroll through each of the designs as if it was a real website. So if I go ahead and click book a table, it will lead to book a table like about. It will lead to the about page. It really allows you to create an interactive website prototype, which is really useful when you are working with design clients and to make sure you get things approved. Alternatively, if you are working within a team and you are just see UX or UI designer. This will give your team everything they need to be able to develop the website in their own time. So as you go through, you want to make sure that you double-check for any edits that you might need to do. Some things may not be aligned and that's totally okay. We'll go back and make those edits. So you'll need to go to the design section to make any edits if necessary. And I would notice also some of that pages at the end or slightly too long, so I wanna make sure those aren't cut off properly. We have that. I'm going to just click Command S to save my work. And now I'm going to show you what I would do if I'm actually presenting this to a client. So first things first I go to the highlight section and then I will be able to go ahead and press play. Hi Andrew and Joseph. So I have wireframes at the mockup of the website. So this is basically establishing the direction of the website that we're going to go in based on your existing brand assets, such as your imagery and your logo and your menu. I really wanted to make this website really unique to the ambiance you have. So I took the yellow from the chairs and you're a restaurant and May that the primary call-to-action because I feel like it is a very brand double color and also a very memorable color. Obviously, it's all throughout your restaurants. I wanted to make sure that that showed through the website and a very classic. So again, I have taken your imagery and your copy and position it in a way that I think will really communicate the elegance of the brand and the restaurant. And obviously, we can always change the copy. But what I want you to consider when I'm going through this presentation is how do you think this website will resonate with your ideal audience? Will they feel intrigued to book a table, which is exactly the main reason people might be coming to your website or are they trying to find out more information about the restaurant? So I'm just going to walk you through each of the sections. I have the catch 35 logo up here and then a book, a table section. I really wanted this hero image to just be the ambiance so people can really see and feel what the restaurant looks like when they go in. 9. Brief 3: Discover Your Design Style: Project brief three is basically doing whatever you want in your own style. So the main assignment is to redesign a website of a business or brand that you love in your own style. Or you can design a website for a dream client, whether it's existing or make-believe. So if there's an influencer you really like, or a coach or a mentor that you really, really like. You can create a mock website for that person or you can come up with a fake persona of someone in the industry you'd love to work in the project. For this project, you have the creative reins to go in any direction you choose, choose a brand in an industry that you'd love to work in so you can get the full experience of what rebranding a website would look like. You can choose from essentially all types of industries such as health wellness, disruptive tech, fashion, retail coaching and personal development, interior design doctors, dentists, lawyers, and the list goes on and on. So those are just some industries to jog your interests into flood projects you want to do for which industry and for which type of clients. So there are two options here. Option one is to redesign the homepage or full website of a business or brand of your choice. So if there's a eCommerce brand that you really like, or if there's a personal brand that you really like coming up with a redesigned website idea for that person, but then designing it in a way that you'd like to go in. So really exploring what design styles you resonate with and also trying to find inspiration for something that sparks your interests as your design style. This is really just exploring your design style and seeing what things you are naturally attracted to. Option two is to design the homepage or a full website for a dream client and an industry you'd love to work. And obviously I've listed a bunch of industries above. You could either come up with a fake client persona or you can choose a person that you know that would basically be your ideal client. So these are the two options you can either do just the homepage or you can do the full website prototype like we did in project brief to some helpful hints for option one is to look up a business and brand that you love and redesign their website and your own style. Feel free to use their imagery, copy, etc. But be sure to credit the original design if you want to showcase in your portfolio. So you can't really say, oh, I designed a website for Google, e.g. if you are just redesigning Google and your own style, but yeah, basically just making sure you credit the original brand and the fun project you wanted to recreate. If you can't think of a brand, you can also look up website inspiration on Pinterest, Behance or dribble and redesign. One of the websites that you like on there or one of the websites in an industry that you like, they're in your own style. For Option two, you have the option to create a client persona for a dream client and build that person a website. You can format it in a similar way to how these client briefs presented in this class. You can either write it down or if you don't want to write it down, you go for it. Another option for this fake coin persona is to find royalty-free imagery for this dream clients and showcase that into your web design. So you could either really showcase it through copy that you've written that represents a fake client. Or you can use the copy prompts that I've also showed you in this class as well. So I'm gonna go with option two. I'm going to come up with a fake client persona and kind of show you how I'd approach it. I don't really know what industry I'm gonna go with yet. But I think as I find inspiration on Pinterest than the more I'll be able to figure out what type of client I want to work with. So I'm just going to look up neutral website design. As a designer, my style, I'd say is a lot more minimal and neutral. So I'm really drawn to more feminine Inspire Brands with neutral colors. So that is typically what I'm drawn to. I haven't only worked with brands in those, but I love designing in a very neutral way. So this is totally at my style, just the neutral colors and all this stuff is really what I love. So I'm just going to open some of these so that I can start getting some inspiration for what I want the website that I create to look like. I love the colors here, I love the squares within squares as well as this image section here, I think what I'm gonna do for this brand is actually designed something for a coach. I have already designed loads of websites for loads of different coaches and loads of different spaces. And I'd say one of my specialties is creating websites for coaches regardless of Spicer in so I'm going to show you how I go through that process when designing a website. So I'm going to start by going to Pexels and downloading some imagery. Also, if you're not very specific on the type of client you want to create for. You can also just look at Pexels and see what good imagery fine. And then create the persona based on the imagery you find, like this girl is making candles. If I find lots of good imagery with someone making candles, I can create a website for a candle maker, e.g. because imagery does play a massive role in to what we're creating. So I'm just going to continue downloading imagery that I feel like resonates with my style and while I'm attracted to, and then we'll take it from there. I now have a load of imagery that I found on Pexels. I am just going to start playing around with the website based on the imagery that I find. And then I'm going to create my client persona as I tried to explore different design directions that I could go with this brand because it's a do this in your own style and there are no design parameters. I'm just going to use this as an exploratory exercise to challenge my design process. So I am going to go with that direction. So I'm going to go ahead and open an XD file. So I'm just gonna go ahead and draw some rectangles up here so I could drag and drop some images that I liked, just going to copy a few so I can easily reference photos that I am attracted to and then create a mood board of images before I dive into the project. Because obviously there is a lot of different ways I can go with this website design, but I want to make sure all the colors and imagery go together because I am just mainly using royalty-free imagery. So I want to make sure I create that mood board with imagery that I know and feel can work together. I'm just gonna go have a look through this, really like this color. And I want to see if there are colors that I can find in that style. So obviously there's lots of Hanks pastels. I'm not really sure yet what this brand would be. I want it to be fun and playful in a sense. So anything that has these fun, vibrant pastel colors I may use in my website. So I'm just going to continue dragging and dropping. Some of these might not be exactly what I'm looking for. So you see a pattern here. All of these images kind of go together and I still am not quite sure what the brand should be, but I do like these colors and I'm inspired by these colors. So I'm gonna go ahead and start playing around with what I take. This could be, I'm definitely leaning more towards a creative brand of some sort, whether it's an illustrator, someone in the creative realm, because there are lots of really fun shapes and drawing and characters and interesting creative things. So I want to make sure that this brand comes across as a very creative and fun. So now using this imagery, I'm gonna go back to Pinterest and look up a bit more of inspiration, the creative realm. So I can kinda just play around with different designs. So I'm going to open up Google, but to Pinterest and then type in colorful website. And maybe in this one, I would do pastel website. I liked these checkered thing and the neutral colors. This one's really cool. This one's really cool. I'm gonna go ahead and use this for inspiration. I love them, minimalism, but then the little splashes of color. And I'm going to use this and combine it with some other things that I know about design and hopefully be able to create something really unique. I'm just going to adjust my screen so I can easily click between the two. So I'm just going to type in a name, art history. I don't know, just a random name that represents the vibe of the brand that we're going for. Then I'm going to play around with different logos as well. So I'm going to use this in lowercase as well, Justice, and then play around with some different fonts. Our fun and creative. I'm just going to go to the top of my fonts list. A lot of my fonts I use in my projects have been either bought on Creative Market or Envato Elements since I have so many fonts in my repertoire now since I've been designing for so long, I had just go through my fonts as is, and then explore what things I like. But if you don't have any fonts and I'd say definitely explore resources like Envato elements or Creative Market to find font style that you want to experiment with. There are loads of font packs out there that can be used across several different projects. So definitely recommend investing in custom fonts. Definitely, I don't actually like this name, so I'm going to maybe experiment with something else like so I'm going to just use both of these and then see what things I like, kind of like that one. But I kinda want something a bit more creative than a minimal fonts. So I'm just going to keep going through these kind of like this. I think it could be fun if used correctly. Mostly just going to change this to black. So it's a bit easier for me to see in terms of style. Here I'm not just looking for fonts for the logo, but I'm also looking for fonts that could potentially be good for the main headers and paragraphs as well. So I'm gonna go with one of these fonts. Move them all inside here. Really like this. I feel like it's very artistic. Well, let's see. I'm just going to experiment with it first. Just center it. I'm going to draw rectangles so I can try to select a color from one of my images above into that and off the border. And then I'm just going to make this a bit fuller width. And then I am going to turn off the border, use my fill selector, maybe play with some yellow and pink. Hey, let's go with that for now in a select this and make it white of some sort. So I'm going to try to find a wife from one of these maybe to that color. So I'm just going to copy and paste, tried to select different white. I really love this picture, so I'm going to just see what it would look like. And obviously I really liked this picture, so I'm going to just put that here for now. Now the main thing here is I'm looking for colors that I like. So let's see. I want it to be very artistic. You need these to be used. Now I'm going to try to select a color from one of these images. This way. I want this to be the main header and I'm going to try to find a color that I like, maybe like slight shade, darker, maybe to add color. I'm going to continue to play around with some others as well. Not quite. Yeah. So I actually liked that contrast. And then obviously I pulled it from there. So I'm just going to keep that for now when I draw button. So we can have a call to action of some sort. Maybe play around with the border being dark color three. Then I'm going to draw touch. And then I'm going to try to find minimal font. Play with the spacing. Maybe I want to test it with no border. Fill color, T, screen color. And then this button to be okay, I definitely like that much more. So I'm going to just adjust this a bit. Now. I'm going to adjust this font as well. And then just test being that color. I'm liking that so far. And I want to play around with shape here. So I'm going to go ahead and do that. Turn on my grid so I can align it to the side. I'm going to open up Pinterest really quick and look up a few different design, creative inspiration, layouts. So I'm gonna go to Pinterest and I'll look through some of these to see how I can uniquely create an effect that creates something that's interesting too. So I am going to experiment with one main section that goes across and then three images below. I'm gonna go ahead and open up my XD file. Move this down a bit down here to stretch down my file a bit more. Take this copy and paste, take this section down, make this green. Then I'm gonna take this font. I have that. I'm going to make this slightly smaller because I think it's too big. Then take this, paste it in for now. I'm just going to do Lorem Ipsum text here and go to Google and look up Lorem Ipsum generator, copy and paste this irregular, the medium, turn off the letter spacing, increase the size, change the line height, stretch this out. Can experiment with turning this over to the side to create that look that I want to achieve, copy and paste this and put this on the other side as well. Center all these vertically. Cool. I like the look of that so far I'm going to add a button here. Group this, center it vertically. Pay. I'm loving the look of bots so far. Yeah, I'm really liking that. I'm gonna go ahead and try to add a menu up here. So green horse. And then I'm going to add a button over here. We're going to lock that background so I can't change it by clicking Command L or group this button together and then vertically align things. And then I'm going to just move this over a little bit and then equally distribute them. Then I just want to see this spacing. I'm going to make the spacing 80 pixels between each section. I'm going to just make this a personal brand. Center it vertically, center this within the grid. So I love the look of that so far, I actually want to experiment with having this in the center. So I just want to see what it would look like. I'm pretty much like that. So I'm going to just draw a line here because maybe I want to separate the header from the main section and even maybe make it sticky. So I'm going to just experiment with that. Maybe span this picture. These are equal heights in span, this to be slightly raised, slightly taller. I'm just going to unlock this background because they locked it before. And then I'm going to align it to this section so I can vertically center everything. Center vertically and then I'm going to copy and paste this. Do the same thing for the top because that really helps break up those sections, center that vertically. And then I'm going to send both of those backgrounds the back. Great. I'm really loving that so far. Next thing I want to do is touch on the different services. So I'm gonna just keep this section here, copy and paste it three times, turn on my grid so I can align them. Cool. Now the next thing I want to do is move imagery into these images. So I'm going to just go ahead and open this up. So I really like this color image. I'm just going to move that down here, but I want to maybe use that for later. Next thing I want to do is I'm going to draw some rectangles here. And I'm going to make this the same color as the top turn on. Actually, I'm going to make this the same color as this green, maybe have a border, but make it that off-white color, change the size to ten. And then I'm going to copy and paste this background color. I'm actually just going to experiment with an outer border. So I'm going to copy and paste this and press Shift to expand it a little bit. I'm just going to lock this background so I can play around with what I'm doing. I'm going to take off the fill, turn on a border and make that green. Then I'm going to make the border size Chu, and then I'm going to center it. So I want to experiment with having this outer line in these images. So I definitely am liking that so far. I'm going to copy and paste it over to the other images and do the same here as well. Turn on my grid and make sure that outer edge is lined up to the grid. So I definitely like that. It's definitely a much cleaner look than what I was experimenting with before because there are lines down here now I want to make sure they're the same size. So this was a two pixel line. So I'm going to make sure that this line on the border is also pixels just to make sure that we have that consistency in terms of line weight. Then the next thing is, I am going to take this section and copy and paste it. Grab that green color. Make this size. Or do you maybe learning course to take this description? Unlock that background, span it lower than one experiment with spanning this. Maybe make this slightly smaller because it is a smaller paragraph section. And then center this all vertically, horizontally. So I'm going to just move that down a bit, then grab a button as well. So I'm going to grab this button from up here. Just for design sake, I'm going to span this to be this full width here. I feel like I don't actually want a description and maybe I want to add this as a sub-header. So learn at your own pace. Maybe that I think this button is a bit too much. So what I'm gonna do is actually draw an arrow because that would basically signify the same thing, but in a simpler way. So I'm gonna make sure that it's green. Zoom in a little bit, copy and paste it, adjust it there, and then do the same thing on this side. Make sure these points around that so that we can create a pointed edge around these as well. So I'm going to group those together and keep that as is. And I feel like that's definitely a much more simplistic way to showcase what someone is learning about. I'm definitely liking the look of that so far I loved the colors, minimalism also love the fonts and lock the background. I'm just going to move this down and I want to see what that would look like if that yeah, So I kinda like that. So I'm going to keep that just going to group those together. Then I'm going to also add in alarm Ipsum section here. Center that. And then I'm going to copy and paste this line here. And because I want to help break up this section as well. So ungroup that maybe span this to be the full height. Looks like these lines are maybe different colors. So I'm just going to try to experiment with that. You add is a different color. It's going to cool, that looks better. So I think that means this line is the incorrect. Color as well. So I'm going to just make sure that order is selected. So I'm loving the look of this so far. I'm just going to move this over because maybe I might even change the fonts later on or play around with a different font. So I'm going to copy and paste this color down here. And another really cool way to select colors is by taking the main color that you're using and trying to find the same shade but in a different color. So I'm gonna go ahead and just move this to see if there's any colors that I like. And you can already see that these colors seem to work together just because they're a similar shade. Going to change the opacity of it. I do like that color, but I feel like it won't work in this section unless I have a lighter image there. So I'm gonna just see what other images I have. And if they would work here, I'm gonna go back to that shade of green. And then another way to choose colors that is useful is by using the same color, but then moving the color finder somewhere else on the screen. So it still maintains that color cohesion. Kind of like an off green color. Pretty happy with that. I'm going to turn off this border section and maybe try to split this section. Now, copy and paste this here, ungroup it. Turn on my grid so I can align everything. I'm going to just add this color to the side so that I can select it a bit easier. I'm gonna go back to my Lorem Ipsum generator, copy this, go to XD. I feel like that color is still a bit too close because it makes it a bit harder to read, but I still want to use that green color as the main texts colors. So I'm just going to try to find a very slightly lighter color. Another thing I can experiment with is to take this light color and find a shade of that one just slightly, slightly, slightly lighter. Or we can just do full white because I actually really liked the look of that. So I'm going to just use that for now. And then I'm going to grab the call to action from the top. Another thing I may want to experiment with is trying to select this as one of the colors. I just want to experiment with this. I don't know if it's exactly what I'm gonna do, but I want to this down here and see what it would look like. It was a red color as well. Like, does it look cohesive enough that it seems like it makes sense or if it doesn't at all. So I do like the shades together, I might find a slightly different shade of that same colors. So I think it's a bit too random. So I'm gonna go back to this main color over here. Oops. Yeah, I didn't think so. I'm going to do this screen and then maybe do a slight shade darker of that green. Just keep it as is, and then maybe just use this as our different shade. Very, very slight shade difference there. It's not exactly why, but an offline. And then move this up a little bit and just center this vertically. Cool. I'm actually really happy with the way that looks. I'm just going to add in another section here because I do have a call to action that does mention workshops. So I'm going to add in forests. Workshops, as I did before, makes sure that everything is 80 pixels apart. It's going to highlight that section, center it because it looks slightly off balance. So I'm gonna make this one Services, this one course. I'm really happy with the way that has turned out similar to how I did in one of the previous lessons. I'm going to make this a sticky header. So I'm going to just group this together and bring this the front. And then over here on the right-hand side, I'm going to click fixed position when scrolling. So when I press play and actually view the prototype, I can actually see what it would look like. So I'm just going to look through everything just to see if there's anything else that I want to change for now. I think I'm happy with the way it turned out, so I'm just going to go ahead and press Play, make this full width. And I absolutely loved the colors. I love how it scrolls. I like the minimalism, I like the colors. The fonts work really well together. And yeah, I'm really happy with the way it turned out. So I'm gonna go ahead and save that. It's my desktop. So if I click this title, I can name it Vanessa homepage. And then if I click Command E, then I can go ahead and save it to my desktop. And then from there I'll be able to upload it into the class project section and kind of walk through the project I decided to create who it's for, why did it and the goal with it. And then, yeah, I hope you'd like to watch you my process for creating this layout. And I am so excited to see what things you create if you choose to work on this project brief for your class project, don't forget to upload it into the class project section. I can't wait to see what you create. 10. Brief 4: Your Personal Brand: So for project brief for you are going to be designing and prototyping a website for your own personal brand as a designer, having your own homebase as a designer is really important because it allows future clients to be able to really get to know you and your brand, as well as the type of projects that you have worked on in the past. By being able to showcase your portfolio. For this assignment, you either have two options. You can either design the homepage for your own personal brand as an up and coming designer. Or you can design a full interactive website prototype, similar to how we did and project brief to for your own brand as a personal designer, the biggest challenge here is I want you to write your own website copy to pitch your unique selling point to your dream clients. This is a really great way to practice how you show up in the world as a designer. So you feel confident in pitching the services that you provide. This will also give you the opportunity to address the different industries and type of client you've always dreamed of working with. Feel free to use a copy prompts that I have provided previously to help guide your writing process. So I already have my own personal brand website, but I am working on a another design project. So I'm gonna be working through that for this particular class projects and for this website, I'm particularly going to only design the homepage. And here are some exercises to help you get started. Key ideas is to help brainstorm what you want your brand to feel like. I'm going to open up an Adobe XD file and put this side-by-side just so I can jot down a few different ideas that I have for the design brand that I'm creating. So I have a blank Adobe XD file and I am just going to write down a few different ideas. So perhaps you want to have a brand name or you want to be just known under your own name? I have my own brand name, mom side, but I'm also building a separate design business, so I'm gonna be doing that for this project. So I have the brand hub that is the name of the business that I will be building. And I want to just jot down some adjectives. I want it to be minimal, modern, sophisticated, classy, again, nurturing. For now, those are the main adjectives that I want this brand to look like. Now, obviously I've been thinking about this brand for quite some time now. So I kind of already know that a design direction that I wanted to go in. But just to gather some ideas, as always, I'm going to start off on Pinterest and dribble and be hands so that I can find inspiration. So I'm gonna go ahead and open Pinterest, the homepage and look up designer websites. And maybe don't even necessarily like look of this. But if there are designers that you follow on Instagram, e.g. or TikTok, and you liked the look of their website. Feel free to use their website as inspiration as well. I also have a load of resources on my Pinterest. So if you go to my Pinterest, you'll also be able to see all the different boards that I've created for loads of different projects. I have one on web design inspiration, landing page design in all of these different aspects in the design world. So also feel free to use this as a resource. I'm just going to go into my web design inspiration board and see what things I am able to find here. I really love this modern, clean look, and I'm just going and go for that style. I really want it to be neutral black and white feel because I feel like for the brand that I'm creating, it makes the most sense. So I'm going to continue to open up websites that are kind of the style. I've also curated a Pinterest board with some design ideas for imagery, topography, website layouts. So I'm going to go ahead and search through that as well. I do have my own imagery which I will be using in this project. But for now, I'm gonna go ahead and start playing around with different designs. So I have a few that I've opened here. I really love this editorial look here, so I'm going to play around with that. I'm going to draw some squares. Those are just some placeholders for images at the moment. I'm also going to type the brand name up here. The brand make that large and I'm actually going to play around with it a few different fonts in a few different styles. So I want to play around with that in all caps, and I also want to play around with that in capital letters. So obviously I'm not going through branding here, so I'm going to just choose a simple word mark to start off with. So I'm just gonna go ahead and try to find a font that I liked the look of going to make this black so I could see it a bit better, but like that. So I'm just going to copy and paste this and then keep going until I find some other fonts that I really liked the look of. I'm just going to zoom in a bit so I can see. I really liked this minimal look here. I'm going to just copy that. I actually like the minimalistic font here, so I'm gonna just go with that one for now. Again, I can always change this later. This is just a starting point. If you are focusing on building your own brand, then can spend some time here. Absolutely. But for the use case of this project, since I'm not focusing on branding more so website layouts, I am just going to use that simplistic word mark for now, which I really love. I think it's slightly too big. I'm just going to center that. And then I'm going to play around with topographies. And then I'm gonna go ahead and create a text box and type my hook. So I want to explain what the brand hobbies for and who it's for. You want to create a hook based on what you are designing for. The brand hub for me is going to be a place where I offer web design templates and branding templates of all sorts. So I want to be able to communicate that in the primary hook of the project. So I am going to choose a different font for this header. I actually quite like this editorial fonts. I'm going to actually go forward with that. Then I'm going to also create another text box for paragraph font syndrome. And then I'm gonna change this to 22. Brand is your one stop shop for all of your design needs. And I'm going to zoom in and change this to more minimal font. Your one-stop shop for all your design needs. Me and maybe I don't necessarily love this font, so I'm gonna go ahead if there is too big. So maybe I'm going to think it's 24, change the line height to 40. No, I don't necessarily love that together. So I'm going to change paragraph font and don't actually think I'm obsessed with this font, so I'm just going to create a copy of it so that I have it in case I want to go back to it, but I'm going to experiment with some other designs as well. I might like that font, so I'm going to revisit it. And I just put that down here. I'm gonna make this full screen so you guys can get the full effect. Now I want this website to be pretty upscale looking. So I want it to be very modern, simplistic, clean, and I really want that to show in its topography. Topography is really important for this case. I want it to be not too extreme, but I also don't want it to be too basic. And then go with that for now. Now, I'm actually going to make navigation bar. So nucleic home about horses. Maybe here I'll put portfolio horses contact. So I am going to distribute those horizontally and kinda see how far away these are. I'm going to make sure that they're all 100 pixels away from each other. I'm gonna do the same on this side. If you just move the arrows on your keys, when you're clicked onto something, you can move them, pick one pixel at a time. And now I'm going to select them and make it smaller, change the letter spacing would be 40, 6,000. Maybe change it to semi bolt. So we have that. And I actually kinda wanna make the navigation bar. So I'm gonna go ahead and draw a box back here, turn off water and go here. But I don't want it like fully Onyx Black. I want it like slightly needed blacks. So you have that, send it to the back. Then you can kinda see the texts there. So I'm going to highlight it. If I click Shift and click the background, it'll unselect the background will only select the text which is really useful. Then I'm going to center that. Great. I love how that looks so far. Then I am going to drag and drop imagery. So I have loads of photos here that I've taken with a photographer and I'm going to use some of them on my website. So I'm gonna go ahead copy and paste some of these. And I want to make that rounded shape again. Turn off the border. And I'm also going to grab some texture that I found the alchemy yoga seen. So I'm going to grab that one, loved that, make it faded a bit. So it's like a very, very, very subtle, I'm actually going to make this span the full screen and make sure it's centered. I want this to be here. I'm going to actually remove this style. I also wonder what it would look like if I span this to be the full width. Now I love that I have some texture here. It's still very neutral and white, but there is a very, very slight texture there now. So you want to create a border just to really get that effect that I want. I actually don't think I want the border and I don't think I want the radius. I'm going to turn that off. I'm just going to span this to be half the screen to showcase myself as a personal brand line. Those left actually align those center. I'm actually going to click Command Z because I preferred the other design. So I'm gonna go back here and do this way. I'm going to turn that off again. Turn that off. I still want that effect there, but inside I'm going to put this on this side. Then I want to create a button here. And I want it to be filled with white. Make an outer, outer line button, going to copy the menu button and change the fill color to black. Type that in as get in touch. I'm going to make the border also black as well. Cool. I'm liking that so far. I'm not sure if I love this photo here, so I'm going to try to find a different one. I'm going to put this one over here. Drag and drop that one. Maybe make the border black, change that to 50. And I feel like that's slightly resonating with the look that I want to achieve a bit more. I'm not sure I like this. Get in touch button, so I'm going to change this. Fill color to be black, change the text to be white. Still not loving that photo. So I am just going to go ahead and change it to something like that maybe. And I feel like that definitely goes along with the vibe of it more. So I'm going to turn off the border and actually span this to be a full box in the Hyrum. I really love how that looks so far. I'm going to see what it looks like without this background. And I think it looks a bit cleaner and I still want this to be an accent, so I'm gonna span it to the full width and have it as part of the next section. So we have that. I love the look of that so far. I'm just going to center this amazing, I think this logo slightly too big, so I'm just going to make it smaller slightly. I'm going to match this black, the black that's on my shirt here. So I'm going to turn this off, click this color selector, and select that black. And you definitely see that it helps bring the colors together a bit more in a cohesive manner. So I'm gonna do the same thing with the buttons. I love that so far. Now I'm going to just go look at my web design inspiration to see what sections I might want next. So let's see here we have a servicer shop and blog. Little bit about yourself. What else is going on here? Who we are? I'm going to scroll down to see what things I like and what things I don't like. Going to open this in a new tab because I really like the borders here and I also really like that all of the H1 tags, like the heading tags are in lowercase. So I might also experiment with that, and possibly even a different font. I love the colors here and I love the imagery. Really, really cool design curated for the heartland entrepreneur already to scale your business for long-term success. And I'm also going to just experiment with different texts because I'm not completely sold on this text. I'm just gonna go ahead and see what things I like. And again, you don't have to follow this exact process. My process pretty much changes based on the design I am designing, but it really varies. Sometimes I think I like it a font. And then as soon as I'm finished with the complete layout, I decided I might not like it as much as I thought I would. So it's really important to just trust your intuition as you're designing. And the more you practice, the more you'll have an eye for things you like and don't like. And also, another thing to note is that just because you like, it doesn't necessarily mean your client would like it. So it's really important to not get so attached to your designs and not be a perfectionist. I think that is very difficult for people in the design and creative realm in general. Because obviously we like making pretty things and where attracted to pretty things, hence the industry that we're in. But it's really important to not be too perfectionist because even if you present it and you think it's the most perfect website, your clients still might not like it. And that's just part of being a designer and part of the creative process. So definitely especially at the beginning, make sure you design things that you like, but don't necessarily become too attached to them. So I'm just gonna go ahead and continue trying to look for a font that I like. I know it's always a bit more difficult when you're designing for yourself to not be a perfectionist. Oftentimes designers actually handoff own brand in websites or other designers because we can and just be like in our head about the designs that we're creating. So I'm just going to keep going through this until I find something that I like. I kinda want a more editorial style font, so long and tall. I might like that font, so I'm just going to copy it and put it to the side because it's maybe yes, I love that. I don't actually like this lowercase here, so I'm just going to make that exam. I definitely liked the look of that. Must feel like this could be slightly larger as well. Adjust this and maybe I want to actually play around with this being all centered. Listen to that. And I can't actually adjust this because even though this appears to be a square, there's no actual grid here, so I'm going to just draw square so I can center that text. I could always delete it. Then I'm going to center that. I'm loving that so far. And then I'm going to talk about who this is for and what exactly someone might be looking for when they come to this website. So basically as a designer, your goal is to make sure your clients know exactly who you help, what specialize in. And the first two sections should always be about your business and the solutions you offer. So I'm gonna go ahead and just add in a section here, make this slightly longer. The brand hub for me is going to be a template shop that caters specifically to businesses who are just getting started. Maybe they don't have enough money to pay for a full-blown design package. Oftentimes, branding and website can be upwards of five to $10,000. And maybe if a brand is just starting off, they don't have the funds to be able to spend on. Costume curated brand, especially if they don't know their business idea will work or they're just kinda doing it on a side and testing and experimenting with different things. So I want to create the brand had to become a hub for people who are just getting started. So anything from courses to templates, to branding, things, that's essentially what I wanted to create the brand hub for. So that is what I want to talk about in the copy. I know that is the challenge of this and you might want to just design it without the copy first, but because this is my own brand, I feel like I can write the copy as I'm designing and then I'll say I'll be able to get a full cohesive look of everything that I have to offer. I want buttons to be in all caps, so I typed it in lowercase. But if I click this and it'll automatically make everything uppercase, which is exactly what I want. And I actually feel like the paragraph text is very small compared to the header text. So I'm going to just adjust this slightly and also maybe adjust the spacing. And I also feel like I need to adjust this as well. I'm going to just 70. Amazing. So I'm actually going to save these as character styles so that I can easily edit it. And then I'm gonna do the same thing here with these pieces of content. I'm going to change that and also change that. Group that together. And then I'm still gonna do that same thing to center the text in this section. We have that. I also feel like there needs to be some sort of embellishment here. Also. I feel like this is not in line. I'm going to just make sure these are in line because this is the hero. I could actually make the font bigger because it could be considered an H1 tag. It's not perfect. I'm not really sure if I'm like loving, loving it, but I might revisit this. I feel like oftentimes as designers, we can be so perfectionist and I still don't love, love this section, but that's fine. I might revisit this at the end, or maybe it's because this is three lines. So maybe I can remove this because I feel like I've said it anyway, design solutions, custom curated for the entrepreneur. And also think about copy. It does play a role into the design. So you want to make sure that everything is designed up to par. And I feel like this all actually needs to be left alone. I know I centered, aligned for, but I actually think that's what I'm not liking about it. So I'm gonna go ahead and central line those and then left align the paragraphs. And I definitely feel like I'm liking that so much more. I'm just going to align it to the grid to make sure it works. And I'm going to test, going back to the other text. And then actually up to 55. Maybe it's a button I'm going to test spanning the button full-width, giving this a little extra space. I might do some sort of icon here because I feel like this is good space, but I might put an icon here, so I'm going to just draw it as a placeholder for now. Or I can also test having a sub-header sometimes that helps break up the negative space. So I'm going to actually draw that here. Welcome to the brand. Make it all caps. Okay, I'm just gonna leave that as is for now and I might revisit it later. This section I'm liking so far, but I want to add some embellishment on the side to help customize it a bit more. So I'm gonna take this header and actually turn it sideways. So if you go to this circular section here and you click Shift, it'll automatically rotate 90 degrees. That's exactly what I want to make here. And I want this same embellishment on the side. So I'm gonna go ahead and rotate that over here as well. You know what? I actually think I'm not loving about this is having that not centered. I think because it's like a big chunk of texts to land on, I want to center align it and then add the embellishments on the sides. So I'm gonna try doing that and see how I liked the look of it. And I kinda wanna make a collage. So maybe that is something that I can experiment with here. Then this will probably change. I'm just going to adjust these. I'm going to change this into an arch look and I'm going to open up my folder of photos and I'm going to drag and drop. So I already have a section with a bunch of portfolio pieces. I'm going to just go ahead and look, see if there's anything that I like. I really liked this one because of the color might not necessarily exactly go with the design, but we can always fine-tune that later. This one would be better there and then sort of embellishment there. I actually wanna do a border effects that I want it to be white. So I'm going to use the eyedropper tool, so it looks natural. Slightly smaller. And you can delete this and see what it will look like if it's perfectly parallel like that minus so that I can center both of them. I definitely feel like I'm resonating with that already, so much more. So I am going to just copy and paste this because I want to keep this section and I think copying your designs, you can always go back if you don't like something. So I just copied and pasted it. You click up here, click Command C and then Command V to paste it. And then I'm gonna just added this in case you wanted to change something here. So I'm gonna do the same effect that I previously tried doing. And then I'm going to left align, left align it, my grid. And I'm going to redefine this and add it in. I'm gonna do the same effect that I did in the previous design. But what I'm gonna do is have it in this section that I'm going to copy and paste this and put it over here so you can drag and drop between sections as well, which is really useful. I'm going to address opacity here because maybe it's this texture that I'm not really loving. So I'm gonna make it very, very, very, very subtle. I got so far. Then I wanna go talk about my services. So I'm gonna just put that here. I want to make this cohesive, so I'm going to actually add a sub-header here as well. I want to have like a line break here, so I'm gonna just go ahead and draw this line. I have the different templates that I'm gonna be offering and then I am going to beat them horizontally. I'm going to make this slightly larger because it is a header but a smaller headers. So I'm gonna do like 24. Make this font, and I'm going to make this motor actually, actually, I'm going to keep the as-is and paste that down. I'm going to actually change these two numbers to create more customer facts. So 1234, I'm going to switch it actually, I'm going to put this at the top and make these numbers. Going to just add it that so that I can really align these properly. So I'm going to copy and paste this multiple times. Then I'm going to align these and distribute them horizontally so they're all equal. Turn it off and group them all. And then I can go ahead and edit it or two. This is really good to make. I feel a bit more cohesive branding and copywriting. So these are the different templates that I will be creating semi custom brands that you can update. Your Instagram real story and post templates. Branded Instagram real strength to maintain a cohesive look. It's a good rule of thumb to make sure that the paragraphs when you're designing are the same length. But just to maintain that cohesive look, it will change based on the screen size that the website is being viewed on. But again, it helps maintain that cohesiveness and togetherness. So that's that I know. The next thing that I want to show is my portfolio. And because a portfolio is very visual and as a designer, we have lots of different colors across our designs. I recommend presenting your portfolio on a light background. So what I'm gonna do now is draw square here and actually make this black. So the next section can be white and to back turn off the border, then use the fill color. To do that, I'm going to highlight everything and make that white, make the border y as well. And I kinda wanna make this slightly off colored. I just wanted to test it to see if I would actually like it. Maybe even I've tried to use a fill color from one of the photos, see if it will work. I'm just going to keep it black actually because I don't think the colors are going well there, but I am going to change that photo because obviously that's just a copy of the one above. So have a look at my different imagery. I like this one, but I feel like I need to be on the other side. So I'm going to just go ahead and move this over here and then shift it over. I'm going to make this opacity even lighter, maybe even five. So we still get that texture, but it's still very light. I'm going to actually make this slightly taller so we can have a little bit more of that photo. Amazing. So I'm definitely liking the look of that so far because I like this way more than I like this one. I'm actually going to turn this and delete it, so I don't have to see it anymore and we definitely see it coming together. So I'm loving that so far. The next thing I want to show is my portfolio. I'm going to copy and paste this center here, center their portfolio, recent work. The door. Now I want to showcase my portfolio. I have a bunch of pieces here in my portfolio section. So I want to showcase that here. I want to. Sibley. And I want to actually create a scrolling effect, so I'll show you how to do that. So I'm going to actually make this span the full width. I'm going to take two more of these and make sure they go off the grid. So you'll see that there is a square here, but it's going off the grid, which is totally fine. I'll show you how we can make a scrolling effect in Adobe XD, which can be really useful to represent something that you might want to design once you're in development mode. So I'm just gonna go through a few of my different portfolio pieces and put them here to really showcase the brand and what I am creating. So I'm gonna put that there. I want to showcase a lot of your different work in a very unique way. If you need to spend some time creating images like this, I usually do this and spend some time at the end of my project creating stuff that I can post on social media. And I think it's always really useful to do this. I'm going to turn off the border. So we have all the pieces of our portfolio and I want to show you how to create a scrolling effect. So this can be really useful when you are trying to present a concept to a client. And you want to show the fact that you want to create when you're developing it, or if you want to communicate to a developer what effect you want this particular section to have. So I have six pieces in my portfolio. I'm going to highlight it so I can create a group. So if you click command G, it will automatically group it. Or if you right-click, you can click group here. So you'll see that they're all grouped together. And to create the scrolling effect, you use these buttons here. So we have horizontal scroll. This is if you want a vertical scroll, and this is if you want both a horizontal and vertical scroll for this section, I want to create a horizontal scroll. So I'm gonna go ahead and pick horizontal scroll. And I'm going to adjust this too edge here. And I want to actually start this at the beginning of the grid to create that full effects. So I'm just going to turn on my grid so that I have the ability to showcase it. And I actually want to draw an arrow here to signify that this is a scrolling section. I'm going to make that black. I have now an arrow here to signify this scrolling effect. If I go ahead and press Play up here on this website. So I'm gonna go ahead and click this title up here, press Play. And now we're viewing the website. I'm just going to make this full screen so we can see it. You have that and now we can actually scroll through which is really useful to be able to showcase your work. So I love that effect. And then finally we have the Contact page. So I'm just going to go ahead and copy this section and this section. Oh, actually, before I do that, I wanted to create a button here to link to the portfolio. And we have the final contact section. So we have get in touch. Why? I'm going to center that and I'm going to center this to each other. Actually want to make this smaller, this similar in width. And I'm going to center them both, going to move that over to the side. And I want to create that embellishment effect that I tried to do earlier in this video. So I'm going to go ahead and rotate it to the left hold Shift to make sure that it's perfectly 90 degrees, I'm going to turn on my grid so I can see where I am. I'm going to do the same thing on the other side. So I'm going to copy and paste it, rotate it by holding Shift, and then we have that same effect over here. So I am loving this minimal look so far. And what I actually want to do is make this sticky header. So I'm gonna go ahead and group this altogether and I want to fix the position when scrolling. That means as I scroll, this will continue to be at the top, which makes it really easy to navigate the website. I usually have this feature on most of my websites just because I think it's important for a client to be able to navigate to other pages on your website without having to scroll all the way up back to the menu. It also really creates a branded experience because the logos stays at the top. So I have grouped this section together and if I right-click, I want to make sure that it's all the way to the front so that it is on top of all of the different elements below it. So you go ahead and click bring to the front and then we click exposition when scrolling, this signifies that we want this to be a sticky header. Now, if we go ahead and press play to view the prototype, we then have that sticky header look that makes it really feel like a really branded experience. And I am actually seeing that now that I have this sticky header, I don't like how the header looks on some of these images to, to create a separation, I actually want to create a border at the bottom of the header. So I'm going to ungroup this, make this slightly smaller because I think it is still a bit large. Move this the top slightly so that we have a smaller header. Center it vertically. And then what I'm gonna do is actually draw a line at the base of the header. So if you are coding and want to learn how to code, this isn't a fact that you can do with CSS, so it makes it super easy. I'm going to make the border white so you can't see it, but you will be able to see it once we group it together and make it a sticky header. So I am going to group all of this together and do the same thing, bring it to the front, and make sure I click fixed position when scrolling. I'm also going to center this because now this is slightly off center. So I'm gonna go ahead and view my website. And I like if the height of that navigation bar a bit more. And then as you see there, very, very, very slight border that creates separation as you're scrolling. And I think it just allows for a slightly better experience and it matches this same order here, especially black on black, it helps create that separation. And then we have the portfolio. And this section obviously, as mentioned before, it allows you to scroll and you are able to really showcase an interactive design with those elements. So I hope that makes sense. I hope you enjoyed watching me create this video and this process for creating my own brand. So I'm gonna go ahead and export it so I can upload it into our class project section. If I click the title and click Command E, automatically open up my Finder and I am going to name it personal brand website. And then from there I'm able to upload it and share it across my social media platforms. So there you have it. That is how I would design my own personal brand. I hope you enjoyed this process video and I hope you found useful information and the custom scrolling effects. And I'll see you guys in the next video. 11. Thank You: And that's a wrap. Thank you so much for choosing me to be a part of your design journey. And I can't wait to see your creations. Don't forget to upload your class projects into the class project section. As I genuinely love giving feedback on your designs and also seeing what things you are working on. If you enjoyed this class, I really appreciate it. If you could leave me a review so I can consistently improve and also see what things resonate with the students that take my classes. Be sure to follow me on Skillshare to get updated on my next class that I publish, and to connect with me on social at Angelica steel on Instagram, TikTok, or check out my website at Angelica steals.com. Thank you for choosing me to be a part of your journey. And I can't wait to see your class projects.