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.
Angelique Vestil, Web Design, Branding & Marketing Expert
