Transcripts
1. Class Intro: Being a UI UX
designer is not just about working in Adobe XD figma. It's about understanding
your users through the design decisions that you make during the design process. Hidden Zara, Alex here and welcome to this
Skillshare class, where we're going
to go from zero to hero as a UI UX designer. I'm a digital products
creator and so far I have created or 500 digital
design products. I'm also a course
creator and so far I have recorded over
40 different courses, all about your UX design
and social media. And so far I have 60,000
students enrolled courses. And in this class we're going to cover basics of UX design, what it is and why is it
essential to the design process? Design briefs and
explain what they are and how to communicate
them with your clients. Project proposals, what they are and why you need them
for every project. User research and how to use
it to create a user persona, competitive analysis and how to avoid mistakes your
competitors are making. User flows in different ways. Users move through your website, paper wireframes
and why they are useful for the
design, structure, layouts and grids and how to use them for better
design consistency, topography and font pairing, and how to choose perfect
fonts for your designs, iconography, and selecting the right icon sets
for your projects. Color theory and how to choose perfect colors for any project. Working with images,
image sets and benefits of collections,
mood boards, and why they are important for
setting the projects Load, UI kits and design systems and what is the
difference between them. Then we will move to the
project of this course and designed a website from
scratch in Adobe XD Figma, using the techniques we
learned in this course, build it in bloodflow, make it responsive
and publish it without writing a
single line of code. Case studies and
how to use them to attract better clients
for your projects. And where to get the job depending on the type
of job you want to get. 20 sections in this course, one of the 200 lessons and
all 28 h of video content, you will get all the
templates and practice files used in this course for
both Adobe XD and femur. So you can follow along or two years of recording
and feedback from over 60,000 students went into
creating this course to make it the biggest and most complete UI UX course ever
created online. Solid forward to see you inside. And let's start to UI
UX design journey.
2. Course structure and project files: Hey there and welcome
to the course. In this first lesson, I'm going to talk
a little bit about the course structure
and the project files. So the course structure
basically has two main parts. One is the theory part
one is the practice part. Majority of young designers, especially just skip the theory
part and go straight into the design tool without knowing
any basics about design, about the process, about the methodologies that you
can use along the way. And that's why they are
struggling or even worse, demons keep the design
part and go straight to Webflow or
straight to code or something like WordPress or Wix or whatever
else tool they are using without ever knowing
how to actually design. So that's why I decided
to create this course in the first place to
cover both the, both structures, so both
theory and practice and to show you guys both and
how to use it at the end. So as I said, if you want, you can learn the theory part, or if you know the theory, you can skip straight
to the practice part, but are strongly recommend, especially if
you're just getting started to just dig in and learn this theory part because
it will serve you well down at the
end of your career. And one final thing
I want to mention about this lesson
is practice files. Each section, if it
has practiced files, they will be linked
in the zip file. You can download the zip file in that section and use them. Or if it is otherwise stated, depending on where you're
watching this class, you're going to have
either dedicated zip file to download every
single file from this class. Or you're going to
have, as I said, different sections with
zip files for each of those sections you can
download and follow along. So let's get started.
3. Class Project: Your class project
for this class is to follow along the section
where we actually create the website
design and following the instructions
in the video and following the practice
file which I provided, I want you guys to
create your own design. You don't have to
change too much. You can use the imagery
I provided e.g. but I would love to see
some different colors, maybe even some
different topography. And I just want to see
you guys experiment with the tools and techniques which
I provided in this class. If you don't feel comfortable in doing that sort of design on a grand scale and saving it out and uploading it
to your class project. Then maybe you
should follow along these different assignments for each section because each
section has its own assignment, maybe you can complete
that assignment, save it out as a JPEG and
upload it to a class project. I look forward to see
what you guys can create and please
share your work. I look forward to provide you with any kind of
feedback and any kind of help which I can and make sure to share your work in
the class projects.
4. Figma Course Updates: Now that Adobe has bought Figma, I want to update this
course in the future and include all of the Figma
irrelevant content. So you are going to be able
to have the option of having Adobe XD content as well as Figma content in terms
of what's different. There are few things which
are different for Figma that are not included
in Adobe XD, e.g. fig jam and pages
and all sorts of different prototyping
features that are a little bit more advanced
and they are in Adobe XD. But on the other side, adobe XD has some features
that Figma doesn't have. So this update is going to roll gradually over the
next coming months. And I'm going to try to
update every single part of this course which has XD content to Figma
content as well. I'm going to start
with major parts of this course, such as e.g. design, brief and
project proposals and persona and design
of the pages itself, exporting them and working
with Webflow because those are the major parts of
this course which need to be updated obviously. But over the next coming months and over the next year, e.g. I'm going to even go as far as, as far as including the design, system setup and creating
your own UI kit. But you're going to have
to wait a little bit longer for those lessons. But if you take a look at the updated content
which I created so far, you're going to easily
get a glimpse of how to create that
in Figma as well. There is also the question about the future updates now
that Adobe has bought Figma and what it's
going to do with Figma in the future is going to include all of the
Photoshop features e.g. is going to include all the
illustrator features e.g. nobody can tell at this point, at this moment in time. But for now, enjoy these updates and make sure
to stick around because I'm going to update this
course in the future and add all of the relevant
content as it comes out. And of course, if there are some major updates to Figma
as well in the future, I'm going to cover them
in this course as well. In terms of x D content, I pretty much covered
everything there is to be covered for Adobe XD. Now, in the future, we're going to
focus only on Figma content in terms of using XD. Adobe has come with a statement, already recorded a
separate video about this, that it's going to
keep XD for now. What this means is
for the next e.g. two years, you will
be able to use x as it is completely normally, it's still going to
continue getting updates, and it was just
updated earlier today. So you can check it out, you can install those updates,
you can use it. You can follow this course
completely normally. So in the next year-and-a-half, two years, nothing
is going to change. You can use XD,
you can use Figma, pretty much exactly the same. And as I said, I'm going to make the content
for this course and cover every single thing
that you need to know for both Adobe XD, Figma. So enjoy the course. Make sure to check out all
of these updates if you're interested in is the
content in Figma content. And for some, you will have to watch boat because
I didn't want to waste your time too much
in recreating all of the content to be exactly
the same for both XD Figma, I just covered what's
different in Figma then in Adobe XD because as I mentioned at the
start of this video, they are now part of
the same Adobe family. So in the future
everything's going to look pretty much
exactly the same. So enjoy the course.
5. SECTION 1 UX Design Basics: Ux design is incredibly
important in the design process because if you think about
it like a house, UX design is the XOR
structure of the house. So brick-and-mortar UI design
is the actual facade that goes onto a house and makes the house look beautiful
from the outside. And the actual code that goes at the end are the actual windows,
electricity, Internet. So to make a house livable
and to make it work, every single one of these
steps is incredibly important in the design
process overall. So skipping one of these
steps is really bad idea. In this first section
of this class, we're just going to talk
about UX design basics. So let's get started.
6. What is UX Design: User experience design
is the process of designing experiences
that are efficient, effective, and
delightful for users. So in other words, you have to know who are you designing for? What are you designing
in the first place, and which problems does that product or
service helps solve? So to know this, you have
to conduct something which is called user
experience research. And you have to understand
who are your users, what are their needs,
what are their wants? Because not all
users are the same. So your job as a UX designer
is to target those needs and to help solve those needs
by UX design process. Because every project
is different, every user is different and their needs vary from
project to project. You have to adapt as a UX
designer to those user needs.
7. What does UX designer do: Ux designer understands the
needs and goals of the user. They connect with users
to understand what they truly need from this
product or experiences. That's called user research. And it's the first stage in
the process of UX design. The next stage is
to clearly define what products needs
and wants users have, so you can clearly define
the product goals. This leads into
the ideation stage in which UX designers come up with potential solutions for the problems
that the users face. Then comes the prototyping
stage in which UX designers take their ideas and turn them into functional prototypes, which they then share
with stakeholders and other team members
to just test and make sure that they actually work before they
pushed them into production and
before they push him into further testing
with the users. After that comes the
final stage which is testing where UX designers
push their solutions to the users to make sure that they actually work and to make sure that they actually solve the problems that
the user's face. The UX design process is never
completed because when you actually test the product that you created as a UX designer, just as are the further
down the line, e.g. six months or 12
months down the line, users needs are going to change. So therefore you have to
improve that product or experiences according
to those users needs. And UX designers are
there to do that for the entire lifecycle of
the product or service. They have to keep researching, they have to keep
improving the product or service to meet
the user's needs. Because as I said, user's needs and wants are
constantly changing. Because in the rapid
development world that we live in today, those changes are required
from time-to-time, e.g. for some products. But those changes are required on monthly basis,
which is really rare. But usually it's something
like six months or a year. And you have to understand
as a UX designer, what are those needs
by conducting all of those researchers
oral dose interviews. And you have to adapt the
product or service to meet those new requirements and new needs that your users have.
8. Is UX the same as UI: Ui design or user
interface design, is the process of designing experiences such as
websites or mobile apps. It is at the later stage
of UX design process, but equally as
important because it's not just the part of
UX design process, It's the crucial part
of UX design process. You can have the best research,
perfect content strategy. But if their experience isn't
beautiful and readable, nobody will want to use it. Some UX designers go as
far as paper wireframes and just stop there because their skill level
has stopped off, but you can call it a
newspaper wireframes. That's where UI designers step in to turn those
paper wireframes to turn those researchers and
ideas into functional models, to functional prototypes
sometimes even code that users can
actually use, test. And then then UX designers and UI designers in conjunction can improve for
further usability and for further
testing and research. Ui designers don't need
to know how to code, but it's important that they understand how the
code works and how to structure their design for sharing with developers. There is also something
called no code tools, which in today's day and
age is really common inside UI UX design sector. And those are the tools such as Webflow and Bravo Studio app, which are the tools which
help you as a UI designer, create all of those experiences and turn them from
static designs and prototypes into beautiful
functioning websites or mobile apps. No-code tools are really great because you don't have
to know how to code. But once again, it's
really important that you understand how the code works, how to structure designs, because it's going
to be super simple then for you to either create those experiences into
tools which I mentioned such as workflow or
a brow Studio app, or to send those designs and
to export them properly for your developers because
this whole system needs to work as one. Otherwise it's just
going to fall apart. Because once again,
what's the point of beautifully executed research of all those client
and user meetings. If that is not something
which users would actually want to use on their
devices such as laptops, mobile devices, tablets,
and so much more. So that's where UI
design is crucial in this whole process
because they are there to turn those ideas
and put them into functional concepts more often than ever using something
called no-code tools, which I just mentioned. Or simply knowing how
to structure those, those designs into something
which is called e.g. design system, which
is then scalable later in the design process
further down the line, e.g. six months, 12 months, or even few years down the line. Because that design system
is there to help them scale the product and to
help them update the product as time goes by. Because you as a UI designer, will be there in
that company, e.g. for, let's say two years. But what happens
after you leave, after you switched companies, after you go and work
as a freelancer, somebody else has to
fill in your shoes and has to continue
where you left off. That's where these design
systems or UI kits, e.g. come in handy. And that's where UI designer as a job position
is really crucial. Because once again, it's the
key gap and the key bridge between UX designers
as concept and research and then developers
as people who put those concepts and research into development for the
actual users to use. Ui design is not UX design, but it's the part of
the design process in general and equally important
part, in my opinion. For that.
9. Skills UX designer needs: A good UX designers
should have empathy to listen to their users and
to understand their needs. When conducting user research, UX designers should
know which questions to ask to better understand
which problems to solve. And they have to
understand how to handle the tools required to do those jobs because
tools are many and we're going to cover them in one of the future lessons. But you have to understand
which questions to ask to help other team members
to help yourself solve that issue that
your users face. Communication with
users, but also other team members such as
UI designers and developers, is the key to beautifully
functioning design process. And that is one key skill that every good UX
designers should have. Great UX designers also
specialize in something which is called UX
copywriting, visual design, and sometimes even marketing
to help facilitate the entire design process and to help bring more value to
the team they working. You don't have to have all of these skills which
are just mentioned. And there are many,
many, many other skills. But the more of them you have, the greater value
you're going to bring to the team
that you are part of. Or if you're working
as a freelancer, the greater the chances
are you're going to get bigger and more expensive
projects to work on because you are going to be the crucial part of this team, because you possess
all of these skills. Those skills come with time. So don't worry if
you're just getting started and you
don't have some of these skills or you don't understand what some
of these things are. Start small than big, built from there and then upgrade your skills
as the time goes by.
10. In House VS Freelance UX Designer: When you're working as
a part of an agency, chances are you're going to
just work as a UX designer. The bigger the company is, the bigger the chances
that they have a dedicated copywriter and that they have dedicated
research team, that they have dedicated UI
designer or e.g. developers. So you can focus on UX design itself and that you can focus on the entire
process itself. And the greater the
chances are that you're going to be internal
part of that team because you can simply focus on what are your duties
as a UX designer. This interim, we
bring goo goods, salary, but are limited one, because you're going to be integral part of
that design team. But you're simply going to
work as a UX designer alone. But when you're working
as a freelance designer, the more of these things
you know how to do, the greater value you're
going to bring to the part of the team or the project you are
going to work on. So therefore, you can
command a bigger salary. Because of those
reasons, you can e.g. take two or three
big projects per year and then relax for
the rest of the year. You don't have to work for
the rest of the year, e.g. or you can take many, many smaller projects because of the skill set
that you possess. Once again, the bigger
the skill set you have, the greater the chances are
you're going to be working on these big projects and
you're going to bring the big value to
these companies. And once again, the more of these values you can bring
to the team you are in, the greater the chances
are you're going to get big salary from
these projects. It just depends of
what you would like to do and where you want
to be in your career. Some people like to work in
an agency for years on end. Other people just
like to do freelance. Some people like to do both. Maybe work in an agency and
then work on freelance. On the side, it just
depends on who you are, where you want to be in your
life and in your career. E.g. some people like
the stability of the agency because it
keeps bringing costs, the revenue or the people
like to take the risk may be and take some bigger projects as freelance UX designers. But then, once again, also, it depends
on your skill set, what you know how to do, how good are you in the
job that you are doing? E.g. in this case, UX designer. How good can you communicate
with other team members? Like I mentioned,
e.g. UI designers, developers and
graphic designers, some cases marketing team. So it all depends of you, if you're just getting
started or truly recommend to try and do both, maybe start with
freelance design just to understand
what client needs. Maybe you can go
to platforms such as Upwork or 99 designs. Pick up few design
projects here and there, and then simply understand what those clients
actually need. Understand their users,
understand the user's needs, and understand how to conduct proper user experience research. And then move on from there. Then maybe with that
experienced move on to apply for design agency job
just to understand how, how is it like to be part of a physical team working with other people inside
of that agency. And simply understand the pacing of working inside of an agency, working on one project
at a time with multiple people at the same
office, at the same time. Maybe that's the
good part for you. So my advice for you is try to do both and see where
you find yourself in. And then never forget, you can always switch
between these two from agency to freelance
and back to agency. It doesn't really matter. What matters here
is to try and do both so that you can understand
both sides of a coin.
11. Tools for UX Designers: There are many different
tools that you are going to use as a UX designer. So in this video,
I'm just going to cover some basic ones. And also, as I mentioned
in previous lessons, as time goes on, as you perfect your skills, you're going to encounter few of these stores and few other
tools which do similar things. It's all up to you
off the project of the users needs and
what you really like to do and what
you need to do. So make sure to
do your research. And for these tools which I'm going to show you in this video, I'm going to create a
PDF which is going to be attached in this class
that you can download. And you can simply
click on those links to access them easily
without any further ado. Let's get started. So
first tools we're going to cover are tools for UX research. Now some of these tools are premium and you have
to pay for them what pejorative these tools
have at least free trial so that you can
test them out and see if they are a
right fit for you. One recommendation
I have for you is if you're just
getting started, make sure to do your research on free tools and make
sure to do it on foot. What I mean by that
is you can use majority of these free
tools such as Skype, such as Google Meet and
things like that to conduct your user research
and interviews, e.g. and things like DOS. And make sure to always get paid up front for your projects. Especially if you have
to pay for some of these tools because
they are expensive, they can be really
expensive down the line, especially more and more tools
you add to your toolbox, It's going to be more
and more expensive. So always, always, always
make sure to get paid upfront before you actually
start using these tools. So as I mentioned,
tools for UX research comes first and we have
Teller books so you can understand your client's
interactive UX toolkit to start your next project with proper research, make
sure to watch the video. Once again, links are
going to be in the PDF, click them and access
all of these tools. So you can customize the design process for
your project needs. You can get this pilot with
unique interactive templates. So majority of these templates, stakeholder interview,
user interview, and you can simply adapt
all of these templates to your needs and to needs of
your particular project. You have the data that you can analyze and create
teams with tags. So you can tag e.g. sign-up errors. Sign up one sign-up
needs onboarding where the users get stuck
and all of these things. Next up we have UX tweak. The only UX research
platform you will need buffer is as tools for improving usability of websites and apps from prototype
to production. So you can see
usability testing, information
architecture research, user behavior analytics. So once again, where
users do get stuck, do they need help with
something so you can do all that research
right inside of here. And then you can export
that research to understand and
analyze more in e.g. communicate with your team to understand better
what they actually need all in one solution to make data-driven decisions
in your website design, you can organize your content to perfection so you
can Card Sorting, do the card sorting,
do the tree testing. You can emphasize
with your users. So you can do preference test, five-second test surveys,
session recording, and all of these things,
and then analyze the data later to understand what
your users truly need. And finally, we have something
which is called failure. So basically all of these
tools are really similar, do really similar job. And I hate these
annoying pop-ups. So they have the platform,
they have the solutions, they have the case studies, they have the resources, so you can learn how
to use these tools. And finally, they
have the pricing. So once again, intuitive CX solutions to
improve experiences. You can turn
experience excellence into a competitive advantage. So you can see all
of these tools. So let's see platform. So you can use
interactive surveys, SMS and email feedback,
digital feedback. You can import feedback, contexts, journey
mapping themes. So they have majority
of these tools. Once again, if you're
just getting started, you don't have to know
what everything is. You just have to familiarize yourself with the
bigger UX research. And the key here is, not all agencies, not all
teams use these tools. Majority of big agencies do, but small agencies in teams don't because their
projects are much smaller, needs of those users
are much smaller. And finally, at the end, but crucially as important, the budgets for those
projects are much smaller. So bigger projects are going to take all of these tools
and all of these research, researchers because
they have more users and those users have more
needs than smaller projects. So you have to understand that. Next up we have UX
design tools for creating sitemaps
and user flows. Sitemaps and user flows
are really important and they are crucial part
of UX design process. So here I'm going to show just
two tools, but once again, there are many, many,
many other tools out there that do
the same thing. So you can see how these
tools look like right here. So you can create a sitemap, you can create a user flow, you can explore personas, you can create
customer journey maps. And finally, you can
create wireframes, which is in progress for this particular platform
called flow map. Once again, leaks
are going to be in a PDF so you can easily
check the mouth. So how does it work? Nicely explained right here. So you can create a sitemap. You can see how it
looks like here. You can build flowcharts. You can research users. You can play with
customer journeys. You can manage content
so that you can understand and upload files
at page descriptions, texts, and just criminal lips. And finally, share with
the client for feedback. So that's great. And then we have overflow. So you can create interactive
user flow diagrams that tell a story. You can communicate your
designs like never before. So you can turn
your designs into beautiful user flows and you can see how it looks
like right here. So a bit different from this
website called flow map, is you can actually upload your designs
here and connect them into flowcharts and then share those flowcharts with
your clients because e.g. some clients don't understand
designs like this. They truly want
designs like this. So depending on who
your client is, who your teammates are, what their wants and needs are, how big the budget is, how big the timeline is, you will have to pick
one or the other. So I'm just showing
you these examples. Once again, links are
going to be in a PDF. Make sure to check
them out and see and understand what's
right for you. Next up, we have tools for creating wireframes
and prototypes. Balsamic is the first tool. It's well-known tool. So you can do all of
these things right here. You can interview
all of these people. You can put them into
these wireframes. And the whole point of Balsamiq is they're giving you these
really basic templates. So if you're after
this sort of thing, then you can use Balsamic. Let me quickly show
you the product. You can see right here in background how it
looks like they're giving you pre-prepared all
of these basic elements, which look like websites, which looked like mobile apps. So you can quickly communicate your ideas with clients
and stakeholders. But in my opinion, and what you can do is move up the step and turn
those ideas into more, more beautiful and
feasible prototypes. So for that, I like to
use tools like Adobe XD. I use it every single day. I love it. I dedicated my years
in this business for Adobe XD because I
truly believe that this tool is something great. Not everybody is going
to agree with me. That's completely fine. That's why we have tools like Figma and we have
tools like Sketch. But in my opinion,
Adobe XD is the best because it's part
of the Adobe family. What I mean by that is if you
need to adjust some images, you can use Photoshop. If you need to create
some illustrations, you can use Illustrator. If you need to edit some
videos really quickly, you can use Premiere. If you have to
create some effects, you can use After Effects. And all of these tools are
part of one single-family, which reduces the time of use
switching between the apps, which reduces the time
of your learning. All of these new apps, it's all part of
the same system. I have many classes and
courses on Adobe XD. So make sure to check
them out as well. If you want to learn in
depth about Adobe XD, what it is, what it can do. But for now, I really like it and I really
like to use it. But unlike Adobe XD, which is part of
this big family, Figma and Sketch are separate companies and
dedicated companies just to these tools. But that means is
they're going to be more dedicated
to their users. But these tools are
never going to be as complete as something
from Adobe family, e.g. like Adobe XD. Because the teams who are behind these companies are much smaller than teams
at Adobe, e.g. who can then churn more bigger updates
every single month, e.g. like for Adobe, XD is the case. Then for sketch, which I know
they are launching updates every single year while Adobe XD team makes updates
every single month. So once again, I'm not
trying to push any one of these tools because I don't have a horse in
this race as they say. But I'm just telling
you what I like to do. You can decide for
yourself, e.g. for some people, Adobe
XD is not a solution. Figma is the solution. And for some people,
sketch still is. In my opinion, Adobe XD, figma r2, best tools
for the job right here. But you are the
one who's going to make the final decision
at the end of the day. Next up we have the tools
for UX research and testing. And here we have
usertesting.com, which is one of the
best websites out there for this
particular service. You can get a vivid firsthand
view of what your customers are thinking and experience with customer
experience narratives. So you can really dive
deep into these tools. As I said, I'm not going to do that in this particular video. I'm just trying to show
you these tools which are available to
you so that you can further explore which
tool matters to you and which tools matter to the particular project
that you're working on. So here you can ask any
question you can target, anyone you can engage
and emphasize, you can discover and analyze
and you can share insights. So they're basically covering this entire user testing route for you in this particular tool. Next up, we have UX cam so you can deliver
the perfect app experience. So once again, there are
targeting app right here. It's the market leader in
app experience analytics, empowering mobile teams with fast contextual and
high fidelity inside. So only one mobile
app analytics. So if you're working
on mobile projects, perhaps this is the
right fit for you. Or if you're working on
desktop and mobile projects, then perhaps this tool
is right fit for you. Once again, makes sure to use the tools which are
actually crucial to you. And once again, I'm
going to repeat what I said at the
beginning of this video. Make sure to get paid upfront
because these tools can quickly add up as you add
more and more of these tools. And before you start spending
money on these tools, my top tip here is to try them, to test them and see
if they really do the job for you on this
particular project. Don't tie yourself to a tool. If it's not a good fit for you, make sure to test them, make sure to try them, and make sure to understand
if they are truly required on that
particular project or not. Finally, we have the tools
for team collaboration. What we have right
here is the slack, and it's one of the
well-known tools out there. But you can do in Slack is you can create all sorts of
different communities. You can create separate chats with separate people
in your team. You can also use it for users. You can use research, you can do some testing right
here inside of the slide, but it's mainly a
communication tool between teams and teammates. Next, what we have
is for delivering, you can use something
which is called sampling. And sampling works
well with the tools I mentioned
previously, like e.g. Adobe, XD, Figma, and Sketch. So you can integrated natively, it's free to get started, but as you add more and
more artboards in it, as you add more and
more into that file, then it's going to
start costing money. The key point of Chaplin
is to enable you to work with developers so
you can easily share your designs with developers. They can then measure
distances, padding margins, and things like those
to be able to easily understand what they need to use inside of the code later, you can do this natively
inside of Adobe XD. Figma. I'm not so sure about sketch, but some people
really like to use the power of Chaplin because you can also leave comments
here and there, which you can also do that
in Adobe XD and in Figma. But once again, some people like to use Zeplin as
well because they are either used to it or
they have to then facilitate dead code
later in some way. So once again, it's up to you
to decide what she really wants to do from these tools and what
you really need to use. So as I mentioned few times
throughout this video, make sure to check out the PDF. I'm going to leave
all of the links which I mentioned
inside of that PDF. Make sure to see which of these tools are
right fit for you. Which of these tools are
going to do the job for you? And once again, my
key tip here is don't rush and invest all of
your money into these tools. If you're not going to use them, make sure to test them out. Make sure to understand
what they do. Should to learn them
here and there. Because when the project comes, you are aware of all of these tools which
are going to help you on that particular project. But don't go out of your way
and invest your money into the project and into
these tools that you're not going to
use at that moment, makes sure as you develop, as you grow, as you discover these tools to just
use the tools that you actually need for your work and then evolve later
during your career. And as these tools come along, make sure to explore all of them because it's
really important, but don't rush and invest
your money into all of them.
12. SECTION 1 ASSIGNMENT: Your assignment for this
section of the class is just to learn more
about UX design. You can inform yourself by visiting websites
like Nielsen Norman, or visiting websites like
career foundry and just reading different blogs online from a renowned UX
designers out there. Just to inform yourselves a little bit more, in this class, we're just going to talk about
the basics of UX design, basic approaches because this is the class for
beginners after all. And I didn't want to
bore you guys with too many methodologies and just to confuse
you even further, once you actually get all of these basics from this class, you'll be much better
prepared to attack some additional information and some more advanced techniques
that UX designers use. So you can use those
two or you can just browse YouTube agents Smart have a really great YouTube
channel and there are many different UX designers
out there that you can follow on YouTube
to learn even more. There are even different
classes about UX design, but before you actually
go ahead and make any different purchases
about UX design, specifically makes sure
that the first inform yourselves from these
free resources which are just mentioned to see if the UX design
is something that you really are passionate about and that you
really want to pursue.
13. SECTION 2 Design Briefs: When you start working
with your clients, design brief is
something which is incredibly important for
every single project. So that's what we're going to
talk about in this section. What the design brief is, how to structure
one and how to use the free template
which I provided. So let's get started.
14. What is a design brief: Design brief is a must
when you are starting with every single
project of yours. Whenever there's a small
project or a big project, you have to understand
the scope of what your client
thinks that they need before we actually move on
with the UX research and all the rest of the UX
part of your project. But first, stop on
this journey with your new client or an existing client
is the design brief. You have to start
with a design brief on every single project, especially with new clients, because oftentimes
they think that they understand
what they actually need from this project, but that when you
come inside and explain to them that they don't actually need this,
they need that. That way. With that
discussion with your client, you are going to form an
opinion and you're going to go in the path that they didn't necessarily think that
you are going to go. Okay, they perhaps need a
website to be designed. That's completely
fine, but perhaps they don't need this exact page. Maybe they need two
of these pages. Maybe they don't need so much of the information on this
particular page and so on. That's where the design
brief comes in handy. You should create and
discuss the design brief at the very beginning
of your project. First of all, maybe
sometimes you're going to do a call
with your client, just an introductory call. Who you are, who they
are, what they need. Then on your next call, perhaps you can prepare
a design brief. You can fill it out when
you are talking with them because you have to
understand who they are, in, which markets they are, how big the company is, how big the project is, where they want
this project to go. What are the goals
of this project? What are the objectives
of this project? What is the budget
for this project? You have to ask all
these questions at the very beginning
of your project. Because if you
keep it for later, it might be too late. In this class, I'm going
to show you my template. I'm going to actually give you this template and
you can use and reuse this exact same template for all of your future clients. You can change the colors. You can include their
logos if you want to. You can do with it
whatever you want. The best part about
this template, which I'm going to show
you in the next lesson, is it's printable. If you are going to the meetings with your
clients in person, then you can print it out,
you can give it to them, and then both of you can discuss some changes if necessary
before we actually move on with your project
and before we actually start designing on this
particular project, this template can be endlessly editable and I'm
giving it to you as part of this class so
you can do with it whatever you want on
your next project. So in the next lesson, I'm going to show you this template. I'm going to show you
how you can edit it, and I'm going to
show you how you can use it for your future clients. So I'll see you there.
15. Creating a design brief in Adobe Xd: Creating a design brief in
Adobe XD can be super simple, and that same design brief
you can use and reuse when you save it as a template for
all of your future clients. What's great about
it is it's built with the latest Adobe
XD features in mind, such as stacks,
such as components. So you can always
change the colors, you can change the
fonts, you can change the icons and so much more. I'm going to give
you this template. You can use it in all of your future projects
if you want to. So without any further
ado, let's get started. So here it is in Adobe XD. This is how the
template looks like. And here we have the
design brief essentials, and here we have the actual
design brief template. Now before I move on and show you what's actually
included inside, I just wanted to
quickly show you this. Here we have paragraph color, which is the color for
all of these paragraphs. I have Icon color right here. So obviously, color for
the icons and title color, which is the color
of these titles. Now, please keep in mind that because design brief essentials, that should not be changed. You can change it,
you can delete it if you don't want to have it here. But it's a main purpose
and point is to remind you as to what can you include inside of your design
brief template, which is this
template right here. My recommendation is to keep it as it is and just to
add it to this part. But if you want, you can always delete it. If you want to. Wanting to note,
if I select this, you can see that this entire box is the textbox
because as I said, it's not intended to be changed. But as I said, once again, you can delete it. You can do with it, whatever
you want to get started. Why do we have right here? If I zoom in just
a little bit more, we have the company profile and we have the same
thing right here. Then we have project overview,
same thing right here. We have goals and objectives. You get the point. So all of these major things
are included right here. So let's go over each of them and I'm going to
explain you what's behind them and why you should include something like this. So first of all,
company profile, you should include
details such as name, industry products, or services
that the company has. Keep in mind, you can explore
this template right here. You can edit it, you can extend the text box,
you can change it. You can add multiple pages, you can do with it
whatever you want. This is just a pointer in which direction you
should include all of this information so your
client can understand better what you
actually need for them for this
particular project. So once again, unique
selling proposition, what differentiates them
from their competition? This is really important
and because you should know when you start exploring
the competition, you should know what's
in it for them, What's in it for
their competition, so what's different for their business and
Derek competition, what differentiates them from
the competition and so on. Who are the key stakeholders? Who are the main
decision-makers, basically, contributors and
points of contact in the business circle where you're dealing with in
this organization? Is it that the
CEO, is it the HR? Who is it that you're dealing
with on a daily basis on this project list of direct
and indirect competitors. So you can do your
research about them. This is what I was
mentioning about key selling point and unique selling
proposition and so on. So you have to understand
who are there, direct and indirect competitors. You have to ask this
information from your clients, especially if you're not
in this industry or niche. So perhaps you don't understand
who this company is, what they are dealing
with and stuff like that. It's going to give you a
much better understanding of the project and what you actually need to do
on this project. If you asked for
this information, then what you can do when you gather all this information, you can gather it in Word document or something like that. You can jump into
your brief template. You can enter your project
company right here. And by the way, I
was using Roboto, as you can see right here,
which is a free Google font. So you can simply download it and start using
it right away. And once again, you can
simply right-click right here and you can edit and
change all of these fonts, colors, icons, and so on. Client name here,
project deadline, when is the project
going to end, which is crucial for every
single project, project name. So if the project has a name, so you can enter it here, e.g. I don't know if
something's something website or something, something app or a dashboard or whatever company profile, right? Your research about
company here. So this is what we were
talking about right here. Next up we have
project overview. So what it is, this
is where you will create a detailed
description of the project. Sorry, that has as much
context as possible. Try to ask your client
what are they doing, as well as why
they are doing it. The what? Are you building something new, which is crucial? Are you redesigning
what they already have? What assets do they
have unexpected upon the completion
of this project? And finally, the y, try to identify the
problems they have. When you understand
the problems, you will find a
solution more easily. So this is where you're
actually going to ask a few questions and
be creative right here. I'm, I'm just pointing you in the right direction as to
what you should be doing. But you should basically open up this brief
template, e.g. on one screen or on one
part of the screen. And when you're
speaking with them, you can simply enter the information that
they are telling you, or you can use a word document, you can use the pen and paper. You can do whatever it
wants and then simply put all of this information
in this brief template. Once again, if we go right
here, click right here, kid Control or Command
E to export it, I can select it as a PDF and then you can share
this PDF with your client. They can then give you some
further feedback as to what you'll be doing on this
particular project today, agree to, they disagree
and stuff like that. Then we have goals
and objectives, which is also really important. Goals reflect the origin
purpose of your project, while objectives
highlight the methods in achieving that goal. So galt, example, client wants more traffic
on their website. Objective example,
increase the amount of weekly sessions by 20%
by this particular date. So this is the perfect example. Majority of times that
clients don't understand, what do you actually want
this designed to achieve? Do you want, like in this case, more traffic on your website? If so, what you're going
to do with this traffic, are you going to convert
it to leads and you're going to use warm
leads or cold leads. Are you going to give them
some sort of a free product or freebie so that you can attach
them to your email list. Do you want them to
call you or do you want them to purchase something? Is it a product which
is new to the market? Is it the product which is
existing in this market? What is your target audience
and what do you actually want them to do once they
actually get to your website? A lot of the times and trust me, when you are asking your
clients these questions, they're going to
actually start to think about and say,
yep, you're right. Perhaps we don't need
a website which has 50 different pages like we talked about in
the first place. Maybe I just need a
nice landing page, perhaps about page,
maybe the product page. That's basically it. So you have to ask
all these questions for them to understand what they actually need from this
particular project and you as a designer
on this project. Then once again, as I
said, objective example, increase the amount of frequent
sessions but 20 per cent. So let's say that you want to redesign your website
in order for you to sell your product
and you want to give freebie to as many people as possible so that you can
convert them through your e-mail newsletter
every single week. So the objective is
just that I want to increase the amount of weekly signings to my
newsletter so I can convert, let's say 10% more people
in the next month. So that's your clue.
Goal, clear objective, what I should be doing
as a designer than a starting in how
I should do that, how I should
integrate all of it? Should they use
existing solutions for emails such as e.g. Mailchimp, let's say,
or should I create something new and point
them in that direction? Also because they
say that they want more email sign-ups in order for them to convert
those people later, you have to create this email sign-ups to be more
prominent on your website. You can see we're
already starting UX design just by having
a good design brief, which is why design brief
is super important. By establishing goals and objectives upfront,
which is what I said, you are not only suited to make more informed decisions
are under design, but you're also better armed to prove your
value and worth to the client outside of visual
aesthetics of your website. So once again, you are a designer who is
solving problems. You're not here to create something beautiful
and that's it. You have to solve
their problems through your design and make it
beautiful at the same time, That's the whole point
of being a designer. Target audience. Once again, you don't know who, who are you designing for. You cannot design. Another way to inform your
design decisions is to develop a solid understanding
of the users who will be interacting with your
clients app or website. If your client has this research that
already you're in luck. But if they don't have it, you will have to do
that research yourself. You can upsell this as a different service and earn more money,
which is crucial. What should come up in your research is the
audience persona. Information about your
audience persona should include details such as age,
gender, country, Fresno, City of residence, workplace,
media consumption habits, daily habits such as travel, eating out,
socializing, and so on. So what this tells us is e.g. if I'm, if I'm designing a
shoe website for 30 year olds, that website has to be
completely different than if I'm designing the same
website for 65-year-olds. Because 65-year-olds, majority of them have
visual impairments. They don't like
to bright colors. They already have a
lot more money than the first group of
thirty-something year olds. So you have to
think about all of these things when
you start designing, you have to create persona's. Who are you designing this for? Therefore, when you
have those personas, when you have that research, when you have that
target audience ready, you will know which colors
to use, which fonts to use, which font sizes to use, what type of imagery, what type of tone, what type of language? So let's say the language
for three-year-olds is completely different
than for 65-year-old. If you're using slang and terms that only
35-year-olds understand, those 65-year-olds will not be able to understand and
they will simply leave. So that will increase
your bounce rate and bend your back
on the square one. Then we have designed
requirements. You should specify these upfront because a
lot of the times, especially this is
Adobe XD template. Let's say my clients
like to work in sketch. I don't work in
sketch, I work in XD. And then we're going to reach
the end of the project. There'll be completely oblivious as to which tool I'm using. And then there were two
request the sketch files. Of course there is a lot
of conversions out there. You can pay for certain services
to do those conversions for you or you can do that
conversion for yourself. But what's the point? Why bother? You can simply ask upfront. So asset dimensions
and the resolutions. First of all, this is
crucial for money. If they want just e.g. let's say iPhone ten
screen, that's it. Then you're going to charge
a certain amount of money. But if they want iPhone 89, 101-112-1314, whatever,
all of these sizes, and then Android
versions as well. Of course, you're going
to have to charge a lot more money because you're going to have
to do a lot more work. So ask those questions upfront. File formats, like I mentioned, they should be agreed
with developers before you start working. Some developers like
to use Figma files, others like to sketch files. Others just don't care as long as you're using
something like, I don't know, sharing platforms or one of these
plugins, let's explore. Let's see what we
can do right here. Something like Zeplin, e.g. so a lot of the people like
to use Zeplin, let's say. So if you're not using Zeplin
urine no worth of them, you're no good to them, so you have to use Sapling. But if you've never
used sapling before, that can create an awkward
situation for you, so you have to learn it in
the middle of the project. So ask upfront, it's going to help you a lot require
color palette. Do they have their
existing colors? Because if they do,
you are in luck. If they don't, then you have
to create that from scratch. So think about all
of these things. Image assets to be included too. They have their own images
or you have to use images. If you have to use images, do have to use free
or premium images. It's super simple to
ask these questions, but majority of designers
just don't do it. You have to think about
this because if they want, if they want to use
premium images, e.g. who is paying for
those premium images? Is it coming out
of their pocket? Or There are thinking that
because they pay you e.g. let's say $5,000. It's all included in inside
all of those images, all of those icons, videos, stock footage, everything is
included in those 5,000 v. So think about all of
these things are present. It's going to save
you a lot of time. Then what we have is
associated copy documents. Especially the copy
documents can be something like either contract or if you can use
something NDA e.g. so non-disclosure agreement
or if you can use their logo, let's say in this orientation, not in this orientation. So you have to speak about all of these things with
them so you can better understand what
they actually need and what you can actually
provide to them. Finally, we need to
deliver the files. You should always
deliver your mockups, brand guidelines, if
you created them, moodboards or anything
else that could assist clients understanding
and confident, I can have confidence
in your work. What I mean by this is if you have created
your mood board, simply deliver it to them. Because if you charge
this amount of money for the mood board in the middle of the project showed the
mood board to them. If you created paper
wireframes and dense kinda show those
paper wireframes. It's going to show
them how much time and effort actually went into
this particular project. Finally, we have the
key reason right here. So budget and schedule. This is super important, a super awkward for
designers because a lot of designers just don't
want to deal with money. But money is really important, especially for you because
you have to charge what you are actually worked
on this particular project. Otherwise, you're just
going to be out of luck because when you sign
the contract, That's it. You cannot do anything else
apart from maybe actually creating a separate
project or going outside of this project
and so much more. That's why I have this
animation right here of pink punk going back and forward between yourself
and the client, you have to specify all of these things
upfront before you actually fire up your Adobe XD and start working that way. Design brief templates like
this can help you a lot, especially when
you're budgeting and especially when
you're crystallizing, how much time do you
actually need for all of these particular
parts of your project? So going back to it, if
you're working at an agency, you're not dealing
with this part, but if you're a freelancer, this part is absolutely
essential for your success, which is what I said just now. The budget, depending of
how big the budget is, you will know how
deep you will go into the project and dedicate your
time and resources to it. You will not create
paper wireframes, wireframes, and then five
different revisions of designs. And then, I don't know, five different prototypes and then animation of your icons and then creation of completely
separate mockups which are accustomed
to their project. You will not do all of that if they're just paying
you or I don't know, some silly amount of money depending of
the money they have, depending on what they need. That's how long the
project is going to take. So you will have to charge what you're actually worked for
this particular project. Otherwise, they're just going to use you at the end of the day. What we have value
at time before anything else because
clients will not, if you do not value your time, nobody else will. Schedule. Projects need to stay on
time and stay profitable. That's why schedules are a
must have for your briefs. Every schedule has
has to have stops. So one at the start,
one at the end, and as many or as few as
needed in the middle. That's how you and your clients will know that you
are on the track. So that's why I created
this start date, research date, audience date. You can of course
change all of these. Presentation date, revision
date, delivery date. You can add as many of
these stops as you want. You can remove them, you can do whatever you want. So write your budget
and schedule here. So budget breakdown here, e.g. 2000 upfront, 2000s
at the middle, let's say something like this. So presentation, let's say 2000. Then finally at
the end, delivery, 2000s there, or 50 per
cent start their planning, feet per cent at the very end. So you have to factor out
what you are actually worth and what you are actually comfortable in asking
from your clients. And finally, timeline breakdown. You cannot do this for
as long as you're alive. So you have to create
perfectly clear timelines. Week your client,
when is the start, when is the middle,
when is the end? When are the revisions? How many revisions do I have? When should I deliver this? When should you deliver
this and so much more. So you have to
factor all of this at the very beginning
of your project. Finally, what we have right here is without the design brief, you're just wasting
your time hoping that you got what they
like the first time. By using the design brief, you make sure that you
and your clients are on the same page from the word go. So did you have
value for your time as well as the time
of your clients? So that's what I was mentioning at the very beginning
of this class. You have to create
a design brief every single time for
every single project, no matter if the client is client you already
worked for in the past, you have to create
a design brief for this particular project. So everybody is on
the same track. Make sure to create these stopping points and
these gaps in your project. So as I showed you
previously right here. So start there, start date
data for the research, for the audience, research
for the design presentation. So much more so that both you and your clients can
be on the same track as to what's required
of this project and what's delivered
in this project.
16. Design Brief in Figma: In this video, let's
check out design brief essentials and how
it looks like in Figma, because it's exactly the same
in XD as it is in Figma, but it's still want to walk
you through because there are some differences
when you want to create or reuse
something like this. And same story like with
Adobe XD templates, you're going to get
Figma templates as well. You can play around with them. You can use them and reuse
them for your own projects. So lets hop over to Figma and let me show you how these
templates look like. So here we are in Figma
and here as you can see, we have the brief essentials
and we have our brief. And basically it's
exactly the same story as it is in Adobe XD
as already mentioned. So if you want to
change something, if you want to edit something, it's exactly the same. So just the tools are up here at the top and
not right here. And still you have your properties panel right
here on your right hand side. If we take a look right here, we have the local styles. These are your text
styles and these are the textiles which I applied from the
documents themselves. Same story like with Adobe XD is just they're
located on this side. Well in Figma, they're
located right here. And it's going to
read everything which is located inside
of these files. And then when you
click onto a frame, in this case, because
we don't have our boards in Figma,
we have frames. Then it's going to take
the selection colors, i e, the colors which are
located inside of that frame. But if I click outside, it's going to take us
back to the local styles. Now keep in mind, because these templates are
simple, rid of purpose. Later down the line when
we get to a design, I'm going to show some
more advanced techniques. But for now for design briefs, for project proposals
and for persona e.g. template, it's going to be super simple because it's
with a purpose created to be super
simple because you can use it and reuse
it really quickly. So here we have the
background color, which is the background
color overall. Then we have the text styles
and you can see info text, main text section titles. So same story like before, I like to rename and
name all of my layers. Then we have the main gray, we have the dark gray, and we have the strokes are
all of the colors that you're already used to it
in terms of editing, if I select something, it's going to show
it right here. So let me find myself so you
can see a little bit better. What I'm talking about
here, basically, what you can see right here is the text has been selected. A brief essential is
not the art board, but the frame itself. It's been selected and here you can see how it's positioned. So here we have the page title, which is actually the
style of this text. And then we have the main gray, which is the actual
color of this text. If you want to change something, you can
click right here. And you can see that
it has the page title, which is this 148
pixels and auto. And you want to change it. You can hit right here to edit something and you
can edit the name. You can see the font, you can see that is the bold, the text alignment is auto
and so on and so forth. And same story goes for the colors you can
just click right here. And these are the colors
inside of the document. And here are the personal
color which Figma suggests you to use if you want to change it to the colors that Figma is
suggesting right here. But if not, you can
simply click right here and it's going to
go to the main gray. And here you have
the properties, here we have the opacity. You can hide it, unhide it, and so on and so forth. Finally, we have this link icon. And if you want to detach it, so it's become, is going to
become its own property. You can click right
there for both the color and font and it's going
to detach it from there. But in terms of the
overall structure, seems to me like when x D. So here we have the title, here we have all of
this other texts. That's for the brief essentials. And you can see in that
video to learn more details about what's included
inside of each of these. Because now that
Adobe bought Figma, Figma real really
soon become almost exactly the same as
it is XD right now, just with all these
Figma features and additional Adobe
features such as Creative Cloud Libraries
and so much more. So basically, you're
going to be able to open XD files in
Figma really soon. But I still wanted to show you these videos while
the transition is going over because
it can take up to a year or maybe two years. Here inside of our brief, we have the same
title right here. You can see it's
called beach title and it has this main gray color. But here things are a
little bit different. So if I highlight right here, you can see that here we have this group and here we
have some constraints. You can create auto-layout
if you want to. But here we have sections and it's located
inside of auto layout, and you can see it right here. Now, also layered are
basically stacks in Adobe XD. It's just they have maybe
one or two more options inside of Figma that we
don't have in Adobe XD, you can see they're positioned vertically and their
position from top-left, which is the alignment from
where it's coming from. So this right here and
inside of these sections, we have all separate sections. And the spacing between each of these sections is 60 pixel
that you see right here. And you can position it
to be 40 pixels, e.g. you can see what that does, but I'm going to leave
it at 60 pixels. Once again. You can open up
this project file. You can play around with it. You can explore it and
see and dig a little bit deeper into how I
created all of these. Now, every single of these sections has
its own structure. So if I open it up, you can see we have
the project deadline. So same story like in Adobe XD. And if I zoom in a
little bit closer, inside of this project deadline, we have the company
and this is the icon, and then we have the
project deadline itself. Now here, if I select
the project deadline, you can see that we have
a separate auto-layout. Now, this time is horizontal. It's positioned from left
alignment to the center. And here we have the
spacing between items. So between this and this, when I hover, you can
see it's 40 pixels. Now you can select
this little red line right here and extended left
and right if you want to. So just click and drag and
it's going to extend it. But I personally prefer to
write my round values here. So e.g. 60 pixels, that's going to do just that. Finally, for each of these, so for the project
deadline, e.g. you can see that here we have the auto layout in
vertical direction at 40. So if I set this to 60, you can see what that
particular thing does. Of course, because all of them
are inside of auto layout. If I adjust this one
to, let's see 100, they're going to push
everything down because everything is inside of
its own auto layout. But if I go back,
you can see that now it rounds up that section. Now in terms of these icons, when you select our brief or select anything inside
of our brief frame, you can switch over to assets. And here you have your
brief local components for these particular icons. Now you can draw your own
icon seem like an X-Y. You can swap icons and
create distances of icons. And we're going to talk
about that a little bit later when we
come to the design. But basically this is
how this looks like. And finally, Let's
switch over to layers. Let's select the
timeframe and let me show you how this
has been created. So basically we don't
have anything fancy here. We just have a
circle and we have a start and ending date circle. If I select it. Right here, you can
see that we have our stroke and it's showing
us that it's linked, but it's just linked to
the color of the stroke. You can see that the color stroke right here
if I hide myself. So you can see it a
little bit better. And here we have the fill color, which is this white color. So that's basically how super simple this
is to work with. And as I mentioned, it's exactly the same as it is in Adobe XD. So now we just have these documents inside
of the frames and not the airports as we
are used to in Adobe XD, e.g. so there you go. You're going to get this file. You are going to get to open it up in Figma and explore
it for yourself. I want to just create this quick video just to
show some differences. You're going to run
into Figma files that Adobe XD does
have and vice versa. I encourage you to
play around with these files, to open them up, to explore them a
little bit more, just to get yourself
familiar with Figma. But if you ever opened
anything in Adobe XD, if you've worked in Adobe XD
for a brief period of time, you're going to notice some
differences here and there, but the tools are basically
exactly the same. And that's the whole
point right here. I didn't want to recreate this Adobe XD content
for Figma as well. I just wanted to create these videos walking you
through what's the same, What's different
in-between these files? Because I don't want
to waste your time because these tools are
basically exactly the same. And now that Adobe both Figma, they are going to be exactly
the same down the line. So that's it basically
for this video, make sure to check
out the template. It's attached to the
course project files. Make sure to open it up
and make sure to open up the Figma templates for
each and every section of this course just to
check out the differences between Adobe XD files
and Figma files.
17. SECTION 3 Project Proposals: Project proposals are
incredibly important part of every freelance designer
project pipeline because you don't want to just to send your clients the
pricing and say, Here you go, you want to
break that pricing down so they can easily understand what they are paying you for. You want to digest, for them to understand quite easily what you have been
working on this project. How long is it going to take? How long each piece of the project is going
to actually cost. Why are you doing
all of these steps? Which steps are actually
involved in this design process? So everything that we're going
to cover in this section, and I'm going to
actually show you a template which you can use. And I'm going to give you that template so that
you can use it in your future projects just to speed up your
process a little bit and to make it look a bit more credible to your clients. So let's get started.
18. What is a project proposal: One of the biggest
mistakes I see, especially young designers make is they don't send the
project proposals. But when the client
approaches them and ask them for a
price of the project, they just simply ballpark
it ended just say e.g. website design is $2,000, but clients usually
don't understand because they are not
designers themselves in majority of the cases. And they don't understand
what's involved in that particular
website design project is adjusted design. Is it coding? Is it a WordPress theme? They heard about
something called Wix, e.g. or a Webflow. What's included in the price and in what you are
offering to them. You have to explain every little detail in order
to justify your price. That's going to make you look professional and
polished as a designer, and in turn is going to make your client understand
better what it is actually involved in
that website design project. Now, this doesn't simply have
to involve website design. It can be app designed, brochure design, logo design,
whatever you are doing, you have to explain to your
clients what it is exactly that you're offering to them for the price you are asking. That's exactly what the
design proposal is. In this class we
are going to talk about UI UX design proposal because that's a part of a design world
and a design sphere, which is really
different than e.g. logo design or brochure design, because it once again includes different steps to
get to the solution, which is website design, app design, and stuff like that. So in this class
we're going to talk about UI UX design proposals. But whatever you're doing, whatever branch or
design you're in, you can apply this
same principle. Just adjust them to
your own design niche, your own design sphere,
whatever you are doing, and simply follow them through
for your future clients.
19. When should you send it: When exactly should you send your proposal to your clients? Well, first it has to start with discovery, call, or email. So when your clients
approach you, then you take them
via e-mail to e.g. Zoom or Google Meet, Skype, whatever you're using. Or you can simply continue
that email conversation if you're not comfortable
in front of the camera or
talking to the mic, if your English is
not really good, then you are going to collect
all of this information about what they actually need done for that
particular project. And you have to ask them a
set of questions and you can check my UI UX
tutorials and courses, especially my Adobe
XD masterclass. Because in it I
really go in depth about design brief and
what are some questions that you should be asking to
your clients in order to get the perfect picture as to what exactly do they need on
that particular project. Once you collect all of those questions and once you collect all
of those answers, and then it comes
the time to start preparing this UI
UX design proposal. And in it, you are going to include all of the services
that you are going to provide to your client
for that particular project. So e.g. if you are
doing project research, if you're doing
persona interviews, if you're doing
persona research, if you're doing
paper wireframes, wireframes in Adobe XD, because I'm using Adobe XD, this class is about Adobe XD, but it can be anything, it can be Illustrator,
it can be Sketch, figma, whatever you are using, make sure to include
all of those details. And then of course, UI
design, asset export, your time that you spend on
this project because that's the one key thing that majority
of designers overlook. The time you spend
on this project, whether it's sending
emails, making phone calls, making video conversations with your clients via Zoom Skype
or Google Meet or whatever. All of those things should be included into debt
project proposal. Because that way clients are
going to understand what exactly is you are
billing them for intern, as I said, it's going
to make you look more polished and professional. And once again, clients are
going to get a clear picture as to what is every single dollar that
you asked for them, where does it go to? So make sure to send
project proposals. And in the next video
we're going to actually explore how to create
one in Adobe XD. And I'm going to
show you what in my opinion and in my experience, are some key things that
you should actually include into your
project proposals.
20. Creating a project proposal in Adobe Xd: As I said previously, I'm Adobe XD user and
I really love it. I use it every single
day for years now. And in this class I'm
going to show you how to create your own
project proposal and which are some of the
questions you should be asking to your
clients and as well, which are some of
the services that you should be offering
to your clients. So let's jump inside Adobe XD and I'm going to show
you what I'm using. Here is Mike project proposal. And this is actually the
project proposal I created. I created it is as a product and you can actually get
this product if you want to. Really symbolic price, I'm going to leave the link in the PDF. You can simply click that
link and get it a width, a massive discount
if you want to. If not, you can simply
follow this class and create your own with
your own questions, answers, and all of
the things in between. So we're going to cover each of these in
separate lessons. But I just wanted to quickly run through and show
you why I'm using Adobe XD and why I set up all
of these things as I did. First of all, you can
create these airports. And this upward is
1920s by 2,500, which is not really
ideal for printing. But in this day and age, you are really sending majority of your proposals
via e-mail anyways. So this I found over my
years of experience, I have almost 15 years
in this business. I found it filed types of this size work really well for both printing as well as
sending them via email. And to show you
that these are this exact templates which
are just show you in XD. So this, I simply went ahead and printed onto
A4 piece of paper. And you can see e.g. this
is the project pricing. You can see the quality and you can see
how it looks like. And I can also show you in
this project details, e.g. so you can clearly see, though it reads
really well and it's really dependent on
is your client local? Are you going to
give this to them in person or are you going to
send these files via e-mail? So that's why I said
adobe XD is great because it's a
vector based tool, which means that all
of these things that you design are not going
to lose quality ever. And they are not pixel-based,
like Photoshop, e.g. that's why I would not recommend and advise
to use Photoshop. I would advise you
to use Adobe XD. Also, Adobe XD has this
amazing feature built in. As you can see, you
can design prototype and share inside of the design. You can design all of these
things that you see on the screen inside
of the prototype. You can actually connect
all of these details. If you want to build our prototype and clients
can actually click through. You can send this link to them. They can click through and
access different pages if you want to create this as
a custom website, e.g. there is no coding involved, but it looks like there is. And it adds another
additional layer of professionalism and
personality to your design. Finally, there is share. So whatever you do
in a prototype, you can jump inside
of the Share tab. You can generate a link
and then you can send that link to your
clients if you want to. That's why I love Adobe XD because I'm using it
for all of my work, UI UX design work and some
work which is not UI UX, like social media work, e.g. but whatever you create, whether that's app
design, website design, product design,
whatever you are doing, then you can easily prototype it and share it all from Adobe XD. And that's why I love using it. Also, as you can see, we have all of these
global components. So for this particular
design and template, like I said, you can get this. Once again, link is
going to be in a PDF. Simply click and access it. You can right-click e.g. on this H1 color, you can hit Edit. Let's say that your
clients color is, let's say three,
E, C6, f, f, e.g. simply hit Enter or Return. And as you can see,
with just one click, it applied all of these global changes to
this particular color. You can do that with
all of these colors. And I would really
advise you to, if you are ending up using this template at
the end of the day, whenever you make a change, simply select this
hex color that you selected for your
client project. Hit controller command C,
right-click right here, hit Rename and simply change this original hex code
with your new hex code. And that way it's
going to update in real time and really show to your clients that you really, really paid attention
to the small details. Once again, this is
designed to give you much better possibility to land that client
and that project. Because once again,
you're going to stand out as a professional from the sea of this
amateur designers who are simply asking for $500, $5,000 for a website
without ever explaining what's actually
involved in that process. Below that we have
character styles. And you can actually change these character styles like I
showed you with the colors. And we have all of these icons. And I will give you the link to these icons if you want to purchase them,
their premium ones. But if you don't, it's fine. You can simply use any kind
of free icons that you want. And finally, we have the
component for the footer. So we have the parent component, which is this main
component right here. And then all of these other footer components are actually child components. So whenever you make a
change into this component, which is a master
parent component, is going to actually
adapt and change and cross all of these
different airports. So first page of this
project proposal is cover. And in the next
video we're going to cover what's actually
included inside of the cover. So I'll see you there.
21. Proposal cover: In this video, we're going to
talk about proposal cover. So here it is, and let me quickly run through and explain
what everything is. So if we switch from my assets panel to my Layers
panel right here and click, you can see that the
project organization is good and everything can
be easily reachable. So what this actually
is subproject name, that's where you are going
to enter your project name. E.g. if that's our car website, you're going to say e.g. our website redesign or
something like that. But makes sure to enter exact project name
because once again, it's going to exude
confidence into your clients. And it's really going
to differentiate you from all of these other
designers because you did pay attention to these small details below that
we have the company name. So in this imaginary example, it will be Audi, whatever company
website, audi.com, e.g. and company address is your local address of
that Audi dealership. Of course, this is
just an example. You're going to enter
your client information. And what's great about
this is when you select this name
and let's say e.g. Audi, website redesign. Because I included padding, this is going to expand
as you type along. But if you don't want padding, you can simply select
this project information. You can see padding is
checked right here. You can simply uncheck
it and then it's not going to expand
as you type along. Just wanting to not
behind that is an image. And I would really
advise you to include some kind of offer
background image from their existing website, social media, LinkedIn page, YouTube screenshot,
whatever they have. Once again, just to show to them that you really pay
attention to the details. They could really feel at
home like this is really personalized for their
business, for their needs. Like it is, which
it is basically, but you're simply showing them how can you actually
design this and that really paid attention
and that you really care about their business
and helping them. Below that, we have the footer and what I explained previously. So like, if you don't have
your own website here, you can enter e.g. your Behance address and beacons profile, your dribble profile, your Upwork profile,
whatever you're doing, whatever you're doing it, you can simply enter
it right here. What's again, just make sure
to install these fonts. And I will leave the links to
the fonts in a PDF as well. If you want to check them out, then we have the e-mail. Obviously, this is
just the default. You're going to enter
your email address and we have a contact, then you can enter your
contact information there. You can include
WhatsApp icon here or Viber icon if you're using
any one of these services. And basically that's it
when you include them here in this first footer as explained this as a
parent component, it's going to automatically
update across all of these. So if I show you that e.g. let's say that this is
Alex on indesign.com, which is my website. When I type that in, you can see that it applied
across all of these pages, which is the point of
master components. So that's how easy
they are to use. So that's basically, it's one less thing
which I wanted to mention is there is a
grid involved right here, as you can clearly tell. So when you select
the artboard name, you can see right here,
let me hide myself. So we have 12 columns. Gutter width is 60, which is the distance between
these columns. Column width is A2, which is the width
of these columns. And finally, we have margins
linked left and right. Margins are simply
this space from this last column on the right and this last
column on the left. So space between the edge of the artboard and
the column itself. So basically that's
it for the cover. And as you can see, it can really be important to
get the color right. And when you start
adjusting right here, then is going to easily be translatable to
these other pages. And one last thing to note here, you can even add their own logo if you want to
identify include logo. But if you want to, you can put their logo there, which is just that extra, extra layer of customization and really extra layer of
showing that you care. In the next video we're going to talk about project details. So I'll see you there.
22. Project details: Project details is one of the most important parts of
your UI UX design proposal. So let's check it out and
see what can you do, right? So here is my project
details page, as you can see right here. So if I take you to some
details, first of all, if I click right here,
we have the page title and we have this
icon right here. But as I mentioned previously, you can use your own icons. You can change icons
because they are created as components if I
select it right here. So I actually didn't
include this one as a component by let me hit
Control K to create it. So e.g. if I want to
switch it up right here, I can simply add this
component, e.g. this icon. And it's going to
update in real time and replace this previous icon
with this existing icon. So that's your project title. And we have divided right here. And e.g. you can add even the project
name if you want to, but I'm not really going to bother you with
those information. So e.g. Audi website redesign project
details if you want to, but I think this is
just good enough. As you can see, there
are no page numbers because you can really exports single pages at
a time if you want to, if they just need
project details, e.g. then there is really no point of it having number two, e.g. number three on top because what it is, what's
that actually? So you can export it
without any project numbers and page numbers and it
can still work just fine. So what we have right
here is project Oreo. So we can project
description pages to design a responsive design
and project timeline. So all of this has, of course, its meaning and it's
really important. Project description
is what you actually agreed with your
client via e-mail. We're discovery call and stuff like that. Pages to design. Or this can be screens to design if you're doing mobile design, which are the screens
are pages that you agreed to design, a
responsive design. And of course, just one more
note on pages to design. If there are some
additional pages to design, then this is going to come
in the research phase. And then you can simply put an asterisk right here and e.g. say, We still didn't discuss those additional pages after we are finished with those,
then probably e.g. we can adjust the pricing
and stuff like that. So just make sure
to pay attention to that responsive design. Of course, if you agreed
to responsive design, just make sure to speak
with their developers about exact sizes for
responsive design. And finally, project timeline. When is it going to start? When is the middle point and
when is it going to end? Which are of course, extremely important for any kind of
project you're working on. There's a website which
single-page or with 100 pages. It doesn't matter. It's extremely important. Then we have project timeline. So for all of these things, how long is it going to take me to finish each
of these things? So e.g. ten days, 20 days, 16 days, eight days, which is the revisions. So revisions are always
dependent of your speed and your clients speed to provide you with the
feedback. So e.g. if it takes them, let's say
three days to provide you with feedback
because they need to check with their partners, business partners
and stuff like that. Then obviously it's going
to take you a lot longer to provide that final
result, final revision. That's why I always put,
as you can see right here, it says eight plus eight
plus these and plus really depends on them
as to how fast they are. Finally, we have taught a total project
time 54 plus days. Once again, the plus
is that revision plus. So that's basically
it for the structure. And now let me quickly explain you how all of this is setup. So if we go into project or
review and open that up, we have the title, which
is this right here. So you can change this or
you can hire you want. So these are the
details we agreed during our email and
call conversations. So if you end up
purchasing this template, once again, link is
going to be in a PDF. You can change this. If you didn't have
a call with them, then you just have an email
conversation with them, then you can remove this
call conversation from this. And just one quick note. If you end up using this
exact template or you end up recreating this exact same template,
which I'm showing you. Make sure to customize it to what are your needs and
what you actually need. So like I mentioned
here, afford the call. Make sure to go through
each of these items and simply customize it for
each particular client, because it's going to take
you like 1 h to do all of this and it's going to really pay dividends when it
comes to your clients, your professionalism and
the client satisfaction. So if we switch back to here, what I wanted to show is this. So these are the items. So these are these items
and as you can see, they are included in a
vertical stack of 40. So this is the distance. So if I include it to 80, e.g. as you can see, the
distance is going to be bigger between all
of these items. And finally, because
it's in a stack and it's amazing
feature of Adobe XD. If I take this project
timeline, e.g. and let's say I want to move
it above responsive design. What I can do is simply
click right here, drag it, position it. And as you can see, it's
going to automatically switch places between these two. Now what's also important
is between these two. So there is a clear distance. So right here we have
the stack of 100. So inside of this main stack, we have these two. So project overview,
which is this one, and project timeline,
which is this one with a distance of 100. So what that means is when you
jump inside each of these, so whether project or
view or project timeline. And let's say I want to remove this project timeline
for whatever reason. I simply click on it, delete it, and then content down
below is going to automatically move to the
top to fill in that space, which is now a weekend when
I remove that previous item. And if I hover right
here and select this, you can see we are still with 100 distance between these
two, which is great. If you want to remove
any one of these items, Let's say that I am working
with these exact items. You don't, and then simply, you can remove any one of these items which
doesn't fit your needs. You can do that for whichever
one of these you want. So pages to design, let's say you have just
one page and deleted. As you can see, it's going to
apply that change to all of these pages and all of
these items inside. Of course, it's the same
with the project timeline. So if timeline items, if I select an item, hit delete. As you can see, total project
time is going to adjust and simply go into a place of this previous item
which I just delete it. Of course, this is extremely important because you
want to run through them with project details as much as you can during
your email conversation, during your phone conversation, because that way you
are going to remove any doubt as to what's
actually include, included in that
particular project. So once again, if
I take you back, you can see project
description pages to design, responsive design,
project timeline. And of course, you can add any kind of items you
want right here, e.g. are set to be designed. Your assets, my assets,
all of those things. So you can include
them here, e.g. if you want to, of
course, service. So as you can see, project
research competitor research, design brief and inspiration. Of course, as I mentioned, you can remove any
one of these and you can include
your own items as to exactly what you are working on at that particular project. Because not every project out there is going
to require this. So e.g. project research may
be already done for you, so you are going to
reduce your day count. Competition research may
be dated that for you. So once again, you're going to reduce these days
or increase them depending of how
fast you're working on actually on that
particular project. Next up we have project pricing. So I'll see you
in the next video where we're going to
discuss project pricing, why it's important, and
how can you actually fit it to your overall
project proposal. So I'll see you there.
23. Project pricing: In this video, we're going to
talk about project pricing. So let's check it out. And here it is. Once again, seemed like Project Details
and project cover. Project pricing is extremely important because when
it comes to money, clients are usually repellent, Let's call it like that. And they don't really know what they're getting themselves into. So this is where the project proposal
overall comes in handy, but as well project pricing
as it's separate page. So let's quickly jumped through and see what's
included right here. So once again, exactly
the same structure. I'm not going to bore you
too much with these details. So as you can see,
we have the stack of 81 group is this one right
here for project fees. And second group is right
here for Project options. So whenever you remove
one of these items, e.g. it's going to bounce up like
I showed you previously. So let me actually show
you that one more time. Let's say I remove this item. As you can see, all
of them are going to jump up to fill the space, which is now weekend
when I remove this item, speaking of items,
as you can see, we have project fees. So this is what I was
talking previously as two, what is it going to exude client confidence and
really explain to them what exactly in detail is the thing that you are actually charging for this
particular project. So if you take a look, we have project research and you can go deep into details, explaining to them
later during your call. If you want to review this
with them or via e-mail, e.g. if they say to you, what
exactly is a project research, then you should e.g. tell them, well, I need
to research your company. I need to research
your competition, which is what comes next. Who is your competition? What are you? What is the nature into? What is your company product
service trying to achieve? Who are your target
customers, e.g. where they are located, what are the companies
they are working on? And all of those
things is what comes into project research,
design brief. You're actually going to write the design brief
yourself if you enroll, as explained previously in my
Adobe XD masterclass, e.g. you are going to get the
design brief template and you can use that template in conjunction with
this design proposal to work with your
clients inspiration, which is one key thing. An important thing in every
project is your inspiration. So we need to inspire yourself. You need to spend time on all of these different websites
exploring possible solutions, possible layouts,
possible styles, colors, typography, scale,
all of those things. You need to be inspired
and you need to invest your time to
achieve these results. So this is simply a basic price, which I put obviously a charge way more for all
of these things. We have paper, wireframe
concept research, sitemap and flowcharts. And I always include
my time into these, but you can add a separate line. I just simply put it like this because I'm going to run
out of space right here. But you can include
a separate line. And to do that, e.g. select an item, hit Control D, and it's going to
place an item below. And e.g. let's say email time, call and video call time. That can be your time. So every single time
that they want to meet with you and speak with you about that
particular project. You're going to charge for that. And simply double-click
right here, and let's say $900, let's say that's it. So make sure to include
all of the things that you personally are going to
invest into this project. So all of your time, research, design,
planning, wireframes, sharing these links,
feedback revisions, all of these things
which are going to include into this price. Finally, at the end of the day, I just went through and
added all of these, and it comes to this
price, so 30,750. But obviously this
is imaginary price. Once again, I charged way
more from my projects. So you can run through
these and simply adjust them to whatever
works for you. So e.g. a. Paper, wireframe
concept research, sitemap and flowcharts. Maybe you want to add
something else here. So let's say paper wireframe,
wireframe exploration. If that's what you are doing, concept research, sitemap,
blah, blah, blah, and then you can
charge more money because you added that
additional thing. Or if you e.g. are not doing concept research, then double-click right here, jumping, remove
concept research, and then simply adjust
this price to fit whatever you are working on
on this particular project. So that's basically what
the project fees are. And as I said, this
is what's going to exude that confidence
into your client. To actually understand
and to be more comfortable in paying
you that money. Because now you
showed to them, okay, this are all the things
which I'm actually going to be working for you on
this particular project. So hence, that's why I need
to charge that money that I explained to you because
all of these things are actually involved in
that particular project. Let's move on to this. So we have payment options. And once again,
payment is extremely important to never, ever, ever, for whatever project you're working on for whichever client you're working on work
without getting paid first. And this is where the payment
options come in handy. Once again, these are
just payment options which are used in the past. There are many others like e.g. weekly payment, monthly payment, onetime payments, or they're
paying you 100 per cent. If you're comfortable with that, maybe you want to add yourself
to their company, e.g. become a shareholder
and stuff like that. So there are many,
many, many other ways that you can get paid. But I went ahead and included three of the
most common ones. So e.g. two, equal payments. So wherever your total right here is simply divided to two. And then right, right here, 50% upfront just before
we start this project. And then 50 per cent at the end, just before I need to send you the final files for this
particular project, we have three equal payments. So 33.3% at the start, middle, and at the
end of the project. And we have two payments, e.g. 70, 30 split or 60, 40 split. That's why I said there are many different payment
options are there, so make sure to pick and choose whichever ones are the ones you are most comfortable with. And then simply
put it right here. So if it is, I think in this case
was 70 30 split, so 9625 and then last
payment is for one to five. And just make sure to explain when do you expect them
to make those payments to whichever one of
these you include inside the whole point of
these payment options is to give them options
and to explain to them that you can
give them options. So in majority of the cases, there is this
stigma about money, which I really don't understand because you're
providing the service. Same like you go in the
store to buy food, e.g. that store clerk is
going to provide you the service which
they are paid for. Seem like it is with website
design or app design. So it is no different at all. So make sure to provide them
with these payment options because sometimes it's
going to be much more simpler for them to
split that big payment, especially if it is big payments to three parts or four
parts or five parts. So make sure to give
them these options first and then these options
between YouTube, you can work it
out even further. So I'll give you an example. E.g. they might ask
you for two payments, but instead of, let's
say 70, 30 split, maybe they want to pay
the other way around, maybe 30 per cent at the
start of the project, 70% at the end of the project, maybe you are
comfortable with that. Or instead of three equal
payments may be the one to split it into
five equal payments. So that's why I
said, just give them these payment options which you are comfortable with and
you want to work with. And then between you two,
you can work it out. E.g. like I said, to equal variance three equal payments via equal payments, whatever you're comfortable with and your client is
comfortable with, then simply reach that
agreement included into payment options and then both of you are going to
end up satisfied. So basically that's it
for the pricing options. As you can see, it's
extremely important to work all of these things
out because once again, it's going to show
to your clients that you are professional. It's going to give
them more confidence in you to hire you. And because you're going to use this design proposal,
project proposal, which is tailored to their
business and their branding, is going to really make
them feel comfortable about hiring you than
some other designer. Next up, we have
terms and conditions. One extremely important page. So I'll see you in
the next video where we're going to discuss that.
24. Terms and conditions: Next up we have terms
and conditions. So let's jump inside. And here it is. So these are, these are the terms and
conditions, once again, extremely important page because here are some ground rules
you are going to lay. Your client is going to
understand what's included, what's not included,
what's possible, what's not possible, what's available, what's not available. So all of these things should be listed in two terms
and conditions. These are just some of mine, of course, for some
projects that use less. For some projects
I use way more. So if you need to
use way more than, you can simply duplicate
this art board for n, for any one of these. For that matter, you can hold Alt key option on your keyword, duplicate it, and e.g. call this terms and conditions
one terms or conditions to or simply continue
where you left off here, but makes sure to
position this page instead of this About Me page. Simply move this out
of the way, like this. Basically just make a copy
and move it out of the way. So simply remove about me, position this right here. So then later when
you went up exporting this as multiple PDFs,
you're going to be, your client is going to be
able to scroll down between these if you need to include
more terms and conditions. Now, speaking of
terms and conditions, what you should be
actually including inside. So we have project resources. So e.g. the images you're going
to use for your projects, which are so many images which are included
in this project, are you going to end
up using images from Unsplash or paying for images
from Envato Elements, e.g. or paying for those
really expensive images from photographers who is
going to pay for those images, for icons, for fonts,
for illustrations, for 3D mock-ups,
for 2D mock-ups, for all of those things. These are the project resources. Who's going to pay for that? If you are going to pay
for it as a designer, then you have to go back
to the project pricing and increase that
project pricing by a lot because you are going to
end up paying for all of these if the client is going to be paying
for all of them, and then how all of
this is going to work. Are you going to
find a resource, then ask them to buy it? Or are they're going to
send you the money up front for those resources which are not included in your
project pricing. This is additional
project money. So are there going to send you that money for those
projects resources? You're going to pay for
them with that money. And then you're going to
still have this money, which you agreed to be
the project total price. So just make sure to pay
attention to those things. Then we have projects revisions, which is what clients
love the most. You have to limit your
project revisions. First of all, when those revisions are going to
occur or they're going to occur every single day or at the end of the week or
at the end of two weeks. Or what I like to do really is at the specific
parts of your project. So if I take you back right here to the project
pricing, e.g. in my cases, there are no reviews until I
reach this section. So Adobe XD wireframes, and then I give you two rounds
of revisions and feedback. I don't want them to bother me when I'm doing my research, moodboards, preparations,
planning, stuff like that. And then when I finished the wireframes and I give
them this shareable link, then we can get started
with the revisions. They get to revisions
in this price included. If they need
additional revisions, then inside of the
project revisions, you are going to end
up telling them how expensive your revisions
are after those revisions. And or if you're giving them additional
revisions right here, then they need to pay for
revisions at the end of the project because right now they are included
in the price. But if they decide to e.g. in Greeley on XD wireframes
with shareable link. Then you're going to
make them pay for those revisions at the
end of the project. Otherwise you're not
going to deliver the file, stuff like that. But to avoid any confusion, that's why we have
terms and conditions. So you're going to include all of these things right here. So project addition. So let's say that they want
additional business card. No, no. You're not working
on a business card. You're just working on
this UI UX design project. Let's say that they want to, for you to include
social media posts and a brochure design or menu design if their restaurant nano, just UI UX design. Thank you very much. And for those things, if you are working with them, then you can create
additional project proposal, which is not UI UX, but graphic design
project proposal. And then simply work on them
with all of those things. Once again, terms and conditions
are extremely important because they are going to
help you avoid any confusion, any confusion with your client, and you can simply
get to work easily. Then we have workdays. If your clients are working
on weekends, That's fine. Good on them. But if you are not
working on weekends, than simply put it right here. If they really want you
to work on weekends, but you don't want to work on
weekends, then charge more. That's why this is
here for file formats. Once again, if you're
working in XD, which once again, I really recommend because
I truly love it. But they ask you e.g. Adobe Illustrator file types
or a Photoshop file types. You can say in this
file formats, e.g. I'm not delivering those
because I'm working in XD. But for additional charge, I can went and I can go ahead and deliver these
to you because they are this online converter tools that you can use and you
have to pay for them. That's why you'll pay, make
more money by asking for additional payment in
these file formats because you're not
working with them. You search right? So after the end of the project, who gets the rights to use the
design and at which point, which is crucial, if they didn't pay you that
final payment, then they don't have the
rights to use this design. If they did, then you can send them the
design final design, and then it's
completely up to them. They can do whatever
I want with them. They can sell it,
they can resell that. They can do whatever they want. Or if you have some
additional requirements, then you can put it right
here into usage rights, e.g. with this template, I don't want you guys to sell this template. So that's why on gamma
road where I sell it, there is a strict policy
on the camera side. You can purchase this, you can use it for your own clients. You can use it for unlimited
number of projects, but you cannot resell
it as your own. Otherwise, gum road
and myself are legally bound to sue you because
you broke that rule, which is in terms
and conditions, it's really quite simple. Finally, we have
project cancellation, which is my favorite actually. So I have this happened to me previously where I
work with clients e.g. for two months and
they end up broke. That really did happen to me. So this is not my problem. They want me to give
them this design, but they still didn't pay
me in the last project fee. So what happens at debt is with this project
cancellation part of terms and conditions, you can really describe that. So if for whatever
reason you don't want to pay me for the project, you are not going to get the project files
or you are going to get the project files for
this particular part that we finished up to the part
where you said to me that you're not going to give me any money for the
end of the project. This actually did happen to me and I did it exactly like that. So make sure to pay attention, make sure to be wise
about these things because you're not in control
of somebody else's life. You don't know what's going
to happen to them tomorrow. Maybe, maybe they're
going to die. Who knows? Maybe they're going to
move to another country. Maybe they're going
to get divorced. Maybe their business is
going to be bankrupt. Maybe, I don't know, Stock Exchange is
going to crash. A lot of the things can happen, so make sure to secure yourself as a designer working
on this project, creating this project
cancellation. So basically, as I said, you can include additional
items if you want to. These are just some of the
ones I'm using all the time. But as I said, for some projects
I'm using less. For some projects
I'm using more. And especially if you're
working with repeating clients, you can avoid some
of these things, but make sure to be
smarter about it and make sure to include
whatever you think is necessary. These are just some of the
guidance which are included. And once again, same
like with all of these, we have these items and they
are positioned in a stack. So e.g. these usage rights, you can hit Delete, it's
going to pop up to the top. So it's the same structure as which I showed you
with Project Pricing, Project Details,
and discover page. Finally, what's left for
us to cover is about me, which is one once
again key page. So I'll see you
in the next video and we're going to
discuss this one.
25. About You: Finally, let's talk about me
page and why it's important. So here it is. And once again, all of this page structure like I
showed you, is the same. But what you can
do with this image is I included to be this wide. So e.g. if you want, you can put yourself in
an office like this. If you have an
office like you're working on your computer, e.g. and you can show
image like that. Or if you don't, you can simply adjust
the size of this image. Simply click on it. You're going to
adjust it. You can position it to be in the center. This text will follow, so you can really play around and do whatever
you want with it. But I included like that because in majority
of the cases, clients really like to see you, your face, but they also like to see what
you're working on. Hence, these images below. These images can be taken from your previous work on
weekends or on Dribble, e.g. you can simply put images there, which once again
is going to exude confidence into our
clients because you're going to show more of your
work which they actually sold because they contacted your four-year portfolio
from your website, Behance Dribble wherever you're hosting your portfolio
and your work. And therefore, you can really include images there
just to remind them as to how
high-quality your work is, what you're capable of
creating as a designer, because there is a
slight possibility that they are not going to end up hiring you if they think the budget
is too big, e.g. or something like that, then this page is really
there to remind them as to why the quantity
due in the first place. Because in majority of cases, clients really see dozens
of different designers. They don't really know
which one is which. So by reminding them right
here of some of your work, then you can really help them decide to go with you on
this particular project. So this, as you can see, says your name UI UX designer, but you can clearly
double-click right here. Let me enter my own name because I included
padding right here. So when I start typing, you can see that
bearing is adjusting. So you can include UI, UX designer slash
graphic designer. We created a Blogger, blog or whatever you are, you can include it right here
and it's going to expand. And as I previously showed you, you can simply adjust this
image to whatever you want. This is going to follow. This can end up
bleeding right here. And of course you can change
this to some other color. Doesn't have to be white, so you can really play around
with it like self about me. It says Project
Resources right here. So little, little bit more about me, e.g. so you are going to include information about
yourself right here. So you're really going to
explain to them, who are you? What is your information? What is your education, e.g. what is your experience
on these projects? So where have you
worked on in the past, which are some of
your interests, e.g. I'm really interested
in cars and then I'm going to
explain this to them. And if you're working in that particular
niche, carnage, e.g. in saying that you are
really inspired by cars, that you're really
interested into cars. There is extremely high
chance and possibility. Clients are going to employ you for this particular
project because you're really interested in that sphere and in that part of the market. So it's really extremely
important to be able to tell a story to these clients because story is what's going to hire
you at the end of the day. Once again, if you don't
want these to be right here. So these three paragraphs,
you can hit delete, remove this paragraph, move
these images to the top. You can simply
extend these images like this if you want
them to be bigger. So once again, it's
extremely adaptable. You can do whatever
you want with that. And finally, what I want
to show right here is if you are a male and
you identify as male, you can double-click right here, and you can show this mail icon or we have
the female icon as well. So you can simply
adjust the opacity, bring it right here if
you identify as female. So you can put that right here. Otherwise you can use a gender neutral icon if
you identify as that, that's fine as well, of course. So you can include
that if you want to. I didn't include it right
here, but once again, I'm going to leave the
link to this icon packs. They didn't include it there, but if you have your
own personal icon, even better, simply
include it right there. I showed you how
to replace these. I can simply drag and
drop your icon instead of this component and it's
going to update in real time. Finally, how can you
actually export this? You can simply select dislike. So hit Control E, choose a PDF, hit Export, and it's going to
export it to your desktop. And e.g. where it
is, Here it is. Let me double-click
on it and open it up. Here is control zero. So this is your project
name, project details, project pricing, terms
and conditions about me. And if I take you
to this page, e.g. and zoom in a little bit closer. Because once again, this
is a vector file format. You can see the
quality of the text. It's really impeccable and
it doesn't lose any quality, as you can see right here. And if I take you
like so you can see how crispy clear
this text really is. And that's why I like
working in Adobe XD. If you think that this gray
text is not easily readable, once again, you can come right here where it says neutral gray. Apply it to be a bit darker, and then it's going
to apply itself across all of your projects. Also, one more thing to note, if you want to export this
and any other file type, you can select
individual airports and you can share them
right here if you want to, but you can hit Control E or
Command D instead of PDF, you can share them as PNG
image or JPEG image or SVG if you want your clients to preview
this as a JPEG, e.g. then you can simply just share this or like I
showed you with PDF, you can simply select
them all hit Control E. And then instead of
pdf, select JPEG, hit Export and then send JPEG images to them if
that's what they require. But as I said from
my experience, PDF really works just fine
because they can really open that PDF and take
it with them via email, on their laptop, on their
desktop, mobile phone, tablet, whatever they're using,
they can take that PDF and it's really nice,
simple and light. So it's easily shareable
with them via email, social media pages, these communication
apps like WhatsApp, Viber, and what have you. So this is basically how to work with UI UX design proposal. Once again, if you
want to check it out, link is in the PDF. Make sure to click
that link and to access it at a massive discount. Or I really encourage you to create your own if you want to.
26. UX UI Project Proposal Figma Template: In this video, I wanted
to show you how to create the UI UX design
project proposal. And same story like with
all of these videos so far, I'm going to show
how to create it in XD in full tutorial style and then show you what's
different between XD figma because I don't
want to waste your time. So in this video, we're going to notice what's
different between using Figma and XD to create
this sort of templates. So let's jump over to Figma. And here in Figma, you can see how
everything looks like. So seems to me like when X is just we don't have
our boards here. We have these frames which are basically exactly
the same thing. It's just the content area
where you put your content in. Now when I click outside, you're going to notice
these textiles and all of the textiles are exactly the
same as in XD now in Figma. And then we have
these color styles which are exactly the same in XD and infimum because we wanted these templates to
look exactly the same. The only major
difference is here. They are called
auto layout in XD, they are called stacks. And these are these groups
that you see right here that you can position your
elements into. So e.g. for the project pricing, we have the auto layout here instead of stacks in
vertical direction. And the distance is 80 pixels between all
of these sections. Now we have two section which
are pricing information, which is this
section right here, and the payment option, which is this right here. Now, if I select the
project pricing here, I have the distance between this section and this section, which is this
distance right here. If I hover, it's
going to say AT, and if I increase
it to 120, e.g. you can see what that does. So this is the whole point is just different name and the tool is exactly the same and it does exactly the same
story like before. If I come right here
outside of everything here, I have my H1 color. If I want to adjust it, let me hit right
here, high myself, so you can see it here. I have the H1 color, but if I click right
here to adjust it, maybe I want to
click right here. And you are going to notice it's going to update in real time, adjusting to whichever
color that you want. So if I go back a little
bit by using Control Z. So same story like in XD, e.g. and it's going to go back
to the original position. Now, if we switch
over to assets, here we have the cover
which is the footer, which is this
component right here. And to create a component, it's exactly the same. You just select the
group in this case, and you come over
right here and create components or use
Control Alt key, e.g. and it's going to
show this component. And if I drag and drop it
somewhere around here, you're going to
notice what's inside. Here we have the website and the website text here we have the e-mail and the e-mail
texts and the contract, and the whole point
of this same, same like in Adobe XD, if you've watched that section, is to help you create
on this first one. And then it's going to
auto update on this one, this one, and this one. So you don't have
to type and copy and paste your type and
lose time that way. Instead, you're just
going to create a single component at the start, which is actually right here. And then it's going to inherit
these tiles down the line. Here. If we switch over, you can see that now
we are in the cover. So in the cover,
which is this one, It's going to locate this
particular component. So if I go back to here, select my cover,
what I want to do is get rid of this fill color because I don't really need it. I must click on it by accident. And this is actually
our main component. And you can see that by
clicking right here, you can add variance
to this component. And we're going to
talk about variants in the design section
of this course. But I just wanted to quickly notice that if you make
a change right here, unlike color lifestyle like font choice is
going to update in real time across all of these other frames or art
boards if you want to. And it's going to make that change throughout
all of them. Same story like it
is in Adobe XD. So here for the color, you can see that we have that particular component
for the project details. Here we have, if I open it up, just this component, which
is this icon right here. Same story for the
project pricing, same story for the
terms and conditions. And for the about me, we just have these two icons, which are these two
icons right here. So basically if I click outside, already showed you
how to edit the text, already showed you how
to edit the fonts, basically the same story. Just click here,
let me find myself. And here you can choose the font family you can
choose to look and the feel, the distances and
so on and so forth. And of course the name
and what's it for. So if I go back, I just wanted to show
you one less thing because we have the
image right here. If I switch from assets two
layers and select this, we have this image, so let me close this so
it doesn't confuse you. How do you add image in Figma? So what you can do is drag and drop your image right here. And it's going to populate it. Then you can drag
it inside and then you have to mask it and
so on and so forth. But I'm not really
a big fan of that. So if you select
your image here, you can see natural gray. So instead of luck in XD, which I really like about Adobe XD and dislike
about figma. But now that Adobe bought Figma, hopefully they're going
to add it in future. So you cannot just drag and
drop onto the place holder. You can instead
drag-and-drop to here. So here it says natural gray. Drag it to dare. Wait a little bit until
it recognizes it. And then once it does, you'll be able to just selected, just drag and drop
it onto there, and it's going to replace
that with your color. But in this case the work, so let me detach it so it
becomes the fill color. So drag and you can see
that now it becomes blue and just let go. And then it's going
to populate there. But what happens if you
want to adjust this image? Let me hide myself
so you can see it. You can just click on
it instead of fill, you can hit crop. So Fill, fit Crop and tile. So when I hit Crop, I'm going to be
able to resize it, reposition it, re-scale it, and adjust it in
however way I want. And it's going to be adjusted
perfectly to this site, just like it is in Adobe XD. So this is just one
thing I hate about Figma and love above
about Adobe XD. Because in some cases it feels like some clicks too
far, like it is. In this case in XD, you can drag and drop, double-click and then
adjust however you want. Well here you have to
separately created, you have to unlock it if e.g. the color was attached
like it is in this case, then you have to
drop on top of it, then watch this one-click, two clicks, and
then three clicks for me to be able to
crop it inside in XD. It's just much more intuitive, but that's just
one of the things that I hope Adobe
is going to add to Figma in the future now that they own it in terms
of editing this, you can really do any
editing that you want. The same story like I showed
you previously in Adobe XD. And once again, if you're
wondering what all of these things are and
you skip dxdy part, please watch it
because it's really important about how
to price your project correctly and how to do this
UI UX project proposal. It's just, you can open
this template up in Figma and watch the
XD part as we walk you through to
understand why I made certain choices and why all of these elements are
where they are. So that's basically
it for this video. I just wanted to quickly walk
you through and show you the differences between
XD files and Figma files. Make sure to open up
this template in Figma. You're going to get it
and you can use it and reuse it for your own projects and make sure you explore it, how I created it. And maybe play around
with some settings. Maybe include your own
icons, your own colors, your own typography choices, and see how you can
make it your own. Because that's the
whole point right here. Don't just use this template bluntly to make sure
to adjust it and make some changes that fit to you and that are in your
particular style.
27. SECTION 4 User Research and Personas: User personas are one of the crucial parts of
every design process because you don't
want to just use the data and call it users. You want to put a face
behind your persona, behind the person
you are designing this website or this app for. And that's what it's
called UI UX persona. You want to use
these personas as accurately as possible based on the research that you did. And we're going to talk about different methodologies that you can use for your research in
this section of the class. But basically, that's what
the whole purpose is for. You want to treat it like a real person and not
just some user data. So let's get started.
28. What is a User Persona: When you start your
design project, you have to know who
you're designing for. Otherwise, you're just going
to design for everybody. And the design decisions
you're going to bring to the table are not
going to be valuable. Because later down the line, when people are not buying, when people are not signing up, your client is going
to ask you why. And it's quite clearly because the target audience
has not been defined. This target audience is
been known as user persona. And instead of targeting
an audience, in this case, you're just going to
target a single person, imaginary person, but a
single person nonetheless. But how can you know who is this single person you are targeting for your user persona? You're going to know that by
doing your user research. By doing your user research, you're going to know who is your target audience and
from that target audience, as I said, you're
going to take and create this imaginary persona. You're going to
use the real data and this is crucial here. Don't just use imaginary
data because you think that your users might
like a certain thing. Try to devise your persona from the specific user research
that you did to get as much information
as you possibly can. Now, you can imagine a
quota to depending of your user behaviors or
your user age or whatever. But try to pick up the crucial
information such as age, such as job status, e.g. such as gender, such as the city or the country
where your users are in. Try to collect the
data and be as specific as possible
so that you can know how to form your user persona the right way from the
start of your project. Why to create a persona in the first place
is quite simple. Just to refer it to
as instead of user, you're going to refer
it to as a persona, you're going to use once again, real data that you collected
through user research. But you're going to attach a fictional name and a surname, a fictional job position to this persona so that you can
treat it like a real person, even though this is just an imaginary
person, this persona is, but as I said and
keep repeating, you're going to
use the real data, which is going to make it
seem like a real person. When you move your project to
development down the line, you're going to refer to this user persona by
name and surname, like it really exists. And it's going to be much
simpler to adapt and to make changes to
the persona when you have it be as a real
person rather than just saying your users or
our users or whatever. As I said, you're going to focus this persona and designed
specifically for this persona to make your design functional and to make it
work for this persona, your user base from the
start of your project. But how do you do
your user research? That's what we're going to
talk in the next lesson, where to focus and
what to look out for.
29. Types of research methods: There are many different
research methods out there that you can
use for your project. And the way you can
know which one to use is by the size
of your project. If the project is smaller, obviously are not going to
use the types that e.g. Google uses, or
Microsoft or Apple. But you're going to form
your type of user research according to the size of your audience and according
to the size of your project. Because in my opinion, it's always better
to start small and to adjust as
the company grows, as the goals grow, as the user base grows. Then if you're just
starting large n, if you're just focusing
on this huge audience and then tried to distill
it down a little bit. Then you need goals. You need the specific goal and a certain goal from your
client to focus on, to focus your research on. So you cannot design
for everybody, I think we mentioned in
the previous lessons. So therefore, you need
your user persona and same story for
the user research. You have to understand
what the goal is. What are you trying to solve? What is the goal
of this project? What are some pain points? What are some
weaknesses perhaps in the market that you're trying to explore with this product. So therefore, you have to
understand who are you designing for and you have to understand what are your goals. Because if the goals are, let's sell as many of these
products as possible. That's not a realistic goal. This is not a good goal. The goal here should
be something like, let's try to, I don't know
if you are focusing on, let's say a car industry. Let's try to sell these tires, which are going to last e.g. six months longer
than the competition. And they're going to provide a much better grip
than the competition. And let's sell it to, let's say, families in the downtown
neighborhoods or cities. So these are some
realistic goals that you can actually achieve
rather than, let's sell million
of these tires, but to who, how you're
going to achieve this. So therefore, you have
to set your goals. Then after you set your goals, you then can strategize as to which kind of user research
you're going to approach too. Because as I said, when
you're starting small, you don't need to test, let's say 200 users
because you can just test five users and not waste
your research resources, not to waste your time that waste your money
in there to waste their time and their money by doing this unnecessary research, you can focus your
research efforts on e.g. five to ten people. And from those groups, you can distill who is your target audience and
who is your user persona. In the next lesson, we're
going to talk about different kinds of
user research methods. And which one can you choose for your project depending of
your goals? As I said.
30. Quantitative VS Qualitative: When you get started
with the project, you have to know
what to focus on, as I mentioned in the
previous lessons, but you also have
to know which type of user research
you have to choose. And there are many
different ones out there in this lesson, I'm just going to name a few. And because this
course is quite short, you can focus your
efforts later down the line when you figure out
which one is right for you, then you can distill
it down and explore some more possible routes for your specific user research. But basically, you can divide your user research methods into qualitative
and quantitative. Qualitative is actually
something that you can distilled down into real
numbers, into real data. While quantitative
is actually to get as much data as possible. Quantitative can
be something like user surveys or
questionnaires online, where you can get as many different user
inputs as possible. And then you can use qualitative research methods
to focus that number down, to distill it down into actually understand what all
these numbers mean. E.g. if you have thousand users from
all around the world, that's quantitative data
because you have quantity, then you're going to distill
those users down using qualitative data to achieve actually the result that
you're looking for, e.g. which country are those
users located in? And then further down, which city are they located in? If you can, then you can
understand what age they are and you can understand what device type they're using. You can understand the
browser type, e.g. so when you have all of this
data, that qualitative data, and that's basically you can separate it by quantity
versus quality. Therefore, the
names in question, there are also two more types, and these are attitudinal
and behavioral. With attitudinal, it's basically your users attitude and
behavioral is how they behave. So basically attitudinal
is what they say. Behaviorial is how they behave. And for both of these, you can use different types
of research methods, e.g. for Attitudinal, as
I said previously, you can use questionnaires, you can use online forums. You can use something
like Typekit to create a simple form. You can put it on existing
website or you can send it via email to users and then
you can see what they say. And this can be quantitative
user research method because you are going to accumulate the quantity of information before you
put it into quality. And then behavioral is
something really different. This is for the later stages
of your research, e.g. when you already have
a prototype done, then you can put them in
the same room as you are. And then you can do the
quality testing, e.g. this is the behavioral method
because you're going to see how your users are going to behave once they
are in the room. You don't have to do this. You can use maize, e.g., which is what I use. And I'm going to link all
of these resources which I mentioned in the
PDF for this class. So make sure to check them, check them out and
click and see all of these websites for yourself and explore them a
little bit further. You can also use something
which is called heat maps. Heatmaps require a certain set of devices to put on
your juices head. But there is also
software out there and heatmaps are basically
what the name suggests, where the users are
looking at is what, where the map is going
to be the most heated, where they are
looking at the list is where the map is
going to be called e.g. so therefore, you can know where to focus your
design efforts because your users are mostly looking at this
rather than this. So you can focus your
important messages, e.g. on your page, on
the specific part of the page where users
are looking the most. So if you think that the tax
should be better off here, but none of your users are
looking in that direction. Then try to see where
they are looking at. E.g. if they're looking
in this direction, maybe put the text dare. If the text is most
important part of that section of your page, e.g. so that's behaviorial. You can track how your users
are behaving in real time. So once again, depending on your research method of
what your goals are, what you're trying to
accomplish with your research. Make sure to use
quantitative data first so that you can accumulate
the data from your users. And then try to use
qualitative data to get some real numbers
that you can work with and present them
to your clients, e.g. so that you can show them the
research findings that you found and then you can use those research findings
later in your design. Also, don't forget attitudinal. So what is their attitude, how they say they're
going to react? And then behavioral how
they actually react when you present them with
a test, with a prototype, with the design with a website, and you actually ask them
to test it in real time, either in front
of you or online. In the next video,
we're going to talk about choosing
your participants. If you don't have
any participants and if you already have
an existing audience, what is the difference and how to choose between both of those. So I'll see you there.
31. Choosing your participants: Choosing your participants
is crucial part of your user research because if you choose the
wrong participants, your outcome of the research
is not going to be valid. Therefore, your research is really pointless and
you wasted your time, everybody else's time and your clients money
because in majority of cases you really have to pay for any kind of user
research that you do. So therefore, it's really
important to choose the right participants
for the right type of research that you're going to do and to choose the right amount of participants for
that specific research. How to choose participants? Well, there are really
two different kinds you can choose from
existing audience. This is if your clients, client has a website, they have an app, they
have an email list. And you can really reach out to these potential
client, customers. And you can really ask them for their opinion
and for their time. And then you can really
conduct this user research that way because you already
have that existing audience. The other way to do it is
with non-existing people. That's if your client's business
is just getting started. And then you have to find these participants to
participate and how to do that? Well, there once again, two different methods for this. It's with people in person. So you can really meet with
different people face to face and you can do your testing
debt way or to do it online. And you're going to
choose one or the other based on a simple thing. Is your client local and is their audience
going to be local? Therefore, you're going to
most likely choose in-person. You can also choose
online but to filter to your country and to your
region and to your city, e.g. but if your client's audience
is going to be global, therefore, the best method is to choose these people online. I'm going to leave a few links, the PDF to this class, where you can click through these various different
websites where you can find different audiences to do your
research and your testing. And these websites are obviously going to
charge you for it. So it's really important if you're going to
do this freelance to charge this into
your client's bill. You can separate this form
from your service, e.g. you can factor in the
entire design process as one charge and then charged
this, the separate charge. Or you can factor all
descend from the start. Maybe it's the best
way to approach. It may be charged the UX part of your project separately
and then UI part and perhaps development
part later separately because you already have all of this information
from your UX part. And then when you
move into the UI part and the actual creation
of your design, perhaps it's better approach
to charge that separately. I'm just telling you this because oftentimes
you're going to get user research which is not really all that compelling. What this means is perhaps
you ask the wrong questions. Perhaps you didn't get the
right amount of people and all of this researcher client
is going to have to pay. Sometimes if your
session is e.g. 30 min long, you're going to have to pay for
people to sit down for 30 min and to listen to you asking them the questions, or to fill in the questionnaire, or to test your prototype, or to test your hypothesis. So whatever it is, you're going to have
to pay these people. So it's really important to understand right from the start that you have to build your client for this
specific service. Or you can price your project
completely separately. So UI design and the delivery is going
to come as one charge. And the UX design is going to
be its own separate thing, especially with
this user methods and user approaches
and stuff like that. With real people, it's much more easy because you're going
to actually sit with them. You're going to prepare your
list of questions upfront. We're going to ask them
these questions and sometimes if you are
paying them for 30 min, oftentimes you're
going to find that your talk is going
to last for all in 15 min so you can pay them half the price and
stuff like that. But once again, it's
really important to factor this expense into
your project expense. Because oftentimes it
can be really expensive. These people, and
you're going to see on these websites which I'm
going to link in the PDF, are going to charge
anywhere from $20 per hour all the way
up to $200 per hour, depending of the
user research method you are going to
do on these users. And depending on,
if you have e.g. five users are 20 users. You can clearly see that this expense is
going to be vast. But it's completely
different story with your existing users
because you can approach your existing users and you
can offer them some kind of a discount either on existing
features or product, or a future feature
or a future product that your client is going
to launch it down the line. But be really careful with your existing users because
oftentimes there is a bias because most of them possibly already like that
product that they're using. So they are going to
be quite biased with the responses they're going
to give to your research. So make sure to factor
all of this and make sure to check out the PDF which I'm going to provide, as I said, to click through all
of these links to the websites where you can find these user research testers which are going to come to your project and
come to your rescue. Basically, wherever
you are in a row, just make sure to factor in the expenses for this
particular project.
32. Visualising your data: When you have your
research information, oftentimes it's
going to be really chaotic because
let's just imagine that you have ten questions for each of your participants. Let's say that you are
doing a user survey. You'll have ten questions, you have ten different
participants. So therefore you're going to
get 100 different answers. So how to factor all of this n? Well, there are
different templates online that you can
find there completely free and they're used for majority of the
industry where e.g. inside of the Excel
spreadsheet or Google Sheets, you can include
this template that you get and it's
going to calculate your responses based on whatever your users
are going to say. Or if you're using something like quantitative
methods and e.g. you set up a landing
page and you want to see how many clicks
you're going to get. It's better to use
Google Analytics because their amount of information that you get from Google
Analytics is just vast. So you have to understand
and you have to organize it in some
way so you can factor it then across our let's say a week of time or two weeks of
time or amount of time depending on how long
you're testing is going to be. And therefore, you can factor all of that information later. At the end of the day, when you do, you're going to
form in your user persona. We're going to get to
it in the next lesson, we're going to actually give you a template which
you can fill in. And I'm going to walk you
through a little bit more as to different information
that you can put into that template. But it's really important to visualize your data and finally, to present it to your client before we move on to
the design process. Because oftentimes your
clients are going to have a little bit different
inputs that you do. So it's really important to
show them the data and e.g. to combat whatever
they have to say. If it is a bit different because they wanted to
believe to be different, but the actual data
is showing different. Therefore, it's really important
to show them that data, to visualize that data for them to afford easier
understanding. So e.g. if you're using XD or Figma or Photoshop,
whatever software, make sure to create
a bit of a template where you can present that
data using icons, e.g. using different
images so they can easily understand the data
that you're going to get, because the data you're going to get is usually just text. And text is really difficult
for people to understand. So visualizing that
data is going to be much easier for
your clients to understand and to
approve for you to move forward with
the design process. As I said in the next lesson, I'm going to give
you a XD template, which you can use and visualize your data once you
actually get it and put it into user persona. So I'll see you there.
33. Creating Your User Persona: In this lesson, I'm
going to give you an Adobe XD template for
user persona creation. And you can use this template for all of your future work. And I'm also going
to share with you different sections
that you can use for this template and the future templates that
you are going to create. So let's get started. So here I am in Adobe
XD and as I said, you're going to
get this template. Make sure to check it out
in the class resources. And when you click right
here, which says Libraries, you're going to see all of the different colors
which are used, which you can obviously change. You can simply right-click, hit Edit and whichever
color you choose. As you can see, it's
going to update. Just make sure because
we have this gradient. If you're going to
choose this color, e.g. to right-click and to copy come right here where it
says gradient hit edit, and then click on this top because that's
the yellow stuff. Hit Control or Command
V to paste it in. And you're going to have exactly the same color
as I did right here. Or you can simply
sample it from here and you can see it's going
to update right here. So that's just a tip
about the color. Same story goes for
character styles. This is Poppins. You can use any kind of
character styles that you want. I purposely didn't
use any icons to keep things really
simple and concise. So you can use different
kind of components. You can use different videos
if you want to present your user persona
as a real person, you can print this by simply
saving it out as a PDF. You can call right here, hit Control or Command E right here. And then you can
simply use PDF e.g. you can export it,
you can export that as an image to print it out. Or you can export
as PDF or image and share it with your clients online for easier understanding. But once again,
let's wrap this up. It's really important to
have your user persona is really important to understand where you
are designing for. It's really important to share this information
across the team. You might be working in. Both your client,
stakeholders, marketing team, developers, all of
the other designers, everybody in the
team knows that. This is, in this case
Marcus Morris, e.g. so this is our user persona. So how everything is structured is about section right here. And you can edit all
of these sections. You can see them right here. When I click the Layers panel, you have your user image, which is this one about
which is this top section. Then we have needs,
we have frustrations, social media, and
finally, favorite brands. So About section is who
is this user actually? And what they are about. You're going to once again understand it from
your user research. So let's use
existing users, e.g. if you're using, let's
say Google Analytics, you're going to understand that majority of your users are, let's say male, in this case, they are from London, UK. So you're going to give it
a name, let's say markers. And he loves walks with this two-year-old
daughter and wife who cares deeply about
your environment and what better future
for his daughter. You're going to understand this from your fuel,
further research. So you're not just going to use Google Analytics
in this case, you're going to
actually reach out to these potential people based
on your Google Analytics. You're going to note the age because you can see the
age range right here. And you're going to know
the location right here. So therefore, you can further tweak who are you
targeting tube. So you can reach out to these potential people and
understand what they're about. So this person has said
that he has a daughter, e.g. he has a wife. He cares deeply about
the environment. He's passionate about
all of these things. So you're going to put this into About section occupation. They're going to tell
what they do income. If they don't tell
you the income, you can easily figure it out
from the research you can do online because there are
many different researchers out there for every
country in the world. So you can put the income
right there from the income, which is once again
really important. If they tell you, if not, you can figure it out
yourself by doing some online research
from the income, you can understand how much can this user actually
spent on my website. So if this is not the right user for me because
their income is too low, perhaps on targeting the wrong
user because my products for services or too expensive
for this particular user. So you can see why this
research is really important. Once again, you can understand
this by doing any kind of user research which we
just mentioned previously. You can do card sorting, e.g. you can do your questionnaires, you can do your, let's say user logs where user tells you something about
them every single day. And you can do something
like surveys, e.g. where you can find out who
these people actually are, then you can reach
out to them and ask them these
specific questions or any other questions that you need to know based
on your goals. Once again, really important. Once you need that, you can understand their needs
because you can ask them, what are their frustrations,
what are the needs? What they actually need
from a product like this? And therefore, based on the
answers you're going to get, you can filter that out
into this specific section. In this case, because I chose a card brand just
out of nowhere, It's better way to search
for a used car on lines. Let me collapse this and zoom in a little bit so you can see
it a little bit better. So better way to search
for a used car online. This person wants to
find a used car online, but they are just
confused with all of these different
offerings out there. Easier way to understand
the car he looks at. So majority of times
you're going to see all sorts of
different information on this car websites and just basically some
sort of a code that people in the car
industry understand. But people outside of the car industry don't really know what
they're looking at. So they need an easier way to understand what
they're looking at. Easy approach for inquiring
about the vehicle. So in many cases is
just an email form. Perhaps I want to direct
telephone number, maybe I want to use
WhatsApp or messenger or y-bar or whatever
that you are using. Frustrations, too crowded
and confusing websites, which is majority of cases. Once again, relating back to the information overload
that the industry uses. Websites are not
mobile friendly. In majority of cases, your users are going to use
mobile devices these days. So if the website is
not mobile friendly, It's a big red flag. Heat sink, a posting
without a price. So they want transparency. They want to understand whatever current they are looking at. How much does it cost? So they want to see
the transparency. It's going to attract
them more to that ad and possibly purchase sooner. Social media habits. So Facebook, Twitter,
Instagram, LinkedIn. Why is this important for
your marketing efforts? Later down the line? And favorite brands, you want to see who the
favorite brands are. Because from these
favorite brands, you can perhaps choose a style cues later
for your design. Let's say that if you
see a pattern, e.g. huge images and crisp text, maybe black on white
or gradients or images of people that you really like and it attracts them
back to these websites. Dan, you can perhaps
visit them and take cues for your specific
design or redesign, whatever you're trying to do. In this case, I just stumbled in a bunch of
these different logos, but your users are
actually going to give you a specific
set of brands. Make sure to write them
down and make sure to put them here to
inspire yourself. Finally, we have
something like a quote. You can choose this quote
and you can ask your users, do have a favorite quote. If they don't, then
you can simply find something online to put here. And finally, what I
wanted to show you is we have image gradient,
I'm going to hide it. We have an image I want to
drag and drop my image, bring back the gradient. And now when you put a face
on top of your user persona, it actually gives it
that personality. It actually shows you the person you're trying to design
this website for some. One final thing I want to
add right here is these are just the sections for this specific user
persona template. You can add a bunch of
different sections, once again, depending of your goals, depending of your research here. So e.g. maybe you want to add a specific tags that
your users mentioned. Maybe their feelings,
maybe they're feeling sad, maybe they're feeling happy. So you're going to know the
colors you're going to use. You're going to know the pacing, you're going to use
the topography, the layout based on everything that your users are going to
tell you in your research. You're going to put that in your persona and you're
going to reference always back to this persona to remind yourself and
to remind your team. If somebody wants
to use, let's say, a black color and it's
kinda pinkish websites, so it's not going
to work quite well. You're going to always refer back to the persona template to understand a little
bit better and to remind yourself
and your team, who are you designing for? So here is that user
persona template. Make sure to check it out, download it, use it. Make sure to replace all
of these sections that you think are not necessarily
for your specific research. As I said, you can
simply go back to here and I'm going to
go back right here. If you want, you
can make this image a lot smaller than you can e.g. position this section
to be right here. You can play around with
whatever you want with this template that given it
away completely for free. So make sure to
explore it and to create your perfect
user persona.
34. User Persona Figma Template: Let me show you how to use a persona template
looks like in Figma. What are some
differences between Figma file and Adobe XD file and how you can use it and
reuse it in your own projects. So here we are in Figma, and you can see that design
is exactly the same. And that's the whole
point, really, because I didn't want
to have any differences between Figma and XD
files because you, as the designer, will be able to choose in which tool
you're going to work with. As I keep mentioning
throughout this course, Figma is going to take over
because Adobe bought Figma. That's going to
happen at some point. But before it happens, make sure to use XD if you are comfortable with eggs
deep black myself, e.g. I really like XD more
than I like Figma. But Figma is slowly
going to turn into Adobe products
as time moves on. So it's going to have
exactly the same features as some other Adobe tools
like layering, e.g. like airports and
so on and so forth. So only time will tell what Figma going to look
like down the line. But the whole point of
this exercise is to show you that if you open
up XD template, if you open up Figma template, compare the two, That's why
they are exactly the same. There really aren't
any differences there. And the tools themselves
are going to be extremely familiar
for you to use. If you've ever used XD or
if you've ever used Figma and you're going vice
versa between these tools. So if we check this out, you can see how it looks like. So they're just basically
groups right here. If I switch over to assets, we don't have any
components because I purposely didn't want
to create any components. Your Favorite Brands
are going to be your favorite brands and not
these brands right here. So why have them as separate icons are
separate assets here. Then for the image itself
is going to be a little bit different as to how
you're going to add an image. Because when you select image
where it says light gray, you're going to drag your image inside of there where
it says light gray. Just drag it here
and release it. And it's going to populate this section with that
particular image. Image gradient is going
to stay where it is. You just attach the image and drag and drop it onto
the image itself, like you do in Adobe XD, but rather drag it to here
where it says light gray, lean on top of it
and then let go. And it's going to populate
this section with your image. So it's super simple. So just not release it here, drag it, and then
release it here. But it says light gray
in terms of colors, like I mentioned in the
design brief video, e.g. when you click right
here, you're going to be able to see your
document colors. Or if you click
outside of everything, you will see textiles here, you will see color styles. And here we have one gradient, which is just for this
image gradient part of it. Of course, you can
change it there, so if you don't like it,
you can click on it. Let me find yourself so
you can see it a little bit better. So
here's the gradient. You have the Settings icon
you can click right there, and here is your gradient. So here you can
choose it to linear. You can play around
with different colors, different orientations. You can paste in
your hex code here. You can set up your obesity. Then here you can play
around with the positioning. You can add different stops, you can add different blurs
and so on and so forth. And I just named it gradient, but you can rename it to
any other way you want. You can just click right here, rename it however you want. Description who is
for, who is it for? So maybe this is for the hero section. You
can put it right there. So just get the point, then you can add
additional properties. It just has one linear gradient, but if you click this plus, you can add additional
linear gradient on top of it and set the
opacity down a little bit and just explore there in terms of the font
choices and font styles. Here you can see that e.g. if I select this here, we have the accent colors
for these dots and then we have almost black
color for the text. And if we select the
text itself, e.g. in the needs, we have
the auto layout, which is the same story as a way to these
stacks in Adobe XD. So the story, it's going to be exactly the same like
it is in Adobe XD. You just put some
items in a group. Here they are
called auto layout. In Adobe XD, they
are called stacks. You are going to make
the positioning and the direction between the
items inside of that group. So in this case, auto-layout
goes from top to bottom. So vertical direction. And it has need one, needs to need three
groups inside of it. A distance of eight
pixels right here. So if I switch this
to 20 pixels, e.g. you can see how that's going to look like because it's going to end up spacing out
this dot and this text. But if I select
the needs in self, so the entire section, it has 17 right here. So if I increased
that to 40, e.g. you can see what that does. So just play around
with these examples. And if at any point you want to change this from
vertical to horizontal, you can just click
right here and you can see what that
does is just going to bring it back and auto
adapt at the same time. So those are some things which I wanted to
mention right here. If you want, you can quickly replace these colors,
as already explained. If you want, you can quickly
replace the fonts inside. You can replace the
positioning inside, you can change the order. But this video is just
to let you know what's the difference between
XD file and Figma file? And as you can see, there are not too many
differences out there. These tools are basically
exactly the same. It's just how you work
with images, e.g. it's going to differ
slightly between XD figma, but at the end of the day
it's exactly the same. You're going to see
that once we get to the design section
of this course, because I'm going to
go through design in XD and then go through
full design in Figma, just to show you some
differences in how you work. If you watch those two sections, you're going to notice
that the entire process is almost exactly the same and that's the whole
point right here. Don't let the tool limit you. You have to know all of these things which
were mentioning in the course to become a much better designer
then you are right now. But don't look too
tall, limit you. I can create this
in Microsoft Paint if my clients requested me to, but it's just much easier
in Figma or XD because these tools have been created in the first place to
do a job like this.
35. SECTION 4 ASSIGNMENT: Your assignment for this section
is to use the template I provided and to fill it in
with your own information. You can imagine
your user persona. You can put a different image. You can change the colors, you
can change the typography, make sure to change the logos in the last section of the template just to make it your
own and just the practice of actually using it. Then when the time
actually comes. Or if you already have
some clients and you want to create a user persona for
that particular project. You have that
template or you can explore other free templates
which you can find online. But now you actually
have a grasp as to what a user persona actually is and why these templates
are useful for.
36. SECTION 5 Competitive Analysis: Competitive analysis is
extremely important part of the design process
because you want to see who are you competing? Width. You want to see
who is your competition. You want to see what
they're doing good, what they're doing bad so
that you can avoid that upfront before you even get started with your
design process. You want to analyze
different details of their product or their pages
of their mobile app screens. You want to understand
which sort of language they're using
on their website or app. And you want to understand
a little bit better as to what you can take and what
you can learn from them. So not to make the
same mistakes. So let's get started.
37. What is a competitive analysis: Competitive analysis is
the necessary part of design process
because it helps you analyze and understand
your competition, see what they are doing
and how your product or your business takes stacks
up against that competition. It's really valuable to
do a competitor analysis, especially at the beginning
of the design process, because you can clearly
understand what are your goals, what are your targets, and what is your
competition doing, which is same or different than what you are
planning of doing. You can do a competitor
analysis regardless of your client's website or do they have a
website or not. But it's always
recommended to start at the very beginning of
the design process with the competitor analysis so that you can understand what are your main goals and what are your main targets on
this particular project? By doing competitive analysis, you can understand
the strengths and weaknesses of your
competition and you can understand where
should you aim as a designer and which
problems should you solve? You can also understand
if there is a gap in the market and can your product
or service fill that gap? By doing this
competitive analysis, you can understand advantages and disadvantages
of your product. Perhaps your offer is
not compelling enough. Your competitors are
offering something which is more compelling at
a better price, e.g. and the key thing for us
designers is to understand, do you actually need
to apply any kind of design changes to this
particular design just for the sake of it? Or does your competition
actually requires it of you to apply
those changes? What I mean by that is, don't just design for
the sake of design. Design for the sake
of being better than your competition at
a particular task or at a particular goal. Finally, a competitive
analysis helps you solve usability issues because you can compare your competitors, see what they are doing. See is your product
usable enough for your users in various
different screen sizes, e.g. desktop, tablet, or mobile. Does your product scale
well on all of these sizes, does it display well, does it pass required
to test e.g. for optimization? Do the images load fast
if you have animations, how fast does
animations are running? You can do all of
these things at the very beginning of
your design process, just to understand
how your product or design stacks up against
your competition. In the next video, we're
going to talk about different types of
competitor analysis. So I'll see you there.
38. Types of competitive analysis: There are two main types
of competitive analysis. And depending where you are in your design process and where is your client in their business. You're going to do
one or the other. You're either going to do a complete analysis where
you're going to take few of the main competitors and
few of the side competitors and simply compare
their entire solutions. Now these can be
either websites or mobile apps or digital
design products, e.g. and you are going to compare every single aspect of
all of those competitors. And then you're going to come up with a solution depending of what are the goals of
your particular project, you can also do a
future analysis. And what this means is e.g. you can analyse the
menu on our website. You can analyse the search
functionality of a website. You can analyse the
scrolling thing on the app. And you can basically do a
feature which is required of your design process and
analyze that feature across your competition
and see how they stack up. At the beginning,
you have to outline your goals and
define your product. You have to be specific
about what are the goals for your particular product or for your particular service. And you have to define
it and understand what is your target audience and who are you trying to compete? Next, you have to
compile the list of direct and
indirect competitors. Direct competitors are the
competitors who are in the same exact niche that
you are or your client is, or indirect competitors are dissimilar niche to your niche, then you have to
compile the list of them and understand e.g. for the complete analysis, every single thing, what they
are doing, as I mentioned. But of course, this doesn't mean that you are
going to analyze, let's say 200 different pages, but rather main pages on their website and on their
core offering pages. Can understand what exactly do they offer and what you
can learn from them. For your particular business, you have to have clear
goal, goals in mind. So e.g. if your goal is to
sell more than you have to approach this analysis
by simply that part. So you have to understand how they are selling their products. So you can pick up a
thing or two about your particular website and
your particular process. This doesn't mean that
you're going to copy them word by word or
section by section. But simply understand
how they do it, why they're doing it, and what can you
learn from them? Because this is the
learning process. This is why it happens at the very beginning of
your design process. One of the key things
right here is to identify the
differentiating factors between the products. What this means is e.g. if your client and
all of your clients competition are
selling cards, e.g. let's say what is different
between all of those cards? Is it the price? Is it the seating layout? Is it the engines? Is the environmental impact. What differentiates
those competitors against your product and how your product can be
different or better in some cases than
your competition. You have to then understand, is that good enough goal? Is that good enough to put on a website as the
main feature, e.g. as the key selling point, you have to understand
all of these things as you approach
competitor analysis. Basically what you are
offering and is it better or at lower cost
than your competition? And how can you package that for user to better understand it and hopefully to
purchase more if that is your key objective. In the next video, I'm
going to show you how to do a complete analysis. And I'm going to show you
just a few steps that you can take and how can you approach
the complete analysis. So I'll see you there.
39. How to do a complete analysis: In this video, I'm going
to show you how to do a complete analysis of your competition and how
can you approach it? Of course, we're not going
to go into too many details, but I just want
you to understand the very essence and
the very basics of it as to how can you approach when doing
this with your clients. So let's get started. So here we have two
websites which are basically selling
the same product, which is the car in
this particular case. And I went ahead and chosen
my two local websites. So if you see a Serbian
here and there, don't pay attention to it. I just tried to
convert it to English. But the whole point here
is to understand how I approached this when
I work with my clients. So I tried to compare two brands with really similar
prices and with very similar offers
because let's say that my client is in the very same price bracket
as these two brands. It's positioned on the same
market as these two brands. And they are offering
basically the same, Let's say pallet of products
as these two brands. So how can we
position our website against this competition
just to see what they are doing and what
we can learn if we do a complete analysis
of their websites. So starting here at the top, we have the menu and we
have the menu again. But here we have a more user-friendly approach because it not just
gives us the icon, but it also gives us the search. So if I click Search, I can quickly search
for a model and then press Okay or go to close, which is really good
user interface. Then we have the logo
right here on the right. While on this website, we just have the menu. When I click to open the menu, we have all of these options, but we don't have the search. And I know for a fact that Qia offers many
different vehicles. They have new vehicles, they have used vehicles. So good search function is
really necessary right here, but as you can see, it
really does not exist. Next up, we have this huge
banner image right here, because this is the new product they are offering
here at Citroen. But here at, here, we just have this massive
hero section slider. And we don't have any
options right here. We cannot do anything. We just have this massive
slider with these two arrows. But if I find myself
from screen just so that you can see when
you scroll down, information is actually here. So when I click right here, you can see that we have
information, we have buttons, they work on hover,
Everything is great, but if you are right here, you basically don't
know what to do. And that's really bad user
experience in my opinion. Then here we have this
new S3 aircrafts, which is this vehicle because
it says it right here. So once again, it's really
clear what they are offering. We have this button with nicer hover effect
in my opinion, then this hover, we just
underlined the texts. So this hover is
much easier to see, much pleasing, much more
pleasing to the eye. And it just works a lot better
than this hover for Qia. If we scroll a bit down, then we have our range. So I can click right here
and this actually slides. So this is one downside
because if I scroll down, yes, I can see there's pagination and I can click on it and
this information goes. But if I click on this slide, there is no button right here. So that's one big
downside of this because this is one of their
most expensive models. And you're going to expect that it's going to
work just fine, but it doesn't
work in this case. Also, there are no
arrows right here. So if I click right here, it's going to take me to this particular page
which I don't want. I just want to
slide between them, but there are no
arrows and key or does that much better in this case? So perhaps combination of both
of these for our product, it would be much better
than combination of these two when you actually
put them together. In my opinion, Then if you
scroll a bit more down, there is a range. So we have passenger vehicles and we can actually
collapse this. And we have commercial
vehicles, which is great. We have business vehicles. And it's going to show me these basically
commercial vehicles but are a bit smaller
for businesses. Let's say that if you
want to buy in bulk, you can with these cars, but let's stick to passenger
vehicles at this case. So here we have just these two. And I know for a fact that
there are a lot more. But how can I access them? Because this is C3, C3b, whereas the C4, where is the s5, whereas the C1, there are no options for me to
click left or right, e.g. while on key a website, if I scroll down, there is no section like this. So if I try to enlarge this
and try to scroll down, you can see that there is no section like that
on Qia websites. So let me actually
stick this right here and let me try to
enlarge it like so, so that we stick to what
I showed you previously. So if I scroll a bit down, this is a big, big
tick box for me, for Citroen in this
case, because. They're showing you their
model straight away. While here we just see these models which
are shown right here. And I know for a fact that this vehicle, which is Electric, is not on sale at the moment in my local
market in Serbia. So why would you put it right
here if I cannot buy it? So if I click right there, it's just going to give me
all of these great reviews. It's going to give me all of these articles about this car, but what's the point
when I cannot buy it? Well, on Citroen website, they're being really
honest in this case. So all of these vehicles that
you see on their website, you can actually go
ahead and buy today, which is the great
thing in my opinion, on this particular website
below that we have advisor. We can learn more
about this advisor. We have selling places, which is once again fantastic because I can know
where my local dealers, where is the service network, what is the operating business
hours and stuff like that? Then we have some sort
of a blog right here, all the latest news we
have the newsletter, and finally we have some photo option and
social media information. Finally, this stays
sticky at all times. So price lists and configure, so I can straightaway go and configure my new
or used vehicle. We have price list, which is fantastic because
I just want to see a price at a glance
That's always create. And finally, we have our
services and our range. And we have this which
takes us back back to top. While if we compare
that with the Kia, if I scroll here, as I said,
find a representative. So there is no option like on Citroen website to
see them straight away. I have to click
on External page. We have the driving test, which basically
means test drive. But Google didn't translate
it to well in this case. So I can book a test
drive, which is great. And I cannot do
that right here on Citroen website
prices and catalogs. But all of these, I have
to click and go outside, which you still have to
do with Citroen as well. At least in their case, you can see those, that information at all times. Finally, we have a footer, which is big footer, not alike in Citron case. So let me move myself again
just so you can see it. So here we have
services and range, while here we have new vehicles, used vehicles for companies, for owners innovation about KIA, we are hiring a little loss
and all of these things. So depending on what you like and which
approach you like, you're going to go
for one or the other. But in my honest opinion, just between these two, I would rather
combine information for our fictional client
in this particular case. So I would use information from Citron website and I would use Qia website design in this case, to approach a bit of a combination of all
of that information, I will definitely put a search right here
on the key website. Definitely. And I would move
this information up, I would shrink this image a bit more like it is
on this website. Because even on bigger pages, even bigger sizes, like
in this particular case, you can see how much of empty space and wasted
space there is right here. I get it while
they're doing this, but in my honest opinion, you don't really
have to do this. You can simply approach
it like Citroen is doing. Simply give your users
the option to go to external pages and learn more about certain products, e.g. but in this particular case, I really would like the combination between
these two websites. In the next video,
I'm going to show you a feature comparison. And how can you approach the
feature comparison using this example which I just showed you for both
of these websites, because it's much easier to
stick to these websites. So I'll see you there.
40. How to do a feature analysis: In this video, we
are going to do a feature analysis
and we're going to use the same two examples which are just show you
in a previous video, but rather than focusing on the entire website and all the pages and responsiveness
and stuff like that. We're just going to focus
on a single feature and see how these two brands are
doing that single feature, which is the car configurator
option on their website. So let's get started. Here we have those two websites which I showed you previously. And as I said in this video, we're going to focus
on a single feature, which is the configuration
of your car. It's really important and in
majority of these cases you want to get the car to
your exact specification. That can either be the
color or the wheels or the interior trim or let's say, I don't know, information
package inside. So perhaps you want to
have that bigger screen. Maybe you want to have the safety warranty to be longer or anything
that you want, that's where the car
configurator comes in handy. Here I am on these
different pages. And in my opinion, Qia does things not just better in this particular
case, but Miles better. What I mean by that
is citrulline is just much simpler option than
Kia to purchase right away. Because if you want to
purchase this sutra and model, it's a C3 in this case, you're just going
to come right here, select your option and get it. It's that simple. While with Qia, it's this entire process which gives it this sort of
more refined look. Once again, both
of them are good. If you buy in bulk, perhaps Citroen is
much better option for you because you can
simply browse through, analyse the price,
compare the price, see with other models which
one works for you better. Understand these
packages and then simply go with your purchase
while with key. Or you can indulge
yourself a bit more into all of these fine details. First things first,
these are the pages, dedicated pages for these
two specific models. So here we can see vehicles, new S3, and here we
can see this tonics. So these are two pages for
those particular models. So first things
first, Citroen page is not all that responsive
because you can see I can scroll through
here and here we have four different steps in
the purchasing process. First step is basically
to determine which model and rich pack of options
you want to choose for. Next one is to book
your test drive. Next one is to leave the information and next
one is the conformation, which is the last
one, I should say, the number four in
this particular case. And they have the option to
compare models right here. They have the
option for filters. So I can use five doors, I can use three doors, which is the gearbox, which is the fuel type
is diesel or petrol, and levels of equipment. And you can basically click on that filter and apply
those different changes. And once again, I translated these websites from my
local market to English. So you guys can better understand
here we have exterior, here we have interior and
here we have targets screen, which if I click right there, just going to enlarge it basically and put
it to full screen. And below that we have
these different angles. So these are
basically PNG images. In this particular case, you're going to
notice that we don't have the option to choose
different colors, e.g. so that's where the step
number two comes in handy. Later. We have the field
pack and you can see that options are changing
when I click right there and we
have the shine pack. Once again, it's
going to change, basically just adding a few
details here and there. Same thing with the interior. You can see how that looks like in the field
back you're going to get the bigger infotainment
screen in the shamed back, you're going to get a bit
more options here and there. Then when you click
on the interior, you have the 360 degrees. But just for the interior, you can click and drag to understand how the
interior looks like, and that's basically it. So really simple. Once again, same like the homepage in the previous video
that we compare it. That's basically it. You have your price straightaway to here. So Citroen is a bit more honest, Let's say it like that. What they are offering you, what they are showing
you then Qia is, but this page is
really super simple. So once again, it's
not too Everybody's taste while if we take a look
at Kias example right here, straightaway, bigger
imagery, nicer design, more options there
trying to sell you this seven year warranty, which Citron does not
mentioned anywhere, which kind of warranty you
actually have right here. Maybe if I click Read more, it's going to give
me these options. But I cannot apply any one of these options
directly to here. While it Qia, you have
this nice imagery. You can click on all of these images and you have
the information right below. You can understand what
all of these things are. So when I click right here, full of content,
passenger compartment. So it gives you the
answer straightaway. Then we have dystonic and we
have the stunning GT lines. So you can clearly
see the difference between the bumpers, do wheels. The combination of
colors right here. And you can launch
360 degree view. You can see how it looks like, but I want to launch it
for the regular model. I can stop it at any point
and I can click and drag and basically compare for myself at any given angle what I like, what I don't like, and maybe this is not
the option for me. Finally, we have the test drive so you can book it
straightaway from here. While you cannot do that
on the Citroen website, you have to go through all of these different steps
and you have the catalog so you can understand the
options for your car. You can understand these are just the colors
they are offering here, but perhaps you want
a custom color. Maybe that is an option in their catalog so you
can click right there. Maybe they're offering
you additional options, additional services, longer
warranty, things like those. So that's why the catalog
is really useful. Finally, we have the colors, so these are the
predetermined combination, and you can see when
I click on them, they're changing in real time, which is fantastic
because you can compare and see
which ones you like, which ones you don't like. And perhaps I can even click right here to simply
choose the colors which are not two tone
because majority of these are two tone
like this one e.g. maybe I'm just more simpler
or conservative wire. Maybe I want to click
right here to understand that and see how it looks like N. Finally,
when you're done, you can launch 360 in that particular color to see how it looks
like from all sides, which I think is fantastic. One downside is when I
launched the view and go to, let's say, this angle and then click to apply
this different color. It's going to bring
it back to here, and it's not all that advanced, let's say, to stick to that particular view and to
this particular color scheme. But it really doesn't matter. You can always launch it
and it's always going to scroll like this and you can do it yourself if you want to. Then below that, we
have characteristics. They're showing us
which options do you get straight out of the box, which options are, let's
say additional options. You have chosen this one
and you can see the color, but it didn't update the color. That's one downside perhaps because I didn't
choose this one. I actually chose this gray one. So why it didn't update here? Perhaps that is an option to
be explored a bit further. You can change your
vehicle right here. So if you don't want this tonic, maybe you want some
other car from here. You can do it right there. Finally, you can book
a desk dry right here. So this is the second step
that Citroen puts right here. They're putting it
all on the same page, which is much easier to
understand at a glance. See what's required of you. I have to put my name, surname, phone number so I can
understand what it is. And here I have the price, which I have for
Citroen right here, but I have the price right here. What I like more
about Citroen is it shows us these different pricing options
straightaway to here. So price is always available to you while with Qia you have
to scroll all the way down. Let's see, this is 15249. Maybe if I choose this
more expensive option, is it going to change that? No, this is just a banner image. So perhaps maybe
they should update that more shopping
options so they have special offers,
use vehicles. So all of this is great, but I'm so how prefer the openness of Citron
website right here. So perhaps for our website, imaginary website, maybe the combination of the two
would work much better. So let's say design, imagery, customization options
and all these things perhaps might work better, e.g. while openness,
transparency, ease of use maybe should work
with Citron example. But It's not up to me to tell anything because we
don't really have goals. In this particular video, I'm just showing you examples. When you do this with
your real clients, you have to understand
their goals and also you have to
understand their budgets. Because developing a solution like Kia in this
particular case, can take a lot longer, can be a lot more expensive
than a solution like this. And depending of how much money can be made for your clients, maybe Citroen option is better
option than Kia option, while I'm saying is perhaps with just this static imagery
like he is doing right here, you can do a lot
better than what Citroen is doing by
default right here. So just pay attention
to details like those. See what they're offering and write down all of these options, all these solutions, what
each of them is offering, write it down to
understand and to compare. Go through a lot of your different competitors
just to understand what they are doing better or worse than you and what you can
learn from them. In the next video, we're
going to talk about tools. Which tools can you use? So I'll see you there.
41. Which tools to use: In this video,
we're going to talk about tools you can use for competitive analysis
and which tools are better than the other? And finally, at the
end of the day, which tools are better for you? So let's get started. So here we have the image, and these are the images
which I took online. And I just wanted to
actually show you that it doesn't really matter
which tools you are using. What matters is that
they do a job for you, because if you're using e.g. Adobe XD in your
work all the time. It doesn't make sense
that you switch to other tools because Adobe XD
can do the job just as well, if not better than all
of these other tools. Same story goes if
you're using Photoshop, if you're using Word, if you're using Google products, it doesn't really matter. What matters is that
you are able to do the comparison for all of
these different products. So you can see in
this particular case, they are using Adobe Illustrator to do competitive analysis. If we switch to other case, they're using Google
Sheets. In this case. Here they're using
Google slides for a bit better representation. Here there are
using whiteboards, so you can even do that. You can do with sticky papers, you can do it with white board, you can do it with
white pieces of paper. You can print, as you can see that they've
done right here. You can print all of these website pages and you can understand what they are doing, but you can also take screenshots and bringing
them to Adobe XD. And you can do all
of this in Adobe XD. If you're using XD, it doesn't really
make sense for you to go and get an
expensive whiteboard, expensive markers to print
all of these papers, to get a printer if
you don't have it, when all of that can
be done in Adobe XD or in the tool that you are
already using for your work. Finally, here we have the
tool called extensor, and you can do most of the things which
are just mentioned, but sometimes even a bit
more because they are doing all of these templates
which you can create yourself at
the end of the day, when you start working
with these clients, you can repeat these templates in any kind of tool
that you're using. But e.g. in this case, you can simply plunk the
links to your competitors. You can put the
information right here. They're giving you these
templates as I mentioned. So it's a bit easier
to do in a tool like this when you are
on that short timeline, but it doesn't have to be. You can do it in any kind of tool or software
which you are using. So as I mentioned, it doesn't really matter
what you are using as long as you're
using it correctly, as long as you're
using it, right? And as long as it does the job. In the next video,
we're going to talk about the things
to look out for, common mistakes and pitfalls. So I'll see you there.
42. Things to look out for: In this video, we're
going to talk about things to look out
for when you're doing your competitor
analysis and some of the best practices as to how can you approach this competitor analysis
when you are doing it? And the first thing is, don't just do things
for the sake of design. Think about the goals. Think about what your
client actually offers. What is their core offering? And do they try to be different
than the competition, or do they try to beat the competition in
terms of prices? Do they try to beat
the competition in terms of the volume of sales? What is the goal right here, and what is the problem that you actually trying to solve? So don't spend months of your design process
trying to put beautiful images
like I show you in one of the previous videos
with the car examples. Don't just do that for
the sake of doing that. Do that if that's necessary. If that is the key goal
and if that is trying to solve the main problem that your client actually faces, next step is don't do the things just for the
sake of doing things. What I mean by this is if
you want to be different, try to be different with what you are offering and how are you packaging it just to
differentiate yourself from your competition and
present your offer in a much better
and compelling way. Rather than trying to redefine
search in how the search looks like or positioning
the Menu icon instead of, let's say the right-hand
side to the left-hand side, just in terms to be different. Don't try to do that. Don't try to reinvent the hot
water because you're just spending valuable time on the
things that don't matter. And under things which
are not going to yield value to your client
and to their customers. Try to follow some
examples and some rules which are already set by the industry in which
your client is in, especially if they are
in a particular niche, try to understand what Nietzsche's doing and
why they're doing it. And try to do it yourself, just in your way. Once again, don't try to copy
what they are doing because it's not going to work for
your offer and your product. Try to be different, but try to be compelling
in what you are doing. Key takeaway here is do
the things with a purpose. Don't try to do things just
for the sake of doing things. Do things with a purpose
which is going to make a change to your clients
and to your clients. Clients at the end of the day.
43. SECTION 5 ASSIGNMENT: Your assignment for
this section is just to pick two
different brands. These can be whatever
brands you want, annualized and just use what I showed you in
this, in these lessons. You can use your screen. You can divide it by two. You can put these two
websites side-by-side, and you could just analyse them, go straight from the top all
the way down to the bottom. Start from the header section, starts from the hero section, start from the topography, start from the copy. They're using stuff from images, how they're positioning that. Is there a story
behind this design? What they're trying to say, try to analyze all of these
details that we talked about in this section and
try to write it down. You can use Word, you can
use Microsoft Office, you can use Google Docs,
whatever you want. You can even use piece of paper. Just practice, just understand what you are looking
at on the screen. Don't just focus too
much on the positioning of the elements and all
of that visual stuff, makes sure to focus on more important stuff
such as the structure, such as what they're
actually talking about on these pages and such as
what the actual copy looks like because the
copy alongside with the images is what actually
talks to the users.
44. SECTION 6 User Flows: User Flows show you how your users are moving
through your pages, how they're moving
through your website or your mobile app. And with user flows, you're just trying to
understand what is the shortest possible
route for your users to take in order to
accomplish a goal, you can also branch
them out and create sort of a task flow for each different task you
want to use is to take, you're going to create
different task flows based on your overall user flow. So let's get started
with this section.
45. What are user flows: User Flows, all flowcharts as they're sometimes
called our paths, your users stake when
using a product, they display a complete part your user takes from
the entry point, right, all the way to the end point when they
finish their journey. There are many different
parts your users can take depending of how they got
to your product, e.g. if our website or landing
page or something like that, maybe they got to
that landing page when they clicked
inside the link in your e-mail or if it is Shoppe page may be a product
page or something like that, maybe dig into it by visiting our campaign you had on Facebook or Instagram
or something like that. Maybe they clicked
on a link inside of a YouTube video and
gut to that shop page. Or if it is an app, maybe they install
that app using a link or direct
download from a store. And then when they installed
in that app or maybe they open it up and got
to the splash screen. So user flows have
a simple job of directing all of those paths
in such a way that it's logical for your
users and super easy to understand and
to optimize them in such a way that they have as few clicks as possible
to achieve those goals, depending of who your client is and what your product
is trying to do. Those goals can be to
either purchase a product, to book a service, to download, a freebie, to sign up for an email
newsletter and so much more. So your goal as a
designer by using these user flows is to create
these optimal flows and optimal paths that your
users can take to do those tasks in such a
way that it's simple as possible for them to
understand and as quickly as possible for them to solve
and to get to their end goal. Your clients goal is to
increase conversion, e.g. so by using these user flows, you are going to get
a step closer to that improved conversion by reducing the number
of clicks e.g. that your users have to take in order to achieve those goals. By using user flows, you are going to determine
the total amount of screens or pages you are going to need in this stage
of the project. And that in turn is
going to save you a lot of time later
when you actually get to the design stages of your project because
it's going to improve your understanding
of this project overall. And therefore, it's
going to speed you up even more in this
stage of the project, you can even let developers
know what's going on. And you can even show them these flowcharts
and we're going to talk about that in the
latest stages of this class. But that's the whole
point of this process, is to understand this
project are lots better than to just start with the design because that's
a really wrong approach. Because you really need
to start with these user flows in order to understand
how many screens, how many pages you are going
to need later on when you get to that design
part of your project. In the next video, we're
going to discuss what are some different
types of these user flows and how they are used. So I'll see you there.
46. Different user flow types: There are many
different types of user flows depending on what you're trying to solve in your project and what you're
trying to accomplish. But basically there are three main types which
are used overall. And then from those
three main types, there are many different
types that you are going to encounter during
your design career. And those are task flows, wire flows, and user flows. Desk flows are what the name suggests and they are
showing how the user interacts with a certain
task by clicking on the same entry
point in getting to the same entry point
and the same end point, all of your users are going
to do the same journey. Therefore, this journey is going to show one simple task, e.g. signing up for our e-mail
newsletter or purchasing the product or booking a service with you or
something like that. All of those users have to
complete that same task. That task has many
different steps in between depending of how
complex the task is. And therefore, these task
flows are used for debt. They're not used for other
complex things, e.g. different entry points,
different exit points. But the whole point
of task flows is to focus on a single
task and to optimize that user part in
such a way that they have the list steps as possible
to complete that task. Then we have wire flows. And these workflows are
actually combination of these task flows
and basic wireframes. And that's why they
are called wire flows. And the whole point
of them is to show different user
journeys throughout your product and different entry points in
different exit points. However, they are not
too many details inside. They're just there
to show all of these different parts
that your users can take. So the whole point here is
not to get too detailed, but to show to your clients, to your teammates, enter
developers as well. Many different parts that
your users can take. But to use at least some details to show how those screens
or pages can look like. And then to use arrows, e.g. just to show what are some different parts that
your users can take. And then finally, we have
user flows themselves. They are actually combination
of task flows and flows. And user flows actually show all of the different flows
that your users can take, all of the different
paths that they can take. And they're actually combination of task flows and via flows. What I mean by that is they are combination of
these two elements. And I'm going to
show you that in later stages of this class. And basically they're
showing everything. They're showing every
single entry point, they're showing every
single exit point. They're showing all of the multiple parts that
your users can take, right and wrong paths. They are showing alternative paths and all of those things. So they're as
detailed as possible. So depending on what
you actually need on this project and
depending on where you are in the design
stages of this project, you are going to use
one or the other. Sometimes the user flows
are actually your best bet because depending of how
your project is going, depending on how the
feedback is going, how the research is going. There are much
simpler to change, they're much simpler to edit. Then if you're
just starting with task flows and there they are, adding wire flows later and then using user
flows at the end. So perhaps User Flows is
the best way to do so. And when do we actually
use this user flows? We're going to discuss
that in the next video. So I'll see you there.
47. When are they used: User flows are used early
on in a project right after all of the research and user personas have
been completed. As I said previously, there are used to determine the amount of screens
that you are going to need and the logical order of those screens
or on those pages, and how your users
are actually going to interact and move through all
of these different pages. And then you can
discuss that order and all of those flows
with your clients and with your developers or
teammates to achieve the best possible result in the best possible
optimization. Before you actually move on to the design stages
of this project, they are used to create intuitive and
enjoyable interface so our users find our
product or joy to use, and they're also used in order to increase conversion rate, as I mentioned before, because by using
these user flows, you are going to determine early on in this design process, when your users are going
to click or buy or purchase certain thing inside of this process rather than
later in the design process, which in turn is going to make the design process
a lot easier to do, lot easier to create. Because you determine all of these things in your user flows. You can use them to
create new products, or you can use them with
existing products to refine the paths that your users can take inside of that product, and to increase the
optimization or conversion or whatever the
goal of this project is. So as I said, they
can be created for new or existing products. And they are really useful when you're creating
components which later you're going to use
in your design stages of this design project because some components are majorly used, like navigation footers. And inside of this
stage of your project, you can quite easily
determine what's going to be located in that
navigation or footer. You can also use them to create something called
hero images, e.g. or a sliders are different
components like dose. And then later on you can easily scale or rescale
those components, whether if you need them or not later down the
line in your project. Finally, there are
really great way to show to your teammates, clients, and developers your
ideas about this project. All of these different parts
that your users can take. Because validation in this
part of the project is really important because as I mentioned
multiple times already, it's going to speed up
your design part of this project are lot more because in this part
with these user flows, you are going to determine all of these important details. And then later on, design is just going to be much more easy and much more
enjoyable process to do. Because it's just the creativity
exploration rather than dealing with all of these complex tasks that
users have to solve. Now speaking of user
flows in the next video, we are actually going to create user flows using Adobe XD. So I'll see you there.
48. Creating user flows in Adobe Xd: There are many
different routes that your user flows can take. There are many different
shapes that you can use. But there are some
basic shapes that every designer or there
should understand. They are basically
the standard in the industry for decades now. And they're really quite
important to know, especially if you're
working with remote teams. If you'll join an agency
later down the line, or if you're already working
in an agency and tried to establish us certain language that everybody can understand. So in this video, I'm going
to show you a template. You are going to be able to
download this template and to explore it more and then to
build upon this template. And later on in the class, I'm going to show you some
more complex templates which you can actually
get if you want to and then expand upon these basic templates and
simply built upon them. So here is that template. It's called task flow elements. And if you want to
get this template, simply download it from the class files and then you
can open it up in Adobe XD. So what we have right here
are all of the elements, all of the components. So we have entry,
action, process, decision arrow and
negative arrow, and these are your colors. So entry point
collar, white collar, which is basically the color of the text everywhere,
and steps color. If you want to
change these colors to your client's brand e.g. you can simply right-click. You can copy this or
you can edit and then simply change this
color however you want. As you can see, they are
going to update in real time. You can paste your hex code
right here if you want to. And then it's going to update to that hex color that
you've chosen. So let me go back a little bit. So as I said, this is the really basic
bare-bones template and then you can build
upon this template. So if we zoom in
a little bit too, all of these different elements, I'm going to show
you what all of them are and what all of them do. So first of all, we have entry, and this is the entry circle, or the entry point is
usually shown as a circle, but you can show it in many
different ways that you want. None of this is
actually standardize. This is just designers
in the industry using all of these elements
and templates for decades. And then simply come up with all of these
different solutions. So we have entry point and that can also be the exit point. So entry point, if
you remember from the previous few
videos I mentioned, can be e.g. a. Landing page of your website or login screen of your
app or whatever else. The entry point where users
actually entry your design, your product, your mobile app, your website, whatever it is. Then after that, we have action. So users can click,
users can browse, users can assert, users can type all of those different
things are actions. Actions can also be if you click the next button inside
of your app, e.g. to go between different screens. Or if you click a
certain icon, e.g. Arrow to go left and right, or if you swipe to use the pagination action
circle is just there. And I'm going to show you
that in just a second with this really basic
template which I found online and then I just recreated it using
these elements. So all of these elements I
have created for you guys and you can simply download and use this template.
As I mentioned. Next, we have processed. So what happens after we
completed this certain action? So did we went to
a specific page? Did we go from e.g. small image to full width image? Did we go to the next slide? Did we purchase the product? Did you go to the checkout page? All of those things really
matter inside of the process. So you have to write
that down in order for you to understand
as a designer, or if you're working with a teammates or with
developers or with clients, you have to show
them this process. Next up we have
this diamond shape, which is the decision. So basically that
means if the user have committed to saying yes or no to a certain process
or a certain action. What I mean by that is when you get to our checkout page, e.g. and you want to
purchase a product? This can be yes or no decision. Yes, I want to
purchase the product. And then you go to
the checkout page, you go to the payment
page and so on or if no, if I click No, Where
does it take me? That's why this diamond
is really important and it's usually referred
to as decision diamond. I'm going to show you how I edit all of these elements
to in just a second. But next up we have arrows. Now, these filled-in arrows, as you can see, we
have two types. So these filled-in arrows
are basically step arrows. So they move users from
one step to the other. And then these arrows are basically what I
labeled them here. Negative arrows in
is when user say, says no, or when user cannot complete
a certain task, e.g. if the search but
cannot find anything, then there's no arrow
appears and it takes them to a next step or to the previous step or
something like that. So basically that's why
these arrows are used. Now if I unzoom
just a little bit, you can see this flow. And basically, I
took inspiration online and unjust recreated
it using these elements. Because user enters here, they are greeted with a welcome page or a
welcome screen, e.g. then from that, they
can select a task. The task is selected, and then they can move forward. If it is correct, then they can move forward
to the details page. If it's not correct than this. If they click no, e.g. it's going to take them
back to the select tasks. So this node can be concrete
button when they click no, or they can be, that
can be an X, e.g. if they want to
close the pop-up or however you structure
your layout, basically, the
point is the same. They can either go forward, So yes, or they
can go backwards. So no, that's why
these are used. So then we go to this
details page e.g. and from details page I
can click the search, let's say to go to
find something. And then when I
commit to search, I can search items. If I didn't find any items, it is going to show
no items found. So in this case, I imagined it to be an X icon, so e.g. no item found. And then you can close
to complete a search. Once again, To item is found, goal is completed in this particular case because that's the goal of this item. And then you can click Order. And this is your exit
point, so ordered. Or if I don't want to order, maybe I can click no or cancel
or something like that. And it's going to take me
back to this details page. So you can just see from this really quick
and easy example how useful these flowcharts are. This is basically a task
flow which I mentioned previously because it's
just showing a single task. In the next video,
we're going to discuss some more
advanced templates and some more advanced
steps that you can take when you're
creating these flows. But basically, this is just a really basic
bare-bones template. Once again, you can download it, use it in Adobe XD
and explore it. And I really encourage you
to build upon this template, to add more pages, to add more screens and so on. And one thing which I
didn't show you is e.g. on this task right here, I want to zoom in and let's
say instead of select task, I want to do something else. You can see it's
opening sentence, so it's free Google font. You can download it on Google
fonts and Adobe fonts, whatever you're using,
completely free. So what I did right here
is I included the padding. What I mean by that is
if I click right there, you can see that the padding is enabled on this component. So if I double-click right here, I can type something, e.g. make this more visible and you can see how
the box expands. So basically in this case, I, if I go back, I used 20, as you
can see right here, spacing between all
of my elements. But you can use ten,
you can use five. You can even overlap
these arrows. So if I position it right here, you can see how nicely it
overlaps with this step. So you can really do
whatever you want. Also, when you are
dragging these components, simply drag it right here. I want to change it,
double-click inside e.g. entry point or
whatever like that, or exit point, whatever. You can position it here, you can make it to be in a center by selecting
these two elements, position it like this. Or you can simply delete it. You can do that for all of these other elements
which are showed you. And finally, for these arrows, because these ones
are quite simple, you can double-click inside. You can hold your
Shift key position this arrow right here. And then you can click in
position to shape right here. If you want to make this
arrow shorter, e.g. if you don't want it to be
this long for whatever reason. And also for these arrows, if I go to my Layers panel and
open them up, you can see, so negative arrow,
we have the label, which is this node
label inside which you can also change
if you want to, e.g. negative or no option, or this isn't an option or
whatever you want to write. And then we have left, right arrows and we have this
arrow line in the middle. So what can you
actually do with these? You can click on the
left arrow, e.g. hold the Shift key
and move it closer. You can do the same
with this one, or if you want to, you can even move
them further apart. So let's say like this. And then you can
click on this center and simply extended like so. If you don't want
it to be like this, then you can simply click
on the arrow and you can adjust this so you can see that we have the border color,
which is this color. And then we have
the stroke width, we have the dash width. So basically the width between all of these
different dashes, you can adjust
whatever you want to achieve a certain style
that you are after. And basically this, the whole
point of this template to help you out in this
exploration process. So as I mentioned
in the next video, we're going to discuss a little bit more
complex templates. I'm going to show you where
you can get those templates, which are actually mine, and then what you can
actually do with them. So I'll see you there.
49. Working with flowcharts in Adobe Xd: In this video, I'm going to show some more complex templates. These templates took
months to create. These templates
are actually some which me and my team
created in the past. And you can get these templates, links that are going
to be in the PDF with discounts because these
are premium templates. And I'm going to show you
how all of them are created, how of them look
like in Adobe XD? You can get them if you want to. If not, you can create
your own however you like. So here is my website
called Web donut.net. Once again, link is going
to be in a PDF and this is the first template which are
going to see called flowy. And you can see you
have 108 screens, 128 elements, and two
different papers. So you can use these papers
if you want to align your flowchart and
then print it out later to show it
to your teammates. Clients are developers. So if it's plural,
just a little bit, you can see how some of these elements look
like and we're going to explore them in just a
second inside of Adobe XD. But basically, that's
the gist of it. There are many different
of these elements and these papers and we
have waterflow flowcharts, and these are a lot bigger. So we have 400
components in total. So 200 screens, 200 elements
and two papers once again, and this time we have
light and dark version, so can even explore that. And you can see they are
adaptive what's included. So you have three
different file types, Photoshop, Sketch and XD. While in this one We have
Photoshop and sketch files. But because XD is
created by Adobe, you can simply open
up a Photoshop file. It's going to work
perfectly well inside of XD because it's
integrated to do so, pixel-perfect components, free Google Fonts or use
wherever you find fonts. And if you purchase, these are actually video
tutorials for both of them included inside and
organized layer structure. You're going to see
that in just a second. These are the
papers for printing both US and A4 size
if you want to, unlimited variations and you can see how some of these
elements look like. Now, if I minimize this
and go back to XD, This is the tax for
our radio show. You, you can see
how basic it is, but if I show you e.g. flowy, you can see
how it looks like. So I actually
combine these three. So let me actually move
this a little bit closer. So these are web elements, these are mobile elements, and these are all the
additional elements. So if you purchase these, they are going to
come in three files, but you can combine
them in one file in XD, as you can see right here, you can simply double-click
to change this. So these are mobile
elements, e.g. and what can you actually
do with these elements? So you can quite easily come right here to your art board and create an art board which
is 1920 by 1080 e.g. and let's say that I want to
start with a login screen. I can copy it, I can
paste it right here. And let's actually change
this to this color. So let me actually, let me actually grab a nice light gray color just so you can see a little
bit better what I'm doing. And then I can start with
this arrow e.g. right here. So copy it, paste
it in right here. And perhaps I can
position it right here. So when my users
click on this button, where is it going to take them? Because this is a
login screen perhaps, as you can see, we have
different categories right here. Maybe we're going to
jump into e-commerce and perhaps I'm going to
go to this, then this. And then let's see, maybe this screen
as well, like that. Control C jumping right here, control V to paste them all in. And I'm going to do this. So e.g. they're going to come
to this screen right here. And then I'm going to
duplicate my arrow Control C Control or Control
D, whatever you want. And then e.g. if
they click that, position it on top. If you click on
this product, e.g. or right here, and we have
different arrows right here. So if I actually
deleted this one, I can use this arrow e.g. so you can see why these
templates are important, because you can actually work a lot faster when you
are doing this. So if I Control X, Control V, position
it right here. When the click right here, let's say that that's a button. And you can do the same thing
which I showed previously. So you can extend
these if you want to. And let me actually
extended to right here. I can actually jump
to this screen. So you can see that this is
not in line with all of these previous task flows
because this is a much more complex user flows because as you can see,
we have two buttons. They can click Cancel, e.g. and we can actually
duplicate this arrow. I can actually flip
it around e.g. just to show you what
that could look like. So perhaps I can
position it right here. Maybe I can nudge these
two upwards a little bit. I can position
this down to here. Maybe they can
click right there. And then this arrow
is actually going to take them to this
first screen, e.g. you can even flip it around and then you can
position these elements. I'm going to show you
that in just a second. So Control D on this one. And you can position
it right around here. Then you can extend this. And perhaps this might
look a little bit boring, but it's really important to
understand this user flow. And from here on e.g. if they actually do click
on this blue button, where does it take them? And let's actually
take this just to make it a little bit simpler to
navigate their way around. So I'm going to
move this to here, maybe like this, and then position this
a little bit inward. I'm going to delete this one. You can see how quickly
this is to actually create. Then when they click
on that blue button, maybe they can come
to this screen. And from then on, let me actually position this arrow all the
way to the top, right here, position it here. And then I can actually click
right here and move this like this and reorganize
this just a little bit. Perhaps this is our confirmation
screen or whatever, we can call it like that. And then when they
click this blue button, they can actually go
to the purchasing page and they can actually
complete this step. Now, what we can do with
this one is we can actually combine them with the original task flows
which I showed you. E.g. I. Can use
this entry circle. And then just excuse me, because I have a
lot of these open. I can position it right
here and I can move it. You can see it's
linked because it's actually instance from
our different components. So I can right-click right
here and I can make it local. And then what I can do
is actually jumping select both of these like so and hit Shift control and
reduce it a little bit. I can also reduce my texts. So maybe ten,
something like that. Then we can use it like an
entry point right here. But you can also
do is use these. So e.g. this is our home, maybe that's our entry
point control C. And then I can, instead
of this entry circle, I can make it look a little bit interesting by
positioning these. So I can position this to
be my entry circle N e.g. I. Can use this color if I want. I can change this icon. If I want. I can even change the
color of the icon. Simply click right there, you can do whatever
you want with these. Also, what you can
see right here are all of these
different mockups, which are basically
they're just as shapes. And then you can use these
mockups to show e.g. this is a view of a mobile app. And I can use this
simple mockup. Maybe position it
right here on the top, maybe write some
texts right here. Move all of these elements
down a little bit, like so maybe and then
write right here. This is a look of how the mobile version is
going to look like on e.g. Android or iOS or
whatever you want. Or I can use all of
these other ones. So browser, laptop version,
desktop version, whatever. Then if the step is completed, we can use this one, e.g. so let's position it right here. And I can actually
position it in the center of my arrow like this. And then I can actually
use my main color, e.g. to say that the
step is completed, or I can position
that right here, right around there,
enlarge it if I want to. I can even include
a border to it. Whatever I can use a drop shadow on it
on this background. Like so I can position in there. So whatever your style for
this particular user flow is, then you can implement that
style using these templates. And you can see in just
a matter of minutes, if you're not talking as I am, you can obviously create this in a lot shorter period of time. So this was flowy. If we're jumping right here, just to quickly show you web elements of
airflow flowchart. And you can see how
many different elements we have right here. And you can obviously create components from these elements. You can change their colors. So e.g. I. Want to change the
color of this header. I can position it right here. Or if I want to change the color of my
background completely, I can change it like this. And obviously if you have
colors like I already show you in this default
template like this. So if you have
created your colors, you can simply apply that
color to that element. You're going to work
much faster that way. But if you don't,
it's just fine. You can jump in right here and change the colors even of this. So e.g. this can be
bright red or whatever. And then this can
be the same color. So I can select it like this and you can see how
that looks like. So obviously there are lots of options included here and all of these elements
are the same. You can see we have
many different arrows included inside. From one entry point
to many exit points. You can do whatever you want. You can use danger, you
can use the refresh. And I really encourage you
to use your own icons. You can use these
left and right icons for the steps if you want to. But basically you can
see how these look like. They have much more
details included inside. Rather than these which I showed you previously
for the task flows. So basically, you
have two options. You can use this version
which is extremely light, or you can use this version, which is much more complex. But these are not final layout. These are just to
convey your ideas much better to your teammates, your clients, your developers. And the benefit of
this is because you have multiple entry and exit
points, multiple flows. So e.g. if I go to the one
we created using flowy, so like this, I can create, as I mentioned right here. So we have these
two arrows, e.g. we have a close button
right here, e.g. where does that close
button takes us it takes us back to the login
screen or to this screen. So you can just imagine you can create these multiple flows, complex flows and same like a template I'm
giving you for free. You can jump in right here. And you can simply adjust all of these elements and
make them smaller. If you want to apply a different color,
you can do that too. So you can use whatever
color you want on these. And of course, because
there are many, many, many of these different elements divided in categories
of promo testimonials, team, blog,
e-commerce, and so on. For both mobile and
desktop version, your workflow is going
to be much faster and your delivery time is
going to be much faster. And once again, the
benefit of using this is your clients
are going to understand you're much better
than if you're just simply using
something like this. This is a fantastic
starting point. But if things need to be a
little bit more complex, e.g. like I show you right here. So you have to create
multiple flows, obviously like in every
single app right here, then I really recommend using
a premium template like this because it's really going to improve your
workflow dramatically. And it's really going to
allow you to work much faster and to show your
ideas to your teammates. Clients are developers
which they are going to understand because
especially with clients, showing them something
like this is not going to make them really
easy to understand, but showing them
something like this, e.g. it's going to make them
understand it much better because they're going to recognize at least some
of these elements, rather than just showing
them these blank shapes like circles and squares and
diamonds and stuff like that. So that was a really quick look into these premium templates. Once again, if you want to get them with a very big discount, links are going
to be in the PDF. You can simply click
those links and simply entered that
discount code which I'm going to provide you and then get them and
use them in XD, you can see how
something like this can improve your
workflow dramatically. You're still going to get that basic task flow
for free, of course. And you can download
it and use it. But if you want to up your game, if you want to show your ideas the best way possible to
your clients, teammates, and developers, then using these premium
templates are going to improve that workflow massively. As you saw, you can
change anything, you can adjust them
however you want. You can work as fast or
as slow as you want. You can use all kinds
of different colors, all kinds of different shapes and icons and stuff like that. So if you want to use something
like this, once again, I'm going to give
you the links and discounts in a PDF and
you can check them out. In the next video,
we're going to talk about how can you share something like this with your teammates, clients,
and developers. So I'll see you there.
50. Sharing your flows: Sharing your user flows is
really important part of the whole process
because it's going to really allow your clients, teammates, and
developers to understand your thought process
behind all of this. And it's really going to make the discussion much
simpler than to simply do this and then simply tell them in words
or something like that. So in this video, I'm going to show you a few
practical ways that you can use in order to show this to
your clients and developers. So first one is an, I created this for my premium templates
which are showed you. So both for a flowy which
you are seeing right here, and for airflow flowcharts. And you can open them up
if you purchase these, which I mentioned in
the previous video. These are these papers. So this is A4 size, this is US letter size. And you can simply
open these up as you work and align all of
your elements right here, and then simply print
out all of these. You can select this. You can hit Control or
Command E inside of XD, and then you can
select PDF right here. Then you can hit Export
and it's going to export this print ready PDF. You can print it
out and then you can show it to your clients. Or if your clients
are working remotely and you're not within their
reach or something like that, then you can simply share these PDFs with your
clients and then they can print these
PDFs out and then leave notes onto those PDFs. Or even better, you can
simply align them right here, and then you can click right
here in order to share this with your
developers or clients. How that works is you can
simply click right here. And it's going to generate
this public link. And then you can give it
a name right here, e.g. let's say Webflow element or wire flow for a website
or something like that. And then you can
show it right here. This is the link name, and then you can simply
copy this link and then you can share it
with your clients. They can then in-browser leave
your comments right here, and then you can simply change
how this User Flow looks like within your XD and then come back right here
inside of the Share tab. And then simply update
that link and then come back and share that link
once again with your client. Client name, project
name, deadline, number of website
pages and number of app screens is what's
really important and what's really going
to determine how much you're actually going to charge at the end of this project, or how long the project
is going to take. Because usually, especially
freelance designers are charging by
the whole project. So they know e.g. from conversation
with the client, if the client has existing project or something like that, they already know how
much they're going to charge by gathering all
of those information. But if not, you can
simply work in stages. So you can charge for this exploration and user
testing, user research phase. And then after you
completed this, you're going to know by simply
using these user flows, how many screens you are
going to design later, how many website pages
you're going to design. And from that number, you can then make an
educated guess and charge that amount of
money to your clients. So that's why sharing is really important in this
phase of the project. Because you're going to easily
know by using these user flows how much money
you are actually going to charge to your clients. Now, this is one of the methods and then you can
follow this template, especially if you
purchase these or if not, you can simply use
something like this. So let's say that
you created this. You can give it a
name right here, so double-click can call
it whatever you want. So e.g. mobile flow, of course, this is going to be much cleaner when you actually
are creating it. You can hit Control
or Command E. And then instead of PDF, you can select JPEG or PNG. You can hit Export
and then you can send it to a client that way. Also, what you can do is you
can connect these pages. So let's say that this
is port number one, this is our port number two. You can go to prototype mode, connect them, and then you can simply share that prototype, as I mentioned right here, and then copy that link and
share it with your client. Now, advantage of using
something like this inside of Adobe XD directly is because
you're not wasting paper. You're not wasting your time. You're not wasting their time. You can simply share one link. They can access that link, comment on that link, come back to you
with their changes. You can change it inside
of XD, update the link, send it over again, and then they can leave the new feedback until
everybody is satisfied. And then after that,
you're going to start the design process with clear instructions
from your clients, with clear understanding
from them and developers as to what has to be done
inside of this project.
51. SECTION 6 ASSIGNMENT: Your assignment for
this section is to use the template which I provided to create your own user flow. You see how easy
it is to create, and you see how easy it
is to understand and why it's actually useful part
of your design process. So try to make it your own. Tried to imagine
imaginary client and what you want your users to achieve on this
particular project. So get to practice, try to work it out your own. You can change the colors, you can change the typography, you can change the order. You can position these
arrows however you want. Just try to make it
your own and try to practice and to learn better.
52. SECTION 7 Paper Wireframes: Provide frames are important
part of the design process because it's much easier to make a mistake on
a piece of paper, scrap it, and throw it out. Then to always start in
your design software, you always have to fire it up, you have to set it up, you have to prepare it for your workflow, all
of these things. So paper wireframes
are there to speed up this process and just whatever
you have any kind of idea, throw it down to
the piece of paper. It doesn't matter if it
works or if it doesn't work. You just want to flush
all of your ideas that you have in your head down
to the piece of paper, pick two or three
of the best ideas, and then move into design
software of choice. This is especially
important if you're working as a part of a team, because everybody
in the team can jump on a single piece
of paper much faster than if you're using
a design tool and you want to collaborate
with your teammates. So let's get started.
53. What are paper wireframes: Paper wireframes are
really important parts of your UX design process
because they are cheap, easy, and simple way to get your ideas from your head
down on a piece of paper. These ideas are just for
you because in this stage, you're just going to explore these possible layouts and layout combinations
you're going to explore. Are you going to e.g. use many images or more texts or many icons
or stuff like that. So it's just going to
explore possible layout. You can also share these
wireframes with your clients, developers, stakeholders
and teammates, of course, to get the input for them and to understand if you are going
in the right direction, wireframes are there just to form these layouts before
you actually progress into software because
it's much faster to design on a piece
of paper and just draw these regular shapes
on a piece of paper just to get
your ideas from your head and just to understand where this project is
possibly going to go. In the next video,
we're going to discuss possible layout combinations and some main elements that you can include in your
paper wireframes. Now, these elements
are just some of the main elements I found or my 15 years in this business works best in paper wireframes. But of course, you can
always go back and include additional elements on top
of these regular elements. So I'll see you there.
54. Which elements to include: There are four main
elements that you can include in your
paper wireframes. And these are images, text, buttons and
forms or fields. Images are there because they really helped to tell a story and to guide your users
to the possible end goal. Now that end goal can be for them to purchase a
product that you are using or to book a service that you're offering or
any other goal. But basically images
are there to help to tell the story much easier because you know that
saying image says 1,000 words and
speaking of words, you have to use text. Now when you're using texts, you are using it in conjunction with your images to better tell the story and to better guide your users through that story. Because combination of
texts and images is really going to impact your design no matter
what you are creating. If it is a website, if it is a mobile app or product based web product
or something like that, it just going to help tell a better story and to guide
your users much better. I'll give you a quick example. E.g. if you're selling a shoe, Let's say good image of that shoe is going to
convert much better because your users are going to understand all the
details about the shoe. Is it a running shoe? Is it just a regular
walking shoe? What color is it? What materials are used
and stuff like that. So all of those elements
are going to be represented much better if
you have high-quality images, then if you have low
quality images and just text field based elements and layout on the
side of that image. So using texts and
images in conjuction is going to bring much
more value to your users. They're going to understand your product or
service much better. But at the end of the goal, they have to do something. And that's where
buttons come in. Buttons are extremely
important because they're usually called CTA
or call to action. And that's just what they are. Users have to perform
certain actions. They have to buy
that product, e.g. the shoe I just mentioned, or they have to book
a service, e.g. you're offering a
freelance service or a design service
or whatever else, they have to book it at
the end of their journey. Journey is supported
with images and texts. And then at the end
there is a button, but they have to fill in some information in
this design of yours. That's where forms
and fields come in. Now, forums or can be
many different layouts, combinations, and they can be used for variety
of different things. But usually they are there to collect user information, e.g. email addresses, credit
card information, user account creation
and stuff like that. So forums and fields are really important parts of
your paper wireframes. Now, there are many
different elements that you can include in your
paper wireframes, e.g. logos, avatars, partner logos. You can include the breadcrumbs, pagination, different arrows, tool tips and stuff like that. But all of these elements, I'm going to come from these
four main categories which I found over the years work the best in the paper
wireframing journey. Now there are many
different styles of paper wireframes out there. And depending of
how much time you have and how big the budget
is for this project, you are going to explore
these possible styles. And in the next
video we're going to explore these styles
and I'm going to show you some of the main styles used
in paper wireframing, but also some of the styles
that you can draw on top of these to improve
the overall look and quality of your
paper wireframes.
55. Wireframe styles: There are many different
wireframe styles out there from just plain
boxes that you can draw on a piece of
paper just to put your ideas from your head
down on that piece of paper, and just to start forming
this possible layout. But once again,
they are depending on how big this project is, how much time you have on it and how big the
client budget is. At the end of the day,
you are going to form different styles and explore different layout combination. So in this video,
I'm going to show these styles and what you can
do with paper wireframes. So if we switch back
to Google and do just a quick Google search for paper wireframes if
you go into images. And of course, there are
many different websites that you can explore for this. But we can just explore google images
because it's the fastest. You can see right here for
the website, for the app, for the mobile Android design envision
prototype, whatever. You can explore, all of these and basically a
layout like this. Let me switch myself to
here so just you can see better this image
layout, like this, is the most common layout
because these boxes represent images that represent
big elements on your paper wireframes. And these scribbles down
below represent the text. Now you can show this text
in many different ways. You can use thicker lines. You can emphasize the
lines with color. And we're going to
talk about that in some of the future
videos in this class. But now this is just a plain, regular style that majority
of designers out there use. You're going to use
this style if you don't have too much
time on this project, if the budget for the client is limited
and stuff like that. But basically this is the
main style debt majority of designers out there I like to use if I showed this style, e.g. you can see this
drawing right here. Now this is the next
style and you can, of course see the text, which is the real
text in this case, which again requires
much more of your time. So just think about all
of those things next time when you're drawing
these paper wireframes. Because if you don't have too
much time on your projects, if the client is not
paying you too much money, then don't invest too much of your time into paper wireframes. Once again, the whole point
of paper wireframes are to explore quick ideas and get them from your head down
on a piece of paper. That's the whole point of paper wireframes at
the end of the day. So don't invest too much time. You can see how messy
these are, e.g. these are just some
scribbles and you can see combination of these
plain elements, e.g. these boxes, these scribbles for the texts but also a
regular texts like email, password and stuff like that. You can see Edit
button right here. You can see this sort of drawing afford a person
for the profile. You can see this
checkmark for the saved. So once again, you can
combine all of these elements depending on the time you
have on this project. But if I close this really quickly and explore
different layouts, you can see this one
which is well organized. And I like to personally
do this style. And you're going to see that in some of the later
videos in this class. I like to leave myself space
on the right hand side or on the paper because that's
where I can draw my ideas. I can draw possible
guidelines from my teammates for the clients
and stuff like that. E.g. if you come
up with an idea, you have that empty space
on your right or left, depending on if you write with your right hand or left hand,
it doesn't really matter. The whole point here is to
leave a space for notes, e.g. you can remind yourself later, What were you
thinking at the time of creation of this
paper wireframe? So next time when
you go back to it, you can remember, okay, That's what I was
thinking at the moment. So having a space like this is really important
and it's really going to help you later down the line has for the
layout once again, you can see the text right here, but you can also see
these plain boxes. But if I click on this one, you can see how detailed it is. So right here we have all of these awesome
illustrations, e.g. so you can explore
layouts like DOS. And here we have markers. We have all of these different
elements that you can use. If I click on this
one, you can see this person is using markers. They are using all
these wireframes. And if I click on this one, you can see that this person, this designer is filling
in the space of these. So e.g. this is the main color of the app
and you can see that she used discolored throughout
the heart buttons. So you can really go for this style if you
want to emphasize the color of your
client's brand logo or something like that. Then if I scroll
a bit more down, you can see this approach, which is approach which is used in offices
around the world. So e.g. designers really
like to use this approach because they can easily
show this to the team. They can present this
to the client or stakeholders because they can draw it on a piece of paper, cut it out with scissors, and then just stick
to the wall, e.g. and just present these
wireframes for their clients to understand the overall flow of the app or the website, e.g. if user clicks on this
book Session button, where is it going to go? So you can use templates of these mobile devices or
website devices, whatever. And then you can simply guide your users through
your paper wireframe. And if I scroll a bit more down, I'm just trying to find e.g. this style, you can see
much more detailed, much different pens are
used in different layouts. Are you, as you can
see, the pop-up menu, which is used right here. So you can use all
of these elements which are going to
help you, your users, teammates understand how
these wireframes are going to turn into a real design later once you get into
your software of choice. My software of choice is
Adobe XD, which is amazing, but it's still like to use paper wireframes
in all my projects because as I keep mentioning in this video
and in this class, it just gives me
the possibility to lay down all of these
quick ideas down on a piece of paper and just to communicate them
with my clients. Once again, you can
see in this example, you can see in this example, you can get detailed with paper wireframes or you can get messy with paper wireframes. So it's really all up to you, the client's budget and the time that you
have on this project. Because as I keep
mentioning in this class, You're not going to
spend too much time with drawing these detailed
illustration, these details icons. If the client is not paying you enough money to do that on
this particular project. So just keep those
things in mind. And as for the style, you can see if you're not really good at drawing
like I'm, I'm not, I'm not really good at drawing, but I'm still using these paper wireframes for
more than a decade now, and I never had a
problem with that. So you can always
use a ruler, e.g. just to keep your
lines straight. Or you can use different
dot papers which are going to mention
later in this class. But the whole point here is get those ideas from your head
on the piece of paper because there isn't a
single software out there which is faster than
your brain and your hand. So just keep those
things in mind. In the next video,
we're going to discuss what you're
going to need from equipment to draw these paper wireframes
because there are some really basic equipment
options out there and there's some really advanced equipment options are there. So I'm just going to
share those with you. And once again, depending on the client budget and how much time you actually
have on this project, you are going to use
one or the other. So I'll see you there.
56. Equipment you need: When it comes to equipment, there are many different
choices out there. You can go from really
standard equipment. And I really do recommend, especially if you're
just getting started, to just start with
standard equipment, especially if you've never
used paper wireframes before. And then move on up the
ladder and then simply purchase all of these
more expensive options as you level up. So in this video, I'm
just going to show you some of the equipment
I am using, a novelist using over the years. And just to show you
what all of it is. So here is all of the equipment
I currently have and I currently own and did I use in all of my different projects. So This right here is just
plain piece of white paper. This is the printing paper
because I'm located in Europe. I'm using A4 piece
of paper if you are in us than its
letter size for you. But basically, I use this A4 paper because
my printer supports it. And if you remember, I just mentioned that when I want to share these
wireframes with my clients, with my teammates
and stuff like that. I really find it easiest
to do so with scanner. So I can simply take
this A4 piece of paper, scan it, and then send it to all of those
people in question. Next up, what we have is
just this plain old pencil. And you can use
this pencil to draw whatever you want on
this piece of paper. And just basic
equipment right there. Next up, I have this pen and you can
use any pen you want, but I really recommend
that you have either black or blue pen. No matter what you are using, you're always going to
need to use some of those. And then I also have this band, which is completely black
but a little bit darker, as you can see right here. So this band really helps me announce some of the details
like drop shadows, e.g. and stuff like that. Or if I just want to fill
it in with color. Next up, I have a ruler and
in majority of my wireframes, I don't use rulers at
all because I found your rulers are just
slowing me down a lot. But if you want, you can always use a ruler
just to help you get started, just to lay out some foundation. Because if you're
drawing with free hand, obviously, your layouts are
going to look like this, e.g. if you remember from the previous example for
the images I showed you. But if you want, you can use ruler just to get to those perfect
lines like this, but you can see how much slower
this is compared to this. So once again, we're
always going to go back to that timeline and
project timeline. So depends really how
much time you have on your project you are going
to use one or the other. Next up we have all
of these markers, so you can use
different markers. And this is just one sort
I got from my local store. So it doesn't really matter
what kind of maker this is. This is a, Let's see,
Firebird pastel. This is Pelican fiber, Christelle, this is some unknown
brand, neon or whatever. So it doesn't really
matter because once again, these markers are there
just to highlight the color that your
client is using. Let's say that we have a button, and let's create a
button right here. And let's say that I want
to highlight this button using this color so you
can see how quick this is. And if you remember
from that example, I show you online, you can simply highlight
this color and simply integrated
into your project. If this is the client color, then once you start gaining, some clients want to start
gaining some momentum. Once you start earning
not a lot of money, but once you start
earning enough money from these projects to
start investing back into herself and
into your equipment. I really recommend
that you get these. Now, these are what's
called dot grid paper. And this paper comes in
many different cultures, many different sizes once
again seem like this paper. But the difference is
all of these dots, these dots are there to
help you not use a ruler. Now, once again, you
can use a ruler. And in the next few videos, you're going to see
once we actually start drawing these wireframes, I am actually going to use the ruler because
the consistency, because of the layout
combinations and stuff like that. Because I'm used to
it at this point. In majority of my cases, I'm not using the roller because those ideas are basically
just for myself. These papers, if you
start using them or require different
sorts of equipment, because if I show, if I take this marker e.g. and start drawing on it, you cannot see this marker
really well because this dot grid paper is much
thicker than this paper. So these markers don't
really work right here. So you need specialized
equipment like these are. Now, these are Jelly Roll pens and this one is from Sakura. This is, I don't know, some other brand, it
doesn't really matter. So brand really doesn't
matter in this case, what does matter
is how these work. So basically, these pens, unlike these pencils, e.g. or pens you're
normally going to use, don't contain the gel inside. This gel is what helps
this wireframe stand out. So you can see because I
have all of these dots, it's much quicker for me
to draw without a ruler. And I'm still going to have some consistency and some
nice-looking layout. And you can clearly see the difference between
this and this. How much better this looks like, because it's on a
black piece of paper. I'm using these white pens than this because it's on a white piece of paper
and I'm using these, so it stands out much better. It looks much more
polished and professional. And it's really going to engage
your clients much better. I found over the years because clients really
like to see what you're working on because they
are paying you for your work at the end
of day, obviously. So you really have to show them where their money
is going towards. So basically that's
it for the equipment. You can start small. Everybody can afford one
of these and one of these. So you can start small, you can start slow. And then once you upgrade, once you start earning money, then you can invest
in different markers. Once again, they
don't have to be this fancy brand or the shades of markers
or none of that stuff. Because you're not an
illustrator, you're not drawing, you're just sketching these
ideas down on a piece of paper to present them
to your clients. In the next video, we're going
to start with sketching. I'm going to show you some ideas and I'm going to show you
how you can work with these paper wireframes
and how you can actually turn your ideas that
you have in your head. Put them on a piece of paper and then turn them into layout, which you can then use in
your favorite software. So I'll see you there.
57. Drawing on plain paper: In this video, we're going to draw on a plain piece of paper, and I'm going to show how you can turn our layout that you have in your head and put it
down on this piece of paper. Because I mentioned in
one of my previous video, our shoe example, dent, when you're using images
in conjunction with text, is really important
to give them context. And it's really important
to have high-quality images which are going to help tell a better story for your users. So in this example
we're going to draw, we're going to use that shoe example I mentioned
in the previous video. So let's get started. What I have right
here, as you can see, is just a plain piece
of printed paper, like I showed you previously. I have two markers
which I'm going to use just to indicate buttons, e.g. and clickable areas. I have my ruler and I have a
pencil and I have this pen. I'm going to use the pencil
for drop shadows, e.g. just to announce some
of these drop shadows. So without any further
ado, let's get started. What I really like to do
on all my wireframes is, as I mentioned in
the previous video, where we explore
wireframing styles, I really like to
leave this part of my paper blank because it
really helps me write down some notes I have
which are going to really be helpful
to meet later if I remember something or
to my teammates or my clients if I want to guide them in a
certain direction. So what are we going to do? First is we're going to
draw a quick outline. So as I said, you can use a ruler, but it's really not mandated. And you can be really strict
with your angles, e.g. you can do straight angles. You can use those
rulers that e.g. car designers use just to give all those angles
and stuff like that. But I'm not going to do that. I'm not going to bother
with too much details. I'm just going to do
something like this. So this right here
is going to be our navigation right
here at the top. I'm going to use a plane and
navigation style because your users are used to these cert certain
types of navigations. So don't make it
too complicated, make sure to use something
that everybody can understand. In majority of cases, navigations are already
tried and tested. So don't try to invent hot water just because the sake of it, use navigations that already
work in already convert. Well, so in this case I'm
going to use navigation. I'm going to put a
logo right here. And to do that, I'm going
to simply draw a circle. And I can use straight away my color so I can fill
it in nicely like this. And then I can do
something like this. So I can use my
ruler once again, make sure I go somewhere
in the middle. It doesn't really matter. And I'm going to use these which indicate my navigation
right here. What I'm going to do, I'm
going to draw two buttons. So I'm going to do
that free hand. E.g. like this. E.g. like this. This button right here is going to be the sign-in button, e.g. because that's the main point. I want my users to sign in and have as many users as possible. And this can be e.g. Sign Up button,
which is going to bring my users back
into their profiles. I'm going to write that down. So I'm going to draw
an arrow like this. So it's actually used this one. So we can see it better. So sign up and this right
here can be sign in. I can underline it
because once again, it's much more
important than sign up because you already
have these users, but you have to convert new users and bring new
users to your website. Next up, I want to create a nice big hero image so I can position it roughly
around here, e.g. and because we mentioned
shoes, once again, I'm not really that
good at drawing, but I'm just going to
illustrate this right here. Of course you can. If you're good at drawing,
you can draw this. You can also take images
from the Internet, cut them out, and then stick
them to a piece of paper. But once again, that approach requires a lot of
your time and energy. So just make sure
to understand that before you actually jump
into a process like that. In my case, I'm just
going to scribble something that resembles a shoe. But before I do, I want
to position a text. So I'm going to use a nice
big title right here. Like so. And I'm going to fill it
in with color like this. Then I'm going to use
subtitle right here. And then I can actually use my pencil to fill
it in right here. And then below that, I can use a button because these right here and
describe your product. Shoot in our case. And I'm going to use
this color again. So let's now just create some basic shape that
resembles the shoe. Once again, I'm not really
that good at drawing. So I'm going to, let's say
do something like this, maybe like this, and then
finish it off right here. Perhaps like this, like so, and then bring it
down right here. Maybe these are for the
shoelaces, something like that. And let's use stripes
down the side. Like so perhaps have
a shape right here, and there you go,
we have something that resembles a shoe. And then what I can
do in the back, I can actually create
maybe a circle or a shape, which is just going
to bring our shoe, the front, something like this. There you go. This is our hero image. So the whole point of this hero image is to
convert your users better. So this title is going to
indicate what this is. It's a shoe. So the
name of the shoe, the name of the brand
or something like that. Subtitle is going to describe a bit more details
about the show. So e.g. materials it's made
of or what is it for? Is it for running, is it for
walking, stuff like that? And then the button,
users can actually check that out and go
into a separate page, which is for that
particular shoe. So just keep all of
those things in mind. Then what I can do is actually draw a
pagination right here. So users can actually
click on these dots. And let's say that
this dot is filled in. Or this can be automatic slider and it can just go left
and right automatically. And users cannot really
click on these to change, or they can, depending
of the layout you actually go for at the end. Then next what I'm
going to do below that is create some sort
of a logo strip. So let's use a ruler and let's
create some basic circles. So perhaps I can create
four circles maybe. And then simply do
something like this. And position this, e.g. partners or partner stores,
something like this. So let's say that this
is a well-known shoe. And then these partners can represent all these
famous stores, e.g. where this shoe is salt. Next up below that, what
I can do is include a video e.g. like this. And I'm just coming
up with ideas. I'm just testing these things and just exploring these things. So perhaps we can do
something like this. Maybe I can create a circle
straightaway, like so. And then use this pen to put a play button in the
center like this. So this can be a video. And then behind this video
what I can do is e.g. include a nice drop
shadow like this. And this drop shadow is
going to indicate that users can click on
this particular video. But I can also do indicate
that this is the image. So although it's a video, it is still an image element. And then what I
can do right here is put a nice big title. Then put a big
subtitle behind it, sorry, below it, like this. And then e.g. button, where
users can actually click and go and do a certain action. So let's say that this video
describes this shoe or the process of creation of these shoes or
something like that. Below that, what
we can do is e.g. provide some
services and provide a background about the services that this website
actually provide. So e.g. apart from
selling the shoe, maybe they are taking secondhand shoes and then
putting them on their website. Maybe they're refurbishing them. So you really have to speak
with your client about all of those details and about what
they are actually doing. But in our case, e.g. maybe we're not
just selling shoes, maybe we are also
selling clothes. So e.g. you're selling t-shirts, we are selling jackets, we are selling all
of these things. So I'm going to put
these three boxes. One of my images, and let's use
something like this maybe just to indicate
that these are our images. Once again, if you're
doing this free hand, you're going to be much faster. But I'm just going to show
you in these videos that you can use a ruler like this. So these are the
images analysts say other services, what
other products? So once again, I can
know later when I go back to here what these are. So perhaps we have a
bigger text. So e.g. title of this product, then we have a
description like this, and then we have a link. So I can do it like this. Then I can highlight
it using this color. And then I can point to
adhere and say link. So users can actually click
here to access this product. What we can do below
that is perhaps we can put a big image and big hero image or
a video which is playing on loop like this. So perhaps model
with the product. Like that. And then below that, we can finish this off e.g. with another section like this. So maybe we can e.g. say something like about the manufacturer of
this particular product or something like that. Or perhaps we can even
show another product here with an image. And because we used
a left layout here, maybe we can use a right
layout here just to break up our layout a
little bit like this. And I can call this
product image like this. And then what I can do is
put a title right here, nice big title subtitle
here, like so. And then put a button here. So once again,
users can purchase this product or at least visit a page to
purchase this product. Below that, what we can do is we can create a contact form. So what I can do is put a title
here, subtitle here, e.g. and then bunch of these. So let's fill this in. Let's fill this in. So what this is, e.g. I. Can put it right here. So contact form, e.g. we would love to hear from you, contact us using the
contact information below and then address, contact number, e-mail address
or something like that. Then we can put our
contact form here. So these are form
fields like this. And I can e.g. put a line like this
just to indicate e.g. your e-mail, your name, your address,
something like that. And then below all of these, we can put a button. Let's put a button
right here just to break our layout a
little bit because we have a left button
right here, like this. Then what I can do
at the end is I can break this off, e.g. like this. And then
I can put a logo right here, like this. And then I can put a
menu navigation items. So let's see, 123-456-2345. Maybe I can Jeremy and
another one right here. So this is going to be
our nav like so e.g. original Copyright 2022, and
brand name like this, e.g. and then you can put
the terms of service. You can put privacy policy
or something like this. So you can see in just a couple
of minutes, 10 min or so, you can create
something which does look quite nice and it really does show to your clients
DID or that you have. And you can put that idea like
this on a piece of paper. But I forgot to write here, is to put background
shadow, e.g. I. Can even point to that, call it in drop shadow
so that clients, teammates, developers,
everybody involved can know what you actually
meant by this. So there you go. That's how easy it is to draw
on a plain piece of paper. And if you're just
getting started or if you're already started, already in this business, I would really
recommend that you use this paper because
it's extremely cheap. It's extremely fast to
draw on, as you can see. But in the next video, I'm going to show that
a dot grid paper, the black one which I have. But you can also get
many other colors. And just to show you
how that looks like, this layout looks like
on that piece of paper. And then you can compare what
you actually like better. Plain piece of paper or
that dot grid piece of paper if you want to splash a little bit more
money onto that. So I'll see you there.
58. Drawing on dot grid paper: In this video, we
are going to use that black dot grid paper
which I showed you. And we're going to create exactly the same
layout that we did previously with the
plain white piece of paper printing paper. And I'm going to show
some differences between this dark piece of black paper and that
white piece of paper. So let's get started. And first things first, you have all of these different
thicknesses of your pens. So this is number five, e.g. this is number eight,
this is number ten. Obviously, the
bigger the number, the thicker the line
is going to be. So I'm going to get started
with just this lightest one. So I'm going to do
the same as before. I'm going to simply
create the outline. And it's much easier to line your ruler here because
you are using these notes. I'm going to do
something like this. I'm going to do something
like this, e.g. as I said, it's much faster and easier when you can actually count how many of
these dots you have. So first things first, let's create that
navigation so I can create circled for my logo. And because I don't have an orange color that
we used previously, I'm going to use this
one just to fill it in. Like so. Then I'm going
to use the same style. So let's go this just
to indicate these. And I'm going to just create those two
buttons once again. So I can create a
button like this, On button like this. And then I'm going to use this gray color to fill
in my sign-up button. And I'm going to use
this purple color to fill in my Sign In button. Once again, you can
use different colors. If I take this and let's test this read and see if
it works any better. I don't think so. But let's actually go with it. It's much darker than
this purple one actually. So I'm going to actually
switch like this, but obviously, depending
of the client's color, you're going to use one or the other. I already mentioned that. So let's move on
for the next one. I'm going to use
number eight because I don't find these lines
are thick enough. So let's line it up like so. And you can see
straightaway heart darker. This is so I'm going to use
these for my title, e.g. let's fill it in like so. Then I'm going to use that
gray want for my subtitle. Like this. There is not much difference
but you get the point. And I'm going to use this
red one for our button. Let's fill it in
nicely, like so. And then I'm going to use those circles for
our pagination. Let's fill this in. Like so. Then I'm going to use
this lighter one to create my shoe like this, e.g. like this. And of course, depending of how much time you
want to invest, how much time you
have on your project. Once again, I can keep repeating myself or you can invest depending of the
project in question. So let's feel the same. Let's draw these
lines really quickly, like we did previously. And if you remember,
we had that circle. Now I'm going to use number ten, which is the thickest
one I have, like this, and simply fill it in with some background
color right here. Now what you can also
do is you can e.g. fill these in with
this color. Like so. Once again, I'm
always going back to how much time you actually
have on this project. So you can do whatever
you want with this. Next up we have that logo strip. So let me actually
created right here. And we had those circles. So it's positioned for
different circles. My Excel. And below that,
we had that video like this, like so. And I'm going to
actually create a circle in the center like this. And just see where
is my number ten. So here it is. I'm going to simply draw that play button inside
using my white color. And I can continue using this
number ten for my title. I can use this gray
color for my subtitle. And let's see. I can use what's
this number five. I can use that for the button
and then simply fill it in with my red color like that. Next up what we have
are those titles. So let's actually keep
using number ten. See titles. I'm going to do this
free hand like this. So main title, subtitle. And what we had below
that are in those images. So the great thing about this paper is that you
can actually count. I'm not going to bother because we already
created this layout, but if you want, you can actually
count how many of these dots you are
using for your layout. So you can make sure that all
of your lines are perfect, all of your heights are perfect. Which in turn is going to
create a much cleaner layout. So once again, depending on
what you want to achieve, what you want to use, you can
go with one or the other. I slightly prefer this
black paper because details stand out against it much better than on a
white piece of paper. It is of course, a bit more expensive and then
white piece of paper. But depending on what
you want to achieve, what you want to create, you are going to go
with one or the other. So there we have created those and let's
continue with this one. So we had that title like this. I'm going to switch to this one for the smaller lines like this. And finally we had
that link at the end. Like so. Next up we had that big image. So let's use this one to
break it up a little bit. Like so. And I'm going to simply use freehand not
to waste too much time. And I think the best option
would be actually to outline this a little bit
better with the number ten. Like so because it's
actually going to outline the entire website
much better than that, number five, but as I said, you can explore and
do whatever you want. Let's now move on to
create that title. So let's do that. I'm going to position
that title here. We're going to have
that subtitle. And what we had
then is that image. So you already see some
smudges on the paper. Hopefully it's not too
distracting when a camera, but what you should do with
these is wait a little bit, just so, just give them
a bit more time to set. Then once they do, you
can continue creating, but you should really give
them a bit of time to set. And two, form a
little bit like this. Then we have our button. Let's use red one. Now really trying to go
as fast as possible here, just not to bore you too much with these details
because we already went through this process once
with white piece of paper. So what we have below
then is the title. So let's try to keep
it in the same line. So we have the title subtitle. And then we had the
title on the right. Then we had the
subtitle below it. And then we had those lines. So sexually use bit thinner one. So this is number eight. Let's go with number five, because I want to show those smaller lines
right here like that. And then let's see. I can use number eight
to actually create those form fields like this. So you can see you can
easily switch between using a ruler or going
with this note grid, because that's the whole point of having it in the first place. So you can see without a ruler how much faster I
can create these, but still keeping
the same layout, the same consistency, Everything looks just like it should. Finally, let's
position our button right here, right this, fill it in with color. This, like so. And finally at the end, Let's wrap things up. Let's create that footer. So I can position
this like here. And I can wrap this up. Footer came up a little
bit bigger than before, but it doesn't really matter. And what I can do right
here is create those six. So 123456. And I can draw in my
circle for my logo. I can use my color, fill this in nicely. Finally, see below that. So let's use a thinner one. So let's put it in
the center actually. So OC 2022. And what I can do is use number ten or even better number eight to indicate the
terms of service, e.g. privacy policy. And there you have it. Of course, you can draw
all of those details. So let's go with this one, e.g. partner stores. But I don't want to bore you with too many details because we already went through
this process before. So basically, that's it. That's how you use this dot grid paper and
black dot grid paper. In my case, I really should
find ticker markers, ticker these gel pens in color to accent these
colors a little bit better because some
colors work well, like this golden color, which I'm going to show you. So e.g. you can use
that for your buttons, but if you want to use the exact color of
your client's brand, then you are going to
struggle in some cases, especially if you
don't have these. Now, this is one of
my favorite brands. It's called Sokoto. It's from Japan. And they really create
these awesome looking pens. You can see how, how good of a result you can actually get with these pens. So they actually sell these in a variety
of different colors. And you can purchase
those if you want to. But these three costs
as much as 20 of these. So that's the whole point, that's the whole
reason behind it. But I wanted to
show you that you can get these in
different varieties, in different prices,
same like with these markers that
you are going to use for white piece of paper. Now, let me actually clear this off and let me actually show you the difference between
this black piece of paper and white piece of
paper. So here it is. It's the same layout using
two different techniques, using two different papers. So here we have this white paper which we already covered, and here we have this
black dot paper. And you can basically
make your judgment. This is much cooler
and it's much faster to create using free hand because you
have this dot grid. But if you want to basically get through
the pain of using these, because once again, they
are filled with this gel and this gel is going to
translate onto a piece of paper. I'm willing to go
through that because my clients are much more blown away by a
result like this, then our result like this. But if you're just
getting started, if you cannot be
bothered using these and maybe looking a bit more professional but
paying the price. Then of course you
can go with these. Obviously whatever you choose to create your pipe
paper wireframes on. Much more important what story they're telling and the layout, and how the layout looks like. Then what paper are you using? But of course, going back to it, you can use cheaper options. You can use much more
expensive options. But at the end of the day, the result is what matters
and not the piece of paper. There is actually one more
tip I want to share with you in this class and
that is to use templates. And we're going to get to that in the next video. So
I'll see you there.
59. Using printable templates: One great way to improve
your speed and productivity while working with
paper wireframes is to use principal templates. Now, these are just templates
of well-known devices, e.g. phone devices, browser
devices, watch devices, and whatever else
you're working on, you can use tablets, you can use laptops,
whatever you want. So in this video, I'm
just going to show you a free resource which I'm
offering so you can use it. But there is also
a caveat to that. You have to fix some of these sizes because
they are a bit older. I'm also going to provide templates which I'm going to
show you in just a second, which are printable in PDF so you can print
those straightaway. But I'm also going to show you some premium links in the PDF. You can click there and visit them and purchase
them if you want to. But it's not really mandatory. I'm giving you all of
these free resources, but if you want, you can
purchase those premium ones. So here is my website, web donut.net, and these are printable
devices, templates. As mentioned, I'm going to
leave the link down in the PDF and you can click to access
these, simply download them. They are Photoshop files. You can open Photoshop files in Adobe XD as well if you
don't have Photoshop. And what they are basically are just mockups of these phones. So we have smartwatches, we have mobile phones
and you can see iPhone seven and Galaxy
pixels, Samsung Galaxy S7. So these devices are a
bit older at this point, but as I said, you can just use them. E.g. you can remove
these buttons, you can remove these cameras, position the camera
in the center, e.g. to get more up-to-date device. Let's go like that. You can also combine
these elements, but as you can see,
there is no notch. But I'm going to show
in just a second, I'm going to provide you with a printable template in PDF, so you can have a
phone with an arch, we have tablets, we have
Google Chrome browser, and that's basically it. So just come right
here, download now. And that's basically hit M to show you what
you are going to get. These are printable
templates which you can get inside of the
PDF file format. Simply print these out. And as you can see, this is the browser
which I just showed you. These are the phones which
have the notch on top. So I actually gone ahead
and created those. And these are
smartwatches, So e.g. for Apple Watch or
something like that. So how can you use these little, Let's go with this one. E.g. simply draw on them and they are really
useful because you can actually show to
your clients and to your teammates how all
of these are going to look like once you
actually put them on in your software and once
you actually start creating. So e.g. let's use a logo right here in the
center on all three. And let's use a ruler. In this case, you can see why ruler here is really useful. Because I can e.g. put a tab bar right here at the bottom on all three of
these at the same time. So you get the point. You can simply draw right here. And I purposely left all of
this empty space around. So e.g. you can still do this. You can put text here, you can do whatever
you want with this. But basically
printable templates are going to save
you a bunch of time, especially if you are
presenting later to clients. I found these are
extremely useful when you're creating
mobile apps like these. And when you are creating
watch concepts like these, because you can see
that these watches are just a tiny bit smaller. So creating a
mock-up, basically, that's how the end product
is going to look like at the end is really useful
to show to your clients. But what about the web? Well, that's a
little bit tricky. What we have right here is Google Chrome,
basically a template. What you can do right
here is if we go back to the example which I showed you
previously, so we can e.g. draw that shoe once again. Once again with my epic. I'm trying skills right here, but you get the point. You are going to use this to show quick concepts
to your clients. And of course, what you can
also do is flip this around. So use in this space
and just use this bar. Flip it around and
just reposition and here at the top
inside of Photoshop. And then you're going to have
much more space down below. What you can also do is
use that same approach. So use this bar, flip it around, narrow it down a bit, and just position it
right here on the top. So in that case
you're going to have all of this space
down below empty. So these are just some of the examples I
wanted to show you. These are free. You're
going to get them. You can simply download and use them in your project right? Now, if I go back to here, this is the one from my
website, web donut.net. And I'm also going to provide
some premium resources with bunch more of these devices with some guidelines, e.g. and stuff like that in the PDF. You can get those
if you want to. And you might be
asking yourself, it's all great with using
this white piece of paper, but what about that fancy
black dot piece of paper? Well, it's a little
bit tricky with that because you
have to make sure to align all of these
mockups using that grid. So just make sure
whatever you are purchasing your dot
grid paper from, make sure to ask them for
dimensions or even better, you can simply use a
ruler and then you can measure the dimensions between
the edges of your paper. So just the outer edges
of your paper. So e.g. this edge, this edge, this edge, because the center
doesn't really matter. Why we do that. Well, when you are creating
these and putting them down on the piece of
paper before printing, you can just make sure that you measure them correctly ended, everything fits as it should. So then when you print them out, It's going to look
lined up, coherent. Everything is going to
match with your dot grid. So then when you start
drawing everything, I'm going to make
much more sense because if you print
these out like this, then all of these frames are not going to align
with your dot grid, which then defeats the purpose of the dot grid in
the first place. So just make sure to pay
attention to details like those. Once again, using templates like this is a great
way to present to your clients or your
teammates just to show them how the finished
product might look like. So just make sure
to check them out. Once again, I'm giving you free and premium resources so you can decide
what you want to use.
60. Sharing your wireframes: As I said throughout
this class and these wireframes on
paper are mainly for you and for your ideas
just to figure out the possible layouts
you're going to use in your design once you
actually get to software. But if you're working as a part of a team with
another designer, or if you just want to share your process with the client. And the client wants
to see where you are at this project at
this particular time, then you can actually share these paper wireframes
with your client. But how can you
actually do that? Where if the client or your
design teammates are local, you can simply take
a piece of paper and just take them to the office
and to show them that way. If you remember, when I show you possible styles for the
wireframe in previous video, you saw that some designers
are actually cutting those wireframes
from the piece of paper and then present
them that way. You can also do that. But the easiest way I've
found over the years, especially with clients
who just wanted to see, were just curious because
majority of smaller clients, especially don't
really understand your process and
they don't really know what paper wireframes are, and they just want to see
what they are paying for. So in those cases, what you can do is
simply use your phone, place a piece of paper down, make sure you have
good lighting, and then just snap a
picture of your phone. You don't have to share all of the paper wireframes
because if you e.g. have 20 different
pages on a website, you're going to have 20
different pieces of paper. So you can just share
one or two just for them to see and to
understand what you are actually doing and what are they paying you for if the client wants to see the entire process and
all paper wireframes, you can do that too. Or if you have a scanner, which is the easiest way
I found over the years, you can simply scan
all of those papers. You can put them in
a zip file, e.g. and then simply send
that zip file via e-mail to your client or to your developers,
teammates, whoever else. So once again, not everybody is going to
demand this from you. But if they do, then you have all of
these options to share paper wireframes with
them because they have every right to understand
what you are working on this project and where
you are at the moment.
61. SECTION 7 ASSIGNMENT: Your assignment for
this session is to create any kind of paper
wireframe that you want. It can be a website like
we're doing in this class. It can be a mobile app, it can be attached board, it can be whatever you want. Just practice with
some of these boxes. You can use various
different styles which are shown in this class. You can do whatever you want. The point here is
just to practice. Don't worry about
using fancy papers. Don't worry about using
fancy pencils or pens. Just use whatever kind of
piece of paper that you want. You can even use
napkin and some pen. So make sure to practice, make sure to try it
out and make sure to try to understand why it will make your
design process a lot faster once you actually
get the hang of it.
62. SECTION 8 Layout and Grids: Creating common layouts
in UI design is extremely important because these layouts have already been proven, right? They already been proving that
they are actually working. So don't just try to invent hot water because
for the fun of it, try to always use these proven methodologies and these proven layouts
and grids are there just to organize our
content a little bit better across various different
breakpoints or screen sizes. So let's get started.
63. What is a layout: Layout in UI design can
be simply referred to the organization of
elements which are included on a page or
on a mobile screen. Basically, whatever it's
included in your design and how it's structured and organized can be categorized as layout. There are many different
layouts out there. So there is mobile layout, There's desktop
layout, tablet layout. There are also landscape layout, portrait layouts and much more. But basically, the main
thing you need to know right here is when somebody
is mentioning layout, they're basically talking
about the overall structure of all of your
elements which will lead on a page or
a single screen. How you create your layout is
dependent of your project. How complex your project is, how big your project is. Are you using a grid? Are you using guides, are using some component
states, some elements. So all those things can be dependent of your layout and the end result
of your layout. In this class, we are going to focus on how to
create your layout, how to use grids,
how to structure your content inside of your grids and inside
of your layout. So this is what we're going
to talk about in this class. But you can always browse online and see different layouts
after this class. And just understand
what other people are using in other topics, in other classes,
in other projects. And you're going to
understand it much better after this class.
64. What is a grid system and why it's important: Grid systems are used in design to organize your
content much better. Because if you don't
use grid systems, you don't know where certain elements should
align on the left or right, or on top and bottom. So grid systems are
basically designed to do that to keep your
content organized, to keep your content
look coherent, and to keep your view is experienced much better
because they are going to see this organized
content rather than these scattered
elements which don't align. Grid systems are also used for developers because
developers can code much more simply and much more easily than without any
grid systems because they can put the content inside of the containers and then you set the fixed width of
those containers. Or they can be variable
if they're using something like a
flex content layout. Therefore, that content
can be much more easily scalable if they are
creating responsive design, you as a designer, can design that content
much better for responsive design because you're using these grid systems. Most well-known grid system
out there is Bootstrap. There are also many
others out there. And in this class we're
going to mention Bootstrap, and we're also going to
mention something called eight pixel grid system because
that grid system is really, in my opinion, the
most scalable out there because all of the
elements are divisible by eight. Grid systems are great
because as I said, they keep your content
in line there, keep your content organized. And they are super easy
for developers to code. Because especially with these well-known grid
systems like Bootstrap, e.g. they already have
these components. So it's going to keep
their development time much lower because they have all of these components
pre-built already. They just need to input them
inside of their own code. In the next lesson, I'm
going to show you how to set up grids in Adobe XD. It's super simple, so
I'll see you there.
65. How to set up grids in Adobe Xd: In this lesson, I'm
going to show you how to set up grids in Adobe XD. So let's jump into
Adobe XD straightaway. And here in Adobe XD, what you can see is I created this art boards of 1920 by 1080, and I'm quickly going to
show you this in Adobe XD, but you can also set
this up in Sketch. You can set this up in Figma. And Figma is one of the best tools out
there in my opinion, because it has the
most functions included by default,
XD is great. And because of the community, they are going to eventually include all of these options
the Figma already has, because these tools are
competing all of the time. And it's great for us as designers because
we are the ones who are profiting basically from these tools competing
with each other, because we can always
expect the latest tools and latest features inside
of the new updates. So because I love Adobe XD, I use it for years now, I use it every single
day in my work. This class is
dedicated to Adobe XD. But if you're a Figma
or a sketch user, you can also do this
in those tools. Or if you don't know how
you can simply browse for classes online or search
for YouTube videos. So if you go back to
Adobe XD, as I said, what we have right here is
the airports of 1920 by 1080. It's just a regular airport. You can set this up from here. You can click Artboard and then set it up or on the home screen. Now, to set up our grids, all you need to do is simply
select this art board. Go right here where
it says grid. And you have two options. You have layout and square. As I said, figma has more
options than Adobe XD. And I really hope that
Adobe XD team is going to include all of those other
options in Adobe XD soon. But for now, as I said, we have the layout
and we have the grid. So going back to Adobe
XD, as you can see, we have the layout and square, and I'm going to choose the
layout just to show you. And you can click right here
just to show your layout. What we have right here, our columns, we
have gutter width, column width, and we have
margins linked right here. You can use this as the default. You can make this
as the default, or you can change all of
these values and then make that template as a default.
Now this is great. If you're working with
something like Bootstrap, you can create a bootstrap grid right here, make it a default. And then whenever you come back, and if you're always
working with bootstrap, you don't have to
waste your time by creating these all of the time. You can simply
click Make Default, open it up and it will
show that as the default. So if we go back to here, what you can see right
here are the columns, which are these blue
bits right here, we have the gutter width, which is the space
between your columns. We have the column width, which is the width of these blue bits, which
are the columns. And finally we have
margins left and right. And you can also
click right here to set up top margins,
bottom margins. We have left margins
and right margins. If you click right here,
it's going to simply link the margins left and right and whatever you set right here, it's going to fit them in. So e.g. if I want to make
my columns wide, e.g. I don't know, 65, press Enter or Return. You
can see what it does. So it increased
the gutter width. It saved my column
width right here. And it just showed me these
linked margins like so. I don't like the spacing
of these gutters too much. I'm going to change them, e.g. click right here. And then simply changed
into something smaller, like, I don't know, 40 e.g. and when I press
Enter or Return, as you can see, it's going
to change these values. So what you have to do right
here is to play around with these values in Adobe XD to
get the values you want. And usually when you set up the values that you
are happy with, then you can move on
and make it a default. Or every time you go back
to Adobe XD when you create your first art
board and start to design. Then create these when
you actually copy this airport to another
airport are duplicated. So if I go back right here
and show you that as well, what we have right here is
this first art board and e.g. let's say that these
are our values. Perhaps I would like to
change this to 60 maybe, or change this to 40, this to 100, and this 2.0, 80. And you can see how
this layout changes. So let's say that this
is my default out. All I need to do is hit Control or Command D to
duplicate this artboard. And as you can
see, it's going to save these values for you. One more thing I wanted
to show you is if I hit Control Zero to snap into
place selected one more time. Click right here. Here you can change the
color of these columns. So if you don't like this default teal color
that Adobe XD provides, then you can simply change
it to whatever you want. And finally, you can lower
down the opacity right here. So it's not too disturbing
when you start working. So basically, that's
it for Adobe XD. As you can see, it's
extremely simple. You can create all
kinds of reports you can create desktop are
pores like this was, you can create tablet
airports, phone art boards. You can rotate them
horizontal and vertical. And then you can create these
grids for your designs. In the next lesson, we're
going to talk about Bootstrap, and I'll see you there.
66. Working with Bootstrap: Vast majority of developers and designers out there
like to work with Bootstrap because it's
a well-known foundation and well-known grid
systems for years now. And a lot of websites out there
are actually designed and built on Bootstrap using something which you
are familiar with, which most people
are familiar with, is great because the design and development process can
happen a lot faster. So if I take you right here, this is actually
Adobe XD website. And you can go to the
features right here. And you can go to the UI kits because these are
the components that you can actually download from
Adobe's official website. So what we have right here, as you can see, is Apple design. We have Google Material Design, and you can use these UI kits. You can download them and use
them in your own projects. But what we are
interested in for this particular
lesson is Bootstrap. So if you scroll all
the way down to here, you can see a
Bootstrap right here. So Bill fast
responsive sites with predesigned assets and
components with Bootstrap five. Now, bootstrap has
its own versions, so you might design your
website on Bootstrap, three-year Bootstrap for
this is the Bootstrap five at the moment of
creating this class. So if you're watching this class in the future
and you come right here and says bootstrap six
or seven or ten or whatever, then just know that this is
the version of the Bootstrap, but just know that
the oral structure, the overall design is
basically the same. They're just including
more and more components, more and more code in
each and every version. And what we are interested in this class is just a design, just the components,
just the component names which are going to
show you in just a second. So if we go back to here, you can simply
click get the kit. When you get it,
let me close this. This is how it looks like when you open it up in Adobe XD. So what you have
right here, I have these missing fonts and you can install them if you want to. If you have a right
here, it's going to show that you have
some missing fonts. What we have right
here are these colors. We have character styles because
they're using Helvetica. I don't have it on my Windows. That's why it's showing
them as missing, but I can simply replace
them if I want to. Next, we have these components. We have these icons and
all of these elements. So Toggle Switches, foreign
switches and so on spinners. So all of these are
components from Bootstrap. Let me switch to my
Layers panel right here. And if I zoom all
the way into here, what you can do is
click right here, go to the preview if you
want to, and then e.g. you can click the grid system, it's going to take it
to the grid system if that's something
that you want. But I'd simply like
to browse right here. So let's start with the layout. Now, layout is extremely important because layout
helps you understand how the Bootstrap is imagined and you can
easily understand all of these other things
like Bootstrap online. E.g. Foundation has one
and many others out there. But basically, they all have a similar philosophy as
to how they are built, how they are used,
and how they are upgraded to keep up with
the web latest features. So if we go back to here, you can see we have
a grid system. Now, what this is, if I zoom in a little bit
closer, as you can see, we have the column and we have all of these spacers
on each side. So we have the right marker
and the left marker. This is how they call them. And we're going to explain
that in just a second. But what we have below
that, our grid sizes. Grid sizes, if you remember, when you select your
art boards and you can click right here
to create this grid. Now, these are the grid sizes. So we have the extra large, and these are from a
1,200 pixels on words. So if you're creating something
bigger than 1,200 pixels, you can use this size and
it's going to obviously encode scale with your
size of your viewport. Viewport is basically
the desktop, e.g. or the mobile, or
whichever screen your user is looking at
your website or your app, That's your viewport size, in this case is 1,200. And this says basically
that this entire grid is going to be 100.11,
40 pixels wide. So 1140 pixels wide
is this entire thing. And if I select it,
you can click right here and see in your width, we are at that size, so 1140. Now, if we dig a little bit
deeper and before we do, you have all of
these other sizes and you can see how
your columns and your content is going to scale on all of these other devices. But if we quickly
select this one, what we have is we
have the columns. We have 12 different columns. If you remember from the
previous video in Adobe XD, we actually created
these 12 columns and all these columns have
gutters and spacers, but they are a little bit
different because they are bootstrap and I'm going
to show in just a second. So we have the
gutters right here. So we have the left gutter
and the right gutter. And this is actually
the key difference between Bootstrap and
something else you might create on your own or figure out
something on your own. Bootstrap has this
actually weird thing that they are putting these gutters on the left and on the right. So before the
margins on the left and on the right you
have these gutters. So if I take it
back to Adobe XD. You can see what I mean. So just imagine that this is the left margin and this is going to be the right
margin, right here. So all of these empty
space on the right, and instead of column
going all the way to here, actually, they have
left gutter instead. So I really don't know
why they are doing it. I've seen it in code. What basically what you have to do when you're creating these is you have to be careful
with how you create them. Basically, from this 101,140 pixels wide for your columns, you have to deduct these
left and right gutters, and therefore you're
going to have your content area there. So what I'm going to
do is use this one, hit Control C to take it
out of this right here. And I'm also going to jump inside and open up in this one. Use Control C and then jump
outside to here, control V. And if I do a copy, Control D, jump inside of here and you will see what
I'm doing in just a second. Right to here and go
all the way to here. Zoom in and align
them like this. And then simply
change the color to something else that you
can actually see, e.g. this blue one, what you
can see in blue color, actually the content area. So this content area is the area where your actual
design is going to go, where all of your
elements are going to go. And these pairings on the
left and on the right are actually these gutters
that they left in. I don't know why they're
doing this, but basically, this blue bit which
I just created is actually your content area. Now, if we go back to XD, you can see that they
have all of this throughout their
sizes for the grid. And you can simply
adjust and change and create your content area
for all of these things. So actually, instead
of 1140 for the width, your actual width is
going to be 1108. And then you will have to create these content and
columns inside. One key feature about Adobe XD, which is actually quite bad. If you're creating
for Bootstrap, is you cannot show these gutters on the
left and on the right. Because if I select
this one more time for this artboard and don't pay attention that this
airport is extremely huge. I just want to get
the point across. If I click right
here, as you can see, we cannot use the
gutters left and right. Therefore, we are
just limited to what Adobe XD has to offer us. So in this case, what you have to do is actually, Let's go right to here. Let me create my art board
and do what they said. So 1,200 with 1080 or whatever. So height doesn't really
matter because height actually scales
with your design. So if we jump to here, and I'm going to
actually select this, and let's actually remove
left and right gutters. And let's select this
one and this one. So Control C, I'm going
to jump in right here, control V, make sure
they're in the center. So this is actually
our content area. What you can do in this case is you can actually draw guides. So if I move this down so
you can see what I'm doing, we can actually draw guides. So first guides, so
just hover right here and just position it there. If you want to draw guide there, draw another one there. And then you will have to create these guides throughout
your design. So like this, like this. And then actually start with every single
column out there. So what I would recommend
is wherever your gutter is. So right there, just pull
in that grid right here. There are also some
plug-ins out there which you can install which are going to help you out with this. But I'm just showing you the
slower, more boring version. If you're doing
this on your own, you just want to be as
precise as possible, but you can of course, install a plug-in to do
this much quicker. But just keep in
mind that you will have to check the
plug-in and see what it does and what it did
and if it did the good job. So if we go back to here, what you can do is you can see how wide your column
is in this case. So I'm going to duplicate
my blue bit, hit Control D, and I'm going to actually
narrow it down to here, move it up and just see
what get from this. So what we have is
the width of 63. So that's the actual
width of our column. And what I can do now is actually create the
repeat grid from this one. So what I want to do is
know how wide this is. And I can simply hold
my Control click inside and see that
my left gutter is 16. What you can do is
you have two options. You can use the repeat grid. You can create these
and then simply hover in-between
until you are at 16, like this. And then simply. Adjust this. So if we hover, we are at 16, as you can see. So all we need to do is
basically create 12 of these. So 24681012. So I need to cut it where
this one is, right here. Like so. And obviously I just counted in for this gutter right here. What do you need to do
is start from here. And as you can see, we have this gutter right here. And we have this
gutter right here, because it's 16 double
to 16 is actually 32. So what we're going to do
is actually jump inside of our repeat grid right here and notch this to turn
into like this. And now you can see that we have exactly the same setting for a desk as the
bootstrap debt. So what we need
to do next is you can go ahead and delete
this one if you want to. And I can actually go ahead and delete this
one if I want to. And what I'm going to
do is remove this. And I'm actually going
to keep these in, or I can remove this
one if I want to, because this quantity
is in the center. So what you have to do
is you cannot design from this line forward
or on the left side, sorry, because this
is that gutter that they included that
padding on the left side. There is also the
same story here. So basically your content
is going to be here. What I'm going to
do at this point, if you want to take this
approach one more time, is I'm going to right-click
ungroup the grid. And you can call this e.g. one for the first
column, this is 23. This can be four and let's quickly rename this 567-89-1011. And finally 12. If you want, you
can order the map. So instead of 12 being on
top of your layer stack, you can move it down. Number one, move
it all the way up. So it's just up to you how
you want to change that. If we go back to here, what you can do at
this stage is simply adjust them so move
them down like so. And you can put them in
a group, call this grid. You can actually lock
it so it doesn't move. And what you can also do
is jump inside of here. And you have to select all of these and simply
reduce the opacity. But because it's locked, simply reduce the opacity now to let's say ten per cent,
something like that. And then you can move it
all the way up to here. And now when you're done, you can simply lock it and then you can nudge your
content in here. So how your content is
going to look like is, let's say that we are
creating discard e.g. two right here. Then you can simply nudge it until you are happy
with it, like so. And let's round
the corners, e.g. let's put it right here. Maybe it's something
like an image. Then Control D if
you want to e.g. create a button in
the same style. Let's say it's going
to be four columns wide and something like this. Let's move it to 17 height
or something like that. And let's actually
reduce this down to ten because 20 is too much. So you can just imagine
how this is going to work. You can see when you nudge these elements left and
right how this works, how you can play around
with this, like. So basically, what you need to do right here is inside
of the bootstrap, they have 12 columns,
eight columns, six columns, four
columns, and two columns. And of course one column
which is the basis of it all. So if we go back to here, what you can do is
actually scale your design according to Bootstrap and
according to these columns. So I'm going to share
that in just a second. They created this right here. So you can see this is one
column or one smaller column, however you want to adjust it. And if I delete this one, you can clearly see what
they've done right here. So you can create even columns, four columns with
standard gutters, three columns, two
columns, one column. So however you want, you can create them on even. What this means
is you can create a one huge column and
one small column, basically to fill in
that space of 1140. And you can play around
with your layout like debt, but I'm going to
show you that here. In this example, we have a
twelv column white elements. Then if I duplicate it and
remove four columns like this. So here we have
the eight columns wide elements and snap
it to right here. If I duplicate it,
move it down to here. Remove two. Now we have six position here, now we have four. And you get the idea, you can go to 2.21. And basically, this is how your layout works in
Bootstrap using Adobe XD. So as you can see, it's really quite simple
once you get the hang of it. But you're going
to have to create these grid yourself
because as I said, we don't have the option for the padding on the
left and on the right. And you can just keep
these guides on the left, on the right, just
so that you can know where your content can go. And this obviously
doesn't matter if you're using
these big images. So let me quickly show you
that in just a second. So let's just
imagine that we are using some huge image
which is going to grow. Let's see 246 columns wide. And let's say that I want
to position this image on the left to go all the way
to the edge of my art board. You can actually do that.
Position is right here. And developers in code, let's actually remove top-left, which is this one, go to zero. And we need to remove this
one which is the bottom-left. So just find it right here, which is this one to zero. So these two are at zero and
these two are at tent-like. So you can actually do this. And developers are
actually going to extend the width of
this image in code. But as you can see,
it's still takes up six columns of
your content is just going to scale
with the margin you have right here on the left. That's the bootstrap. In a
nutshell, as you can see, it's really quite simple to
create once you get going. And I didn't really
show you what's included inside of this UI kit. So I can show you that
in just a second. So we have the
content right here, we have the topography, we have these figures, we have these icons, we have different tables. We have different
colors right here. We have different forms. We have input groups,
different components, components, States, badges,
breadcrumbs, buttons. We have cards,
carousels collapse. So you have all of
these elements. I really encourage
you if you are using Bootstrap or you're thinking
about using Bootstrap, then simply dive into here into these elements just to
explore them a little bit more and to understand
Bootstrap a little bit better before you
start your next project. In the next video,
we're going to talk about a pixel grid. So I'll see you there.
67. Working with 8px grid system: One grid system that a lot
of designers use out there is eight point grid system or
eight pixel design system. And I'm going to show you
how to do that in Adobe XD. So if we jump right here, you can see that I created my default document once again, so 1920 by 1080 and we can go right here
where it says grid. But instead of the layout, we're actually going
to move on to squares. And you can set the
square size right here. And once again, same
like with the layout, you can use default,
make default, and default in this
case is eight. So this is basically what this eight pixel Design
Grid is all about. All of your content
is going to be created inside of these
eight pixel squares. And basically they are
using eight because eight is divisible
by four by 16, by 32 by 64. And you are going to use
those sizes later if you're using this eight
point grid system and it pixel grid system
to actually create your content and to space
your content evenly. So let me show you
what that means. If we go back to XD right here. So once again, if I zoom all the way in really
nice and close, choose my rectangle tool and create a rectangle like this. You can see it's eight by eight, so eight pixels by eight pixels. Therefore, This is the
eight pixel grid system. And let's say that I want to
design something like this, and I want to remove the border. Let's include the gray
color right here. And basically 12345678. This is actually the width. So eight boxes, eight squares is equal to 64 because each of
these is eight pixels wide. So this is just the thing you have to keep in mind
whatever you are creating using this eight pixel design system
and grid system, you are actually going to basically multiply all of
your elements by eight. Let's go inside and device
that one more time. So if we take the text e.g. and if I type in right here, so let's call it,
this is a title. And let's close it right there. What you have to do is actually set it to something
like, I don't know, 16. Because once again,
we are creating with eight pixel design system. And I'm going to snap
it to this position. Don't worry about this because
you can always go back to here and you can see the
line spacing is there. And you can make sure to change all of these
things if you want to. So if we set it to 16, It's actually going to
set it up like this. But if I set it to 32, e.g. it's going to move it. So when you start
creating these, and let's actually go
back to 16, like so. I just wanted to show,
so this is a title. Once you press Enter to go to
a new line and a subtitle. And if I close it, you
can see what it does. So it always leave is this
spacing just a little bit, but you can always include
this and just nudge it. Like so to 20 I think. Something like 19 perhaps. It's really difficult to judge this way the text
because this is just Adobe XD is problem because they are including
this uneven spacing. So you cannot ever around your
text without these boxes. It's simply dxdy white. So let's just imagine
that this is our title, this is our text,
e.g. Control D. And I want to move
this to eight, you can see, or e.g. 16. So this way we are going to keep our horizontal
written growing. Let's say that I
want to double this. So you can always go back to
here times to press Enter. And it's going to actually use the calculator for this example. So we have 64, I'm going to enter 64
right here times two. So it's going to be 128. You can always use this
calculator or you can, as I said, Do it right here, but for some reason it
doesn't work. Yeah. It works with the divisions. Let's do it like this. So e.g. 32. And for some reason it
doesn't work like so. So let's extend it to 64. Move it to here to 64, and then whatever 128, you get the picture. This is basically how
you're going to get the horizontal and
vertical rhythm using the eight pixel grids. And basically all of
your content is going to have an debt
strategic positioning. And in the next videos I'm
going to create in this class, I'm going to actually show
you that with real design, we're going to talk about
horizontal, vertical rhythm. And I'm going to use
these pre-made components which I created from one
of my previous classes, just to show you how your
layout is going to look like and your vertical rhythm is
going to look like in XD. So I'll see you there.
68. Horizontal rhythm in Adobe Xd: In this video, we're
going to talk about horizontal rhythm in Adobe XD in we're going to do it by using its amazing feature
called stack. So I have a project open, and this project is
actually from one of my classes called
Adobe XD masterclass. If you're interested, you
can find it and watch it. It's over 20 h long. And everything you
see right here in this document we actually
created in this class. So if you're interested, just take a look and maybe explore how to create
all of these elements. But in this class, we're
just going to focus on horizontal rhythm in
Adobe XD using stacks. If I choose one of
these art boards, e.g. let's go with this one, e.g. hit Control D. And I'm going to create
a duplicate of it, and I'm going to
move it to the side. So it's not distracting
somewhere around here. And I just want to show
you the power of stacks. Stacks are located right
here on the right. And basically what it
is is just imagine that you position a lot
of your components, which you already have a lot of your elements inside of a group. And then you are
creating these stacks, which are actually
spaces or gutters, if you will, for your design. Now, stacks are great
because you can create them to be
horizontal or vertical. So in this case, let's explore how that works. So as I said, we have the stacks and
if I jump right here, I already have a stack included. It's horizontal stack of two O2, so basically 202 pixels, but I can jump inside even more and then make
the changes that way. Because I have this
layout right here. I have 12 columns. Gutter width is 60, column width is 82, and the margins linked a, left and right, R1, 38. So these are the grid and the grid system
which are used to create this design and this entire class you're
looking at right here. So obviously we have two
O2 right here because this fits with the
oral column width. If I jump right here, what you can do is you can
put this text in a group, this text in a group, and this button is
in a group itself. And then you can
create stack for it. So if I select my stacks, you can see that it knows it. I want a vertical stack and
you can see that it's 40. So all spacings are
40 in this case. So 40 right here, 40 right here. But what happens if you want to change this to be
more so you can simply click and drag to
position it to be 80, e.g. so it's 80 right here
and it's 40 right here. You can do that if you
want to or if not, if your client asks you, e.g. Hey, let's change the
spacing right here. You can simply jump
intrasite 60, e.g. makes sure to move this in
the center and there you go. So I really like this layout
and you can always switch between your vertical
and horizontal stacks if you want to do that. So let's position this in the center and I want
to show how that works. So at the moment,
we have this stack, which is the horizontal
stack of two O2. But if I click right
here, as you can see, it's going to switch
it to vertical stack. Now, this layout
didn't change because we didn't put all of
these items in a stack. So if I show you that
we have this, this, this, this, and let's
include all of it actually. So if I hit right here
and hit right here, all the way up to our text. Hold my shift key,
select all of it, hit Control G to put
all of them in a group, then include them in a stack. And then e.g. let's
actually see, so this is 150 between them. So let's position that to
be one-fifth if we want to. It's already at 01:50. So let's position it that way. And all of our elements now are going to be
positioned at 01:50. Now, it didn't include that because we didn't
have 150 right here. So if I go back and reduce this to zero or go
back one more time, it's going to be at zero
because we have 150 here. We have 150 here. And for all of these,
but we don't have 150 between this and the footer. So once again, this is the great way to use stacks in Adobe XD to
create your rhythm. If you're struggling
with your rhythm, basically the rule of thumb is double it or triple it however
you want to include it. So basically, let's say that
I am using 40 right here. If I want to move
the spaces between, let's say my image and
my text below my image. Then I'm going to use
something like 60, 80, or one-twenty or
something like that. So just multiply your values. You can always double it or
triplets if you're not sure about how to use them and simply when you find
something which works, which looks great, which
our clients approved, e.g. or which you just think
it looks visually appealing than simply go with
that and move on with that. But start and make sure that
you have coherence spacings. Make sure you have
coherent values. So what that means basically
is if you have chosen AT, then stick with AT, don't go about your way to try to, let's
say include here, 60 in here for you because your layout is going
to break down, your spacings are not
going to be coherent. Your design is not
going to look coherent, and therefore is going
to be nightmare for your developers to develop it later because you can
simply tell them, Okay, spacings between e.g. H1 and my image are 40. They will know and they
will include that inside of the code for all
of your designs. So just make sure
to be consistent, as consistent as possible. So if you're just
getting started because this class is intended
for really the beginners. If you're just getting started, make sure when you create your first elements,
if you like, how it looks like,
make sure to use your sizes throughout
your designs. Because as I said, going to be much simpler for
you to remember what you have used a previously for
all of those spacings. And it's going to be much more simple for your
developers to develop it because they will see your
spacings much more easily. If we go back to XD, what I want to show
you four at the end is basically you can position
these in a stack. So I already told you
if we click right here, you can see that we
have two O2 right here, which is obviously way too much. So what you can do is click
here and then click right here and drag or you
can manually adjusted. So let's say I want
to put it to 18. And this is how the
data looks like. So I can jump right here and
change this to be like so. And the great feature
about the stacks is you can double-click right
here and organize these. So if I don't like this, I can simply switch it around. So positioned is to be on top, this to be on the bottom. And I can simply go back and forward between those elements, which you can also do is do that inside of the
horizontal stacks. So we are at horizontal
stack if for some reason I want to
put this right here. As you can see, X d is
going to switch it easily, but it's not going to align it. I need to align it right here because this image goes
all the way to here. If the image goes or
where my grid is, then it's going to simply
align it to that value. You can see how simple to use. These stacks are,
how great they are, how easy they are to
use with your rhythm. You can use the repeat
grid in Adobe XD, but I really much
more preferred to use stacks because they give you much more control
over your layout of your design and
over your spacings. So basically that's it for Adobe XD and I really
like to use it. I really encourage
you to use it. And if you haven't used
it or haven't tried it, make sure to do so
because they have the free version and you can always use
that free version, you don't have to pay for it. If you're not sure about it. If you want to explore
a little bit more alert and Figma learned
sketch, e.g. I. Really encourage you
to try Adobe XD, give it a try, and try
all of these values. And of course, I'm going
to leave the links to everything I mentioned
in this class. In the PDF file, you can
simply open it up, click it, and it's going to
take you to all of these things so
you don't have to browse for them yourself.
69. SECTION 8 ASSIGNMENT: Your assignment for
this section is just to play around
with different grids. Make sure to try to create, let's say a desktop grid, tablet grid and phone grid. And trying to include
different amount of columns with different
amount of a gutter width, e.g. and the column width. Just try to play
around and try to see different results
that you're going to get. Also play around with the
color of the actual columns. And just to see what
works better for you. Maybe for some people,
blue works better. For some people read, works better for some people, black works better just
for their vision sake. Try to understand
what works for you. Try to practice and see
why these features are so important once we actually
get started with design.
70. SECTION 9 Typography and Font Pairing: One of the crucial part
of any design typography is there alongside with
images to tell a story. And the better impact the topography will
have on your users, the better the story
is going to be told alongside with the images. So in this section of the class, we're going to talk
about typography and especially font pairing. How to pair your fonts
in different ways. And what are some
different fonts that you can pair together? So let's get started.
71. Typefaces VS Fonts: One of the main mistakes
I see young designers make is they're calling fonts, typefaces, which is
not really true. Typeface is really
a family of fonts. And font is just a variation
inside of that family. Let me give you a quick example. Just imagine you are
using Roboto font, e.g. and then inside of
the other water font, you have bolt, regular,
tin, ultra bold. All of these are fonts, but report itself is a font. Family in debt is the key misconceptions
that designers have. They're trying to
push this notion that font is everything
when it really isn't. What you can have is different kinds of font
variations inside of the single-family or a bottle is really good example because
you have Roboto regular, Roboto normal and then you have something called roboto slab, which is completely take font, really fat lines, and it's
really used for print mostly, but you can also use it in
some kind of bold web design. But that is the
point right here. Don't try to mistake fonts
with font families because font families can have multiple different
fonts inside of them. And fonts are just variations
inside of that font family. As I said, there can be multiple fonts inside
of a single-family. So just keep that in mind
and don't be confused. You can use the entire family or font inside of your design, or you can just use one
variations such as, let's say in this example, Roboto regular or Roboto bold. We are going to come to it in just a few videos in this class. But I just wanted
to point that out.
72. Font types: Oftentimes when I interview young designers on
when I speak to them, they don't really know what's
the difference between Serif and Sans Serif
when it comes to font, It's really super simple. And I went ahead and found
a really good article. I'm going to link it in
the class resources file. So make sure to check it out and read it for yourself
because we're not going to dig too deep
into it into this video, but I just want to
quickly show you what are the differences
between serifs, sans serifs, and when
each of them is used. So here we have that
article which I mentioned and it's
from adobe.com, Creative Cloud design discover. And I'm going to leave
the link to this article, as I said in the
class resource files. So you can see some
examples right here. Perhaps this doesn't look
to distinguish to you. Maybe you saw fonts like these. Maybe you saw fonts like these. But what is really
the difference between Serif and Sans Serif? So here we have the clue in the name and the main
difference between these fonts. So these things at the end of
the letter itself are surf. And you can see right here, we don't have them
that sand surf, if I'm not mistaken,
that's French. So without these
serifs at the end. So that's the main difference between serifs and send serves. Now, when can use them, you can see when to
use serif fonts. So it's going to
go really in depth about when to use them
and how to use them. You can see them in
print right here. So make sure to check out this article to
learn more about it. And of course, you can explore further about when
to find these. But in a nutshell, when to use serifs and sensors, it's really super simple. It's, it all comes down to
the topic of your design and to the design direction of your design and what
you are designing for. So e.g. if you are designing bold website design,
maybe something new, something fresh, something
for younger generation, You're not going to use serifs, which are the fonts
with those things. At the end of each letter, you are going to use
sans serif fonts because Cera fonts are really attributed to something
which is old. And if you're designing for
something which is old, e.g. you're doing some kind of
vintage website or you're doing some kind of a vintage car show maybe or something
they resolved. Then you are going to
use the Serif fonts, which have those things at
the end of the letters. But generally the
rule of thumb is if you're not designing for
something which is traditional, which is elegant, which is old, then you're going to use these sans serif fonts
because these are more modern fonts and
more available to use, especially in web design, because they are working online and they are optimized
for working online, for readability,
for accessibility, for scalability, for
all these reasons, sans serif fonts are
much better to use, especially in website design. But as I said, you can still find thousands of different serif
fonts if you want to use them in your web
design or app design. All of this depends
on your topic, what you are designing for, who is your target audience, and what you're
trying to convey, what kind of emotion, what kind of fulfilling with
the font you are choosing. So just keep those things in mind when you are
designing for the web.
73. Font weights and how to use them: When you start using
a font family, depending on the family itself, you will see it has many
different fonts inside, which are labeled
different names such as regular teen bold, extra bold, italic,
bold, italic, and many, many, many more, depending on the
font family itself. These are called weights. And how to use these weights
in different scenarios. That's what we're going to
talk about in this video. And I'm going to show you
an example and give you just an idea as
where to use them. So here is the example, and I am in Adobe XD, this is the design file from
one of my previous courses, and I just using it as an
example just to show you all of these different font
weights and how to use them to accentuate what you want
to show in your designs. So what we have right here
inside of the hero section, if I select it and come right here to the
right-hand side. So let me just choose
this one. There we go. You can see the
font name is Open. Sans, size is 24 and
the weight is regular. So why is it regular? Well, because I would just
want people to see this first, which is obviously bigger, more pronounced and it
has different color. That's called point of
attention because I want to point their attention
to this white text first, because I wanted them to
read this text first. Therefore, I want
to make it look different than this
text at the top and the bottom while
they're here in the center reading this
heroin is boutique hotel. I want him to see that there is another text up top
and at the bottom. And then I want to read them. I want them to read it
because they are there. So if I go and quickly launched
the prototype right here, you can see how that looks like. So here I am in the hero section and all they can see is this. So your eye is naturally drawn to the
middle of this page, to the middle of this image. And you can read
this hetero means boutique hotel after debt. You can see all there
is another texts there. Welcome to Halloween's
boutique hotel. Okay, your home, away from home. So that's the font weight. That's how to use them. And you can notice that
this font looks different. You can see it's serif, as we mentioned in
a previous video. So why is that? Because the branding of this hotel and of this
design really requires it. And that's why I went
for this sort of look. So if I choose that, you can see it's called
Playfair display 70, which is the font size, much bigger in this case. Because not to mention, again, all of these things
which I mentioned, but to draw attention to it. And then you can see cold bold, italic is the weight. It's Italica. So it's kinda lean towards the right-hand side
and it's bold. It's more pronounced
than in regular font. So that's how you can balance your font weights in
many different examples. And if we scroll a bit down, you can see once again, here is that same font now
in a different color to achieve the contrast between white background
and font itself. And you can see your
home away from home. So once again, we're going
back to that tagline perhaps. Then you can see something
really interesting right here. So if I select this one, you can see it's
Open Sans 24 bolt. And if I select this one, Open Sans 24 regular. And you can see
just by selecting bolt and regular and
choosing different color, I am pointing their direction into and pointing
their attention into a different direction. In this example, you can see, I've wanted to read this subtitle because
it's really important. I want their mind to just pay attention to
these three things. So king size beds, food included beach
access because these are really important key
selling points for this particular website to attract new visitors
to come to it. And then if they
want, of course, they can read the text below it. So that's why this one is
bold and this one is regular. This one has a slightly
darker color to it than this one because I
want her eyes to be drawn to this text first. Same story like with this
and with this right here. If we scroll a bit now, we can see the same
texts right here. Headwinds boutique
hotel is fine. And here we have a
quote from one of our previous customers to this
website or a testimonial, you can see Jenny from London, but this one is much
more pronounced. It's much bigger. So if I
select it and come right here, you can see it's
Open Sans 36 italic. And it has this darker
color than this one, which is Open Sans 24 irregular. So once again, I want
them to read the quote first and then see who
is the quote from. The name in this case, doesn't really matter too much. You can get rid of it
for the layout segues. It doesn't matter what matters is their experience
with this hotel, because the next customer you
are trying to acquire for your hotel is going to want
to see that experience first. Didn't really care, is it
Jenny's it mark, is it whoever? They don't really
care, they really care about the experience. And then you can
see the contrast below it with the
book now button, which is blue and it
has white text inside. Once again, for the
contrast sakes, if we scroll a bit down, you can see this
throughout this design. And not just this design, but every single
design I create. Because I always think
about these things. What's more important? What's less important? What people are
going to see first? And how can I accentuate that with my fonts and font weights? You can see right here. So for the names of the room, font is much bigger than
all of these down below. And you can see this with
the features, yes and no. Of course we are then choosing different colors to show
which features are available, which ones are not. And then we have the
different styling once again with the link below. So learn more, they can click
that link, it's different. So when the, how're, they
are going to see the change. So you have to think about
all of these things. Here. You can see the features. So we have private pool, we have beautiful garden, we have private parking. All of these are super easy
to read that with a purpose. That's why I chose this
font, which is much bigger, which is a bit different,
which is boulder, has darker color than
the font below it. Once again, I was using
Open Sans as the main font. This one right
here, and Playfair display for this big bold font. Once again, if we
scroll a bit down, you can see this
happening again. So visit Delos,
which is the title, and this is the text. So if I don't want
to read this text, all I can see an all I need to know really
is visit Delos. So there is something
to do at displays. And if we scroll a bit down, once again, book
your stay with us. So it really invites them to book their
stay with this place. And once again, you can see
this contrast right here happening with the
white background and this dark gray text. And final example is
sign up for newsletters. So it's really calling you
to action, to take action. And then this is what you see. First, sign up for a newsletter. This is what you see second, and that's once
again with a purpose because I want to
pronounce this, sign up for a
newsletter because that is the action I
want him to take. And then once I have their attention with
sign-up for newsletter, sign-up and receive news
and updates and blah, blah. That's really secondary
because I want them to stay on this part of the
page as long as possible. So that's how you can use fonts, font ways, and different colors, and perhaps even different
font families to accentuate what you want your
users to see in your page. You can explore this
in a lot more details. And depending of your color
scheme for your project, this can be really even more complex or even simpler than the example which
I just showed you, which just has a
few colors in it.
74. Choosing fonts: When it comes to choosing
fonts for your project, there are really two
main considerations. You should have existing fonts and the main theme
of the project, existing fonts are
obviously the fonts that your client was
using previously. Then you can take a
look at those fonts. See entire font family, see what it has inside, and perhaps think about how you can accentuate it
a little bit more. What we talked about in a
previous video of this class. How can you use them a little
bit differently to show some main features
of the product or a service that your
client is offering. And then you can take
a look at the colors, see how the previously used that font family with
these different colors. Perhaps if you have
the ability to do so, maybe you can change
those colors. Maybe you can include some darker colors or
some lighter colors. Maybe you can add shades of these different
colors that they're already using or introduce new colors entirely to
the project to bring more life and to bring more adept to the project
that you're working on. The other way to do
it is with new fonts. And when you're
choosing new funds, make sure to pay
attention to what I already mentioned in one
of the previous videos. Deemed of the project itself. Obviously, you're not
going to use these bold, bright, wacky fonts. If you're doing
website for a bank, maybe because bank is trying to convey a feeling of trust, of security, of stability. I don't know nobility
in some cases. So you want to pay
attention to that. What is your project about? What is it tried to convey
to the users themselves. So therefore, you have
to use these fonts which are going to correspond well with the team of the project. Of course, if the
project is fine, Let's say you're
doing a website for comic book company
or toy store or any kind of children
related contents such as games or flushes or furniture, whatever it has to do with kids. But even with kids, there is still some limits as to when you can
use certain fonts, how you can use them. Because heritability
is really the key, especially online,
you want to make sure that your fonts are
readable at the end of the day, no matter who is your
target audience, no matter if it's
serious or playful, if it's colorful,
all monochromatic, you still want to be able to tell if it's readable or not. And how you can do that is to test it out on
different devices. When you create a website, e.g. you have to test it
out on big screens such as desktop screens
and laptop screens, but also you have to make
sure that it works nicely and that is readable on
smallest screens such as Forms. If you're using
something like Webflow, it's super easy to do. Just create a
responsive page from your design and simply
send yourself the link, perhaps send that link over
to somebody who is older, the new maybe, and
see if they can read easily if the
color contrast is good, if the font weights are good, if your color rhythm is good. So they can really read it out. They can really understand it, and they can see
what you were trying to convey in that
particular page. So make sure to always test, make sure to always
think upfront. Who are you speaking with? Who are you talking to? Who is your main audience? And are the fonts readable using these colors
against this background?
75. Font Pairing: Sometimes in some examples, you want to use
different font families, like in the example which I previously showed you
with that travel website. Maybe you want to show
different section of that page or a mobile app
using certain font-family. And then another section, perhaps you want them to feel like they're
reading an article. Therefore, you're not going
to use some wacky crazy font. You just want to sum a regular, plain old font that's
really readable, understandable, and super easy for them to see and to read. So therefore, you
have to know about font pairing and how
can you pair funds? Well, there are
different online tools which can help you with that. And I'm going to show some
in this particular video. So here we are with the first of these cold
types aspiration. And I already created
a YouTube video. I'm going to link it in
the class resources. You can just click and watch that entire video where I explain all of these
different tools. But I'm just going to give
you a quick overview. In this particular video, you have inspiration
and you have guides, guiding you how to pair
these different fonts. Once again, it all comes down to what it be already mentioned
a few times in this video, the topic of your project and the audience you're
trying to speak to. So therefore, you're not
going to use some wacky fonts as it keep mentioning
to bankers, e.g. or some serious audience. But you can go the other way
around with children and use some more playful colors and
use some more playful fonts. So type inspiration is the first website and you can choose many
different styles. You can see Open Sans and cream. Some texts are the
fonts used right here. These are the colors. You can choose
different colors from. Here you can choose
heading fonts, you can choose body fonts. Heading font is this
one right here on top, which is used for
headers or for titles. And the body font is
this one right here, which is used basically
for paragraphs and for all of the contents
which has more text in it. And it's more intended
for longer rates. Basically, titles
are more glands, but also you can read them
and Atlanta really quickly, but paragraphs, you
can really have to spend your time reading them. And that's the main
point right here. With paragraphs, you can explore with various different
fonts and font weights. But with paragraphs,
you want to make sure that your font is readable, that the color has nice contrast
against the background. And it's really not
too much strain on your eyes to spend a longer
time reading this article, especially if there
is a longer article, if you're doing a website for, for news e.g. that's extremely important. That's the key
problem you should tackle first and right away
in that particular project, because the whole point
of a news website is people spending a lot of
time reading these articles. Therefore, you want to have a great font which
is really readable. And these titles
which are really glanceable because
you don't want them to stick out too much, especially in those
types of websites, because you want
them to keep moving into read these
articles down below. So explore this website. As I said, I'm going to
point to the video which I already created on
my YouTube channel all about this stuff. And I explain this
in more detail. And I'm going to leave
the links in that video, so make sure to check it out. Font pair is another one. So you can see right here we
have sans serif serif slab. So you can see it's kind of fat monospace
Display Handwriting. So there are bunch of these
different font styles that you can choose from. And you can see all of these Important
fonts and main font. You can see combinations
right here, you can see more font pairing. So let's choose
display fonts and it's going to show you all
of these display fonts. You can explore them. Then we have this, which is font pairings,
dot py people.com. You can select a font
family right here. And then after you do that, you can choose different
texts style and the style. So this is regular,
this is bold, this slab secondary texts, which is that paragraph texts
which we just mentioned. And then it's going to give
you available pairings. And finally, font joy, which is super,
super simple to use. So we have Generate
and it's going to generate a different
font pairing. You can choose more contrast, or you can choose more
similarity or balanced contrast. You can go between black and white to see how it's
going to look like. Especially if you're designing a dark mode on your
website or your app, then you can see font pairings
and different text sizes, different weights and
so on and so forth. So here we have Montserrat, which is this one right here. Here we have this
mocked-up Varney font, which is this one right here. So you can see H1, H2 and paragraph or heading one heading two paragraph or a main title, subtitle and paragraph. Sanchez is the text for
the paragraph itself. So you can click. It's going to take
you to Google fonts, which is what this
Sanchez font is four. And then I can click right
here and I can choose, I don't know, maybe this one just to see
how it looks like. If I don't like it, it's going to go ahead
and switch these. So let's say, I don't really
like these or this one. Perhaps I can go
with something a bit brighter like this one. I can lock it here. And it's going to
lock this Montserrat. I don't really like this one, so I can go ahead
and generate more. You can see
Montserrat is locked, perhaps I like this one, but I don't like this one. We can get to the point. You can still scroll
all the way down. And at the end, when you find the perfect font combination that
you want to use, as I mentioned, you
can click here. It's going to take
you to Google fonts. Make sure to download
Montserrat in Montserrat font family,
then cut them around. And pylon Quinn in this
particular example, makes sure to download them all, installed them to a machine. So you have all of
these different font weights, like I mentioned, regular bold, and so
much more. There you go. That's how easy it
is to Font Pair. Make sure to pay
attention to the following, to the contrast, to the readability
and to the topic of what you are designing
for in the first place. You get all of these sorted out. Then it's going to
be really easy to design and it's barely
going to be easy to test. And speaking about testing, make sure you always
test with your audience, especially if you
have access to them. So e.g. if you are
designing for children, maybe you can have
access to children and see how they're interacting
with the prototype, how they are interacting with the website, with
the mobile app. Is it easy for them to understand where they
need to click or they're stumbling across these
different elements of your design may be something is dragging too much
attention from them. Or if you're working
with the older audience, maybe as I keep
mentioning the banks, perhaps you have access to the people who are
working in the bank. If you're working for a bank
in this particular case, maybe you can test
it out with them, give them a concrete task, see how easy for them
is to find that task, how easy it is for them to navigate around
your app and how easy it is for them
to read the text you're trying to show on
that particular page.
76. Font scale: When you are designing for
the web or for mobile apps, you want to have
consisting scaling across your font sizes
and font weights. And this can be achieved
with a font scale. You can create font scale, so it's much easier for
developers later to understand which kind of
font size is for what, and that's what you can
include in your style guide, just to show them
alongside your colors, alongside your imagery, your
styles, and so much more. So in this video, I'm
going to show you how to create an
easy font scale. You don't have to
use this approach. You can find other
approaches online. There are literally dozens of different approaches online. See which one works for you, your project and your
scaling purposes. So let's get started. So here we are in Adobe XD and
I'm just going to show you how to create a quick font
scale using Adobe XD. If you're using Figma Photoshop, whatever you can
create that there. But for this purposes, I'm going to use x
D because I really like it and use it
every single day. So I'm going to click
T to create H1 e.g. then what I'm going to use is, let's say a bottle like that. Instead of regular,
I'm going to go with, let's say black. And I'm going to go
with size of 80. So really huge. And this is going to be my H1. Perhaps, maybe even greater, maybe 88, something like that. There we go. Then I'm going to hit
Control D or Command D, and lower this down to
maybe something like 64. There you go. Instead of black, I'm
going to go with bolt. And instead of H1, I'm going to call it H2. So what are created
right here is a clear distinction between
Heather, Heather to here. The one is something
which I'm going to use in my hero images, e.g. in the center of design itself, in the center of
this hero images. Unlike the example which
I showed you previously. But this is just
more accentuated, bigger, bolder,
black in this case, but this one is bold because
perhaps I want to maybe use it as the title of my sections maybe or
something like that. So therefore, it's bold and
not black and it's 64 88. So if we move down
a bit further, you can create an
H3 in this case. And instead of 64, maybe we can use
48 for this case. And instead of bolt, actually no, let's
keep it bold for this. Then if we go a bit down, we can create something like H4. And instead of 48, maybe we can go with
40, in this case n. Let's use irregular this time. So you can clearly see the
distinction between these. So if we go a bit down H5, and in this case maybe we can use something, I don't know, 24. Maybe, there we go. Perhaps we can use
this as paragraph text or some examples or
something like that, something which is a bit
smaller and H6, let's go with, I don't know, 16 maybe in my cases are really don't want
to go any further than 16. So we have H1, H2, H3, H4, H5, and H6. Perhaps you can rename this H6 and call it
paragraph texts. Perhaps you can show something like that to your developers, see what they think. And what you can also do is hit Control D One more time on each of these and type in alphabet. So a, a, B, B, B, C, C, D, D, E, and so on and so forth. So you can type in the
entire alphabet and show font weight and the font size in this particular example
about the alphabet, or something else
that you can do is you can use something like, I don't know, Lorem Ipsum
text or something like that. I don't have the keyboard
shortcut right here, and I don't have the plug-in
installed right here. So let's go with this. So Lorem Ipsum ROC met, perhaps I can copy this text and then I can do the
same with this one. Simply paste it in. And what this is
going to allow you to do is show to your client and to your developers how
particular text is going to look like in
particular use cases. So let's say that I purposely started with
this particular color. And why I chose to do so is just to show you main
differences between this text. But in this particular case, what I would do purposely
is I would quickly go ahead and change this color to something much,
much, much darker. And perhaps save it right
here as a color swatch. Or I can go ahead and edit
right here to my colors. Then what I can do is. Get rid of this one. Perhaps I can go right ahead
and choose the same color, but go a few steps up
to something like that, then choose it to
be different color. What you can do is give your
swatches names right away. So this one is H2 color. There you go. This one is H1. And maybe we can
go even further. Sorry, Let's save this as an H2. So I can go back and use the H12 and then go a step up,
something like that. Save it out right here, save it out right here. Call this h three. There we go. And then finally,
maybe I want to go with something even brighter. For this one, perhaps, maybe not, but it's
all really up to you. Perhaps something like this. There you go. And I can give it a name of H4. In this particular case, you can see they're
really similar. But there is the
point of this video, but your clients perhaps
have the main color, let's say the blue is
their main colors. So in this case, we can go with something
like three C6 FF perhaps. So really bright
and strong blue, maybe that's their main color. So how can you incorporate
this color into your design? Obviously, you're not
going to use it for this. This is really for
hero sections, stuff, which I
already mentioned. Perhaps you're going to
use it for each three. So three is C6, F, F. And as you can see straightaway, it looks much better in this example than it
was in this example. Why is that? Because if you use it for the biggest text size that
you have in your design, It's just going to steal the user attention
from everything else. That's not something
that you want. Text is really there
to explain things to guide your users to
what they need to do next, and to really help them out, achieved the goal for their visit on your particular
website or mobile app. So in this case, I would use color for text,
something like this. And I would not use it for paragraph texts because as
I mentioned previously, you want your paragraphs
to be readable. You want them to be
easily understandable, and you want your
users to be able to navigate easily
throughout your design. So one final thing
which I forgot to do is I want to save this color. We already have it. There you go. So H5, I want to save it out. There we go. H5. And we're going to use the same color for
the paragraph itself. And one final thing which
I want to do is to select all my font sizes and come right here to the character
styles and click there. So you can see it's going to
assert something like this. But what I can do is go
Control or Command Z. Click right here to save this
one to be the first one. And then like this
and down like this. And just go up and up and up. There we go. And of course you
can rename them. You can come right
here and type in H1. And you can do so with
all of these other ones. So H2, H3, and so
on and so forth. I'm not going to bother
you too much with it. But the whole point right
here is to rename these. So as I said, it's much more easier for developers
later to understand what you were
trying to convey if you are not going to develop
this design yourself. So there we go. That's how super
easy it is to use. And you can see if you mess up like I did just previously, you can simply see all k's
in H1 selected right here. Or if you accidentally
changed the color, you can go ahead and see, okay, it's an H1 click right there, and it's going to go and use
that corresponding color. So you can see how
super simple this is. And I'm going to
provide this file, which I just showed you as a practice file for you
so you can test it out. Poke around, exploited
for yourself, perhaps playing around with these different colors
which are just showed you, or maybe different font
families entirely. So we use Roboto in
this particular case, maybe you want to
use something with a surface inside like
Playfair display font, which I previously mentioned, or do you want to go
even bolder than Roboto? You can do so right. There. There we go. Those are the font scales, and that's how to use them. As I said, you're going to
have this practice file, make sure to exploit it, makes sure to play around to
achieve a perfect result. Or if you don't like this
eight pixel approach a part, as I said at the
beginning of this video, you have bunch of these
different examples online. Makes sure to explore them for yourself and see what
works best for you.
77. SECTION 9 ASSIGNMENT: Your assignment for this
section is to use one of these different tools which I
showed you in this section. And try to pair a different
fonts and try to see, do they work together? If they do, why do
they work together? Which one works better
for the headings? Which one works better
for paragraphs, e.g. and tried to experiment with different colors using one of these tools which
I just showed you. And try to understand
which color combination, which sort of fun combination
you actually like the most. Maybe even experiment with
different sizes and see which size makes the better
impact to you as a viewer. And it's obviously going to make the same impact for your users. So just experiment, have fun
and learn something new.
78. SECTION 10 Iconography: As a design assets, icons are incredibly important
because picture tells 1,000 words and icons are
there to prove that, right, you can use different icons
to tell a better story, rather than just using
a bunch of texts, you can replace all of the
texts with a simple icon, which is going to tell
a better story than all of that text which nobody
is going to read after all. So icons are
incredibly important, but which sort of styles
are you going to use? How to pair different icons, where to find icons? That's what we're going to
talk about in this section.
79. What Are Icons: Icons are graphic elements
which are used in your designs to help your users understand
your designs better. They are there
just to correspond with the text or images better. Make sure when you
are using icons not to overdo it because the whole point of
icons is to help your other content,
not oral weldment. What that means basically is
when you are using icons, make sure that you
are using them in specific places where
it does make sense. Makes sure that when you have multiple spaces in your designs and a huge space
in your designs, not to use icons because
that way images are going to look much
better in your designs. Icons are also used to explain to users what they have to do a
little bit better. What I mean by that is if
you just cannot use images, if you just cannot
find images which are going to explain
complex situations. Well, if we cannot use
video in certain places, then icons are much
better way to do it, because you can always
include multiple icons to explain multiple
topics in a single space. And that's why icons
are a great approach and a great way to
use in your designs. Icons can be simple or complex. They can be colored
or black and white. And we're going to
talk about all of the classifications
in the next videos, where to find them
differences between different icons and how to
use your icons properly.
80. Different Types Of Icons: There are many different
types of icons. And depending of why
you are using them, you're going to use a certain
type of icon where that, that outline filled
in with colors. And there are multiple
ways to use icons, which we are going to
discuss later in this class. But also there are
multiple categories. So here I have material icons, and you can see that right here on the
top we have outlined. And you can see all of
these outlined icons. You can see that the basic
premise of outline icons, but not for all icons, especially for this
heart you can see right here is to have empty space inside
of them and then just have the outline
outside of the icon. If I switch it back to field, you can see how all
of them look like. But once again, you can
see with a search e.g. it just doesn't make sense for some icons to be
filled completely. Because if we feel this
search icon completely, then it's going to
lose its purpose. It's going to disappear. This whitespace in-between
for this logout, the same for this phase, the same for this
favorite border. The same if we go
with the rounded, basically it's just
going to show you the rounded corners
of these icons. If we go with sharp, it's going to show
you the sharp edges. And it's going to basically be, all of these icons are pixel perfect because majority
of them are SVG. And we are going to
discuss that a little bit later in the Adobe XD
part of this class. When I'm going to explain different file
formats and how can you work with different
file formats. And finally, we have to
turn right here to tone, as the name suggests, has all of these outlines, all of this filled in colors. But as well also shows you these two tone design,
basically one color, one tone is for the
outline in this case, and one tone and one color is for the in-line of this case. Once again, depending on
which icons you're using for which purpose is going
to show differently. And if I show you right
here in this example, this is the premium pack
from Envato Elements, which you can see right
here are the colored icon. If I click right here to enlarge this image and show
you the difference. So these are the colored icons and these are the outline icon. So you can see straight away the difference
between these icons, basically in the outline, same like I showed
you right here on this free back from
Google material icons. By the way, all of
these resources which I mentioning are going
to be linked in a PDF. Make sure to download
that PDF and to explore all of these links
and to access them yourself, simply click the link you want. N is going to take you
there in your browser. If we go back to
here, as I said, we have these outlined icons and we have these outlined
icons right here. Difference between these two is obviously the thickness
and the style. So if I take you back right
here to the material icons, you can see they are
extremely simple. They are really simple to use. But if I take you right
here to these travel icons, you can see that they
are much more complex. They have richer
elements inside. They have multiple complexion, they have different
strokes even. So, they're really complex. If you want to do
stuff like that. Once again, depending of
the project in question, you are going to use either these simpler icons are
these complex icons. And finally, if I take you
to these colored icons, you can see that we still
have all of these strokes, but now we have color
and with colored icons, you're going to notice
sometimes that they're using one color or
like in this case, they're using multiple colors. So you can see we
have green, red, we have this dark gray, we have this light gray, and we have this
almost white color. We also have this teal color, we have this yellow
color, red color. So depending of the project in question and what you're
doing with your icons, you're going to either
choose one of these styles, either ones, which I showed you right here
with the material icons. So really simple styles. Or if you're after these
complex styles once again, then you can choose either
outline or with color. And of course, because I'm using Envato Elements
for years now, I know that all of these icons
are really high-quality, so you can adjust
all of these colors. So e.g. I want to use
a my brand colors. Let's say that your
client has two colors, e.g. blue and red. Then if we go back
to these ones, you can adjust all
of these colors. So instead of yellow instead of green instead
of all of these, let's say that you are
using blue and red. You can easily achieve
that result by simply adjusting these colors
in your tool of choice. For this class, we're
using Adobe XD. I'm also going to show that a little bit later and how you can adjust some of these
icons to match your brand. But that's the whole premise
of these colored icons. So once again, depending
on what you are doing, what kind of a project
you're working on, your project complex,
what are you trying to describe to
her visitors into users? Is it something really simple? Then you're going to use
these free material icons. What are you can even use
premium icons which are as simple as those
material icons. Or on the other hand, you're going to use
something much more complex, like these premium icons which I showed you from Envato Elements.
81. Icon Libraries, Packs And File Formats: Depending of what you are
going to be using your icons, you're either going to choose
icon library or icon pack. Difference is in libraries there are sometimes thousands of different icons like the
material icons I showed you. And it's not really
feasible for you to download the entire
library because as I said, sometimes those
libraries can have up to 10,000 or 15 or 20,000
different icons. So to download and
to sort through all of those icons
is really difficult. Then you can use something
called Icon jar, which sadly does not
work on Windows, but it does work on Mac. So if you're using Mac, then you can use icon
jar really easily. Navigate your way around
these different packs. Majority of these packs are premium so you will
have to pay for them. But if you're using something
like material icons that you can get away
with using it for free. And we're going to touch on free versus premium a little
bit later in this class. But for now, let me quickly explain these different file
types and file formats. So if I take you right
here to Adobe X d, This is my chat, a UI kit, and you can
get it link is going to be down in the PDF
if you want to, but it's not mandatory. I'm just showing you
here as an example. So what we have right
here is a UI kit, but you can just
imagine it to be like a project you're going to be
working on for your client. And let's just
imagine that you are going to be using some icons. Then where can you
find these icons? Web like I showed you. You can find them online on these premium resources and premium websites like
Envato Elements. And I'm actually
going to open up this back in a second
just to show you. But if I go back to XD, you can also find this
plugin menu right here, and you can use something
called icons for design, e.g. there are many different
plugins out there, and you can click right here
to access the plugins menu. And then you can simply
search icons here, press Enter or Return. And it's going to
show you all of these different icon packs. Be warned that majority of
these have free versions. So not all of the
icons are free. They are just having
some free versions and free icons that you can use. Because majority of these are icon libraries, as I mentioned. So they're giving you the
option to use a free icon. So if you install one
of these plugins, just be warned that
it's going to show you all of these icons and
you're going to think that, yes, all of these are
free, that's great. But they're actually not. They're just giving
you some free options, but for majority of icons you
are going to have to pay. So if we go back to here, if you install this
icons for design plugin, it does work at the moment
of recording of this class, but just make sure
to understand that. It's not in my ability to make sure that all of these plug-ins
work all the time. Because just like the software, just like everything in
life to just come and go. So make sure to browse these plugins if
you're using Adobe XD, make sure to check out
user voice and to checkout Adobe XD official blog just to see when they update
these things, especially for the icons. Because as I said, sometimes these plugins just come and go. Developers get bored and they don't update them for months, so they don't work properly. And just make sure
to understand if you are going down
this route using these plugins in Adobe
XD makes sure to familiarize yourself if the
plug-in actually works. And if you have
the option to use these icons in your premium
or your free projects, which is really important
because sometimes these icons can be used
for pre free projects, but sometimes they
can be used for pre and premium
projects as well. So just make sure to
familiarize yourself with the option they
are offering you. If you're using a tool such
as Envato Elements, e.g. they're giving you the option to use these assets
however you want. And if we go back to Envato
elements right here, you get the option
to use all of these. So from stock video, music, sound effects,
graphic templates, UI kits, photos, web templates, 3D models, and icons, e.g. you have the option to use
them all however you want, whenever you want in whichever, whichever project you want. But of course, it's premium so you will
have to pay for it. Just make sure to understand if you're using free software, free plug-in, free icon. Make sure to see the
license on their website. Or if the plugin has a website, makes sure to familiarize
yourself because the last thing you
want to do and to have in your life
is the lawsuit from somebody else who
created that asset. You are just thinking, oh
great, that's all free, but in majority of cases, vast majority of
cases, it's not free. You will have to pay
for at least some like those plugins which I showed
you that have free version, but they are not free entirely. So once again,
before we move on, make sure to whatever you're using to familiarize yourself. If you're just using material, that's fine because
that's open-source, created by Google, same
like Google Fonts. It's free and you can
use it however you want. So if we go back to here, as I said, we have
this icon for design. And if I have something like
heart typed in right here, what you can see right here is all of these are icon libraries, so it's pulling free icons
from dislike icon libraries. So this is the problem
straight away. This is the problem
which I mentioned in the first video of this class about constant
changing of styles. Because this is the key problem I am seeing with being
in designers out there. They just don't understand. They're using one icon
from one backward library, other icon from other
Packer library. And they just don't
have the consistency and their designs. A look not polished, not professional
digest look amateur. And you can really tell, not just as a designer, but as a client as well, who is not a
designer themselves. Once again, make sure
if you're using these, makes sure to familiarize
yourself and to use all of these from the same style and from
the same look and feel. Because once again, it will
just make your designs look not professional
and not polished. As you can see from this
feather icon pack, e.g. we just have one icon. But from this
awesome icons back, we have multiple icons, but once again, not, not in the same style. E.g. I want the outline icons because they will work
well with my project. But you cannot find
that style right here. For iconic, you can
find different styles. But what if you're
searching from other icon and you don't have it
in iconic. E.g. I. Want to use this iOS
heart empty, e.g. let's delivery. Maybe I'm working
on a delivery site. You can see that there is not a single icon from that back. So that's a problem
straight away. If you want to achieve
consistency and to make your designs look
professional and polished. So what can you do in that
case is you can either locate a library that has majority of these icons and use them for free if you're
getting started. But if you're already got started and you
have some traction, I really truly cannot recommend enough or service
which are going to pay and have all of
these icons available to you at your
fingertips at any time. I'm now going to show
you the premium pack. This is the big constant
which I got from, UH, it's a premium pack. But if I zoom in a
little bit closer, you can see that all of these
icons are in this style. So outline style, there
is no filled-in style, there is no anything else. Just outlined style,
which is great if you are using this style
throughout your project. So because this has, I think something like 240 or 2,400 actually. On
zoom a little bit. Yeah, I think it's 22400
because we have all of these different packs and I'd simply ungroup them like this. But I can browse
through online and see, but I think it's 2,400
different icons. So you can just
imagine that they have the icon for every single
possible occasion. And if you are using
this exact style, then you can use it throughout your projects,
throughout your design. Just make sure to use
this exact style to achieve that consistency
and that professional look. And you can do that because all of these
icons look the same. Because they are created by
the same team of people. You can see that all
of them look the same. They look like they belong
to each other in the spec, and you can easily
customize them. You can change the color,
you can change this outline, do whatever you want with them. You can see e.g. change this color and you can change the
thickness of the border if you open it up in Adobe
Illustrator file format. And I think this is the great time to talk
about file formats. So basically, file formats are really important depending of the project you
are working with. If you're working
with JPEG images, you don't have the
transparency option. What that means basically is whatever background color of your JPEG image
it's going to show. You cannot use that icon. You cannot change
its color without changing the overall
curl of the image. So basically it's just
a baked in image. It's a bitmap image. So when you zoom
in really closely, it's going to lose its
quality dramatically. So you cannot really use
it for web page projects, for our page projects where you need to achieve scalability. You certainly cannot
use it for print, because as soon as
you start printing, especially on larger prints, you're going to see
the loss of quality. There is also P and G, which is basically just a
bitmap image like the JPEG, but with the transparency. So with JPEG you
have the baked in background image and you
don't have any transparency. With PNG, you do
have transparency. But once again, because
it's a bitmap image, we still run into this
issue of loss of quality. So as soon as you
start zooming in, you're going to see
that loss of quality. So for something
like big prints, it's really a no-go
to use a PNG. So what can you do in this
case is I really truly recommend for all
of your projects to work with SVG images. What that basically means, if I go back to here, if I zoom in extremely
closely on this icon, you can not see any pixels. So if I take you back
one more time to this back because I download it for this particular example. So if I go back to Adobe XD, hit right here on your computer, open up BSD or AI. Because Adobe XD is
Adobe's product. And because adobe Illustrator
and Adobe Photoshop, which this thing is, are basically products of Adobe. So you can easily open up any
one of these file formats. And it's going to
keep the consistency is going to keep the quality. Because once again,
it's the product from the same company. So if we go back to here, PSD or AI is going
to open up into a folder with these
particular icons from Envato elements. So these are travel icons. And what we have right here is ai for Adobe Illustrator, EPS, which is also one
other file format which keeps the consistency. It's a vector file format like Adobe Illustrator, like SVG. So it's going to
keep the quality. But sadly, EPS is not
supported by Adobe XD. So all of these icons
are exactly the same, but in these different
file formats, what we have below
that is icon jar, which I mentioned previously. So if you're using Mac,
you can always open up icon jar and add them
to your collection. We have the PNG and I'm
not dead against PNG. You can still use PNG
icons and you can use JPEG images if
you want to, e.g. on social media posts, because they don't require
that great of a resolution. So you can still
get away with using PNG images if that's the
only thing that you have. But for anything bigger, e.g. print, or especially for something which people can
zoom in really closely, like web pages, web projects
and mobile apps are really truly recommend that you go with something like SVG. If we go back here, we have the SVG now difference between
these and you're going to see this in majority of other
icon packs and icon types. Is this when you're using SVG, it's going to separate these
SVG in majority of cases. And it's going to
show separate icons. So if we go back to here, you can see we have
explained and unexplained, which is basically the
amount of details. So if we go to here, we have color and we have
outline like I showed you. And it doesn't show anything
because you have to open up SVG directly from
folder, but they are there. It's going to show them
basically as these PNGs. So hopefully it's
going to show up here. So let me see if I
can switch this. Now because we opened up this as a PSD and AI, but
it doesn't matter. I can show that if
I open them up in a folder like this
or expand color. So these are the SVG icons. This is what I was mentioning, is going to show
them individually. So you can still drag and drop
this SVG icons from here, which I'm going to
show in just a second. But going back to this, what I would do in
these cases is used AI, because AI or Adobe
Illustrator is vector file format and it's not going to lose quality ever. You can use it for whatever type of project you're working on. You can use it for
small sizes, big sizes. It's always going to
keep the consistency of the quality and of the
details in those icons. So if we go back to
here what we have, we have color and color expand, which in this particular case
of this particular pack, is just the amount of details and richness
of the details. But in some other packs
you're not going to see that we have travel
and travel expand. So basically travel
is without color, traveled color is with color. So let's open up e.g. travel color because
I want to show how you can change those colors. And while this opens up, let me minimize this
and bring back this. Because I just want
to show that you can still, these are SVG. You can click, drag
and drop them into your Adobe XD file. And if I zoom in really closely, extremely closely, you can see that we don't have
any loss of detail. We have all of these details contained inside of this icon. And if I go back to this
icon pack that I just open, you can see how it looks like. So let me actually
delete this one. I can go back to here. Let me quickly
show this one just so that you can see
how it looks like. So if I open it up and hit Control Zero to snap into place, zoom in really closely on this. So you can see all of
these different shadows. You can see the quality
is really top-notch. So if we go back and select e.g. I don't know, let's
go with this one. Hit Control C. Go back to here,
control V to paste into whatever art board you have selected and you can
simply move it into place. Now, because I already have some colors pre-prepared
right here. If I want to fit this icon
to work with my style, what I would do is simply e.g. select this. You can hold Control
and click inside. And we have the
border right here. If we select this border, you can see that it changed and updated this to this color. And e.g. I want to do
the same with this one. Maybe I can do here. And we have this right here. So you can see and get
the idea of how you are going to adapt these to
work with your project, e.g. this is going to be
this light blue. And I'm going to use this
color to work with this. And perhaps I have this orange, maybe I want to use it
in right here for these. Perhaps I want to
use this to be, I don't know, white as well. We have the border, so. Let's go with this one. And for this red one, Let's go with this
one so you can get the idea of how easy
this is to adjust. And we're just couple of clicks. You can easily adjust these icons to work
with your style. Of course, this is with
the colored icons, so you can see how it is now. So if we take you
back to how it was before and how it is now. So you can see complete change. And if I take you right
here to the layers, you can see all of these layers. Now, what I want to show
you as well is this. So if you are using those
icons as the outlines. So if I go back to here, expand color, we have outlined and let's go
with the elevator, which is the same icon. If we zoom all the way close, you can see we don't
have any color inside. We just have this outline. So if I want to change this, what I will do is
simply click right here and you can see
that it updates in real time according to
my colors, which I need. So that's the option you have when you're using
these premium icons. And finally, what I want
to share with you is the actual export for
the icons themselves. So sometimes you're
going to export these icons for developers if
they're not using plugins, if turnout using Bridge
options like e.g. Zeplin, and they're
not using those. They are one too for you
to export icons manually, for them to use them
in certain cases. So you can do that
in Adobe XD as well. And to give you these
export options, Let's go back to here, and let's actually select the icon already
have right here. So I have these multiple
icons right here. So if I select this one, click on it and go
to the Layers panel, you can see it's Profile icon. So if I just want to
select an export, this one, what I would do is
hit Control or Command E. It will show me this dialogue. So once again, just
remember what we talked about a minute ago
about these file formats. So if I go back to here, what we have is P and G. So as I said, PNG is great for social media
and in my opinion, honest opinion,
really nothing else. You can click right here to
choose SVG, which is great. Once again, if you
want to export it for anything with high-quality
which requires quality. So make sure to do that. We also have PDF. Pdf is great to export
if you have e.g. style guide with
multiple icons inside, and you just want to export that style guide
for your client to checkout and to see if that's
something that they want. It's great for mood boards, e.g. so they can take that PDF printed out and
then make some notes, perhaps scan it and
send it back to you. So depending on the use case, PDF can really be useful. And finally, we have the JPEG. Jpeg is really useful if you just want to send
it to your client for review just to see if that icon is what
they really need. If that icon is something
that they like. So perhaps you are
going to use that JPEG, but for developers,
for development, for development purposes,
I would always, always, always
recommend SVG icons. So that's basically
it for icons. I really hope you
get the idea and you hope hopefully get the picture
about how to use them. Differences between packs,
premium packs, free packs. We're going to discuss that in a moment in a separate
video in this class, because I think it's
really important, especially for
beginner designers, what to use and where to use it for which
type of projects. Just make sure to use it
in accordance to license. So if you can use them
for pre projects and majority of icons out there
can be used for pre projects, especially if you're
working just for yourself, just for presentation purposes on Behance or
dribble e.g. debts. Almost always fine. But just to be sure, make sure to check
with the creator on their website just to see if you have appropriate license.
82. Free VS Premium Icons: Apart from the price, obviously difference between
free and premium icons is in variety and enjoys. So with free icons, as I showed you in that
plugging in the previous video, sometimes you're just going
to have variety of two, maybe three icons, but
with premium icons. In light of the cases, you're going to have hundreds of different choices
to choose from. So depending of your projects, sometimes those three icons
might not work properly. And more importantly, if you
are keep using free icons, which is fine at
the start if you're just getting started
in this business. But as soon as you
get some money, as soon as you've
got some traction, are always recommend for
you to use premium icons because that's going to
differentiate you from beginners. And it's going to show
to your clients that you care because you are going to give your designs this professional note
and you're going to give it a distinction
between all of these other designs
at the market. As I mentioned, I really
like to use Envato elements because on Envato elements you have all of these
different options. And I just showed you
the tip of the iceberg. And if I show you e.g. we use these icons and
they are from just icon, which is a great option
on Envato Elements. You can see that
this person created these icons and you
can simply click right here to find exactly
the same style of the icons we're just using. So if we go right here, you can see that they have
over 1,000 different assets. So if I click too
graphic templates and scroll down to here. Now, if we go back to
graphics and scroll down, you can see that we have these icons in the
exact same style. So if the consistency is
something that you like, you can always browse through these different packs right here on Envato elements from the exactly the same Creator and
majority of these creators are simply breaking down these packs from one
huge, gigantic back. Just so it's much easier for you as a consumer to
access these pegs. And once again, you
don't have to use Envato elements are
really like it because they are all of these things on Envato elements
which I mentioned from graphics to photos, to videos, to fonts, to music, to whatever else
you might require. But this class is
all about the icon, so that's what I'm
mentioning right here. Good. Just imagine that e.g. I. Was using I remember something like two years ago or
something like that. And I'm using this for
over five years now. This Envato Elements of you, I was using icons
from one Creator. It was not this creator if those other creator,
but it doesn't matter. I was using one icons for a
hotel project I was having. And then I had a car
rental shop project. And I use the same creators icon from Envato elements for that
particular project as well, which enabled me to
browse much more simply because I was working on two projects
at the same time. So I was looking at a one Creator icons and they fit said both
of the projects. So both of the projects
I was working on at the same time had the icons
from the same creator, but they look
completely different because on one website I
was using colored icons. On one website, I was
using outline icons, but they were from
the same creator, so it was much simple
for me to access them. Once again, you
don't have to use Envato elements just because
service that you want, there are thousands of
different services out there. I really like to
use them because as I mentioned multiple times, I really like how
you have all of these things right
here because there is not a project out there that it's not going to
require you to use photos, to use different fonts. And speaking of fonts, It's the same story with fonts, with images as with icons, when you are using
premium things. So premium icons,
fonts and images, it's going to really make your design look polished
and professional. And it's going to really make it stand out from the crowd. And it's really going
to hopefully attract clicks or binds or sign-ups for your clients as well because
it's going to look much more polished and professional
then the competition, because majority of competition, especially for smaller
businesses out there, are using websites
like Unsplash or using websites like
material icons for icons. And they all basically
look the same. So all of the designers
which are working on these websites are
looking exactly the same. So this is your key
benefit and points of differentiation
makes sure if you can, as soon as you can
to start using these premium icons and premium
services, premium packs, just to differentiate
yourself from the crowd, is going to bring your design much more professional
and polished look. And not to mention, you are
not going to get in trouble because as I mentioned
in previous examples, if you're using these
free assets online, you are going to
get in trouble if you're not using them correctly. So make sure you always to
check with the licensing. So if we scroll all
the way down here and we can explore the
license, click right here. So you can see once simple
commercial license, so you can use it for
whatever you want. You can register items
each time you use them. Clear guidelines for
what's not allowed. So you cannot resell, you cannot put them on on-demand services like,
I don't know, e.g. Creative Market UI. So basically you cannot
take whatever you find here and sell it as your own and
future-proof licensing, which means even down the line, if you unsubscribe
from their service, you are still covered by that license, which
I really like. So e.g. your client discovered
you are covered and you still have the access to all of these icons previously. What that means basically
is later down the line, if you're using one of these free softwares
and free tools, chances are a debt, especially with the plugins, which I mentioned in one
of the previous videos, that they are just going to
get bored with that project. They're going to kill
it and disappear. So later down the line, e.g. your client calls you, you've worked on a
website and you use icons from that
particular plug-in, e.g. but that plugin is
not existing anymore, so you cannot find
icons which you used in the project at
that particular time. You cannot find
those icons anymore. So what can you do? You're basically stuck. You have to find other icons which are not the
same as those icons. In turn, your design is not
going to look professional, polished, and coherent
like you did before. So you have to find other ways
to make that project work. That's why I like and
what two elements, because as it said right here, you can always go back, you can download, you
can take a look at your previous
projects and you can always download
these icons more. So once again, if your client wants you to work
on future pages, future screens for their mobile
app, future presentation, slides, whatever you're
working on in the future, e.g. they're just launching. You can always go back
to Envato Elements, always go back to that
particular category, that particular project
that you're working on, take those icons and still
continue in the same style, using the same icons, using the same service, using the same licensing
as you did before, just continue working
on that project. As I said, that's what I really like about these
premium services. And with free services, you don't get it. Caveat right here is
with material icons, you do get that. So because they are
free open-source icons, you can use them all the time. But we all know how Google
is with their products. So nobody guarantees you
that they are not just going to kill Material Design
icons at some point. So what can you
do at that point? Once again, I'm not
using this video and this class to pressure
you to purchase anything. It's completely up to you. You can do whatever you
want with your career. I'm not really pushing
my opinion on you. I'm just telling you how
your designs or watched and looked at from somebody who is doing this for
almost two decades. I hired and fired
many designers in my career for both companies
and for my own business. And I really truly
can tell really easily if somebody was
using free resources, especially with icons,
but also with fonts, with images, or if they were
using premium resources. And you can really
tell the difference between polished and
amateur designs. So just keep that in mind. Once again, I'm not pressuring
you to buy anything. You can do whatever you want with your career,
with your life. So once again, no
pressure for me. I'm just saying that it's going to look much
more professional and polished if you're using
premium than free resources.
83. Tips For Best Results: In this video, I'm
going to give you some tips for best
results in my opinion. And these are really
going to differentiate you from your competition,
from other designers. And it's going to
really differentiate your designs from other
non-professional designers. So number one is, I'm reading right
here from the list. It's much more simple for me. Use unique icons. These unique icons are which I mentioned right here
on Envato elements. So I'm not going to go
back to it one more time, but use unique icons because that's going to
differentiate you as a designer and your
design is going to differentiate your
client from the crowd. And it's going to really help
you tell a better story. Because when you're
using unique icons, It's really going to help
your clients brand stand out because it's really
going to associate those icons with that
brand much more clearly. And it's going to make it stand out from the crowd
much more clearly. Number two is make
sure it makes sense. So whenever you are
using these icons, make sure that they make sense. So don't just put icons
on some random page, on some random place on the page and just
expect your users to understand it and to see what you are
seeing as a designer, nobody is a designer
but yourself. Make sure that you know, that makes sure to
understand that your client is not a designer. Otherwise they will not
hire you to be a designer. So just make sure to understand where you are
placing these icons. Make sure it makes sense. Make sure not to overwhelm them. Make sure that you are placing these icons in places
where it does make sense. So just remember once again, icons are there To help
facilitated the text. So not to use too much texts, but instead use an icon. Or if there is not enough
space for an image, maybe you can use icon. If you're using sets of icons, if you're using rows of icons, make sure it makes sense, especially if you're telling
the process or a story. Then in those cases
make sure to use icons, but once again,
makes sure to use them when it does make sense. Next step is be consistent. So we talked about
this in this class. If you're using icon from
one library or one back, make sure it's consistent. So if it is outline, make sure all of your
icons are outlined. If it is filled-in, make sure that is the
style you're going for. If you're using
colored icons like I showed you in Adobe XD
in that particular case, make sure to use colors which correspond well with
that particular brand. Don't stray too far
from those colors. Red and green are fine in some cases, especially
for alerts, for danger, for job well done for correct execution,
stuff like that. So you can use a red
and green colors, also, maybe blue color if
that's the corresponding color. And I'm planning to create a
color class later this year. So make sure to check
back and to see that. But in the icons case, makes sure to keep it
on brand makes sure to see where you can use certain
colors in your icons. Be moderate, so don't overdo it. You can use icons
in some places, but don't go crazy and use
them all over the place. Because clients are just
going to be confused. Also, when you're being
moderate mixture to explain your icons
if that's necessary. So if we take you
back to Adobe XD, let me take you back right here. So what we have right here is this tab bar and it doesn't
have any text below it, but I can easily add the
text for these icons, e.g. here where it says Maybe, it says, say profile, maybe this can be France, this is Chad, this is setting. So Use the texts, explainers, but it does make sense
and just be moderate. As you can see, I just have
four icons right here. So I don't have 60
different icons. I don't have two rows of icons. I have four because that's
really plenty enough. And I don't need to
use more than that. I don't need to use
less than that. It's just fine. And finally, one final
tip is have fun because the process of design is to help solve your
clients problems, but also for you as a
designer to have fun. So if you are exploring these new icons that
you just found out, maybe you are really excited to integrate them into
your client's projects. Make sure to have as
much fun as you can, because that's going to allow
you to be more creative, to be more evolving
in the design itself, and to try new ideas, to try possible solutions
that you taught e.g. are not possible just
a few moments ago. It's all about making fun. It's all about having fun. So just make sure if you
are using these icons to have as much fun
as possible and to try to portray
that fund that you haven't onto usability
of the design itself. So if you are e.g. creating a process makes sure to use these icons in
a creative way, but just don't overdo
it. Be moderate. Make sure to follow these tips, which I mentioned in this video. Make sure to stay consistent. Make sure to use the
same icon style. Makes sure to use the
same icon pack as much as possible and
make sure to have fun. That's basically it, that those are all the
tips for this video. And once again, just use your common sense when
you're using these icons. Don't overdo it. Just make sure to use
the same style and to be moderate and to have fun.
84. SECTION 10 ASSIGNMENT: Your assignment for this section is just to pick a random team. You can choose a team, e.g. let's say luxury cars. And then you can try to find the different icons which
are going to fit that team. Maybe choose eight or
ten different icons and try to pair them together. Try to use the same style. Try to use the same
line thickness, e.g. or a border radius, or different background colors, whatever sort of icon style
you're actually going to use, tried to use exactly
the same sizes and try to have a consistent rhythm
with your icons, e.g. if this one has the
black background, make sure all of them have
the black background. Or if the line
thickness is distinct, make sure all of them has this, have the same
thickness of delight. Make sure to organize them
and see how do they look together and would they look
good on the actual projects? So try to practice that way. So when you actually
get started on a real project is going
to be much easier for you to understand which sort of practice should
you need to use and where do we actually find the icons that work for you?
85. SECTION 11 Color Selection: Selecting the right colors
can be really difficult for some designers because you don't want your designs
to look too boring, but you also don't want
them to look too playful. It's important to choose colors according
to your project, according to the team
of your project, according to the pacing, enter the rhythm
of your project, what your project is trying to convey to the users
and so much more. So that's what we're going to
talk about in this section. How to choose colors which are right for your
particular project.
86. Why color is important: Apart from typography,
rhythm, grids, and many of these
other elements, color is one of the most important elements
in each design. Without color, users will
not know where to go. They will not know
what to do and will not be able to distinguish elements from each other because all elements would just look
the same in black and white. So in this video,
let's discuss why the color is important
and what should you be thinking about
when you're choosing colors for your UI
UX design projects. It sets the tone
of your project. So are you speaking in the more business oriented
way to your viewers, then you're going to
use different colors than if you're
speaking in a playful, kind of friendly manner. You always have to
think about that. Make sure to speak
with your clients, make sure to deeply understand them, understand their industry, understand the niche,
and therefore, when you're choosing colors
for that particular client, makes sure to set the tone. If the tone is business, then use the business stone, but make sure to follow that
tone throughout your design. So it's nice and coherence. So your users always
know what is the tone of your design wherever
they are in your design, it determines the viewers mode. What I mean by that is if
the colors are too dark, then viewers are going
to be in a certain mood. If the colors are too light, then they're going to
be in a different mode. If the colors are too strong, perhaps they're going to
be strong on their eyes. They're going to be
in different moods. So make sure to pay attention to all of it and make sure to understand what is the mood that you want to create
for your viewers. Once again, is it the playful? Is it the business? Is it the learning? Is it the focusing mode? From all of these
different metrics you have to learn about their mood. So therefore, when
you're choosing color, you have to have
that mood in mind. So e.g. if we want them
to be calm and relaxed, I'm going to use some
colors from nature, e.g. white and green and brown
and something like that. If I want to keep them pumped, if I want to have them energy
rising and keep it high, then perhaps I want to use
some strong colors like red, like dark blue, green,
and something like that. So make sure to pay attention
to the mood of your viewers because it's extremely
important in any design. It emphasizes actions. So e.g. if you want them
to click on a button, you would choose the color of that button to stand out because you want them to look
at that button and then to take action,
so to click it. Or if you want them
to submit a form, if we want them to
leave your email, you will use color to emphasize those areas where
you want them to click or to take action. And of course, depending of the action you
want them to take, depending of the industry
that your client is, you're going to choose
some different colors and different shades
of those colors, simply guiding your viewers eyes to that particular action
you want them to take. It helps with readability. This is incredibly
important because eyesight is really impaired for almost two decades because we
all have these devices with screens and majority
of people out there has some issues
with their eyesight. So it makes sure when
you're planning, especially for paragraphs,
especially for texts, make sure to use the colors
which are not going to be impaired on
your viewers eyes. What I mean by that is
they are not too strong, but also at the same time
that they're not too weak because if their
eyesight is weak, they will not, they're not
going to be able to read it. The colors are too weak
and the other way around, so you have to find that
happy middle ground. Therefore, your readability
is going to be much better and your bounce
rate is going to be much lower because they're going to stick on the page
for much longer and they're going to
read the text and the information that
you put on your design. And finally, it guides
the user's eyes. What I mean by that is if you want them to look
from left to right, you can strategically
position your colors in that direction so that you can guide them
through your design. You can arrange that viewer experienced how you
want them to be. And then when they look
from left to right, they can search for e.g. brighter colors or darker
colors or something like that. You are the one in charge
of their user experience. So therefore, converter user experience to
better one by using colors and navigating
them through your design by using color. There are many different
theories and techniques into choosing the colors which are
important for your design. So these are just
few that I found over the years work better
for me and for my clients. So make sure to
browse the Internet for some additional
tips and tricks and mixture to understand
when you are designing to keep all of
these things in mind. And just to create the best possible
user experience for your users by using color. In the next lesson,
we're going to talk about which colors exist. So I'll see you there.
87. Which colors exist: There are many different
colors out there, but when you're choosing
colors for your UI UX design, you have to think basically
about three colors, which is main color, secondary colors,
and tertiary color. Main color is the color which is the overall color
of your design. Secondary color is used e.g. buttons or for texts links, hyperlinks and
something like that. And tertiary color is
basically the accent color. Now, this is not true
for all projects. Sometimes you're just going
to choose two colors, e.g. and we're going to
talk about that a bit later in this class. But the important
thing to note as a UI UX designer is you're not going to use CMYK color
in majority of cases. What that means is cyan, magenta, yellow, and key. The reason for that is
those colors are majority used for graphic design
and for print work. Because we are
doing screen work, we're not going to use those
colors because they don't translate well to screen the
colors you are going to use. In majority of cases for your UI UX design projects
are hex codes and RGB color. Hex codes is something which
is short for hexadecimal. And basically it means in 16th, don't be bothered
too much about it. It's just the count of
pixels inside of the color, but just remember, hex colors do have all of
those different codes. You are going to use those hex
code in majority of cases. And in some cases you're
also going to use RGB color. Rgb stands for red,
green, and blue. And there are also some
other colors like HSL, which is for hue,
saturation and lightness. But depending of the developers, depending of the project, depending on if
client already has their color combinations and color already created for them, you are going to
use their colors and colors in that
particular color code, which they mentioned
in their theory. So basically in this video, I'm just going to show
you how all of that works and how can you
find those colors. Here we are on the
Apple websites and majority of you
know about Apple. Basically they create these technology
devices and gadgets, and they also have their
operating system for their mobile devices
and desktop devices. All of that doesn't matter. What matters, is you
can right-click in your browser and you can install this plugin
called color pick, especially if you are a Google
Chrome user, like I am. When you click there, it's
going to show you all of these different colors which are used throughout this
particular page. Now, these are not
all the brand colors. It's not going to
pull colors from every single page on
that particular website. But if you take a
look right here, you can see all of these colors. So you can see this
pink purple color, e.g. from this watch and
the texts around it, you can see this blue color. Perhaps it's this
one right here. And if I scroll down, perhaps we can find this color. Here it is. And if we scroll more, you can see that this dark
color for the text is e.g. this one and this one. So we can quite easily
understand which color is did the brand used in
this particular page? Once again, I'm mentioning this particular page because
if I switch to Mac page e.g. here, they're using
completely different colors. So let's go back to the
homepage and let's go to here. Once again, call it big
is completely free. I will link it in a PDF
and you can access it. You can simply install
it in your browser. And why this matters is you can simply sample colors
like I showed you. So simply right-click color, pick from page styles. It's going to take
these colors from this particular page and then show you all these
colors right here. What you can see is RGB values
for each particular color. You can remove this
color if you want to, and you don't want
to see it here. Then if I click on
this clock right here, you can see we have hex colors. So if I switch to hex, you can see how this works. So if I switch
between RGB and hex, you can clearly see
the difference. Now, hex colors
are these colors, and this is the color code. I'm going to show that a bit
later inside of Adobe XD. Now, every single tool out
there has this hex codes. So if you're using Photoshop, XD, sketch, Figma,
it doesn't matter. All of them have them, and all of them usually have RGB and some of
them also have HSL. If a switch to HSL, which is hue saturation
and lightness, you can see how this looks like. So basically, you can copy this, especially with hex codes. So select this right-click
copy or control C, control V, and paste it into
a favorite tool of choice. And then you can have this color and work from this color. This is especially
important if you're working with clients who already have
their websites completed. If they have their apps completed
or something like that, and they don't know
which colors they use, then you can simply pull the website like I
should just showed you, right-click colored pick from page styles and
then you can simply understand which colors have
they used in their design. This is important
because if they want to change their color palette, e.g. further down the line. Or if you need to
have specific color, then you can use this approach, copy that particular color and then use it in your design. The other way to
do this is to make a screenshot of their
previous design. Drag it into your favorite
tool of choice, in my case, Adobe XD, and then simply sample that color
from your design. This is not going to
be debt good approach because you're going to lose some pixels when you
make these screenshots. And therefore, those colors are going to be just a
little bit different than if you use this approach because this is pulling
from page style. So if I take it back one
more time, right here, if I right-click on the
page and go to Inspect, you can see that if we
go through the code, if we go right here,
you can see 1d1df. So let's go to here, one d1, d1. So you can see straightaway, it's pulling from page style, so it's pulling colors
directly from code. So there is no room for error there because it's
pulling directly from code. Now, you might be thinking, yes, but what about
these images? So let's take this image, e.g. right-click hit Inspect. Here we are and here
we have this color. So if I click on it, you
can see it right here. You might be wondering what
if my client doesn't have any existing websites
where you're going to form the color palette based on what we talked about previously, based on what we're
going to talk about in future lessons in this class. Primarily from the niche
industry they are in, e.g. if they are in a banking sector, if they are in the IT sector, chances are depending on
who the target audience is, that the website or the mobile
app is going to talk to. Chances are they're
going to choose specific colors in those cases. Makes sure to explore
the competition, makes sure to see
what they are doing, and make sure to
form your colors based on the needs of
your client is in, based on the competition, based on the viewer mode
you want to put them in. So do want them
to buy something. Do you want them to enjoy the content and stay for longer? Do want to be serious, do want to be playful. From all of these things, you are going to determine
the color you're going to choose in your design. Finally, as I said, make sure to use color pick because it's really
quite simple. Simply right-click on any page, is going to show you
all of these colors. And basically you can
select this color, hit copy and paste
it into your design. In the next video in this class, we're going to talk about color combinations and why they're important in which color
combinations exist, and how to select, uh, which, which one is right for you.
So I'll see you there.
88. Color combinations: There are many different
ways that you can combine color for your UI
UX design projects. But in this class
and in this lesson, I'm going to talk about
just four of which are the four main ones and the four which are most
used in the design, plus one additional one, which is kind of a
bonus on this lesson, those for our monochromatic, analogous, complimentary
and triadic. So let's explore all of these and let's
see what they are. Monochromatic color scheme
is what the name suggests. You are just going to
take one color and choose different sheets
from that particular color. So e.g. you are
choosing blue color, which is really dark, then you're going to choose different shades
from that blue color to correspond better with
that main dark blue color. So therefore, you're going to use those lighter tones, e.g. for your buttons or
the other way around, you can use the lighter
tones for the text or the darker tones for the buttons for the links and
stuff like that. Analogous colors
are colors which are next to each other
on the color wheel, you're going to
choose three colors which are really
close to each other. So when you take color wheel
and then you can choose different shades of those colors which are just next
to each other. What this is going
to allow you to do is your design is going to be much more coherent
because it's going to look like it belongs
to each other. Your elements are going
to be of similar colors, of similar emphasis
with those colors because you're not
going to choose different shades of your colors, just the colors which are next to each other
on the color wheel. Complimentary colors is
what the name suggests. You're going to take
two colors which are on the complete opposite
scale of the color wheel. And then you're going
to combine them. You can choose your main
color from that color wheel. And then from your main color, you can position your color
wheel in that way to find your complimentary color on the complete opposite
side of the color wheel. You can use different
shades of those colors, so mean and complimentary color. But I will always
suggest that you choose your main color and
this is the easiest thing to do if your client already has something like a logo
or a business card, or the color they like. And then you can simply put
that color in your color. We'll choose the
complimentary color, and therefore, you can choose different shades
of those colors. And you can know which color is the complimentary
color for that color. And finally, we have
triadic colors. Now, triadic colors
are basically just three color evenly
spaced in your color wheel. So you can just imagine
it as a triangle, and you can rotate that triangle to choose the main color and complimentary
colors which are on the opposite side
forming a triangle, you can choose your main color, and therefore you can select the other two
colors which are on the even sides of that triangle. And the bonus
approach is 603010. Now, this approach requires three different colors which you can choose however you want, but make sure to choose
your main color, which is going to comprise
of 60% of your design. 60 per cent is the amount that you're going
to use your main color, 30% is your secondary
or complimentary color, and then those ten per cent
are your accent color. This is approach which
is commonly used in UI, UX design and
InDesign in general. So basically you can use any one of these
methods which are just mentioned to select those
three colors that you want. And you can use triadic
if you want to, just to see on the rectangle how those three colors are
going to look like. But make sure to
form those colors in such a way that they are not
overwhelming each other. If your main color
is 60 per cent, then just make sure to use that color for 60%
of your design, then 30% and then ten per cent comprising of 100 per
cent of your colors. Don't use any other colors. Just make sure if you're
using this approach in this method to use just
those three colors. So these are just some of
the main color combinations. As I mentioned, there
are many, many, many other different
color combinations, but these four is what I found, worked for me best
over the years. And I've found majority of
designers in the industry use. In the next video,
I'm going to show you some tools which are going to help you select these colors. So I'll see you there.
89. Color selection tools: In this video, I'm going to show some color selection
tools which I've been using over the past few years. And I found that
majority of these, especially Adobe one, is what majority of designers
out there use. Because once you get
to know the tool, once you are familiar with two, you're going to be stuck with it and you're going
to use it all over again because if it
ain't broke, don't fix it. So as I said in this video, I'm going to give you
just a few examples. If you don't like any of these, you can simply browse the Internet to find the
one which works for you. So here is the first one
which is called Peloton. And you can see from the
design on the website, it's really quite old. Now how all of this looks
is you can click right here to select the
monochromatic single color, as we just spoke about, adjacent colors or three colors, you can see triadic colors. So triad of three colors, tetrads, so for colors. And finally, freestyle
four colors, and you can select two colors, three colors however you want. So, as I mentioned in
the previous video, depending on what you want
to create right here, you're going to select
the monochromatic e.g. or adjacent colors, which are complimentary colors or
something like that. So let's go for
triad in this case. So you can see when I
start rotating this, you can see the colors. So let's say that this
is my main color. And you can see that
they're evenly spaced in this triangle and
it's showing me all of the sheets
of my main color. And you can hold the Shift key to move the shades individually. So if I hold it, and if I
select this shape, e.g. if I select this one, you can see that we're getting completely different
colors right here. So if I rotate it to here, you can see that we now have
this evenly match palette. Now, you can go to
Presets and you can choose different presets
for this triadic color, which is really helpful if
you don't have enough time. And from the colors
you have chosen, it's showing you these presets. So if we go back to colors, if you rotate it to here, e.g. go back to presets, you can see that now they
are completely different. So you can choose these colors, you can do whatever
you want with them. And if we hide myself from here, you can see tables export. If I click right
there, you can see, you can export
them as HTML, CSS, Less sass, ACML, and as text, you can export color
swatches and you can export these color combinations for
the ones which we created, which I think is really
important and really helpful because
this tool is free. And by the way, I'm going to link all of these
tools which are mentioning in this video
inside of the PDF. So make sure to open it up, make sure to click
on those links if you want to access
these websites and all of the
resources and tips which are mentioning
throughout this class. So basically that's
the Palatine for you. You can randomize,
you can reset, go back to the original colors. So right here, and as I said, you can choose whichever one, whichever style you want. Next up, we have Color Hunt. So you can see once again, now we have some
different selections right here because
these are pre-selected. So you can hit the random, it's going to show
just random colors. You can go with
popular month, year, old time, or you can
choose by this one. So if I hit pastel colors, if those are the colors that you want for your
particular project, you have retro
vintage light, dark, especially dark is
important and popular in today's day and
age where we have dark mode for UI UX design. So if you are designing
for dark mode, make sure to check that out. Then you can see skin tones, especially important
for beauty brands, e.g. once again, going back to
that mood of your viewers, we're going back to that niche. We're going back to that client. So when you collect all of those dots, when
you connect them, you are going to
understand which type of color and color
combinations do you really need for your
particular project? So if we scroll
all the way down, you can see that we
don't have those. So if we go back to here, we don't have monochromatic
adjacent colors triad, but we do have these. So these are the modes, these are the projects, these are the e.g. let's say industries
that your client is in. So let's go with dark e.g. and you can see all of these. You can like them if you want. You can see it's
posted 13 h ago. Let's choose this one. And if I hover, you can see I get the
hex code right there. For each of these colors. You can like this palette. You can download it as an image. And you have all of
these colors right here as hex codes and as RGB, which is what I
mentioned previously, majority of UI UX designers are using hex codes
and in some cases, RGB colors because they are easy for your developers
to integrate in code. That's why they are using them. And also HSL colors sometimes because they
can use percentages. So make sure to speak
with your developers. If you're just getting
started with these colors, make sure to speak with them. Is the hex code right for them, or is the RGB or HSL, depending from those
values and those, that information you're going to get from your developers, you are going to choose your colors for this
particular project. So once again, you have more adult dark
palette right here. And if you think that this
color doesn't work, e.g. you can choose green
ones so you can play around with these colors. Next up we have colors.com, so you can start to generate it. Once again, I'm
going to link all of these websites in a PDF. And what we have right
here is this soap. We have all of these different
colors you can explore, you can view, you can
see, you can adjust it. You can see for colorblindness
how it looks like. So you can choose all of these. And if we close it. You can create a collage and you can create
palette from photo. So if your client is sending you that logo or
the color that they like, you can upload that
photo right here. It's going to generate
the color palette from that particular color. Now, you can see you're
getting the names right here, which is great if you
want to use these names later inside of your
design as tokens, e.g. when you're setting your
colors to your developers. And then they're going to easily understand
which color do you mentioned because they can put it inside of
the code. So e.g. this timber wolf, Allah,
Buster, and cultured, they can put all of these
words inside of the code, connecting them in
the main database. And therefore, the main database is going to pull the names of these colors and it's
going to represent them as a website
or a mobile app. So how do you actually
work with this? Well, we have all
of these options right here so you can
remove the color, you can view shades. So let's say I want
to use this one. Now have that one. You can save color to favorite. You can drag it. So
positioned right here to change the look
of your color palette. You can copy the hex code
and you can lock it. So you can choose any one of these different colors.
You can arrange them. So if a locket, and let's say that I want to
position this right here is going to stay this color and it's
not going to change. How do we export from here? You have this. So let's say that I like
this color palette, but let me actually
show you so viewsheds. And let's say this one, but I'm not really sure. I can click right there. Then right here. Choose the
hex or any one of these. Let me go to the picker
and let me select e.g. this dark shade right here. I like it and I can close it. And therefore I can
explore my colors further from this particular color
or just leave it as it is. And finally, if I
want to export it, you can use Control E or you can copy URL to send
it to developers. You can export it as PDF, which is great as image. You can get the CSS colors, which is amazing for
your developers. Obviously. Ase, SVG, which is also great, and you can get the code if your developers want
the code as well. Finally, you can embed the code for these
particular colors if you want to save them that way to your clients or developers. Next up we have Adobe Color, which is one of the oldest
one in the business. But in my opinion, perhaps it's one of
the best because it's integrated with Adobe
XD, with Adobe products, you can open them up in a dead Creative
Cloud application if you are creative Cloud user, and therefore you can
simply access these colors and open them up in the
software of your choice. You can create, you can explore, you have trends, and
finally you have libraries. So inside of the libraries, you can create your
library and then you can open that library
in Adobe XD, e.g. you can simply
copy those colors, paste them inside of your XD. It's really that simple. If you are Adobe user, there is also a
Photoshop integration, Illustrator integration. So no matter which tool you're
using from Adobe's family, you are going to have
that integration. So we have extract team, extract gradient
accessibility tools, which is also great. So if I click right there, you can see the contrast ratio, you can see the
score, you can see. So you can check salt for
fail 17 Points and below. So we have to adjust this color, pass for 18 points
above and pass for icons and actionable graphics if you are using these colors. So basically what we need to change is the color of the text. In this particular
case, that Adobe cases. And here on the left you have all of those
which I mentioned. So currently it's on custom, but if I switch to
analogous and click on it, you can see that we can
only choose this one color. If we go with monochromatic, you can see how that
looks like triadic. So basically three colors. And you can see that
triangle that we mentioned. So this is our main color, these are our secondary
and tertiary colors. You can have complimentary. So on the opposite sides on this color wheel,
split complimentary. So basically this, and
you can then choose however close or far
you want this to be. And you can split them, you can move them around. You can move these
different shades to get the best possible color palette. And double-click
split complimentary. So basically the same thing
but double the color. You have the square,
compound and shades. So depending on what you want, which I mentioned
throughout this course, you can always go with
Custom and you can adjust it however you
want to solve, e.g. if I choose complimentary
and if I go with custom and I want
to adjust these, Let's use this one
simply randomly. Let's go with this.
You can also adjust the tones right here of
this particular color. If I select this color, I can adjust the tones for that particular color like this. I can adjust all
of these things. I can swiftly copy this
hex code if I want to. And finally, you can save it
as my color team, e.g. I. Can name it. I don't know my website's
projects, let's say. And you can see the codes you're going to get right there. So these are the tags you
can check for accessibility. Once again, just to see
if that's good enough. Team is color-blind
safe, which is great. So you can save it
if you want to. It's going to appear in your XD libraries or
Photoshop libraries. Finally, you can
extract the team. So you can extract
the color from the image and save it
as a color palette. You can extract the
gradient. So same thing. Once again, accessibility tools, which we mentioned
previously and we have color wheel,
which is great. So finally, if you are using
this, make sure to save it, it's going to appear in
your tool of choice. You also have these
colored games. You have switched team
so you can choose it. You have explored, so you can explore different
color combination. What's trending, what's not. So if I switch into trends, you can see what that's
going to give me. So e.g. it's going to give me a bunch of images
which are trending. And you can see the
colors which are taken from these
particular images. So if you like these colors, you can download as
JPEG or add to library, which is once again going
to appear in your XD or Photoshop Illustrator or
whatever you are using. And finally, color pick, which we mentioned previously. Once again, it's great. I'm going to leave the links to everything I
mentioned in the PDF. But I would really
recommend you to get the color pink
because it's going to make your life a lot easier. This is the Spotify, so you have these colors from Spotify and of
course you can go to the website of your
choice if you want to pick the colors from
that particular website. And it's going to show you right here inside of the color beak. There we go. These are the colors, these are the tools are really hope you'll
find them useful. Once again, I'm going to give you all of these
links in the PDF. Open up the PDF,
click on the link, you want to access
it and make sure to start exploring these colors. Make sure to explore
these tools to see which one works
for you the best. And once you find it, make sure to explore it deeper, makes sure to, as you
saw in the Adobe color. Make sure to explore the trends. Make sure to upload images, make sure to explore
and just to see and understand how to
choose the colors for your projects the
best way for you. In next video, I'm going to
show you how to create an export style guides for
developers from Adobe XD. So I'll see you there.
90. Style guides for developers: Style guide is really
important part of your UI UX designs because in it you are going to present
all of the colors, icons, images, and all the other elements you used in your UI UX designs. You're going to show
them to your clients and more importantly
to your developers. Because from that style guide, they can pull important
information such as color to use in your code. So I'm going to show
you one project which I did previously for one
of my masterclasses. And I'm going to explore what style guide is and to show
you some tips and tricks. So here we are in Adobe XD, and this is the new
bank website project. And as I said, this is from
my Adobe XD masterclass. I'm going to link it in the PDF. You can check it out
if you're interested. And here we started from
the website architecture, move to paper wireframes, move to wireframes in Adobe XD, move to website design,
dashboard design. And then finally did responsive design and dashboard
responsive design. We also did project presentation and finally, style guide. So if we switch from
layers to here, which is Document Assets, you can see all of the colors and color codes which are used. So basically these
are colored tokens. When you hover, you can see
that plain white is FFF. If you hover right here, you can see so RGB
values opacity 100. If we zoom in really closely, you can see that we have
projects style guide right here. So what I would
recommend you to do is when you're creating these
projects style guides, make sure to always include
the hex code if those are the ones which are developers
require or RGB codes. If, once again, those are the ones which are
developer requires. Also, what you can
see right here is we have plain white,
which is this color. And I also included the
hex code so developers can easily select this
hex code if they want to. And moving further, you can see all of these other colors. What you can do is you can
give them this XD file. They can then simply take this. So if I go right here, I can copy this color. So right-click and copy. I can go right here, copy this color e.g. pasted in my code editor. And therefore I can
have it in my code or I can select it
from here and copy it. Or even more better, you can simply Control
or Command E on your keyboard to
export this as a PDF. When you hit Export, it's
going to export as a PDF. And then when they
open them up later, they can simply select this
hex code from the PDF, copy it, and paste it inside. Also for typography, you
can see for iconography. So all of the icons we used
in that particular project and all the illustrations and additional
elements that you use. You can put right here, but you can also
do is right here, where is your color? You can always fought e.g. background shadows,
blurs, opacity, covers and all of these
other elements right here because doors contribute
a scholar as well, because all of
those backgrounds, shadows and blurs also
have color in them. So one other thing you can do with this target is share it. So if I just select this
art board, go to Share. You can see it's
just one selected. So if I unzoom, you can
see nothing else is selected because I just selected
this particular airport. So but it can do is share it. I can create the link, but instead of Design Review, I'm going to use development. I can create a link. And while it's creating, what I want to show you here is developers can get this link. They can pull all these colors
from this particular link. And you can also choose this
share for development for any other art board that you
have in your design, e.g. we have website
design right here and we have many of
these art boards, so you can select them all. You can share them
for development. And therefore, your developers are going to have debt colored. They can choose it. So if I click right here
for our style guide, it's going to open
them up in my browser, and it's going to show in my browser how all
of this looks like. So if I show you right
here while it's opening, so we have projects targets. So depending on how you
named your art board, it's going to show in that way. So once again, we have all
of these different colors. So if I select one of them, e.g. make sure this one. And if I switch to
code right here, you can see all
of the colors and all of the shades of my colors, which it's pulled from here. So if I select this one, you can see it's called Danger read and straightaway
we have CSS properties. So we have top-left
width and height, we have background, we
have background here. So it's this hex code and
we have opacity of 100. So basically what
they can do from here is they can select
to copy from here. They can click this color. Here. Color copied sort. Let me hide myself just
so you can see it. So if I select this color, click on it, you can
see color copied, so it's copied to and they can paste it
later inside of the code. We can also switch to here. So you can see root for
all of these colors. So once again, plain
white, light gray, dark gray, main green, all of the colors I
named Point families. So we have font families, which is also great
for developers, all located right here
inside of our style guide. And finally. This character style nine. So if we scroll all the way
down, which is this one. So if I select just that
and switch back to code. So let me select it once again. You can see all of
the states which I created for this
particular design. So we have Visa, Black
and White, mastercard. Mastercard Black and White suggest changing
all of these logos. And basically if I double-click inside and go with appearance, if we choose Control and click, you can see a linear gradient. So all of the colors
from a linear gradient, you can see the direction
of the gradient, opacity and drop shadow. This is the one which I
mentioned previously. So drop shadow has this color
and it has these values. So basically your developers can pull these values
straight from here. They have the CSS code
right here once again. And finally, if they
switch to hear, they can select this. And then they can see
inside of the root CSS all of the things from here. So basically, they only
have to find this card right here and they can copy
the CSS code from there. So if I select this one, e.g. and you can see default
state almost black. So if I hold my Control
and click inside, you can see light gray. If I select and click inside. So you can see this color, which is the color of his skin. And if I zoom in just a
little bit closer here. So let's go with 100, e.g. if we zoom in and click
on this green color, e.g. you can see the colors
so they can click, they can copy to clipboard and basically paste in
whatever they want. Finally, they can click
right here on the comments. And they can pull
this pin e.g. here. And you can say something like, Do you like these icons or should they be
black and whites? If they say yes, e.g. then what you can do is you
can click on this icon. You can go back to code, locate one of these. So e.g. let's say this one. And we only have
default state for it. And e.g. you can create different
states for these icons. E.g. we have default,
we have hover. So you can see it changes the color for the default
state and for the hover. So depending on what you've
done with your colors, it's going to react in
that particular way. So iconography, colors, the
same thing, same story. So when they select, they're going to get CSS. They can simply click to copy, to clipboard and they can
paste this into their code. So basically that's
how easy it is to work with Adobe XD with colors,
with style guides. And I would always
recommend that you export this as a PDF because your developers
might be on the go. Sometimes they might discuss
this with your client. Make sure to send them the link of the style guide itself, not to confuse them too much and make sure to send
them separate links. Often design of wireframes,
of paper, wireframes, whatever you are doing,
because that way they can easily inspect
all of these colors. Because if you put all
of them into one link, which you can do, you're just going to simply
confuse them. And I found that this approach works better with my developers. But make sure to
always speak with your developers first
before you start working. Make sure to mention
hex or RGB colors. Make sure to see if they are good with some
of those colors. And finally, which something
which I didn't show you. If I select this color, e.g. I can click right here. Let me hide myself. So you can see we
have solid color, linear gradient,
radial gradient, and angular gradient in XD, we have obesity for the color, we have different colored
tones right here we have the opacity for the Alpha
channel for the color itself. And finally, we have
the hex, RGB, HSB. So depending on what your
clients and developers want, you can choose it from here. So basically that's it. That's why these
projects style guides are really important because
in one single place, you have all of these elements that you used in your design. When you're working
on your projects, make sure to always create these style guides in
parallel with what you are doing because it's
going to be much easier later to export it for your
developers to take a look. So basically that's it. I think you saw how important style guides
are for developers. They're not that
important for you, but they might be important
for the other designers which might work on this
particular design after you. Because in majority of cases, you might not be interested to continue working on this
particular project. May be some other
designers going to step in to your shoes and continue
working on this project. So having something
like a style guide, it's always going to
be much more easy for that designer to continue where you left off
in the same style. And of course, it's
going to be much more easier for developers to
work with style guide, because in one singular place, they have all the
information they need to start calling
this project.
91. SECTION 11 ASSIGNMENT: Your assignment for this
section is to use one of these tools which I mentioned in this section of the class. And to try to pick your
favorite colors for a project. Try to use imaginary project
if you have been using the same imaginary project
throughout this class so far, makes sure to use color
selection for it as well. Make sure to use
one of these tools. Try to understand which
colors would work better, which would not work better, and try to see if
those colors are, let's say, visually impairing. If you use one of
these online tools, some of them actually have this. They're going to tell you if these colors are
going to pass or not. So it's really important
to use those tools for color impaired
people and for visually impaired people who are actually having difficulties with reading these
bright colors. So as I said, explore, have fun and see what colors will work better for
you and try to see one of these tools and pick which one is right
for your process.
92. SECTION 12 Images: Apart from topography,
images are there as a crucial element that tells
a story in your design. So knowing how to choose
an pair different images is really going to
make your design stand out against
from the crowd. In this section,
we're going to talk about free versus paid images. How to choose image sets, how to choose the right
pacing for your images and right team depending on your
project and so much more. So let's get started.
93. Why are images important: You know what they say, that
picture says 1,000 words. Well, it's the same story in paintings as it is in design, especially in graphic design, but the same thing can be said in web design and app design. So choosing the right
images can really determine the pace that to viewers are
looking at your project, whether that's an app project or a website design project. It can also determined the tone at which you are speaking
to your visitors. So that can be either
serious or fun, playful. It can also determine
the pace at your viewers can look
at your project. So what that means is I'm
going to use smaller images, are going to use bigger images. Are you going to use
full-screen image is full width images
and so much more. They're also going
to determine how playful or serious
or website is. And they're also going to determine the colors that
you're going to use. It your design, because the tone of your images is going
to really determine that. Because if you are using e.g. really dark images, then you're
going to use some colors, which is going to contrast much better to
those dark images. Or if you're using really
light and airy images, then you're going
to contrast that, but using something
a lot darker, e.g. either a dark black or dark gray or dark green or
something like that. So images are really the key factor in
creating your designs and choosing the right images for your designs is going to
make or break your design.
94. 3 types of project images: When it comes to project images, there are really
three main types. Number one is images taken
by the photographer. So these are images
that your client already has any has taken to our premium photographer who
has taken those images in sets and created really the
whole story for your client, and then deliver those
images to your client. And then your client is going
to deliver those images to you and you in turn are going to use them
in your designs. Two is free images. So those are the images that
you're going to typically find on websites like
Unsplash or Pixabay. And these images here really one huge flaw and that variety. So what that means
is you can find one great image from
one great photographer, and that's basically it. So you cannot find
another image, e.g. model in a different pose, or a sunset from a
different point of view, or a town street from a
different point of view as well. So you cannot find those. And usually those images are really not that great quality. Usually there are
something like 1920 by 1080 HD or at least
till k in size. Finally, number three,
our premium sets. Now, these are the websites
that you can find online. Typically, I like to use Envato elements and
their own website 2020, which means that they have over 50 million images
to choose from. And what that means is these premium photographers
are creating scenes. So just imagine e.g. seen in the office and then
they're setting that scene. They're setting that office. They are paying for the
models and they are taking hundreds of
different images from all different angles with different models doing
different things. And the key benefit of those images is
they're all taking in a controlled environment by
a single photographer under a single lighting source
with the same models, with the same team
in the same room. So you get the idea. These images can easily
be used in your projects. And e.g. if you have to make
a slight change width, e.g. brightness, then
you can do it in something like Adobe Lightroom. And then you can take all of those images that you
download for your project. You can make a
single tweet, e.g. to the brightness
or to the opacity, or to the vignetting or whatever you're doing
with that first image. And you want to apply
that same change to all of your images, e.g. you've downloaded the set
of 50 different images, then you can simply apply that first change to the
first image and then apply it through a lot of your other images from
the same collection, you can simply sync
those changes. And e.g. adobe Lightroom is
going to apply those changes. You don't have to use Lightroom. I really like to use it
because I'm an Adobe user. I use Adobe XD or
use Adobe Photoshop. I use Premier and I of course uses Lightroom for
all of my images. And I really liked
that function, but it's not just in Lightroom. You can find it in other tools
and softwares out there. So just make sure
to browse for it, but it's going to save
you a bunch of time. So whether you're
using client images, perhaps you're going to have to tweak a few things
here and there. Because usually
these photographers are taking fantastic images, but perhaps if you are creating websites designed for our
slightly darker tone, let's say, then you're
going to apply some of those changes additionally
to those images. Usually photographers like to leave those images pretty row. So therefore designers
are going to in turn make those
changes. So e.g. Saturation, Brightness, contrast and stuff like
debt to those images. Once again, if you're using
free images, deaths great, especially for low
budget clients, because they don't really care
how their blog looks like. But if you're working with clients who have
reasonable budgets, then you can easily integrate these
premiums sets of images into your work from sites
like Envato Elements, e.g. and I would really
recommend because you can find millions of these
different images. And in turn, they're
going to make your work look much
more professional, much more polished
than if you're just using these three images.
95. How to choose niche images: There are many
different ways for you to choose niche images, but I'm just going to give you some tips and techniques about how I do it and how I've done it in the past almost 20 years. So depending of the niche
where you're working in, there is a certain tone. So e.g. if you are creating a website for men's suits, e.g. there is a good chance that that is a premium looking website. And they're trying to portray
a tone of professionalism, of a clean design, of certain lifestyle that those suits are
going to portray. So obviously you're not going
to use something like a bright yellow or a bright
red or something like that. You're going to
most certainly use these light gray color
is dark gray colors, possibly a hint of blue,
maybe even golden, few places if you are working
against the black color. So it's going to allow you to stand out, obviously
white colors. So when you're
choosing your images, make sure to have
those things in mind because you're
not going to choose your models against
this yellow background and against the background, which is going to ruin
the look of your suit. Obviously, you are going to
adjust yourself to the tone. So what that means is you're
going to look for models who are in these positions on e.g. properly exposed
white backgrounds because it's going to be much easier for you to integrate those images
into your work. Also models against
the black background because you can
use something like a screen obesity
and then you can reduce that black background
against your design. So therefore, you can easily
extract your model from your background and easily
adapted into your design. So this is obviously just
one of the examples. Make sure to set
the tone and see which tone your niche is in. So therefore, you're going
to look for images who are in that niche
and in that tone, which is really important because your visitors
are going to align themselves
much more easily if they see things
that they understand, rather the things they don't. So e.g. let's go back
to that suit example. Just imagine that you
are this gentleman looking for a suit for
your wedding, e.g. or for your friend's wedding
or something like that, then you're looking
for really high class, something really upmarket,
something really expensive, because you want to show up for that day and you
want to look good. Then you visit this website, which is all screaming colors
and all red, green, blue. It doesn't give
you that feeling. It doesn't give you that wipe of the website which is selling
these expensive suits. So something is not
going to feel right. Some things that are
going to look right. Perhaps at the first glance, you're not going to
think about it too much. But as you start browsing, you're going to obviously notice that something
is not good here. It's not going to give you that confidence to
purchase that suit, because it's not giving
you that vibe that you usually expect from
the suit website. Then you go to the
competitors website, who has all of these
things that we spoke about for this
particular example, you're going to feel
much more at home there. You're going to feel much
more comfortable with your purchase decision
and you're going to feel much more
at home, so to say, because your
expectations are met by this website rather than this previous website with
all of those green colors. So this is why it's really important when you're
choosing images, make sure that you
choose niche images, that your audience is
going to relate easily. Therefore, your website in return is going to be much more relatable to your users and mobile apps as
well for that matter, because your users are going
to recognize these clues, these images, these colors, these styles, because
they are used to them. So don't try to experiment too much and go wildly
with your images. Make sure to stick
to what you know and make sure to
stick to what works, which is the most
important thing. After all, makes sure
that your users feel comfortable when they visit your website or your mobile app. Because in return,
that's going to bring in more conversions.
96. Free VS Premium: In this video, I'm
going to show you some main differences
when you're searching for images yourself. So these are the examples when your client does not
have any images. So you have to search for images for that
particular project. And I'm going to show you
some key differences between free and premium
images and what you're supposed to look for when
you're browsing for images. So here we have our website
called unsplash.com, which is usually what these
designers are using nowadays. And there is also pixabay.com and many of these
other websites. But usually Unsplash
and Pixabay are the websites which are
typically going to search for. So if we type in a suit, e.g. like I showed you in
previous examples. And like we talked about
in the previous video, I'm going to just
show you and compare differences between free
and premium website. So as I said, we have a suit right here and I'm going to copy this text and I'm
going to come to this website which is
in volatile elements, which is a premium website. And I'm going to simply
paste it in right here. Search for the
photos, but you can search all of these
different things. So stock video, video templates,
music, sound effects, graphic templates like
print templates and UI, UX kids, graphics presentations
happens, photos, fonts, add-ons, web templates,
3D and much, much more. So we typed in suits
and they also have this website called 2020 with 50 million additional images. Yes, that's 50 million
additional images. And all of those images that
are really high-quality uploaded by all of these
independent photographers. So if we go to that
website which is 2020 stock and typing
suit right here. So we have the exactly
the same search query on all of these websites. And what we have right here
on Unsplash is when we hover, we have this hunters race. We have another photographer, another photographer,
another photographer. So all of these are
different photographers. So let's go with, let's see, this is Benjamin Roscoe
as well as this. So let's visit their profile. As you can see, they're
taking images of skylines, bars, reverse details. Right here we have some images
of this person in a suit. But that's basically it is. You can see we have just three
or four different images. And once again, these bar
images all the way down. Once again, if I click
on this image, e.g. what I have right
here is I can click, Read More to see all of
these different details. And I can type the info. We can see that the
camera is Sony, ISO 400, and these
are the dimensions. So these are actually
quite good at this stage. And you can see how
many downloads and use this image had. But if we go back and
click on this image, e.g. then go to info. You can see it's five K. But once again, we
have the same problem. So when I click on
this profile, e.g. you can see that we do have
these many different images, but there is just
one image of a suit. So let's just imagine
that you want to use this particular
color of suit, e.g. and you want to use it
in this environment. So let's say that indoors against these stairs
and stuff like that. So you can just imagine
that your model is going to be photographed indoors, e.g. let's say inside of
the shopping mall, making a shopping trip
or something like that. So you have to find
images of that nature. Well, this is just one image
and you're basically stuck. You don't have any
other options. So if we go back and take a look at all of these other
images of a suit. As you can see, there
is not much more. Perhaps there is this one, but it has a Christmas
tree inside of it. So it's not going to work
for all of your occasions. And as you can see, there is not much option right here for your
particular project. So we can go to some
of these websites and we can find something which
is going to work for us. So let's say that this
is the shopping mall and this is the store inside
of the shopping mall. So let's open that
inside of a new tab. Let's quickly notice that
this is eight K in size e.g. and you can further
read this information. You can learn more about it. And we can see that it's four, requires tailoring
designer workshop. But if I scroll here, you can see it's all
from the same series. So you can see this same model, same background, same
lighting, same photographer. So you can see about
images, is a photographer. So all of them, and what's
great about it is if I click, See More and open in new tab, you can see how many of these
different images we have. So you can clearly craft a story from all
of these images. So you can start on
your page by e.g. welcoming your
user to your shop, then explaining to them. Quality of your suits
and how they are made, how much time it takes for each person to saw a
particular button, e.g. and stuff like that. So you can really zoom
in on the details with these images because they are eight K quality and
they are really huge. You can then tell them about how fitment is going to work
when they try the suit, how it makes them feel, when the materials for the suit are sourced
and so much more. So you can do that with
these premium images. You can really tell a story rather than just showing
a singular image. What that's going to do
is it's going to make your website look much more professional, much
more polished. Because once again, you can
immerse your viewer into that experience because
you have all of these different images
from the same set. So let's take a look
at them one more time. You can see that they
are drinking coffee. We have fitment right here. We have testing of the material. We have fitment right here. We have e.g. agreement here we have some different materials. We have how the tie
is going to fit. So you can clearly see
just from one example, a loan for this suits how many of these different
images we have. So you can just
imagine zooming in on these details and
how much you can actually do with all of these different
images rather than just with one single image. Finally, we can
do the same here. So if I type been sued
and I open it up, you have these
different collections. And inside of these collections. So if I open them up, you can find different
photographers. So e.g. I really like this suit. Maybe I can go in
and browse for it, or maybe I can even take
a look at this one. So these are the collections. You can open these
collections from these different
photographers and then you can explore
additional images. So here we have this
image and this model. So if I click right here and
open up their collections, we have these different photos, we have different Loves, we have all of these
different things right here. So we can explore and see all images from
this photographer. You can clearly see that we have bunch of these
different images. But once again, if you don't fancy 2020 and all
these different images, you can always go back
to Envato elements because these two are the
part of the same collection. So when you get this
subscription to Envato Elements, which is a yearly subscription, this is going to be included. So if you cannot
find an image here, then perhaps you
can try on 2020. You can see it says by Envato. So those are just some
different comparisons between free and paid images. Just make sure to understand
that you cannot do high polished
professional work with free images because of these limitations which
I just mentioned, you have to use professional
assets like images from e.g. Envato Elements. You don't
have to use Envato elements. They are bunch of different
websites out there. But because as I
showed you what's included inside of
your subscription, I really liked them
and I use them every single day
for my projects. This in return is going
to make your projects look much more polished,
much more professional. And if you're trying to sell you your designed to
your client, e.g. if you're trying to pitch them a design idea or design change, complete redesign or
something like that. Doing that with these
professional and polished images, it's going to be much more
simpler than just by slapping some different images from different photographers
with different exposures, with different models onto a page and then trying
to sell them debt.
97. Image Optimization: One more key part when you are creating projects
using these images, especially these huge images,
is image optimization. What that means is a software of your choice is going to
reduce the size of the image, which in turn is going to upload much faster to the server, e.g. that in turn is going to load
your website much faster, giving it a better
Google ranking, which means better SEO. So basically this
SEO optimization is extremely important, especially on the
website design projects, on mobile design projects, It's really important as well, especially if you're pulling
from the same database. So optimizing your images
is going to give your users much better experience without losing any quality of
these original images. So if I take you back
one more time right here to Envato Elements,
you can see e.g. this image that we were
looking at previously. So as you can see,
almost eight K in size. So when I hit download, it's going to pull up all of these different class projects. So e.g. I'm going to
call it image projects. For our image project, e.g. and I can simply
create this project. Now what this means on
Envato Elements is I can add all of these different elements to
this particular project. So you can just
imagine that I'm going to use all of these
different images. I'm going to use
different icons, perhaps even a WordPress theme. Maybe I need some
music from my videos. So all of those different
items that you downloaded from Envato Elements
you can simply put into this project that
we created just now. What this means is
it's going to be much more simpler
for your clients to license all of these items in case that such a
thing is necessary. So e.g. you can use one subscription for
unlimited number of clients, and each client can have
their own projects. Which means that licensing can be as simple as just simply copying one license and then sending them to your clients. They in turn are
going to contain this license and they're
going to keep it. So there is no need for you to update these licenses
every single year. Basically, once you pay for it, once you download it, That's it. So you can easily license all of these different elements, including images on Envato
Elements for your projects. So if we go back to here, I can simply click
our image project to create this project. Then I can simply
add and download. And it's going to start
downloading right here. Now, you can see that
this image is quite huge. It's actually almost
18 mb in size. So once it's downloaded, now, it's time to
optimize our images. Now, image optimization
is nothing really new. It's done by developers
for decades now, n by designers for a few
decades now as well. Basically what it is, is it's going to simply reduce the number of pixels
inside of your image. It's going to contain
the size of your image. It's going to contain sharpness, is going to contain quality. But in turn, it's
going to give you a much smaller file
size because all of these different cameras are simply adding the file size, especially depending of the lens you're using in the camera
model you're using. So not to bore you
with too many details, I'm going to show you
that in practice. So because I'm on Windows, I'm using something
called the riot. And if you're on a Mac, you can use something called
image optimum of a loop, the PDF file, and you can
simply click the link to download whichever one
you need a new want. And there are many
different tools out there for both
operating systems, both Windows and Mac. So it's really all up to you to decide which one
you want to choose. I choose, right? And I use it for years now
and it worked fine for me. So if I take you back, you can simply see how
the right looks like. And there it is. It's really a basic
tool and really want that you can easily learn to use and basically
what it does. It, it has these two Windows and if I drag and
drop my image inside, so this is the image
that we've chosen. You can see that
you can open image, you can batch import images, which once again is
really important, especially if you're working
with these collections. So not to lose any time. Just imagine you have e.g. 50 different images
that you download it. And that's the great way, e.g. from Envato elements. You might not even use
all of these images, but it's great because
they are there. You can simply select them all, download them all, put
them into same collection. Now, optimize them
all using right, e.g. so right here, I'm going
to simply use one image. And what I'm going
to do is I'm going to click and drag it to here. Then once it loads, it's going to prompt me this. So this file contains a
high-resolution image, right? Can handle such images,
but processing can be quite slow in this situation. They want to resize it first. It's recommended the original
image will not be modified. So just notice what is going
to happen when I click Yes. It's going to give us
this original size. So it's going to scale
it new size, 100 by 100. So keep the aspect ratio. This is in percentage
because you can see right here and you can lower it
down into specific pixels. But I would recommend you to
keep this percentage alike. So then it's going
to simply thought, were it down basically
to 100 per cent? What this means is
when I click Okay, you can see the initial
image right here. So 17.5 mb in size and the
new image is 3.4 mb in size. Now it's going to
load much slower. So when I click right
here and hover, you can see 17.5 mb. And this is the
image right here. But when I optimize it,
it's going to be 3.4. So when I hit Save, All right, here, we want to replace it. I want to type in, yes. And it's going to basically
replace this image. So when I click now
and hover 17.5 mb, so let me quickly refresh it. And you can see it's 3.4 mb. So basically we
started with 17.5 mb. We are now at 3.4 mb. And what's most
important of all, if I hover right here, you can see 7952 with 5304. And if we take you back to here, you can see these are exactly the same dimensions as they work with
the original image. It just reduce the size
of the image over all. So what this means
for you, basically, it's going to give
your developers much more play room because
you reduce this file sizes, you can go even further. E.g. I'm using Adobe XD on a daily basis to design
all my projects. So you can just imagine
that I'm going to put this eight K image into
something which is, Let's e.g. say, 1920 by 1080. And then I'm going
to export it from XD in that particular
resolution. So 1920 by 1080, which is going to even further
reduce the space required. N is going to even further
reduce the size of this image. You might say, why not just use it like that straight away? Well, because you're
pulling all of these huge images into
your software of choice. In my case, Adobe XD is going to lag massively because
these are huge files. As you saw, just this particular
image alone is 17.5 mb. Majority of my files
are around 20 mb. So you can just imagine
entire design file is 20 mb and this just one
single image is 17.5 mb. So just keep those things in
mind when you're creating, especially for web,
because you're trying to make Google
Optimize this website. You are trying to make as many people find this
website as possible. So it's really important for you to optimize these images. And when you're working with
mobile design projects, it's important as well. Because then the operating
system and the app itself, it's not going to pull all of these huge images from
database is going to just pull a singular image which is quite small in size. And it's still going to contain this huge quality that
originally had it. When photographer
took that image.
98. Naming Structure: Same like with
optimizing your images, it's really important to name your images properly
because that way they are going to be displayed properly on your website or
on your mobile app. It's going to be
much more simpler for your developers
to find these images, to include them in code. And it's going to be
much more simpler for code to pull these
images from databases. So let me just show
you what I mean on the image that we
just downloaded. So if we take a
look at this image, I went ahead and
downloaded it again in the same project so you can
see the name until year, dash PA to VBC and
C4 or whatever. This is, the reduced the image. So as you can see once again, 17.5 mb salt original size, and you can see the
title right here. And if I take your right here, you can see that we
have a name like so. So what we can do with
this image because it's going to be taken into
our software of choice. In my case, Adobe XD. In your case, it
might be Sketch, figma, Photoshop Illustrator
doesn't really matter. So what you can do
with this image is you can right-click on
it and rename it that way. That way, when you drag
it and drop it into your software of choice is
going to remember that name. And then when you export it, it's going to export
it like that. The other thing you
can do is you can go to something like
Lightroom, e.g. and you can edit metadata
of this particular image, which is going to give
you much more detail about when this image is, has been shot with which camera, with which lens with which
you exposure and so on. So this might be required
from you if you're working on some type of
graphic design project, e.g. for editorials and
stuff like that, especially if that image is going into print
on huge canvases. So some huge high-end
clients are going to require all those
information for Mu. So just make sure to understand that no matter which kind of
project you're working on, there are some
requirements from you, but for majority of these web projects and
app design projects, simply rename your file is
going to be good enough. So if I take you back one more time right
here to our image, what you can do is just
imagine that this image, e.g. is going to be located
in your hero section. What you can do is
right-click Rename and simply call it hero, IMG. Or if you're a developer
wants to add dashes, then add hero, dash, IMG, or underscore like this. So here underscore IMG. So this really depends from
developer to developer. So when you're
starting your design, if you have access, your developers
contact information, perhaps simply ask them this, or simply ask your clients so they can ask your developer. So this in turn is going to be much more faster
for you when you start creating so that you can rename all of these
images and assets, e.g. like icons and illustrations
before you start working, then later when
you start working. And then you have to
rename all of these files once you actually include them in your software of choice. I know that in Adobe XD it's
really a huge pain when you include images like
with this name saw until the error
58, whatever. And then when you try
to export them to your desktop and you want to
send them to our developers, then you have to
manually rename all of them In your
export folder, e.g. and especially if you share them with something like sapling e.g. with your developers, then you have to rename them in Sapling. So it's really a hustle. If you can rename all
of your images or at least some of
your images upfront. Because that way it's
going to be much more simpler for you to design. And also makes sure to
ask your developers what kind of abbreviation
do they like? Also, if you e.g. are using this hero image and just imagine that if I
take you right here, perhaps this is going
to be about us. This going to be product one, this is going to be
blog section one. This is going to be
testimonial one or whatever. Make sure to rename all of
your images properly. So e.g. if your testimonial
has four images, then ask your developer
about abbreviations. So e.g. testimonial dash one testimonial
dash two dash three dash four and whatever or underscore or without any
dashes, underscores and so on. So just testimonial for
all of them combined. Makes sure to ask them, do they like Caps
Lock turned on. But majority of
developers don't. Majority of developers
at least that I know, like to use images with small letters and
numbers so they don't like them to
be caps Look e.g. so these are just few tips and techniques I like to
share with you guys because I think it's going to improve your time on
these projects massively, and it's going to
improve the quality of your delivery to your
clients massively.
99. SECTION 12 ASSIGNMENT: Your assignment for
this section is just to choose a different project
that you want to work on. If you used one, the same team throughout
this project, you can use that one e.g. and make sure to pick
five different images that will work best for that particular project
and try to optimize them using some tools which
I mentioned in this class. And just tried to see what
sort of an impact that will make when you actually get
started with your design.
100. SECTION 13 Mood Boards: Mood boards are a great way
to get you in the mood, hence the name of the
mood words anyways, and they are incredibly
easy to create. In this modern design tools that used to be a really
hustle will be Castle. Back in the days when we used to create websites and apps
with Photoshop, e.g. but now with this
modern design tools, it's easier than ever
to create mood boards. And they're incredibly useful
to get you in the mood, to get you inspired, and to get, to understand a
little bit better what your client actually
needs from this project, which are colors should you use, which sort of images
should you use? And just to inspire yourself
about this project. So let's get started.
101. What are mood boards and why use them: Mood boards are really extremely important and
they are in my opinion, the key part of every
design process, whether project is big or small, because in the mood
boarding stage, you can really
communicate clearly with your clients and get to the
point as to what they need. Who are they speaking to? How big the project is, how big the audience is, who is the audience and all
of these different questions. And you can use mood board to determine the overall
project direction, where the design is going to go. You can do this before you
actually start designing, which is going to save you
a lot of time because you are going to determine the
style, the project pays, the colors, the
fonts, iconography, and much more in this particular stage with
moodboards, rather than later, when you actually fire up your favorite design software
and start designing, you can clearly communicate
these values of your clients. Then describe to
your client what is really important for
this particular project. So they can understand before you actually
start designing, what do they need to focus on? So as I said, this stage is really important in my opinion because it's going
to save you and your client bunch of time later. Because in this
particular stage, you're going to determine where the overall project
style is going to go. Of course, design
is going to vary wildly later when you
actually start designing. But the overall project tone
with the colors, fonts, the design direction,
everything is going to be determined in this particular
stage with the mood boards. Later on you can
start designing. You can add all of these
kinds of different elements. But for now, as I said, we're going to
focus on the basics and most important things. You're going to use
your design brief to determine all of these design elements and
design decisions. You're going to ask
your client all of these design questions
using your design brief, like who their
target audience is, what is their niche? Are there any competitors
in that niche? Who are the main competitors? Who are the smaller competitors? What is the overall
tone of the design? So is it fun or playful? Is it serious? Is it corporate? What is the overall tone of delivery of the copy
of the website? And much more. So as I said, you're going to determine all of
these elements in the mood boarding stage rather than later in
the design stage, which as I said,
is going to allow you to save a bunch
of time on design, both for you and your client. In the next lesson,
we're going to discuss what elements should you
consider for your mood boards. So I'll see you there.
102. Which elements to consider: Depending of the niche your project is in and
your client is in, you're going to include or consider to include
different elements. So if your style is corporate, you're obviously going to
use corporate imagery. You're going to use
clear to read font because you have
to understand who your target audience is. So these are not kids, probably these are people in their middle age
or older people. So you have to
consider topography, you have to consider contrast, how easier website is to read. So you have to consider all of these things when you're planning for your niche
and your project. Also, imagery plays a
really key role because imagery is going to set the tone is going to set the
pace of the project. So you have to consider
that colors are also mean important feature of
your website design on any design for that matter. So you have to consider colors. Are the colors fun and playful, how the text is going to
contrast between these colors. So you can determine all of these things In the
Mood Board process, of the design process overall. So you're going to describe, discover all of these elements when you start creating
your moodboards, rather than when you actually
start creating your design. In the next video, I'm
going to show you how to do your research, how to e.g. adjust for different niches, how to explore different
elements and how to present them to your
client so that both of you can reach the agreement as to
where this project is going to go and what is the oral design
style and direction.
103. How to do your research: In this video, we're
actually going to start with research. And I'm going to show you
what are some websites that you can use to
do your research and to communicate clearly with your client as to which
elements to consider. So let me jump
inside my computer and I'm going to show
you some websites. So the first websites that
we have is actually dribble. Dribble, as you know, is
used for inspiration, like a lot of the time
for these designers, especially in UI design world. So you can easily
use dribble right here to explore all
of these elements. So you can use it
to explore imagery. You can use it to explore
topography and see how topography is laid on
some of these examples. So if we do a quick
search right here, e.g. if I type in corporate, press Enter and see
where does it take us. So let's go with
web design, e.g. it doesn't give us
anything. So let's use bank e.g. or banking. And let's see where
that takes us. So you can see right
here for the banking, there are no screaming colors except for these
gradients right here. But this is to determine the overall tone
of the website itself. So probably this
mobile banking app right here is speaking
to a different audience. So probably younger audience. But you can see right here, they're using really all
of these dorsal colors. They are using these black
colors, white colors. They are using these light
greens like threads, e.g. so color really probably plays a key role and you can do
your research right here on Dribble to explore depending of the project in question and the project
you're working on, which types of colors
should you use for your particular
design project. Next, if we take a look
at the topography, you can see that topography
right here is really clear. It really spaced out evenly. So spacing is really very
well done right here. And you can see that majority of this text is black on color, which is going to in
turn bring the text more closer to the viewer and
interim making it easy to read. So this example is really great. And if we go other way around, we can see that in
this example, e.g. because it's playful with all these illustrations
and colors. Once again, texts plays a key role because it's
super easy to read, as you can see right here. If we take you to Behance, which is another
website that you can use for your inspiration. If we take a look
right here and e.g. typing same thing. So bank center, see
where it takes us. So let's, let's
use this one e.g. and we can see is different from Dribble if you
didn't know already. Because on Dribble
you can really post these shorter presentations
like this one, e.g. so just the one singular image. While on beacons,
you can really post these long presentations and go in-depth about the project. And this can really be
a great way for you to inform yourself about your
client competition, e.g. let's say that they are
in the banking space. You can use this e.g. just to understand how
they do their research, what is their target audience, What are their colors, and what is the reasoning
behind choosing those colors? So you can easily adapt that
to your particular project. If we scroll down right here
to go to our design stage, you can see that they're really using these dorsal colors. So black and white
with a hint of blue. And this is really corporate
design at its finest. You can see big texts, so super easy to read. You can see logos, you can see these
gradient behind. So all of these elements
really stand out to me in this particular example as
something which is tangible, which is easy to read, which is easy to understand, which is easy to cleanse. And you can see how
topography stands out against a white background, how it stands up against
these tags, e.g. high stands up right here. These big titles. So it's super easy to read. If we take a look at imagery
and this is the burst, which is Shopify
its own website. And I'm going to leave links to everything I speaking
about in the PDF. You can download the
PDF and simply click these links to access all of these files
which I mentioned. And these are really high
resolution free images, so free to use for both
personal and commercial use. So you can really find some
great images right here, y2q here in the first place
is to explain imagery. So e.g. this image and this
image is straight from the get-go tell completely
different story, even though the tone is
really quite similar because probably they are
using the same photographers. Those photographers like
to use certain filters, like to certain
colors and like how some certain calls stand out against the
different colors. Like in this example, we don't have to see blue sky. We can see this blown out sky with a filter right
here on the top. So those photographers like
to use those techniques. But why is this important to
you as a designer is simply to understand where can you take your project in
terms of imagery. So if we scroll down, you can see different
collections. So let's say e.g. that it's a coffee
shop in question. And you can see all of these coffee images
with a grunge texture, really dark filters overall. And you can really speak to your audience if this
is your audience, and you can easily
understand who your audience is if you're
simply browse these images. So are the younger people. Here are younger people. Are they enjoying coffee? Yes. Is your clients coffee
shop in this tone, in this vibe? Is it like this? So is it really
clean and simple? Or is it like this something
a bit more grungy, something a bit
more old fashioned. So you can easily
tell an easily speak with your audience if you
use images like these. So that's why I said
that images play a really key role
in every design. If I take u finally
to Envato Elements, which is one of my favorite
websites for resources. You can see right here that I explored all of these different images
for headphone design. And I use young people. Young people in this case, for headphone design
because that's the key demographic of my client and I simply explore
some images right here. Now, Envato elements is a premium service you will
have to pay to use it. But it's fantastic because in one single place and
you can find stock video, you can find video templates, you can find music sound fairs, graphic templates and much
more, including images. In my case, I'm going to
eventually pair these images, which corresponding
topography with corresponding icons
and much more to achieve that coherent looked at my client is going to want, if they agree, then
we can simply move on to design stage and start e.g. with wireframes. But
before all of that, I want to determine is this tutorial style that
my client likes to take? Is this something that
they're interested in? Is this something
that appeals to them? Is this the right color? Is this the right tone? Are these models taking
the right poses. So I'm going to consider all of these elements before
I move on to design. Because when I start designing, all of these decisions have
been made in the mood board, mood boarding part
of the process. So I can simply apply
them to my design and I can simply start
working on my design. So that's why moodboards
are important. That's how you do your research. And in the next
video, we're going to start with Adobe XD. I'm going to show you
some examples already created and I'm going
to show you how you can create your
own and how you can communicate your ideas
with your clients. So I'll see you there.
104. Create mood board in Adobe Xd: In this video,
we're going to use Adobe XD to create
our mood board. And I'm also going to show
you some of my examples which you can purchase if
you want to or if not, you can simply explore
them for your inspiration. If we go ahead and
switch to Adobe XD, what I've done right
here is created a 1920 by 1080 documents. Now, if you want to
print this document, what you can do is you can come right here and you
can rotate it. Of course you can be as
precise as you want. You can import
exact pixel number of your paper size if you
want to print it later. So e.g. if you're using A4, you can look up A4 either
online or you can open it up in Photoshop and you can simply
see the exact pixel size. You can enter that
pixel size right here. Just remember you don't
have to use 300 DPI because Adobe XD
is a vector tool. So you don't have to do that. You can simply import
for 72 DPI right here. You can simply create your mood board and you
can export it later. You can save it right
here as you see, I did a save it to
my Cloud documents, which is great because I can
access that wherever I am. So e.g. if I'm working on a desktop like I'm
doing right now, I can go to my client meeting
in their office, e.g. and I can pull up my laptop. I can open Adobe XD
with the same account. And I can simply pull up this document from
my Cloud and we can simply discuss our
mood board like that. So if we switch
back to Adobe XD, what I'm going to do is simply name it mood board right here. Before I move on any further, I want to go ahead and
show you my examples. So here is my website,
web donut.net. And as I said, you can purchase these templates if you want to. You can easily open them up in Adobe XD and then you can
work on them like that. If not, you can simply
use them as inspiration. So what we have right here
are these moodboards, and they are in A4 size and
US letter size right here. And you get them in Adobe
XD in Photoshop files. If some of these products
are Photoshop files, you can easily open them up in Adobe XD because they are
created by the same company. So Adobe owns both
Photoshop and XD, and these files are
going to work just fine in both Photoshop and XD. If we go back to here, you can see all of
these different layouts for images and four colors. You can easily swap these
images for logos, e.g. and you can see that
they are printed, ready and all of these layouts, if we switch back to this one, this is for Instagram
because it's squared, but you can easily adapted to work with any
size like you can see right here for the stories
or for the reals, e.g. so these are Instagram posts, these are Instagram stories. You can see how that looks like. And if we switch to this one, this is for social media
mood board templates. Once again, the same thing. And you can see that these
are square or rectangular, which is great for
Facebook, e.g. if you're using social media and you can easily swap them,
you can change them. You can use all these
different layouts to create your own. And you can easily adapt
them and you can see how they look like on different
social media pages. And finally we have this one. So four of these, and as I said, I'm going to link all of
these in the PDF file. You can simply, if you want to click on the link for
every single one of these, you can easily access
it if you want to. If not, as I said, you can
simply use it for inspiration. So if we switch back right here, you can see how this
one looks like. So once again, it's print ready. You can see some of these
presentational elements like you can include
the different logos, different colors,
different images, and you can see the
result right here. Now, you can use
this if you want to easily save yourself a bunch
of time if you want to, if not, as I said, these are great for inspiration. You can inspire
yourself as to where to position all these
different elements. And if not, you
can simply create your own depending of the project you're
working on at the moment. As he said in one of
the previous videos, depending on the project size, depending of the niche
that your project is in, that your client is in, you're going to invest
more or less time. And this part of the projects shouldn't
be time-consuming. It should be really
quick and easy. It shouldn't take you more
than a day to complete, no matter the size
of the company, no matter the size
of the project, no matter the niche
that your client is in. So just consider that. Don't spend too much
time on mood boards because they are there simply to determine the oral paste, the style, the tone
of the project. And then when you
start designing, you are going to
invest majority of your time in those
particular changes. So if we take a look
back in Adobe XD, this is how our
document looks like, and I can simply skew
it like this, e.g. if we want to
achieve something a bit more like a four, as I said, you can easily enter the correct values right here if that's something
that you want. So let's start with images because I have some
images prepared. I want to do is simply create
a rectangle and I can use a repeat grid if I want to
achieve a look like this, and I can choose to
look like this, e.g. then you can simply
ungroup mine grid, double-click on one of these, and simply bring
it back to here. E.g. I. Can easily scale it. And this doesn't have to be
perfect if you don't want to simply adapt it like this
to create a circle, e.g. or an element like this, they can overlap, you can
include different shadows. So e.g. like this. So 5520, let's say and let's bring that
shadow down to eight, e.g. something like this. What I'm going to do is actually select all of my
elements like this. I'm going to remove
the border and I'm going to include
something like DDT, which is a nice
light gray color. I can maybe scale it down just a little bit to
something like this. And e.g. I. Can bring this up right here. I can position it here. I can go ahead
right-click and I can copy right-click
paste appearance so I can paste that same shadow. But I'm going to simply reduce the corner
radius back to zero. And perhaps I can easily
pull this image in. Maybe I can expand this one just a touch to
something like this. Maybe I can expand this to here. So as you can see,
this is clearly some different variation than the examples which
are showed you. So if I go back to
these examples, you can see that these images
are really quite straight. They are easily include
bone right here. And you can see all of these different colors
positioned right here. You can see different texts, you can see different images. But in our example, everything is all
over the place. I'm doing this just
to show you that you can take this approach as well. Once again, depending
of the project, depending of the niche. Because your corporate
clients are not going to appreciate this style that I'm creating in Adobe
XD at the moment. But your clients who like
to use some kind of a fun, playful style are
really going to appreciate this type of design. So if we go back to Adobe XD and I'm going to show
you this right here. So let's simply
position is right here. Maybe somewhere
around here analysts use Control D. I'm going to duplicate it and position it
roughly around here, e.g. and maybe to somewhere
around here. And perhaps I can use
the same distance of 52 in this case,
maybe I can do this. And I can perhaps change in the color behind my
cell so you can see it. So I'm can change the color to something a bit darker because we're going to use this
color swatch for our colors. So I can reduce
the size to here, and I can use the
repeat grid once again to extract
some colors, e.g. something like this,
maybe ungroup migrate. And I can maybe position
this a bit right here. Maybe I can scale it up like so. And perhaps you
can use one more. So Control D. I can scale it down
just a little bit and perhaps position
it right here. So now that we have
all of these elements, perhaps what's lacking
is some typography. So I can hit T and typing e.g. playful. This and I can e.g. use something like Open Sans. In this case, perhaps
I can use a bit bold and I can scale this to 36 maybe just so
that you can see it. So playful. Control D, I can e.g. type in. Control D, something
like friendship. Control D, I can put
it right here, coffee. And let's say Control
D. Relaxation. There we go. This is our
mood board prepared. What I'm going to do next is
simply bring in my images. I already have some
images which I prepared just for
this demonstration. But you can go ahead and
use your clients images, or you can use one of the
websites which we talked about, or even better Envato elements because they literally
have everything. What I'm going to do is drag and drop an image right here. Just to populate it. I'm going to go and
drop it right here. By the way, you
can use the repeat grid when you created it, you can simply drag and drop the first image is going to populate with all
of your images. And then you can do all of these changing that I've
did in this case. But I like to do it like this. Or perhaps I can
position this right here because it's a coffee shop. I'm going to place
it right here. Perhaps I'm going to place
this image right here. Double-click, move it like this. And let's see, maybe
I can position this image right here like this. This doesn't work
for our example. So what I'm going to actually
do is maybe drag and drop, Let's say this image like this. And I think it's much better. What I'm going to do next is
simply sample some colors. But before I do, what I can do is perhaps find another image which is
going to correspond, well. Because I didn't prepare
any logo for right here. But e.g. I. Can maybe click right here
and use one of these. So let's see what it is. Ui logo. So I think now, because you can use these plug-ins and extensions
to easily do this. So as I said, you can either pull images
from your client, from your computer, from
Envato Elements, e.g. or from one of these plugins. But let's say UI Faces. And I want to include
from Unsplash, I want to use, let's say, filters
male and female. And I'm going to
click Apply randomly. And it's going to choose
one image and it's going to apply randomly to this
particular image placeholder. As you can see, it
positioned this one. If that's something that
you want, then fine. But let's actually go back
to our folder and let's see. What I would like to do is actually bring in this one
because it's a coffee shop. And I can double-click can position right here
because coffee should really be at the center stage
of this particular design. Finally, what I want to do is actually sample some colors. So what I'd like to do is
go from lighter to darker. It's easier, just in my case, but you can go the other way
around however you want. So for this one, I can simply
click right here and e.g. select this one. And I can click right here and perhaps start
with, I don't know. Let's go with this one. Maybe. I can click right here
and sample one of these. Then I can go to my dark
colors like this one. This is going to
be really great if your client already has
some furniture, e.g. and they send you images of their coffee shop there place. So you can easily pull in those images and you
can sample colors from those particular
images and you can easily present
them this mood board. So there we go. As I said, you can
go really in depth. You can go really into
a lot of details. Or you can simply induce something like this
which is fast, which is cleaned just
to show to your client what are the possibilities
of this particular project. But you can also do is
simply select these colors. Jump right here, click right here to add
them to your colors. And e.g. if you need to
change this text color, I can simply click
right here, e.g. and I can easily change and
apply different colors. If you want to achieve that
even more playful look, you can end up with
something like this. If this is something that
your client will appreciate. If this is their niche, if this is something
that they like, then she'll go ahead for it. But if it's a bit more corporate than you can jump
inside unexplored, perhaps. I'll lay out like I showed you in these moodboards
that we created. Finally, what I want
to show you is you can include some
background elements. So e.g. I. Can draw it and drag and create a
rectangle like this. I can create a color like this. I can position it right here. And if I don't like the color, I can easily swap it and change it to
something like this. Just to make my images stand
out just a little bit. And to include perhaps
that playful elements in that your client
for the legs. And you can achieve
a result like this. That's it for this video. In the next video, I'm
going to show you how you can share this mood
board with your client. If you want to get
feedback online or if not, you can easily print them. And I'm going to
show you how you can export for printing from Adobe XD and how they look printed and what you can
actually do with them. So I'll see you there.
105. Share or export your mood board: In this video, I'm going to show you some settings that you can use for export of your moodboard and
font, printing it out. And I can also show you what you can do to
share this mood board online with your client and get the feedback that way. So if we switch
back to Adobe XD, here is our mood board
that we created. What you can do is simply
share it like this. So you can share this
particular art board that we created with your client and you can simply
share just this one. Or you can click right
here to the Share tab. Click Generate Link
on the blue button, which is going to appear
right around here. You can copy that link and
share it with your client. Now, what that link is
going to allow you to do is to gather feedback and your client can leave
your feedback on this particular mood board if they are far
away from you, e.g. which is a great
way to communicate with clients who are
not in your area. So you can simply share
that link with them. They don't have to
have Adobe account, any account for that matter. They can simply jump inside that link and they can
simply leave you feedback. You can browse my other
classes on UI UX design to see that in action and to see that
sharing process in action. Because it really goes in depth and you can really
point the spins. And they can leave certain feedback
on certain parts of your design and so on. Later on when you start creating your design in Adobe XD, e.g. you can expand on this existing file so
you can add wireframes, you can add design. You're going to prototyping. You can add style guides, you can every single thing
inside of this one file. So your share link
obviously is going to grow. Make sure if you're
using free version of Adobe XD to share just one design with your client because this is
the limit with the free plan. If you have a premium plan
and premium plan like Adobe XD Creative
Cloud subscription or Adobe XD premium plan, then you don't have that limit. But if you're using
free version, you have that limited to just one link that you can
share with your client. So once again, if you're
interested in make sure to check my other classes because those types can really
go into in-depth. And I think one of
my previous classes, there is something
like 3 h session. Where we go, we're going to
find details about sharing settings for Adobe XD because
you can share for clients, you can share for developers, you can share your
presentation or you can custom share and to adjust all of these different settings
inside of that. So I don't have time in this
particular class and I don't really want to bore you because
we just have mood boards. But when you start expanding, this is really key to understand what you need to do to
share with your clients. Next thing which we
can do is export this. So if we go back to here, I can go to File, Save As and save it like that. Or I can simply hit Control E on my art board and I can
simply export it like this. So I can use PNG, I can use SVG, I can use PDF, and
I can use JPEG. You can set the
destination right here. So this is the output where your file is going to
go once it's saved. So what I'm going
to do is hit JPEG, hit Export, and then hit
Control E one more time. Then change it to PDF. And I'm going to
export it once again. Why I'm doing this is
I want to simply have the ability to
print both jpeg and PDF and simply compare which type of element
does it work best with. So e.g. in some cases, PDFs have greater quality. In other cases, jpegs
have greater equality. So what I would really
recommend is to export bolt and to see where each of
them is going to take you. So I'm going to go ahead and
print it now and come back and show you how it
looks like printed and what you can do with
those printed versions. Let me now show you how
it looks like printed. So here we have
that Adobe XD file, and here you have it printed. And you can do with
this printed version is you can simply use
your pen and paper and you can jump to your client and discuss possible solutions,
discuss possible changes. So if you meet with
them at their place, at their office, e.g. they might say that
this is too dark. This is e.g. the key, the key world maybe that they want to use in
their copy, let's say. Or if that's something which they are
striving to achieve. So you can really
discuss with them all of these different topics, all these different
solutions that you created right here and
print it out right here. So e.g. you can say that
these images don't work. And they want to
see more of these. E.g. we didn't include
any of people right here. Maybe more people. Images. More of these mode of coffee, e.g. something like that. So you get the idea, you are going to
discuss with them, all of these changes, all of these different images, all of these colors. And when you agree
with them, e.g. right here, we just
included one font. But perhaps if you included several different fonts
in your moodboard, perhaps they're going to take this one and say
go with this one. And if you have chosen multiple fonts
with multiple colors, perhaps they're
going to say, yes, this font with this color e.g. is going to work just fine. In our case. You're going to notice
a bit of a team, a bit of a trend developing once you start
exploring this in, once you start talking
with your clients, I purposely left or whitespace
around all of my images, around all of my colors, just so I can easily write this down. You don't have to do that. You can easily
switch around n e.g. you can call this
image number 1234. And on the other side, you can flip it n e.g. image one, you can say good. Image three, e.g. not good or too dark or
whatever you want to get. As your reference. This is just to help you when you start
developing that design, when you start
developing that tone. And as I said, this
is really great because you can print it
out, give to your client. They can leave these notes
around and they can easily get the picture of where this project is going
to go back and forward. If you can, you can make these changes with these
things that we just discussed. And you can print this
out one more time. You can go back to your client if they are somewhere near you, and then you can sit with them one more time and
simply ask them, Is this the right direction now? Is this how you want it to
look like this direction more? Do you like this style more and all of these
different questions. So if they say yes, you can jump right here
and then you can easily take these e.g. like this. And if they don't like this one, maybe you can do like this. So as I said, this is just a quick example of what you can do with
these multi-part. So make sure to understand that this mood board process
is going to take time and sometimes on some projects is going
to take you e.g. 15 min to create and then maybe 30 min to discuss
with your clients on some projects is going to
take you a day to create in two to three days to
discuss with your client, to determine the
overall style, e.g. a, neural direction of
the project itself. So make sure to
calculate that in your budget because this is the part of the
design process, you should be charging
for mood boards. So just make sure to understand that when you start working, as I said, make sure to
adjust for your paper size. So e.g. this is A4. If you're working with
US letter size e.g. then you can adjust that to that particular size in
Adobe XD right here. So as I said, you
can jump right here, adjust the pixels as needed, adjust them as you want. You can flip this around
if that's something that you want and make
sure when you print it. Not to worry about 300
DPI because as I said, adobe XD is a vector
type tool. So that's it. Make sure to test it out, make sure to try it out, make sure to speak
with your clients. Because as I said multiple
times throughout this class, this part of the design process is to determine
the overall style, the overall direction,
your role tone. So make sure to factor that in, in your design directions.
106. SECTION 13 ASSIGNMENT: Your assignment for this section is to create your
own moodboards. You can use just
one you can create, you can create five
however many you want, and however much time you
actually have to invest in one. But just try to start
with one and just tried to pick some random colors from random images
that you really like. And try to combine
them into something useful that you can actually
use on your project. Try to practice that way
and later on, actually, when you want to
try it with real projects and real clients, make sure to take their
logo, pick colors from it. Make sure to take
their favorite images, existing ones, or the
ones they actually like, try to use different
inspiration from different websites which they provided into design brain e.g. and just tried to combine it all into a usable mood board.
107. SECTION 14 UI Kits: Ui kits can be incredibly important and
incredibly useful in your design process
because you can reuse some of these elements over
and over and over again. In this section of the class, we're going to talk
about what a UI kit is, how to create your own
using Adobe XD and how to reuse some of these elements in your designs. So
let's get started.
108. What are UI Kits and why are they useful: Ui kits are basically
just collection of different elements
that you can use for your UI design projects. Those projects can vary from mobile design projects to
website design projects to product design projects
such as dashboards and web apps and
projects of that nature. They can come in different
file types, e.g. Photoshop, Sketch,
Illustrator, Figma, Adobe XD. And in this class we're
going to focus on Adobe XD. They can also be width
images and without images. And we're going to explore some differences between
those two types. Why is one better than the other and the
other way around? And primarily you're going to use these UI kits to speed up your workflow because
you're going to do these repetitive task, especially in UI design, e.g. you're going to
create navigations for all of your projects. So instead of recreating that navigation per se for
each particular project, you're just going to create one navigation type
and then simply expand your ideation from
debt one navigation type, which I'm also going to show
you later in this class. So basically you're going
to speed up your workflow next time when you
start a design project because you're going
to have all of these different file types
saved in your computer. And then basically are
going to be able to use and reuse all of these
different elements for all of your
different projects. Now, because we're going
to work in Adobe XD, we're going to work with components and
you're going to be able to reuse those components
to change the colors, to change the file types, to change the structure, to change the
background shadow, e.g. to change the colors and much, much more with your kids, you're going to be able to
adapt for different projects. So once again, e.g. if you are creating
in Adobe XD per se, you can create components, e.g. website design on full-screen, let's say 1920 by 1080, then you can go down and create responsive resize sizes for your responsive design projects. The same thing goes for
mobile designs, e.g. you create your UI
kit for iOS web apps. Then you want to create that same UI kit to
work on Android. It's going to be much
simpler when you actually have the file types and
files already prepared. Then to do that from scratch, this is going to allow you to charge more for your projects because you're going to be
able to deliver faster. Because you come prepared
with these UI kits and you prepare it
all of these elements for your future projects. So in the next
video, we're going to explore these differences between UI kits with
images and without images. What are some benefits and
drawbacks of each of them? And I'll see you
in the next video.
109. Types of UI Kits: In this video, we
are going to explore some main differences of UI kits with images
and without images. What are some main drawbacks and selling points
for each of them? So let's get started. So here I have
opened a UI eight, which is a website
where you can actually purchase these UI kits. And we're going to talk about these websites a little bit later in this particular video, I just want to focus
on differences between UI kits with
images and without images. What can each of
these be used for? And what you can
learn about creating these UI kits for your
different types of projects. So what we have right here
is this quantum UI kit, which is, as they say, huge library of your
cards for web services. And what they actually
created right here, as you can see, are all of
these different components, which are basically
website looking templates which you can use and reuse
for your future projects. So why this is useful for, if I right-click and
open up in the new tab and zoom in so you can see
a bit of these details. You can see that right
here we have e.g. this Sony Dual shock
for black controller, or we have the price,
we have this icon. So basically what you can
do with this design is you can quite simply work
with this exact design. Just create a component, e.g. for this dual show controller. And let's say that
you want to replace this inside of the
component, e.g. to add a different product, let's say maybe you want
to sell the iPhone, then you can create debt component of
this particular card. You can simply drag and
drop your iPhone image. You can drag and drop the information of that iPhone
that you have for sale. And Dario, you don't have to
create the card once again, you don't have to
add the drop shadow. You don't have to choose
the specific font. You don't have to choose
the typography layout, you don't have to
choose the hierarchy. All of that is done for you in the previous project
by yourself. And now you can
simply use and reuse this exact same component
in your future projects. I'm going to explain
that a little bit later in the lesson specifically
about Adobe XD, how you can scale
these components, how we can change them, use them and reuse them and so on. But in this example, as I said, we want to focus on UI kits
with images and without images and what you can
use each of these four. So going back to this example, you can see how many
of these they have. They have this sale car, e.g. they have this load
more components. So basically, all
of these components are extremely crucial to create in a UI kit because
you're going to use and reuse them for
each and every project. So in navigations,
footers, blog cards, these are shop items and so on. So all of these are
going to be really useful to have for
your future projects. If we check out
this one which is called platform
our wireframe kit. So what's the difference here between this
one and this one? Basically, wire-frame kits are these UI kits
without any images. And you can find them online
or wherever you search. And I really recommend that you create these wireframe
types over UI kits. Why? Because you can
always drag and drop images into places of
these wireframing kits. And you don't have to log with these huge file types because obviously which are
software you are using, if you don't have images
included inside of your designs, your file types are going
to be much smaller. It's going to be much easier
to work with these files. Then if you have
them with images, it's also going to be
much simpler to show these wireframe kids to your
clients and just tell them, just imagine including
images inside, inside of image
placeholder, e.g. you can change the color. So let's say you can
talk to your client and communicate this idea, e.g. that image is going to be blue, like in this case right
here, so they can know, okay, So this background
is just going to be image. So it's going to be much simpler for them to understand and to visualize in their head that the image is
going to go there. What's in it for you is, is going to be much more
simpler to change and make changes to these wireframe
kit then to the UI kits. Because UI kits with images are going to be
much more difficult to change because you're always going to follow some
kind of image structure. You're always going to follow
some kind of image tone. Perhaps you're going to sample your colors from your images. So therefore, it's good to
be much more simpler to use colors and to use all of these elements from
wireframe kids, because you don't
have images in place. Later on when you determine
the structure with your client during your
work on that project, you can simply drag
and drop images inside and then simply adjust
the design a little bit. E.g. include the drop
shadow here and there, just to make the button e.g. standout or navigation or
hero image or the texts. Maybe you should change the
text color from dark to light and the other way around depending of the image
of your choosing. So therefore, wireframe kids are much more useful
in my opinion. And then UI kits because
UI kits, as I said, follow the structure of images and therefore adapt to that
structure and those images, while wireframe kids simply use the structure itself and
don't adapt to anything. You can simply drag and
drop images inside later. Now finally, there
is one more thing which I want to mention, and these are flowcharts. Flowcharts come in different
types of file sizes, different types of elements. And this is something called
schema mobile flowchart. And I can show you one of my flowchart products a little bit later because I have to, and I'm going to show you
how I created them and how you can use them to communicate
ideas with your clients. Going back to this one, because you cannot see it. Here. I open it in a new tab, and here you can see that
they don't use a real texts. They don't use real images. They just use these
placeholders, e.g. this is going to be
paragraph this is going to be title subtitle. This is the image, this is the button, this is the pagination is
you can see they're using icons for navigation
and for search. Using these social icons
for Facebook and Twitter. And what this is going to
allow you to do is you're able to communicate your ideas much faster with your client. Because once again, as with
wireframing kits and UI kits, you don't waste your time
by picking these images, by choosing these colors. You're just simply
creating layouts which you can communicate
and share with your client. Once those layers are approved, you can work on the details. So this is why these
wireframe kit, UI kits and these flowcharts are so crucial for you to create. So you can just imagine you can start working on
a flowchart, e.g. for your client. Then after
that project is done, you can simply reuse that
flowchart in terms of a UI kit creation for
your next project, you can simply create
components for shapes, for colors, for fonts, for images, for
buttons, and so on. And you can simply use and reuse those components in
your future projects, which in turn is
going to save you a lot of time and
it's going to help you move on with your projects faster is going to allow
you to charge much more because you're going
to spend much less time in each project because
you have already created all of these components.
110. Which components are important: When it comes to structure, these components are really
important and less important. So it's really all
up to you which types of components
you want to use. So let's say that
you're working on blog projects all of the time. Just take a look at
your previous works and understand which types of components have you
used in the past. Obviously, some kind of search bar or some kind
of navigation footer, perhaps even sliders here or images doors are really
mandatory because those are types of elements
which are going to use all of the time
in your projects. But depending of the niche, you are independent of
the projects you'll be working for previously
and on previously, you are the one who is going
to determine which types of these elements you're going
to use in your UI kits. So I'm going to show you with the previous examples
that I showed you. And you can determine
looking at dose, which types of elements
you can choose. And in the next
videos in this class, I'm going to show you which
are some types of elements which are used in the past and what you can
learn from that. So going back to these examples that I showed you previously, you can see that they have
e-commerce right here. And if I scroll all the
way right around here, so we can see e-commerce. And if I scroll
all the way down, you can see Dashboard. So if you're working on projects which require
all of these elements, you can just imagine how time
consuming all of these are. So you can create them
once and then simply reuse them by changing
colors, changing e.g. position of these
different texts and so on. If we scroll all the way down, we have company cards. So this can be e.g. team portfolio About
Us testimonials, features, pricing,
and stuff like that. If we scroll all the way down, we can see music
and video cards. So these are perhaps not as important as
these previous ones, and they can vary from
project to project. News and magazine cards. Once again, if you're working on blog projects all the time, these are really crucial. So once you create them, once he's going to be
much more simpler to reuse them and repurpose
them for future projects. And you can see right here, so we have different
types of navigation. We have these social
cards, which once again, depending of the project
you're working on, can be important
or less important. We have base elements
and style cards. So we have base elements such as these navigation,
footers, crumbs. We have these different icons, loaders, sliders,
buttons, colors. And finally you have
the sample pages in this particular quantum UI kit. And you can look at these
pages for inspiration and see where they used all
of these different elements. If we take a look at
platform and we have headers, we have contents. So once again, blocks of
Contents, sliders, simple grids. So basically images in
a grid left and right. We have this man's for grid. We have futures left
features, right? E.g. with mobile phone mockup, with website mock-up, sorry, laptop mockup with
tablet mockup. We have different
portfolios once again, depending of where you are
working on in which nature, when to use one or the other. We have e-commerce, especially important if you're working
with e-commerce websites. We have blogged cards. And obviously you can use and reuse these different
components, e.g. these block cards,
you don't have to use them for blog websites. You can use them e.g.
for e-commerce websites, that's the beauty
of these UI kits. You can simply repurpose
these cards in your future projects
and simply adapt them to work for that
particular project. So we can have
team testimonials, price stables, call to action. These price tables are
especially boring to create because you
are basically, let's say that you have e.g. 20 different examples of
these pricing tables online and all of these
other examples are just variations of
those examples. So why would you waste time
recreating all of the time? All of these elements
simply create e.g. five or six price
tables at once, and then simply
repurpose them for your future projects is going to save you a bunch of time, especially with these
boring details where you have majority of these
different choices, especially with pricing table. So you have options,
you have prices, you have monthly
plan, yearly plan. So all of these details
are going to take you a lot of time to create for
each particular project. So therefore, having them in one UI kit is going to
save you a lot of time. If we take a look right
here, call to action, especially important with
all of these promo cards, we have forums and contexts. Once again, with these forms, how many of these variations
can you actually have? So let's say that
you can create e.g. 15, 20 contact
forms. There you go. You can reuse them for all
of your future projects. And headers and footers, especially are boring for me to create because of
repetitiveness. And they are using all
these different elements. E.g. client logo is
going to be left, right, center at the bottom. And that's basically it. So you can see when you start
creating these UI kits, you can get the picture of which types of elements
you need to create more. Which types of elements
you need to create less obviously for
any type of nature, in some kind of a
contact form is going to be good to include. But basically once
you start creating, you can use contact form for
this, from this project. You can use contact form
from this project and simply adapt and to work for
your future projects. That's the whole
point of view I kid. And that's why I think they are extremely useful to
have and to create. And obviously this
UI kit creation is not going to come easy. It's not going to come first. This is the process
which you're going to use and reuse
throughout your career. So you can basically
scrap some elements which are no longer
relevant in terms of style, in terms of function. Perhaps some elements are not used in the industry
or in anymore, so you can simply scrap them
and use elements which are n simply adapt and fit to that
UI kit that you are using. So that's the beauty of UI kits and that's why
I love them so much. And I think you should
start exploring them too.
111. UI Kit structure in Adobe Xd: In this video, I'm
going to show you some structure ideas for
your UI kits in Adobe XD. I'm going to show you my
examples because I have been creating these UI and
UX gets four years now. And I have over 500
design products in my shop web done at the.net. I'm going to leave the links to everything and speaking
about in the PDF, you can simply click those
links and visit and explore. And if you're interested, even purchase all of these different products
which I mentioned n, which I'm going to
mention in the future. Once we actually get to these selling types and these
profiles on these websites, you can sell your designs. But for now, let's explore the structure
of these UI Kits, how they can work in Adobe XD, and how you can learn from
it and create your own. So what I have right here is the converted landing
page builder, which is the product that
we created a while back. And this is the wireframe kit, obviously, as you can see. And if I zoom in a
little bit closer, but you can see right here
we have the navigation, we have the headers, story, features,
benefits, promo, testimonials, team,
pricing, others. And for all of these, we have multiple options, obviously because this is
the landing page builder. These are the elements
which are going to use for majority
of landing pages. And this is intended
for somebody who is creating these landing
pages all of the time because majority of these
companies out there are creating these landing
pages all of the time, e.g. for their kick-starting
campaigns, for their product launches, for their product promos, for all of these campaigns, for Facebook ads,
for Instagram ads, YouTube ads and so on. So landing pages are
extremely important for that. This particular product is meant to work with landing pages. So once again, we're
going back to the niche. What is your niche and what is your type of project
that you're working on? You're going to
create components which are going to
work in that niche. If we jump back
right here, e.g. I. Can see this is 1,400. And I can jump in right here
to create a new art board. And I can jump right
here, create this one, click right here and
simply adjust it to 1,400, like that in order for all
of our elements to work. And I'm going to
expand it further. So what I can do is I can e.g. click this navigation Control C. Click right here, control V. And I can e.g. click
right here, control C, control V, and
adjust this to fit. I can even put them
inside of the stack, and then I can simply drag
and drop inside of the stack. But we can also do that later. E.g. I. Want to show these
different features. So let's see where are the
features. Here they are. So e.g. I. Can use this
one control C, control V. And you can see how easy
creation of these websites is, let's say this one
position right here. Perhaps I want to
use this one now. Position right here. Maybe I want to use
this one right here. Like so. And let's say now comes the time for the
pricing, put it right here. And perhaps something like this. I want to persuade people
even more. Put right here. And position doesn't matter, uh, for the moment
and you're going to see why in just a second. So put them right here. And let's say that now that your landing
page is completed, you can select all of them, hit Control G to put them in a group and then put
them in a stack. This is the vertical
stack and I can put the distance of 150, e.g. between them and press
Enter or Return. And now we have evenly spaced space between
all of our elements. I can put them all to the
top of the page like this. And e.g. I. Don't want it to
be one-fifth this. So I can simply adjust
just this one to zero. And all of these other
ones are going to have 150 for the spacing. So you can see how simple it
is to create a landing page. You can double-click
right here to close off it right here. And e.g. let's say
that the copy is ready and you want to make
some changes to the images. You can simply drag and drop
your images inside of here, placed them in, and then
simply make changes. E.g. we have this
image icon right here. I can simply hit
Delete to remove it. And I can e.g. lower down the opacity of my image to
make it stand out a bit more. And e.g. I want to add
additional image to here. Maybe this image, I want to
add something for the video. Perhaps. Maybe this image is
going to work so you can see how simple it is to work
with these different images. So I can select it, hit for, maybe, for 40% opacity. Perhaps I can use a different, different icon right here. And perhaps I want
to put this to be, I don't know, something
a bit rounder. So I can jump right here, type in 20 for the
corner radius. If I want to do that, you can adjust this so
you get the picture how simple it is to
create these elements. So this is basically
my structure and how my team and I are working for
years on these structures. And I'm going to show you different structure
for mobile kids. And this is Chetty UI kit. And you can see that we
have images right here. Obviously is going
to be quite simple to replace all of these images. You're just going to use
exactly the same structure. So if I take a look right here, perhaps I want to adjust these images so I can
select it and this one, and perhaps I can select
two different images, drag and drop them inside. And I want to use this one, e.g. so you get the idea
how fast it is. But what you can also
do is click right here, and here we have all of
these different elements. Now, elements are really useful. We have this main blue and
I want to right-click, click Edit, and perhaps I
want to change it to red. So just notice how it
applies throughout all of our different changes and
simply adjusted to read. I can also go Control Z. To undo that. We can also change the font
sizes and font choices. We can change the font weights. We can change all of
these different elements. So what I can do is
hit Edit and e.g. I want to choose some
other phones like Open Sans, e.g. press Enter. And it's going to apply that change throughout
our design. So you can see how easy
and simple that is. Also, we can have all of these different components which we can change independently. So you can see e.g. that we have these
dots which are black, right here, right
here, right here. So throughout our design and everything else,
which is black, we want to change it
to something wild, like read one more time, e.g. so you can see whatever we had. That color is going to apply
throughout art design. And it's going to apply wherever we had it
in the first place. So that's why all of these components are
extremely useful. And in the next example
and in the next video, I'm going to show
you how you can turn your existing design into UIKit because
you're not going to purchase these UI kits
for every single project. And I think it's much
better approach, even though I'm selling
these UI kits, it's much, much better approach
to either start with a premium UI kit
just for your structure, just for this element, just
for some boring elements, which you can then re-purpose
for your own projects and then to create your own UI
kit using these elements, using these tactics
and techniques, which is going to work for
your particular use case. Because I'm going back to
the niche one more time. Because you are e.g. in a travel niche, elements
which worked for you in your project might not work for somebody who is in
a blog niche, e.g. because they might need
different elements. So in the next video, I'm
going to show you how you can turn your existing
project into UI kits.
112. UI Kit creation in Adobe Xd: In this video, I'm going to
show you how you can turn your existing project into UIKit and then repurpose it for
your future projects. This approach can be used for different projects
so big and small. And you can use certain
elements or you can use all elements and then
simply go on from there. You can use one type
of element, e.g. navigation, if that
is something which is repeating all the
time in your project, or you can use different
types of items, e.g. both navigations, hero images, footers, blog, hearts, and
all of these types of items. So I'm going to show
in this example of for the existing projects how you
can turn it into a UI kit. This is the project which I have created for one of
my previous courses. I'm going to leave it,
leave the link to it in the PDF so you can take a look at it if
you're interested. So all of these elements
are created in that class. So it's over 20 h long. And once again, I'm going
to leave the link in the PDF so you can
access it quickly. And what we have right here are different components for the
colors, character styles, all of these components for
all of these different cards, we have different icons, we have different
structures right here. We have the logo, we have the arrows cards and
much, much more. So what you can do for this is if I click right
here, once again, we are at 120th instead of
1,400 like we did last time. So what I can do is click on my artboard to create
a new art board. Or I can simply duplicate
the existing one. What do even better,
what I can do is go right here to the File. And then New, sorry if
it lags a little bit because I'm running all of
these elements in my machine. And this file is quite huge. So I'm going to
create a new file, and I'm going to
simply reuse some of these different
elements in my project. Alright, so now that we've
had that project created, what I'm going to do is jumping right here to this
website design. And I'm going to jump all the
way to here, hit Control C. And then I'm going to switch to the project that
we just created, hit Control V, so that I can just paste
inside this design. And what I can also do
is jump back to here. And perhaps I can use one other. Let's use this one control C. And I'm going to jump into
this project, hit control V. And then once there we go, just to save ourselves
a bit of time, what I'm going to
do is I'm going to actually turn this
off, so kill it. And as you can see, some
elements are already paste in from our
previous project, like all of these
different icons. But we don't have colors and character styles and we can
work on them separately. What I wanted to
show you is this. So I'm going to enlarge this. And let's say that I want
to use this navigation, but first of all, let's
use the same grid. So if I switch it on, we have, let's see, 12 columns. So 60, 82, and I'm going
to do the same for this. So we have 60, 82. There we go. So it's the same as this one. And I'm going to lower
down the opacity of these grid lines like that. So let's say that I want to use this navigation so I
can hit Control C, paste it in right here. And what I can do is
position it right here. And let's say that this
is our first navigation. Let's go to our layers. So we can use e.g. Nav one. And what I can also
do is unlink it. So let's right-click. Just let me see where it is. Unlinked component. There we go. So this is the one end. We can create it to
be local components. We can hit Control
K If we want to, and we can create
different states from it. So I can click right
here and type in e.g. let's say big button, big btn. And what I want to
do here is I just want to double-click
inside and extend this button to hear and perhaps move our navigation items more. Let's say I want to
align them right here, or perhaps even better
in the center like this. So if we take a look at this default state
and this state, we have these two
separate states. So what you can do with
this one is simply hold Alt in your default state, position it right here
too, I don't know, let's say 60, then
use this state. And already you have two types
of different navigations. So let's say I want to
create another one. So we can go back to
the default state, which is this one,
create a new state. And e.g. I. Can put something like without
text, something like that. So in this state, what we are going
to do is basically go in and remove our text, open up, select our
text, hit Delete. So now we're just
left with our button. And we can either
expand this button, leave it like this. It's all really up to you. So what I'm going to
do is select this one, move it to 60 and
click without texts. So there we go. We have our Three different elements and three different navigational
elements already created. You can also do is
organize these, and I really like to do that. So this is now one, this is now the two. And this is going
to be nav three. Let me give you just
one more example so we can go back to this
default one and create one without a button
or no btn for short. So what we're going to do is basically make a select point. So from here we are 40 and I'm
going to select our button deleted and select all of our
navigation items. Like so. Positioned them to
the edge shift 1234. So we're 40 from this edge, same like we are with this edge. And basically I'm going
to do that one more time. So I'm going to hold my Alt
or option, select know btn. And there we go. I can go back to default state and you can see
how quick this is, how fast this is. And it's going to save
you a bunch of time. I'm going to switch this
to big button like this. So it's going to save
you a bunch of time later for your future projects. And you already saw
how simple this is to simply copy and paste
in previous video. But you can also do for
this hero images, e.g. so let's hit Control
C. I'm going to Control V. And what
I recommend you to do is to rename this to navigation and to create separate rpart for
these hero images, e.g. so in this case, let's say
that we have these people on this side and
let's duplicate it. Control J, sorry, Control D, like that and
position it to be 60. So once again, this is going to be in a separate artboards, so let's actually create that. So I'm going to
remove these two. And you can position footers inside of your navigation
if you want to. It's already all up to you
how you want to create them. And I'm going to
call this Hero e.g. because these hero images
is something that you're going to spend the
majority of your time on. So let's say that for
this second example, which is going to be
hero to this hero one. Notice how I don't create
components from these ones. I want to show you
this second approach. So as I already showed
you with these ones, components are obviously
extremely simple to create, but you can also go without
components and you can simply create the separate
elements for yourself. So let's say that I want to position this text to the right. What we can do with
these ones is we can position these
two in a group, put them in a stack, and simply reverse
the order, like so. And now the text
is on this side, people are on this side. And what we can also do is use
these background elements. So this hero shape, perhaps I want to flip
it around like this, and I want to position
it like this. And all of these
different elements. So Hero Elements, I'm going to position them right around here. So you get the picture
how simple this is, n. I also have a mask right here
with my hero circle inside. So I'm going to
position it right here. So there we go. We just
a couple of clicks. We have two different options which we can show
to our clients. What this is going to
do for you once again, is going to allow you to work much faster
on these projects, especially with these repetitive
tasks like I mentioned. So navigation, footer images, and all of these
different elements which are going to
repeat all of the time, like pricing tables, e.g. so it's much easier for you as a designer to create all of these variations in your
style, using your components, using your design language, using your preferred font, using your preferred colors, and then simply reuse these components for
your future projects. Is this cheating
for your clients? Know, because your clients
just want the end result. They don't care how you
get to that end result. Is this something
that you repurposed? Obviously it is, but just make
sure to not use any logos that you previously
used in your projects and not to use any
branding, e.g. certain colors in
your brand books that you get with
your clients, e.g. some colors are trademarked, some fonts are trademarked. So just make sure to use e.g. free Google fonts when
you start creating these, and then simply adapt those to your client
specifications, e.g. for colors and for fonts. Let me just show
you one more thing. With the power of x D, we have all of these
different elements. So just imagine that we
want to use this image. So Control C, Control
V right here. And let's say that this
is our first card. So let's call it
card one, like duck. And here we have the
stack, as you can see. So I'm going to hit Alt. What do even better? I can create it as a component. So Control K, we have this default state is with
the image on the left. So new state, right image. And then simply
adjust it to here. Like so. And what I'm going
to do for this one is I'm basically going to
just flip them around. So there we go. And I'm going to
adjust this card. One, I'm going to make sure that my image is right
here, and there we go. So this is our default state. This is a right image. And once again, I'm going
to create one more. So center image like this. And I'm going to make
a change like that. So 123, so we're
at 60 like that. And obviously for this one, I'm going to go
with center image. So what I'm going to do
is jumping right here. And I'm going to change
the position my stack. So what I'm going to do is
put them inside of a group. I'm going to use the SEC
vertical stack like this. And basically just expand the
image to the edges like so. Double-click inside
positioned e.g. right here. There we go. Text is going to be in the
center in just a moment. So let's go for
the default state, and let's work on the
center image right here. Because this is our component. What I want to do is
basically adjust this text. So let's go with, let's see auto width. So what I'm going to do is double-click inside
and adjust this text. Bingo a bit outside. But you can also do is create auto height and you can
adjust it like this. And simply bring in what you
don't need here like this. So we just a couple of clicks. We are going to be
able to adjust it. And you can do auto weight, you can do auto height,
whatever you want. And I'm going to
make sure this is center aligned like this. And I'm going to perhaps
position this in the center and position my
button in the center as well. And make sure we are
40 from all of these. And just make sure we are, because we are in a stack, e.g. 64, this one. And you can also
enter it right here. So if I select my
group right here, select 60, and it's selected. There we go with just
a couple of clicks. You have three different
cards which you can use. So basically we
have default image, right image, center image. So you can do whatever
you want with those. So we can see how
simple it is to create these elements
in Adobe XD. And once again, I urge you to start thinking
about your project, to start thinking
about your niche, which are some
elements which are repeating all the time,
which are sought. My elements which are
extremely boring. Can you purchase something
or download something for free which is going
to improve your workflow, which is going to speed
up your workflow? Or do you have to
create everything from scratch depending
of the new chorion, depending of your design style. If that is the case, then simply start
by creating all of these regular elements like I showed you in
this example, e.g. navigation, footer, all of these different cars which
are going to repeating all the time and then simply expand from there
throughout time. Finally, what I want to show you is if we go back to Adobe XD, you can see that it saved
this file to the Cloud. This is extremely important, especially if you
are sharing this with your design colleagues, with your clients, or if you're working
remotely firms, e.g. you have the office and
you also work on laptop. But what I also recommend is
saving this to your desktop. To do that you can simply
write here to File, Save As, and you can choose as safe as local document to your desktop. What that's going to allow
you to do is you can simply have this file, e.g. if the electricity is gone, you can take it to your laptop and you can take your
laptop wherever you want. If you have to adjust and
make some quick changes, if the Internet is gone, which is really the key
benefit of local documents, you can simply save it locally
and simply work or not. If you don't have
Internet connection.
113. UI Kit VS Design Systems: There is also one more type of template which is
available online, which is called design system. And design system
is basically dead. It involves different
types of fonts, different types of rules, different types of grids
in many other projects, especially if you're
working with code. So you're going to assign
a different code snippets. You're going to assign
different tokens for colors, for fonts and much more. So the design system
is much more complex, beast and a UI kit. So depending of the
projects you're working on, you can create design system
which is smaller if you're working on small projects or if you're working
with bigger projects, I definitely recommend
working with design system. But the key difference between
UI kit and design system is UIKit already has these pre-made components
already created. So as you saw in
the previous video, we already created that
navigation. So it's ready. It has the logo inside
which you can swap with your next client project. It has the type inside, so everything is
already positioned. You can simply rename
some of these types. You can change the font, you can change the styles, you can change the size
and everything else. And it already had
that button in place. So you can simply adjust
the width, the height, the color of the button, the background shadow, and
all of these elements. And that's the UI
kit in a nutshell, while with the design system, you would have to recreate
that navigation from scratch. And because inside of
the design system you have much coherent structure. So once again, I'm going
back to the bigger project, especially on the
huge project where majority of designers are
working on that same project. Then design system is really crucial because you need to have one central repository
of elements to be used for all of these
different designers inside of your team. While if you're working alone or if you're working with
just one other designer, or if you're working
directly with the client, UI kit is a much
better solution, in my opinion,
because once again, it's going to speed up your
workflow massively because you have all of these
elements already created. You don't have to
create them from scratch all of the time. While designing systems
are extremely important, extremely valuable,
and extremely useful, in my opinion, for
these smaller projects, you don't really need to create these design systems because
you have the components. So we can simply
adjust the components. You can simply adjust
the font size. You can simply adjust
the font family. You can adjust the color. You can adjust all of these different
elements, e.g. icons. Let's say that you are using these image icon
throughout your design. And you just want to
swap it out really quickly while you can
create a component. And the next time on
the next project, if you want to change that, you can simply drag and drop
a different icon inside. It's going to swap
that components. And there you go. You don't need a design system for all of these small projects. So once again, it depends of you what kind of projects
you're working on, what kind of niche you are in, especially for
these small niches, these design systems are
not really that useful. Once again, it's all up to you and I'm going to
leave the links to some of the most well-known
design systems in a PDF, you can download the XD version. You can open them up in
Adobe XD and you can simply explore what are
these design systems and what you can
learn from them. Because all of those are
created by big companies. And once again,
those big companies created those design systems because they have
multiple designers working on a team
at the same time. So they need that
central repository of elements to be used by all of
these different designers. Otherwise, if you are
just one man band, if you're working
on small projects, you can simply use UI kits and it's going to be just fine.
114. Premium VS Free UI Kits: It's all well and good to create these UI kits for
yourself by yourself. But it's sometimes may be easier to just
simply go ahead and download or purchase these
different UI kits which are going to be used for
your future projects, perhaps for those
boring elements like we spoke about previously, liked the navigation,
like the footer, like the pricing
tables and so on. So where you can
find these UI kits, I'm going to show you
in the next lesson where we're going to actually discussed selling your own personal UI
kits on these websites. But basically what I wanted
to share in this lesson is this premium UI kits are made with just dumb brand in mind. What I mean by that is there is no certain connection between that UI kit and a certain brand. You can just imagine
that if iOS released their UI kit is going to be specific to those
branding guidelines, to those grid guidelines, to those topography guidelines, and all of these different
elements which comprise of that particular UI kit and of that particular operating
system in that case. So it's the same.
If Facebook, e.g. launch their own UI kit, it's going to be recognized
by that blue color, by debt font and all
of those elements. While with these premium
and free UI kits, which you can find online, there is no certain brand
in mind. Why is that? Because it's meant to be
used by other designers. It's going to be quite simple for you to change the colors, to change the fonts and all of these elements which
we spoke about before. So that's the whole point of
the premium or free UI kit. Now what's the
difference between free and premium UI kit? Obviously, number
one is in price. Free UI kits can be
downloaded for free, obviously, and the
premium can be purchased. And the key difference, in my opinion is
number of elements. Usually these free UI kits just come with ten or 20
different elements. While premium UI kits, like the quantum UI kit, especially that I
showed you before, comes with e.g. 1,000
different elements. Also, there is difference
in file types, e.g. with free UI kits, it usually comes with
just one file type, e.g. Adobe XD or Adobe Photoshop or Sketch
or Figma or whatever. While with premium ones, designers are
usually striving to include all of these
different file types. So no matter what you are using, you're going to be covered. Also, there is a difference in differentiation of elements. So in free UI kits, you're just going
to simply get e.g. 23 categories. While with premium UI kits, you're going to usually get
102050 different categories. And finally, I want
to mention support. If something breaks,
if something doesn't work with three UI kits, basically, who
cares, It's free and you're not going to get any
support from the designer. While with premium markets, especially if you're buying them directly on their website, you're going to be basically
entitled to the support. And you're going to be
first in line to get help from these designers
who created these UI kits. So in the next video,
I'm going to talk about selling your own UI kits. And we're going to basically browse through these
different websites. And I'm going to show
you where you can get the premium UI
kits for yourself. And you can also sell your own UI kits on those
particular websites.
115. Creating and selling your UI Kit: When it comes to buying
premium UI kits online, or when it comes to selling
your own UI kits online. There are just a handful of websites where you can
successfully do it. There are many different
websites out there. And my advice as somebody
who is in this for six years is don't try to sell everywhere because you are just going to leave
yourself ten, you're going to spend
too much time wasted on these websites which are not going to generate your sales. Followed this advice. Follow this video
from somebody who has done it for, as I said, six years now and I have 100,000 sales on all of
my different products. So I should know, I think up to about
where you should sell and where is it
profitable or not. So in this video, I'm going to show you, as I
said in the previous video, these websites where you can buy premium UI kits and where you
can sell your own UI Kits. Now first of all,
why you should sell your own UI kits in
the first place. Actually, it's just a good
sense to do so and it's just a good source of
additional income for yourself. If e.g. you have created a nice-looking UI kit for one
of your previous projects. You can simply
expand on it using the tips and techniques
we spoke about earlier. Simply prepare it and sell it on one of these
different websites. You can put it up for sale for the price which is represented on all of
these different websites. You can simply adjust
for the market price. You can explore what
other ones are doing. Simply adjust for yourself. So if you have e.g. 100 elements in your
UI kits and you are offering just one file
type, which is Adobe XD. Makes sure not to charge too much because you're competing against somebody else
who is creating it in Adobe XD sketch
Figma Photoshop. So perhaps that your
kid is going to sell much better than your UI kit because they are offering all
these different file types. Let's jump inside and I'm
going to show you all of these different websites and where you can sell
your products. And first of all, self-hosting. So basically self-hosting
is where you are hosting the products and
you are in charge of bringing your customers in. So you are in charge
of promotion, you are in charge of sale, you are in charge of
delivery of everything else. And they are also marketplaces where you can sell on all of these different marketplaces and they are doing all
the work for you. So let's start with
self hosted in basically the website I'm
using for years is gum road. You can adjust, you can upload all of these
different products. You can create custom links, custom discounts, custom colors. You can create these different
call-to-action buttons, like it says right here, started selling or buy now, or purchase now,
whatever you want. And you can basically tie this up with beacons
presentation, with dribble presentation, you can simply take your viewers here and they can purchase
from your camera shop. Or you can do what I did with my team is create a website. And on this website, you can create e.g. UI kits. And let's say that you
can see UIKit right here, UX kids right here. So we have a bunch of them. And let's say that users want
to purchase this one, e.g. they can simply click. It's going to take them to the specific page
for that product, which is going to
have the description right here, what's included? It works in which software
and when you click Buy Now, it's going to take them
to the gum road page. They can simply click, I want us and they can
purchase this product. And as you can see, it's quite simpler to go from
website to hear. What you can also do
is integrated sale. What that means is when
they click Buy Now, one window is going to open right here and they can
purchase straight from there. But just make sure to understand if you
are using gum road, especially if you're using something like Google
Analytics, e.g. those two are going to crash. So basically just make sure, and that's why I say it redirects you to a
secure buying page. So when they go right
here, as you can see, gum road is really secure
as it is my website, but I just want to have
that additional layer of safety because people are leaving their credit
card numbers, their PayPal e-mail addresses. So I don't want anything
to happen to that. So basically it
That's my opinion. You also have a website
called sulfide, which is basically quite similar to come road, but in my opinion, gum road is there
from the beginning of this online game and
you can, as I said, adjusted to fit
whatever you are doing, whatever your product
looks like, in this case, UIKit, but you can sell all
kinds of different things. Now let's move on
to marketplaces. And I'm going to
show you which are some of the main
marketplaces out there. And as I said, you can explore all of these
other marketplaces, especially when
you start selling, when you start getting traction. All of these different
marketplace people are going to approach to
you and say that they have this revolutionary
new website which is going to bring
you so much money. You are not going to
know what to do with it, but just don't listen to them. Make sure to start selling on these major websites and then expand to these
smaller websites. But just with one
product at a time. If you have 500
products like I do, it's literally
impossible to upload all of those products to all of
those different websites. And why should you
even want to do this? If they don't have e.g. 1 million different sellers or if they don't bring
you enough sales. So to get started,
what we have is Envato market and this
website is Graphic River. Inside of that, you have Web Elements and you
have user interfaces. You can jump inside of there. You can see how some of these different
products look like. As I said previously, you don't have to sell UI kits. You can sell whatever you want. But this class is
all about UI kits. Next, we have designed
model and these guys are fearlessly selective about what is able to go on their website. And you can see that all of these elements are
really high-quality, really top notch, especially
for these UI kits and e.g. if I click right here just to show you these
different presentations because you are working with them to create these
presentations. You can see they are
really full screen, really look polished. They really look professional. They really look high-end, and that's the key
thing about them. And I think that
you can also add different animations when
you're creating with them. Next up we have Creative Market and basically graphic
river and Creative Market, or there since the
beginning of time. And you can browse through all of these
different templates. So let's go with
web templates, e.g. you can see how many
of these there are. But if I go with
templates and I go with, let me remind myself
where all of these are. So graphics web elements. And if I click there, we can filter through. So let's go with Adobe XD. And you can see all of these different
elements for Adobe XD. And we can even filter
this further by going to template social media websites. And we have
wireframing kits, e.g. I. Can select that. And you can see wireframe kids, how they look like, how much are there?
Here are mine. And you can browse through
them if you're interested. And that's basically it. You simply go right here and see what these other
designers are doing C, which of their categories
they are using, C in which software they are creating these
wireframe kids, UI kits and so on. And basically start from there and explore what works for you. Finally, what we have as
well is you are eight, which is well-known
in the industry. They're also high
standard, high-quality. And they're really when it
comes to selecting who is able to sell on their website
so you can check them out. I really recommend them. Finally, we have Envato elements and we have designed bundles. Envato elements is just
the part of Envato market. So you have to apply separately to sell
on Envato elements. But once you do, you
are basically paid by the amount that somebody
downloads your products. So if I search UI kit e.g. you can see all of these
different elements. And basically the difference between this
marketplace and all of these other marketplaces
is except for, UH, because they have
all access pass, but they have limitations on how how many items you
can download per week, per month, per day, and so on. While Envato elements does
not have any limitation, you can download
whatever you want, wherever you want,
and you are paying a yearly subscription
rather than three months, six months, one month, whatever. All of these other ones are
basically just pay as you go. So if you choose to
purchase this product, e.g. you just purchase it. Or if you choose to
purchase my products, you can simply purchase it. And same story with all
of these other ones, and same story with gum road, but with cameras, you can choose to create
separate bundles. So if we go back to here, if I scroll down e.g. I. Can create a UI kit bundle
from all of my products. And I can choose to create massive wireframe bundle
like I have done. And you can do that quite
easily inside of cameras, while you cannot do that in all of these different websites. Now going back to Envato
elements, as I said, you're not earning money for a separate products that
somebody else purchased, but you're earning money. But how many of your
products somebody downloaded and also how many downloads that
do you have in that category for your
contributor bonus? So e.g. how many of
these different products that you have in majority
of these other things. And once again, if
you're interested, you can simply browse
their website. And once again, here is my
product Austria UI kit. And finally, I want to share
design bundles with you, which is one of the newer
websites in the industry, but it is worth pursuing because here you can also sell all of these UI kits, like we mentioned,
but they also have different bundles which they're running
from time-to-time. And basically
bundle is something of a package and you can
purchase a bundle, e.g. ten different designers
have ten different UI kits. They use all of those UI kits, put them inside of one
package called the bundle slash the price down really hard and then simply
marketed like crazy. And basically that
bundle is going to bring few thousand sales
and then they simply divide that money from that particular bundle
throughout these designers, usually what happens is there
are two different models. Either 50, 50, 50 goes to the design
bundles in this case, and 50 goes to all
other designers. And there is also a
model 50 and the rest, 50% goes to design bundles, and the rest goes to whoever has the biggest UI kit
gets the most money. Who has the smallest joy kids get the smallest
amount of money. So basically depending of the website, depending
of the deal, depending of the bundle, you're going to get a certain
percentage of the money. I'm going to create a separate
course in the future. Explaining all of these, explaining how to prepare
presentations tags, how to prepare descriptions, how to choose your targeting, how to best describe
your product, how to create these short lists, how you can create these cover images and
all of these elements. Especially I'm going
to talk about support. Why support is important, how you can get around
providing support by providing a good description and by providing a good product
in the first place, what makes a great
product and so much more. If you're interested in
that class for the future, just follow me on social media or you can
leave me a message. You can follow me here
wherever you're watching this class and basically just
stay tuned for the future. And you can also follow
my YouTube channel. I'm going to leave the link
to it as well in the PDF, I'm putting all kinds of
Adobe XD content out there. So if you're interested,
make sure to follow me there and I'm going to announce
that class in the future.
116. SECTION 14 ASSIGNMENT: Your assignment for
this section is to use Adobe XD and to create
your own UI kit. It doesn't have to
be anything massive. You can just create two or three elements such as
navigation may be a slider or two or three
different sections like a contact form, e.g. just some elements that
you might reuse throughout your website design process
or your app design process. Just try to practice that way because it's going
to be much simpler the later down the line when you actually move
on to real projects. Or if you already have some
real projects working on, it's going to be much
simpler to reuse on these components later
in that project.
117. SECTION 15 Design Systems: Design systems are one of the most powerful tools
that designers have today. They are incredibly important, incredibly powerful
when you actually get started with
them because you don't actually
waste any more time with the elements
you already created. You start to reusing
some of these elements, colors, typography,
styles, and so much more. They're especially
important when you connect them with the live code. When you actually
create a design system in a design tool, it's great to have it, but when you actually pair
it with a live elements in something like Webflow that we're going to
use in this class. It's going to be incredibly
easy to work with, incredibly fast to work with. And it's going to save
you a lot of time. And your clients
are a lot of money because you're not
going to experiment too much once you actually have the core basic functions
of a design system. So let's get started.
118. What is a Design System: Design system, as
the name suggests, is a systematic approach to
creating UI and UX designs. The main purpose of every
design system out there is to keep track as to what everybody
in the team has created. The main purpose of design
system is scalability. Whether that's the
immediate scalability or the scalability which is
going to come in the future. But the design
system's main job is to keep that scale consistent. What that means is every change that you make is going to
reflect through the rest of your design is going to be coherent and it's going
to stay in the look and feel of what's determining at the very beginning
of a design system. Every good design system
consists of two tanks, rules and standards
and pattern libraries. Rules and standards are there to every teammates to
follow them to the t, because that's the only way that the design system is
going to scale evenly. It's going to grow
and it's going to be consistent throughout
its lifetime. Because the lifetime of the design system is the
lifetime of the company. It is never done, it is never finished. So as long as the company
or the product exists, the design system can co-exist with that
product or company, while the pattern library, on the other hand is there, and it's going to scale
all the time depending, often needs, curate
needs and future needs of every particular project
and every particular company. The main misconception
out there is that design systems are just for the big companies
which they are not. You can use a design system
for smaller companies, you can use the
design system with fewer number of components, with fewer number
guidelines and standards. And those guidelines can be a
bit rough at the beginning. But as the project goes, as the company grows, the rules and standards
are going to tighten and the design system
is going to finally take its shape and its form, intended form from
the beginning. And it's just going to
grow with the company. Design systems can be for designers and for
developers as well. And that can be achieved with using something which
is called token. We're going to talk about them
a bit later in this class. But basically, collaboration between designers is developers, is the key for every good
design system out there. So as soon as the change
is made or propagated, designers and developers
have to be on the same page in order
for their design system to work and in order for the change to be
implemented straight away. And it's easiest as possible. That's extremely
important for startups, but for established
companies out there as well, because you don't want
to break the design and functionality of
the product by simply changing the design
system too much with something which is not aligned with everybody
in the team. There are a few things
that every good design system out there should
have N. In the next video, we're going to talk
about just that. What is the good structure for every good design
system out there?
119. Structure of a design system: As I mentioned in
the previous lesson, structure of a
good design system really consists of two things, rules and standards
and pattern libraries. Rules and standards can be
there in many different forms. E.g. every rule has to be a coincided with
something that you are doing inside of
that design system. Let's say that the rule
can be about grid at all, can be about typography. Rule can be about color, about spacing, about
horizontal or vertical rhythm. It can be about anything. And roles can of
course be broken, but they can be broken
at the very beginning of a design system because later on when the
project is developed, when the project has grown, It's much difficult to
break a rule than it is when you're just getting
started with a design system. Standards can be something
like company values. They can be something
like a tongue, like a mood of the
project and off the client's website
or the client's brand. And that should be followed
to the t inside of a design system because you don't want to deviate too much, especially in the design system which are really Corporate. You don't want them to
change too much because corporate crowd is really
used to that kind of a tone, that kind of a design,
those colored types, those topographies,
hierarchies and so much more. Second part of a good design
system is pattern libraries. And you can change
these pattern libraries as you grow along. The main tip right
here is as soon as you start building design
system pattern libraries, you don't need to
create elements which are not necessary at the moment. E.g. if your project does
not have a dashboard, you will not create
elements such as graphs and charts because they're just
not relevant at the moment. You're not going to fill your
design system with all of these useless
components because just remember you as the
designer, are there. Your design team is there
to create those designs, but those designs should be accessible and easy
to understand for developers who have
to develop all of these elements for that
particular project. So just create
elements which are needed at that
moment and let the design system scale over time
as the project requires it. Now how can you divide all of these components in
the component library? Basically, there are
three main categories. There are atoms,
molecules, and organisms. And you can of course,
add templates. You can, of course expands to how many other variations
you want, e.g. flowcharts or wireframes,
high fidelity wireframes. But basically atoms, molecules, and organisms are there to every good design system and they're scaling
which the project. And you can always add
more of these elements, as I said later on down
in the project, align. Now as the name implies, atoms are the smallest
one of the bunch, and they can be something
which is quite easy, e.g. color or text size, or a button width or
something like that. Then molecules are
created from atoms. When two atoms combined, basically you are going to
create a molecule, e.g. a. Drop-down menu or
something like that. And then organisms
are, let's say, a forum which is created from various different
elements, e.g. input fields and buttons. And then you're going
to get a form which is organism created for various, from various different atoms and molecules combined into
a single organism. This is called the atomic
structure and it's really our industry
standards for decades now. But you can create your design
system however you want. But if you're using
this atomic approach, is going to be much more
simpler for you to create your elements and to scale
them down in the future. The main point of
every design system out there is consistency. So you have to think about
consistency all of the time. Wherever you are just
creating a simple button, you have to think about how
that button is going to scale through various different screen sizes is going to change, the width is going to
change the height. Is it going to
change the color is going to be with
rounded corners, without rounded corners to
have to think about all of these elements as you are
building your design system, you have to think about
rules and standards, which we mentioned at the
beginning of this lesson. And you also have to think about other elements in
your pattern library. How they're going to
coincide with each other, or they're going to
look good on the page. So whatever you create a new element inside of
the pattern library, you have to put it on a page, you have to put it on
a test straight away, see if it works with the rest
of your pattern library. And then if it does, you
can keep it and if not, you can always scrap it. That's the whole point
of our design system. It's always going to evolve, it's always going to change
and it's never going to look the same like it was yesterday. In the next lesson, I'm going to show some great design systems example from the industry
leaders and industry standards. I'm going to show you
what to look out for. And then later on in this class, I'm going to show how to create your own design
system in Adobe XD and what you can achieve with creating design
systems in Adobe XD. So I'll see you there.
120. Design system examples: The best way to create your
own design system is to learn from industry standards
and industry giants. And to do that, I'm
going to just show you a few examples and you can find these examples in
the attached PDF. You can just click on
those links to access all of these examples which
I'm going to show you. It simply learn from them
what they are creating. But the key thing
before we get started, don't feel obligated to take every single component that
these companies are creating. Because as I mentioned previously in the
previous lessons, these components are
there for a reason. So unless you are
using any one of these components,
don't create them. When you start creating
a design system, It's really important
to start small. Then as your project evolves, then you're going to add all of these
different components. Because what's the point
of creating components? If they're not necessary
at the moment, they're just going to
slow you down and you're not going to optimize
your time on that particular project if
you are creating components which are not necessary
for your project. So let me show you all
of these examples. First example that we have
is Google's material design. Of course, this
material design is used in their Android
operating system. Apple has their own, It's called human
interface guidelines, and you can find it as well. I will link all of these design systems
which are mentioning with few more design systems
which are not going to mention in this video
inside of the PDF. Once again, open up the PDF, click on these links to access
and browse for yourself. So what we have right
here is introducing material you at the moment
of making of this video. This is brand new and the industry standard
in the Android world. So basically, continue
using material design. You can see guidelines,
components, icons, components for the web, accessibility guidelines
and developer tutorials. You can learn more
from their blog. And let's quickly go
over these elements. And I'm not going to go
into too much details because majority of
these design systems are basically the same. They're using the
same standards, they're using the
same guidelines, but they just look
different because e.g. with this material
design system, it's for Android, so
it's for mobile devices. While other design systems are, there are four e.g. websites or web projects, or for dashboards or
elements like those. So of course, all of these
elements are going to be different between mobile
and desktop design systems. But the key is the same, standards are the same. So let's say you have
these guidelines, principles, styles,
and best practices. What that means is for
every single element, when is the best time
to use that element? In which case scenario e.g. you're not going to use certain, let's say date pickers. In certain examples,
you're going to use different kind of date
pickers in those examples. So that's why those principles and best practices are there. If you ever looked at
a branding project or at the branding
presentation from a brand, you can watch those
on weekends, e.g. you can search YouTube
videos for those. Basically, best
practices are there. And that's the key reason, e.g. why you use logo in this orientation rather
than disorientation. Why you use white images
here and not here. That's why these best
practices are there. To achieve these best practices and these principles and styles, you have to start small. You have to start
from the beginning. You have to create these
various buttons and experiment. See what works, what
doesn't, what does work? Make sure to upgrade from there, make sure to add new elements, make sure to add new styles, new components from
those elements and see what works
and what sticks, what doesn't, throw it
away and simply move on. That nicely brings
me to components. So design guidance and developer documentation for interactive UI building blocks. And you can see them right here. These are buttons,
images, forums, input fields, icons,
and so much more. These components are there
to make it easy for you. And I'm going to show you
that in a later lesson in this class once we
actually get to Adobe XD. So components are there
to speed things up a lot because components can
be used throughout your design system,
throughout your project. And they can be used by various different designers in your team because of course, editing feature of Adobe XD, various different
team members can be on various different
sides of the planets. And they can all be using the
same design system and use the same components from that
particular design system. Of course, you can always
change components. You can always update them. You can add different
components, styles and so much more. That's the key right here to create components
which are going to be reusable throughout
your design system. We're going to explain
that a little bit later, but for now, let's move on. Icons are key resource for every good design
system out there. Of course, because
this is Google, they have their own
material icons. When you're getting started
with your design system, you're probably going to use some other icons in
your design system. But as that design
system evolves, as you find a voice for a brand, as you find the direction and
guidelines for the brand, you are going to evolve
those icons as well. So if you're not an
expert in Icon creation, perhaps your client can. Hire somebody who is, and then you can use those
icons in that design system. Then we have components
for the web. So implements and customize material web apps with our
code and documentation. Of course, this is scaling from mobile devices up to the web. Finally, we have
accessibility guidelines which are extremely important. Learn how to help users of
diverse abilities to navigate, understand, and use your UI, because not everybody
has the same vision. Some people have vision
impairment, e.g. some people have
difficulty reading. So you have to
think about all of those people because there
are a lot of your users. We're going to sadly have some of these issues who
have to think about them all of the
time when you are creating your design system. Finally, we have
developer tutorials. So implemented
material with Java, Kotlin, Objective-C,
Swift, and web of water. So depending on
the design system, depending of the developers, you're going to use this
or that technology. So basically, there is no right or wrong
answer right here, you have to speak
with your developers. You have to speak with
your client, once again, depending of what your
client is going to use. In this case, for material, it's majority for mobile
devices, for Android. So of course they're
going to use different technologies
than if you're e.g. using, I don't know, PHP or something like that
for WordPress or whatever. So those technologies are
going to be different. And depending of
which technology is your developers
are going to use, you're going to form your design system for
those development purposes. So basically, you
can jump right here, you can click on the design. You can see. So foundation, overview,
environment layout, navigation, color, typography, sound, iconography,
shape, motion. So as I said, and
I'm going to keep saying this throughout
this class. Don't be intimidated by all of these different elements because once again, this is Google. They have literally
billions of users throughout their devices and
throughout their company. So of course they're going to use all of these
different elements which are not probably ever
heard of, let alone use. So don't be intimidated
too much with that. So then we have components. And these are buttons, card, checkboxes, chips,
data tables and so on. Then we have developed
for Android, for web flutter, iOS. We have resources and you can read all about
these resources. So hype, type scale, a creator shape customization
tools and so on. They have the blog. So
make sure to check it out. Once again, I'll leave the
links to everything which I mentioned in this video
and more in the PDF file. Click on those
links to access it. Then we have Atlassian
design system. So end-to-end design
language to create simple, intuitive and
beautiful experiences. So once again, you're
going to notice that we have components,
we have patterns. So brand, they have mission, they have personality,
and they have promised, which is what I mentioned
in the previous video. You're not going to talk
the same two people who are using this in their underpants
on their mobile device. And two CEOs of big
companies who are e.g. in some expensive office. So tone is just not the same. So you have to speak to your user in the language
they will understand. Then we have foundations. So color, iconography,
typography. Once again, depending
on who is your user, you're going to use
different colors, different icons and
different type, content, language and grammar,
vocabulary, writing style. So once again, we are
talking to the user. Who is your user? You have to talk to your user in that language they
are going to understand. So you can explore this. And here we have brand
foundations content. Let's click on the
content so you can see inclusive language,
grammar, vocabulary. You can click right
here, components. So we have our term, outer group, badge
and straightaway, you're going to notice that this looks quite a lot different than this because there are two completely
different things. So if I click on
the banner, e.g. right here, you can see how
this banner looks like. And straight away we
can see the code, we can see the error, we can see the announcement. How does it look like? How does it scale? How does it shrink or grown? And you can see usage. So how does it work? So anatomy, we have the
icon, we have the message, and we have the actions which
are optional in this case. So feel free to browse through all of these categories to learn more about how they are used
and how they are integrated. Right here. Next up we have Shopify, Polaris design system, salt. Let's go with foundations first. Experienced values, which
is what I mentioned. So their approach,
what to consider it. They are empowering, crafted, deficient, trustworthy,
and familiar. So those are all the values they are aiming for with their brand, therefore their design system. Then we have the content. So voice and tone, Shopify is voice reflection
of who they are. So who are they simply put there the company
built by real people who understand this
business and care about helping others succeed. So those are del, values. We have the design. So once again, design colors, principles,
communication is key. Colors have meaning. Carlos, follow
accessibility guidelines so you can see color roles. So surface, basically
elements which are behind other
elements on surface. So those are the elements such
as text e.g. primary, e.g. for the elements, let's say button secondary
for the elements, which are, let's
say checkmarks or icons or something like
that, interactive. Maybe there is an
animation happening. So all of these colors
are there for a reason. Once again, I'm coming back to every single time that
the point which I made previously don't
create elements which are not necessarily
in your design system. So you can see color
variants and you can see these colors
implemented right here. Once again, I encourage
you to check out all of these elements and
to learn more about them. So you can see illustrations. They're using these
illustrations. But why, why they are using this particular illustration
in this particular style, using this particular colors. So you can learn more about all of that right here on this page. Next up we have
carbon design system, which is created by IBM, which is a huge corporation. And I love this design system because you can click right here and you can click on the design kits and you can
get the sketch version, but you can also get
the Adobe XD version, which is somewhere around here. And you can open up
in XD, here it is. But it's built by the
carbon community. So it's not exactly spot on
because it's not created for Adobe XD rather than
for sketch at first. Then they moved on to Figma, but they also support
Adobe XD and Azure. So you can get the
kids right there, open it and you can
also do the same for Shopify as design
system polaris. And I'm pretty sure that you
can get Atlassian as well. So you can open
it up and you can learn more about
how it looks like. But back to carbon, basically, open-source design system for products and digital
experiences. Design language is
its foundation system consisted of working code, design tools and resources, human interface
guidelines, and a vibrant community
of contributors. There we go. A lot of different designers are contributing to
this design system. That's why you can download those files and
explore them for free. So start designing. You can see all of these
different elements, what they are using, but I'm more concerned
about guidelines. This. So they're
starting with the grid. Grid is at the heart of every good design
system out there. So if I just play this video, like so, you can see two x grid and how
does it look like? Basically it consists of a box and then box can
expand to other boxes, which can be bigger or smaller. But basically, it's in
the increments of two. Everything snaps
nicely to those boxes. Basically, you can see
the spacing right here. Two boxes separate the text, the images, the layout
and stuff like that. So make sure to explore all
of it and you can see how the vertical rhythm
works right here, and how the scale works right here in this particular video. So I really encourage
you to explore it more. You can see icons, pictograms, motion, which is
really important. So how did they use animation? So if I click right here
to play this video, you can see how they
are using motion inside of their design system, how the animation work, how the transition works, how the things work, e.g. ease into the
animation is out of the animation and so much more. So explore it, download it, and make sure to check
it out for yourself. Finally, we have Salesforce. So you can get started. You can see which platforms are carrots or lightning
visual for us, heroku, Android and
iOS design guidelines. So overview, builder, chart, data entry, displaying data and so much more accessibility, which is what we spoke about, component blueprints
or overview, let's say accordion, I want to check out the accordingly,
how does it look like? So this is a great thing. I can click here and understand what was the intention
behind this accordion. So in this particular case, you can see that this
accordion is closed, but when I click,
this entire section is going to expand down. So how much is going
to expand down? E.g. if you are using
that to pixel grid, which you mentioned in
IBM's carbon design system. Then it's going to expand
by the increments of two. And you can use those
rules and standards and guidelines throughout
your design system, whatever you are creating. So once again, you can
click on the alert, e.g. you can click on the
avatar of badges. Let's click on the cart and see how their
cards look like. So this is the car, this is the new, smaller cars, shorter cars, why their cards. So you can see how all of these
elements are implemented, how they are laid
down on the page. And if I click right here, so we have action 12.3, we have the tooltip, all of these different elements. Finally, we have this
which is utilities, so margin text, sizing,
function, vertical list. And lastly, we have
design tokens. So design tokens
are amazing thing about design systems and
we're going to talk about them in one of the
later lessons because they are truly at the heart
of every good design system. And they are really
the bridge between designers and developers
to get to know the design system
and to use it to its most extent and to continue
using it in the future. And that's why we are using design tokens in
our design systems. And I'm going to
show you that in Adobe XD as well in
the later lesson. But for now, check
out these links. As I mentioned, they're
going to be in a PDF. Make sure to explore as much as possible and to
learn as much as possible. Because you can see
design system is not something that you're going
to learn in a day or two. It really takes months and years for a good design
system to develop. But don't let that
deteriorate you from creating your own design system because the benefits are huge
as you're designing, as you're building
and developing, you're going to expand
your own design system. In the next lesson, we're
going to talk about Adobe XD. What can you create in
Adobe XD in terms of design systems and how can you scale your design
system in Adobe XD? So I'll see you there.
121. Creating a design system in Adobe Xd: Adobe XD is an
awesome tool because in one single tool
you can design prototype and share with your clients, developers,
and stakeholders. This is great for
creating design systems, and this is what we're
going to talk about in this lesson of the class, how to create your own
design systems in Adobe XD. And later on we're
going to speak about scaling those design
systems in Adobe XD. So let's get started. Here I am in Adobe
XD and I open up to 12 80 by 800 art board. This is just the basic art
board that you find at the start screen right
here on a D Adobe XD. So how to create
your design system? Well, you have to start small, so let's get started
with the grid. So if I hide myself
so you can see it, instead of firing this layout, I'm going to switch it to square n. This is what we talked about previously for
IBM's design system. They are using this
iteration of two. So it's going to be really
small squares right here, but I'm going to use
it number of eight, e.g. something like that. And then I'm going to fire up my calculator and I'm going
to bring it right here. So we have the 12th
AT, for the width. So 1280/8, it's one-sixth. So what that means is when a
zoom all the way right here, you can see that
these squares are eight pixels by eight pixels because that's the square size. If I lower them down to two, you can see they
went down in size, but I'm going to
increase them back to eight because eight
pixel is kind of an industry standard or eight point grid
if you want to. And that's what we're
going to use for our imaginary design system
right here in Adobe XD. So to get started,
what we can create is something small,
like a button, e.g. so let's get started with
the topography first. So I can say something
like click here maybe. And let's use something
like Open Sans maybe, because that's a
free Google font and you can find it online. And I'm going to position
it roughly around here. Let's go with 24, because 24 is divisible by
eight, of course. And then I'm going to
create my buttons. So I'm going to create
some spacing around it. And I'm going to
right-click send it to back just so that
we can see our texts. And now I can start playing around and positioning
to my grid. So if I hold my Alt key, you can see I'm 16
from this side, 16 from this side by
7.8 on this side, eight is good, but
seven is not so much. So what can you do right here is not a lot really
because Adobe XD, this text tools are not really all that developed
like Adobe Illustrator, e.g. or Adobe Photoshop. But it's going to work
quite fine in this case because we're just creating our startup project right here. So first thing to consider, is it your type too big? If it is, then you can increase the spacing to 16
on each side, e.g. but you can still see
15.15 right here. If we start like this, It's going to still
be 15 because the way that Adobe
XD treats the text. So once again,
what can you do if you are working with brand, which requires that language, what we spoke about previously, then you are going to adjust this corner radius to
something like eight, e.g. and now we have the
rounded corners. So 64 is the size of our button, divisible by eight, of course, 144 divisible by eight. So we can now proceed. Next up is the
naming convention. So this button is quite big. So e.g. you are going
to name it btn. Btn dash BG, button,
background, dash large. And you have to do
this throughout your design system for all of your elements because
that way you are going to know and designers from
your team are going to know, developers are going to know, is this for our website, tablet, mobile watch, or
whichever size it is. So next up is to group them. So the thing to consider is where this text
is coming from. In this case, it
goes from the left. So if I hover right here, you can see it's left
aligned and it's out of it. So it's going to
automatically scale the button unexpanded
to the right-hand side. Or you can make it
fixed if you want to, you can click fixed
sites and it's not going to expand the button. So depending of the
buttons purpose, so let's say BTN,
large and variables. So we can use VAR e.g. something like that, or
just call it btn large. And then if we want
it to be fixed, then we can call it
btn large fixed. So once again, keep track
of that BTN background. Large, btn large. If you're using fixed, e.g. it's going to be for
the button background, btn, BG, large fixed, or BT and BG. A fixed larger however
you want to call it. So naming convention is really crucial because as soon
as you start adding more and more of these
elements is going to be much more complicated for you to keep track as to what
you have created next up, because we want this
button to expand, I'm going to turn on padding. So next time when somebody
says something like by now, you can see that the
button is going to expand. But once again, because of that gradual element that we created, if I
click right here, you can see 16161516, it's going to expand, but you can always override it. So if I click right
here and if I extend this even more right here, so if I click right here
and extend it to 20, maybe it's going to snap
to migrate much better. So you can always
make these changes to make sure that we are 136.64. So all of it is
divisible by eight. In our case, if
you're thinking about grids and how to create
grids, you can of course, use this eight pixel grid
for your grid solid, say 12 columns for
this large size, eight columns for
the tablet size, four columns for
the mobile size. And depending of the
sizes that you choose, you're going to choose
the number of columns and how wide are big
these columns are. Of course, we are
just getting started. You can see how this looks like. And before we move on, I
will click right here, jumping right here to my
libraries and add color, because this is the color
of my text in this case. And I'm going to add
character style. So what can you name this? And this is really important
because now we're coming in to the design tokens territory. And I'm going to explain
design tokens up in the next lesson of
this class a bit more. But basically I'm going
to call this h four e.g. because that's the
size of this text. And here for the color, I'm going to rename
it to something like, I don't know, regular
gray or whatever, regular dash and gray,
something like that. So everybody from my
team knows that, okay, this is H for its open since 24, and when they hover,
you can see opposites, 24 character spacing,
the size 24 points. So you are going to be able
to tell straight away. Next up is the button with the border or
without a border. How you're going to treat this, how all of these elements
are going to stack up. Does it have, does it
have the dash or not? So you have to think about
all of these things, but make sure to create
multiple copies of this button. See what works, see what doesn't end when you start adding
elements to this button, make sure to start
with the components. So Control or Command K on your keyboard to
create a component. This is the default state. So the first component to create is perhaps
the hover state. So I'm going to call it hover. And the next time somebody
hovers on this button, maybe it's going to
change the color. So instead of white, maybe you can change it to
something light like this. Click right here, hit Control, Enter to preview what
we are creating. And now when I hover
on this button, you can see that it
has hover state. So that's how easy it is to create your beginning
of a design system. And now I'm going
to show you what I have created over
the past two years. And it took me six months
to create in Adobe XD. It's called Inception
design system. And here it is. This is the inception
design system master file. This took me six months of
continuous work to create. And you can get this design
system if you want to. I'm going to leave
the link in a PDF. This is the page for
inception design system.co. And once again, I will
leave the link in the PDF. You can click right
here and go to my YouTube channel to
watch the free course. In it. I go through every
single element. I think it's something
like an hour long or something like that. It's on my YouTube channel
and you can watch it there to learn more how it works
and what's included. You can see, you
can design faster. You can read some reviews. It's crafted for scale
using eight pixel grid. It has molecular structure
like we mentioned. It's local and clouds
who can work both locally and in the Cloud
with your teammates. And it has flowcharts, templates and Lottie icons, which are animated icons. It's made using the latest
features like stacks, components, States,
and document acids. So let me go back to
Adobe XD and to show you. So first things first, what's included in
this design system? Here we have some
basic information and guidelines about the
design system itself, how to use it and
where to use it. Then here we have the grids. We have three different,
basically screen sizes. We have large, medium and small, or desktop, tablet and mobile, independent of the size, we have various different
color column number. So for the large,
we have 12 columns. For the medium we
have eight columns and for the small we
have four columns. Here we have the guides
and you can easily copy these guides and paste
into your art boards. Then we have topography
and you can see that I divided the topography
two headings and body. Headings are coming in these different sizes and body
in these different sizes. Then we have the colors, main colors, and
supporting colors. You're going to notice that I don't have any shadows here and that's with a purpose because when you get
this design system, you can add your own shadows. And they're going to scale
with the design system itself. Then we have the logo which you can replace with
your clients logo. We have these different
logos which you can use in your projects. We have icons and straightaway, you're going to notice
this eight pixel grids, so square size. And if I hide it right here, just so you can see the design system
itself a bit better. Then we have icons right here, and these are static icons. And of course,
design system comes with animated icons as well, which work natively
inside of Adobe XD, which is fantastic
for prototyping. Then if I zoom a little bit, what we have right here
are atoms and molecules, and you can find
them right here. If you open this up, you can see we have grids,
icons, avatars, drop-downs, the images models, pagination, line of application, accordion
search and so much more. So all of these elements right here are atoms and molecules. And if I zoom in just a little
bit closer, you can see. So we have buttons, we have text inputs, selectors, text area,
checkboxes, radio date pickers, selectors, content switchers,
tabs, progress indicators, number inputs, accordions, images which are
extremely important. We have Blobs, drop-downs, we have various
different devices, notifications, pagination, Zapatero is model, and so much more than on
the left-hand side, we have flowcharts, which
are located right here. So if I zoom in, we have desktop flowcharts, we have mobile flowcharts, then we have task flow elements. Obviously for task flows, we have flowchart
elements which are used to connect these
different flowcharts. And then what we
have right here, we have these paper sizes. So here we have
A4 size portrait, landscape, US letter
portrait and landscape. And every single one of these, if I switch to the Layers panel right here and click inside, it has various different
elements which are used to help you create faster using
this design system. So if I select it, you can see what we have
right here is dot grid. So if I switch on this dot grid, you can see how it looks like. So I even have a
vapor right here, which I'm going to
show you right now, which are used for one of my live streams are recently and you can find
it on my YouTube page. So if I bring this closer, this paper was actually created inside of
this design system. And it was actually
printed out and then drawn on using
the regular pen. So you can see how versatile
and useful this is when you create elements like
this in your design system. So going back to it, what we also have our phones. So for showed that you
can use these phones. Obviously print them
out like I showed you with this particular paper. And you're going to notice that they're going to be
positioned right here. And obviously, if the paper
is landscape like this, they're going to be positioned
differently and they're used for paper wireframing
if you want to. Then we have browser
for responsive, we have desktop browser
and mobile browser, and it goes the same
for all of these sizes. Then we have flowchart
information. We have client project
name, deadline, number of website pages, number of app screens, and you can of course combine a dot grid and the flowchart in for
you can switch places, you can position
them, print them out, and create basically components
and flowcharts on them. And finally, what we have, if I switch right here, we have the templates. Here we have templates in
three different sizes, as I just mentioned previously. So we have large, medium, and small, and those
are right here. So these are templates large
in 15 different categories. These are templates small
in those same categories, but just adjusted
for the tablet size. And these are templates, small or medium and these
are small for phone sizes. So how does all of this work? Basically, if I open
this up, we have colors, so we have main colors and
supporting colors, as I said. And these are main components. Sum, if I change the color, this ocean blue
right here, e.g. I. Can simply go edit right
here and change the color. It's going to update
that color in real time everywhere where that color is located in this design system. So going from here and the swatch all the way through here, through here and through here, it's going to
update in real time and change and
update that color. If you decide to get
this design system and you get started working on
a project for your client. You can simply change these
colors to your clients colors it's going to change
throughout this design system. Same story goes for
the character styles. So for headings, e.g. if I decide to change this, it's Proxima Nova
at this moment. But e.g. if you decide to
change it to open science, as I said, then you can
update it in real-time. It's going to change
throughout your design. Next up, we have what I said, atoms and molecules,
flowcharts and templates, and how can you use them? It's really quite simple. So let me actually use this
large drop it to here. And I'm going to show you up. So if I click right here, and let's say that
I want to hide these columns just so that
you can see what I'm doing. And let's say that I
want to drag and drop some elements inside so it's
good to atoms and molecules. And let's switch this
layout on actually. But let's go with the
square right here, just so you can see what
I'm actually doing. So let's go with something like dropdown, drop-down large. Let's drag and drop it inside. You can see how it
looks like so I can position it wherever I want. And then let's bring
our columns back. Click on our dropdown, position it right here and you can see it works straightaway. And because this is a component
with multiple states, let's check out the
focus state, e.g. let's check out opened. And I can of course
jump inside and adapt and change any
one of these states. So instead of saying
drop-down large, perhaps it can say your shoe
size or your shoe color or whatever your project requires that the beauty of
this design system. So these are atoms
and molecules. In short. Basically you can adapt them and use them
however you want. And let me quickly show
you the templates. So here we have the templates
and let's use large. So what we need is navigation. So drag and drop
my nav one, e.g. I'll snap it to the position. Close this. Let's
use hero section. Let's go with here
on number four, e.g. let's position it right
here and right here. Maybe do something like this. Then what we can
do is use call to action may be so let's
use call-to-action five. Snap it, make sure it's in the center position is
right here until it meets with our hero section
and you get the idea. You're just going to drag and
drop these elements inside. You're going to build them. The great thing about all
of the templates and all of the flowcharts is they're
coming in two different modes. Default state, which is the
light mode and dark mode. So if I click on my navigation, switch back to dark mode, click right here,
switch to dark, click right here, switch to
dark in just a few clicks. And if I hide my grid just
so you can see we have this. So if I preview it
really quickly, you can see how it looks
like in real-time. It even has these hover effects. And of course, when
you change and adapt all of these
components, e.g. this logo and you change
it to a client's logo. You can add different icons, you can add different images. It's going to adapt
in real time. And this is the whole
point of a design system, is to save you thousands
and thousands of hours of creating these boring tasks because there is nothing
in the world I hate most. And to create footers, and I have my footer right here. So click right here, drag and drop footer
position at there, e.g. snap, it's too dark
mode like that. Position it here. Hit preview one more time. And here I have my
footer in place. That's the beauty of
these design systems, is to create with speed, to create a width scale. And that's what you can see with this particular
inception design system, which I have created over
the past six months, is I created all
of these elements. So let me delete this. I created all of these elements, but I can easily scale them. I can add more elements here
using existing elements, I can reposition
them, reorganized, them, change their colors, change their corner radius. Because if I zoom in really closely to one of these buttons, you can see that
the corner radius is four if I show
you right here, but maybe I want to change
the corner radius on this main button to
something a bit bigger. Let me zoom so you
can see all of the states a bit bigger
to something like 20. Press Enter. And you can see
in the real time, it's going to change throughout wherever this button is located, wherever this button is used, not just here, but throughout
my templates as well. So it's going to
update in real time. That's the key thing
about design systems. In Adobe XD. You have to change them in the default components and all of these components
that you drag and drop, which I'll show you
our child components. So you can change and adapt there and use these
local changes, e.g. in that hero section which I
just showed you previously, you're going to update the text. You want to add your own text, your clients tax whatever, then it's going to change
in debt component. But if we want to make more global changes like
the background color, like the font, and whatever, you are going to make
those changes right here inside of the
main components, inception design system
comes with two files, master file and light file. Basically the only difference is inside of the master file,
which I'm just showing you, you can see all of the elements
right here in one place, inside of the light file. You cannot do that because I purposely deleted all
of them from the canvas to keep as much of the canvas
free as possible so we can design without any distractions like looking at them right here. So perhaps it's
divisors to start with the master file to learn
all of these components. I of course provided images
of all of these components who can browse at a glance as to how the
component looks like, how the template looks like before you start
working with those. The last thing which
I wanted to show you about this is these flowcharts. So let me open them
up right here. So let's close templates, open up the flow charts. Let's go with
desktop flowcharts. Let's use the header e.g. and drag and drop it right here. Let's use content. Maybe I want to
position it right here. Let's use something else like a slider position in right here. Then what's great about
these components is you can simply duplicate them
positioning right here. And because these are the
components, as I said, you can simply click
drag and it's going to replace that component
in real time. So portfolio, drag
and drop it here. Maybe I want to use
the form number five. My client says, I don't like how the formula
Phi looks like. Maybe you can try
something else, okay, for number
three, there you go. You can see how super simple
this is to create them. When you want to connect all of these elements,
Let's close this. So let's use the
flowchart elements. Let's use e.g. numbers. So let's
go with number one. Maybe this is the first page, e.g. let's close that. Let's use arrows. So I'm going to use this arrow, drag and drop it into place. Perhaps when users click
on this button right here, they're going to
go to this page. So I'm going to simply extend this and select my
line and dairy, but this is how
super simple this is to use and to create n e.g. if you dropped this, Let's say Arab by mistake, I want to replace it. I want to do it with
this one. There you go. This is the error
which I wanted, e.g. from this pair, from
this slider right here, I want them to go to
this portfolio piece. You can see how super
simple this is to create. So that's the beauty of
these design systems. Obviously this is an extreme, as I said, it took me over six months to create all of it. It took me two or more than
two years of research. And if I show you some
of these templates, you can see how they look like. So we have here over here
futures call to action. So I did my research
as to what's the most used inside
of the industry. What are some industry
standards and what's most used? So content grids, pricing, we have the blog, we have login and we
have forums, contact us. And so much more. And all of it is responsive
as I show right here. And all of it is using x,
these latest features. So if I click right here and
jump inside of these images, you can see that we have the
stack, we have the pairing. So if I choose to change
this tag, e.g. I. Can click right here,
and it's going to change the direction of this
stack to this direction. And you're going to
notice is going to push this content down
and it's going to scale evenly to whatever I'm creating on my design system. Once again, if
you're interested, design system is inception
design system.co. There is a YouTube
course for it. Everything is explained
in a lot more detail. You can check out this page
so you can see the futures. As I mentioned, atoms or molecules,
organisms, flowcharts, templates, dark mode, animated
icons, course included. So all of it is inside of
inception design system. If you want to create
your own design system, just make sure to pay
attention to two things. Make sure when you start scaling
to scale with a purpose. Don't just scale for the sake of scaling and make sure to use only elements which are
necessary in your design system. For my design system right here, I used elements from my research which majority of
designers are using. But for your design system, perhaps you're not going
to use these elements. Maybe you're going to use
some else, something else. But basically start with small elements like buttons like I showed you and then
expand from there, add components, but make sure to add just the
components which are really necessary in
your design system. In the next video,
we're going to talk about design tokens, what they are an elaborate, a bit more about them, and how to use them in your design system. So
I'll see you there.
122. Design tokens: Design tokens are
at the heart of every good design
system out there because they are a great tool for collaboration
between designers, developers, and stake holders. In this video, I'm going
to show you how I do it and how some big
companies out there do it, and what are some best practices
regarding design tokens? So let's get started. So here we are back
again in Adobe XD and once again in my inception
design system master file, which I showed you
in previous video. And design tokens are located
right here on the left. Basically what I mentioned previously in the
previous lesson, they have the name. So this name is really useful because when you are collaborating
with other designers, let's say I want to use
this ocean color for, let's say, background color of our model or
something like that. And then I have to tell that to my design collaborator
on my design teammates, Let's say use that blue color inside of that model background. But we have multiple blue
colors, which blue-collar? Use. One B8, F9. Once again, it's going to be
really difficult for people, especially if you're working
with them far apart. If you're working from
home with your teammates, is going to be difficult for them to implement that change. And it's going to be
difficult for everybody in the team to remember
this hex code, e.g. so that's why we
are using names. In this case, I can
just say to them, use the ocean blue for the background of the model and everybody is
on the same page. Ocean is much more easier
to remember than e.g. a. Hashtag one, B8, f e, f nine or whatever. So developers can use the
same function and I'm going to show that in just a second in one big design system out there. But basically that's the
whole point of design. Tokens use them wisely and use them as your
design system scales. Of course, you can
use them for text. In this case, I only have
headline and body, but e.g. you can use the
specific character size for specific elements, e.g. if the character is
just below, let's say, animations or
illustrations even better, then you can use them in conjunction with those
illustrations, e.g. headline illustration, large, headline illustration
is small or whatever. And then when you said
to your developers, make sure to change
the headline, large illustration tool,
let's say 64 points. Everybody on the team
is going to be able to understand that
much better than, if not, what I
mentioned previously about the components and
different component names. So if we zoom in right
here to my buttons, e.g. switch, the layers
panel, click right here. You can see that we have
button default large, because these are large buttons. Then we have button default, medium, button default small. So these are default buttons, but if I switch to
something else, e.g. right here we have selectors. Selectors in line value, large selectors in line value, medium selectors in line value, Let's say a small or whatever. So you have to pay attention
to all of these details. And we have images. So we have imaged large
and how many columns does your image take? So in this case, image large to column image large nine
column image larger than 12, full width, full screen medium, the same story, small,
the same story. Then we have devices, e.g. device, dash,
browser or whatever. So you have to use these design tokens to
explain what you are creating in your
design system and what each design token is designed
to do in the first place. So I will now show you this, which is a Salesforce Lightning Design System design
tokens already show you that in the
previous lesson where we talked about all of these
awesome design systems. How they use it is
basically exactly the same. So we have brand accessible, dark variant of brand that
is accessible with white. So they're using combinations and they are using
these support. So you can see global access available to use
on the platform. Or if not, I can hover
right here, internal, so available for internal
Salesforce developers only subject to change. So they have all of these rules put in place when it's released. So version number 1234
and so on, T-Mobile. So are they using
it with a team? Do you use it with an app? Do you use it for
front-end or back-end? You use it for what
visitors are seeing, or for internal dashboard
or for visitor dashboard, you have to label all
of these elements. And here you can
see another thing. So they're using RGB
first and hex values. Second, majority of brands are using the other way around, so they're using hex value
first, RGB value second. So you have to factor in all of these elements regarding
your own design system. So that's why I created
this simple structure in Inception design system
because majority of people are able to understand
that we have focus. So it's just for defocus, but if I'm creating a
variation on focus, e.g. different shades of focus. Maybe I'm going to
say something like focus 80 per cent or
focus button or focus. I don't know, hero
section or whatever. You are going to tell that inside of the design
token itself. So everybody in the team is going to be able
to understand it. And if I show you
here once again, if we scroll a bit more down, you can see how many
different colors they have. So let's choose one
at random, e.g. this one, pallet cloud blue, 15. So they have 15 different
variations of this palette. Cloud blue color. No, it's not a T-Mobile and here they're
using it internally. This is version 2.14, 0.0. And you can see
polite cloud blue, so how they are using
it and how they work. So basically, as I
keep mentioning, it's all down to your
project, your need, you're not going to have all of these different colors
if your clients, a project does not require them. So why bother in
creating and spending so much time in creating
all of these colors, shades, variations
and so much more when you can get away with
something like this, e.g. just a few colors here
and there and then, and this is the crucial
thing and Keating, when the project expense, you can always add more colors. So e.g. let me show
you that as well. Let's click select that. Let's change it to, I don't know something,
whatever right here. And if we want to
add this color, I can simply click right here. And I can say
something like rename, maybe call it blob purple,
something like that. Is this my main color
on my secondary card? Call it main colors. So put it right around
here, blob purple. And then when I select my
blog next time I can click blood purple is going
to apply the same time. E.g. if we have these blobs in the hero section
of your website, e.g. or if your app, you
can tell your design. Teammates, change
the blob number five to blob, purple color. Click, click, Done. That's why design
tokens are awesome. That's why they are useful, because you can
use them to create all of these elements
in your design system. It's much faster
and everybody on your team can be on the
same page and understand what you're creating much
faster than if you're not using this design
tokens in the first place. In the next lesson,
we're going to talk about scaling your
design system. When should you do it and
how should you do it? I'll see you there.
123. Scaling your design system: When you're scaling
your design system, you should always
do it but a purpose and you should always
do it step-by-step. Why are you scaling it? Where are you scaling it to? For which pages,
for which sizes, for which devices you
have to think about all of these things
as you scale along. So let's jump into Adobe XD and I'll show you and give you some tips about when and how to scale your design systems. So here we are in Adobe
XD once again inside of my inception design
system master file. If you want to check
out this design system, make sure to click the link
in the PDF and there it is, You can check it out
if you're interested. For this case, let's say
that you just created these buttons and you have
chosen these three sizes. So large, medium, and small. And from here maybe
you want to add extra large size.
What should you do? You have to consult with
your developers first, should I create
different buttons for that extra large size or are you able to scale them
and reposition them? Encode e.g. maybe the extra large size for the button itself is not really necessary. Maybe the spacing should be adjusted and it's going
to fit to a bigger size. So that's why
communication between designers and
developers is the key. So you're not investing
your time into these changes which are not really necessary and mandatory. So if they are not
mandatory and necessary, you're going to end up with
a clean look like this. But if they are, then perhaps you're
going to have 20 different buttons sizes. And then later on down the line, you're going to decide that e.g. size number seven is
not really necessary. Which sizes to use. That's quite simple. You have to speak with
your client and you have to speak with the company
you're working for. Which sizes do your users use? If they are using e.g. just one size majority of them. Make sure to focus all of your attention on
that single size. And then when you're bringing more users down the line, e.g. those users are coming, majority of them are
coming to desktop size is, let's say majority
of them are using laptops and then
all of a sudden, vast influx of new
users are using iPhone. So how to adapt this desktop
size to iPhone size? So you have to speak
with your clients, your developers, you have to do your research
all the time. And then when you're scaling, it doesn't really make too
much sense to scale to tablet if your users
don't use tablet sizes. So think about all
of these things, but think about these
things as you go along and as you're creating
your design system, because there is
no point of scale. For the sake of scale, there is a whole point
behind this is to scale with a purpose and that's to
either attract new users, accommodate new users, accommodate new users
needs and wants, and therefore you have to
scale with that in mind. Also, as I keep mentioning
throughout this class, don't create elements
which are not necessary. E.g. if you are not
supporting avatars, because maybe you have
profiles in your project, in your product, in your
dashboard or whatever. Maybe you don't
have the option for them to login and to
create their account, then why would you
create avatars? It doesn't really
make too much sense. Don't create them
just to be here, creating because they are
unnecessary for your project. And don't be too afraid. If you e.g. just created one tool tip and didn't
create 50 different tooltips. Maybe they're not necessarily. And Tooltip, like
the name suggests, it's really that simple because it's just a
bit of information. So don't pay too much attention to all of these small things. Make sure to get the big
things right, like layout, like grids, like spacing grid and horizontally
and vertical. Rid of all of these things before you worry about tooltips. And one final thing I
want to tell you about scaling your design system
is with these templates. So if we zoom in right
here and show you, so what we've got right here is Futures call to actions teams. So maybe we have Content grades, maybe we have portfolio, we have pricing and e.g. you're creating a dashboard. Inside of that dashboard, you're going to have
one single page which is just an overview, e.g. inside of that overview, you are going to give
them the ability to see, I don't know, let's say monthly expenses or something like that. Don't go into too many details. In adapting new components
to work with this, maybe you can use existing
components and then just let the developers
integrate the solution which is not Native. If it is native like e.g. Charts, then you have
to create a design for a single chart and don't bother with creating
multiple charts, doing multiple things just for the sake of having
all of these charts, make sure to focus on what's
necessary for that project. And then as new features
are added later, make sure to scale along with those new features and
your design system. Don't bother creating
those elements which are not needed
or not necessarily, because it's just
going to clutter your design system and it's
actually going to slow down your progress on this particular project and
your developers progress. Because remember, whatever
you are designing, designing inside of
your design system, developers have to developers, so don't use their
valuable time if those elements are not
necessarily at the moment. And you can create a backlog. So e.g. these elements, let's say, are needed
at the moment. These elements are
needed in three months, these elements are
needed in six months. So you can create
backlogs of elements. And as the project progresses, as you move along, then you can tackle those
elements a bit later because they are not
necessary at the moment. So once again, and
finally, scale, as it needs to be scaled, don't just scale for
the sake of scaling.
124. SECTION 15 ASSIGNMENT: Your assignment for
this section is just to use two or three
different elements in Adobe XD and just try to practice creating your
own design system. Because from these
basic elements, you can really branch out, as you saw in this section
of the class and create some massive design systems that you can use throughout
your projects. Don't try to invest
too much time right now into this approach, but makes sure to have
this approach in mind, especially if you're
just getting started and it looks a bit
confusing to you, it looks a bit
difficult to, you. Don't try to burden
yourself too much with it. You can use elements like I mentioned in the
previous section. With the UI kits, you can use one of
those elements, e.g. and just replace them here and there just to speed up
your process a little bit. But that's the whole point of it to speed up your process. Because wherever
you are working on, you always try to be faster. You always try to
be more precise. You always try to deliver
to your clients a bit faster and without any
revisions if possible. So design systems are going
to allow you just dead. So as I said, they are
incredibly important, but if you're just getting
started and it all looks a bit too much,
don't worry about it. You can always go back to it in a later stages of your career.
125. SECTION 16 Website Design in Adobe Xd: Alright, so here we are. After all of this time, we're finally going to get
started with the design. And in this section
of the course, we're actually going to get started working on our design, which is going to be for
exclusive car dealership. They're going to sell used cars. And we're going to
approach it using some of these methodologies that we mentioned in the course so far. And after we create the design, after we create different
interactions on our design, after we choose colors,
we choose typography, we choose the right images, we choose the right
layout with test it out, we practiced with it
and we understand, and we actually get the final
get-go from our client. Then we're going to
move it onto workflow. So let's get started
with this section.
126. Design Brief: Alright, let's jump
straight in and let's get started with
our design brief. And what I have
opened right here is the Adobe XD templates
of the design brief, which I already
showed you in one of the previous lessons about
the design brief itself. And you can get this
template and you can use it. I will share the original one, and I will also share
this one which is filled in with the
project information that we're going to cover. And as you can see, it's
completely the same as the one which I already
showed you before. Without any further ado, let's meet our client
for this project. So this is going to
be imaginary client, and it's actually based on a real client which I
had a few years back. So I took the learnings, steps and approaches from
that particular project. And I put it straight
into this project. I always like to use this
and do this for my courses. I always like to use
real projects which actually did before
and turn them into knowledge and
what I learned on them while I worked
on them and turn them into real courses
and showed you some of my approaches and some
of my methodologies. So it's the same
story with this one, but because it's extremely difficult because we are
dealing with cars to find images of cars that you can actually use a multiple different
angles which are going to get to in just a second where we're
going to talk about a different images which we are going to use
in this course. It's really difficult to do so. So that's why I chose it to be imaginary client
because as I said, real cars with all of
these different angles, It's really difficult to find. So let's jump straight into XD. And let me just show you this design brief and
what's included inside. Of course, you can read this for yourself because as I said,
I'm going to give it to you. But I'm just going
to quickly walk through this and kind of explain how I got to this
information and why I chose this information. As I said, based on the previous experience in
previous methodologists sub, we have expired a spider
exclusive cars website, which is the project
which I mentioned. We have the project
deadline right here, which is three months
to do everything. So to do research, design
and Webflow built, then we have the
company profile. So it's a used car dealer
located in Belgrade, Serbia. They are the luxury
car and niche. So this is really important because used car dealer can be basically anything you can
sell used cars, which are e.g. a, $1,000 or $2,000 or
$100,000 or $500,000 because used cars are used cars no matter where they are in
the spectrum of the price. They're still going
to be used cars, but in this case they're
selling 50000-500 thousand. Why is this important? Because you want to know how
to structure information. Who are you talking to. So obviously these people
as clients are going to be different than if
you're building a website for a
$1,000 cars, e.g. some obviously imagery is
going to be different types of cars you're going to use on as imagery is going
to be different. Perhaps. Iconography is going to
be different because you want to appeal to
that wider audience. They sell mostly sedans,
SUVs and superclass. So you can see sometimes they have a hot
hatchback in stock. These are hedge backs
which are extremely strong in or powerful
in horsepower, e.g. so we have something
like a Mercedes, a 45, ANG or Audi RS three, e.g. or something like that. So they sometimes have
that as part exchange. What part exchange means is if I go to you to buy
a car from you, I already have my own carbs, so I'm going to give it to you. You are going to put a
price on it and charge me down based on that price. So if you price my car, let's say $20,000, e.g. you're going to deduct
those $20,000 from the original price of
the car you are selling. So that's what's
called part exchange. So as I said, sometimes
they're going to get these parties change cars in return for actually
selling their own stock. So as I said, this is based on real
experience I had with the client previously
a few years ago, and that's how they
do their business. And majority of these car
sellers are doing this. Same thing. And once I get this is
important because we want to know what we're going to
put on the website itself. So there are different from competition because
all of their cars or dealer demo cars and majority
of cars are from Germany. What why this is important is
those cars are not used by, let's call them regular people. They are mostly used by
journalists who are going to come to the dealerships
and test these cars. And it's really important
because they are buying these used cars from the
official dealers from Germany. Their mission is to be
transparent, honest, and provide entire car
history warranty depending on the car and a great
after-sale support. Marco is the key person in a company which has
five other employees, which is critical ones can just six people
in this company. So they're really small company. They're using external providers
for car transferred from Germany and have partners
for loans and customs. So they're not doing all of
these things themselves. That's why they can be so lean with just six
people in the team. They're using all
of these external partners to help them along. Their direct competitor is DSD, and I'm going to show you
their website a bit later. And indirect competitors are
appalled me, automobiles, which basically
translates to use cars, but on a much bigger
scale because they sell cars from every
price brackets. Just imagine Amazon,
but for cars, and I'm going to
actually show you that website a bit later. Then we have Project or were
you So currently they have an Instagram page
where they display their stock so they don't
have a website at the moment, which was the same
story with the client I mentioned previously the
did some work for them. But they want to have a
website because they can show quicker and more images, which instagram limits them to their own sizes,
their own layout. They want to show huge images. They want to show detailed
images of the interiors, e.g. stuff like that. And they cannot fit more than ten images on
the Instagram grid row. So that's why they chose to
create a website and have a direct point of contact
via contact form and showcase some of their
features all in one place. You can have all of
that in website, in Instagram, sorry,
you can have images. When you click outside
of the images, e.g. or stories or whatever, then you can read
the description, but then you can only
go and click and contact the person that
you are interested About, discard that you're
looking at button website, you can do all of that
on a single page. That's why they want a
website in the first place. They want it to be
responsive and to be able to quickly add new stock to the site and not contact me as a designer for
every little detail, but would like my support
if they get stuck. That's where we're going to use Webflow CMS later
because we will be able to easily simply add
new cars to their stock. Or if the cars have been sold, we can easily remove those
cars from the stock. And I'm going to show that in Webflow build a little bit later and how super easy that is once you actually go
ahead and set it up, the actual setup process, it takes a bit of
time, is a bit tricky. But once you actually set it up, working with it for your
clients is going to be super simple and
straight forward. They have the images
of their stock, but don't have any
other imagery of icons. That's where we come in as
designers to find images who are going to
suit their needs and this particular project, as well as the icons which
I'm going to show you in just a second when we
move to design in XD, they want to be recognized
as a luxury dealer, but don't like dark
websites and huge images. This is what actually did with my previous client,
which I mentioned. I went ahead and talk with
them, do like these colors, do like these images,
which sort of website do like for
inspiration, e.g. and then pointed out all of these websites without
any dark colors. So I went ahead and asked them, would you
like dark colors? Because dark colors are usually associated with something which is luxurious and expensive. They said We don't
like that because I'm just not fan of
it. Like minimalism. We like things to be simple, organized, easy to use, and not straining on
your eyes because majority of these websites online that you see for luxury, I usually black color
for the background, really dark imagery and then either white text or gold texts. So I didn't really like that. They think it's too, it's too old school. But they like blue
color and simplicity. And their ideal
website is car wow, which are also going to show
in just a second what it is and why they like it so much because I asked them
all of these questions. Main problem they're
trying to solve is to present their stock
and have a point of contact in one place rather than communicating
through Instagram DMs, which you just mentioned,
and why they need a website in the
first place at all. Goals and objectives. So their main goal is to
present the luxury brand is a luxury car dealer
and distinguished themselves from other dealers who are selling
cheap family cars. So just imagine this. When you pick three websites
and you put them together, you want to notice that
these guys are selling expensive things and not
just regular colors. So that's the whole
idea right here. Main objective for this
project is to send people from their Instagram page to this new website and increase
test drives bookings, which is when you actually
call the showroom and book a test drive for a
certain car by ten per cent in the first two
months after the launch. So they want us to
launch the website, to set up the SEO e.g. and then in the next two
months after the launch, they want to be able to increase the bookings for the test drives by ten per cent in the first
two months after the launch. Then we move on to
target audience. It's quite simple
because they have been opened for business
for the last three years. And one type of person keeps coming back with a small
exception from time to time, but generally, just one type of client who keeps
coming back to them. It's a male 45-65 from Serbia, usually lives in Belgrade, is a business owner, has its own business actually because these
cars are quite expensive. So those are the types
of people who can actually afford
these types of cars. Media consumption habits,
Instagram and LinkedIn all day, YouTube for caregivers and
exploration, daily habit. So Jim, healthy lifestyle likes posting content
on Instagram. How do we know all
of these things? Because we ask our clients
and they actually told us, just remember, they are
working on Instagram. All of their clients are
coming from Instagram, so they are able to see
who those people are. Because when you
actually send a message, you can click on the profile. You can explore the profile
and see who this person is. How do you know about the age? When you actually buy a car? You have to give them
your driver's license, you have to give them your
government issue card, e.g. or passport or
something like that to verify your identity
from those information. We can know that they are 45-65. They're usually male because those types of
people are coming. You can also know
their residency and the city of residents from those official issued
government documents because they have to sign papers there. So you're not asking this
types of information just for your own sake or for it
to be more informed, but to create a user persona which are going to get
to in just a second. So from these information, you can know who
these people are. Also, you can search
for these people on Instagram because
your clients told you they found them on
Instagram and they contacted them
through Instagram to get to go and to
test drive all of these vehicles and to
eventually by these vehicles. So that's how we know who they
are and what they're like. Because we scroll through
their Instagram feeds, we found them on LinkedIn. That's how we know that
there are business owners because we see that they
set up their business. We see how long they worked it. That business, who
are the key points of contact in that business are where the businesses located. How long has it been opened? How many people work there? You can see all of that
information right there on LinkedIn and on YouTube because they told our client
that they watched a lot of YouTube videos and reviews because these are
expensive cars. Serbia is quite a small place
and quite small country. And therefore, they
are not a lot of these cars driving around
like in England, e.g. or in LA or whatever. So you have to inform
yourself via other mediums. And that medium in this case
is YouTube for car reviews. And just to explore these cars and to understand
them a little bit more. Daily habits. Once again, not to
repeat myself too much from Instagram because
you can see what they do, where they travel,
what they are doing. So you can kind of figure out where they are on daily basis. And you can also see when
they posted these images. So you can understand
quite easily how often do they pose to the
like being on Instagram? And once again, all
of this is really important because you can easily target your ads a
little bit later once you actually
launched a website directly through Instagram, because once again, all of their audience is on
his gram either way. So we can target Instagram, we can now get LinkedIn because we know who
these people are, what they like, how old are
they are where they live, and so on and so forth. Finally, we get to
these two things. So we have design requirements. So since we are using Webflow, just one-dimension is
required before the build. And I'm going to actually
show you how to create responsive design in Adobe
XD in just a second. But we're not going
to talk about responsive design because it's just a waste of time when you're working alone directly
from XD to Webflow, us, the dimensions as solutions, we're going to have
40.40 pixels artboard. Then file format XD is
our main file format. We are going to have JPEG, PNG, and SVG for image
and icon content. Required color palettes to be created, so they
don't have one. We have to create one. Images is to be included. Their stock is
included, sort of save. So I'm going to explain
that a bit later. Other images are from
Envato elements. In our case, all images are
from my motto elements, but I'm going to get to
it in just a second. As I said, associated copy
documents to be created. So what this means
is e.g. style guide. We're going to create that. And we're going to export all of these other options like
pricing and this design brief, in this case, budget
and schedule. So timeline is divided
into two parts. One for research and design, the other four,
Webflow development. And always keep that in mind. Always leave a bit more time for rockfall development
because sometimes there can be some bugs. So when you have the time to figure out all of these
bugs and to solve them, it's much better to have a bit more time for
your workflow builder. So for this type of project, five K for the
research and design, five K for the Webflow built. And as I said, three months
to complete it in this case. So it doesn't seem like a lot, but I just want to create something which
is beginner friendly. Usually, these types of projects last me about a
month and I charge a bit more than
what you see right here for those
types of projects. So two weeks for the research, a month for the design, month and a half for the build. So you can see what I said. I just leave a bit more
time for the actual belt. Then we have the
Planning, Research, audience design presentation
built and delivery in. You can browse through all of these dates Just to understand a bit more
highly structured them. Finally, I put my name right
here, my email right here. Just to give you an idea, because later on I might want to send this to my clients
so I can select this, hit Control or Command
E to export it. And from here I'm
going to choose the PDF, then hit Export, export this PDF so I can easily share it with them so
they are able to see it, they're able to understand it a little bit more
and they are able to see all of my intentions with this design
and what I wanted to do. So that's it for design brief, feel free to explore
it a bit more. I will include it as I said, the original template
and this one, you can add it whichever one you want. They're
basically the same. This one is just filled in, the other one is just blanked. And now we're going to
move to project proposals. And I'm going to explain
to you how to send these project proposals and how to be more effective with them. So I'll see you there.
127. Project Proposal: Now that we know
who our client is, let's move straight
to project proposals because we want to send
them the actual price. We want them to
verify the price. And we want to set some
terms and conditions. So don't get confused
a bit later. So let's jump straight to z. And here is the project
proposal template. You can get this template. I will leave the
link because it's the premium template which I am actually sell it and
it's not too expensive. I think it's something like five to $6,
something like that. And it also has additional page right here which are purposely
removed for this project, which is the about me page and I believe in go ahead
and give you a discount. So make sure to
click the link in the PDF in order
for you to get it. So what we have right
here is the cover. Then we have Project Details, project Pricing and
Terms and Conditions. And you remember this
from the previous lesson. So you can either get it there or you can get it
from this link. However, it's easier to you if you want to
actually use it. If not, I said what I already said in that
part of the course, you can create these
things yourself. But if the time is money, then you can go ahead
and get this one. So we have the color as
Pilar exclusive cars. This is their address. This is my website right
here and my information. Then we have project details. So project overview, what we agreed to during our email
and call conversation. Sometimes you're going to meet your clients
directly in-person. So you're going to
put that in here, but majority of times you're
going to deal with emails, you're going to deal
with phone calls, e.g. video calls and
something like that. So just make sure
to put it there. Project description. So we already talked about it. We have website to be
designed and developed, pre-sales offer exclusive cars. It is to be designed in XD
and developed and hosted in Webflow for easy
maintenance pages to design. So we have roughly main page, which is our hero page, which will present
the brand values, mission, and part of the stock. Then we have the cars where all the cars
will be presented. We have loans to explain
loans as well as the contact page where people
can actually contact them. And we just talked about
all of these things with our client and we ask them, what are some main
parts of your business? So they told us that
they are selling cars, usually through loans, so
through their partners. So we already have to
create these two pages. Usually we have to create homepage because we
have to structure that information and to show people who are
new to the website. They don't actually know
what this business is doing. So we want to convert them
quite easily and send them straight away to the
car section of the page. Then we have Contact Us
page because we want people to be able to easily
contact this company, but will also include contact font throughout
our website. And I always like
to do this because Y force people to
scroll up, e.g. to click on the contact when you can have
a contact form on each and every page if that's
required by your client. Finally, we will have all of
these pages, as I mentioned, where we're going to present an individual cars
from the stock. So you might want to see how many miles
the car has the ID, which color is it,
which engineers it? I don't know all of these
other additional images, so we're going to talk
about all of that in depth a bit later. All pages are to be designed
in a responsive manner, which we already mentioned. Project timeline needs to
be completed in 90 days, which we've already mentioned
in our design brief. So finally, this is
really important. So we have project research,
competition research, design brief and
inspiration, paper, wireframe, concept research,
sitemap and flowcharts. All of this is going to take
us 14 days in this case. Then we have moodboards, color selection, icon style,
comparison and exploration. Adobe XD designed to shareable
link for feedback plus two rounds of revisions and feedback to be done in 15 days. Then we have UI design
with images, colors, shadows, and icons into determined style plus
two rounds of feedback. We also have 15 days, but just keep in
mind, we are doing these two at the same time. So this is kind of
misleading in a bit, but you still want to
present to your clients how long does this actually
take you to create? Finally, we have Asset Export, website development in Webflow, connection of a domain
to a Webflow hosting. Obviously they are going to provide all of these things plus a 1 h consultation
session on how to use Webflow to add
new cars to the site, which is really important. You want to be able to
communicate with your clients, to explain them,
whatever you can. So they're going to bug
you less in the future. You always want to do this. You always want to set up
your projects properly. You always want to kick start your conversation with
your clients properly. So they are not calling
you every single day. They're not emailing you every 2 h. You want to
explain them fully. How to use Webflow, how to use design, how to use design brief, whatever you are
creating for them. Just make sure to explain and take a bit of time
from that project. Obviously, you can
build that time, build this our
inside your project. But just don't tell them that
you are actually building it because always
build your work. Make sure to bill your
emails, your phone calls. This one I just mentioned, if you're creating videos. Whatever you're doing for your client is part of the work. Not just design, not
just Workflow Build. So always make sure to
build whatever you are doing inside of your
project proposal. Then we have the fun part,
we have the pricing. So here we have project fees. So research, competition, research design,
brief, and inspiration. All of this is going
to take us this much. I didn't add up the numbers
quite right right here, but don't mind me for it. So we have project research, we have paper wireframe
concept research, we have moodboards,
costs selection. This cost this much, this costs this much,
this cost this much. And the whole point
here is to get to the total of $10,000. I didn't include
Webflow right here, so let's build it right
here. So Webflow. Webflow build website or Webflow responsive website
built with a CMS included, which is content
management system, which is for them to be able to add all of these new
cars to their stock. Then we have payment options. So we have two equal payments. So five k Now five k at the end, three equal payments
are 3333 each. So the first one right now, second one after we
finished the design and turbo and after the Webflow
build is completed, then we have two payments,
five K Now five k at the end. So whatever you want, you can add one payment, you can change all
of this information. Then we have terms
and conditions. As I said, there is also
one page which is about me, which I purposely removed
from this because clients contacted me So they
don't need to know about me. They already know about me from my pages in
my website, e.g. so we have project resources, if not otherwise agreed, is to be provided by
client project revisions. How many revisions can they have before we move
forward edition, so you cannot add your
graphic design to this. This is just for UI UX design, a research and Webflow
built off your website. Don't add me additional
things like banners design or Mandarin or
business card design, brochures design,
whatever, that's not included in this price. If you, as a designer, know how to do all these
things, more power to you, I really encourage you to create even more for your
client intake them, take even more money from them, build even better
relationship with them. But for me, I don't
really like to do those things. I
know how to do them. I just don't like to do them. For me. Research
UI, UX and built. That's what I do and that's
what I like workdays. So if you are working
from Monday to Friday, they are working weekends. They might send you an e-mail, but just be straight with them. I don't work on weekends. So you can send your email. I will receive your e-mail, but I will reply
to it on Monday. So make sure to be
straight with your clients or from where to when. If I work 9-5, make sure
to include the time zone. This is easy for this
particular project because both me and my clients are
in the same time zone. So that's quite simple, but if you're working
in any other time zone, that's really important to do. Also, what are your
public holidays? If you are working on weekend? Do you charge even more per hour or what's your rate
on the weekend? File formats. So usually if you're
working in ASD, they want Figma files, then makes sure to specify that you're going to
deliver just XD files. If you're working
in Photoshop, e.g. for image editing, as I'm doing, I always like to state
that usage rights. So who gets the rights to this design and build and
when project cancellation, if they decide to cancel in
the middle of the project, what do you do? Are you going to
refund them the money? How much you're going
to refund them, when you are going
to refine them or if you're not going to
refund them at all. So make sure to think about all these things
when you get started and make sure to approach
them in a logical way, what would you do
in that situation if you're working with
somebody in some, you just decide to cancel, Would you want your money back? Would you feel bad about it? So make sure to figure
out all of these things. As I said in the previous part of the course where we talked
about project proposals. And now in this one, you can get this template
with the discount. I'm going to give
you a coupon code. And basically this is it. You're going to
export this as a PDF, select this one, and select
all of them actually. So let's do that. Like so holding Shift
Control or Command E, export as a PDF and it's going
to export as a single PDF, but it's going to stitch all of these different
PDFs together. So you're actually going to
have this as the first page. This is the second
page and so on, which is what we
want at the end. So you can export this, you can print it out
if you want to have it directly given
to your client. If your client is local, if not, as I said, you can export it
as a PDF and you can just send it via email. So that's it for this video. We're going to go to the next one where we're going
to talk about our persona. And I'm going to show
you that template which we covered previously, how to fill it up for
this particular project. So I'll see you there.
128. User Persona: In this lesson, we're
going to talk about user persona and
what we learned so far from the design brief and from our conversation
with our client, the research that we
did on Instagram, on LinkedIn, on YouTube. But we understood from
what our clients told us and what we saw
online directly. And you can even go
even further and simply call these people who
are already purchased cars from your client and
then simply book a meeting with them and ask
them some simple questions. Do a questionnaire about
some UX basics like, what did you like
about to experience? What do you think could be improved about the
buying experience? Did you take a loan? Did you Bye bye cash? Did you took some
other methods to purchase this car
from the company? How did the company treat you? Did you get a warranty
deed you find safe about getting a warranty. And how long did
you use the car? Did you resold the car so
you can ask them all of these questions and simply tell them that it's going
to be anonymous. You are just going to
do the research for future buyers so that you
can build this website the right way if that person
wants to come back and buy even more cores or for future buyers in the future
who are going to come. You can do this with e.g. five of their customers
if they are interested, you can say that this is going to be
completely anonymous. Nobody's going to know
about you are just going to want to know about information as to why did you decide to purchase
with this company? What attracted you
to this company? And how did you find
your experience? That's what you want to
learn about your clients. And then when you move further, this is what you're going
to get a new user persona. So as I mentioned previously, we know that these
people are 45, we know that they are male, we know that their
business owner, what we mentioned so far that
we found out on LinkedIn, that we found out on Instagram, they make more than
100 K. You can easily see this by taking what to do, putting inside the government
calculators so you can understand how much
money they are possibly making. Or even better. This country, which is Serbia. But you can get this in pretty
much every other country. You can go to the government body
which actually issues licenses to businesses
to be operational. So if you want to
open a business, you first have to
get a license from the government and from
them basically to give you a green light
so you can open a business and therefore you can track our businesses real, are they still operational
or the defunct RT close so you can track all
that information on government websites and income. You can see the income which
is a publicly available data because you can see how much money did they make
in the last 12 months, e.g. do they have any standing loans? So you can understand just a little bit how
much money you're dealing with in this company. And therefore, you can
deduct how much money possibly can a CEO make
or can entrepreneur make? And as I said, you can find on LinkedIn, you can find possible
salaries for these positions. So you can really
get to that figure. Or even better if your
client knows how much money their customers make
and how much money they are willing to spend even
better, more power to you. You can quit easily deduct that, and you can put this in. Once again, this is
really important because the overall tone
and the language of the website wants to be targeted to these people rather
than everybody else. So that's why we want to
format this in such a way. Status, married. Why do we know that? Because
of Instagram, once again, location Belgrade, Serbia is
what our clients told us. Stefan is the business owner
from Belgrade, Serbia. He enjoys dinner with
his friends and watching YouTube shows about
self-help and improvement. All of this can be seen from their Instagram feed
and their stories. He's a father of
two and passionate about architecture on weekends, he likes to explore and
get out of the sea life. What he is most
passionate about our cars and he likes luxury sports cars, mostly because of their
looks and sounds. And then we have
needs better way to search for a used car online. Easier way to
understand the car. He looks at easier approach
to inquiring about vehicle. All of these things we
mentioned and all of these things is what
our clients told us, that their customer told them. And therefore, we understand what we want to
build right here. Frustrations, websites are
too crowded and confusing, which I'm going to show you
in the competitive analysis, which is going to
come a bit later. Websites are not
mobile-friendly, which once again is a big
no-no in today's day and age. Hey, single posting
without a price, me to whatever I'm buying a light to see the
price straightaway. Because what's the
point of selling it? If you don't want to
show me the price, how am I am able to buy it? This we will want for
you to contact them and for them to scam you in
some other purchase. You don't want that, you
want full transparency. Then we have social
media usage right here. So majority are
Instagram and LinkedIn. Maybe I could put
YouTube right here, but Facebook and Twitter
are somewhere in-between. Then we have the quote and
we have the favorite brands, which I actually didn't change from the template which
I already showed you. But crucially here we have this because our client told us that they like Cardboard website. I actually took the color
from Cowell website, which I'm going to
show you in just a second and put it there. Just so inspired me. So I understand that
they like blue and I want to push for this
blue color even further. And I'm going to show you
in one of the future videos how to do that and why
is that important? Next up, we move on to
competitive analysis. And I'm going to show you a competitive analysis
for this business. We're going to compare
these competitors, both direct and
indirect competitors. And to understand a little
bit better, what's the date? Great, what they did so
great so that we can move forward and fix those mistakes
in our future design. So I'll see you there.
129. Competitive Analysis: Let's now move to competitive analysis and I'm going to show you some direct and indirect
competitors for our brand. And I'm going to point
some good things and some bad things that both
of them that took us mourn. And here we have two websites
and I'm going to show you first like this
and then we're going to enlarge it a little bit because first things first, this direct competitor
is not responsive. You can see that right here. So if I narrow this
website even more, you can see the whole
problem right here. So you can just imagine when you go to your mobile device and
you scroll left and right, you actually have to pinch
and zoom and move around, kind of like in the
middle of 2000s. So This text is not
centered then this way. So we have really big issue. So let's look at that
first because this is the actual platform
which I told you, which is there an
indirect competitor. And they are selling
on the platform. They're not selling
on their own website, but this company has
their own website. So first of all, they have
home in an obligation, we are going to get rid of it because majority
of these people, especially because they
are business owners, they are experienced
with online business. They aren't going to click on the logo to go back to home. Then we have offers. Let me try to translate
this to English. So it's going to be a little bit easier for you
to understand. There we go. So we have home as I mentioned, we have vehicle offer. So there are current
vehicles, vehicle in arrival. So those are real Cusco just purchased and are
in transport, e.g. financing, which
we need gallery, which we don't need because
vehicle offer is going to offer that to us and we are going to be able to
see all images there. Then we have contact
page which we will need. Then they have this
nice hero section is not about brand,
it's about performance. But we don't know if e.g. you know, about cars, you will know straight
away that this is a Porsche 911 Turbo
gauge cluster. And do you sell just pushes
or do sell other brands? You say it's not about brand, but why do sell me a specific
brand in the background? And you're going to see
it in just a second. They have a lot of this brand on their Instagram page
and on this website. So I don't really
understand that. Then we have arrival vehicles
and we have vehicle offer. And you can see these two
boxes are not aligned and we don't see
any imagery behind. We don't see any cover
options available. Then we have best deals. So we have Porsche, Porsche, Porsche, which
has just mentioned. So it's not about brand, but let's show them all
the portions that we have. So we will cars why this showroom So we have
certified vehicles, test driving, and free delivery. So do you need financing? We are here for
you, our partners. Okay. Then we have this image
for whatever reason, visit us and drive your new car. So they have email
address and phone number. Then they have the
map, which is great. And they have this simple
footer at the end. So quite simple, and
I really like it, but I just don't really understand all of these
different sections. But doesn't matter. Let's view all cars. So we have bunch of
Porsches and we have BMWs. So let's take something,
Let's take a Porsche. So we have views. So if I click there, it's going to take me
and let's actually go to this page previous. So we have visitors and they
don't have a contact here. Liked it didn't on the homepage. So it doesn't matter. Let's move on. So what we have right
here is we have reserve a car, we have alike. But what's the point of like, if I don't have a
profile where I can see all of these lakes, this is fine where I can actually contact you via
these networks, I think. So If I share this on Twitter, is it's going to open up share. Yeah, so it's going to
open up a share widget. Okay, instead of contact widget. So I like this car, I will contact you via
Twitter and click there. And it's actually going
to share it as a tweet. Okay, probably the same for
WhatsApp and Pinterest. So then we have this gallery. So if I click on the gallery, it opens quite nicely. Then we have all of these dots at the
bottom, which is fine. But once again, this layout
is kind of squished. So we have 2467 images here. Perhaps it's not
the best layout, but we will explore it
a little bit later. Then we have just
a bunch of texts. We have general
information description. So it's divided
quite nicely in it, quite easy to understand way, but it's not too visual. Perhaps. In our case, we can break it down into different sections. And you're going to see
that in the second website. And in what TRB upside,
which I'm going to show, which is not there at all, but the inspiration
website for our client. And then we have all
of this information. And finally, we have the same two sections
right here at the bottom. So that's our current. And if you go to financing, what we see, simple, quick best rates, more
information comes from, so they don't even
have this page. Alright, so this is
the direct competitor. Let's now check the
indirect competitor. If I scroll a bit more to hide this even
further, there we go. So we have the platform,
as I mentioned. So this is not their website. So they're giving us all
of this information. So let me try to translate
this to English as well. There we go. So two years of Business, Sara vehicle brands,
vehicles from Serbia. So they're not importers, they are directly from Serbia. Possibility of buying on credit or a loan, what
they can offer you. So once again, just understand that this is a platform and I'm
going to show this. So it's called used cars
or Paulownia Toby Lia, if I translate to
English, there you go. So you can see all
of this are from variety of different
business sellers. So all of these sellers, and then we have more
sellers and Marcellus, just imagine Amazon for cars. This competitor is just
there on this platform, so this is not their website, they're just selling here. You can browse through different categories,
which is great, but our client doesn't
have too many cars. They just have e.g.
six or eight cars, so we don't need
any search options. We just need a page
where we can present all their cars because they
usually sell quite fast. And you can see on this
competitor website, if we scroll here, so vehicle offer 2467 cars. So you don't need a search
option for seven cars, but you do need a
search option, e.g. if you have 20 different brands, if you have 100 cards, if you have all of these things, so that's where you need it. Once again, this is
from a platform, so I'm just going
to open up one car. They have a lot of different photos right
here, which is great. And first things,
first, on a glance, you can see the year
the car was produced. What type of car is it? How many kilometers
has traveled? The transmission? So we have the engine type. We have how many cubic
inches does it have? Then we have horsepower and we have what type of vehicle is it? Does it have two doors
for those fibers? So all of this information
is really useful right here. We don't have any of these. And actually this section looks, I was thinking for a second,
maybe it's responsive but actually is not just
goes left to right. So let's move on to here. And here we can
see the insurance. Let me translate
this one as well so it's easier for
you to figure out. So we have price
of registration, then we have the
insurance calculator, we have purchase agreement, all of these things which are
provided by the platform. Once again, I cannot
stress this enough. And I really liked this layout. I think it's quite good. And when I click, it's going to show me
full-screen for the image, which is completely fine. We have the x, so just
the typical layout, and then we have
general information. So considering this in
comparison to this, I think this looks much better because it's going
to divide that into certain sections
because this platform is in the business for
the last 20 years, e.g. they know what to
do because they are collecting data
for over 20 years. They understand their
customers and they know which sort
of information is really important to put
inside of the selling page. So you have more information
about the model. Perhaps there can be a
YouTube videos, maybe. Then we have security,
we have equipment. Notice how this stays at, pinned to the top at
all times which I really like while
on this website, if I enlarge it,
if we scroll down, we don't have any buttons, they just move out of the page. If you go right back to here, and if I am able to scale this now without breaking
my computer, Let's try to draw this like so. Because I'm running all of
this recording software, That's why you see this
black black glitch. We have equipment,
we have the state. So is the current
new is the car used? Where is it located
as a service history, which is extremely important
for expensive cars. Then we have description. So perhaps what, what sort of equipment does the car have? And maybe some
additional equipment. You can see there
is a lot here and it's always the case
with Mercedes vehicles. And then they have all of this
description at the bottom. Some, in my opinion, we need something like this, but in a more minimal
style because once again, we don't need all this
information because we were going to
have separate page for the car loans and they're they're
going to be able to see that information. And we just want
them to be able to contact us quite
easily to inquire about this specific car and
to understand more about it and to see more information about it and book a test drive. Because remember,
That's our objective to increase the bookings of test drives by 10% in
the next two months. That's what we want and that's why we want to create a nice, beautiful layout, perhaps
with a card like this, but maybe it can stick
as we move down. You can see here
it's just there. And if I start moving down, we have this information here, but we don't have
this information. So click to see the number and send a
message to the seller. We just have this
information which share to social media report the ad and then add it to likes
and we have the price. But in my opinion, this, even to this huge website, my opinion is this is
much more important. Then this information. So just keep that in mind. I want to see the price, but why I cannot
see the price here? Why cannot contact you via, cannot send a message or
call you directly from here, especially on mobile device. You can just imagine, let's quickly scale this a bit. There we go. And then let me scale it
from this side and think, yeah, you can see how crowded
these sections can get. And then we have these tabs which don't open
for some reason, whatever. But you can just imagine
that if they work, when they open all of this
information, just see this. And all of this time when you're scrolling on your mobile device, you just have this information. Okay, I'm fine. I want to purchase this vehicle. I love it. It's fine. Let me call them. You'll have to scroll
all the way to the top just to be
able to see it. I liked how they did
the responsive because their navigation is just huge, because this website is
quite huge as they said. So let's put it right here, and let's move on right here. So you can see how many
of these do they have? So they have a lot inside. Now, we just need
something like this. So quite easily,
quite simple because our brand is quite easy. Finally, after all of this information and we
understand what we want, we understand what we need
a little bit better now. Then we see the car well, which is the website which
inspired our client. And this is where I took that blue color
and how I did it. It's just right-click, call
a peak from page styles. Click, and there you go. So if you want, you can browse this color peak. It's what's known as color
picker or color pick whatever. And then here you're
going to see all of the colors which are
used on the website, but I'm not going to do it here. I'm going to go to
the used cars, e.g. but actually, no, let's
go to the new cars. And let's see something
which is popular. Whatever. Let's take this
Hyundai Tucson deals. There we go. And here you have
this card layout, which I was mentioning. There you go. But what I actually
want to show is this, I think it's right
here, there we go. So popular in-depth reviews. So when I started scrolling, you can see this section of
the page follows me down with extremely
important information, which is what I said. So you can just see how much information I have right here on
the left of the page. But at this right sidebar
keeps sticking to the top, no matter where I
am on the page, all of this information is
easily accessible to me. I can easily understand
it while here, if I start scrolling
down, it's gone. Especially on mobile device. It's the same story here. So if we scroll
all the way down, it just stops right here where the information
and so you can see is clicking and going away because we're now moving to the
other parts of the website. So I really liked that. And in terms of
color, once again, you can right-click color
pick from page styles. And this is completely
free by the way, you can install it as
a Chrome extension. And then here you can see
it shows us RGB styles, but we want textiles because they're much
easier to work with. You can just select this
blue color, copy it, and paste it directly
into Adobe XD. And there you go. Now you have it and now
you can see super easy, this is to work it. So now that we know all
of this information, now that we know what we want, what we don't want, what we
like, what we don't like. We know what they
like as a client, we know which sort of
color can we aim for. Now that we can start
aiming for user flows? And now we can move on to maybe structuring
the pathways that our users are going to
take when they land into our website and what
they're going to do next. So let's move on to Adobe XD and let's work
with some user flows.
130. User Flows: In this lesson, we are going to work with user flows because this website is
going to be quite simple in terms of navigation, in terms of pages. They're not going to
be a lot of them. Then we're going to get through this a little bit
more quickly than if we were to do this in
a bit more complex page. So let's jump into XD
and you are familiar with this template if you watched the previous
parts of the course. Because I already showed you this template and gave
you this template. Assault. We have entry point, we have the white,
we have the steps, we have all of these
different elements. And if I go ahead
and select this, we have Open Sans as the font. But I'm actually
going to go ahead and use Poppins
for the font e.g. so let's see, maybe we can. Let's go here. So let me go ahead and
select these elements are low hit Control C or
Command C on a Mac. Let me switch to a
blank XD document, which is this one Control or
Command V to paste it in. And I'm going to go ahead
and select them right here and hit actually no, let's, let's see, move to
where it main component. Now, let's switch back to
this file and close it. And now let's save it
to my desktop, e.g. so let's go ahead and
name this our user flow. There we go. Then first things first, let's actually added main
component right here. And here, I want to take that
blue color that we chose. So let's select it for
the fill, hit that color. And I'm going to
call this color e.g. main, blue. And I also like that. Let's go ahead and
get rid of this. I also liked that other colors. So for the car while websites, so if I take you
there, there we go. So when I hover, we have
this lighter color. So what I can do is perhaps hover and then right-click right here and colored beak and take
it from there if possible. Or if not, maybe we can go somewhere else because they probably use it somewhere else. You can see right here
for the link color, it looks quite similar. So maybe we can find it. Here it is in their logo. So you can either take the logo, Right-click somewhere
around here, and let's see. Click outside color peak. Now just gives me this color. So I already took this color, but you can browse through it. You can open up in
a new document. You can even go into
CSS if you want to. Take that color. And I'm just go right ahead
and I will click right here, click here, and then click
here to paste this color. Now you can see it's
minor difference, but still we're going to call it hover color because I want to use that color
for our links, e.g. and for our button hover
colour a bit later. So we have the entry point, we have the action,
we have the process. Maybe we can leave this, but I'm actually going
to take a decision, apply main color
to the background. There we go. And all of these, I'm going to actually take
the hover color. There we go. And for all of these, Let's see, this is the
border, border and border. Let's apply this
as a border color. Let's select this, apply this to our main
color like this, and this to be the hover color. There we go. Select this to be our
border color, then this, and this to be our color. As well as this right-click
apply watercolor. This is going to
be hover as well. And we are going to get rid of the boiler by applying
the border color here. So you can see how super
simple this is to change. Then what we are going to
do is we're going to have the entry or right around here and not worry about
the art board size. I'm going to get
rid of it in just a second and reduce
it a little bit. So if I take you back here and make sure we
are centered and 20 e.g. we have the entry point, which is what the user
lands on our website. And let's align
this a little bit. So let's go hit
Shift and arrows. So maybe 40.40 just to be
a little bit more precise. So once again, we have the
entry and then we will have, let's see, let's see, let's see. Maybe process. So let's call this, let's say Browse cars. And instead of this, let me limit it to this side. So when I type right here, browse cars, there we go. On the homepage, then
we'll have the action. So like this, there we go. I was still 40 years, we are aware 20. There we go. Lovely. So let's see. Maybe clicks to view all cars, browse cars, or
maybe a Vieux Carre. Vieux Carre, which is
the car in question. So maybe they just want to view the overall information
about the car itself. So we have the Vieux Carre.
Then I'm going to duplicate this once again positioned
right here, Vieux Carre. And maybe they make a decision. From here, we will go
into two separate ways. So one is going to be
right here, so right here, so shift 12 and then
Shift Control D, command D, right, the two, so we have a decision, then we have the action. And let's see what we can do. Browse cars. Maybe we can hit
control D on this one. There you go. Contacts, dealer. There you go. From debt contacts, we can e.g. hit Control D right
here, flip this around. There we go. Make sure this is in the center. Shift. One to the action
is from this contacts. Right here. Let's see, book a test drive. I believe. So. That's what we want. We want them to be able to book a test drive or we can
do something else. So that's one option when
they contacted dealer. Or they can see a decision. Maybe actually we
can move all of this down and I will show you
why in just a second. So Vieux Carre, because we will have additional
information here. So let's duplicate this. Else, flip it around, make sure we are in a center. Make sure we are 20. There we go. From here. Let's actually
move all of this even more now so we
can hear you more. Space. Control D makes sure
we are in a center. There we go. From here what we will
do is seal loans, e.g. see loans. There we go. Then from loans, they can
then go ahead and Control D. Maybe we can rotate this
to roughly around here, here, in the center. There we go. So we'll
position this to be here. 20. I'm going to hit an extend the soil for it to
meet right here. There we go. And then hit control D or
reduce it or rotate it. Like so makes sure I
am right around here. Lovely. I'll take this one rotated around laterally to position
it roughly in the center. It doesn't have to
be all perfect, maybe roughly around
here. Or even better. We can take this and
take a grid line if we just wanted to
be perfectly precise. Well, I really take this arrow, it's in the center. There you go. Position this, position,
this until it meets then position this right here. Let's see, We are not here. There we go. And if I unzoom a little bit, zoom here, we are there. So what we did right here is get rid of this guide so it doesn't
bother us too much. So Wendy browse cars, they can click to
see individual car. That's Vieux Carre, right here. From Vieux Carre, they
can click see loans, which can be a button, e.g. which can take them
to the loan speech and they have a
decision to make. So perhaps we can move
this here actually. So they have a decision. Let's see, 21 to two
to four, maybe 20. There we go. And this is going to actually
be here. There we go. And this can be a
reduced slightly to roughly around here.
Let's move this here. So 14, go and once
it in, That's it. So once again, once they
actually view the car, they have a decision to make. They will either contact
the dealer about that specific car or
they will see the loans. So when the quantity dealer, they can book a test
drive or they can see the lungs contacted dealer
and then book a test drive. And I agree upon the loan
terms and conditions right there and then or
they can make a decision. They can say e.g. See other cars. And then that can be their decision from
this particular page. And they can either
go here to browse other cars or they can go to the specific page
about view or cars. So we can structure this
in many different ways. So this Vieux Carre page is actually going to be
created in CMS, in Webflow. So we will create one single page and
then duplicate it over and over and populated with the content from
that specific car. But in this case, what we can do is
maybe take them to see other cars so
they can browse cars. So maybe we can even combine the two and create some
sort of widget at the bottom of the page where
they don't have to go to the specific page and load a specific page
every single time. Perhaps they can see related cars at the
bottom of the page. So we can see right here. So C, related cars at
the bottom of that page. There we go. And then from then on, then we can click to view a car. So once again, will
not take them to this page and waste the load
speed and loads of time. We will just take them
to the same exact page, but for a different card. Like this. Let's sexually let's duplicate this one maybe makes sure
we are in a center here. There we go. And 20 alike. So, okay, so I will go ahead
and select this arrow, open up the elements from it, then select this arrow, paste the elements is site. And then I'll just go
ahead and delete this one. Delete this one, and make sure that these two meet
right around here. This one meets
right around here. I think. Just nudge more. There we go. And now that I've done that, let me hide this one. Click this one, and show this one so you
can see what I did. I just duplicated it and
position it right here. And we actually don't
have a no in this case. But if we did, we'll just take them to one
of these different pages. So actually book a test drive
is our final destination. But contacts dealer
may be, can be that. So let's actually use a book, a test drive to be our
final destination. So Control D right here. Let's call it exit. Like so. I'm going to get
rid of these arrows because I don't need
them in this case, Control D, and makes sure
we are in a center here. There we go. For some reason we
are not in this one. Okay. Let's select
these two. There we go. Two, there we go. Lovely. Make sure these are positioned
nicely and we are 20. And finally, that's
our user flow. So that's how our users are going to flow
through our page. So let's nudge this to be at 40. And I'm going to get rid
of the spacing, e.g. 40, 05:00 A.M. going to nudge it all the way down
to here so you can see, you don't have to use specific
sizes for your art boards. You can see how you can easily adjust them and apply
them to different sizes. But we have 40 all around, as you can see right here, this is our user flow. So let's go ahead and quickly
review it one more time. Let's get rid of this. One more time. We will have let me
just see what I did. Do the duplicate all them up. So let's see that one more time. So we have the entry point, which is the homepage
where our users are going to go from debt. They can browse cars. This can be either on a
homepage or a separate page. From there, they can
click on the car and view that car for
more information. And from there, they
can make a decision. They can either see a loans and see some options for the
lungs they have e.g. which company gives away loans
and other search terms and conditions may be
and put all that information in. From there. They can contact the dealer or they can contact you directly, wants to view of the
car and they like it. So perhaps they want to
know more information is it's still
available for sale. Is it available
for a test drive? If it is, when is it available for test
drive and all distinct. Or they could see related cars. If they don't like debt
specific car from them, they can click that
card or multiple cards. We're going to take about
the layout in a bit. And then Vieux Carre for
more information about that card that they actually like if they contact the dealer. Once again, our main goal here is to get them to
book a test drive. And that's going to
be our exit strategy because the test
drive is actually going to be the final stage in this process where they
actually book a test drive. And we actually know
that they booked a test drive and that's what
we actually wanted to do. So here we have all of
these components as we build this page
throughout this course, I'm actually going to
save a file, file. And when you actually get it, is going to be completed
obviously because I'm recording this
course right now. But you will be able to
follow step-by-step. I'm going to give you a
completed information. So you can use that
as a reference. But I really encourage
you to build your own alongside me
throughout this course. So as I said, this is
just the first part. You can see that we
have this user flow. Now we're going to move on to paper wireframes in
the next lesson. And I'm going to scan
them and put them right here for easier reference. So as I mentioned,
paper wireframes is what's coming up next. I'm going to use that
black dot piece of paper, which I already
mentioned in the course. But don't worry about it. If you don't have it, you can
use any old piece of paper. So I'll see you there.
131. Sitemap Content Architecture: In the last video, I
said that we're going to move onto paper wireframes, and we'll actually move into paper wireframes
in the next video. But in this video,
I want to show you another approach which is
called Content architecture, where you actually
plan which sort of content is going to
go to each page, how important it is and how do we position it on the page
to put it to the top, to put it to the bottom. We're going to deal with
that in this video. And you don't actually
need specifically to do this in this
specific order. You can move straight to
paper wireframes if you already have content
architecture plan in mind. But if you don't, I
still wanted to show you this method because
I think it can be beneficial from time to time depending of the
project in question. Especially on bigger
projects where you have multiple content
pieces and content blocks. So it's much more easy and
important to approach it this way when you actually plan for content architecture
rather than don't. If your client doesn't
have contact with lecture, then you can charge
them for this as well. But majority of them will have at least some idea
as to which sort of content will be put on pages and where what would they
like to present? What is their main offer, what is their secondary offer, tertiary offer, and
so on and so forth. What's more important,
what's less important. So you can structure all of that using content architecture. So here we are in Adobe XD and this is going to
be pretty straightforward. So I'm going to actually
hit a on my keyboard, e.g. for one of these airports. And let's take 13, 66, whatever. And let's call this
content architecture. Actually, let's call it Sitemap Slash Content
architecture because it's going to contain
both inside and, oops, I didn't want to do that. Let's get rid of this one. And for this one, what I actually want is to
replace this as Poppins. So let's choose Poppins. There. There we go, because I
really like Poppins lately. And it's frequently font. It works in Webflow, in works seen magazine, it's Google fonts, so it
works well on the web. I like how it looks like, so let's replace it here. There we go. And this will be
much simpler if I created a separate
components for these, rather than just taking
existing components, but no matter we're
going to deal with it. So Poppins, where we are. So here Poppins, there we go. Poppins book a test drive. Poppins and exit pins. Okay, so what I'm going to
do is take one of these. So choose in this card e.g. hit Control C to copy it, and then jumping right here, control V to paste it in. I went to ungroup component and hit Control G or Command G to group
it back once again, call it stack, call it pairing
to have existing the same, exactly the same details. So it's going to have something like home page so you can
see how it scales nicely. So here we are going to
apply some dark color. I don't know. Maybe we can take something
which is almost black. Maybe. There we go, I like it. And if we take Q right here and actually hide
myself from the page, you can see it's 2122 to four, which is almost black. And I think this color can work well for, let's say, headings. So let's give it
a color of dark, shading color
because it is quite dark and maybe we will use
a lighter color later. And let's see, this
is pure white, so let's give that. So let's call it pure whites. And I'm using dashes in my
naming convention strategy. You can use underlines, you can use two dashes, you can do whatever you want. And finally, we have Poppins
as the font right here. I'm not going to add
it here right away. I'm going to add it later when we start working
with our design. So let's call this e.g. home, our nav item,
navigation item. There we go. And then from the homepage, what we can do is duplicate this because remember we have
loans or even better, we have cars first. There we go. And inside of the cars, let's group them together. So Control G and call them nav items and put those
in a stack like so. And now I can jump inside and I can move this around
and positioning higher I want or I
can select this and let's give him
150, e.g. like so. So once again, we have a homepage where all of our information is
going to be structured, then we have cars where all the cars are going
to be presented. Then if a duplicate debt, what we can do is put a loans inside where we will show all the different
loans which are available. And finally, when
we duplicate that, Let's give it e.g. contact. As which is going to
be our contact page. And because I don't really like the spacing, it's rather huge. Let's reduce it
down to a hundreds, and maybe that
will work for now. So let's take the
text from here, control C, control V
to paste it outside. And because you don't see it, let me turn it into
here so you can see how good this color
is straight from here. So what we're going
to do right here is obviously all our
pages need nav. So Navi location. There we go. And I'm going to hit
Control G to group this. And I'm going to call
it text or sections. Even better sections because each website has
different sections. I'm going to put it 40 and then hit stack right here
in this direction because I want to
duplicate this text a few times to have more options. So Control D, and I'm going to give this to
be, let's see, 20. Yeah, I think it
works quite fine. Straightaway, what we
need on the top is, who is this company? Because when you're
visiting as a new visitor, you want to understand
who is this company? What do you do in
a fraction of a second before you
leave the website? So we want to be
clever with our copy. Tell them that these
are exclusive cars. They are selling cars,
but exclusive cards. So if you're not of
this type of buyer, let's say maybe
this is not right, the website for you. Or if you are this type of buyer that you know that you're
on the right place. So maybe we can
write who we are, who we are like
this, like a title. Then below that, we want to
tell them maybe what we do. So what we do, we sell exclusive
cars and dislocation. We are dealing
with these brands, maybe something like that. Then what we offer, this can be in the section with different cards on the page e.g. where we can show
different cars from their offer and
the original offer that they have at the moment. Maybe we can put
in some benefits. Maybe our benefits. Maybe we can get free
detailing or a car wash or maybe full body protection
or extra set of wheels or winter tires are
all of these things can be benefits when you
buy a car from there. Maybe like we saw on
that competitor website, maybe we can offer
them free transport from the car showroom to
their actual place of living. So maybe that can be a benefit. And finally, maybe where
we are, where we are. Put that as a map, like so. And then below that,
maybe contact us. Because once again, it's really important to have
a contact form. And finally, we'll have footer
at the bottom of the page. So let's quickly run through
all of this one more time. So we have navigation
because we need navigation obviously
on every single page, who we are, we want to introduce ourselves and we want to
tell them what we do. Because we want to present our services and not just
say we sell exclusive cars, but maybe in which
way do we do it? Maybe establish a bit of trust. This is the perfect example
where you're going to use or testimonials may be stuff
like that, what we offer. So yes, we offer
these exclusive cars, but maybe show them some additional features
like maybe we have warranty, maybe we have like I mentioned, that polishing service and
stuff like that, our benefits. So why would they pick
you or your competitors? Maybe you guys are
offering additional, Let's see, warranty for
an additional year. That's good. Peace of mind to
have that because I'll have to pay service
and costs maybe. So where are we? Which is once again
really important. And we can show a map, Contact Us and footer. And maybe we can
duplicate these sections throughout our pages
and navigation, obviously it's going to
go to every single page. So let's see, this is going to be home sections and then
Control D to duplicate it. I'm going to move it to
roughly around here. Or even better, I
can ungroup these. So I can easily
align them to here and then we can
fix this in a bit. Mba can move this right here. Maybe I can move this right here to give us a bit of space. Let's see, 100 pixels. There we go. So on this, what we want is to get rid of all of
this information. So we will have
information that we are going to reuse
throughout our pages. We are going to create
components in XD and in Webflow. We will create these
symbols that we can reuse exactly the
same methodology and structure like in XD, figma, like in any other tool
that you can reuse and you don't have to basically
recreate them all the time. So what we will
have here is maybe we can have promo info top. Let's see something like wrongly for prom when
for something like that. Let's see. Top promo in form where we can maybe promoter add a
tagline or something like that. Then what we can do
is create stock. And maybe we can put eight cars. Maybe just to show that they have eight cars at the moment, let's say then we can have
clear call to action. Or we actually don't
because we have the stock. Maybe we can put this card
for every single car. They can click on
the card in order to access the full page, which is going to show
you all of the cars, which is the decision when you, when you actually view the car. So we are here browse cars, which is the cars
in our navigation, which is this one right here. So when you click Browse cars, you will see View cars. So from every one
of these eight, when you click on
every one of them, you're going to see this view
cart page and from then on, the decision process
takes place. So we have let's see, this is cars sections. Then we have loans. So let's go ahead and click
Control D. Duplicate that. Position, this to here. Oh, sorry. Let's see where we are. We are see like sell, no matter. So once again, I'm going
to get rid of this one. I'm going to get rid of
this one because these are the sections which we are
keeping and repeating. So here we will have e.g. top promo info. But different one because the
previous one was for cars, this one is for loans. So obviously, it's going
to be a little bit different than what we can
do is show them our offer. Because all of these
other competitors have their own offer. This is our offer
and why we a bit different and maybe
show them our partners. Because as we mentioned, unexplored in brief, this company does not
do this by themselves. And then they have these external partners who are helping them with
transport from Germany. If you remember, cars are
coming from Germany to Serbia, then we have these
partners for loans because this can be the banks are loaning companies
are cellular and dad, which are happening
with the lungs. Them have insurance
companies and all of these are
external partners. So we have loans and we have partners specifically for loans. Then we can have where we
are contact us and footer, I think that's fine. And let's call this
loans loans sections. Why we have two spaces
here and there we go. And finally, let's hit
Control D One more time. Duplicate this and navigate
to here maybe and contact us. So here we will have, let's see, I'm going to
get rid of this and this. And instead of top premium
for I have maybe top image, top hero image, e.g. because remember hero sections are located throughout
your pages, not just on the homepage, it's just the first page, first section in the
page above, default. So let's call it a Contact
Us sections. There we go. Let's now group all of these. So I'm going to hit Shift Control G. I'm going to
call this home page. There we go. This is going
to be our cars cars page. This is going to
be our loans page. Lively. And finally, Contact Us page contact
us page. There we go. I'm going to group all of
them hit stack right here. And I'm going to call
this our site map. Contents architecture. A lovely tablet. So if I position it like
we did previously with 40, and here we are at 40. I can double-click,
can add this to here. Maybe it doesn't
have to be perfect. I'm just a bit of a
stickler for these details. So sometimes you'll just
have to bear with me. So let's actually
leave it like this. So what we have is
we have user flow based on which we created
our content architecture. And now based on
which we are going to finally move on to
the paper wireframes. Now that's much simpler
because we have all of these ideas from
our head put into sitemap and content architecture is going to be much
more simple to design these elements than if we just started
with paper wireframes. Once again, this method
is not really necessary, but it's good to have. And it's good if you have all
of these ideas in your head to simply flush them down into
content architecture page, especially if you have multiple different sections for a big website like a blog, e.g. so it's much more simpler
to do it this way rather than simply start with
paper wireframes directly. So in the next section, finally, we're going to move on
to paper wireframes. So I'll see you there.
132. Paper Wireframes: Now that we know our
content architecture, Let's just move swiftly to it and kind of remind
ourselves a little bit. So here we have Homepage cars, loans in contact us, and we will quite easily be able to distinguish
all of these pages because of what we talked about in the quadrant
architecture so far. So what we are going to do next is move on to
paper wireframes. And what I have right here is just that black dot
piece of paper. As I mentioned previously, you don't have to use
this kind of paper. You can just use plain
old white piece of paper, or you can use a notepad, you can use whatever you
want in whatever you have. I like using these, especially
for these courses because this is a black paper
with white dots on it. And when I started writing
with this white gel pens, it's going to translate quite
nicely for you guys and you will be able to
see it quite well. So let's move on right here. What I'm going to do first
is create a quick outline just in the center of my page or a fluid because remember
later down the line, I will actually go
ahead and scan this and plunk them into Adobe XD. So move all the way
down to here roughly. So this doesn't
have to be perfect, as I mentioned a few times. And I'll just leave
it like this. So what I'm going to do first is I already
have some smudges, but once again, it
doesn't really matter. What I'm going to do. First is if I take
you back to here, we have navigation and we have who we are
straight from here. So that's what we're going
to be focusing on here. So let's block a
quick section here. Let's give it a name of a logo, and let's use a smaller one. So let's call this one cars
loans, and contact us. There we go. And if I go ahead and zoom in
just a little bit, you will be able to see it
just a little bit better. There we go. So cars,
loans contact us. And now let me zoom in just a touch so you can see
it a little bit better. So what we're going
to have right here is sort of a hero section. So let's block off smaller
pieces so we are able to have them all in
our page, like so. So here we will have maybe
a title, maybe a subtitle. And then we will
have maybe a button. So let's give it n. And then here we will
have some sort of a car. Because once again, it's a car website and just check
out my drawing skills. Crazy. But it doesn't really matter, as I mentioned a few
times throughout this because this is just for us. We want to be able to present to our clients something
which is kind of appealing and we want to be able to understand it quite easily. So that's why we are using these paper wireframes to just quickly flush some
ideas down on a page. So maybe I can have
some icons right here. So I see, there we go. Below that. Maybe we
can have our section. Let's see what we
have right here. So we have who we are. So maybe we can go ahead and create some
sort of an image. Maybe roughly around here
on this side. There we go. And I can type in who we are and maybe a few
paragraphs of texts. Then if we take here we have
what we do. What we do. Maybe can be a section
with the cars directly. So maybe we can have
those cards that we mentioned and then see all cars because that's what
we do after all. So what we can have right
here are maybe three cards. Let's go with layout like this. As I said, it doesn't
matter if I'm not that precise because I'm trying to rush this section because we have multiple pages. But I just want to take you through my thinking
process kernel. So we'll have right
here the name, maybe the price and maybe
some info right here. So name of the car, price of the car,
and some basic info. And we will discuss that
basic info in just a second and we'll have images of cars
obviously right here. And then let's close off
these cards right here. Connect these lines
really quickly. And then below that maybe
we can have C all cars. Maybe. See all
cars. There we go. Button in the center. I think that will
work quite fine. Then. Maybe we can
have a section right here on this side,
maybe right here. So I can have a bit more
space down at the bottom. So this can be imaged and we
can call it what we offer. So maybe we can have
three different Nikon's, something like that. So I CAN maybe we can have text, text and text below, something like that so we
can fill up this section. Then maybe we can block it off. Because if I take u here, we have our benefits. So what we offer and maybe our benefits can
be section below it. So perhaps something like this. Maybe we can have, I see, I see, and for the icon, I see N, then maybe have a title for
each of those benefits. And there may be a paragraph of text or something like that. So you can see, I'm moving
through these quite quickly because that's
the whole point. Maybe have two or five
or ten different ideas. I want to get down on a piece of paper as fast as possible. And because we have this nice clear content
architecture in place, it's much simpler to put them
down into place like this. Then what we want is
to have contact us. So contact us. There we go. And maybe
we can have that as just a regular form like this. There we go. And
then maybe one in the center to fill it
all in. There we go. Button right here, btn. And then below that, what I want is to
have maybe a map. All right, around here. There we go. This can be a map. There you go. And then where we are, maybe where we are. And maybe we can use
the same layout, just reuse it may be icon, icon, icon texts, texts, texts. There we go and maybe
put some, I don't know, address, phone number,
email, whatever. And then finally, let's
close off this home page. You can put a logo
in the center. Then I can use the smaller one. Maybe we can use
FB for Facebook, TW for Twitter,
IgE for Instagram, and L, and for
LinkedIn or whatever. And then here we can have
the same navigation. So on this side
let's call it cars. Loans, contacts us. There we go. So if I go ahead
and zoom in just to touch so you can see
it a little bit better. There we go. So first of all, we have navigation right
here at the top. Then we have that hero section with the content on the side. And we have the image on
the other side, who we are. Then we have all of those cards in place that you
can see right here. Below that we have
what we offer, then below that we
have our benefits. So maybe we can
put an arrow here or simply been benefits. Benefits. There we go. So these are our
benefits below that. We have Contact Us. Then we have the map on the
information on each side, which is the same
as this section. And finally, we have footer down at the bottom of the page. So what we just did is placed some information
that we have right here inside of
content architecture, down on a piece of paper and it's much simpler
to visualize it. Now, what we need
is to create cars. So let's deal with the debt now. First things first, let's take this one which is number ten. I'm going to call it home. Now let's go ahead
and create cars. So I'll just use this same layout that I
did right here roughly. So let's take it from here to maybe Let's see here
doesn't have to be precise. So let's see, I'm using which
one is this number ten. So maybe I will not
use this one ideally, but once again, it
doesn't matter. Just put the rough
structure in place. There we go nicely. Let's close this one. Let's use number eight. So once again, if we
take you back to here, inside of the cars, what we have is the navigation. We have these three
repeating plus negation. So we have four
sections repeating. We have top promo info and
we have stock eight times. So how can we do that? Quite simple, let's simply
copy our navigation. So let's writing a
logo, writing cars. There we go. And let's writing, Let's see laws and contact us. There we go. And here for the promo info, what I can do is maybe do something just a
tad bit different. So let's still have that
problem info right here. But let's maybe have
a car from profile. Once again, my epic
drawing skills in place. There we go. So car in profile, maybe we can have a background
circle and maybe we can have some sort of a
title on the top. Something like this with a background circle
around the car. I think that will
work quite well. Distinguished this section, apart from all of
the other ones. Maybe. Maybe you can write something like our exclusive collection. There we go. And we'll
just use these cards which we just created and
plunk them right here. Because remember if
I take you here, this is the car section
which will have all the cars displayed
on the page. And that's what we're
going to create. Now. Let's just
create one from here. So let's take this
height, maybe. Start right here, position it right
here, then right here. There we go. And let's take, I don't know if this is not
going to look quite nice, but no matter as I mentioned, this is just a rough sketch. And trust me, if
I'm not talking, I'm doing this like ten times quicker than I'm
doing it right here. So let's close off
these cards like this, like this, like this. There we go. Let's give them that same
top image right here. There we go. Let's
close it off like this, just so that we know
that it is an image. We had a name on each of them. Name, then we had a price. And then we had those pieces of information at the
bottom right here. So what we will do, instead of me
drawing all of this, I will type them
times eight, like so. And then below that what we
will do is simply create, contact us. Contact us. Because if it take
you here you can see that on the car section
we have the stock, which is this right
here that we just drew. And then we have our
Contact Us and footer. So maybe contact
us, can go there. And then where we are. We are with the image
of a map right here. Map. And then finally, we can
have footer at the bottom. So something like this. So this can be a logo. This can be, let's see,
cars, loans, contact. There we go. These can
be those icons, lovely. And now that the car
is section is created, let's move swiftly onto lungs. And if we remind ourselves, we have once again
navigation top promo info, we have our offer partners, and then these same section. So if we switch it
back right here, Let's create another one. So once again, this doesn't
have to be perfect. Maybe I will not even
scan these because they are really, really
extremely rough. So maybe something like this just to give
ourselves a bit of room. Lovely mistake. Let's see. Let me take number
ten because it's quite thick one and I can write
in something like logo. And then cars, loans, contact. I've lived. And for these alone. So what we can do is maybe
have a title in the center. There we go. And then maybe we
can have two cars. One car can be here. There we go. And one car can be here. Something like
this. There we go. So kind of maybe we can think
about the animation section because these two cars
can jump from the site. Title can slide in from the
bottom or from the top. So you can start thinking
about these things straight away without
ever creating them. So here we have that option. Then below that,
what we can do is maybe have, let's
remind ourselves. We have our top promo info, which is this thing right here. Then we have our offer
and then our partners. So let's see our offer. Our offer. Maybe we can create
the same layout that we did on the homepage. So maybe something like this for the benefits and maybe
we can do the same. So maybe we can type. I see I see, I see. Round them out in circles. Then we have the
title and then we have paragraph texts just below. Then what we have
is our partners. So let's call them something
like Actually no, let's, let's give them the layout that we did previously on the
homepage just on this side. So what I'll do is
have my image here. There we go. And maybe do something a little
bit different this time. So maybe put a logo here. So let me choose number ten. So logo. And then maybe on this
side maybe I can put a card and call it
logo for the partners. And maybe we can call
them our partners. Partners. There we go. And then
maybe we can put the same layout as we did on the homepage here
for who we are, but just for our partners
and then not to waste too much time just to remind
ourselves of where we are. Contact us footer so I
can take the number ten, so contact where we are with the image. And finally footer so that we can move in
a briskly manner. What we have next
is just contact us. So let's do that in 2 s because it's going to
be super straightforward. I will not need to create any additional
lines right here. Maybe I can put it here. I've been logo. There we go. And instead of writing, we already know what they are. So if we remind ourselves
for the Contact Us page, we just have navigation and
then all of these things. So top hero image
and where we are. So all of these are remaining. So maybe we can put a nice
big image for a hero. And then we can write
in contact us where we are with an image of a map. And finally for term. And now what we need to do is actually go ahead and create the page where we are going to provide additional
information about the car. So if I take you to one of
these pages that we just did, so this one, e.g. we have all of these
different sections. We have the car, we
have the images. We're going to filter
through all of this information in a bit. But right now, we'll actually have to create
something like this. So how can we do that? It's actually super simple when you know what you
need to put in, but I'll just put
some blocks inside. And then later on
in XD will talk about the different sections
that we can create. Why do we create and
stuff like that? So here we have the car page. Let me call it car
in detail page. And let me, let me
actually create a quick outline around
here, roughly around here. And just remember
this page is going to be created using
Webflow, CMS. So it will create just one. And then when we input
all the information, CMS is actually going to
do all the hard work. So our clients will
be able to include additional images and includes separate information
for each car. So the color of the year, the production, the mileage,
all that information. There'll be able to include it for every other
car that they put. But the overall structure and layout is going to
be exactly the same. So if I take u here, we have the navbar-right here, so logo and we have no items. Then what we will do is
maybe divide this into two sections are like I showed you on that
particular website. We have one section
with the images and the information
and the second section with the card maybe
which is going to follow and the layout
which I showed you. So what we can do
right here is maybe create a layout which will
look something like this. And of course you can always
play around with this and adjust these sections. So I'm going to put
one giant image and then maybe for smaller images. And then put a banner with either an icon
or the text inside, which when you click it, it's going to enlarge the image. So I've put this
here, this here. And then on this side, we'll create that card, maybe the same size as this. It doesn't really
matter for now, but when we move into
design it will matter. So what we can do right here is actually putting
that information which you mentioned, the salt, we can maybe put
in name the car, price of the car. Maybe some small
description right here. And then maybe we
can put two buttons. One is for maybe reserve car, which when you click it, it's going to take
you to contact form. And the other one can be
maybe alone options or C loan options. Options. There we go. And that can maybe take
you too long speech, loans, contact form
or page or whatever. So that's going to be a
layout for that section. And then basically what we
will do is I'm going to do this free hand and I'm going
to turn it right here. Will hear maybe
something like this. So overview or review. Bunch of different
information inside. Then we will have car spec. And that section can be long. We're cool info. And then what we
can do is maybe put performance and then put all the information
inside the performance. Safety like we saw
on that website. Because safety is really
important. Obviously. Maybe driver aids or
something or convenience. Then maybe we can put exterior and which sort of exterior
details do have exterior. This can be rooms in color
and stuff like that. Interior. Maybe you have leather seats or climate controlling side
or something like that. Then maybe we can
put dimensions. Dimensions. There we go. And that can be it. This section can be
closed off right here. And this card can
follow this section. There you go. As you scroll down, it's going to move down. Then we will have
maybe some option for, let's say, Explore similar cars. So maybe I can write that. Explore similar cars. And here we will just have those three cards that we
had on all other pages. So card one, card to card three. But in this case, it will just load other
cars from this collection, which will create in CMS. So if you're looking at
Mercedes S class here, it's not going to show
as class right here because we are watching S
class right here on this page. Instead, it will pull
information from the next card in order
that we set it in Webflow. So I'm thinking about all
of these processes upfront. So when we actually
moved to Webflow is going to be much
simpler to create this. So we're not looking
at S class here. And here, you're just
looking at it here. But here are going to
be different cars. So name, price and info, name, pricing, info,
name price and info. And then we will have all
of the same information. So we will have contact
us where we are. And finally, full term. And because we're
doing this in CMS, this information is
going to be the same. So finally, this page
that we just created, so car detail page is
going to be exactly the same for every single
card that we create. And the clients are
going to be able to easily update this page and add either additional images
to existing car or create new cars and create these
dynamic pages full of content. That's where Webflow, CMS
is going to come in handy. So finally, let's review
what we did so far. So we started with the homepage, which I showed you right here. So we have home car
loans Contact Us. Then finally, card detail page. So we started with a homepage. Then we moved onto cars page. We're going to create all
eight different cards of cars. And these sections at the
bottom are going to repeat. Then we moved into loans where we are going to display two different
car images. We will show them our
offer for the lungs. We will show them our partners for the lungs to
establish trust. And then these sections
are going to be the same. Finally, for the
Contact Us page, which I can maybe mark
here, contact us. We'll just have hero image
right here on the top. You'll have the contact
form that we saw throughout the website where we are for
the location and the footer. And finally, the most
important pitch in terms of convergence is going to be card details page,
which is this page. And it's just going to
show them the details about the car that
they clicked on. Any one of these previous pages, either in the cards are in
the car section of the page. And as I mentioned, it's going to have images
right here at the top. Then it's going to
have overviews. So maybe I could zoom
in just a touch so I can show this in a
bit more detail. So as I said, we will
have images right here with four
different images and the icon to enlarge
images and go into full screen maybe right
here to see more details. We'll have our review vehicle
in four with performance, with safety, driver aids,
exterior, interior dimensions. And finally, we will have
explored similar cars from that same Car Collection which will create
in Webflow later. And then finally, same
sections like contact us where we are and
footer right below. And finally and crucially, discard is going to
follow them wherever they scroll up and down in
this particular section. So then we know we reached the end of our paper wireframes. I really hope you enjoyed
it and I really hope that you understood why it is important to create this
content architecture and sitemap alongside
these paper wireframes. And that it's much simpler to create contents
like that because you're planning ahead in your
thinking ahead as to whet, where to create
something and how to create something that you
need for your website. In the next lesson, we're
going to talk about images, where I got them for
this particular project. Where you can get them to how I'm going to structure
images for this project and which are terms and conditions as to where
and how you can use those images in your own project if you want to use them
for your portfolio, e.g. so I'll see you there.
133. Project Images: In this lesson, we're going
to talk about images where I found my images for
this particular project. How you can use those same
images and how you can license them later if you want to use them
in your portfolio. If not, you can use
some other images, but let me just show
you the approach I took because it's
really complicated. So if I go right here, I used all my images
from Envato elements as I do for all of my YouTube
tutorials, all my courses. And I use this website
for years now, and I think it's fantastic. So the main problem here
is you have to find a car and take images from
every single possible angle, as you can see right here. Possibly in the same spot. And then you do the
same with the interior. So I didn't do interior
because it's really tricky to find 3D interiors online
and take high-quality images. You can do so online on
the company websites. But to show to your clients
who is actually going to have these images
because they have stock of these cars in their showroom. So they can take
images from all of these different angles,
including the interior. The whole point here is to show them how the website
will work so they can replace the images
that you put in inside that Webflow template that we will provide
and create later. So to create something
like that, what I do, what he did is went
to Envato Elements. And I downloaded this logo and I just replaced the
name with a spider, which is the name of
our imaginary company. Took this 3D software, took this 3D plant and took this limestone floor
and wall panel, drop them into Photoshop and
created something like this. So if I hit Control H
to hide these guides, what I have right here is
the background texture, which is a background
right here. I have the floor. I have the plant
with a bit of blur. And I have the sofa right here, and I have the logo
right here on top. And if we take you back right
here, what are their needs? Are the cars. So if I take this
lump of Guinea, e.g. that has my car. This is the 3D
render that you're going to be at in
Envato elements. So what I did is fire up the 3D view so you can rotate
this car however you want. So let's say I want to
take it from this angle, and then this angle, and then this angle and then
maybe this angle than this, than this to mimic what we
see right here in real life, what I will do is
select this one, then download this angle
as PNG, which I did. Select this angle
download as PNG, select Download as PNG. And I did this for all of these eight cars that
you can see right here. And I even added, I think some additional
ones like this one which we'll use
in hero section. And let me see. I think that's it. Probably, yeah, because
we have nine right here and then these cars are mockups. And I simply went ahead and
open them up in Photoshop. And I just removed all of
these different sections with the design will go and I simply export to them as PNG. And I did the same for this one. If remember, I think on cars page will have a car looking from the side
of the circle in the background with a top texts, which is kind of like this is. So I just took this image
and I painted all the cars black because of
that luxury team. Then I went ahead
and found all of these premium images
on Envato elements, which they are millions of them. And you can use all sorts
of different images. So here is one for
the car salesmen. Here is one of car salesman showing the car to the
people and here is the one where they are maybe setting up a contract
or something like that. So I use all of these
images into design. And you're going to see
that as we move forward. And I'm going to provide you with all of these images to use. Depending on where you're
watching this website, perhaps it will be as a Dropbox link so you can
download it that way. Or I will put it
in the section of this design section you will have into part where you
can download images, simply click, download them. If you want to use these
images is really important. You have to license them yourself from Envato
elements because all of them are under a license and
you have to pay for that license if you want to use these existing images
on your project, which we're going to show. If you're using them for learning purposes,
it's completely fine. You can simply download them, but you cannot use
them anywhere, not in your portfolio, nuts to showcase on Instagram, not to work with
clients because you are liable for those
images under a lot. So if you don't have a
license for these images, all of these companies which are posting these images
to Envato elements, including Envato
elements themselves can easily sue you because you
don't have a right license. But if you're using them
for learning purposes, just for your own, just on your computer, just to learn, just to
put things right here. Then it's fine to use them
like so because once again, it's extremely difficult
to find images like these. Or if you want, instead of exclusive cars, you can replace these
images with your images of your car or your
neighbor's car, or your car or whatever. And then you can
simply duplicate those images and put them into place instead of
using these images. So as I said, I did that. And then when I go
into Photoshop, what I'm going to do is simply take the images which
are just downloaded, drag and drop them
into Photoshop. And it's going to place them as smart objects into
place by cell. And then let me organize
them a bit various. Let me click. Okay, so number one, number two, number
three, number four. So these are all the positions. And if I bring Control
H Back Control T, so I can resize these
like so no weight. So Control T once again, just with a lift and shift, maybe something like this. There you go. I'm going to hide these. I'm just going to
work with number one now, just like this. So maybe I can position it
just to be in the center, roughly around here, maybe where the wheels are touching,
maybe right there. Then I'm going to do the
same for number two, so where the wheels
are touching and maybe I'll position it
roughly around here. Then for number three,
you get the idea. So you just position it roughly around here
and you want to have the illusion of this being a real car
in a real showroom, like those which are just
showed you right here. But now we're dealing with the Photoshop image
and the render. So how does this look like
when you actually rendered it? It looks something like this. So this is the actual
render that we're going to use in this course.
So here is the one. And then let me click
so I'm able to change them or let me actually
open it up one more time. Let's try it now. I don't know what's
going on right here. So let's cancel this. Let's open it up. Once again. Hopefully this time is
going to work because I'm using all of these
softwares in the background. Sometimes it's going to cause some glitches on my computer. So let me actually go
ahead and close Photoshop real quickly because
you already saw that. And let's try it now. So here is that image. So now when I switch
left and right, you can see 12345678. So we are showing the car from every angle except
in the interior. Because as I mentioned,
it's really difficult to find interiors
online which are good. But this is going to be a
good starting point because I did this if remember
for eight different cars. So if I launch Cadillac
escalate, e.g. and show you that, you
can see it's completely the same in the same interior. Let's launch this Maclaurin e.g. so you can see how it looks
like in this interior. And finally, let me
show it and draw Vogue. There you go. So you can see they are exactly the same
in every interior and all of them are taken from Envato elements from
this collection. And as I said, not to repeat myself too much. You can use these images for learning purposes
in your machine, but you're not allowed to
publish them anywhere else. If you want, you can join in
what two elements and simply download them and to show you
how super simple this is. So let's say I'm going
to open up this one. And I'm going to
scroll a bit down. Perhaps I want to use this car for whatever reason or
this we'll even better. Let's say I choose this render. For it to render. Maybe I want to
rotate it like this. Maybe I want to use
this angle, B and G. Download this angle, and
you can see right here. So exclusive car
showroom website, which is the collection
which already created for discourse. Click here, add it now load and therefore I have a licensed. Now for this angle
of this image. If I change it to an anode, this angle download added to the same collection
at unallowed. Now have a license for this one, and I can use it in unlimited
number of projects. I can create unlimited
number of these collections. I can add these, created
these collections for certain types of
websites or mobile apps, so it can do whatever I want. And one final thing
which I wanted to show you is for these images. So if I take this and maybe
car salesman take this, and this is one image, you can see additional images of this person which free
images cannot give you. Quite simply. You can see more
of similar photos, which is going to
show you photos from this particular photographer
and other photographers. So you can see different
types of a car salesman, different types of car showrooms
and so on and so forth. But if you want
from this person, which is Ross Helen
in this case, click right here,
based in car salesman, typing Enter or Return. And there you go. You have hundreds of
different images from this same car salesman in
the same car showroom, watching cars, exploring
cars, testing cars, selling cars, positioning
different places, all sorts of different things. Because this photographer took these images in
the same lighting, using the same models, using the same showroom,
same condition. So it's going to be much more professional if you
use it from here. Then if you use one
image from here, one image from there, 1 " from this photographer, one neutral in this
photographer n, Of course, you can
filter through all of these different
awesome filters to find your images even
better that way. So that's it for images. Remember, if you want
to use them once again, you have to license them from Envato Elements anywhere
in your portfolio, in your client work, or sharing them on Instagram, on weekends, whatever
you're doing, you have to license
these images. Otherwise you are breaking their laws when you're
risking potential lawsuit. But if you want to
use these images for learning purposes which what
this course is all about, then you can use these
images for free. Simply don't upload your
work anywhere online. In the next section, or
sorry, in the next lesson, we are going to move
into Adobe XD and finally start to design
of this project. So let's get started.
134. Mood Board Creation: So now that we've done
paper wireframes, it's time to move on with
our design into actually start exploring
different images, different style choices,
different approaches. And to best help us do that, we're going to use
some mood boards. You're not going to go
into too many details. Obviously already
created this project. Obviously our imaginary
client knows what they like, but it's just there to get
us in the mood either way. So I'm still going to show you. But before that,
let me take you to our Adobe XD file where I'm going to show
you that I clean up this wireframe
just a little bit. So you can see that I
just went ahead once again and create them still
have some rough edges, but it doesn't matter because this is the wireframe after all. And we just need this to
reference back when we start designing just to
remind ourselves how things worked and how
we imagined that. So once again, don't take this wireframe to be
final design decision. It will be in this case
because as I said, already designed this because
we will sit here for, I don't know, weeks
for me to design this. But when you are creating
your own project, you can always change this. This is just for
some basic ideas. And you will see we
will still change some layouts here and
there in this wireframe, even though I already
created this design before. But it doesn't matter. We will still go
ahead and do that. Let me just move this image because it is an
image right here. Because I'm going to press
a on my keyboard and create something
like 1920 by 1080. Let me call it mood. Mood board. There you go. I already have this logo, which you will get in
this file once again, because as a creative, you are going to get it when you get to the course and when you actually start working with me, position it roughly in the
center, somewhere around here. I think it's going
to work just fine. And as I said,
this is just there to help us navigate
a little bit more. So you will see this
missing fonts gotten black because this logo
has this font inside, but don't worry about it. We're not going to install it
just so we can have a font. So let's create a rectangle and let me actually use a
repeat grid right here. So something like this. And let's expand it
just a little bit. And let's ungroup the grid. And what I can do is maybe
extend this a touch, maybe extend this a touch layout here doesn't really
matter because I just want to be able to drag and drop some
quick images inside. Let me drop a one here as well. Let's enlarge this. Analytics should duplicate
this one and position it roughly around
here. There we go. So now that we have this layout, what I can do actually is
scale it up just a touch. Once again, you can
explore with the colors. Just refer back to this
section about mood boards. I'm not going to bother ourselves too much
because as I said, I already have a
design prepared. I just wanted to
show you how I would go about it if I had to create it from
scratch once again. So what you can do is create these mood boards
however you like. But let's not, as a said, Let's not deal with too
many details unnecessarily. Something like this. I think it's going to work just fine. Let's go ahead and get rid
of the border analysts, give them some a
light gray color just so we can see where we
can place our images. And for images, we can go to Dribbble to
inspire ourselves. Analysts actually do that
before we move on to car, wow, maybe something
like this works fine. Just remember, our
client doesn't really like dark layouts. So they like these
lighter layouts. And perhaps we can use
something like this. Maybe, I don't know, you can scroll
through and browse around and see what works. I don't know, maybe
something like this. These cards look nice. So what we can do in this case is because
I like these cards. What I can do is I have a tool for a screenshot and I'm
going to capture region. And maybe I don't know
roughly around here. It doesn't really matter
because I just wanted to use this image
as an inspiration. We're not necessarily going
to copy anything from this design as you're
going to see when we actually start designing. But let's actually
create another one here. And I'm using something
called green shot. You can use whatever you want. Actually, no, let's,
let's close this. And I'm going to actually
capture this region. Because I think something like this might work a little
bit better for our design. Let's close this. And maybe I like this area
with the text inside. So let's capture in debt. There you go, because
this is kind of a nice, elegant layout. And perhaps this card
with the current side. Once again, you can use
whatever layout you want for your project and whatever
inspires you for this project. So maybe something like
this, saved directly. And let's see, maybe we can use from here and
nothing really. So let's call it a
day with the dribble. And let's capture
discard because they think we are actually going
to use our layout like that. So I can drag it and
saved directly from here. There you go. And what I also like
is discard right here. So you can see how
simple this is. I'm just going around and
capturing what I like. We're not necessarily
going to use all of it. We're just going to
inspire ourselves. As I said, I don't
really like this. I think it's too crowded. So what you can do
is simply scroll find the details that you like. Perhaps these cards, and
they work really nice. So let's capture that. Capture region. There we go. So something
like this because we still want the buttons
to be down there. And maybe these
layouts look great. But I think, I think
that's enough for now. Let's leave the carla
website open l. It's actually started
dragging our images inside. So you can see what
I'm doing right here. I'm just positioning them left, right, and center
wherever I can basically. So let's do something
like this, maybe up here. And then position
this right here. There you go. So maybe I can nudge it right here because
it's a bit wider. For this card, maybe I can
use this layout and I'm interested in this bottom layout with the price and
the buttons maybe. And then let's see, maybe we can position
this to be roughly around here and maybe even
zoom in a little bit. So we can crop in this image, perhaps here,
because once again, I'm interested in the cards, not necessarily the layout
of the dashboard itself. And once again, I'm
just using this for a quick reference. Here we can use
kill this because I bothered with this black
color in the background. Scale this up just a touch. There we go, just so that we
can see a buttons and a car. What I can do right
here is drag this in, which is for my price. And maybe I can nudge
it roughly around here just so that I know
that that's that section. Once again, we can recreate this move it right
here to the side, but I don't really care about
it too much at this point. I just want to inspire
myself with these designs. There we go. So I like
these ones with the cards. And I don't know, maybe once a more maybe we can
go back to car. Well, let's see. Let's go back to the homepage and see
what we have right here. There you go. I like
these sections, so let's highlight them. It's capture region. Derek, go save
directly and let me go back to x D and drag
and drop those inside. There we go. So what I can do
is perhaps I can even scale them because
it's a white background. So let's go ahead and do that. Something like
this. There we go. There you go. That's our mood
board. Once again, you can go ahead and
use whatever you want. You can move about it
in different ways, but I think that's
going to be for now. Once again, this is just
scraps here and there, just there to inspire ourselves. I think this is enough for this project because we
already have our user flow. We have a sitemap and
content architecture. We've already created
our paper wireframes. Now we have our mood boards. We know which colors and styles
our client really likes. So didn't really like once
again, those dark websites. They like lighter
websites and they like websites which have
blue color in them, like carve-outs website,
which is this one right here. They're like these
cards, layout, day like minimal
design and styling. So I think we are good to go. In the next video, we're
going to move on to design. And we're actually
going to start creating some airports and start laying out some
elements like grids. So I'll see you there.
135. Grid, Typography and Colors: Let's now start with the design and first thing we're going to do is move back to Adobe XD
and start with some airports. So here I am in
our file and we're going to do is on zoom a bit, something like this, and
hit a on my keyboard. And let me create an airport. Doesn't really matter which one. So let's go with
1920 by 1080 to go, I can quickly save this design. What I'm going to do is
rename it to homepage. So x D is going to bark
from time to time. So bear with me on this one. So Home page there though. What I'm going to do actually is I'm going to change the size. So here I'm going
to go with 14, 40. And why I'm doing that? Because in Webflow,
that's their natural and a starting point
because in Webflow you are starting from the desktop size
and you're designing down. So you're moving from
desktop to tablet to mobile. Or if you want to create
even larger breakpoints, which are these sizes of
screens are basically, then you will start with this sort of size and
then move up like, I don't know, 1619220003000
and so on and so forth. But in this case, we're
just going to go with 14, 40 because that's what they
are going to give us there. Then we're going to
have 12 column layout. And let's see right
here what we can do is perhaps go with
39 for the width. There we go. And let's go with
6044 column widths. And what I'm aiming
right here is to have one-to-one for my margins
left and right. Let's see. So one to one. Can I do it? No, Let's try it again. One-to-one became a cell so you can see what
I'm actually doing. So I'm just trying to get XD
to work with me right here. So let's go with 39 here. Let's go with 61 here, 64 maybe. So one-to-one. There you go. So 386051 to one. And what I wanted to do
right here is to achieve the same exact layout right here on the
left and right side. So when I draw a box inside
of my columns like this, you can see that it's 11 98, and don't worry about it because XD is a bit buggy
with these layouts. But we will have 12
column layout with the maximum width of 1,200
pixels inside of Webflow. So let's get rid of that one. So let me go back to
my columns and let me lower down the
layout and the ec2, something like five, maybe. Let's see something like that. There you go. So you guys can see what I'm doing a
little bit better. What I'm also going to do is perhaps start with
some topography. So let's go and do that. Let's hit T on our
keyboard typing. Let's see heading, heading one. And I'm going to go with Poppins right here,
which is great. Let's see, maybe I can
go with 64, 64 bolt. I think that will
work quite nice. And let's go with, I don't know, maybe 86
for the line height. There we go. So what I'm doing
right here is I'm trying to determine
my type scale. So usually what works best is to go with
increments of eight. So in this case we have
heading one, which is 64. So let's go ahead
and duplicate that. What will happen now is
heading to heading two, which is going to be 32. Maybe. There you go. I think that will work quite nicely.
And let's see. What we can do next is
maybe we can touch it to 53, something like that. I think that will
work quite nice. Okay. And what do we can do is hit Control D One more time
typing heading three. And for the heading three, what we can do is go with 24. So you can see what
I'm doing here. 24, 30 to 64, maybe you can use 40 somewhere, maybe 48, maybe 56. But basically move into
increments of eight. It's kind of a
nice little trick. So let's go with
40 here as well. And we are 24, 30, 32, we're 64. So this is our heading three. And in Webflow there is
something called textblock. And in general, in web design, That's just some
basic texts that you're going to use
when you start writing. So that's what we're
going to do right here. So let's use text block. There you go. And for the textblock, maybe we can go with something
a little bit different. So let's go with, I don't know, maybe
20. There you go. Instead of bold, Let's
go with regular. I think that works quite nicely. And let's go with control
and D One more time. Let's type in paragraph. For a paragraph, maybe
we can go with 16. And for the 16, let's see, maybe
26 will work here. So 26, there you go. So that's our paragraph. And finally we will have one
more texts called label. Let me show you
where that will go. So if I zoom right
here on this page, so this is the car details page. When you click on
one of these cards, on any one of these pages. So either here or
here, or even here, you will go to this page
and then that label will come right here above the name label will
show the type of car. So if you remember, they are selling SUVs, they're selling these limousines,
they're selling sedans. They're selling super cars. We wouldn't have to basically
break those cars down into three categories just to show what type
of car that is, and that's what we're going
to use the label text for. So if I go back to
my label right here, what are we going
do with label is go even smaller and
we don't have to follow necessarily the
rules of eight right here. So maybe I can go with 12. There you go. We can go with regular
and maybe 19 right here. So let's see. This actually is
the line spacing, which is basically the spacing
between your two lines. So if I copy this text and position it
down and then down, spacing between each
of these is 12. So that's what we're trying
to achieve right here, because we will have to put those values later into Webflow. So it knows when
it starts scaling what to do and where
to go from here. So there we go. We now completed this. What we can do is perhaps
play around with some colors. So let's hide the
layout for now. What I can do is simply
draw a rectangle and let me maybe color it gray, perhaps something like that. So what I would do is use the body color
for the background. So if you remember,
the car, wow, website didn't have the
completely white background, but sort of slight, slight little gray background. What I can do is perhaps
use a color like this. Let me hide myself so you can
see it a little bit better, which is F6, F5, F5. And you can see it's
just slightly off white. And I can add it right
here to my color swatches. Let's move it just a bit down, and let's call it body color. Because in HTML, the
main element that you put your elements into
a page is called body. And that body is
where everything is going to go and that's
what we're going to color. So basically, in design
software like XD or Figma, the color of your art
board or of your frame, is going to be the
color of the body when you actually
move it to HTML, because that's the HTML tag, which is the main tag in development. Don't
worry about it. We will not write any code. I'm just trying to explain to you how to think
about these things when you start
designing and then later moving into development. So this is going to
be our body color. Next up, what we will need is some sort of a
light gray color, solid me, position
this one right here so you can see D2, D2, D2. There we go. And let me add it as a
light gray, like so. And you can see I'm
still using dashes to distinguish whatever I'm
trying to create right here. So let's position it right here. And what we now need is some darker gray color to
distinguish it a bit better. Something like this
works fine usually. So let's add it right here. Let's call it dark gray,
something like that. And finally, what we will
need is we will need to distinguish
between H1 and H2. H1 is usually on the
top of each page. And then as you
go down the page, you will have H2, H3 and
text blocks and paragraphs. And you will have to
tell in your SEO, you will have to explain
that in your structure. So when you start developing
this in Webflow, later, you will have to start
using these names. Because later down the line, when Google indexes your site, it needs to understand
what sort of texts it is, where it is located on the page, and how important it is. And it knows how important it
is because you told it to, because you use these H1, H2, H3 P is for the paragraph text block
and so on and so forth. You will see that in Webflow. But I'm just trying to
explain this to you here. While, while we are in XD, when you start designing, you have to think about
these things all the time. So let's now move
on to that color, as I said, for the
H2, maybe even h3. So let's copy that color and I will get to it in just a
second how I got these colors. So let me add it right here. So let's go with H3
and maybe paragraph. Because we still need
those paragraphs to be readable because
they are quite small. You can see them right here. So let's go ahead and add it. So this one is going to have dark heading color
because it's an H1. Let's see. H two, maybe we can
use, Let's see. So 2122 to four. What was that? So maybe we can use
the same color. So this one for dark heading
and for the age three, maybe we can change it
around to something like maybe dark gray resulting. Let's see. So H three, let me change
it to this color which is, I think dark gray. Now. This one. Is it? No. Yeah, let's use
it for like this. So this is going to be our
h3 color for our textblock. Let's see what we can do. We can use this one. So dark gray for the paragraph. We already explained
that we are going to use this one just to differentiate
it a little bit. And for the label, what we can use is
me with this light gray or even body color. Let me check in my
original design what I used to D to E, three zeros. Let me see which color is dead. So it's this one. So because they'll labeled
text is too small, I still use this one. And now that we have done what we can do is go
ahead and add them. So I'll select my label. And let's see, click
to Character Styles. I'll call this label. Then I'll go to paragraph,
type in paragraph. Then move to text block. There you go. And this is going
to be our h3h3. This is going to be our H2. And finally, this is
going to be our H1. There you go. Now that we have all of that, let me quickly walk you through how I got
to these colors. So usually whenever
I'm designing, whatever I'm designing,
I always try to have multiple shades of gray. Darkest gray colors
are usually for biggest topography on the page. So for H1 or H2, then you can go a little bit
lighter in that darkness. Never used complete the
black color because it's really difficult to
read for some people. So you can always notch
it up like a shade of two off completely black
color into gray colors. And then I always like to
create a complete opposite. Colors, alike, let's
say really light gray. So just slightly
off white always. You can use white always, but just try to make sure that
you have off-white color. Like in this case, we
have this body color which we'll go into use
for our body later. But that's the whole point right here in terms of a blue color. But you can see right
here is we just use that color that we
found on their website. Tweak it up just to
touch so it's not completely the same because you never want to use exactly
the same color as somebody else or just
slightly bit of that color, then we have hover color, which is the same as this color, so just blue but in a
different perspective. And in terms of
sizes for the fonts. As I said, I like to use that eight pixel scale
for my typography. So you can start with eight, which is usually quite small but good enough for, let's
say mobile apps. Then you can go with 16, 24, 30 to 40, 48, 56, whatever. So you can go all the
way down to Latino 90 or whatever type of
size you want to do. But in our case, 64 is where
we're going to stop for H1. And that's basically
our type scale. So what I'm going to do now is go ahead and get rid of them. Because once again, this is our homepage and we will
treat it like that. So let's get back to our grid. And in these cases, let me go back to my columns and let's lower it
down this to zero. For the opacity. Let's lower this down to zero, or maybe 2%, just so that we can see what we
are doing right here. So let's go back to here to 2%, and let's go back to here
as well to present just so it's not distracting us
when we start designing. And we're actually
going to use these. And finally, for the
end of this video, let me extend this down because that's what we're going
to use in the next video. We're going to finally
tackle this homepage. And I'm actually going
to start laying down some elements and show you how I created my original design. So let's get started.
136. Home Page Design: Let's pick up where
we left off in the previous video
and let's start working on our homepage. So here I'm going to paste in
my logo right around here. And let me position it just
so it lines up right here. Then I'm going to use my
rectangle tool shortcut is r, and I'm going to give
it a height of 80, e.g. because you always want to
give heights to your elements because it's going
to be much easier to define them later in Webflow. Position it here and let
me get rid of the border. And this is going to
be my Nav and B G, and you have to
name your layers. It's super important. Let's hit Control K to turn
this logo into a component. And you can see we can
use it directly here. And in terms of
naming conventions, you have to name your layers later because later in Webflow, it's going to be super-important because we're going to
use all these classes. So if you don't
name your layers, your designs are
going to fall apart. So start naming your layers
as soon as possible. You're going to make your life easier when you get
to Webflow later. So let's type in
debt and navigation. So let's use cars. And for that, what
we can use maybe is, let's see, maybe textblock. Yup, that works quite fine. And if you remember from here we have cars alone is contact us. So just three of them. So what we can do is put that into a group and call
it nav items, like so. And let's see, maybe
the distance between all of these elements can be 24. So let's turn stack on and let's duplicate
it two more times. Let's go back and
turn to 24, like so. And we'll give this a loans and give this name of
cars. Sorry, No, No. Contact Us. There you go. And finally, let
me move them right here and position them in
the center of this element. There you go. And for the homepage, Let's go ahead and switch
that color to body color. And you can see straight
away what happened. So for here, let's go with the body color as
well. There you go. So it looks kind of transparent. So what we're going
to do is turn each of these into its own components. So hit Control K,
Control K, Control K. This one is going to be cars. This one is going to be loans, and this one is going
to be Contact Us. There you go. And why I'm doing this simply because I want to
create horror states. So to do that, click right
here to create a flower. Harvard. There you
go. For the hover. All I want to do is simply
turn this into a hover color. There you go. Because if you remember, this is our hover color. So everything should be in the
hover color once on hover. So this one, let's turn
this into a horror state. Let's change the color. Let's give this
horror state as well. Let's change the color. Let's bring this back. Let's bring this back, and let's bring this
back to default, state control, enter to preview, and you can see how
this looks like. So we are starting to get the layout and the idea
that we want to create. And I think this is going
to work just nicely. So let's now move
on and group these. So we have the logo
nav items and f, b, g. So let's Control G to group this into a group, call it nav. There you go. And because we will reuse this navigation
throughout our design, and now since we already
have these items, what actually want
to do is to select my elements once again
and add a new state, which is going to be selected. State. Actually copy this text so I don't have to write once again. So selected state and deselect the state will show us
that we are on that page. So let's use main blue for
that main blue and main loop. So what will happen is when user clicks and visits that page, and while they are on that page, you will see that visited color. So let's hit Control K to turn our navigation into a component, as I said, because we will
start using it later. Then let's use T
for our text tool. And right here type your partner for your partner,
for exclusive cars. And this texts will be H1. Let's break it down into two
lines, something like this. Let's nudge it down to here. Control D to duplicate this, let me actually select the text from my
original InDesign. And let's turn this into textblock and paste
my text M. So certified used cars
with low mileage and documented history is what we spoke about with our clients. And they're giving you a
low mileage cars because they are taking them from these official
dealerships in Germany. And documented history because obviously cars are taken
directly from dealers, so it's much simpler to
track them that way. So what you do is duplicate
this one once again. And I'm going to use something
like explore our cars. And this is going to be
the text for our button. And in terms of the button, let's go ahead and use
something like this. Maybe right-click send to back and bring this
scene right here. I'm going to center
it right here. You can see it. So
let's center it here. And let's, let's give it a main blue color and
get rid of the border. Select my text and
turn it white. And for this, what we can do is maybe use eight for the
corner radius right here. Something like this so that we can get that rounded
look and feel. So let's see, maybe I can nudge
it just slightly to hear. Position this into center. And once again give them names. So this is going
to be our BTN BG, so button background, and
this is going to be our text. So let's give this a
name of main, btn. So main button. And I'm going to
straightaway turn that into a component by
hitting Control key. Click Plus and hover,
call it hover. Inside of our Horace state. All I want to do is change
this to a hover color. So close this, go back to the
default state, hit preview. And when I preview, you can
see how this looks like. So now we have hover on
our navigational items, and we also have
hover on our button, which is working quite nicely. What I want to do is to get
some spacing right here. So let's turn this, move them to the left and
group them and call it e.g. hero. Content. Like this, bring this into a stack and give it
a distance of 32. So stacks are useful, as you can see right
here. For you too. Give a quick spacing to organize your content
a little bit better, and generally to improve your speed when you
start working with that. So let's see what we
can do right here. Maybe I can use the image. So let me, let me
see what I can do. I have my hero image
prepared right here, which is once again
from Envato elements. Let me use it
roughly around here. Maybe. Something like this is going to work quite
nicely. I think. What I need in this case is to use some sort of a circle for it to come out
of the circle. Because if you
remember from here, we will have these
two circles around. And maybe it will look
nicely if the car is coming from this circle of some sort
or something, got to know. So let me actually do
that really quickly. So what I can do in this case is use my circle,
something like this. And let's give it some rough
dimensions like 38 by 388. So it's going to be a circle. Position it here, then a
nudge it to the background, Send to Back and position my
car or roughly around here. This is going to be, let's see what we can call it. Maybe hero image circle,
something like that. And bring our hero image
back a little bit. Control a D, we're going to call this mosque hero image mask. Position it on top and then
simply hit Shift Control, Shift Command M.
We're going to call this Hero IMG, so hero image. And let me extend this
mask to this site, or perhaps even to this
side, something like this. He's going to work quite nicely. All I want to do is just
have my circle in view. Maybe I can enlarge
it to this side. Let's see what we can do here. So something like this I think
is going to work nicely. And there you go. So maybe like this, you can also use a rectangle. You can do whatever
you want. But in this case I'm just
going to use my circle. No, even better, let's
use a rectangle. So non-group mask. Let's get rid of this one. And let's use a rectangle
because we have a grid. And it's going to make a little bit more sense
for us to actually use the rectangle in
this case like that. And let's call it mask
and Shift Control. Shift Command M, and
let's call it hero image. And I think we're good there. All I want to do is simply
select my background circle, get rid of my border. So it looks kind of like this. And I'm really happy with
how that looks like. So let's just see. We are there in the center, may be roughly around
here on the edges. And perhaps move our circle in just a tad so it's not
cut off by the mask. And there we go. Now that we have in debt. Maybe we can even
Center our mask, just tiny bidding to
roughly around here. And these are important because you will want
your measurements later to be exact and precise when you actually
move into Webflow. So position this in and nudge all of my content
down a little bit. And what I'm going to
do in this case is, let's see, I want
to use a circle. So let's go with a circle
here because I will position that like we
created it right here. So you can see we will have
two icons and two circles. So for this top
one, let's call it, Let's see top hero circle. Top hero icon circle or
something like that. And for the color, we
can use our main blue. And I have my icon right here. Once again, you will get all of these icons already prepared. And I will show them at the end of the design part of the class. You can just use them. Perhaps I can create
a style guide right here so you can just
copy and paste all of these icons which
I'm using right now, and just use them
to follow along. So now that we positioned
this, Let's go pits, Let's call it top hero, circle. Like that. And maybe we can
nudge it roughly around here. Let's duplicate it. Move it perhaps right here, maybe just slightly reduce the size to something like this. So this is going
to be our bottom. Bottom here, a circle, and bottom here, a circle. There you go. And for this, let me just use another icon, which is going to
be in this one. Now let's nudge it right here. And I'm just using a key icon
to sort of show a car key. You're going to get your
car, something like that. And here we are using the
batch for the warranty. So let's turn this
into a component, and let's turn this into
a components as well. So it's going to be much easier later down the line for me to create those style guides and for you guys to
use them in this file. So for this one, what I can do is I can
even nudge it to here or maybe I can nudge it to
maybe 20, something like that. Yeah, let's leave it there. And let's use some
dark gray color, maybe something like this. And I think that
works quite nice. So finally what I can do is group all of
these and call it hero image, something like that. And position these two
are roughly around here. So what we will do is maybe
move this content down, let's say 100 pixels from here, which I think will
work quite nicely. There we go. And now let's actually group
these and call this Hero. There you go. Let's do another one. Before we move on to a little
bit of a break, Let's create that next section, which is going to be who we are. And we will have one
image on the side. We will have lines of text
and who we are at the top. So because we used
H1 right here, it will only be
natural for us to use H2 right here at the bottom. So first things first,
let's start with our image. So what I'm going
to do is create a quick rectangle,
something like this. And let's see, maybe we can
use 246 columns like this. And for the dimensions, Let's go with, I don't know, maybe five,
three-three in height. And let's see, maybe you
can spice it up even a little bit so you can open
up this panel right here. And this is going to
give you a corner radius for each and individual corner. What I'm going to do is round
up just this corner right here to maybe 24 pixels,
something like that. Get rid of the border
because I don't need it. And let's give it a name. May be who we are, who we are or
something like that. Let me take the image
for who we are. There we go. So it's that guy from Envato
elements, if you remember. And maybe we can scale
him up just a touch, position them in the center, maybe roughly around here. Maybe tad more. And I like how that looks
like. I think it's fine. And now let's go ahead and
add that text on the side. So as I said, we're going
to use the age three. So let's type in a
spider exclusive cars, sort of H2. There you go. And let's align
it for this case. Now let's position it
maybe around here, Control D. And what
I can do there is perhaps create some sort of a tagline or
something like that. So let's use textblock for it. And let's paste in some texts
of passion and dedication. You can use something like
that or something differently. Just to give your paragraphs
a little bit more life, a little bit more meaning, a little bit more style. So you're not just using some blank texts that
you find online. This last one as you saw, I turned it into
a paragraph like that and I'm going to
paste in a paragraph. So it's just about them
when they started, when they created
their business, how many customers they had. Maybe some important facts and figures like in
how many locations they are dealing with and maybe where the
headquarters are located, how many employees do they have? So stuff like that. It's going to work quite
nicely in About Us section. Finally, let's position this where they should be,
they should be on top. This should be right
here. Let's group them. So Control or Command G,
positioning right here. And let's call it
something like let's see, textContent are just text. And let's give it a
stack of 24, like that. And let's group these two. But before that, just
position this in the center. I think it will work quite
nicely. So let's see. Yeah. And group these
Control G and type in something like who we are. There we go. Before we move on any further, what I can do is simply move it because we had 100 right here. I want to keep the
consistent spacing throughout my design
and Webflow build. So we'll go with,
let's say 101, 50, or 200, depending of the
section in question. So here what we can do
is we have one-twenty, maybe we can nudge it
down all the way to 200 because I think we have
enough space. There you go. If I hit Control
or Command Enter to go into the preview mode, we have our button which
is working quite nicely. Then we have cars,
loans contact us. We have our nice
hero section with this image sort of
coming from this circle. And if you had some
additional colors, like maybe accent colors, you can turn a circle into that accent color to give
it a little bit more life. Then we have this section, perhaps this is Marco, our key Chairman
inside of the company. Maybe he is the one who
is going to be able to help us out with
buying a car or whatever. And then we have some
blurb about the company. So in the next section we're
going to move on to this, which are cards for our cars. And it's going to be
quite important section because as you can see, these carts are going to
repeat throughout our design. I'll see you in the next video when we are going to
create just that.
137. Home Page Design Part 2: Let's now continue
where we left off and create those cards sections. So what I can do is perhaps use another age three and pasting some are
exclusive selection, maybe make sure it's in
the center, like so. And maybe I can nudge it 200 away from this section as
well, something like this. So you can see that we
are positioning it there. Then what I can do is perhaps use my grid to create
my three cards. So let's first create one, and then we'll go ahead
and create other ones. So first things
first for our card, what we will use is, let's see. Maybe we can give it
a name straightaway and call it maybe stock. Item B, G, or you can give it a name of
car item BG or whatever. But because this is their stock and what they have in stock, we will use just that. So what do we can do
now is let's see, maybe I can use a border color
right here straightaway. So 2D, maybe this one here,
applied border color. We're just going to use one. So slight border color
because we will use it for hover effect a bit later. So what I can do right here is perhaps extend this. Let's see. Maybe I can even
round the corners to eight to have that
consistent look and feel. And first things first I'm going to get rid of the
border right here, but I'll just lower down
the opacity, like so. And then what I can do is hit Control D and use
this as my image. So let's see. Maybe I can call it
occurred because that's going to be the name
of our car or car image. There you go. Let's see. First of all, for the card size, maybe you can go with height of 450 or something like that. So let's go with for
50 in this case. And for my car image, I can go with something
like, let's see 250. So that's my card image. But for the height,
there you go. I'm just going to
go ahead and get rid of some of these rounded
corners on the bottom. So if you hover, this is going to be
top-left, top-right, bottom-right we don t want, and bottom left we
don't want as well. So what I can do is jump
straight away and add my image. So let me go to
Lamborghini hurricane. And once again, you can
see how these look like. And I'm going to add the
number three for all of these because it just shows
the car in three-quarters. So it gives enough details
so that you know what it is. So just drag and drop
it inside their ego. And what it can do right here is start with some information. So what I'm going to do here is type pain alarm or
Heaney who recur? But instead of 32, let's go with something
smaller, like 24. There you go, make sure
it's left aligned. Lovely physician at
roughly around here. And let's see for the spacing, what we can do is maybe we
can go with 24 all around. So 12, 123-412-1234.
And there you go. That's going to be our spacing. And then maybe I can duplicate
this once again control D. And let's see where I can
go maybe with 16 this time. So 20123416, This is
going to be our price. So let me take the price from our original design and let's go ahead and turn it to blue. And finally, we will give some
information at the bottom. And we will use that
information to basically tell to our audience what
year the car is, what sort of mileage does the car have or
something like that? Just some glanceable
information before they move on to the
main information. So let's duplicate
this and let's give it the textblock and
let's give it 2021, maybe the age of the color. And let's position this
into a group control G, as you can see right here. And maybe we can call
this something like year, kilometres. You can see. And let's give it a stack and
duplicate our text layer. And let's position
this to be 24. And this can be how many
kilometers does the car have? You can use mileage. I'm using kilometers because
it's easier for me. But whatever works for you, you can do it as well. So let's nudge this
just below our image. Let's see here what we have. We have 16, here we have 16, 24. So it's only natural for us to go 24 from the bottom, I think. So. Let's imagine this
to 2042 more pixels. Let's zoom in just a touch and you can see why
this is useful. Now that we have our layout, what I can do is group these elements and call
it car card, text. Then group all of it
and call it maybe car card or something like that. And let's duplicate it. Control D. And Control D. Let me quickly exchange
some of these elements. So here I will have
my Cadillac escalate. And then here I'll
have my price. The year will be 2020. And the kilometers will be something like
something like this. There Go, works fine. And then let's go with something
a little bit different. This time the car is going
to be electric solicitor. And let's go with mileage. Kilometers. Year is
going to be 2020. 2 km will have this to be
6,000 and maybe to 40. So all of them have a low mileage and
let's nudge them down. This is going to be in
the center. There we go. And let's see, maybe we can use some spacing straightaway. So instead of 113, maybe we can go with something
nice and round like 64. So once again, we're sticking
with that eight spacing. I think that works quite nice. And what I'm going to
do in this case is maybe hit and say
one of these cards. I don't know. Let me use it. So
hit Control C or Control D and just
nudge it right here. So let me select this image
and use light gray like that. And let me select it here. Car card works quite nicely. Let's just leave it there because I'm going to
give these cards names. So this is going
to be hurrah car. This can be escalate. See if it has the year, and this can be lucid, just so that I know
what everything is. And in terms of images, Let's go back and simply find Cadillac Escalade
number three. And let's go back to Lucy there. Number three, drag and drop. And once again, you will get these images so you can play
around with them as well. So now let's turn
them into components. This hover effect will not
work quite nicely right here, I think, because we have one pixel border and it's just going to be
covered by the image. So what I can do in this
case is just lowered down a width of the
image to maybe 372. So just two pixels on each
side and position its center. Do the same here. So 372, because I'm just thinking about how to do this
later in Webflow. And I think that this sort of approach
will work quite nicely because on the default
state you will just have without any borders. And on the hover state we
will have a one pixel border, C37 to just make sure that
this is in the center. And once again, this
is our default state. So select the hurricane control, K escalate Control K
Lucid Air Control key. And now let's bring
them to hover. Select this text and
select the horror state. There you go. Select the
ferrous state, lovely. And instead of the horror state, select the background and bring the border opacity to 100. Do the same for this one. And do the same for this one. There you go. Close all of your components, go back to the default state. And we should be good
to go here, I think. Yep. So let's get a quick preview just
to see what we've got. So we still have all of these elements that we designed
in the previous video, but now we have this card. So when I hover, you can
see how it looks like. It just has this nice little
hover effect on our borders. And I think it just adds to that usability a little
bit because you are showing to users
that they actually hovered and they can actually
do something about it. What are we going do next
is use our main button. Simply drag and drop it inside. I'm going to add the sort of
edit the main components. I don't know why it's
switched right here, so let's get rid of that one. Alice just added this one first. So what I'm going
to do is perhaps, let's see, I can turn on
a stack on my button, which is going to
turn on the pairing. And I'm going to get
rid of the stack because it's going to
still keep our padding. And now I can go ahead and drag my main button and
drag it to here, position it in the center. And you can see that now we have this pencil and this
diamond which indicates that this is child component
of this master components. So in simple terms, whatever the changes
we make here, it's going to translate to here. But whatever changes we
make here is not going to translate to here because
this is the original one. So in this case, what I want to do is
change the text to see all cars and you can see
how the button response. Select the text, switch to hover state to change
it here as well. There you go. Because we have two states. Remember if you have more,
you will have to change more. So here when I hover, it will say explore our cars. But here when I
hover, it will say, See all cars and the size
is going to change. So. What I can do is
perhaps nudge it to be at 64 as well,
something like that. Make sure it's in the center. There you go. And we're going to call this section exclusive
selection or our selection. There we go. Nice. And the next is going
to be what we offer. If I take you back to here, Let's see where we
are with the time. So what we offer, that's what we're
going to design a now and then make a little
bit of a break. So here I'm going to
type in what we offer. And for that, Let's see, Let's use H3 once again. So h three, we are
in the H2, sorry, we are in a center
position, its center, and let's give it the
distance of 200 once again. So let's see 213. So mu once more. Let's see 200. Their ego and a den. What we can do is simply use
another one of those images. So let me just create
that really quickly. And maybe we can use just the other rounded corner
like we did previously. So let's see 246, maybe seven columns now,
something like that. So 2467, terms of height, Let's go with five or seven. And in terms of
coordinate radius, let's go with the radius on
bottom left corner of 24. Get rid of the border and let me drag and drop my image inside, which is going to be in
this one for what we offer. There you go. I can go ahead and double-click and maybe
enlarge it a little bit. But I don't think it's necessary because it's showing the key. And I'm going to move these two sections
down a little bit. Once again, we are
200 from here. And here we're going to actually start using some elements. So let's see. Maybe I can use that
badge once again. So warranty badge like that. And maybe I can color it blue. And maybe I can give it
some different dimensions. So let's see, maybe the right is actually
going to be good. What I'm going to
type in right here is extended warranty because
that's what they are offering. And we're going to use
maybe H3 for this one. Because I think it's going to work much better
than the A12. Let's see for the distance
maybe we can position it. First of all, select these to make sure they
are in the center and nudge this to be maybe 16, something like this
so we can keep our spacing and let's
organize them a bit better. So I'm going to do is nudge it all the way down
just to here Control G. And I've been warrant
to turn this into a stack. And perhaps what we can do
below is maybe use text. So type in T, and let's select this
and paste it in. And what I'm going to do is
turn this into a text block. Make sure it's from the side, from the left side. Here for the distance
between a dam, we're going to go with s104. So you can see that we're still
keeping that consistency, so something like that. And let's nudge it this
and just a bit and down. So we're going to call a
disk warranty once again. So we can give this, see how we can structure this. We can call this warranty
icon or something. Let's see icon or title. Now let's just give it 1.2. And then just group these two and call them warranty as well. It's just going to be super
simple for us to do that. And we're going to worry about naming a little bit
later in Webflow. So what I'm going
to do with these is perhaps structure
them in such a way that maybe we have 40 distance between them,
something like this. So this is going to
be all the way down. This is going to be all
the way at the top. This next one we will
call maintenance. And last one we'll call loans. And for the maintenance, let me use the maintenance
icon for my original design. I'll jump in right here
and position it here. Make sure I'm in the center of my design because it's a stack. Just hit delete and it's going to position it back into place. And as you can see,
we are still in the center with
these two elements. So if I go ahead
and select them, click right here. There you go. So let me actually copy
the maintenance text. There you go. We're just going to let's see. Nudge this to here. Lovely, because we didn't turn this from the center
line to left aligned. Let's do that. Let's
do this for here. Let's do this for here. Let's see here we are, here we are, and
who we are as well. So unlawfully, Let's copy the maintenance texts
and let's copy. So let's see, this is going
to be maintenance as well. There you go. And this is going to
be loans as well. So let's type in alarms. And in terms of the icon, I'm going to copy the icon as well and do the same thing
that I did previously. So jumping inside of here, Control or Command V
makes sure it's in the center mixture is just
before loans hit this batch, remove it, and there you go. Now we have these two in the position that we
wanted them to be. So let me copy the loans text. There you go. And this section basically just shows to the users what
they actually offer. They offer extended warranty. So you have that
additional piece of mind. They offer maintenance
in accordance with their partners
because they don't provide the maintenance
themselves. And finally, they provide loans once again
through their partners so you can partner with
them about those alone. So once again, finally, we have 40 spacing
between all of our items. And let's see, maybe we can call this group control
G and call it, let's say offer info. And make sure these two
are in the center and we are 64 from here. Something like that. I think it's going
to work just fine. And what we can do
is group these and call it of what we offer. Our offer even better. There you go. If we hit a quick preview, what we did so far, we have explored our cars. We have these three,
we have this hero, we have in this About section, we have these cards
with hover effects. We have our new button with our effect as well,
what we offer. So we have all of
these elements inside. And now let's see what's next. The next is benefits, then contact us where we are. And finally, the footer
will be down there. Once again, a design is
going to move on much more quickly because we will create
contact us where we are, footer and hero section, sort of nav section, sorry. And we will just copy and paste them throughout
our designs. So just this first one when we actually start breaking them down and positioning
these elements on the page is going to be much, much simpler later when we actually move on
and create that. So that's it for this one. And let me see you in the next video where
we're going to continue.
138. Home Page Design Part 3: Let's now move on
to the next section which is going to
be about benefits. So what I'm going to do is
select this text control C, position it outside Control
V and typing our benefits. Like so, make sure it's in the center and nudge
it all the way down. Then what I'm going to do is
use a quick rectangle tool to create on sort of a
breaking section here. And let me give it
a height of maybe, let's see 469, I think. Let's see 200 here. So same like all of
these other ones. And let's give it some name, like benefits section BGN. What I'm going to
do in this case is given this dark color and turn this text into pure white texts and nudge
it roughly around here. So now that we've done that, what I'm going to do is use some image which I find on
Envato elements as well. And I'm going to leave it
in a collection as well. Position it roughly around
here so that we see this tail light,
something like that. And let's see In
terms of and obesity, maybe I can hit one
on my keyboard, but not on everything, just on this image. Oops, sorry. Let's
do that again. So do this, but instead of BG, Let's call it
benefits IMG image. And then inside of that one, Let's drag and drop that image. Double-click
positioned by holding Shift and left mouse click. And then once you're done, hit one on your keyboard
to lower it down to one to ten per cent opacity. And if we nudge
this browser here, you can see how that looks like. So we have this nice
ghosting effect. And that's going to be maybe one of the darkest parts of
our website or role. Because if you remember,
our clients told us they don't really like
these dark layouts. So here what we will do
is maybe instead of 32, maybe we can use H3 and
use whites once again. And let's type in free delivery. There you go. And with this, Let's hit Control
D to duplicate it. And here maybe we can
use the paragraph text. So paragraph, and let's go
with body color this time, instead of pure white. There you go. And type pin this text. And in terms of the spacing, maybe we can go with 24. So let's go 123424 and make
sure we are in the center. And I'm just simply going to copy the icon which
I was using here. And position it roughly around. Here. There we go. And this
can be 24 as well. For the nice and even spacing. This is going to
be free delivery icon and I'm going to hit Control K to turn
it into components, free delivery and nationwide
where it is. There we go. So we will have
these three loops. So free delivery, free delivery, nation-wide Control,
G, to group it. And we'll call this free
delivery like this. And to make sure we
are positioned evenly, what I'm going to do for spacing is drag a rectangle around
these four columns. Then select my content
and click right here to make sure
that it's centered. Now that I've done that, what I can do is control
D and simply hit this into Center Control D and
simply position this to here. Use my rectangle
trick once again. But before I do, because we're going to change
the text here. So let's first do that. Like so. And this is going to
be part exchange. And let's call it farm exchange. And now that we've done that, we can position
it evenly because the paragraph texts is the
widest part of the section. For the part exchange, let me use the icon from the original design of
zoom in just a touch. Position this here. And let's nudge
in this two here. All the way down. There you go. Hit Control K to turn that into a component. And now in the center, what we'll have is going
to say three-stage polish. So you're going to
be safe when you get the chorus from
distiller because they're going to polish
your car and it will not basically allow
it to get dirty or to be for its paint to be contaminated
or something like that. So in this case, let's
position this here. Let's nudge it to here. There you go. Get rid of this. Hit Control K on this. Make sure all of
them are centered. Like so. Then makes sure that
text is centered. These two already are
because we already did that. And as you can see, in just
a few steps, we got these. Now in terms of these icons, where I got them from is obviously you are going to get
them inside of the design, as I said, but I got
them from icon scouts. And what I did right here
is I created my collection. And you can see all of
these different icons which we're going to use
throughout our design. And to use one of these,
it's quite simple. Click is going to
copy it and then you can paste it basically wherever
you want in your design. You can scale it, you can
change it to whatever he wants. So it's super simple to do. What I'm going to
recommend to you is to go to your plugins, which is this area right here. Click on the Plus,
locate the icon scout, and then simply go to their website if you want
to create this collection. Or when you download something, you can go to my downloads and you can locate your
downloads later on the website and then
click at the heart icon there to give them
to my collections. And then you can position
them all in your collections. So that's how super
simple it is to use these icons and that's where I found all of these awesome icon. So I could have used
the Envato elements, but I didn't want
to, for the icons, I purposely want to
use the icon Scott, just to show you how
easy it is to use n, that you can find all of
these great icons there. So let's go here with
three-stage Polish. Let's see. And let's see what we can do. Our benefits position
them on top. Let's see from here to here, maybe we can give
this to 64, like so. And then select
all of our content and nudge it to
center like this. There we go. And I can group all
of it and call it benefits are benefits like that. And now let's move on
straight to our contact form. If I take you back to
here, if you remember, we have Contact Us and then what we'll do is perhaps have, let's see how many fields, where we can have
five fields in total. So perhaps this one can spend right here
and give it a name. Then we can have two of these
for email, phone number, and then one for the message, and finally a button for sand message or
something like that. So let's do just that. So first of all, let's select this one and paste
it right here, and nudge it right here, position it here, and make
sure that we are 200. I just love how
XD just gives you these positioning
options straightaway. So it's quite simple to do. And for our fields, what we will do is quite simply
use a rectangle like so. And let's call this
input field like that. And for the input
fields themselves, what do we can do is perhaps
to see use a white color, which I think it's
already using. Yeah. So white color. And let's see for dementias
where we can go with 60, I think it's going to
work quite nicely. Get rid of the border
and no radius. So let's just go with
square ones and let's hit T and type in
e.g. full name. Full name. And for that text
will use textblock. Make sure it's right here. And in terms of spacing, maybe we can go with 16. I think it's going to
work quite nicely. So something like this Control D to position it
roughly around here. And then let's see maybe for that text we can go
with paragraph texts. There you go. And enter your full name. And make sure we are
left aligned here. We are left lung here. And from here what we can do
is positioned in the center. And then for distance
we can go with 16. So let's go with shift 121234. So if I hold my Alt or
Option key on each side, you can see the distances. So if I hover here,
you can see we are 17 from top and bottom, and here we are 16
from this side. So what I can do right here
is selected this and this, and let's see, maybe
I can call it inputs. Let's see control G to group
them, call them inputs. And then move the full
name just below here. And this can be
named, maybe name. There you go. What I can do is hit Control D
to duplicate it. And let's see for the
positioning maybe I can have 32 distance here. So something like this. Instead of fullName, what
we have here is e-mail. And here I will type
enter your email. So we already have the
content, we have structure, we have everything, but we will just rename these elements. So this is going to be email. And in terms of width is
not going to be full width. It's going to be six
columns wide because remember we have 12
columns full width. So 123456, there you go. So that's our email. And what I can do in this case
is put these two in group. Maybe just show you a little bit how responsive design
is going to work later. So this can be email
and phone, like so. And let's duplicate this one. Control D and position it here. So it touches the edge. There we go. And this can be phone. Select type in phone, books. And instead of enter your email, maybe enter your phone
number like that. And finally, what we need
is we need a bigger one. So I'm going to use
this one position at 30 to move it down. This is going to be message. And let's give it
something like a message. And type. Write your message here. Something like that. In terms of the height, it's going to be a little
bit taller than these two, just because we want to
give enough space for our users to write a
message that they want. So let's give it
something like 171. I think it's going
to be quite good. Finally, let's go ahead and add our component
for the main button. Drag and drop it inside, make sure we are 32. There we go. And here once again we have
that whole black diamond, which means that we are
on a child components. And here we will
write Send, message. There you go. Position it here. You can see we don't have a
fixed size for the button. That's what I wanted actually. So let's go to our horror state. Drag and drop dead
inside default state. There you go. So 32. And now I think everything
is positioned nicely. And let's group all of them by hitting
Control or Command G. Let's call it contacts
or just form, because that's how it's
called in Webflow as well. Finally, for the distancing, what we can do is go with 64 because that's what we use
throughout our desire. Like so. There you go. So now that
we have our form, Let's, instead of what we offer, let's type in Contact Us. This section is completed. Let's group it, call it forum. And straightaway hit Control
K to turn it into component. Because remember,
we are going to use it throughout our design, including with this next section called where we are
and the footer. And that's what we're going
to tackle next because we are already 13 min
into this video. So let's hit pause right
here and let me see you in the next video
where we're going to create those two sections.
139. Home Page Design Part 4: Let's now continue with
this next section, which is going to
be for the map. And first things
first, let me draw a quick rectangle right
here, something like this. Let's see, 246, maybe seven. So something like this, 2467. There you go. In terms of the height, maybe we can go
with five or seven. Let me get rid of the border
color to map like that. And let me draw a
quick map inside, which is the map of the
location which I've chosen. And of course you
can go ahead and choose a different location. You can do whatever
you want here. But I'm just going
to use this one. Now in terms of the text inside, what I'm going to
do is use this one. So Control C, Control V, and simply position it here, make sure it's left
aligned like this, and move it all the
way down to here. And here I'm going to
type in where we are. Control D. And this one is
going to be in down. And it's also going to be a textblock because
we want to give them a little bit more
information here about where we are and what
they can expect. So what I did is
visit our showroom to bring your car for a
free valuation offer. So if they want to do that part exchange
between mentioned, then they can do
that right here. Let's paste that to 24. Position it roughly around here. There you go. And now let me perhaps duplicate this text position down
here I'm going to use, Let's see, paragraph
and keywords address. That's going to be
our first section. And nudge it right here. Let me select my icon and
paste it in right here. And straightaway before
moving any further, let me select it, hit Control K to turn it into a component. And let's nudge this
to be, let's say 16. Yeah, I think that will
work quite nicely. There you go. Make sure to group these, makes sure to put stack on and make sure to give it
a name of address. Something like that. Let's see, That's fine. Move this down to here. And from here what we
can do is instead of 24, we can go one further
and go with 32. And the address we will
use this text once again. So Control C, Control V, position it here, make
sure it's left aligned. It is just below our address. And let me double-click and
copy and paste the address. Of course you can use yours. This is imagining a trust for the purposes of this
course obviously, but you can use
whatever you want. So here I'm going to go with 16, and let's go with the address. Now in this case, I'm going to turn on the stack, which is going to be vertical
and is going to be 16. So it's going to be much more easy for me to
adjust all of these. Then let's go with
Control D here to 24, control the width 24. And this is going to
be all the way down. This is going to
be in the center. This last one is going
to be opening hours. And this second one
is going to be found. Now for this, let me copy the content from the original
design really quickly. We can move on a little bit
faster and there you go. Phone number, just some random phone number
you can choose. Once again, whatever it suits
you, then opening hours. Okay, and finally,
let's go and show that because you want your users
to know when are you open, reopen on holidays or you open on Saturday or you
open on Sunday. Do you maybe work in different
time zone or whatever. So you always have
to tell them that and give them this
valuable information. So get rid of this one, Control K to turn this
into a component. And I'm going to give this
the name of opening hours. There you go. And finally, we are
left with phone number. So let's go with
foreign right here. So Control C, Control
V, and select that. And let me select my phone icon. There you go. Where it is. There it is. Make sure it's
in the center above my text. I'm going to hit Control K. It's going to position
it nicely around there. But I can also do is turn
this text into a stack. So select all of my
texts, Control G. And what I can do is maybe
called dislocation content. Location content, center
it with my map like that. And location content
is going to be turned into a stack like that. It's going to have different
values because 24 here, 32 here, it doesn't matter. The important thing is that
we turn it into a stack. And let's group
this and call it. Let's see where we are. And finally hit Control K. Because once again, we'll reuse this content
throughout our design. Make sure we are 200 from here. There you go from this button. And finally, the last section here that's left is for
us to create this footer. So let's do just that. I'm going to take my nav, use my logo Control C, and zoom in a little bit
right here, hit Control V. There you go. Make sure it's in the center, notch it all the way down. Because it will be remember, logo is in the center. On the left-hand side, we
have social media icons. On the right-hand side,
we'll have our nav. In terms of the nav, hit
navigational items Control C. So this is the whole
point of Adobe XD. All of these tools,
you want to be able to reuse all of your elements because what is
the point of view? Selecting them over and
over and over again. Let me use these
social icons which already created in my
previous InDesign. And it's going to paste
the components as well, which I don't necessarily want, but let's just keep it that way. So we have social icons and
we have the default state, which is this dark gray color. We have the hover
state, which of course is the hover effect for our hover color
for our design. So what do we can do
is for each hover, Let's just make sure that we are applying the same color here. Our hover hover. So let's use hover color. Make sure we select it. Let's see. Why is it, isn't it's
selecting this about, so this rectangle, whatever
it is, and let's see, hover, use this color, use this color, use this color. And finally, for this
use, discolored. There you go. So everything
works as it should. Once again, I took these icons from this plug-in
called Icon scout. And if I scroll a bit
down to my downloads, I think. And daddy are. So here you can see
all of these icons. So let me switch back
to my layers panel and bring all of these to their default states
like so, like so. And like so. Finally, let's
position this to here. And what I want to
do is maybe nudge them to be 64 from our logo. Something like this. 64, there you go. Below the logo. And one final thing
which I want to do is turn the text at the bottom. So let's type in
something like text area. And we will use for it, we will use paragraph text and let me copy and
paste the text, which is just going to be some basic information
about the company. And you can see, alright,
reserve as part exclusive cars 2023 and we will have
the same spacing. So from here, let's see, I'm holding Alt three. Let's see what we can do here. Let's see maybe we can nudge
it to be 64. There you go. So now that that's done, move it down and group all
of it, call it footer. Footer. There we go. And let's nudge the
footer to 200 from here. And finally, one last
thing which I want to do. And one annoying thing
in XD is because I cannot close my art
boards at the end. So I have to
double-click right here, click and drag and simply
measure like this. So it's a bit of
a waste of time, but what can you do? It's just one slight anointing all pieces
of software habit. And this is the
one in XD for me. So if I select it
64, there we go. So before I move on
to the next page, I want to preview this
one and cover what we did so far in this part
of the course. So we have our
navigation at the top, we have the cards,
loans contact us. We have our hero section, your partner for exclusive cars who are telling them
straightaway what you are, what you are doing and
for whom this is intended to certify used cars with low mileage and
documented history. So we're telling them about
our cars, what they are, explore our cars so
they can click there and go to the course page
like we already mentioned. Then a little bit about
us, happy Smiley people. And in the exclusive location, we have our exclusive
selection with some cards that look the same. We have C all cars, so we have glanceable elements and information right here, like the name, price, a year of production, and how many kilometers
the car has. Seal cars once again, takes you to the course section, what we offer extended warranty,
maintenance and loans. I could peace of
mind or benefits. So if you purchase
a car through us, what you're going to get. So you're going to
get free delivery, three-stage Polish
party exchange, so you can sell your old card to them and they received
a part of exchange. Then we have the Contact Us,
which is really important. We have the send
message where we are, so our location and once again, important information
included here, so addressed for
number, opening hours. And finally we have the footer with all of these working links. And then we have in these icons, this YouTube icon is bugging me and it doesn't work for some reason, but
it doesn't matter. We're going to fix
it later in Webflow. And that's basically it. That's it for the design
part of the homepage. In the next video, we're going to move
on to the cars page, and we're going to
dig a little bit deeper into these cards. We're going to have
eight of them and we're going to position
them a bit evenly. And I'm going to
show you the power of reusing all of these
components alike. Navigation, like a
contact form About Us and map and the
footer at the bottom. So I'll see you in
the next video when we are going to continue
with our design.
140. Cars Page Design: Let's now move on
to the course page and continue where
we left off and I'll show you how you can reuse some of these
elements that we mentioned. So here we are in our design and what I'm going to
do is quite simple. Just select my entire art board, hit Control D and
coming right here. And instead of
homepage type in cars. Now for the current,
what we want is because this page is selected,
if you remember. So if I select my cars, we have selected just to show a user that we
are on that page. So if I click right here, you can see I cannot
hover anymore, but I can hover here and here. It just indicates that
we are on the same page. So we're going to do for this
section is get rid of this, get rid of this, and get rid of these sections,
something like that. And what I'm going
to do is maybe nudge this a little bit down in here because we have all
cars presented. We don't need to
see all cars button and we're just going
to get rid of it. Now, first things first, let me select this text, hit Control C, and just reuse
this content right here. Instead of left-aligned,
let's make sure its center
aligned like this. And let me select the texts. Your partner for exclusive car. So it's just the
same text as here. And in terms of the spacing, what we can do is maybe
positioning it 40 from the top. So shift 1234 because we want it to be quite close
to the top, like that. And of course you want it to be just below our navigation. Alright? So here what I'm
going to do is drag a nice circle in the background. So to do that, of course you can
use your circle like this and position
it in the center, gets rid of the border
in terms of colors, Let's use main blue
because that's our company color in this case. Let's go with the
dimensions of 300 by 300. Maybe. Make sure it's in
the center and nudge it down from our text. Maybe we can even
nudge it to here. So just below our texts, make sure it's in the center. Something is not quite
good with this text. So if I position it here, no. Okay, maybe it's an XD buck. So let's now move
on and I'm going to drag and drop my
image of my car here. Once again, I used Envato
Elements for this one. It's that mockup
which I mentioned. And this car is basically
just cut out of that mock-up. So what I can do in this case is maybe positioned to be
just slightly taller, maybe 300 or something like this so that we
have a nice even number. And from here what I can do is maybe nudge it to here slightly, maybe somewhere around here. And I don't really want to be able to see the
circle at the bottom, citing the positioning of this works quite nice as you can see, because this is
transparent is still going to show the circle
in the background, but we will not have the circle right here
is just going to give us that nice
effect if we want. And finally, for this section, what I want is maybe
to nudge it 100. So let's see something
like something like 100 because we still want to be able to see this
section above the fault. So when a preview, once again, you can see above the fold, we can still see this section. And inside of this section what we want is
to use this card, card, card hit Control C, jumping right here and
open up our selection and typing Control V,
something like that. Position it down. And what it can do for the spacing is I can
give it maybe 32. So 32, 32, there we go. And what you can do is
select these three, Control G and give them top row. There you go. Here inside of this
one because this is not a component and that's
the crucial part right here, because if it was a components, then I will have to recreate what I did for
these three components. I create the original
state, create horror state, and then change the text for each of them inside of
each of those states. That's why it's useful to have this card and standby without any component is session on it so that you can easily
swap your elements are left, right, and center
without interrupting. And then you can create
components on top of debt. So if we go back to here and let me simply
duplicate that, so Control D or even better, I can go here. Something is not quite right
with my XD at the moment. So sorry about that. There we go. So this is
going to be our top row. Once again. This is going to
be our middle row. There you go. And I'm going to
turn on my stack. I can turn on the stack
here as well of 38. So let's duplicate these two. And let's put 38 because that's the distance
between our columns. Control D Once again, and position this to
be down at the bottom. Remember we have eight cars, so we'll be 32 and get
rid of this last one. So this is going to
be our bottom row. There you go. And finally, now
it's time for us to add all of this
information in. So in terms of information, what I want to do is this
is going to be Tesla, and let's call it
deathless straightaway. But first let's actually copy the information is going to
be much easier that way. So the car year is going
to be 2021, that's fine. And the mileage is
going to be 40,000 km. So let's call it Tesla. This next one is
going to be Porsche. And this last one is
going to be McLaren. So for the Porsche, what I can do is select
and I've been pushing. This is going to be the price. Obviously. When you're
doing design like this, you want to make sure that
you position your prices evenly because obviously
McLaren is going to be much more expensive
than the Porsche, e.g. and Tesla. So you want to make sure
that you are selecting these prices and all these
elements in according to debt. So it's going to be quite low
mileage 2020 is the year. There you go. What I can do straightaway
actually is use my images. So McLaren number three. And remember, I'm using
number three for all of them. Porsche number three. So this is going to
be Porsche Cayenne, and finally Tesla Model X. There we go. Before I move on to these ones, Let's hit Control K, Control K, Control K to turn
them into a components. And let's go with our
state, call it hover, select Control C. And I'm
going to do the same for here, so hover, hover for
this one as well. What I'm going to do inside
of her estate is simply select my watercolor
and bring it up to 100. Do the same right here. Bring it up to 100, and do the same right here. So bring it up to 100. And now when I
switch to default, default, default it's
going to go back. Finally, let's deal with
these last two cards, and this last one is
going to be Cadillac. Let's call it that. So Cadillac or even better see TSV because we already
have a Cadillac on top. This one is going to
be a bit cheaper. Maybe as a part of that part
exchange which I mentioned, the year is going to be 2019. 2019. There we go. And the mileage is
going to be quite high. Mileage because of the year of the production is going to be 2021 and it's going to
be a Range Rover evoke. And finally, let's
bring this to here and mileage is going
to be in this one. There you go. So let's give this the name. Let's say the city is three. This is going to be
a range like that. And let's finally
bring the images in. What are the Range
Rover USA Number three, drag-and-drop insight
and for Cadillac, let's go with number three, drag and drop inside. So there we go. Now that we've done all of this, what we can do is use the
remaining sections which we talked about previously
and simply bring them up. So select all of our
remaining sections, nudge them up to here, and make sure that we
are 200 from here. Something like this. I think it's going
to work quite nice. Yep. And that's basically it. All we need to do is
simply close this off. And if you remember,
I simply hate this function of x dy.
But what can you do? Because I have to manually
do this, you don't have to. You can just leave them as they are because it doesn't
really matter. Inside of Webflow, we
will set the cap for the spacing at the
bottom for the margin. And it's going to respect
that margin on each page. So it's much, much
simpler in development than InDesign, but
nevertheless, some. Here we have our bridge. So if I select my course page, bring you up to speed. Once again, we have
selected cars right here, loans and contact us. We can still hover button
for exclusive cars. There you go. So now we
have this image with a nice blue circle in the background
straightaway to our cars. So we can hover on
each of these cars. You can see hover
effect works quite nicely except on these two. And let's switch to so
contact task works, works, works, everything works. So we forgot to do
this on this one. So let's go back. Control K, control K. Let's turn this into a
hover states like this. And let's turn this CSV on Horace state as
well, on hover. I'm going to bring this back border color all the way to 100. And on the Range Rover, Let's see, watercolor
all the way to 100. There we go. Let's switch them
back to default. To default. And let's preview our
page one more time. So let's see cars,
loans contact us. All of it works fine. There we go. And let's now hover over this. It has a bit of a
delay in hover, but don't worry about it. We're going to fix
that in Webflow, so we're not going to waste too much time in
the design itself. Finally, what I want to do
is simply push this up. So let's call this
car's VG circle. And I'm going to position
this right here. And perhaps give this a name of promo section or cars for almost section,
something like that. Then we have our selection and we have all of our
other elements. So there we go. That's
our page for this video. In the next one we
are going to design a debit card details page when your users actually click
on one of these cards to open it up to learn more
about the car in question. And that's what we're going
to tackle in the next video. So I'll see you there.
141. Car Details Page: Let's now go ahead
and create that cars detailed page
or selected car, however you want to call it. Let's go back to XD. And here what I'm
going to do straight away is instead of
duplicating this one, I'm going to duplicate
the hero sorted the homepage because I'm
going to reuse this section. So let's call it e.g. selected car. There you go. Inside of the selected card, what I'm going to do is get rid of some of these
sections once again, so hit Delete and delete. I'm going to keep
this one, delete, delete, and I'm going to
keep all of these sections. What I want to do next
is perhaps, let's see, maybe we can extend
this a bit down to maybe cover 200 distance. There you go. And what I'm going to do is
simply extend my art board a lot down because we will have a bit more space to
work with right here. So what I'm going to do
now is choose a car. Maybe I can choose a Range Rover maybe or something like that. So what do we can
do in this case is because we will create
the two column layout. One column is going to
have all of the contents. So it's going to have images, it's going to have overview, description, vehicle
specification information. All of that stuff is going to be on the left and on the right, we will have that card which
will have sticky layout, which will follow
from top to bottom. Once we actually start scrolling
on desktop, on mobile, it's going to switch
and it's going to come to the bottom of that page. And that's what we're
going to create now. So if we switch
you back to here, what we have is the
two column layout. So let's start working with it. Selected now. Well,
let me actually start creating some
of these images. Positioning something like this. Because if we take it here, you can see we have
one image and then below that we have
four different images. And then we have the card
scrolling up and down, and it's going to be
positioned sticky inside of the
Webflow a bit later. So let's go into debt. Let's create that
really quickly. So for this first image, what I can do is give
it a name of image, one, or main image or
something like that. And let's see, maybe we can
give it 8.4 column widths. So something like this. So we can have four columns
wide layout right here. There you go. And in terms of
the height, Let's go with, I don't know, 437,
something like that. Let's get rid of the
border and let me jump in and position my
image straightaway. So this is going to
be imaged number one. So let me drag and
drop it inside. There you go. And in terms of the
spacing from the top, we can go with 40
maybe once again, so something like this. And let's now focus
our attention of these images because
we have eight columns. Now. Four of the images, each of them could take
two columns in width. So let's do that. Let's duplicate this one. In terms of the spacing, we can go with 24. I think it's going
to be quite fine. And let's nudge it down to here. And this is going to
be image number two. Let's position it inside of a group and call it car images. Let's give it a stack. We can organize it a
little bit better. And let's see In terms
of the distances, Let's see what we can have. So maybe here or what do we have here is if I scroll down and
hide myself just a touch, you can see that
the gutter width, which is the distance
between these columns is 38. So this empty space
between the blue columns. And that's what we're
going to attack here. So type in 38. And as you can
see, it's going to align with the next
available column. So this is going to be imaged
number three, Control D. There's going to be
imaged number for n control dy dt is going
to be image number five. There you go. Now, let me just quickly
bring in those images. So this is going to be two, this is going to be three, this is going to be four. And finally, this is
going to be five. And of course, when you want, you can click this
button right here, which I don't think
that we created. Now, there will be a
button here which will tell you see all images e.g. so if you click that, it will enlarge and it will
show you a light box layout, which we will create an XD. And it comes a
standard in Webflow. So we will not pay too
much attention to that. In terms of this hero image. What I'm going to do is click right here and type in e.g. see. All images. Turn this text into text block. There you go. Position and roughly
around here. And in terms of the
rectangle which are going to use right
here, something like this. Get rid of the boiler. And let's see. Call it maybe all images
background or sunlight at all. Amateurs background.
There you go. See all images. And then in terms of the
distances and sizing, maybe we can go with
50145145 and then 50. Something like that. And let's group these two. No, that doesn't
work well for me. So maybe I can
narrow this down and lower it down to paragraph. There you go. Now it works much better. So if I make sure that
they are in the center, control G and type in e.g. see all images. And in terms of the spacing,
maybe we can go with 24. So 12, 123-412-1234. So we are 24 on each side. If I hold my Alt key or Option, you can see how that looks like. So we can group these
to call it image one, image one, and we can
call it car images, e.g. and now let's move
our attention to this site for the card itself. So what I'm going to do is
use our rectangle tool once again and draw a quick
rectangle, something like this. It's going to have a
white background color. And let's see,
maybe we can round the corners to eight,
something like that. Get rid of that border.
We don't need it. And here what we can
do is call it e.g. car sidebar and give
it a name of course, sidebar PG movies right here. And here what we can
do is create that, that label that we mentioned. So I'm going to create the text. Let's get rid of that one. And type in Saloon, which is going to
be a type of car. And I'm going to apply
it, the label text to it. There you go. And we'll have the labeled
background attached. So let's create a
quick rectangle. Once again, give it a name. Label, BG. There you go. Below the text. I'm going to get rid of the
border and for the color, I'm going to actually
use the body color. So if I hit preview
one more time, you can see it has the body color and this
has the white color, which is just going to
differentiate it and make it stand out just
a little bit more. And you can see our images
how nice they look like. So in terms of the sizing of
debt labeled backgrounds, so what I can do is maybe use
3034 size for the height. Make sure this is centered. There we go. And I have a nice
little car insights, so I'm going to paste it in. And this is saloon icon. I'm going to turn it into
components straightaway. Make sure this is
position like this. And in terms of the spacing, what I can do is maybe position
it's 16 from this side. 16. In terms of the
labeled background, what I can do is maybe put
four for the corner radius. So not eight because this
element is quite small, then distances here
can be eight maybe. So let's go with this. This can be label, Icon, Label I CAN stack
and turn eight like this. And finally, in terms
of this distances, maybe I can bring this two here maybe and give it
a distance of 16. Like so there we go. And now we have our label
background and a label content. So I'm going to call this label, and let's call it saloon label. And let's see what we can do it. So the saloon, I
can hit Control K. So that's going to be
our default state in terms of the positioning
of this label, maybe it can be 24 on each side. So let's go with 24
and then 24 like so. Let's turn it into a stack
which is going to enable the padding inside of debt we will need
to create tomorrow. So I will need to
create the SUV, and I will need to create
the super car icons. So what I can do is simply
drag those icons in. So let's see solu, super car, which is not that supercar. I'm going to drag it here. And SUV, I'm going
to drag it here. There you go. So what I can do is
use these icons. Hit Control K, hit Control K. There you go. And simply remove
them from here. So in here, we have the
saloon as the default state. What I'm going to do next
is click right here for the SUV state inside the
front label and move it here. So inside of the SUV state, what I'm going to do is
open up my label icon, select my solute icon and locate my SUV icon,
which is this one. Simply drag and drop it until it becomes
a blue like this, I let go, it's
going to populate. And then here, type it SUV. And because we have
this content section, what I'm going to do is turn
this into a left aligned. Actually go back to the default state
here, select my texts, make sure it's
left aligned so it extends to the right-hand
side and not all sites. There you go. Now SUV, There you go. So default state, Let's see, 24, 24, this is okay. So let's, let's just
keep it that way. And finally, let's create
one for the super car. Inside of this one, Let's type in, let's
see, supercar. There you go. And instead of Saloon, simply locate the supercar icon, drag it on top until it
becomes blue. Let go. And we have now a supercar icon switch between
the saloon and supercar. It looks good, but the SUV
is moved just a little bit. So let's see where
we are with that. So 24, let's see if we
are good now we're not, so we still have to make
sure that we are here. So 24 inside of the SUV. This is left aligned, so we'll
have to manually fix that. But don't worry because inside Webflow we will
just use that one. So inside of the SUV, I'm just going to
nudge it right here. So because the Range
Rover is the SUV, as you can see, we are 24 and let's now start adding
our text elements. So first things first, let's start with the name. So a Range Rover, Voc. And this text is
going to be H three. So 24, something like that. And let's see where it is.
So labeled just right here. I don't understand why it's not showing, but doesn't matter. Let's position it that way. There you go. And the distances are
going to be 24 as well. So 24 there you go, Control D to duplicate it. And this one is going
to be our price. And the price is just
going to be the main blue. And once again, 24 from
here, Control D lubricated. This last one is going to be
our paragraph text, like so. And inside of that, we can put additional
information such as available for pickup. Now, if it's not, if it's in transport, maybe then we can put that information
there if we want to. But it's available for pickup. Now, then what we can
do is just drag in our component where it is
main button. There you go. So drag it. And what we can do is
make sure we are 24. So same like all of
these other elements. Here. I can type in something
like reserve this car. There you go. And on hover, I'm going to simply type in reserve
this car as well. There you go. And now what I can do is
duplicate this button. Make sure I'm 24.
Double-click right here. Whoops, just one. And make sure we are
24 from here as well. Like one more. There you go. And this button,
I'm actually going to Ungroup Ungroup component. And this is going to be
Outline button background. Inside of the outline
button background, what I'm going to do is
simply select my text, which is this text right here. And I'm going to type
in C alone options. There you go. And for this, what I
can do is group it, call it outline or BTN, outline. Like so. And C alone options is
going to have a disc color. So maybe this dark
gray or something. Yeah, Let's go with dark gray. And the button will not
have the fill color, but it will have the boiler color of dark
gray, something like that. There you go. Hit Control K to turn
it into a component. Now create a hover state for it. Inside of the cover, we will change this color to maybe h3 paragraph and change the border of our button
to HD paragraph as well. So it's just going
to differentiate itself a little bit more. So if I preview this
really quickly, you can see that this works
and this works as well. So now we have these two. Once again, discard is going
to stick to the top of the page and it's just going
to scroll a little bit down. So that's what
we're going to do. Let's quickly group
all of our elements. So let's select the Label. Range Rover evoke below the label price available for pickup than we
have our main button. We have button outline. There you go, carts
sidebar, select all of it, Control G or Command
G. And we're going to call this car sidebar. There you go. And put it just behind here. So now we have our images
and we can put them e.g. in one group, One main group. So let's hit Control
G and call it e.g. car content. Car content or car
inflammation card details. You can call it
whatever you want. I'm just going to
call it car content. And let's see 24 on each side. Perhaps I can even
extend this button. So what I can do in this case
is perhaps extended to B24. But to do that, I will have to ungroup
this component. So let's first deal
with this one. Let's see where we are. 22, 24, there you go. And if I switch to hover, it changed because I wanted
to take the full width of this element because
that's how it's going to look like later
inside Webflow. And for this one, what we can do is let's
see, ungroup, group, call it main btn, and maybe give it a class of large or something,
hit Control K. Then extend this to fit this and create a nice
little Horace state. Call it hover inside
of the horror state. Or we need to do is just
switch the color of the hover and switch it back
to the main dairy goat. And now when I preview, we have a little bit more space right here inside of our card. So when I hover, you can
see that the information is looking a bit more
readable than before. So I'm going to stop
the video here. And in the next video we're
going to continue building this section because we will have a lot of
contents right here. So because we are already 17 min into this video,
let's continue there. So I'll see you there.
142. Lightbox Design: When you click on
that big image, you want to be able
to see all images and simply scroll left and
right between them. And that's what light box will allow you to do in Webflow. It's super simple to do. It's going to be a
little bit complicated later to connect it with CMS. But in terms of layout, it's just simple because the
component is already there. But to show something
like this in XD, you have to design it. So let's jump into
XD into just that. So here we are in Adobe XD. And what I'm going to
do for this one is I'm going to create completely
different page. So hit Control D right here to duplicate this one
and call it light box. If it wants to create, if it wants to work on me. So let's try that again. Come on. Light box. There we go. Lovely. And I'm just going to
reuse these images. So from here, I'm
going to ungroup this. Put the images on top like so, and get rid of everything
else like this. Then I'm going to cap it to the original size,
which is this one. So simply double-click
and reduce the size up to some
thing like this. There we go. So maybe 1080 or
something like that. So if I hit preview, you can
see how that looks like. We'll have a loop. And then what I'm going
to do is get rid of this, see all images like this. And maybe I can even get
rid of this one so ungroup. And now what I can do is maybe position them a
little bit differently. So in this case, what we can do is perhaps, let's see, maybe we can create
a nice background here. So create the background, and let's ungroup this as well. So ungroup, this is
going to be a lightbox. Bg. There we go. And I'm going to
position it to be full width of our
art board like so. There we go and get
rid of the border. And in terms of the color, Let's go with, I don't
know, something like this. Maybe reduced opacity to maybe 80% or
something like that. So it's a bit
transparent like that. Then finally, what I can do is maybe experiment with
the size of this. Perhaps to here. Let's see. So height
can be maybe 6609. Here, works fine. Make
sure it's in a center. That looks good. And here what I'm going to
do is because we have 12345, I'm going to create more. So Control D 67.8. So I'm going to locate
my Range Rover images. So car images, let's
locate the Range Rover. So here we have 12345. So now we need six. There we go. Then we need seven. There we go. And finally
we need number eight. Lovely. One final thing
I want to do is select my x or my clothes from here and position it
roughly around here. So let's see, we're 56, 49. So let's just nudge it
to be in the center, roughly, so it doesn't really matter for this particular case. Because once again, light
box has its own stock or layout which it follows
inside of Webflow. And for this layout, what we need is maybe to either position it in
the center like this, which I think works
for this case. What we can also do is
maybe nudge it down to 64, like this. And maybe nudge this
into a center between our clothes and these
images right here we go. One final thing we'll want to do for this layout right now is to just connected. So let's just
quickly check this. There we go. So what I'm gonna do now is when somebody
clicks this image, e.g. this main image. There you go. I'm going to switch
to prototype mode. Click and drag this
blue handle to my new lightbox, our port. And what I'm going to do
instead of transition, I'm going to choose Overlay, which is just going to overlay that on top of our art board. Animation. Maybe we can slide up or down
or just hit None. It doesn't matter. Or we can choose dissolve maybe
or something like that, but let's just go with none. And when you click somewhere
outside of this art board, you're going to get
that sliding effect and it's just going
to disappear. So let's test it out. So when I select this
art board hit Preview, we cannot see anything
so we can scroll down, we can explore all this stuff. But when I click right here, you can see that the light
box just pops into place. And of course you can
adjust this component, but we're not going to waste too much time with this video. You can obviously add, when I click this image, it's going to replace
with this image. When I click this image is going to replace
with this image, but I have to create
one giant component with eight different states. So state one is going to
be imaged number one, state two is going
to be imaged number to stay three and
so on and so forth. But I don't want to
bore you guys too much. What's important here is
when I click right here, it's just going to disappear. So at any point I can go back click right here,
it's going to show it. But when I click right here, it's then going to disappear and it's going to take
me back to there. So that's how super simple it is to create that light
box component. Let's hit Save on our design
and what we can create. Next is perhaps the
page for our loans. Because loans are
quite important, we are still going to reuse
some of these elements. And we'll have this
section, this section, and this section which is going to be different and all of these other sections are
going to be the same. So I'll see you in the
next video where we're going to start with
the loans section.
143. Loans Page: Let's now go ahead and
create the page for the loans because as I
mentioned previously, they have these
external partners they are working
with for the lungs, as well as the transport of the cars and customs agents
and stuff like that. So let's now go ahead to XD
and work on the loans page. So here we are back in Adobe XD. Let's just duplicate one
of these pages once again. So perhaps we can use
this one Control D. And I can call this a loans. And if you want a bit
better consistency, you can move this out
of the way to here. And of course, the animation is still going to work properly because if I switch
it back to prototype, you can see that this
is still connected. So no matter where
you are moving it, it's still going
to work just fine. So in this case, what we will do is
choose our cars. In this case, go to
the default state, go to loans selected because
this is the selected page. After all. There you go. And now what I'm going to do is make some adjustments here. So I don't need
this top section, but actually let's use it. But I'm just going to get rid of these images are still going
to have to check this. And this is going to be alone. Actually, no, let's
go back a touch. So something is happening. So let's go and get
rid of that one. So this is going to be instead
of cars promise section, it will be loans
promise section. There we go. And here we're just going
to use the same text, the same position, loans
for your dream car. Get rid of this section
because we don't need it. And we will have these
sections at the bottom. But let's just go ahead and extend our art
board just to touch and move these three sections down a little bit,
something like this. And then we'll worry about
the positioning a bit later. Here what we will do is use those two images,
which I mentioned. So I'm going to use this
one of the Range Rover, and I'm going to use this
one of the Audi RS five. And I'm going to go ahead and
flip this by clicking here. And I'm going to position
them down like so. And let's see where we are. So maybe we can move to
the center of our page and hold Shift Alt and left-click so that we can
scale them down evenly. Now what we can do is just position them a
little bit better. So this is going to be here. This is going to be here. And obviously we need
to reduce the size, even more of these
until we reach some of the look and feel that we want perhaps
right around here, I think it's going
to work quite fine. Yeah, maybe I can measure
this in, just a touch. So to enjoy over
Audi, that's fine. Just move them
right around here. And in terms of the spacing, what I can do is just
nudge them until they touch the line of
the text right here. In terms of the text itself, it's still kept at 40, which we think it's
going to work just fine, but I don't really
satisfy with the Audi, so maybe I can nudge
it just a little bit. There we go. I think
that works quite well. So let's see. To AD five, maybe I
could nudge this up. Just a touch. Actually, no, let's just leave
it like this and not waste too much time because I
think it looks quite nice. So the next section here is going to be
this section here. So our offers and below that
we will have our partners. So let's deal with
our offers first, and let's do that first. So let's first take the texts. So I'm going to take the T here and type in something like market leading loans
from our partners. There we go. I'm going
to position it in the center and just make
sure that we are in the H2. Snap it in the center. There we go. And here what I'm
going to do next is just make sure
I'm in the center. And finally make
sure I am not 200, but maybe 150 from these images. Because once again,
I want to be able to see all of this information
just above the fault, which I think is
really important because of the SEO purposes and because you want
your information to be readable at all
times if possible. So here what we will do is
do that thing one more time. So let's switch over to the
Layers panel control D. That. And I'm going to type in something like simple
and convenient, but turn that into the
H3 Control D on it. Move it to the center and maybe choose something like
multiple payment options, Control D one more time. And this can be a peace of mind. So we are doing basically exactly the same
layout as we did. Where do we do it? As we did right here. So we can just take this and color it
again if we want to, but I'm just going to recreate
it straight from the top. So here I'm going to hit Control D choose the
paragraph texts right here. And for the paragraph texts, what I can do is choose this
here and maybe I can change it to dark gray just to
make a slight change. So it's not looking exactly
the same as the text on top. Control C, control
V. There we go. And now what I can
do before I move on with with more content
and information, I want to be able to paste
these icons into place, alright, here and here I'm
going to choose this one, paste it in right here. And finally, I'm going
to choose this one, paste it in right here. So now let's deal
with our layers. So first things first, we are going to have 24
distance between each of them. So here, here and here, we can see we are 24 from
each of these, which is fine. Let's just deal
with these icons. Make sure they are
aligned at the bottom. And let's see 24. There we go. So now what I can do
is simply group these. So let's group these. Let's group these
analysts group in this. And I can turn them into stack, which is just going to organize
them a bit nicely for me. So I don't have to waste
too much time with dealing with my layout and stuff. So first things first,
let's position it to be in the center and do
the same for this one. So select everything, make
sure it's in the center. And select everything
right here. Come on. There we go. And make sure it's
just this one. And make sure it's in
the center as well. There we go. Now
that that's done. Second one is going to go to the center and the second one is going to be multiple
payment options. There we go. The first one is going to
be simple and convenient. And the last one is going
to be peace of mind. So I'm just taking the text so it can go
a little bit quicker. And finally, because
the central one is always going to be in the
center click right here. But these other ones, Let's use that rectangle trick. So I'm just going to
position it here. Click here, make sure
it's in the center. There we go. And move this right
here until it snaps with our grid, more like. So. Select both of them. There we go, and get rid of this rectangle because we
don't need it any more. In terms of the spacing, what we can do is
maybe choose 64. I think it will work just fine. Let's see where we are.
So just like this, 64, we are there. And because we will use
grid inside of Webflow, what we can do is
hit Control G right here and maybe call
them loans grid. There we go. And hit Control G on this
section one more time. So remember we are
150 because you want to be seen above the fault. Move it right here. And let's call this section
market leading lumps. Next, let's move on
to this next section. And to save myself
a bit of time, I'm just going to reuse
this session from the homepage Control C, Control V, and nudge it
to be same as this one. Actually, no, let's
keep it at 200 for this spacing sake of
these other ones. So here what I'm going to do is this is going
to be alone image. And this can be, let's see, our partners. Our partners. Because
this layout is exactly the same as
on the home screen. Let me just take you can do this in Webflow
by the way as well. So instead of you are recreating this over and
over and over again, you can just double-click
copy and simply paste in your copy directly from your
design software of choice, in this case, Adobe
XD loans image. Let me located right here and drag and drop it
inside. There we go. Perhaps, nudge it to here maybe. And now that that's done, let me choose my logos,
drag-and-drop them inside. First things first, let's maybe reduce them to something
like this or even better, let's create some
boxes which are going to go around our logos. So let's go with
something like this, and let's give it the
dimensions of 270 by 60. And in terms of corner radius, I can get rid of the border, but in terms of
the corner radius, I want to be able to, Let's see the pin eight
here and eight here, which will give it the top right and bottom left of eight. There we go. I can nudge it to the
center of my image. Let's see, maybe 20 or 24 or
even better on each side. And this is going to be for
the suntan, their logo. So this is going to be logo
holder, something like that. And let's duplicate that
one because we will need to position it here. 24 from this side
as you can see. And let's nudge
these below to here. Use the suntan, their logo, scale it down, just
a touch mixture. We are in the center of our
logo holder hit Control G. This is going to be
our top partner logo. Once again, it won't rename
this for some reason. I don't know why. So
let's try that again. Top partner, logo. Know a topic, but the top. There we go. And finally, let's deal with this next one which is going
to be obviously bottom. So let's first things first, align it to the center and center and hit Control
G, in this case. And instead of top, I'm going to give it a bottle. Bottom partner logo. Dare we go n nicely done. So you can see now we
have this page as well. Finally, what's left
for us to do is to select these sections
at the bottom. So let's select them. Now let's actually organize
this a little bit better. So we will have our partners
just below our lungs. So we will have hero then
loans, promo section, then market-clearing
loans are partners, which is not 170 and
it should be at 200. That's because we
put logos in place. There we go. And now let me select these
three and nudging them into place until they are
200. There we go. And finally, one last thing
to do is to crop this to B64. Whoops, almost there. 64, there we go. So now that that page
is completed, finally, what's left for us to do is to create the Contact Us page, which obviously is going
to be super simple. We're just going to
reuse that information and just paste in
the image inside. So I'll see you in
the next video. There is really no need for
me to create the next video, but I'll still created just assured that and
walk you through some additional information that we didn't cover here.
So I'll see you there.
144. Contact Us Page: Let's go ahead and design
the Contact Us page. As I said, it's going
to be super simple. It's going to be done in
just a couple of seconds because we saved all
of these components. So let's jump straight
to XD and created. So here we are in XD, but I'm going to do
is select this one, Control D one more time. And let's nudge
this a bit further because it's distracting
us for some reason. There we go and move
it right into place. Now we have all of them. So let's give this a name if it wants to
rename. There we go. Contact us. There we go. And here what we
will do straightaway is select the loans
default state select, Contact, Us, select
selected because that's what we will be
selecting after all. And get rid of this one. So this, this, and this will get rid of all
of that information. And finally, what we need is let's just drag and
drop an image inside. Let's see something like this. There we go. It's quite
a huge image once again from Envato Elements
and debt collection, which I already told you
about and showed you. So we can nudge it right here. Actually know what we're
going to do is cut it off. So let's use a rectangle with
a height of, let's say 600. Let's get rid of the border. Now let's nudge it
straight to the top. I mean the bottom
of our navigation. And let's call it a spider
showroom maybe because let's say that that's the
showroom of this company. And now inside of
that placeholder, Let's drag and drop this image, Double-click and adjusted to fit maybe roughly around
here or something. Yeah, just cut off his shoes and I think that will
work quite fine. Finally, only thing we
need to do right now is to nudge this up and let's give
it a 100 distance, e.g. because we don't
need it to be 200. Once again, for the sake of everything being
just above the fold. Cut it off to 64, maybe 63, 65. There we go. So
finally, that's it. This is our design completed and this is
where we start off. So we started off
with a homepage. Then we moved on to
the course page where our users will be able
to select the cars that they want when they do
ever be taken to this report, which is called selected car, where there'll be able to
see additional information. They can even click
this image to be greeted with this light box. And then if they
switch to lungs, there'll be given the loans information right
here on this page. And finally, Contact Us, which is just a simple
Contact Us page. So there you go. That's it for the design part, basically more or less. In the next lesson, I will
show you how to connect some basic interactions and some basic animations
between these pages. So when you share this
with your clients, there'll be able to enjoy at least some transitions
before you actually move into Webflow when we're going to add some final animations
and we're really going to make this
website stand apart. So I'll see you there.
145. Animating The Design: Alright, let's now
work on our animation. We're not going to do something crazy because as I mentioned, we're going to do
that in Webflow with all the sections flying in
on load and stuff like that. But you still have to
show to your client something in the design part. So let's now go
ahead and do that. So right here in XD, what I'm going to do is
first things first switch to prototype mode like
I did previously. And select my loans right here. So nav items, loans. And right here what I'm
going to do is click on this plus and simply
drag it to loans. And instead of formula, because that was the
last interaction, I'm going to use transition. Let's use, I don't know,
belongs animation. Maybe we can use dissolve, maybe is out zero point, let's say 4 s and do the
same for contact us. So click drag to here, then is going to keep
the same settings. Now inside of this page, what I'm going to
do, as you can see, it already is connected
because we are using the child component of
this master component. Which is why I said
from the beginning that components are
extremely important in XD. So here on this second page, because we didn't connect it to the nav items for the cars. I'm just going to
drag it to here and let's check it
out right here. It's still didn't
connect it here because this is the
child component. We cannot connect it here because it's already
on that page. So what we will have
to do is connected on each and every one
of these items. Cars, drag it to here, select it from here, nav items cars drag it to here. And finally, do the
same for this one. If you want to save
yourself a bit of time, then what you can do is do that when you actually
start with the next page. So in our case, when we actually started
with this course page, we should be doing
that at that stage so that we are left with freedom
to do all of these things. So what we will do next is
just some super basic stuff. So explore our cars. What do we can do here
is click and drag to this section and transition. Yeah, let's just do the overlay. So just some basic transitions. See all cars we are going
to do the same thing. So it's just going to
transition to this page. And finally we will go
to the Range Rover. And when I select the range, It's going to click
and drag to here. And let's see what we can do. So tap transition.
Yeah, let's go with, let's go with
something different. So let's go with
instead of transition, we can go with auto animate and selected card destination
is out, maybe easy. Now, let's go with ease
out, reserve this car. What it can do is perhaps we
can take them to this page. Instead of auto animate, we're just going to use
transition Dissolve, so animation it
will be dissolved. And finally on this
page C alone options, it will just take you to
the lungs page right here. And quantity is going to
send the contact form. Obviously, we can animate these icons on hover
and stuff like that. But as I said, we're
not going to bother too much because we
already did a lot of work. So if I hit a quick
test preview, click on the loans is going to take us
to the launch page. Click on the Contact Us. Going to take us to
the Contact Us page. Click on the cars. And what we need right here is actually to connect this not to the homepage but to
the course page. So that was my mistake. So let's see. Cars is actually connected here. So just not here. So here we're just going
to move it to this page. Here. We're going to move
it to this page. And here we're going to
move it to this page. There we go. And
now it should work. So now we are at contactus. So when I click two cars is
going to switch to cars. Loans, go back to cars. There we go, loans come on. And contact task is going
to switch to contact us. One final thing
which we want is to connect a logo to go
back to the home. So click right here
we are at dissolve. That's good. Select
a logo dissolve. Select a logo, dissolve. There we go and select the logo and you can do the
same thing in footer. So here, here, because the original component obviously is on the
homepage itself, so it will not work that way. And finally, here, there we go. So now when we switch
it over and let's say that we are visiting
or no loans page. Click to change it. And when I click on the logo, it will take me back home. So explore our cars is
going to take us here. This is going to
take us back home. See all cars. It's going to take us here and let's check out the Range Rover. So when I click right here, oops, it's going
to take us here. So that's not good. So let's change that
really quickly. So if I select that, instead of auto animates, I'm going to choose
transition and destination is the same
animation dissolve is out. Analyst desk that out. So if I click right here, locate my Range Rover, click, There we go. So now we are at the
top of the page reserve this car is going to take
us to the Contact Us page. So cars once again, switch over to Range
Rover once again. C alone options. It's going to take
you too long speech. So if I switch all the
way down to the footer, if we click on the logo, It's going to take us to the
home page. So there you go. It's just a quick
little transition and quick little animation
crash course in Adobe XD. Obviously we're
going to deal with it in a lot more details in pipe flow where we're going to animate each of these sections, each of these cards,
we're going to animate a little bit
of hover on images. We are going to animate
all these icons flying into place. This is just to show you
what's possible in Adobe XD. Obviously, if you're not working in something like Webflow later, you're just doing design. Perhaps spend a lot more time
in Adobe XD and animate, like I said, this light box e.g. or this type form, maybe you can create a
separate component state, something like that,
just to give your client a little bit more value
in with your animations. In the next video, we're
going to talk about how to export all of these
assets for Webflow. So I'll see you there.
146. Exporting The Assets: Let's now talk
about how to export our assets for a development
later in Webflow. And I'm going to show
you some file formats, what they can be
used for and how to actually structure
your files for a better use case for yourself because you are the
one who's going to do the development workflow. But even more importantly, if you're setting this up for another developer or
development team, for them to be able
to easily use it. So let's switch you over to
XD and show how to do it. So here we are in
Adobe XD and what I'm going to do is just export
some of these items. So first things first, what I can do is select this
because I will export this, this, and this as
separate items. So I'm going to select them
all hit Control or Command E. And here what I
can do is select PNG, but I'm not going to
actually do that. What I'm going to do here
is select these two. So these circles hit Control E. And let's quick
change right here. Let me set up the folder right
here on my desktop, e.g. and I'm going to do, let's say a spot on assets. There we go. Let me actually show you
this one I'm going to do. So here inside of this folder, I'm going to create another
folder and call it images. And another polar call it icons. And because these can be
either images or icons, It's really all up to you, but in this case, I'll
put them two images. Now, let's keep them too. Icon select folder, and
make sure to select the SVG because that's going to keep the editor ability later for
developers and for yourself, you're going to experiment
a little bit in Webflow, animations, delays, pathway animations
and stuff like that. But if not simply export
and it's going to keep the same consistency in quality
that you had right here. Because we named all of
our layers correctly. It's super simple for us to
export all of these assets. So let's now move on further and export
some of these icon. So here we have our icons, so let's select them from here. So here we have warranty,
maintenance, loans. Open up all of these folders. Select this. Oops, I didn't create
the component for this. And this. There you go. So now, because these are in
the stack, Let's see. Yeah, because this is the stack, I cannot select this one and this one is just
select everything. Hit Control E, SVG to the icons. There you go. Select this one as
well to the icons. And select this one
as well to the icons. You'll notice I'm skipping
these images for now, but it doesn't make
any difference. So hit Control E to
export this one. Then hit Control E
to export this one. All of them as SVG, and finally this one as SVG. There you go. Now let's move on down to here. So here how do you address? So hit Control E, exports, select the phone, and
this is the phone icon. So it's intimate. Control K, Control E. Exports. There we go. And opening hours, Let's hit rename it to
let's see, the phone. I made a mistake. Let me show that. Icons phone. Let me get rid of
it because I turn this entire text
with the icon into a component and I
don't want to do that. So what I'm going to do
actually is go back to here, Control Z to undo that and
just select the phone icon, hit Control E. Now export it. That's fine. And do the same for
the opening hours. So instead of everything, I'm just going to select
the clock icon, Control-V. There we go, and clock
icon has been exported. Now let me close that and let's select these
icons at the bottom. So we have these, I'm going to select
them all control E SVG. And we'll final thing
I want to do is export my logo as SVG as well. Because I want to
keep that retainer. Map is something that
we are going to upgrade later and integrate directly in Webflow solids
deal with images. So first things first, our benefits image control E. And instead of SVG, I'm going to choose JPEG this time because of the
better compression ratio. So let's go back to the images. Select Folder, hit Export. Do the same for this. So what we offer, and I'm not going to export these because I already have
them in separate folders. I'm going to select this one. Julie, There we go. And finally select this one. But instead of as a JPEG, because it has
transparent background, I'm going to select
at as PNG export. There we go. Now what's left for
us to do is do the same for all of these
different pages. Here. We don't have
to do anything basically because we
selected everything. But here. Let's actually select
this, turn it into. Now let's first select the image because we
are on that folder. Export PNG once again because it's a
transparent background. Here. Let's switch to SVG and
let's switch the folder. Let's go to the icons. There we go. Select
Folder export. I'm not going to
touch these images. Everything else here is
fine except for this. So let's deal with
this a little bit. So SUV icon hit SVG. There we go. I'm going to switch my label because remember we have
three of these icons. So let's go with
supercar export. Let's switch it to
default state for a saloon. Saloon icon. There we go. Here I'm going to switch
it back to SUV and simply align it with the
rest of the content here. If it wants to snap. There we go. So that all looks quite nice. I'm not going to deal
with these images. And let's quickly deal with these icons because there
are a bunch of them here. But I can do to speed up
my process just slightly is maybe try to select them all but removed the
stack from each of them. If we try to do
this, there we go. So it's going to remove the
stack from each of them, which is going to allow me to select multiple icons
at the same time. So if I open them up, I can select, select,
Select, select. Actually no, let's get
through open all of these. So select, Select, select, Select, and I'm holding Control while I'm
doing this by the way. And he'd control E SVG
icons. There we go. Now you can bring them back into stacks if you think
that's necessary. But I'm not going to
bother too much about it. That's all exported,
that's all fine. Let's see if we have
any other icons we do. So let's try and
export these ones. So Control key on this one, Control K on this one, and control K on this one. Let's see, because they
are in a stack, I think. For some reason, yeah,
this is in a stack. So no matter, let's
export one by one. I don't want to
waste too much of your time and of
my time as well. We are already almost
8 min into this video. And you can see
that this process is repeating itself
all over again. So let's see if I
have any other icons. I don't accept for the
close icon right here. But I'm not going to export
it because as I said, Webflow has its own lightbox
component inside of it. So let's now deal
with the images. So last image
export it was this. I'm not going to export this because we already
have them in folders. So let's deal with these. So select these two control E. Turn this into PNG because it has transparent
background once again. And let's switch
over to our images. Select, hit Export, and
select these three. Like this. Instead of PNG, I'm going to choose
JPEG because they all have their own backgrounds, like this one, Control E, JPEG. And there you go. We
have gone ahead and exported everything
that we need to export from our file in order for us to
build it in Webflow. So you can see how
simple this is, especially if you're
keeping track as to what you're doing,
where you're doing it. And if you're positioning these elements correctly,
named incorrectly. So it's just like this
is just quick to export it to our desktop and to
start preparing for Webflow. So there you go for the design. The last lesson,
which I want to touch upon a little bit is
responsive design. In this section of the course, we're not going to do
responsive design in Adobe XD, as I mentioned, because it
would just be a waste of time. But nevertheless, I
want to show you how to work with responsive
design using these stacks elements and how to better plan for
responsive later in Webflow. So I'll see you there.
147. Designing For Responsive: Finally, let's just touch upon our responsive
design a little bit. Responsive design
is basically how design adapt to
different screen sizes, which are also
called breakpoints. And usually in your
tools like Webflow, you have something like three
or four main breakpoints, and then you can add
additional breakpoints and in-between those
main breakpoints, you have additional breakpoints. So e.g. for the tablet, that's the main break point, but you have additional
tablet sizes, like e.g. iPad is one surface is one,
Samsung fatalities one. So all of these have
different breakpoints. I different screen sizes. So let me show you how
to work with that in XD. Here we are in Adobe XD here
is our design completed. This is how you're
going to get it apart from this section where I'm actually
going to go ahead and create all of these icons, all of these colors,
styles, typography styles, just to make your
life a little bit easier when you
get to this file. But nevertheless, I still
wanted to show you how to work with responsive
design here. So let's e.g. I don't know,
duplicate this page. So Control D right there, hit a on your keyboard
for art board, and let's use tablets. Let's use this tablet size, e.g. and what we can do is select it. And let's choose an all
eight columns, e.g. let's choose
something like 60 on each side to make it
a little bit wider. So what we can do right
here is select our nav, based it in right here. And if the screen
size allows it, we can simply adjusted and
move this in a little bit. And then perhaps we can
move this attach to here. So that's how easy it
is to adjust this, but I need to adjust it
from this side, like so. And then double-click
inside and position. These, obviously, these
sections are going to be super simple because they are
just scaling inside. So position it
roughly around here. Because we now have
a bit less size. Maybe we can go with 32 here. There we go. And now in terms of image, Let's move the image in a little bit to
something like this. Circle can stay. Or maybe we can nudge the image a little bit down so it
can cover the circle. Now, let's switch over our positions and let
me save this to be five per cent in obesity just so you can see
it a little bit better. Then in terms of
the next section, what do we can do
is simply copy it, paste it in right here,
and there you go. Now because we
have this section, I'm going to make
sure that this is in the center of our art
board, like this. But now you can
see what we have. So we have to adjust every
single one of these. So in terms of this, I'm going to ungroup it. And I'm going to position these last two at the bottom,
right around here. And this is going to go here. So let's move these two down. This will go right here, this will go right
here. There we go. So now what we can do because
we have eight columns, each of these cards can
take up four columns, so let's nudge them to hear. Imagine them to hear
and nudge them to hear. And of course, all of them can take up something
like 32 in distance. So let's select these
and maybe nudge and 32. And this can be 32
as well, like so. Now finally for the width, what I can do is
simply select all of my cards on one side, like so. And just make sure that the
width covers it up like so. And do the same for these ones. But because they have
the hover effect, we don't need hover
effect right here. So what you can do is either ungroup them or if
you're too lazy, you can switch to hover effect. You can see that it goes, that it went back to
the original state. And you can just extended the
same like I did right here. But better yet is to simply
go ahead and get rid of the hover effect by simply ungrouping these as a component. Then because we have this
contact form, e.g. I. Can go ahead and copy and
paste it in right here. And because we need to have the original color
for this website, Let's give it a
color of body color. There we go. Now, everything stands
up nice as it should. So here what I can do
is do the same thing. So make sure this
is in the center. Make sure to position
this button right here. Make sure to nudge
this right here. Make sure to nudge
this right here. And now we have these two. This is the responsive
in a nutshell. So you're just lining up these fields as the
space allows it. And they're just going to
stack nicely and to fill in the available space
wherever the space occurs. So let's collapse that form and let's see what else we got. So we have in this field, so copy and paste. But can we do right here, is we can straightaway
turn it into a stack. But first, ungroup it because it was the
original components. So ungroup Control G and
turn it into a stack. And this can be e.g. where we are like so whoops. Cups look where we are. And because we have the stack, I can simply switch
the position of the stack and switch
the distance to 64. Maybe. There go. And what I can do here
is simply align it. So come here, come here, extend this to fill
in the entire width. Maybe reduce the height a little bit to something like this. And then this can
maybe go into centers. So maybe I can position
this in the center and put everything on one line of text where we are can be in
the center. There we go. And now I can maybe
location content. I can move it to the center
of my page like this. But now I have these three. So what I can do with them
is put them in a group, put them in a stack
in this direction. There we go. And now simply bring
them to hear like so, ungroup my stack,
come right here, position it here
and make sure that this is in the center. There you go. Now you have completely
different layout. What I can do is nudge
this in the center. And all of that
looks lovely indeed. Some, what I can do next
is just adjust my footer. So control C, control
V for the footer. Make sure this is in the center. There we go. And just adjust
what I have right here. I don't know why. For some reason I forgot to add the footer as a component. I don't know why I did
that, but doesn't matter. Because we still kept it
throughout our design, but let's just keep it
for consistency sake. Let's give it further
control C, control V. Let's see where
we are with this. 200. And footer will go right here. Actually. Not to
waste too much time. Lets me do that a
little bit later. Let's now focus on this. So let's double-click
right here and move these social
media icons to here. Like so, move this
in the center, like that, and move this
right here and there you go. That's how super easy it is to create a responsive
design and adjusted, obviously wanting
and didn't do is I didn't do the navigation
because once again, I didn't want to
waste too much time. So let's just use this
logo for some reason. It kind of collapsed
on me right here. I don't know why, but it
doesn't really matter. So if I hit preview
real quickly, you can see how this looks. So instead of three
column layout, we now have two column layout. And because we are
on the tablet, perhaps the best idea is to ungroup these
components because you cannot hover on tablet because you're using your finger
and not your mouse. And same story right here. So this is how you are doing
the responsive designs to just basically arranging
these elements from top to bottom, left and right and
just move them down. Move this one up,
move this one down, scale them according to
the width of your screen. Because the width
is what matters. The height doesn't really matter because height can be endless. So that's where I'm going to end this lesson about
responsive design. Because once again,
we're going to tackle it in a lot more
detail inside Webflow. So there is really
no need for me to explain this
further right here, but I just wanted to explain
to you what you can do in Adobe XD and that
you can achieve some of this responsiveness
on your pages. In the next video, we're
going to start with Webflow because we already exported
all of our awesome items. And I'm going to show you how to get started with Webflow, what it is and how to navigate around it if you've
never used it before. So I'll see you there.
148. Future Of Adobe Xd: In this last lesson, before we move on to Webflow, I just wanted to
cover the future of Adobe XD because with recent news of buying
Figma from Adobe side, and I just wanted to give
you my $0.02 because I'm also an Adobe XD ambassador and I'm working closely with
the Adobe team behind the scenes on all of
this as it unfolds. So basically what
you need to know is if you know how to design, if you know the
structure of design, if you know the how to structure the design
from the beginning to the end for it to solve the right problems and to
help the right audience. You don't really care about the software you're
going to use. Because if you are
a good designer, you can even use Microsoft
Paint if you want to, and you will still
create good designs. So it doesn't really
matter which type of software you're
going to do and use to achieve those goals that you have on the project
that you're working on. Basically what's
going to happen is at the moment of
recording of this course, talks are still going on. So this byte isn't final yet. They'll still have to
make it final basically. So they still have to
talk with the people who actually own Figma because
it's not just one owner, it's multiple different owners. Everybody has to be on the same page in order for
this buy-in to go through. Also, a legal teams have to
reside with one another. They have to sign bunch
of different paperwork. And then if it
actually goes through for Figma to become the part
of Adobe Creative Cloud, as every other
Adobe products is, there needs to be some changes and those changes need to
happen inside of Figma. So basically, Adobe fonts
have to be incorporated. Better image optimization and better image inclusion have
to be included inside. Some 3D functionality
has to be included, and the video has
to be improved as well as the native
low T support, all of which Adobe XD
already has, Figma doesn't. So at the moment of
recording of this video of Figma just introduced
the video possibility, and Adobe XD already had that possibility
for over a year. So for all of it to go through and for them
to shut down XD, it will go something
like a year and a half. And in year-and-a-half time, you will be able to easily transition to Figma
because Figma will look like XDR lot in year and a half time once it
becomes the part of Adobe Creative Cloud suite. In terms of XD and
shutting it down, they will not shut
it down overnight. And I'm speaking with
Adobe XD team on this all the time because I
have all of these courses, I have all of these
YouTube videos. And I need to know because
a lot of my students are asking me what's going to
be the future of Adobe XD. How it's going to
look like is once the transitioning
starts to happen, they will slowly phase
out updates to Adobe XD. Once again, they will not
switch it off overnight. And over the next year or two, XD will still exist as it is. And it will still get some basic updates
from time to time. And because they have a lot of different users using Adobe XD, I think it's something over like 1 million or 2 million users using Adobe XD on
day-to-day basis. You can just imagine that all of these people are
going to be really angry if you just switch off their favorite tool overnight. So they will slowly
transition over to Figma. Once the Figma becomes the
part of Adobe Creative Cloud, if everything goes through
on a legal side, obviously. And then once they
switch off XD, the idea behind it is it will
look a lot like Adobe XD. So the two will basically
look almost identical. Just the tools that
you're used to in XD or in Figma are going to be
tiny, little bit different. E.g. the positioning of some of these elements are going to
be here instead of here. So nothing too major. And the last thing I want to touch upon is the
file compatibility, because you will still have
all of these XD files. E.g. I. Created a design
system called inception. And you can check it out on my website, Alex, on design.co. And that Inception
design system is solely created for Adobe XD. But once Figma becomes the
part of Adobe Creative Cloud, hopefully you will
have the option to use XD files natively
directly inside figma because of all of
this file cross back compatibility that Adobe
Creative Cloud has. Because currently,
you can open up e.g. Adobe Illustrator file in XD. You can open up
Photoshop files in XD. You can open up a different
icon sets and icon images, let's say in InDesign, you can import them
to illustrator. From Illustrator, you can send them over to after effects. From After Effects,
you can send them to premiere and so on and so forth. So there are all of these
workflows that need to happen before they finally
shut down Adobe XD. And that's going to happen
over the next year or two. So, once again, going back
to the start of this video, the whole point of
this course is not to restrict you to Adobe XD, is to show you and to
teach you how to apply these best methods and
best methodologies using the design thinking and
using the design process. So no matter which
tool you are using, you're still going
to be able to be the best UI UX
designer that you can. So with that out of the way, let's move on to Webflow and actually start to build
off the web plot. Now.
149. Website Design In Figma Introduction: In this part of the course, I'm going to show you how to
create a design that we just created in Adobe XD, figma. What are some differences
between working in XD, working in Figma, and
which two do I prefer? Why create something like
this in the first place? Well, if it didn't know already, Adobe bought Figma for huge sum of money over
the next year or two, they're going to
integrate it into their Creative Cloud
suite of tools. What this means for you as a designer is basically
nothing at all. If you know how to use Adobe XD, you pretty much know how
to use Figma as well, because those two tools
are exactly the same, except in a few key
features that figma has. Adobe XD doesn't
have, and vice versa. Now, what this means
for Figma overall, they say that they're not
going to change it at all. It's still going
to stay the same. But Adobe is not to be
trusted, in my opinion, because if you just look over the past few decades
of their business, what they did with macro media, what they did with Dreamweaver, what they did with dementia, and recently what
they did with XD. They're going to do pretty much the same thing with
Figma as well. What this means is
they're going to slowly add new features over these existing features
and turn it into some sort of version
of Photoshop like they do with all of their tools. But we, as a designer, have to adjust and adapt to these trends and
changes in the industry. And at the end of the day, these are just tools. So if you watched this
course up until this point, you saw that the
design process is not just how to work inside of a design tool
like XD or Figma. This is just a really small part at the end of the puzzle. Also, one more thing
I want to mention is I'm going to show
you both workflows because in this course
we are going to tackle Webflow in the next
section of this course. And I'm going to show some
differences how to export files from XD and
then work in Figma, work in Webflow and how to
work in Figma directly. And then just copy and paste
your design into Webflow. And why I don't think
that that's a great idea. In my opinion, you should
always export all of your assets and recreate it
from scratch in Webflow, except if you're creating these really simple
landing pages which can be recreated in, let's say 1 h or 2 h or
something like that. In my opinion, than that
plug-in really worth trying. And it's really worth the
effort from figma to Webflow, but not the other way around, not for these, let's say, complex pages because
in my opinion, if something's going to break, if you don't know how
to fix it in Webflow, then you're really
going to stumble. So make sure to check
out the Webflow part and make sure to see how to
build it from scratch. And I'm not going to re-record that section once again
because it's already been recorded from these
exported assets from Adobe XD into Figma because
it's exactly the same. Once again, image is an image whether you exported
from Adobe XD or Figma, you're still going to end up in Webflow in this
particular example. So as I said in the next lesson, we are going to start with
this transition from XD Figma. And I'm going to show
some differences in how to work with both tools. So I'll see you in the next
lesson and let's get started.
150. Mood Board And Sitemap: Alright, less than
jump into Adobe XD. Let me show you where we were
and where we're going to end up during this
section of the course. So here we are in Adobe
XD and this is what we created so far, as
you might remember, we created these paper wireframes
be created user flows, sitemaps for the
content architecture. Then we created
this mood board by copying and pasting
images from the web. And we created this style guide at the end of our project. Now, I'm not going to cover exactly the same steps because I already created them and you already watched them probably. So you will just be bored because everything
is exactly the same. What I'm going to do in
this part of the course is focused not on
paper wireframes, focus on the user flow. But I'm going to show
some differences in Figma regarding these
arrows in particular. And we're going to work on sitemap and content
architecture. And not because of
the content per se, I'm just going to
copy this content from here and paste
it into Figma. But I'm going to show
some organization tips and tricks that you
can use in Figma debt. Adobe XD has but are a little
bit different once again, then for the mood board, we're just going to copy this because I don't want to waste your
time for this style guide. Same story. I'm just
going to copy and paste this because we're
just using the same assets. And I'm just going
to show how to set this up for your
developers later because Figma has
this feature called pages which Adobe
XD doesn't have. So I'm going to show
some differences there. Then we're going to
attack our design. We're going to start
from homepage, move on to cars, selected
cars and so on and so forth. So I'm going to do
exactly the same thing like we did right here. I'm just going to show
how to recreate it in Figma and what are
some differences. I want to walk you through this process entirely
from scratch, as I said, because I just
wanted to show you that these tools are
almost exactly the same. As an outsider. You might look at some features
and think for yourself, well, there are some
main differences here. They're not exactly the same, but trust me they are. As I walk you through
this process, you can watch the
entire XD part of the course and now the entire
film part of the course. And see for yourself how different these
tools really are. The truth is, they're
almost exactly the same. That there are some, just some few differences
here and there in, let's say naming conventions
and these pages, e.g. how components work
and stuff like that. But at the end of the day, the overall picture is
exactly the same and these tools do
exactly the same job. So what I'm going to do
is put this to the side like this and show you
how to work in Figma. So here we are in Figma. And as you might notice, the tool is a little
bit different than XD. Because in XD, if I bring
it back one more time, you can see that we have all of our features and all
of our components, colors, styles right here, and we have our tools on the left-hand side,
while in Figma, we have our tools right here, and we have our properties
panel right here. Sharing is exactly the
same as it is in XD. You just don't have this design prototype
share right here, but you are designing
right away. You don't need to share per se, you just need to share
once it starts sharing, and then it's going to auto update because
it's in the browser. But here you can just
click to preview, same like it is in Adobe XD. And instead of having all of
your colors, styles, assets, icons on this side, you're just going to
have them on this side when you click
somewhere outside. The other major difference here is we don't have our boards. So in XD we have our birds. So all of these are art boards, as you might remember, this e.g. is 14 40 by 5775. So I'm going to go ahead and
copy that really quickly. Just this width. Go back to here and here I
have to hit F for the frame, drag a quick frame. And then here for the width, just paste that one N. And here I have my frame. If I remember correctly, that is a homepage. So let me copy this
text right here. Go back to here,
double-click on this name of the frame control
V and hit Enter. So basically what
I did right here, he's created an airport. It's just, it's not
named our port in Figma. It's named a frame. And the frame has a few features that are
ports doesn't have. But basically, in a nutshell, they are exactly the same. So let's get started with the first and I'm going
to hit Delete on this one really quickly
because what I want to do is drag x dy outside. So you don't go blind on me while I start
working with this song, we're just going to
hit Control C and Control V to paste some
acids here and there. So I'm going to come in
right here and paste in this paper wireframe
inside like so. Then what I'm going to
do is basically create a report or a frame like this. And I'm going to call it
moodboard. And let me check. It's 19 201-080-1920
by 1080, like so. And then I'm going to go
ahead and select all of the contents which was inside of that mood board originally, and selected hit
Control V to paste it. And you can see it's
going to paste it in the exactly the
same weight, just Instead of having
separate images like I have right here in XD, it's going to paste them
in as a single image. So what I can do at
this point is called this mood board images. And if you want to
export separate images, what you can do, because as
you can see, I selected them. All right, here.
You can do this. So you can do control C, copy, control V paste. So it's going to
paste a single image. Then you can scale
it by holding Shift and pasting it in right there so you can position
it where you want to. But in this case, I don't want to waste
your time because if we want to see how
I got these images, make sure to watch the mood
board section of the course. Then what I'm going
to do is drag and drop my logo inside. And I'm going to
place it somewhere around here and I'm
going to call it logo. And you can see that we have
some issues right here. So what I'm going to do first
of all is e.g. let's see. I may want to increase the letter spacing
to something like this, then make sure that
these two are centered. And I'm going to put
the outline as it is, select my logo, and this is
your component right here. So Control Alt click or
Command Alt click on a Mac. Instead of control K, You can see it
says control Alt K here in XD is just Control K or Command
K, Command Alt key. So basically exactly
the same logo. And if you want
to make a version of this logo, we don't need to, but if you want to, what you can do is
just click right here to add a variant. What the variant is, is a version or our component child of
this main component. And in this case, let's
see what we can do. So this variant, I
can call it e.g. instead of variants to
I can call it white. So you can see that
now we have that. And if I double-click
right here, you can see property one white. So the property one means
that it's the first property. If we add another variant, it's going to be property to property three and
so on and so forth. So no matter how many of
these properties you add, it's going to end up like that. So I'm going to
select my outline. Click right here. Make sure to choose white. And I'm going to add this white
as a color so I can click right here and let me hide myself so you can see
that a little bit better. And I can then click where
it says color styles. I'm going to click
right here and call it white, like that. And description
pure white color. There we go. So now we have that white style. You can see that it's applied. And I can select these two texts and come to my fill color, which is this one right here. Click these dots. I
think select white. So it's going to update to that. So now we have a logo
with two versions. We have white and we have
this dark original color. So let's go ahead and organize
these a little bit better. I'm going to nudge
them are like so. And before we move
on any further, you can see that we have
the page right here. I can click on the Page, right-click right
here, renamed page. And I can see e.g. assets or a spider
because that's the name. Acids. Hit Enter. There we go. And I can create a new page, and I can call it design. So inside of the design, maybe I want to select Control C and Control V to
paste these wireframes. Because if I want to remind
myself at any point, if something has been
done correctly, e.g. and I can double-click
right here and call this paper wireframe e.g. and then switch back
to a spotter assets. I can get rid of
it if I want to, but I'm going to leave
it as it is right here. Now, what I want to do next
for this particular section is to start creating this sitemap or
content architecture. So hit frame, hit F. Now click and copy and paste
the name of the texts. Once can sitemap
content architecture for this particular case, what I'm going to do
is 1173616 because, whoops, not the logo. This 11173616. There we go. Because I want the content
to be exactly the same. And wanting I want to
mention is you're going to get these Figma files
as project files, same like we did with XD files. So make sure to download them, make sure to open them up in your computer just when you want to open them
and come right here. Back to files and
then File Import. And you are going to import
these files as new files. It's basically going to
see something like import from some other tools
or something like that. So let me actually just checks. So this new design
file and import file, you can click Import file to bring in files from other tools. And then inside of that, you're going to be
able to open it up. So let me go back to
my file, like so. So there we are and let's jump
inside and quickly create this content architecture
because we are already 10 min into this video. So let's quickly create
that finished there. And then I'm going to go back. To user flow in the next video. So let's get started
with the homepage. And first of all,
let's create a text. So let's choose Poppins
from right here. Poppins, there we go. And Poppins is going
to be 20 irregular. There we go. And color can be
pure white, e.g. so what I can do at this
point is typing home page. There we go. And what I can do
is hit Shift a, that's going to create
a frame around it. And I'm going to use exactly the same settings
as I did previously. So I'm going to make
sure that it's centered. And I'm going to include
horizontal pairing of, let's see, 44, 44 pixels. There we go. And now I need vertical
padding of 26 pixels, e.g. and I'm going to get
exactly the same shape as this shape. Now just in Figma. Now in terms of colors, let me choose that color that we already have
right here and here, where it says Fill, I'm going to click Plus click right here, paste in that color. There we go. And now I'm going to select
the text color right here. And let's see, actually
this should be white. There we go. Selection colors. Let's just see. So fill. There we go. If I select my text,
now, there we go. So this should be white there. Okay? So if I hold my
Alt or Option key, you can see we are 26
from top and bottom, and 44 from each side, same liquidated right here. So you can see now that
we have the frame. And in terms of
naming conventions, Let's go with that same
naming convention. So I'm going to call it nav
item like I did in Adobe XD. And I'm going to
just duplicate it. So Control D. And here what
I'm going to call it is cars. Control D. This one I'm
going to call loans. Control D. This is
going to be Contact Us. And if you watched the video
about content architecture, which I really
encourage you to do, what you should really do is basically think about what sort of content will
go on each page. That's the really,
the whole point of content architecture. And in this case,
we're just thinking about what we will
include in which page. By that, I mean, what each page needs. So let me try to actually
copy and paste the text, but it's just based
in as an image. So let's do that. So hit T, I've been navigation. And let's just check
what it did right here. And this is what's
going to be fixed in the later versions of Figma. Now that it's part of XD. So let's check on this color. So I'm going to
select this color, just let me see
what I called it. Dark hitting color, I think. Yeah. Let's rename it and let's quickly add
it to here, click here. So dark, adding color, dark haired in color,
and there we go. So now what we'll do is
go ahead basically and create a group and
call this group. Let me see what I called it. Inside of here is home sections. Now, for this group, I can create auto
layout like this. And I can put it to
the bottom, like so. And let's see what
I did in Adobe XD. You can see right
here that we used stack to the bottom of 20. So let's go back to Figma. So stacked the bottom 20
auto layout in this case. So when I do the duplicate
and hold Alt key, you can see that we have 20 distance between
these two items, which is what we want really. So who we are? There we go. You can click outside Control D, it's going to place that. So what we do, control D, Control D, Control D. So this is going to be our
benefits where we are and map like so this is
going to be Contact Us. Then finally control D
One more time footer. There we go. So now that we have
these homes sections, what we can do is
actually put these two. So this nav item
and home section, we can put them in
a group control G. And let's see, I
can call this e.g. homepage like so. And make sure to turn
auto layout for it. And this time I'm going to
make the distance of 40. There we go. And now I'm actually going
to end this video here. Get rid of these. Because what I can do is same story like it
did in Adobe XD. First of all, make sure that
this is centered like this. And then make three more copies. So Control D, Control D. Oops. Control D, like so. And I can now go ahead and
double-click inside of this and call that cars and
then change all of these. I'm going to
double-click right here, type in loans and
change all of these. Double-click right here
and type in Contact Us, and then change all of these. So see you in the next video
once I'm done with that, and then we're going to move on to user flow. So
I'll see you there.
151. User Flow: Now that the sitemap I
content architecture is done, Let's now move on to user flow and to show how it
looks like in XD. So this is it. We're going to quickly create these components
same length like we did for the content architecture
right now in Figma sort, let me show you how
to do just that. So we're going to put it
somewhere around here, e.g. so space and left mouse
click to navigate, hit F for the frame. Draw one out and I'm
going to call it e.g. User Flows same like we
called it in Adobe XD. Now let's actually give it the same, Let's say dimensions. So let me select that one and
see what we had right here. So we have 18 73
with 749 like that. So width and height, and I'm going to place
it in right around here and then position
this to here, maybe somewhere around this. So maybe we can replace this
to look exactly the same, like it is inside of XD
to something like this. And then I can maybe position my logo and
roughly around here. And I'm going to position
that logo a little bit different because
I'm going to create a style guide in
the next lesson, show how to do that. So we're going to
place this logo there, but for now let's just
position it maybe right here so we can move
this a little bit closer. Now, let's head
over to user flow. When first things
first I'm going to draw a few rectangles. So hit R, hit are once
again inside of there. And then I'm going to
copy those two colors. So copy my main blue. Paste it in right here. There we go. I'm going
to click right here. Click to add new color style and let me hide myself so you
can see what I'm doing. And I'm going to call
this one main blue. I'm call it main blue color. So this is actually
the main difference in XD figma is because you can see d's descriptive options and you can further explain what
this color is used for. So basically, if this color
is used just for the buttons, then you can describe it. E.g. main blue button
color or if it's used just for background images or for drop shadows or
for whatever else. You can then describe it here. And this is especially
useful for developers. Not you have Show More Options. So when I click right there, you can see that we
have these properties. I can adjust it, or I can even add new
properties right here. E.g. I. Can add the overlays, I can click right here. And then instead of solid, I can include a linear gradient. So I can maybe lower down the opacity
of that linear gradient. And I can further add
all of these options. Now, I can just hit Create style because we don't
need any of that. I'm going to just
hit Create style. And now we have this
main blues style. Now I'm going to
do the same thing. So let me just copy
and paste this one. Click right here,
click right here, and call this hover color. Hover color or
button hover colour. So our developers later, i us know what that is. So now that I created those two, let me get rid of
them really quickly. And I'm going to use that
same Poppins 20 texts. And I'm going to show you how to add that text a
little bit later, but for now we're just going
to create it from scratch. So what I'm going to
do is basically create a circle and the shortcut
is 0 right here. You can hold your
Shift key right here. And let me close all of these so they're
not bothering us. So for this one, what I can do is call
it circle, like debt. And for the dimensions, Let's go with one-fifth,
t with one-fifth. So something nice and large. Click on your colors, hit main blue, type
in the text inside. And I'm going to call
it entry like that. And as you can see,
it's going to keep that same color and let's
attach a white to it. And group all of them, make sure that they are
in a center like debt. And I'm going to put them
in a group first of all. And I'm going to
call that entry. And then I'm going to turn
that into a component. So now we have entry. So I'm going to place that
right here really quickly. Then what we also have is if
I scroll all the way down, we have entry, action,
process and decision. So for the action, what we are going to do is basically create
that lighter circle. But now that I look at it, we didn't really use it. So what we can do in maybe
we can just use the action. So let's go again. So hit 0 right here, create a circle, 15150. There we go. And I'm going to attach
the hover color to it. Going to call it circle. Then use the text tool, type in action like that. And just make sure that the text is center aligned same
story right here. So just make sure
that both of these are centered like that. Like, so, there we go. And I'm going to group
these to call it action. Can hit Shift a immediately. I'm just going to show you that the workflow that we used in XD works exactly the
same here as well. So now that we have action, what we want is the process. So for the process, let's create a quick rectangle. You can hit R right here. And for the process we can
use exactly the same color. There we go. And I'm going to call it
the rectangle. Like that. Hit T for the Type Tool, I pin process like that. And let's see what
we can do right here so I can nudge it to here. And let's see, this
one was 86 in height. So let's do that. 86 in height and make sure that this is in the
center. There we go. And for the sides, what we can do is
maybe include 44. I think this is fine. Yeah. So if a group it and
call it process, there you go, hit Shift a and then I can
turn it into a component. So this time I went
the other way around, but still you can see that
they are showing as component. So basically you can do
it however you want. Finally, what we
have is a decision. So to do that, what you
can do is create a square. So let's go with our once again, and let's turn this
into 100 by 100. There we go. And we can use the same
horror color. There we go. And I can call this
decision like So. Hit the decision that hit
Shift while you're rotating, make sure to position these
two in the center like that. There we go. And actually, let's turn
this into a dark color. So main blue color. And group these to
call a decision. And then hit right here to
turn that into a component. Now finally, to use
all of these arrows, what you can do is just
use an arrow from here. So to connect all of these
and to turn it into this, what we have right here
inside of our XD file. So what I can do actually is select all of it like
that or control C. Come in right here, type in Control V, and it's going to
paste it in as image. So it's going to be a nice
little reference for us. So what we can do right here is maybe make some selections. So right around here, we have this decision. So here instead of process, what we will do is
type in something like Browse cars and you can see that it
adjusts automatically. So for this action, we're going to
type in view card. There we go and make sure that both of those are in the center. So same story like in XD before. But for some reason
it won't nuggets, so let me select it and manually and place it in right here. So Vieux Carre, There we go. Then we have this decision. And let's make sure that
they are all centered life. So make sure to nudge them here. So here up top we see, see low, so Control
D one more time. So see loans. There we go. This will go to the
center of this Control D. Down. There you go
and see Related cars. Make sure that is in
the center control D. Here I'm going to
write in contact, dealer makes sure that
is in the center. Control the book. A test drive, allow the loop
and then duplicate this one. Instead of entry type in exit. Now that we have are User Flow, what do we can do at this point
is connected with arrows. So maybe we can space
these and maybe position them like so maybe
nudge it a little bit. Maybe we can make sure
that these are centered. Move them around a little bit. Maybe do something like this, something like this
because we have space and I'm going
to nudge it here. Then here makes sure that this, these two are centered and
this is roughly around here. So now let's go ahead and
add all of those arrows. So first things first, I'm
going to just use Shift L, but I'm going to click the
arrow just to show you. You can use the shift. There we go. Now 40 arrows, if I
remember correctly, yeah, if we use this color, you cannot have this circle. You'd have to recreate
it if you want it to be exactly the same
like it is in Figma. But for now, I'm just going to use it throughout this circle. So let's jump inside of here. Let me actually
move myself here. So here maybe we can use for, for the thickness,
for the color. I can go with hover color and instantly we have our arrow. So what I can do is selected hit Control D to duplicate it, Control D to position
it right here. I can see that it jumped
to the same distance, but I want it to be roughly
around here. There we go. And maybe these two
are not centered. Now they are. So
let's go ahead and quickly centered all
of these. There we go. So now what we can do because we have these more
complicated arrows, like these ones, e.g. we can do some combinations. So first of all, let's finish up with these sample arrows. So Control D, Let's nudge
it to roughly around here. Control D, position
it here like that. And I'm going to hit
Shift. There we go. Make sure that that's in the center position
at 23, let's say. Then Control D and cover
and rotate, hold shift. There we go. And 23 here, and let's see 23
here. There we go. Maybe we can do
the same distance just for the sake of it. And position it here. Let's see, alt 20,
two-and-a-half. There we go, 24 or k makes sure that this is in
the center like that. And I'm going to leave
this as it is right now. So the only other thing we need, this one and this one. So let's select this one and this one Control D
to make duplicates. So I'm going to
place this one here, this one here, there we go. And I'm going to nudge
it roughly around here. So let's see there. And this one is going
to go to the center, and this one is going to
go here. There we go. So now we need these two. So we need to connect, see
yellows and contact dealer. For some reason I have
a duplicate here. Let me get rid of it. So what I'm going to do is Control D to duplicate this one makes sure that
it's in the center. Control D one more time. And I'm going to
rotate this one. Let's do that again. There we go. So now what I can do is
actually extend this one. Hold my Shift key to
come to the center. Extend this one,
All my shift key, and then just select
the end here. So let's say none. And then these two are
going to connect here. So this is the first
advantage of Figma over x, z in my opinion, because
you have a tool like this. Now we don't have the circles
which I created in XD, but no matter, we can
just use them like so. So just hit Control
D on this one. And I'm going to
nudge it right here. So let's zoom in a little
bit so that we can use them and merge them apart. There we go. So what we will do is go from C
related cars to view car. So in this case, let's go ahead. Rotated by holding
Shift. There you go. Make sure to position this in the center of our
circle like so. And then just gently nudge
desk to the right, like this. Make sure it's in the center. Make sure that this
meets right here. If the holding shift,
and there you go. Basically, in a nutshell, we just created our user flow and it took us 14 min to do so. So there are some advantages
to this workflow. There are some disadvantages. You can see e.g.
ice just selected all of them and I'm
trying to move them. And sometimes it
just won't move, sometimes it's going to be a little stubborn on
me and stuff like that. So you can see that here. We don't have those blue dots
that we had in XD version, but still, I think it's going
to do the job just fine. Just keep in mind, you
can go to fig germ, which is something which will
not cover in this course. And for the Germans
basically almost created for stuff like this, but I wanted to show that you
can do so in Figma as well, using exactly the same workflow like we used so far in XD. So for now, what I'm going to
do is select all of these. Now let's see. This is the arrow which went away from
us and hit Control G. Call this arrows just to keep things a little
bit more organized. And what I'm going to do
is hide this user flow. So that's basically
it for our user flow. That's basically it for
the structure here. In the next lesson, what we will do
is focus on this, which is the style guide. So I'll see you there and there we're going to structure
our typography. I'm going to drag and
drop these icons. I'm going to position the logo. We're going to figure out the buttons and make sure
to position them there and basically get
all of our elements into shape before we jump onto design and before we end up with design of the homepage.
So I'll see you there.
152. Creating Style Guide: Let's continue and work
on our style guide. So first of all, let me create
that frame really quickly. So F for the frame, now click call it style guide. And once again, we are on
the pages as Pilar assets and we're going to
switch to design when we actually start
with the design. But let's first finish up with our asset creation process. So here if you
want to extend it, you can just click
right here and extended however long you want it to be. But in our case it's
going to be 2,400. So I'm just going to
try to make everything exactly the same like
it is in Adobe XD. So first things first, what I want to do is
type in colors right here. There we go. And this one, I'm
going to go with 32 and bolt, like debt. And the color will be that
dark here adding colors. So I'm not really sure why
it didn't translate it. Oh, there we go. So it took
time to update a little bit. So we're going to place it
64 from the top, like that. And we're going to place
it 32 from this site. So let's see, you have this nice little option at the top showing you where it is. So two pixels. And if I hold my Alt
key or Option on Mac, you can see we are 64.32. So let's go ahead and start with the topography because that's much more important,
in my opinion. These colors because
they are going to be really quickly created. So typography, I'm going to paste in that
text right here. Make sure it's left aligned, make sure that this is
left aligned as well. So we don't have those
issues later. There we go. First things first
I'm going to hit Control D right here and basically copy and paste in this entire text inside of here. And first things first,
this is going to be 64 bolt. There we go. And I'm going to place it, let's see 40 from here. Like so. And then I'm
going to move this down, put this in a group
called topography. Like that. Hit auto layout
or shift a mixture if 40 is the difference and then
I'm going to select this one and coming right here. So first things first,
let's see for the colors. Yes, we can have that
heading color. That's fine. I'm going to click right
here and add a new style. And I'm going to call
this H one like that. So basically this is
going to be our H1. And now let's go ahead and duplicate that one.
Click right here. Now I'm going to click on
this link to unlink it. Then for this second one, what I want is this. So maybe I can just Control
D and select all of these. So it's much simpler
for us to create. Let's see, this is
going to be textblock. There we go. And paragraph. There we go. And unlabeled text
in there we go. So first things first, let's go ahead and check
if we have this setup. So make sure to select H1 and then click on
it, click right here. And let's see what we have. So we have what it
says, a line spacing. So we have a letter spacing
and we have line height. So in this case it's auto. But here we're going
to type in 86, e.g. there we go. And
now everything is going to be much
sharper. There we go. So this is our H1 here
for this second one, what we want is to
turn it into 32. So bolt. And let's see for the color, I think it's the
same. Yes, it is. So it's this one to
one to two to four. There we go. That's fine. So that's the same. I'm going to go ahead
and adjust these. So we have 56 for the line
height or line spacing. How are you going to call it? So let's see 56. There we go. And I'm going
to click right here, click here and call it H2. Then for this third one, I'm going to do is, let's see, the
color is different. So maybe I should
actually create these colors so that
we don't get confused. So let's see like this. So we already have hover, we have main blue, we have dark heading, which is this color right
here, darker in color. So maybe I can go ahead and
really quickly, just do this. So our control D, Control D, Control D Control
D, Control D. Let's see. So for this one. What I can do is
click right here and then sample this color. For this one, I can do the
same and sample this color. For this one. I can sample this a light gray. There we go. This is
going to be pure white. We already have that. And finally, we have this last
one which is a body color. There we go. So let's
sample that one. There we go. So first things first, let's
add these ones as they are. So like this. And this is going
to be here just so I know what everything is. So to give them names, okay, we can start
with this one. So let's quickly add it. Create a new style. This is going to be h
three dash paragraph. So color for each
three and paragraphs. There we go. Recreate it. I did it. So let's try
that one more time. So h3, the paragraph, color, create style. There we go. Now, this one. Let's click right here
and then right here, call it dark gray. Create style. This we
will call a light gray. There we go. Then finally
this we will call body color. Okay? So now that everything
is finished, we can do at this point is maybe we can go ahead and remove this, select the disk
because we need to apply body color here as well. So just click here. There we go, because we want to make sure that this stands
out a little bit. So here, what we want with
this h3 is, let's see. So in this case we will
need that h3 color. So click right here,
h three paragraph. There we go. And
let's adjust this. So 40 for the size, we will go 24. There we go. Bolt is still there. Yeah. Let's click right
here at New Style, this is going to be HD. Now, this is going
to be text block. So first of all, let's
go down to four to 20. Let's go to regular dairy go. And here we have this color, which is dark gray. So select the dark
gray color right here. There we go. And 44, the spacing like that. There we go. So
that's our textblock. And let's create that style. So text block, because
later on in Webflow, we will use these exact style. So it's really important. So here what we will do is we are missing paragraph
for some reasons. So let's duplicate this and let me copy and paste this
right here. There we go. So for the paragraph texts, we need this to D color, so to D to e30. Let me check if
this is this color. To D to E, three zeros. So that's the same
for the paragraph. So H three paragraph
will I believe this is going to be 16, 26, irregular. And we are going to
create a new style, call it paragraph. There we go. Finally, we have
this label text. And that color is going to
be the same as this color. So let's switch to
age three paragraph. And here we will give it 12. Irregular. And what it says right here, 24 line height. There we go. So this is what we will call
unlabeled text Create style. There we go. Now, our styles have
been completed, our colors have been completed. And let's just create
one color swatch. So to show you how to do it. So let's go ahead basically
and create 177-17-7149. I'm going to actually no. Let's go with something
like 186 with 177. That's much better
position at here. In terms of corner radius you
put the coronary is here. So here we have
eight. There we go. And I'm going to adjust it from this color to our main
blue. There we go. And I'm going to nudge
it to be for the or 32, let's see from here. So 22, dash 32. Once again, when
you hit Shift and bottom arrow is going
to nudge ten pixels, same like in Adobe XD. So I'm going to call
this color Biji, like we did in XD or
color card maybe. And then hit T right here. And let's see. T. There we go. So
that's our color. In terms of the size, what we can do is 24 volt. So maybe we can use
one of these styles. So 24, and that's this
one. There we go. And instead of this color, I'm going to use, let's say this color. Make sure that this is
centered. There we go. And I'm going to
hit Control D to duplicate it and make
sure to position it here, and this is going to be r. Let's see, let's change it
to textblock. There we go. And we are going to
call it hover color. There we go. In
terms of spacing, Let's go with 16 right here. So something like that. There we go, there. Let me merge this down. Let's group this, and let's call this color card. There we go. Hit Control G. And I'm going
to Save Project colors. Hit Shift a to turn
this into auto-layout. And then let's see the
distance between these can be 24, like so. And let's see how
many colors I have. 12345678. So seven other copies. One, oops, not that. I should select
color card 1234567. There we go. And I'm going
to go ahead and rename. All of these are off-screen, so you're not bored. What I'm going to
show you here is, so let's go with 64 here. There we go. What I'm going to show
next is iconography. So first things
first, let's go ahead and use these colors Control D, position them here to 64. Then we're going to
select this text called iconography. There we go. And I'm going to jump
inside my icons, make sure to locate them
in your project files. I'm going to hit
Shift a controller, I should say, to
select them all, drag and drop them inside. So they're all sort of
bunch up here and there. So I'm going to organize
them a little bit later. But basically, what you
need to understand is it's going to be a little bit
different than you used to, to organize these inside
of Figma and inside of XD. So this is how they
are organized in XD. And I'm basically going to put them all in the same group. But before I do, I'm going to turn all of
them into components. So that's going to
take a bit of time. So I'm going to pause the
video there and stop it. And then maybe come
back to you in the separate video to show
how to do those buttons. And then we're going
to end logo buttons and these car cards just to show some layout techniques
really quickly. And then we're going to
end the video there. And then in the
video after that, we're going to jump onto design and started
creating our home page. So I'll see you in the next
video where we're going to actually finish up
with this style guide.
153. Creating Style Guide 2: So here is where
the style guide is. Now, I just went ahead and populated all of these
different colors, different names, sorted out
all of the iconography. And if I click through, you
can see that I just put all of these icons into auto layout with
a distance of 32. If you want to explore
it a little bit more, just remember, you can open
up all of these files. You can explore them
for yourself and see hi structured all of these elements so that you can
learn for yourself. If we go back to here, what it also did is brought back that
logo which was outside. Now it's inside. And I set up all of these
buttons and car card texts. So for the buttons themselves, Let's get started and let's
create them really quickly. So let's hit our right
here and position it 32, e.g. something like this. So I'm going to call
it btn BG right here, and I'm going to give it, let's see what we can do. Maybe eight pixel like
that for the height. Let's go for the width. Let's go with two to five. Height 73. There we go. And I'm going to hit T, type in main button like that. And I'm going to see, let's see for the texts, what we can do is
use, let's see. Maybe textblock. Yeah, I think textbook is fine. And for the color, Let's
go with pure white. Like so makes sure
the text goes from the center and it
should to position it here. There we go. And for the button background, what I'm going to do for the
color is used the main blue. Now what I'm going
to do is group it, call it main, main btn
for the main button. There we go, Hit create components and click
to create a variant. And for this variant, we are going to just change
this from the main blue to hover color because this variant is going to be called hover. There we go. And
now the only thing which we need to
do is select this, switch over to prototype. And you can hit show
prototype settings this way. And I'm going to click it. And I'm going to attach
it to here. There we go. So on while hovering, changed to property one, which in this case is
hover. There we go. And emission instant or you can go with the dissolve
or smart animate, but I'm just going
to go with instant. If we wanted to see
what that looks like, you can just click right here, but basically it just going
to hover back and forward. And that's what we really want for this
particular animation. And because we don't really
want to waste our users time. So when I hover right here, you can really see
it at this point. So maybe we should
connect it back. Let's see while hovering. Show prototype section. See what we can do. While hovering. Change to. There we go. Maybe we should
just drag one out. So let's go with assets. And let's go with style guide. Let's find our button. There we go. So I'm going
to drag it to here. Now when I hover, you can
see that it's going crazy. So first things first,
let's remove this. Let's go two times
and back three times. Back. There we go. So I just
wanted to remove this one. There we go. So we are now
just in this direction. So when I drag on this
button and hover, we can see that now we have this nice blue color
for the Hover section. So there we go. I'm going
to get rid of this one. Now we have our main
button with hovering. Let's switch back to design. And I'm going to
position it roughly around here and there
we go for a distance. Let's go with 64,
so 123 with 64. Nice. And then we have
that hover button. And now we just need
that button outline. So let's go with our once
again to create a rectangle. And here what we need
is to create that. So three to six, which 73. There we go. And I'm going to, oops, not x and y, width and height. So once again, three to
six with 73. There we go. Now I'm going to go ahead and
select that button outline. So I'm going to switch back to my layers and call it
outline button B, G. In this case, there we go. I'm going to use that same text. I'm going to type
in button outline. There we go. And in this
case for the color, we can go with a
dark gray color. Like so. And maybe I can make
it in the center. This should we eat as well? Like debt. And let's see what
we can call it. Btn outline. Lovely. Now in terms
of the outline itself, what I need to do is just basically use this
color as a border. So in this case, I'm going to get
rid of the fill. I'm going to include a stroke. And for the stroke color, I'm going to use the
dark gray color. There we go, like so. And let's see now right
here what we did is, as you can see, we
just highlighted that. So this is the default state, this is the hover state. So this is the hover
state in this case. For the harder we just have
this for the border color, which is this so to D to e30. And that's this color, I think. Yeah. So H three paragraph, just for the hover or q. So now let's go
ahead and do that. So BTN outline, let's
create a component. Nice. Let's create a variant. In this variant is going
to be called hover. Inside of the hover, what we will do is
just change this from dark gray to
HD paragraph and change this from dark gray to a CH, three
paragraph color. There we go. And now finally, let's switch to
prototype and then do the same thing as before. So select this one
and I'm going to drag it to here while hovering, change to no animation
instant. And there we go. We have finished our buttons. Make sure to position it here to keep it nicely organized. So 48, that's actually
fine. Let's keep it there. And what I will do is
positioned this here, this here, and group all
of these called buttons. There we go. This is 64 deaths. Lovely. And finally, for
the last section, which is a car card, I'm going to nudge it to 64. Let's see, 64, there we go. And for this car card, I can create it here, or even better, maybe I
can position it later. So I'm not really sure
what to do in this case. Let's switch to design, sorry. Be something like this. Yeah. So what I can do is
just use these as references. Because we just have
the outline here. It's nothing too major. And this is for our Harvard, this is for our main car card. So let's get started
actually, let's create that. So let's go with
something like this. So I'm going to hit R
right here and make sure that it matches this
height. There we go. I'm going to go for eight
for the corner radius. And I'm going to
go for the fill. Let's go and set up the
pure white. There we go. And for the height, Let's go for 43, for the width, let's go with 374. There we go. Position it here in grade, and I'm going to call
it Stock Item B, G. Now for the stroke, Let's include the stroke
click right here. I'm going to go with
darker in color, but in this case, I'm just going to let see
what we can do right here. So stroke, dark hearing color, maybe we can use this one. Actually copy it from here and paste it
here. There we go. And I'm just going
to hide it for now because we don't need
it at the moment. Now that that's done, what I can do is hit
Control and D. There we go. And let's see what else
do we have right here? So we have car image, car image for it. I'm going to get rid of the stroke because
I don't need it. Here. I'm going to use this
dark gray or even light gray. I don't think dark gray is
really necessary for it. What we can do is expand
this a little bit. So for the top left and
top right corner radius, we're going to leave it
at eight, but these two, we're going to have
it at zero, like so. And let's see for the height, what we can do is
set it up to 250. This is going to be
our image of our car. Then the next thing we should do is include the
car card texts. So hit T right here. Once again. And let's call this. Lamborghini horror
Kahn. Let's see, that should be 24. 24. Is this one nice? Make sure it's left
aligned. It is. That's great. Let's see for the oral spacing, what we need here is 24.24. 24.24, That's great. Hit Control D to duplicate it. And here I'm going to
use the same text, but I'm going to use the
main color this time, which is the main blue. And let me actually copy
this price really quickly. There you go, Control
D One more time. And then here we are going
to use smaller text. So let's go with
regular actually. So H30, let's go with
textblock main blue. Let's go with H2
paragraph I think, or no, maybe we can go
with dark gray this time. So let's see dark gray. There we go. This is
going to beat the year. So 2021, hit Shift
a and call it, let's see years, kilometres like debt and then turn
it into this direction. That's fine. Let's see, maybe 24 is the distance. We are going to include it. There we go. And here
what I'm going to do is just duplicate
this one in here. I'm going to type in
how many kilometers has the car past? Or how many kilometers
does it have on the odometer or however
you want to call it? So then we can group
these three items. So the name, the price, and year, kilometres, like so. I'm going to call this e.g. car, cars texts create
auto-layout for it. And then maybe we can know
the distance. These 216. Yeah, let's go with 16,
Something like that. There we go. So let's see 24, 14, let's go with 24. And this time there we
go and maybe adjusted this for whatever
reason we have in this. Set this at zero like that. Let's set this to
zero like that. And now we just have a regular
text without these issues. So 16 is everywhere,
24 is everywhere. That's what I like. 17 right here at the bottom. This should actually be 24. So 241,616.24. So maybe we should extend
this a little bit less. Zero. There we go. So now we are 24
everywhere. For 50. Okay, so there we go. Now that that's completed, what we can do is group
this gold card card. Well, let's just
keep it like this. So car card. And let's create a component and we're going to
get rid of this one. And we're going to
put a components set, just put it to this side. And here we're going to expand
it like this one variant, which is this one. It's actually get
rid of this one. And let's add a variant. But I don't really understand
why it's putting it here. But it doesn't
matter now. It is. So let's just call it hover. Hover. There we go. For the hover, the
only thing which we need is to show
this. There we go. That's pretty much it. So
now on the default state, switch over to prototype, and let's connect these two. So while hovering, it's going
to go to instance to this. There we go. And
now I'm just going to quickly drag this to here. Switch over to the
design. There we go. So now the only thing which is basically left here is this. So how can you actually fix this is by having this same
border on this image. So let's go back to the
default state car image. And I'm going to heat stroke, and I'm going to have this
same stroke like this. There we go. And I'm
going to hide it. Come back to here, have the same stroke to
show it. So there you go. Basically deaths, how
easy it is and how super simple it is to create
a layout like this. But here, what we can do actually is maybe we
can hide it as well. Should we look into this
layout and what we did? So here we have the Fill
and we have the border. And the border is showing
it's zero per cent. Stock. Item B, G, E of width is at 374 in current
image, is it 372? There we go. So sorry. This image actually doesn't
really meet any border. So let's get rid of that
one and do the same here. There we go. The only thing
which it really needs is to beat 372 like that. And make sure to
select these two. We should have put
it in the center, like this, so that you have
one pixel on each side. Here, 372, there we go. Just lodge it one
pixel to the center. In maybe we should even nudge
it one pixel down. I think. Something like this. But in my opinion it
doesn't really matter. You can just leave
it like this because it's just a minor little detail. And it's going to be visible for just a
flush of a second. It's really all up to you. If you want, you
can push it down. But for now I'm going
to call it a day here because sorry
about my nose. I'm still having a
little bit of a cold, but I still wanted to
push through and bring this update to you
guys so you can enjoy both Figma in XD for
listing we should actually do. Before we wrap up this
section is just create this basic layout for this
particular art board. And we can use that
airport throughout. So hit F like this. I'm going to call it e.g. art board size or our boards
settings or let's say our port work carrier
website page. Let's call it that. Let's
adjust it to hear it. Let's see the settings we
have right here are 40, 40 for the width. So to go with 14, 40, there we go for the height,
it doesn't really matter. We can adjust that later. So now what we will do
is add a layout grid. So just click right there
instead of this grid, click right here at
columns, 12 columns. Let's see the layout
we had right here. As you can see, is total
collapse 38, 65, one-to-one. So let's try to replicate
this same layout. So let's see, first of all, for the color can change
in use some sort of, I don't know, maybe bluish or reddish color,
something like that. We can adjust the
visibility to maybe 5% just so that you can see what I'm doing and call
it a day there. Then let's go for the gutter. Because of COVID
38. There you go. And margins on each sides
should be one-to-one. There we go. So now we
have these two margins, 38 and column,
which should be 65. So let's go. It's
showing me auto, but I can go either way. So once 213085 deaths completely
fine. And there we go. Now what we will do is
just the reuse this when we start with the design and just paste it over to here. So there we go, Just
a couple of clicks. We set it up our documents. And basically it looks
exactly the same, unlike this XD document
that we've worked so far. Once again, if you
want to go deep dive into all of these details
about this design, make sure to check out the x D section about the
thinking behind the design, about the entire process, especially about
paper wireframes, going into the research
quantities architecture, so on and so forth. But this is just assured
that the actual design process in Figma and what's the difference
between fema in XD? In the next video,
we're going to tackle website design itself. I'm going to show how to reuse these components that
we created here. So I'll see you there.
154. Design Page Setup: In this video, let's file and get started with the design. And I'm going to show you how to recreate a design that we already did in
Adobe XD in Figma. So let's get started. So here we are back in Figma, and this is where we left
off the previous time. So what I'm going
to do first of all, is this website
page that we have. I'm going to hit Control C, come to the website design
itself to this page, hit Control V to
paste it inside. And I'm going to
position it right here. Obviously, we're not going
to use this because we already created this
design in Adobe XD. But if you're creating this for a first time or
if you're sharing this document with your clients,
coworkers are designers. It's extremely useful
to have something like this because
they can always reference to the paper
by frame and come back to it for some
additional details. So if I take you back to
the Adobe XD document, what we have is 123456 pages. So let's get started with this. So Control D, Control D, Control D, Control D, Control D. So 123456. And let's give them all names. So first things first, this
is going to be homepage. Next up, we will have cars. Then after that we will
have selected car. So when you select a card
from the course page, then go back to the selected
card and I'm going to walk you through the entire
process in just a second, just in case you didn't
watch the XD videos. And I highly recommend
that you watch them because as I
keep mentioning, I'm not going to go into too
many details right here. Not to repeat myself too much and be boring for
people who are already watched the part of the
course with the XD lessons. So this is going to be loans. And then to other pages
we have Contact Us. And finally, this
is just going to be an overlay for the light box. And because the light box
is going to be cut off, you're going to have the
height of 1080 pixels. There we go. And this is just going to
beat the overlay itself. So let me quickly walk you
through the XD file, like so. And I'm going to basically explain what this
website is if you didn't watch the XD
part of the course. So here we have the homepage. And on the homepage
we're basically going to show the entire offer
of this speech. So this is just going to
be a simple lending page. This websites, so who they are, let me hide these lines
so that you can see it. These guides. So who they are,
what they represent. So these are exclusive
car dealers. So basically they're
going to sell these high-end cars and not these cheap cars
that you can find basically on any
other shop floor or any other dealer
that's there. So basically these guys
are a little bit different because they are selling
these high-end cars. And therefore we want
to represent that and we will do so in
terms of imagery. So I already provided these images and you can see
these images right here. Basically this is how they
are going to look like. You have bunch of these
different images which we will use for our Webflow development
and not for design. Because for design we're
just going to use one of each basically to
create these cards, which we already created some exclusive selection on
the homepage is going to show the selection of the this
website and this dealer, what they offer,
what they have in the stock at the moment,
what they offer. So in this case, extended warranty, maintenance and loans. These are just some key
features that they're going to offer to their customers,
their benefits. They're going to give
you the free delivery no matter where you are
located in the country. Three-stage polish. So before they
delivered the cartoon, there are going to polish it in three-stage in part exchange. What this means is
they're going to take away your old car and they're going to deduct
that price of your old car, which they are
going to basically judge to how many
kilometer is is done, to what sort of stage that the car is in at the moment
hasn't been wracked. Is there any damage on it
and so on and so forth. Then we have the
Contact Us page. We have where we are with the map page and we
have the footer. Now, these sections
you're going to notice are going
to repeat a lot. So here we have the
contact Map and Filter contact map folds or contact map footer
content map footer. So therefore, it's going to
be really beneficial for you to create these as components
once you've finished them. And that's what
we're going to do. And basically, this page is, this website itself
is going to be really simple to create
in Webflow later. And the reason I'm not going
to use that plugin from figma tool workflows that
were pulled themselves released is because of
this particular page. Yes, you can create
this in that plug-in, but it's going to, to take a lot of different different
pathways around this design to make
this work in Webflow. So because of this page itself, I'm not going to use that
plug-in, but nevertheless, I'm going to show
you that plugging in one of the later lessons. Just for you to
see how to create a website like this in Webflow pauper, this
particular page. It's not going to
work in Webflow because we're going to use
some different techniques. So just keep that in mind. If you try to build
something using that plugin, makes sure to test it out
first and see if it works. Yes, you can create a
layout like that in Figma. It's going to be beneficial
for you either way and you don't have to import
all of the pages. You can create some
pages manually because you can create some
components in Webflow, you can create
some components in Figma is going to import
all of those styles, color choices, fonts, and components from
figma to Webflow. So you can use some of those, but just keep in mind that
page just like these because they require some additional
thinking outside of the box. And some basically
Webflow hacking to make them work
because there aren't any default options in Webflow prebuilt to
create layouts like this. So for these basic
pages like this one, like this one, these two, it's going to work just fine. But as soon as you encounter something like this
with this layout, with this sticky layout,
with this overlay. So when users click on
one of these images, is going to show them
this light box options. So that's where it breaks apart. So I just wanted to show you that and explain
that to you. Of course, images are
from Envato Elements, which I already
mentioned in XD section. And you have the
option to get all of these images if you get the Envato Elements
premium subscription, because these images
are premium images, if you don't want to, you
can then use free images. It's up to you. But
if you want to use these exact images which I'm
using inside of my design. You have to license them
from Envato elements, otherwise you cannot use
them in your portfolio. So make sure to check out
that license as well. Make sure to check out that PDF, make sure to check out
all of these images which I'm providing in this
particular collection. And as I mentioned, all of these assets are from
Envato elements. So that's going to be it
for this particular lesson. In the next lesson, we're
going to get started with the homepage and let me extend that just a
little bit like so. So you can just
click right here. And as I said, we're
going to get started from the whole page and start
building our homepage layout. So I'll see you there.
155. Home Page Design Part 1: Let's go ahead and get
started with the homepage. And first thing
which I want to do is head on over to my
assets and search for logo. Right here at the top. I have this logo. I'm
going to drag and drop it in place somewhere
around here. Let me check in my
original design. I think I position it at 20. So what I can do is
snap it to the top, shifts down two times, hold my Alt or option and
see that I am at 20 pixels. Then I'm going to go ahead
and create the navigation. So I'm going to type
in cars like that. And I'm going to choose the predetermined option
for the text styles. Let's go with textblock. There we go. Let me just check. Yeah, there we are. I'm just going to
use this color, so dark gray in this case. And let me align it nice
and easy with my logo. You can select both of them. You can click right
here, makes sure they are aligned and move
them three pixels down. There we go. So now that we have cars, what I can do is hit
Control G to group it. And I'm going to
call this Top Nav and turn that into auto-layout
in this direction. And let's see from these two Ds, I can do something like 24. I think that's going
to be just fine. Hit Control D, Control D
to make two more copies. This one is going
to be a Lowe's and this one right here is
going to be Contact us. There we go. Now that I've done that, I'm going to select all of them. So Top Nav and make sure
to snap them right here. Now first things first,
we should go ahead and create components
for each of these, because this is a default state. If it takes you back to XD, if you didn't watch it, make
sure to watch it once again. So we have the hover state and we have the selected state. So if I zoom in a little
bit closer right here and choose my car's default state
is this dark gray color, Horace state is
this hover color, which you can see right here. And then selected state
is this main blue color. This is going to be
selected when you are on the page where you are at
the moment to create these. So let's head back
over to Figma. And to do something like that, what I can do is basically
select all of them, hit Control C and take them outside to somewhere
around here. Because I wanted to be able
to create these components. So I'm going to just
select these as they are. And I'm going to turn
this into a component, turn this into a
component and this, and then I'm going to
create two more like so. And add another
variant at a variant, at a variant, Add
variant and add variant. Let me space them
out a little bit. Now, this is one annoying thing about Figma, if you ask me, is because you cannot do that inside of your art board
like you can inside of XD. So instead of XD, you can
just switch them in place. But here in Figma, you can do so right here. And then you can choose
whichever state you want, but it keeps creating
these variants. So that's something
which I don't really like about figma,
but what can you do? So let's get started. This is our default state. This is going to be
our horror state. So I'm going to just
select the type in hover. Select my hover, like
so. Hit Control C. There we go. And I'm going to
select this one. What a variant two. Then I'm going to paste in
hover color there as well. Select this one based in hover. Here. There we go. And this last one is
going to be selected. Selected. Let me
select, selected. Let me do so right here. And I'm doing this because
it's going to be much simpler for me later
to organize them. Because what comes
next is basically just changing these
colors here and there. So now that we are there, Let's select all of
the horror state. And let's go to the Fill color. Whoops, not the fill color, but select the text itself
instead of dark gray. Let's go to horror color, color, color, and then select this one
instead of dark gray. Let's go to the main blue. Main blue, and go inside, hit main blue. There we go. Now that that's been created, what we can do right here
is we can test them out. So here what I can do is I can actually go ahead and
get rid of these. So let me go to my assets panel. And actually what
I can do is select these base domain right here. There we go, Control G. Turn that into Auto Layout 24. Whoops, that's 62424. There we go. Make sure that we are in
the center of these two. There we go. 24 or 2018, 20. Just move this around
and just estimate. So here I'm going to select that and you can see
that we have cars, contact us and loans. So that's what we
have right here. And here we have the
default, we have the hover. We have selected, so I'm
going to select the default and that's going to be our options for this
particular component, you can detach instance
if you want to buy and if you make any kind of change to this main components, these instances are
going to follow. So let's quickly go ahead
and rename them to Top Nav. There we go. And I'm going to
drag this to here. Now that we've done that, let's go ahead and group this
and when to call it nav. And below the nav, what we're going
to do is basically include that hero section. So create a hero section. And I'm going to go ahead and
copy these really quickly. There we go, Control D. And we're going
to take this one. There we go, Control
D straight away. I'm going to change it to this. I'm going to change the
fill color to dark gray. This is going to be the H1. There we go. I'm
going to align them nicely right here. Lovely. And then assets. I'm going to drag my button in. For my button, I'm
going to type in something like explore cars. There we go, Nice. And then I have to
create that group. So Control G. Let me
switch over to layers. This is going to
be our hero texts. There we go. Let's turn that into auto-layout down 32 to be the distance. Make sure to space them
out to left-hand side. There we go, Nice and
easy, would it there? And one final thing
which we need right here is to create our hero section. Now to do that, I'm going
to bring in my image. So I have my image
of the Maclaurin. We're going to place
it in right there and then create two
circles. So it's hit. Alright, here he shifts. There we go. Control D to duplicate it, position it roughly
around there. And I'm going to call
this small circle. And this is going
to be big circle. There we go and position
it there and there. Now for the small circle, what we're going to do
in terms of size is, let's give it 1054105 just to make it exactly
the same lake it is in our in our original design in
XD and this big circle, Let's see, maybe we can
create it to be 13130. Like so. There we go. And I'm going to select the
entire page and just hide this layout for a second. There we go. Nice and easy. And what we are lacking right here is this white
circle, I think. So first things first, let's change the actual colors. So this PG circle should be, sorry, not this, but this, should we mean blue and this circle right here
should be dark gray. There we go. And now what I need is to
create this background circle. Let's go back to here. So hero image circle
is 388 by 388. So let's duplicate this one. Hero image circle. Let's see, color is
going to be white and the size is going
to be 388. By 388. There we go, something
like that and position it just behind this hero image. And make sure that these are centered, something like that. There we go. Make sure that this is
here, this is here. And I think that's great. Just to check this really quickly because it didn't
show the body colors. So let's actually
hide this year, we have the hero circles. We all have to create
it because I exported it from the original
design as an image. Now let's go ahead and actually apply that change
to all of these. So I'm just going to hold Shift. And for the fill color, I'm going to use body color. There we go. So now the next thing
which I am going to do is bring my columns back just so that we can see
what we're doing. And here I'm going to
introduce a few icons. So first things first, let's bring in the
key icon here. I'm going to nudge it, put it in the center. There we go, Control
G to group it. And then here I'm going to use that other icon for that sort of metal like that for the badge. Make sure that these two are
in the center control G. There we go, hit back to layers. And inside of XD, what I'm going to do
is name this like so. And name and dislikes. So position this a bit down, position this like so. And I'm going to group all of
this and call it hero IMG. There we go. What I can do is
select both of them, make sure they are
center aligned. Let's see, maybe
we can nudge them 100 from the hero image, from the top navigation, sorry. So now that we have the
image, we have the text. What we can do is group
these to call them hero. There we go and move on
to the next section. And for the next section, what we will need
is just this image. Snap it into place like so, and then just use
a few texts lines. So first things first, let's hit D. Let's organize
our texts a little bit. So let's do that one more time. There we go. Control D. And I'm going to
use another one. Control D. I'm going to use another one. There we go. Now, this one should
be a paragraph, this one should be h3. This one should be, let's see. Textblock.
That's fine. Just different color, dark gray. There we go. In terms of spacing. Let's C to D to D to E. So H three paragraph
should be in this. There we go. In terms of spacing,
Let's go with 24. So what I can do is make
sure they are left alone. We should do group them. Who we are. Text, turn Auto
Layout on down 24. There we go. And just make sure to
position it right here. So we have 12345 lines, and then this image is
going to align this to the center hit Control G are
going to call it who we are. And the distance
this 200 from here. So something like this. So 200. Let's go ahead and move
on to the next section. The next section is going
to be that exclusive offer. So to do that, Let's create a text
element like that. Paste in our exclusive
selection makes sure we are in the center and make
sure to choose h three. There we go. Make sure to put it
in the center like so it's going to be 200
from the section above. So just nudge it right here. Let's see 200. Lovely. What we're going to
do is actually bring in those cards that we created. So we can find them
right here. There we go. Here we have the same card. Position it right there. And what we're going to do
is position it's 64 here. 64, there we go. And I'm going to Control
D to duplicate it. Control D is going to
place it in right here. And I'm going to go back
and find my button, position it there, make
sure it's in the center. And make sure it's distance
64 from this card right here. Now, this button should
say, See all cars. Once again, because this is great about Figma and
not great about XD. When you switch to
hover, it going to change the text automatically. While in XD you have
to change it manually. So let me fill in some texts. So Cadillac Escalade
is going to be this. The price is going to be this. See, year is going to
be 2020. Like that. And let me switch over
to my layers panel and here where we are so years, kilometers card, text field. This should be a little
bit different because we have 28 distance here. Let's change that to here. I'm not sure why it's
28, it should be 24. So for some reason
It's updated here. So maybe we have to fixed
height, no fixed width. Know for some reason
it won't change or Derek up so it's changed when
a switch to fix, I think. Yeah. So when I switch to fixed width, fixed width here, fixed width. So when I change the height to fixed width is going
to change back to 24. So let's do that
for all of them. So fixed height, there we go. And fixed width. I don't know why it
does that happened. Because when you go ahead
and switch, everything in, XD is just stayed, stays as you told it to. So this is going
to be Lucid Air. This is going to be the price. And this is going to
be the kilometers, and the year is
going to be 2022. There we go. So now that
this section is finished, what I need to do is just
quickly test it out. See in the hover, there we go. So it changed and remembered, which is lovely about that. So what I'm going
to do is head on over to my course page. And locate a Lamborghini hood
occurred and select this. So for the car image. And I'm going to go ahead
and turn it into fill. Do the same thing right here. So just add a fill. There you go. What occurred? And I'm going to position my
image on top of the fill. Then do the same for
Cadillac escalate. Just locate the
image number three. Position it on top of it. And this is going to basically work a little bit slower
if the image is large, even though I optimized it, That's the issue with Figma. You cannot just drag
and drop images. Like you can eat Adobe XD, which is what's really
annoying about this tool. So when I drag it, it is going
to place it. There we go. So Lucid, Air, image number three and just place
it in right there. There we go. We have our cards. That's great. So let's organize
this a little bit better. So let me, first of all include these cards into a group car. Cards. There we go. Turn it auto layout. There we go. And now select all of this. And exclusive selection. There we go. And turn that into auto layout. So now that this section
has been completed, the next section is going
to be the Offers section. So let's go ahead
and create that. So first things first, let's go ahead and
actually copy this. So our exclusive selection, go ahead and click
in right here, where it is, right here. There we go and that
inside the nav. But here we have
to organize this. There we go. And I'm going to place
that to be at 200 as well. Like so. So what we offer, there we go. And I need that image
really quickly to show what they are offering
position that right here. And let's see, we can have it at 64 pixels from this edge. Make sure to align it. 64. There we go. And now I just have
to type in that text. But before I do, I want to drag in those icons
really quickly. So I need the maintenance cycle. I need the extended
warranty icon. Let me just find
it really quickly. For some reason it's
not showing here. Okay. Let's see the loans. Loans. There we go. If we choose warranty, I'm just going to use this
one. It doesn't matter. So let's go ahead and fill
it up with being blue. Or let's see what we can do. So when I switched to
Layers, open it up. So we have a part right here. Part has a fill on it. So main blue, this
one has a fill on it. So maybe blue this
one has a fill on it. So main blue, There we go. So that's done. So now this should be at the top because we want to
show extended warranty here, then this should
be down and this should be down
below that as well. So all of them should be
aligned with this one. So let's go ahead
and get started. So I'm going to choose
the text tool right here. Being extended warranty
makes sure I'm here. Let's see, 24 bolts. So that's going to
take us to age three. Lovely. And now what I can do is
actually select this, duplicate it,
duplicate it tomatoes. There we go. What I'm going to do is make sure that these
two are centered. These two are centered. So are these. There we go. I want to basically
duplicate this like this. Make sure that it's textblock. Make sure to position
it right here, and make sure to use dark
gray color Control D. Control D. There we go. Now, these two, I'm going to go ahead
and switch over to my Layers panel and
make sure to group them. I'm going to group these, I'm going to ungroup these two. There we go. So auto-layout, auto-layout and auto
layout is going to be 16. This is going to be 16 as well, and this is going
to be 16 as well. So what we need right here is to type in the word maintenance. This last one it
should say, uh, loads. In the last one, we
should have this text. In this one. We should
have this text. So this is basically
what they are offering. So here what I'm going
to do is type in Los. This is going to be maintenance. And this first one
should be 1.2. This should say
warranty. There we go. And now the distances between the text and the
title should be 24. So actually, let's select
this, put them in a group. Let's select this, put the
amino group and this group. So this one is loans, this one is maintenance. And finally, this one is 1.2. So when I put that into
auto layout and use 24, do the same for this one. And do the same for this one. What I can do as
well is put them in another auto layout
as well if I want to. So like this and the distance
between all of them. So let's call it something
like offer text. This text looks kind of small. Should be H2, actually. This should be H2 as well. So let's switch it. There we go. And this I think
should be H2 as well, if I'm not mistaken. Yeah. So instead of H three, Let's switch it up to H12, make sure it's
aligned. Yes, it is. This one is at 64, 200 grades, this 48. So what I can do is just
maybe nudge it to 64. Here, move it to be 200. Then this should be at 64. There we go. And then this should
be auto layout at 40 and just basically place
it right on top, like so. Or maybe you can even
put it in the center, doesn't really
matter, It's going to cover debt either way. So what we offer of
texts, there we go. So I'm going to basically select these three
hit Control G, What we offer like so and here you can put these in an auto
layout if you want to. I'm not going to bother with it. I'm just going to move
on to the next section. In the next section
is the benefits. So in this case, what
we are going to do is really quickly just
take some benefits. Image place sitting right here. Make sure that we
are in the center. Makes sure that we are 200. Once again, from the image
on top, there we go. Top of debt. What
I'm going to do is basically just draw a rectangle, so hit R and make sure that
we have it covered like so, so that it covers just the
full width of our image. And this is going to be called benefits
section background. There we go. That can be this fill color. So let's see, maybe each
three paragraph and image, we're just going to lower down the opacity to
maybe ten per cent. So let's go with
something like this so that we have this nice
transparent image. I think that looks great. Hail, Let's go
ahead and organize these sections once again. So let's see what we have. We should have a nav on top. Then hero, that who we are. That are exclusive selection. There we go. Then what we offer and now these benefits are
going to come in handy. So what I can do straightaway, It's just put them in a group
and call this benefits. There we go. So I'm going to
select this text. Type T are benefits.
There we go. Nice. Put that in the center
of these two like so. And just make sure
that it's right here. And let's see from the top, what I can do is maybe
95 or something. So nice, big distance
like that, Control D. And for this one,
let's use H three. There we go. Now this is going to be
free delivery like that. And I'm going to merge it here. And let's see for this
one maybe we can use 16. So for the paragraph
and for the color, let's go with white. So this should be white as well. This should be white as well. So actually, you know what, maybe we can use that
Artboard color here. The body color. I think that's going to be
much better option here. There we go. So I'm going to hit Control
D on this one or no, let's, let's first
place an icon. So first things
first, let's see, maybe we can position
these two to be at 24 distance like that. Let's use that icon. So first of all,
let's close this. And let's see, we need
to find this icon. Weight, the locater. There we go. The distance between debt
should be once again 24. So let's see where we
are at the moment. 20. So we are 24. So if I select and group
all of them, hit Layers. Free delivery. There we go. Control D or Control
D one more time. There we go. So now what I'm going to do
is basically just hit R, create a rectangle, select these two and make sure to
position this in the center. Then use that exact
same rectangle. Go back to here, align it, move this, align it to the grid. Select these to make
sure we are in a center. Get rid of this rectangle. We don't need it anymore. Now, this second one should
say three-stage polish. There we go. And just copy and
paste the texts. Because once again, these aren't the benefits that we
already mentioned. And this last one should
be part exchange. There we go. Finally, the text inside. Now in terms of these, so what I can do is called
this part exchange. This should be polish. This is free delivery,
that's fine. So what we need at this stage is that we need to
replace these icons. So I'm going to
select this icon, go back to my assets panel
and locate my Polish icon. So dairy girls have to do
is basically put that in, switch back to layers like that. Hit Delete. Make sure I'm in the center
with it with this text. And I'm going to go ahead
and move it up until 24. There we go, nice and large. And finally this
part exchange icon. So let's see, we
just have to locate the car with a car key. There we go. And just nudge it in place, position it here, then select the original
one, get rid of it. There we go. So go back to the Layers
panel and let's see part exchange like that. Now that we have this section, all we need to do is
just space these three. So use these three and
nudge them down to be 64 from this benefits. Let's see. 64, there we go. So polish should
be in the center. Let's make sure that it is
in the center. There we go. And the benefits should
be in the center as well. Make sure that it is in
the center. There we go. So benefits session
has been completed. Next up, we have contact us. We have the form and
we have the footer. But I'm not going to
bore you too much with this lesson because we are already like 30 min
in or something. So let's stop right here and
continue with the hero page. In the next video,
we're going to finish these three sections
because they are going to repeat themselves
throughout our design. So I'll see you there.
156. Home Page Design Part 2: Let's go ahead and finish up this homepage section
and the speech itself. So I'm going to type in T
and type in Contact Us. And I'm going to switch
it from textblock to H12. Make sure it's in the center
and center aligned like so. And make sure that it's
200 from here, like that. And then what I'm going to do is duplicate this one as well. And I'm going to select it
to be textblock, like so. And let's see, I can position
it may be 64 from here. Let's see. Like that. And I'm going to use
this dark gray color. There we go. I'm not really sure why it's inheriting these, but
it doesn't matter. So let's use this dark
gray color and I'm going to write in full name here. And I'm going to left
align it like that. So we are at 64, That's great. And I'm going to
hit Control and D One more time to duplicate that. And I'm going to use
paragraph texts right here. And I'm going to make
sure to change this to, let's see, H three paragraph. And I'm going to say something
like Enter your full name. There we go. And now I'm going
to go ahead and create the input field for this. So let's see, let's use
a rectangle and drag one out all the way from
edge to edge, like that. Now for the distance, this is fine and let's go for
the height of 60. Right-click and you can see, so move to page, Send to Back. You can use the backslash
slash if you want to, and make sure to position
it in the center itself. Now, in terms of the color, this is going to have the white color in
terms of the name, it's going to be input field. And now for the
distance between these, I'm going to move this 16. So when I call my Alt key, you can see there are 16 from the left page and 17
from top and bottom. So now let's go ahead
and group these two. And I'm going to call
this input like that. And I'm going to group these
two control G. And I'm going to call this
name like that. Let's see For the distances, maybe we can use
auto layout and 16, like that. There we go. So now hit Control D
to duplicate this, and I'm going to move this
to be at 32. So let's see. 32. There we go. Now, this second one
should be e-mail. And the input field
itself should be shorter, so should be six columns wide. So 123456. And let's align
this to the column. There we go. Nice enlarge. So that
is going to be email. So type in email. And instead of enter
your full name, it's going to say enter
your email like that. Now what we can do
here is put this in a group and call it
middle if you want to. But I'm not going to, I'm just going to hit
Control D to duplicate it, position it right here, and align it to the page. I'm not really sure why. It's showing me this
for whatever reason. But we are good to
go, I think here. So let's check it
out. For some reason. It doesn't snap to the grid. So width is five AT, so make sure that this
is five AD as well. There we go. So now it's going
to snap to the grid perfectly on both sides. So this one is not
going to be e-mailed. This one is going to be fun. I'm going to type in phone. Enter your phone number. Great. And now let's duplicate this
one and position it here. 32. This is going to
be e-mail or message. And this is going
to say something like write your message. Here. There we go. And now let's just
rename this to message and make sure to
position it down to here. And this field we're going
to extend a little bit. So it's going to be 171
in height like that, just so that we can give our
users a bit more space so they are able to include any kind of message
that they have. Suture to assets,
use our main button. And here we're going to have that same distance
of 30 to make sure we left align it
and double-click inside and type in send message. There we go. And switch back to the layers panel position here and make sure to ******
contact us here. I'm going to group
these, call them inputs. And I'm going to
group all of this, position it down,
being contacted us. And here is the crucial part. If I show you this,
so contact us. I'm going to select this entire field and
turn it into a component. Now, this is going to allow
me to copy it and paste it to all of these
other sections which I already showed
you previously. So let's go ahead and
create the next one. So make sure we are 200. Yes, we are. So where we are is going
to be our next section. So let's quickly and
drag in a map like this, makes sure we are here, makes sure we are
200 from this one. Like so, there we go. So now what we
will do right here is we will use that same H12. So where we are. And I'm going to use
this one as H12. There we go. Left align. It makes
sure it's two grid here. Now, this is textblock. We will use dark gray. Use this one, make
sure it's left aligned, position it there. Let's see, we are going
to be 24 from this edge. Let's see. 24. Lovely. So this is going to be title. And make sure to nudge it
all the way down to here. Position it to the top, just so do we have enough space? Now, we will need
some icons here. So first icon we will need
is let's drag in a phone. Let's drag in a clock, this one, and paint a locator. So this one is going
to go to the top. This one is going to
go to the bottom. This one will be in the center. There we go. So now hit D type in address and turn this from
textblock into a paragraph. And make sure to group these to make sure to
position them alike. And this there we go. Now from here to here
should be 16, I think. Yeah. But before we do that, let's make sure we paste
this in right here. And I want to organize
my content first so that I can then move on
a little bit further. Like that. There we go. So this should say phone number. And let me paste in
the phone number. This is going to
be opening hours. These are the opening hours. There we go. So first things first, let's make sure that
these are centered, put them in a group, make sure auto layout design
makes sure it's at 16. These two are in a group. First of all, aligned them, put them in a group,
use auto layout 16. These two should be aligned in a group
or to layout and 16. And these other ones
can be 16 as well. So you can group
these auto-layout 16. Then you can make sure
that these are left aligned in a group
auto-layout 16. And these are left aligned
in a group auto-layout 16. Now, all we need to
do is go back to our Layers panel because we
just have frames, so hours. Now, this can be a phone and this first
one can be addressed. There we go. Now, we can put all of these in a group and make
sure to call it e.g. content. Put that into
auto-layout of 24. There we go. And now all we need to do
is distance this from here. So let me just see what I
did in the original design. So yeah, maybe we
can put it at 32. 32, there we go. Select all of our content, bring it to the
center of our map, makes sure that it's
left aligned. It is. And let's see, just
group all of it. Make sure we are 200. We are positioned it
all the way down. And this section we
will call where we are. Like that. Turn that into a component. Now, one final
component which we need to include right here
is the footer itself. So what I'm going to do for this particular stage is
just use my navigation, duplicate it, center it, and nudge it all the
way down to the bottom. Make sure I'm roughly around
here and there we go. Then I'm going to head on
over and ungroup this. Like so. And let's make sure
the high myself for dispersion just so that you
can see it a little better. So I'm going to use this logo, make sure that it's
in the center. And I'm going to basically use my text tool and paste in that text which
was originally there. And let's see, we can use the text style for
it of paragraph. There we go, and make sure to snap it to the
center of our page. The javelin 64 from
these like that. And the logo should be 64
from these as well. Like so. Now one final thing which
we need to do is to bring in those
social media icons. So we have Twitter,
we have YouTube. Let's locate instagram, sorry,
LinkedIn, and Facebook. So let me organize them
a little bit better. So first, Facebook than Twitter, than YouTube, and
then linked in, make sure all of them
are center aligned. And let's see what we have. Maybe we can put
them in a group. Turn on Auto Layout 24 is fine. Switch back to Layers panel, and I'm going to
call this group or this frame social icons. There we go. And now what I will do is just align them to the center
with this text right here. Just make sure and double-check. There we go. So I'm going to select all
of this hit Control G, put all of this back there, call it footer, like that, and make sure I'm 200 from here. There we go. And one final thing which
I want to do is to move this and to cut it
up a little bit. So I'm basically 64 from
this particular bottom edge. So just three more
pixels tomorrow. So height, Let's see, we have to add two more. Let's see the original one, what it says, 5775. For some reason we
extended it just a touch, but it does matter. Let's add two more. Let's add one more.
So 5796. Let's see. There we go. So this is our
homepage completed. Let's go ahead and hide
this really quickly. Let's go ahead and preview it because I wanted to show you something because we have some issues right
here straightaway. So we will have to
fix those issues. So we are while it loads here, we don't have that. So let's open it up in full
screen. Let's hide this. We don't have this hover effect. So we will have to change that. Connected here. When I hover, you can see that
images disappear. So we will have to
go ahead into hover for each of these and
add additional images. Once again, everything works
fine here, looks great here. Everything works great
here as it should. So let's go ahead and add that. First things first, let's
go ahead and connect these. So first of all, switch over to prototype and turn this to here. This two here, this two here. While hovering. This should be while hovering. This should be while hovering. And when I click on
the hover itself, onclick change to property one. There we go. Onclick. And finally on click. That's great. So now that it works, we can switch back our
attention to these. So let's go back to our design. Let's switch over to hover. Click here, switch to how, or click here, switch to hover. So first things first, we need, Let's go ahead and add
a Lucid Air first, because I already
have it opened here. Then go ahead and add escalated. There we go. And add Oticon
really quickly. There we go. So now we have to
select this one, bring it to the default, bring this to default, bring this to
default. There we go. So now that all of this
has been completed, our page is basically done. And in the next section
we're going to move over to designing
this course section, which is basically
going to contain bunch of these is going to have
multiple section here. So we will have to extend
it just a little bit, and we will also duplicate
some of these sections. We will add additional content. We will add more and
more and we will copy some of these sections and some pages like this
Contact Us is going to be extremely simple to design
because as I mentioned, we already have majority
of these sections done. So I'll see you in the next
video where we're going to attack the cars page,
and I'll see you there.
157. Cars Page Design: Let's now go ahead and
design this car's page. So what I will do
actually is go back to our homepage because I forgot to turn this into a component. So now when I switched to here, go back to my assets and go to aspire to as its
website assets. So what I have right
here is in my homepage, I have all of these. So nav, I'm going to
drag and drop it in, position it here,
position it here, and then position it to 20. What I can also do is do the same thing for
each of these. Because basically
what we will have is in the same
layout on each page. So why not save additional
time directly here? Let's see, Contact
Us is going to be our last one position here
and then here. There we go. And also what all of these
pages are going to have basically are all of these
actions with contact form, map, and the footer. So let's go ahead and do that. And let me actually check if I created the footer, I didn't. So let's turn that into
component as well. So first things first,
let's go ahead and actually drag that footer
m into this page, into this page, into this
page, and this page. Make sure it's left aligned. And just position it 40 pixels from the bottom because
obviously we are going to adjust it a little bit later once we go ahead and
actually add the content in. So I'm going to nudge this entire section down
because I just above it. I'm going to add my map, make sure it's centered, and make sure that it's
200 pixels from here. And contact form centered. And I'm going to actually
add it 200 pixels from here. Then same story here. I'm going to position
these two in the center. And this is going to
be at 200 pixels, and this is going to be
at 200 pixels as well. Then do the same
story right here. So we will have the map
will have the contact form. We will have the map will have the contact form,
center, center. And let's see 222200200
center center. So you can see how much time
we're saving for later. And this is just going to
reduce our fruit clone a lot. That's why these
components are so useful. So for the chorus
section itself, what I'm going to do
is basically duplicate this section and
drag it over here. Let's see layers. When I click through here,
exclusive selection. Here we have
exclusive selection. Make sure to snap
it in the center. What I'm going to do right
here for the top is used this text right here. And I'm going to just make
it center, center here. And I'm going to
write in the text so your partner for
exclusive cars. And let's see, I can
make this text 40. Let's just see something's
not right here. There we go. Now it's
nice and centered. So from this edge, I'm going to go shift 1234. Make sure to nudge it 40
pixels down. There we go. And I'm going to
create that circle which is going to go in
the background. So hit 0. Like that straightaway,
use the main blue color. And for the sizes, I'm going to go with 300 by 300. There go, make sure
it's centered. And from this edge, what I'm going to do is
basically align it to the center of my texts
and to its bottom edge. And here, let me
go ahead and add the image of the car,
which I'm going to use, place it in the
center and nudge it somewhere around
here just so that we don't see the actual
circle in the background. Then what I'm going
to do is move that exclusive selection section and make sure that it's
100 pixels from here. Like that. And I'm going to
go ahead and get rid of C, all cars bottom like that. And here what we have, if you remember, is we
have these car cards. So I'm going to remove the
auto layout in this case because I'm going to duplicate
these and turn them down. So car cards, I'm going to
now turn the auto layout. So let's go back once
again because we have this group with
three cards inside, like so, so 12.3 and we don't
have auto layout on it. What I'm going to do
is put this group in another group by that. And now turn the auto layout in this direction and the distance between these cars should be 32. Like that. And now all you need to
do is hit Control D, control D to have
two more copies. Now, this is going to
be exclusive selection. And all we need to
do now is go ahead and fill in this
boring information. But before we do, I want to. Basically nudge these
to be in place. C15, 6200. There we go. And now just 64
from the bottom right here. So let's go ahead and
do that really quickly. So we have everything in place. Let's see where we are. 59, so just a tad
more. There we go. So now that that's done, let's go ahead and
focus on these cars because this page is
more or less done. So what I have right here
is the Tesla Model X. So I'm going ahead and focus
on the content itself first. And the car year is 2020. Actually 2021. Why not? Let's leave it like that. So that's the Tesla Model, X nought S, sorry. So the next one after that is going to be a
Porsche Cayenne. Price is going to
be in this year, is going to be 2021. And kilometers. So 18,000.692. There we go. The next one is
going to be McLaren. So once again, just
focus on exclusive cars. That's what this
dealership is all about. You can use any kind
of car if you want. If you don't want to have
these Envato Elements images, if you don't want
to license them, you want to use your own images. Of course, you can just
make sure that you follow some of the rules that we mentioned in this course
in terms of consistency and layout and spacing and pacing and rhythm
and stuff like that. Just to have basically
the same layout that we did right here. So 56, let's see, 24, we're still there. That's fine. And this is the older
car in this collection. So maybe somebody gave
it as a part exchange. Finally, let's use this
a Range Rover revoke. See 90 kilometres and
the year is 2021. Now, because I don't have this, I'm going to get rid
of it and delete it. So basically these
are all our cars. What I'm going to
do at this stage is go ahead and
close some of these because I don't need them
to be opened as much. Actually. Let's go ahead
and close them like this. There we go. So
what I'm going to do at this point is
located my images. So let's see tesla number three and switch it
up. There we go. This is going to be
Porsche Cayenne. This is going to be McLaren. This is going to be a
Cadillac CTS, sorry. And finally, this is going
to be a Range Rover evoke. One final piece of the puzzle. Just remember what
we did previously. You can close all of
these because all these three are done if you
remember from the homepage. So what we will do now
is select this one, turn it into a hover. Select this one,
turn it into hover. This to hover. So this should be hover, this app's liked,
it should be hover. There we go. So now let me go ahead and select
them all once again. So let's go from the backwards. So this is a Range Rover, close it and turn
it into default. Cts, we just have the urge to snap the image in the center of the field
because I can do so in XD. So I'm just hoping that the team is going to add that in
the future now that both of them are part
of the same team because just makes more sense to snap it here instead of here
to this small little field, so it just doesn't make sense. So McLaren should
actually be this image. There we go. Nice and loose. So default, this should
be pushed Korean. So let's locate
that number three. There we go. Drag and drop and switch
this back to default state. And final one is the Teslas. So let's locate the
Tesla number three. There we go. So now all of them
have been completed. You can see that we
are just 10 min in. This page has been
completed already. And let's go ahead and test
it out really quickly. Because yeah, One
thing I forgot to mention is here because we
are on the course page. I'm going to go ahead
and select this one and turn it into
a selected field. So now you can see up
there that it says cars and that it's selected. And how our effects still works, Contact Us, still works. And I'm going to figure
out how to get rid of this bar just so it
doesn't bother us. So here, I think yeah, I think maybe it didn't
load or something because you saw that we switched it
up and replace all of them. So perhaps I will have to jump in and do all of
them once again. What every single
particular instance. So I will do that off camera just to make sure that it works. But this all works. This is still here. This is all here. Cars is selected and Diego additional page
has been completed. One more step, it's done. So maybe because V
paste this in first. Yeah, you can see
when I switched the default in hover,
it works here. Yeah, no, it doesn't work
on a homepage either. So perhaps I should set it up
here and then come back to you just to tell you and let you know what was the solution. But for now, cars page is done. In the next video,
we're going to move on to the selected card, which is the most difficult
part of this entire design. So I'll see you there
and I'm going to show you how to
set it up as well.
158. Selected Car Page Design: Let's continue where we left
off in the previous lesson. And before we do, I just want to show how
I fixed this car cards. So basically what I did is I
recreated them from scratch. And all I did right
here is just create the name for it so the name of the current
holder can escalate lucid. And you're going to get to
see this if you download this file and open it up
in the Figma for yourself. And all I did is just create
another instance of it. So you can see that here I have the hover and here
I have the default. So basically I just created
this and add a variant. Variant is the hover for
each of these cards. Inside of the hover variant
for each of these cards, all I did is just selected this background and
showed this stroke color. That's basically it because
every single thing which I tried to just pretty much
failed for right here. So now when I preview
the homepage, e.g. and all I want to show
you right here is just so that you see
that it actually works now because these are the actual components
of the actual page. So when I hover, the only
change was happening is just showing this outline off
the background color here. So that's pretty much it. And now we can move
on to the next page. In this entire process, I did the same thing for
right here as I mentioned. And here all I want to do is create the selected card page. Now it's going to have the image selector right here
for the light box. And we're going to animate
it a little bit later. It's going to have
the information below and I'm going to cut
a little bit short there. But before I moved
to all of that, what I wanted to show you is
instance swapping in Figma. So when I select this, you can see I created exclusive
selection then rho 12.3. And now when I select
this one, e.g. and I want to swap it. You can see I have arranged right here, which
is the Range Rover. When I click, it's going to
show me different instances. This is much better
option than XD, I have to admit because just much faster to replace
them this way. Then to locate him right here, click drag and lay on top
of it to swap instances. So you can just click to
change it to Porsche, e.g. and then change it
back to Range Rover. Much faster method,
especially if you have thousands of these
different icons and so on. So for the selected
card, what I want to do, and as I said, I just go
ahead and created this. So I'm just going to bring this in really quickly to somewhere around here just so that we
can save ourselves a bit of time here I have this
vehicle specification. So let's go ahead and
start with the images. So what I want to do is use
my rectangle tool right here. So R and create the image right
here, eight columns wide. So 786 is the width and the
height is 437. There we go. So this is going to
be image1, like that. And then below that we
will have some car images. So let's go ahead
and create those really quickly with
a distance of 24. I can even duplicate this one. Position it to be 24. Like that. And I'm going to just
shrink it in like so. And it should be 93 in
height and 168 in width. So let's just check
if we are there. There we go. So what's 68, 93. There we go. And I can call this
image number two and basically put it into
a separate group images. And I can even turn in auto layout and
duplicate this one. So just select it. And let's see, the
distance can be 38 e.g. and for whatever reason, yeah, it just because it's placed
that on a single image. So actually, let's,
before we do that, let's just duplicate
it the old school way, like that and like that. So let's just create
a separate copy. So this is going to be two, this is going to be three. And the naming your layers
is really important, especially here because
when you get to Figma, you really want things to work. So this is going to be a brush number four and this is going to be imaged number five. So now I can group
them, call them images. There we go. And 24 is the distance, which is just fine. Now what I'm going
to do also is just create this alt tag a
little bit right here. So once again, I'm going
to give it a white color. There we go. And let's see. This
is going to be 145, width 50. There we go. And I'm going to
name it all images, BG, Let's see, distances can be, Let's see what we
did previously. So 24, 24 on each side. So let's do that. So 24, 24 kids D See. All images center and make
sure to position it here. This is a paragraph
size, by the way, Control G to put the thin
groups, see all images. There we go. And now what I can
do at this stage is just bring in my images in. So I'm going to locate
my Range Rover. So first things first, this first one is just going
to be image number one. This is going to be
imaged number two. This is going to be
imaged number three, hemorrhage number four, and
finally image number five. There we go. And we will fix
this later when we create that Lightbox effect. But for now, I think
we are good to go here and I think we will
just leave it as it is. So here what we will do is just line this up
to the navigation. It 40, bring it into pixels. And there we go. Now
we're 40 up from the top. So here what I will do
is just hit R Once again and create a rectangle
which is four columns wide. There we go, like that. And for this one, Let's see what we can do. Maybe we can bring
in a little bit of corn radius into the mix. Yeah, so for the corner radius, let's go with eight. For the background color,
let's go with white. And for the height, let's go with one-twenty. This is the section which is actually going to
scale up and down. So actually, let's
go with four to 53, something like that's
a nice enlarge. So what I'm going to do is call this car sidebar background. There we go. Here, I'm going to start
creating these are labels. So first things first, let's start with the icon, spot assets, and let's locate that SUV icon,
which is this one. Drag it inside heat are
something like this. Hit D SUV. Now this should go
from the left and it should actually be
labeled texts like that. Now, this should
be 33 in height. It should be body color, and it should be for
the corner radius. There we go. Switch back to our Layers panel and I'm going
to position it right here. So label BG. There we go. Let's see for the distancing, what I can do is perhaps use 16. First of all, let's position
this in the center. All of this like so. And let's see this. We can bring it 16, like that. And the text itself makes
sure it's centered. It is. That can be
at eight. Maybe. There we go. So what I can do is put
this in a group called the scar type like that. And make sure to turn
in auto layout with eight and then
labeled background. What I can do is maybe
put 16 on each side. Let's see. Bring it back to here. Two pixel, so which
should be 88. There we go. Let's check it one
more time. So 6.7. There we go. So now that that's done, I'll just group this
and call it a label. And I'm going to just position it from the top and
bottom edge to be, sorry, from the top and
left edge to be 24. There we go. So now that
that's done, this is white. This is the sharper
color basically, so it's going to stand out
against the white background. So what we're going
to do next is basically just bringing
our title here. So type in Range Rover, this is going to be RH three. There we go. And the distance
here should be 24. Control D One more time. Turn this into a blue color because this is going
to be the price. There we go. Control D one more time. And at this, I'm going to
turn into a text-block, or even better in paragraph. Each paragraph, and I'm going to turn this into a paragraph. It's going to be e.g.
available for pickup now. And the distance for that
is going to be 24 as well. 24 here, 24 here. So all the distances
are consistent and this is going to be a breeze
to develop later in Webflow. So what I'm going
to do at this stage is bring in those buttons. So this is going to be
our first button, 24. There we go. And the distance here should
be 24, so that's fine. And now I'm going to bring in that second button that we
created, which is this one. Position it here. So makes sure we
are 24 right here. 24. And let's see, we should narrow
this until we are at 24. So height should be 448. There we go. So that's it. Now, in terms of this button, it should be, let's see, 73 is the height, three to six is the width. This should be actually
three to six as well. But before I change that, let me switch that to reserve. This car. We go. There we go. Let's switch it back to hover. It works. That's great. This to hover it
works, that's great. And this should say
C alone options. There we go. Now these buttons
have been completed. All of the information
has been included inside. Let's go ahead and select it Control G and call
it car sidebar. There we go. And this
sidebar in Webflow is going to follow our
content as we scroll down. So basically, that's what
we will include there. So next, let's deal with the overview which
will come right here. So first of all, let's
use a rectangle. So hit our position it to
be eight columns wide. And let's use, let's see, eight for the corner radius. Make sure that this is white, so it stands out
against this background and make sure to position it
24 once again, from here, this is going to be overview
background or Oreo BG hit T and typing
overview. There we go. Make sure it's left
aligned, right there. And we're going to go with
H three on this occasion. So 24 once again,
let's check 24. That's great. And now it comes the time for
us to create that layout. But before we do,
I want to fix up this layout because
it's going to be much faster to do so. Let me actually go ahead
and duplicate these two. Put them in a group
and position it here. Now, this group is going to
be description like that. And this should say
vehicle description. That's great. Control D to duplicate that. And this should
actually be paragraph. There we go. Well, let me copy
and paste the text. And so this should
be 24, like that. And the total height
of this should be 198. So let's change that to 198. There we go. So we are 32 from the bottom
edge. That's great. Now this I don't really like, so I'm going to change it
to age three paragraph, and that's basically it for this particular section.
So description is done. Let's now deal with
the car overview. But once again, before we do, let's nudge this to 24. Let's nudge this to 24, which we just created. Like that. There we go. And I'm going to move
this a bit later. But basically it's at 200, same like all of
the other stuff, but we will need to
include this section. But let's first deal with overview because we
have some icons here. So what we're going
to do first is just included the text
and for the text itself, what I'm going to do is just create a bunch of
these paragraph items. So I'm going to call it 2021. This is going to
be for the year. So paragraph for the
paragraph color, I'm going to use this one. There we go. And I'm
going to quickly go for the icon and go for the
calendar icon right here. Put it right here, and make sure that
I grouped them. Make sure that I call
them a calendar. Make sure then that I
turned in auto layout, but before I do, make sure
that I centered them like so. Calendar auto-layout. And let's see, distance for
this can be 16, e.g. I think. Yeah. So 16, There we go. Now I'm going to
nudge it right here. There we go. And basically what I will do at this stage is just create
a bunch of copies. Let's see, 24 from this
edge should do just fine. Yeah, I think that's great. So just create two
more copies like that. And I'm going to place in
this call it automatic. The transmission,
this is going to be petrol for the fuel type, and this is going
to be 15,246 km. This is how much the
car has done so far. So let's see. We have the
calendar, which is this one. Then we have the mileage, which should go
below the calendar. Then we have the field type, which should go below mileage. And finally, we have
the transmission, which should go right here. So what we can do
at this stage is kinda nudge this to maybe, I don't know ADH or
something like that. So let's go with, let's see, 88. And then I can
select these four, come to the top
and just tidy up. Yeah. He does six works fine, but I'm not really sure. I like what I did previously. So distribute
horizontal spacing. There we go. I think that's
going to be just fine. So let's see a T9. Now, let's go ahead and
try to swap these icons. So for this one, what we will need is
that transmission. So make sure to find it. There we go. For this one. Let's go to swap. We will go to the field type. This one is the mileage. So I think that odometer icon
should do just fine here. There we go. And now that these
have been completed, what we can do is
basically put them in a row and duplicate that
row, position it down. So this is going to be a row
number two inside of there. Let's change this to an engine. Because it's going to
be the engine type. This should say V8 engine. Engine type, however we want. Instead of mileage,
this is going to have the icon of the door. So let's see where
it is. There we go. And it's going to
have five doors. There we go. Now, this next one should
have seats, so seven seats. So this icon is going
to go for the seeds, which is right around here. Seats. And this final one
should be for warranty. Because some cars
will have warranty, other ones will not. It all depends how old your
car is at the stage of sale. And if you can prove
that it's yours, if you can prove that, it's worth what you're
saying and stuff like that. So we're t There we go. So that's pretty
much it for this. And I think that this
section is finished. All we need to do is just
tidy it up a little bit. So I'm going to
place this at 24 as well and turn this into a 196. So height is 196. There we go. So we are 32 from the bottom, 24 from each of these sides. And now what I will do is just put this on top with
this on the bottom. Call this overview. And let me show
myself to this side. So 24 on this side, Let's just nudge this to 24, nudge this to 24 as well. Here what we will need is
just to copy this section. So basically just
nudge it right here, make sure it's centered. And let's see for
the distance for it, we will put it at 200. So let's see where
we are right here, something like this. So 200 and then these sections below should be at 200 as well
as to something like this. There we go. And I'm just going
to extend this down so that my footer
is not covered. It will be at 64, same
like we did previously. So height should
be 5856, I think. There we go. So a little bit of
math goes along way. There you go. That's that page. Everything has been completed. So let's hit preview for
the end of this video. I just want to show
you what we've done so far and what we will do
with this particular page. So here we will
have these images. And when you click
on any of the image, the light box is
going to pop up. You can see that in the
Adobe XD part of the course, but we will do so in one of the later
videos here as well. We have a reserve this course, you loan options and cars
should be selected here, which will fix right now because this is actually the
part of the course page. So let's select that. And instead of default,
let's choose selected. So now you can see that it's
highlighted right here. Reserve this car or
C alone options. So just add S right here. And that's why we are checking
this. So that's great. So Ceylon options. So you can see these loan
options on the next page. And it's just going to
give you general options. But of course, for each car and for each price is
going to be different. So it's better to just contact
the person who is doing the loans inside
of this company or external company to give you
the best possible option. So Ceylon options,
we're going to take you to the
loan speech itself. Reserve this car is
just going to take you down to the forum Philip. You can fill up
this form, reserve. This car is going to know
that you came from this page. So it's going to do much
better that way we have the great vehicle
description, which is great. All of this is great. All of this is fine. We have 200 all of this work seal
cars Contact Us. There we go. So all of this works just
fine. And there we go. That's it. That's it for
this page, Loans page, contact us is going to be
super simple and light box. It's going to be just basically the same layout
but adding more images. So I'll see you in the next
video where we're going to create this Loans page. So I'll see you there.
159. Loans, Contact Us and Lighbox Pages Design: Let's get started
with the Loans page. So what I'm going
to do first of all, it's just selected
this text right here. Control C, come right here, control V, paste it in place. And I'm going to replace it
with some additional texts. So loans of your dream car. And I'm going to come
right here with my images. And I'm just going to
bring into images which will go to the hero
section on top. Align them like so, bring them in here and just
make sure to align them even further to something like this, then bring this a
little bit closer, maybe even to
something like this. But yeah, I think this is going to
be just fine because it's going to be easy for me to align these images in terms of
the general alignment. I think we are fine right here. So let's select these images, call it hero images. There we go. And I'm going to group all
of this, call it hero. Just check the text really
quickly. That's great. Select the loans and we
will jump inside of there. Nav I don't know why
it's not showing me. There we go. So loans I'm going to go with selected while we're out there, go to Contact Us and
choose, select it. There we go. So go
back to the lungs. What we will need right
here is to create another section below this. So hit T and I'm going to
write in something like this, make sure that it's centered. And instead of this, I'm going to go with this. So centered once again, center of the page. And I'm going to go with
150 from this image. So like this, there we go. Going to obviously put it
below my hero section. And then I'm going
to duplicate this, makes sure that it's
age three in this case. I'm going to basically recreate the same layout that
we have right here. We can even copy
this if you want to. So let's actually go
ahead and do that, because basically we will
just use the same layout. So select these three, hit Control C, come
back right here. Hit Control V. Makes sure that we
are in the center of the page like that, and make sure that we are, Let's see, 64 from here. So 64, there we go. Now this, I'm going to
turn into the h3 color. There we go. Do the same for this. So h3h3 and this, let's see, maybe it may
be that dark gray color. I think that's going
to be just fine. And dark gray and dark gray. Now, in terms of the content, let's fill the same. There we go. There we go. And I'm going to leave
the icons for the end because we are going to get
to them in just a second. I'm going to show how
to quickly use and reuse some of these sections because they are
repeating themselves. You're going to do that
in Webflow anyway. So why not do it
in Figma as well? So here what we will do is
select this icon and we're going to get and change
at so convenient. I can even type in convenient. There we go. This will be, let's
see, car payment. So replace it with car payments. Then this is going
to be car warranty. Car warranty. There we go. Now all I want to do is
just align these three up. Like this, I think. No, Let's try it to the bottom. There we go. Now, all looks fine. Let's see if I select this one. We are 64, we're 72
for some reason here. Maybe this icon is a
little bit shorter. So what I will do is
just select all three, hit Ungroup and just
manually arrange everything. So from here to here, we should be at 24. There we go from here to
here, we should be at 74. There we go. This should be at 24 as well. There we go. And this should be a 24
as well because we did some instance swapping and we
change some of these icons. Let's try from here. I don't know why it's
not going to align here. There we go. Come on. Okay, so now this is done, this is done, this is
done, that's great. So Control G, control
G, control G. There we go. This is going to be simple. This is going to be payment. This is going to be
warranty. Peace of mind. There we go. So now we are. When we select all of them, we should be 64. We are. We'll put it right here, hit Control G and call
this market leading loans, e.g. There we go. 150 from the section above, what I will do in this case is select this
section control C, control V right here. Whatever reason
didn't paste it over. So let's go with something
like this for now. And what I'm going to
do is just dragging another image right here
to populate this one. There we go. And I'm going to select these to make sure that
they are centered. Here. Let me copy this text. There we go. Paste in this text. There we go. So now that that's done, I'm going to select these
to click right here. There we go. And now I want to add those additional logos which
are included previously. So let me drag them inside
of here. There we go. So we have sent on there
and we have this S leasing. So sometime there is
going to come right here and asleep zinc is
going to come right here. There you go. So 24 on each side. There we go. So now that that's done, what I'll do is select
basically these three. So let's actually bring this in. So who are we are? We should change that
to our partners. There we go. Our partner's hand. Let's bring those
two inside of there. Something like that. There we go. Just make sure it's
perfectly in the center. 24. And now that's done. So our partners has
been completed. Who we are taxed partners. Text. Okay. Basically that's
it for this page. So the only thing which
is left for us to do is just to align this, this and this to
200 pixel distance. Let's enlarge it. There we go. Double-click right here to
select our loans frame. Nudge it down, and we should be good to go
something like this. So minus three. So 3885. There we go. Because we are here
and we are only lacking the image
basically right here. So let's finish up the
contact us page as well. So I'm just going to drag and
drop an image right here, makes sure that its
center aligned. Make sure that it
lines up to here, 20 pixels down, e.g. or even better. Yeah,
20 pixels is just fine. All we need to do right
here is basically select all of this
content and bring it up. So instead of 200, let's go with 100 because
we don't need that spacing. So let's see 100. And once again, basically just
cut this down at the core. There we go. Let's see where we
are. We're 9 min in. Maybe we can even finish
this overlay as well. So 4273564. There we go. So let's go ahead and actually
do the lightbox itself. So let me copy this. Let me paste this in. And the light box itself. Let's see. This should be ten. So 10905609. There we go. Make sure that it's
in the center. Will I believe we're
going to bring this in. It's going to stay as it is. So 168 by 93, that's great. And all we need to do
now at this point is just add three more
because we have 12345. So three more will
do just fine here. So first of all, I'm going to go back to here and turn this into auto-layout. Come to here, turn this
into an auto layout. 123. So this should
be number six, this should be number seven. There we go, and this
should be number eight. So now that that's done, what we can also do is basically align these
a little bit better. So first of all, it's snap this into the
center of the page. I'm going to bring this down
slightly. Push it, e.g. let's see, 64, maybe 64 from
this side, That's great. And maybe 16 from this side. Let me see something like this. Because I want to be able to see all images or
maybe even better, we can just snap it in
the center like so. So there we go. See maybe one-twenty
from this edge. So something like this. Yeah. So now that we have this, what we can do is hit
R for the rectangle and just position it to fill
in this frame completely. There we go. Position it in the background. And I'm going to call it
light box background. I'm going to give it
that dark gray color. There we go. And I'm going to give it a
base city of 80 per cent. So fill in with the dark gray
and obesity of 80 per cent. There we go. What we also need right
here is that close icon. So we can use this
one. There we go. Position it roughly around
here so it lines up. And I'm going to give it the, let's see, selection color. So instead of this one, not fill color, Let's
actually select it. Fail should be white. There we go. Lovely juggling. And from the top it should be, I don't know, maybe
53 or something. 56, I think. Yeah, 56. And that's basically it. That's our overlay done. Because we left this
at 80 per cent. It's going to be passed
through basically. So when we put it
over that page, will be able to have the
opacity in the background. So let's actually group
these and call it light box like that. And there we go. Our design has been completed, everything has been done. In the next video, we can
attack some basic prototyping. And in the video after that, maybe I can show you how to
export some of these assets. And then finally at the end, I'm going to show
you that plugin, which is going to help you
transform some basic designs from figma to Webflow without writing a
single line of code, add without touching
all of these components in Webflow itself because you
can do all of it in Figma. But once again, just remember it's for really basic pages. So I'll see you
in the next video where we're going to
start with prototyping.
160. Creating Prototypes in Figma: Let's now start with some
pretty basic prototyping. So what I will do is right
here where it says cars, I'm going to switch
over to prototype and I'm going to drag
it to cars page. I'm going to go on click, navigate an instant
because I don't want any, any sort of animations
in-between loans. Same story. So
just select it and go to loans and contact us, select it and go to Contact Us. Now because we applied it
from here, as you can see, it's transitioned over to every single instance of
this particular component. C all cars button. What I will do is just
select it and from it, I'm going to go to
this page instant. Let's go to smart animate because we will have
this option right here. Contact Us navigation. All of this is going to
pretty much stay the same. Now from this page,
what we will do is when we select
the Range Rover. So let's select
the debt card and we will go to this
particular page. Let's go with smart animate
in this case as well, Reserve does Garcia
loan options? So for the loan options, I'm going to go to the lungs. Here, see all cars or
it's going to take us to this page right here. I don't even think that we need this button now
that I think about it, but let's leave it as it
is because we are going to include it later in Webflow. And that's pretty much it
for this particular page. Now, for here, everything is done here,
everything is done. All we need to do now is just
connected this light box. So to do that, what you can do is click right here
or right here. So I will select C all images. Click and drag to the
light box on click. Go to, I'm going to
go to Open overlay. And I'm going to
just choose instant. And inside of the light box, I'm going to click and
select this close. Click right here. On click. I already have this
interaction somehow. So let's close that. Let's close that. So select it once again. Click and drag here. So onclick, I'm going
to close the overlay. So that's basically going
to close that one there. Now, one thing which I didn't
research is how do I hide this particular menu bar which comes from the
top down right here. So this one, there is
probably some option, but I was just too lazy. So now when I go and click, It's just going to take
me there, which is fine. Here. We can see how
all of this looks like. And I can even go back to here. But I should probably
a prototype it. So let's just check
it in right here. So cars, everything works. When I click right here, it's
going to open up this page. So everything works just fine. You can see we have the covers. See all cars is going to
take us to this page. It's going to keep that
position which is not ideal, but nevertheless reserve
this car C loan options. It's going to take us two lungs. And when you click
See All images, it's going to open up this page. Now what we can do with
this page is actually narrow it down a
little bit in height. So let's go ahead
and close this. There we go and close this. Switch over to design. So what we have
right here is 64, if I remember
correctly, yes, we do. So we can just nudge this up. Let's see where we
are right here, 118. Catia to think is going
to work just fine. And see where we are with this. Yeah, so I have to narrow down the lightbox image as well. 68, so four down, 150. There we go. And lightbox
itself should be 150. There we go. So now that that's done, maybe we can hit
Preview right here on this particular page so that we see if there is some
difference to what we created. Yes, there is, because
now it just pushes it up a little bit
towards the center. And that's pretty much it for the oral prototyping and
what you can do with it. We're not going to go
crazy here because we're going to prototype
later in Webflow. In the next video,
I'm going to show some export options and
how you can export some of these assets for
developers if you're not developing this yourself
or for yourself. If you are developing
this in Webflow like we are going to do
so I'll see you there.
161. Export Assets From Figma: Let's now deal with the export
of some of these items. And I'm going to basically explain three different formats, file formats for you
that you can export at. So you can pretty much check out the export diversions
at this point and start with Webflow part
of this course to understand a little bit how to import some of these options, what they are used for, what each file
format is used for. I explained all of that into
backflow part of the course. In that part of the course, we're going to use export
items from Adobe XD. Figma works exactly
the same way. Show you here, e.g. we have these icons now, every single icon I'm
going to export as SVG. And to do that, I'm going
to select the icon itself. Come right here where it
says Export, hit Select. And here I can change the
file format from PNG to JPEG, SVG, and PDF basically
for this course. And in general, what
you have to care about is PNG, JPEG, and SVG. Just keep in mind like this. Svg is awesome for icons because it's going to keep
the same quality and it's going to stay consistent no matter which size that you are designing on because SVG is
scalable vector graphics, It's always going to
keep the same quality. Jpeg is for baked in images which don't have
transparent background. And I'm going to show you
one of them right here. E.g. this image right here. It doesn't have any
transparent background, so JPEG for that particular
file format is just fine. And finally, we have P&G. P&g is great for images
like these, e.g. for images like these,
like these two. Because they have
transparent backgrounds. So to export, you really have
two different options here. Let's say I want to export
this icon instead of PNG, I'm going to select SVG. What you can do is add
different suffixes here, e.g. 1x2x3 x. If you want to
export this at one x2, x3 x, all you have to do is just
add at one x as a suffix. Click right here. It's going to
automatically add to, add to click once
again, three exit a3x. You can add more and more
and more if you want to, but we don't really need that. So I'm going to basically go
ahead and get rid of these. You can see how it
looks like right here. But I'm just going to
close all of these and just export at this one. I'm going to remove the suffix because I don't really need it. What I can do is just hit
Export car key image. And you can see right here, if I nudge myself over, that, it export it to my
desktop really quickly. Now, what this does is it allows me to simply drag it and
drop it into Webflow, like I'm going to
do in the next part of the course when we start
with the web for development. And it's just going
to be super simple to drag and drop and have all of your files consistent in that particular
organizational patterns. So let me show you that as well. This is how basically
these images look like. So you can see some
of them are SVG, like this one and this one. This is a PNG. So when I cover really quickly, you can see a PNG
file extension. This is a JPEG file because we don't really need
the PNG extension. This is the PNG because it has transparent
background you can see, so right here, this is a Jpeg, like I mentioned,
because it doesn't have a transparent
background in terms of icons you can see
all of them are SVG. And basically I just went ahead
and exported all of them. But what happens if you want
to export multiple icons? Well, you can just select the icon while you
are designing. Hit Export, change this to SVG. And now when I select this one, it's going to know that I
always select the SVG there. It's going to select
this one as SVG. Perhaps this one can
be exported as a JPEG, and this one, large one. So hero image can
be exported at P&G. So what happens if we
want to select an export? All of them, well, you can quite easily do so by clicking here. Then File and Export. And it's going to export
all of the items that you basically aligned up for export because you
mark them all, you selected the file formats. Then you can go to File
Export and it's going to export to your
desired destination. Basically, that's
pretty much it. That's how simple
it is to export. I'm not going to bother with selecting an expert
in all of these. Basically with this,
you don't even have to export this ellipse. You can recreate it in Webflow, but I think I still exported it from Adobe XD
because it's just much simpler to import SVG shaped and to create
one on your own. Because in Webflow this
is pretty much a div with just a corner radius
of 100 per cent and blue color inside.
That's pretty much it. And then you can play with
the positioning options inside of Webflow. You are not exporting fonts. You're not exporting colors, you're not exporting buttons. You are creating all of these
things inside of Webflow. So basically there is no
need for you to do so and to export them
directly from Figma. Speaking of exporting
from figma to Webflow. In the next video, I'm going to tackle that famous plugin. And we're going to explore
it and see what you can do inside of Figma, how to connect it with
your Webflow project and how to work on
similar projects in it, but not this one. So
I'll see you there.
162. Figma To Webflow Plugin: Alright, so here we go. I'm going to show you how to
connect Figma tool workflow. I'm doing this the first time and I'm going to show
you how it looks like. So basically you're
going to come right here to your Plugins panel search, Figma to Webflow and you're
going to install this one. Just make sure it's
by Webflow labs. You can see it right here. So just to make sure that it's
official plugin, hit run. And it's going to run
basically an install. You can see right here. And it's going to show you all sorts of different options. So Safari is not supported. Use workflow in Chrome. I am using it in Chrome, so I'm not really sure
why it's showing me that. And that's pretty much it. So what we have right here, we have layouts and
we have structure. So you can include
section and container. Two columns, three columns, four columns heading plus three columns and
so on and so forth. And you should really learn this in the Webflow section
of the course itself, what all of these are, and how to structure
your websites. And then perhaps
come back to this. If you're not familiar with some basic HTML
structure of your pages, then we have the layout, and these are basically the
templates which you can use. So let's nudge this
over to the side. Let's actually go
to our spot assets. Use our website
page, hit Control C. Go back to the website
design control V. Position it roughly around here. There we go. What I'm going to do is, let's say use this nav logo, left click and add to Canvas. So I'm going to click and it's going to hopefully
add it right here. It's not maybe that
it's somewhere else. Know, for whatever
reason it doesn't work. I'm not really sure why. Maybe we should start
with a structure lecture. Let's get rid of this one. So let's try like this. There we go. So new page. We have to use their
own. So 14, 40. In this case. Here what we will do
is just nav logo left. It's going to include
that hero heading left. Let's see. So hero team, Let's see features, feature
matrix. There we go. So you can see that it
starts adding all of these maybe Team
section, team circles. There we go. Maybe testimonials. So let's use this one. And maybe we can use logos. Perhaps this one, Footer,
perhaps this one. And there we go. Let's
try one more time. There we go. So now that we have everything, Let's quickly
explore this layout because you will have to use this particular layout
in order for you to implement this layout
into your own pages. So first things first, we
can see that the layout is fixed at 14:40 API,
14, 40 pixels. So here we have 14, 40 as well. But ours is not fixed. So you should basically
make it fixed. And you should turn all of
your content into auto-layout. So you can see that they
have the auto layout. So e.g. if I do so right here, so I can create auto layout
instead of hog fixed width. And there you go. My content
is the same as theirs. So what should we do next? Well, basically,
all of these should be in their own
separate auto layout. So here we have now
Navbar logo left, which is this nav
bar at the top. And if I open it
up, first of all, you can see that it's by
itself, it's auto layout. And you can see that we have
horizontal padding of 24. So if I open it up, we have the navbar container, which is the container for
the contents to go inside. Then we have the
navbar content itself. Yeah. Now borrow content, which
is all of this inside. Inside of that, we have the navbar brand and we
have the nav bar menu. So this is how you
should structure your files and just
make sure that you set up to fill container
and to hug items inside. So when I select this, you can see it's 14 40 p. But because it's set at a
distance of 24 on each side, you can see right here. Then when I select my container, they set the fixed
width of 1,200 and then the full width
of the content inside. That's going to make it
responsive immediately. What's going to happen here
is you can select this one. E.g. and then instead of this, you can include your own
logo inside of here. So you can do some
instance swapping, let's say, or just drag
and drop your logo inside. And let's actually
try to do that. Let's see a spider. There we go. You can see that you
can place your logo inside and you could just
get rid of their logo, just makes sure that you keep the distance inside of debt. So actually Control X, Control V. Hit that, delete that, and there we go. Now we replace the logo
with our own logo. We can put all of our instances here on a lot of features
here and so on and so forth. But actually how to
connect all of that. You have to open up your workflow dashboards and you have to find the project. This Figma file
is it related to? In our case, it's
called a spider exclusive cars
designed in Webflow, It's called the same. So when you open up your
workflow dashboard, you're going to login. So just click right here. You're going to login and
then you're going to click on that particular project in
order for you to connect it. Then when you connect it, what you can do is you can copy all texts and color styles, just text and just color styles. You can go into plugin
settings and set up there. Now, basically for
each Figma file, you can connect to
different web for projects and go the
other way around. Why? I don't think that
this is useful for complex projects is you can
pretty much do anything here. But as I said, for our
particular use case, this page really requires some additional
working in tweaking. And you're going to see
that when you get to the Webflow page because
these light boxes, I had to combine multiple
light boxes because workflow doesn't have default
options which I really need to
execute this project. So it's really difficult to do some things when you are
just going to default route. You sometimes have
to basically fake it and do some things in a
different way, different matter. But with that, I'm going to end this design and prototyping
stage in the next video. Basically, you are
going to be able to start with the Webflow
part of this course. You can open up this
Figma file to explore it. You can export all of these
assets as I showed you. You can play around with
some prototyping settings. Just remember everything
works exactly the same in Figma as
it is in Adobe XD. The only two main differences, as you saw so far,
is basically three. How you create these styles
for text and colors. Because in XD, they are right
here on the left-hand side. In Figma, they are right here. So you can click it
in instance swapping because in XD you can
drag the component, place it on top
of new component. Here you have that
instance swapping, which I think is a little bit better than it is right here. And basically in the
entire structure which they call
auto layout here, and in XD they are
called stacks. Everything else, in my
opinion is exactly the same. Some things that are even
worse in my opinion, like adding images
that you cannot just drag and drop image
on top of the shape. Then you have to, right here on the
right-hand side, find that shape and then
drag and drop it there. Of course, there are
some massive differences when it comes to femur, which are better than in XD, like you can add horizontal
and vertical grids, e.g. you can add multiple opacities and multiple colors and colors, styles and textile on top
of an existing quantities. You cannot do so in XD. So there is pretty much dead. And they are of course, some advanced prototyping
features like usings and nice outs and you can change the curves
and stuff like that. But I purposely didn't want
to bother you too much with that stuff because
we're just going to do that later in Webflow anyways. So what is the point? Right here, I just showed you some basic prototyping bolt
in XD and here in Figma. So that's pretty much going to wrap up this design
section of the course. Sorry if some videos
have been longer, but I was just trying
to explain as much as they could about this
transitioning from XD Figma. You can see it's pretty
much the same and it is going to be pretty much the same now that Adobe bought it. So I'll see you in
the next lesson where we're going to
start with workflow.
163. SECTION 16 ASSIGNMENT: Your assignment for
this section is to use the files I provided
and to try to use either different imagery or different colors or different
topography altogether. And just to play
around with the files, I really encourage you to
follow along this class in its entirety because the files are provided for that
particular reason. Don't just try to use
the finished file and play around with it to
try to follow along with me, tried to follow along and
create alongside me as I teach. So to understand a lot
better than just use the finished file and just to tear it apart and call it a day, It's always the best
approach to learn as you go. So as I teach, as you watch these lessons, it's always best
approach to follow along and try to
create it yourself. And while you are creating
it the first time, maybe experiments just a
little bit just to use perhaps a different
shade of gray and not exactly the same shade of gray which I used in this lesson. And that's the best way
to learn, in my opinion.
164. SECTION 17 Webflow Build: In this section of the course, we are going to
take what we just designed and move
it onto workflow. Workflow is a fantastic tool designed with no code in mind. What that means is you have the code running
in the background, but you are actually
doing the visual stuff, but it's different from all of these other tools because
you're going to learn HTML, CSS, and JavaScript
along the way without you actually having to know a single line of code. So let's get started with the Webflow and let's
finish off this project.
165. Introduction To Webflow: Webflow is an amazing
tool that lets you create content rich websites which are fully responsive and
completely animated, all without knowing a
single line of code. Obviously, it's best if you know how to code
because you can then expand upon that
web false functionality. But if you don't
know how to code, that's completely fine
because you can either create your design from scratch like we are
doing in this course, or you can use some of
the thousands wept, different templates
that Webflow provides. And then you can edit one
of those templates and simply continue where they
left off with that template. Once again, It's
beneficial for you to know at least the
structure of the code. But if you don't know, we're going to talk about it in this course, we'll shortly. But for now, Webflow is a fantastic tool because
it doesn't allow you to get bogged down with some plugins and updates
like WordPress, e.g. it's not super limited
like fixed e.g. where everything is
already prepared and you are limited with
those templates, widths and sizes and so on. But you can create all of
your content from scratch. You can create your custom
designs from scratch. And it's really been official, especially when it's
CMS functionality, which we are going to touch
upon in this course later. And of course, the
e-commerce functionality, which allows your clients to sell stuff online using Webflow. What distinguishes
workflow from all of its competitors is that
it offers hosting, which is super beneficial
for you and your clients. Because straightaway, when
you finish your design, when you get the final
approval from your clients, you can then start
hosting immediately. You can integrate
your domain name hindered hosting
directly from Webflow. Or you can purchase your domain name for
something like GoDaddy, e.g. and simply implement
that domain name into your Webflow hosting. Finally, if you don't want to host websites with fire flow, you want to host him on external websites
like whole stinger or Host Gator or something
like that, blue host maybe. Then Webflow has
that option as well. You can export all of
your code and simply have it nicely prepared
in one single folder. Then you can upload
that folder to a root folder in your
hosting website. So let me show you what flows and what it can do right now. So here we are on webflow.com and you can visit this website just to familiarize
yourself a little bit as to what Webflow can do,
how it looks like. Of course, we are going to go through a lot in this course, but it's always beneficial
for you to know at least a little bit before you jump
into the content itself. So what we have right here
is how Webflow looks like. So this is the preview mode and you have this
ion right here, which we are going to touch upon a lot of times in the course. Here on top you have your
various breakpoints, which I mentioned in
the design section. So this is the desktop
and in Webflow, everything starts
from the desktop and it goes down as
already mentioned. So you're designing for
desktop first and then you're moving down to
tablet, which is distinct. This is mobile landscape and
this is mobile portrait. And here you can see the
preview size of your window. So if you have a smaller laptop, this is really
beneficial because here you can enter some
various sizes like e.g. 2000 pixel width of the screen. And it's going to mimic the
width of 2000 pixel screen, even though your
screen might be 13, 80 or something like that. Then here we have
the adenine function which your clients can
edit quite easily once you publish the site because you can simply invite
them or you can share the link or when
you translate and transition your website from your design to
their hosting, e.g. then they can edit it directly. They can switch the text, they can create new texts. They can copy and paste different sections
of the website. They can create completely
new content through CMS, which we're going to
touch upon a little bit. And then you can see the
saved changes right here. And here you can publish
changes for the world to see. So it's quite simple once
you get the hang of it, but it's going to
look complicated, but I promise you it's
not complicated at all. Just think of it like
a big design tool, something like a Photoshop
maybe or something like that. And it's going to be really
easy for you to understand. One final thing which
I want to touch upon a concerning Webflow is this. If you want to host your
websites anywhere else, CMS and e-commerce,
including forums, it's not going to work
properly because all of those elements are combined
into workflows functionality. So if you want to create your CMS items like
we are going to do in this course for
all of those cars and detailed pages of
all of those cars, you have to do through Webflow. Otherwise, it will
not be connected properly and it will
not work properly. So make sure to
keep that in mind. Same story goes for the e-commerce functionality
of the Webflow. So you have to host your client's products inside of Webflow in order
for it to work. And finally, I want
to touch upon forums. Forums like contact form
that we are going to create in this class is connected
through workflows api. So it's sending the information
directly through Webflow. To your, let's say Gmail or whatever you are
receiving your email. So that is not going to
work properly either. But if you're creating
contact forums, you can simply edit them
a little bit later. In something like, I don't know, sublime text may be or
whatever your text editor is, if you know just a little
bit of code so you can just point that email. So it's not sending that e-mail through
workflows servers, but directly through
your server, you can simply position that and just that directly
inside of Gmail, e.g. if you are hosting
your email on Gmail. But I just wanted to point that out and it's really
important if you're working with your
clients to tell them that if they don't want
to host on Webflow, then CMS, e-commerce and forums are not going to
work directly there. So one thing to keep in
mind for static websites, I, the pages which are
not going to move, they're going to stay
completely static, like landing pages are all all all other pages
on this website, except for those pages for
various different cars. That's going to change. So just keep that
in mind and just let your clients know upfront
what they're going into it. So here we are back
on workflows website. And as I mentioned, let me just scroll
through and show you some examples as to
what you can create. Here you can see
the color picker, so same liking, let's say
Photoshop or any other tool. We're going to create
these color swatches like we did in Adobe XD. Here you can see the
published his nation. So you can either publish
through staging domain, which you are allowed to do for up to two websites on the
free plan on Webflow. And here you can connect your custom domain or your custom hosting
or whatever you want directly through Webflow
so you can connect your custom domain like
lattice.com in this case, and you can host it
directly on Webflow, as I mentioned,
and it's going to connect all of it for you. You can publish to select
the domains like this, or you can go to Advanced Options and export
code and stuff like that. So here where it says publish, you can click there
and it's going to show you export code option, which I'm going to show
a little bit later. So if I start scrolling down, you can see all of these
websites are created or have at least some pages
which are created on Webflow. Upwork is almost entirely
created on Webflow, and I know gamma road is
created on Webflow as well. So you can see how
many designers are using Webflow at the moment. And here is how it
looks like once you start working
inside of workflow. So you can just click Adjust and it's going
to adjust in real-time. Same like any other design tool. And it reminds me a
lot of Photoshop, especially because of
the color scheme and the positioning of all of
these different elements. You can drag and
drop elements onto the page and get
really specific. And you can even enter
custom code inside. As I said, if you
know how to code, if not, it's completely fine. You don't even know how to code. I'm going to show
you that later. Some creative power that
goes way beyond templates. So you can see this is the CMS which are
going to touch upon a little bit so you can pull
content from your library, which is what we are going to
create a little bit later. So we're going to create that dynamic page which has
just one page, one template, which is going to
house the layout and the content of all of our
different dynamic pages. So remember we are going to
have eight different cars, so we're going to have eight
different dynamic pages. But instead of us going and creating eight different
pages all over again, or simply copying and
pasting elements. We're going to do all of
it inside of the CMS. So that's why content
management system or CMS like this one, is beneficial for your clients. You can launch custom e-commerce
stores, as I mentioned, so you can position the pricing and you can put a
different color options, buttons, and stuff like that. We can monetize member only
content through membership. And you can make it pop. So you can see all sorts of different animations right here. And you can get really, really specific with animations. And we're going to touch upon animation is a little bit later. But we can basically create an entire course
about animations because they are so advanced
and they can be so advanced. But at the same time they
can be super easy to create. It's all really up to
you what you want to create with your
website animations. So if you scroll a
little bit down, it's optimized for marketing
and backed by design. So you can see
something like this. Why they mentioned your clients maybe want to add a new text, maybe put a new copy inside
and you can see right here, so we have this Publish button. So once you edit your copy, you can click Publish
and it's going to publish that change alive. So you can optimize SEO. So you can add title tags, you can add Meta descriptions. You can build flows with logic, which is really beneficial, especially if you're
using something like air table maybe to pull in information from air table directly through your
web, full website. And you can connect these custom logic examples
kind of like Zapier. So if user does this, then you do this and
showed them this. So you can connect all
sorts of different things. Like e.g. if user
sends me an email, put that e-mail address
from that user into a database called Marketing for Mondays or something like that. So you can be really specific
and really creative with Webflow logic and you can connect all of
your favorite tools. So if you're using
Google Analytics, you can, if you're
using Facebook pixel, you can, if you are
selling through, let's say courses
through Teachable, you can do that as well. So you can do a lot of things
right here inside Webflow. So you can grow because it's built for
enterprise scale growth, especially if you're
creating larger blogs. Maybe this is not
the right option for blogs which are maybe
new sizes because it can get cumbersome
sometimes because those large websites tend to change pages
from time to time, interacting with different
elements from time to time. So maybe something like a
custom solution is great. But until the business
at each is something like a news agency with thousands of
different blog posts, posts daily, then Webflow
is a great option for that. You can see some websites
which are created in Webflow. And basically sky's the limit when it comes to creativity. You can see made in
Webflow and find out all about it and see
what people created. They have a great resource
called Webflow University, and you can watch
their tutorials either on webflow.com
or on YouTube. They have a great
YouTube channel and you can see free until
you're ready to launch. You can build your site for free and take as
long as you need. Just add a site
plan for more pages and accustomed domain when
you're ready for the world. So you can see why they are putting this for free
because you can build, you can learn it, you
can prepare everything. And then when you're ready for, for launching, just then
you're going to pay. So speaking about that, let's quickly cover pricing and let's see how
that looks like. So if I go to
pricing right here, you can see we have site plans. We have starter, basic CMS,
business and enterprise. Now this can be a
bit complicated. So site plans is great
for trying Webflow. And when you purchase a
paid site plan to publish, host, and unlock
additional features. So this is basically
going to allow you to publish your
finished website, and that's what
site plans are for. So you can see what's
included in the basic. You can include the custom
domain zero CMS items. So it's not for CMS, 500 monthly forum subscriptions. So you can get that
many people through your email and 50
gb of bandwidth. And for the CMS, you can have 2000s CMS items,
which I mentioned. Just remember that we have
eight e.g. in this case. But in our case, let's say when client
sells that car, obviously they're going
to delete that listing. So here we have 2000s CMS items. We just have eight, but we sold one, so we're going to delete
it now we have seven, we want to add two more. So now we have nine. We're going to sell
one and delete one. So now we have eight. So you can see 2000s, it's really difficult to scale, especially for the
business of this size. So $23 monthly or if I
switch right here to yearly. So this is built yearly, so 23 times 12, and that's what
you're going to get. So we have general and
then we have e-commerce, which once again is going to give you different
functionality. So here we have thousand
different items and 2000, 200,000 in annual sales volume. And here you have
unlimited sales volume. So obviously, as your
business skills, you're going to expand and add these different site plans. And obviously when you're selling these websites
to your clients, it's important to walk them
through all of this so they understand it's best for
them to start smaller. So if your client doesn't
have any CMS pages, they don't want any
dynamic content than this plant
works quite fine. But as soon as they
add some CMS content, you will have to
purchase this plan. They will have to purchase it once again because
they will host their website on the
workflow if they want CMS. If they don't want CMS, they just want regular hosting, then this is probably
a good option. But if they don't
need any kind of CMS, perhaps even this is
not a good option because it gets quite
expensive when you add this. Because if they want to change whatever they need to create a designer plan which you're
going to get to in just a second in order for
them to make any changes, upload new images, replace
them and stuff like that. So maybe even this is
not a good option, but it's really all up to you
and your client to agree. E.g. one of my clients didn't want to host their
website on Webflow, but for every single change, they contacted me and I charged them for every single
change on the website. But it's just how you agree with your clients because for
that particular client, we just made I think Dan changes throughout
a year period. So it's not really
all that difficult, but if your client requires constant changes
to their website, perhaps purchasing
Webflow hosting is a good option for them. We have workspaces for
freelancers and agencies. We're not going to touch
upon too much for this. But obviously, if you're a part of an agency or you're
creating an agency, then this is what
needs to be explained. And here we have even more. So. We have product designer, which is what we are
interested in discourse. And we have the structure, navigate her symbols, all
sorts of different things. So we're going to talk about
that in just a second. I just want to see if I can
find pricing right here. I don't think I can. If I go to view dashboard and I go to account and
I go to plants. So I was light but it's going to cancel on this date because
I want to update to pro, but I didn't want
to update before. So when you cancel your plan, you can pay monthly or
you can pay yearly. So you can see that this
is my current plan. You can get started for free. As I mentioned in here, you have two projects. We have free staging, but you don't have
a code exports, so you will have to
pay for you to be able to export code, no
white labeling. And what that means
is you can add your own logo to the editor
and remove Webflow branding, no site password protection
and no team dashboard. So you don't have
that here either, but you have in this plan, why I chose this plan is
for my clients to be able to export code and for
me to have ten projects, which I think it's
quite enough for me. Once again, you can build
this manually or annually, or build this monthly
however you want, but you will have to
purchase this plant, as I mentioned, if you want more than two projects and if you want to be
able to export code, if you don't want
to do any of that. If you just want to learn, this, start to flat plan
is completely fine. You can learn Webflow. You can create as many of
these projects as you want. You just have to
delete some of them as you hit that limit
of two projects. And then once you get some
clients were to get going, then you can purchase
the query plan and simply continue there where you have ten projects
or when that becomes small, hopefully soon for you, then you can go to probe. So once again, to cover quickly, you have to purchase account
plants if you want to have more than two projects and to be able to export code. If you want to host on Webflow, not you but your clients, they will have to
purchase hosting plans. And if they want
to be able to make changes to their
websites by themselves, they will also have to purchase these account plans in
order for them to be able to make any sort of
changes and to be able to add images
by themselves, e.g. and mess around with the
CMS and stuff like that. So you have to explain
this to your clients. This is just a normal
expense for the business. So anybody who is doing
business, me, myself, e.g. I am paying for Teachable to be able to host all my courses. I'm paying for Gmail to be
able to have business e-mail. I'm paying to workflow, as you can see in this
example right here, I'm paying for
Business Plan e.g. so it's all part of the business and they just have to know
that this is their expense. Keep this in mind. They will have to
purchase domain. They will have to purchase
hosting, in any case, whether through
Webflow or through hosting girl,
Bluehost, Host, Gator, whatever they will have to purchase that
they're also domain. You will have to purchase
your domain through GoDaddy or to Google
domains, or through Webflow. So it's either way they will have to purchase
these things. Webflow just gives you this additional option
where you can design, build, stage, launch, and host
everything into one place. So if your clients want to do
that, It's completely fine. If not, then it's your
responsibility to explain to them. Then all of this
functionality will not work. If you don't host on Webflow. It's that simple.
So there we go. We explained Webflow. Hopefully this makes
more sense to you now, if it doesn't make sure to
explore this one more time, watch this video one more time. We'll just see for yourself and create your account there. Once again, it's completely
free for you to get started up to two projects
with no code experts. But I'm going to
show you how that looks like in this course. Next up, we're going to
prepare our files and start creating our Webflow project.
So I'll see you there.
166. Setting Up The Project: Alright, let's now
prepare our files from Adobe XD and make sure to
translate them through Webflow. And I'm going to show you
how to start a new project. So let's get started. So here we are in Adobe XD
and this is our project, and this is where
we left it off. So once again, here
we have user flow, we have paper
wireframes that we did. We have sitemap and
content architecture. We have our mood board, and here we have our design. But this you didn't see
before in the videos. So this is the style guide and how you can create
something like this. It's just super simple. And first of all, why you would create something like this
in the first place. Style guide is much
more easy to simply copy and paste styles and
elements from if you need to, and just to keep and have all of your elements
at a glance. So here you can see I
created colors, typography, iconography, logo,
buttons and car cards. So why is this important? Well, it's much
more glanceable for me to create this
now in Webflow. And I'm going to show
that in just a second. But before I do how to
create some delight this, you simply create, let's
say for typography, you create all of
these elements. And if you want to
change something, you just click here and
it's going to apply that change like I
showed you in this case. So for the colors, I did exactly the same because
I want to be able to copy this hex codes either
from here or from here. But it's much more simpler
just to have them at a glance, both for you and your clients. For developers,
if you're sending this to for further development. But in this case, for us just
to remind ourselves what's involved in this project and what's included in this project. So first things first, let
me switch over to overflow. And here we have my sides. This is the staging
site which I created to be able to walk you
through to this course. And in this case, I'm going to create a new site which is located right here, which is in my
Webflow dashboard. So if I click right here, and you can see you can get
started with the templates. And you have these templates, which are premium templates, which are made by a
designer community. And you can go with
meat in Webflow and here where it says the
resources you have templates. So if I right-click and
open this up in new tab, you can see all sorts
of different templates, but they're mostly premium. But you can filter through
free right here at the top. And you can see all sorts of different free
templates right here. But majority of good and
great templates are premium. So you can search by popular
category CMS, e-commerce. You can find all of that
out or you can click meet in Webflow for inspiration. And it's going to show
some amazing websites which are created in Webflow. But back in our dashboard, what I'm going to do is simply started with a blank template. You can see, of
course it's free. So when I click right there,
I have to give it a name. So in this case I'm going
to give it a name of a spider exclusive cars website just to distinguish it from the original one
which I created. Click creating site. And it's going to
start creating. In this case. Here we're greeted
with our designers. So before we move on, I just wanted to
talk a little bit more about this designer. What it does, whether some functionalities that you should know about
and learn about. And what sort of code is required for you to at least
understand how it works. So here we are back in
our designer and this is how everything looks like in Webflow. Started from here. When you hover over
this workflow logo, you can click and it's going
to show you a dashboard, project settings and editor. So if I click outside here, we have all sorts of elements that we can add onto our page. But where to add them, you can click right here to open up all of
these elements. So we have elements and layouts, which are basically pre-made
templates that you can use. In this course, we're going to start everything from scratch, but you can use some of
these elements if you want. They're kind of like UI kits. You can simply drag
and drop them inside. So here we have layout,
basic elements, typography, CMS, media, forums, components, all sorts of different
things right there. So in order for you to
be able to add anything, you have three options. So if I want to add a section, I can click and drag
and let go right here, or let me remove it from here. What I can do is, let's say hit once
again Section. Drag it right here
into the Navigator, which is sort of
like a layer panel. And it's located right here. You can see it in
one final thing. And we're going to do
that all the time. When I select the body and I
hit Control K or Command K, then I can type in
something like section, press Enter or Return, and it's going to
post that right here. We are going to use that
throughout this course, so make sure to get used to
it once again Control K. So inside that section, I'm going to put
a div block, e.g. inside of the div
blog e.g. Control K. Once again, I'm going
to type in H for the heading and
click on my mouse. And let's say that
this is the H2 then below that
heading Control K, IMG for the image. And below that image control
K, Let's say paragraph. And you can see how simple this is m because this is HTML. Just remember in HTML, everything goes from
the top-left down. So that's how HTML
stacks things. It's not one next to each other. Or if I open it up
here in the navigator, you can see inside of this
section we have our div block, which is going to contain
all of our elements. Then inside of the div block, we have heading
which is distinct. We have image and
we have paragraph, and they are not one below
each other like they are in Photoshop or XD or Figma
or any other design tool, but they are below each other. So we have to create something
which is called y axis. And we're going to get to it in a little bit, a
little bit later. But before we do, I want to
show you additional things. So what we have right here, this box are symbols, and symbols are basically components which we are going
to touch upon a little bit. So if I switch you
over to XD once again, here we have a component for the navigation and then
we have a component for our Contact Us form and
for the map and the location, and for the footer, e.g. and it's going to be the
same here in Webflow, where we're going to
create these components once we actually start
with our layout. Below that, we have
this Navigator, which is what I
showed you already. It's sort of like
your layer panel. And here you can
collapse all live lives or open them up in here, you can unpin the navigator
and it's going to move, but I don't recommend
that simply click pin the navigator and it's going
to stick there all the time. You can hover and
then you can adjust the width of the navigator,
something like this. If you want to see more
of the navigator in self, below that we have the pages. So here you're going to
add your additional pages, new pages, utility pages, we have password and
four or four redirect. You can add it to those. You can click right
there and you can add it how it looks like. Or if you want to
create a new page, then you can click right here. And if you want to
create a new folder, which is obviously useful
for many different reasons. But for now, we're going to just create new pages
for this website. Below that we have the CMS, which is content
management system. We're going to touch upon
it a little bit later, so we'll have to create
a new collection. Collection is going
to be cars for sale or simply cars, whatever. And then inside of
that collection, we're going to create
one page or one item and then simply recreate that
page all over again. Once we start creating new data and new information
and putting it inside. Below that, we have e-commerce. And you can see what
it says right here, but we're not going to do
with e-commerce in discourse. Below that, we have assets. Here. You're going to be able to drag and drop all
of your assets. And actually, let's
do that right now. So if you remember, we
export these here we have all of our project images here we have all of
our projects icons. So I'm going to simply
select all of them, click, drag and
drop them inside. And you can see it's
going to populate with all of these
different icons. And I'm going to do the
same with my images. So simply select all my images, drag and drop them inside. There you go. And it's
going to upload all of your images and
position them. They're speaking about images. What you can do or icons
is click on this clock. So when you hover is going to show this cog in the
top-right corner. So when I click right there, it's going to show you, is the image descriptive
or decorative? Because it's descriptive
because it's trying to explain something. I'm going to say something
like man standing in the car showroom like
that and simply close it. Why I did that? If I click
one more time to open it, it's because of people who have visual impairments and they use screen readers for them to be able to
navigate the website. So that's why you
are using this. And if I click right here, add additional ones so people closing the
deal on car sales, car sale or something
like that. There you go. Then here we're going to type
in something like people exploring a spider car showroom. Like so. And here we will have loans for a spider
exclusive cars, something like that. Then here what we can do
is create something like Mercedes Benz si clause. There you go. This is going to be a spider
car image or coloring. Car. Image maybe, or because
it's decorative, what I can do is get rid of this and it's just switched
to decorative. So they don't convey meaning and they don't
require alt texts, so they are just there
for decoration purposes. But because this is, I'm going to type in
something like Audi RS five and switch over
to my range over, which is going to be this
one, Range Rover, Vogue. There we go. So now alt
text is going to show these and it's going to
translate nicely into showing this
to my audience. Let me just see this benefits. Image looks a bit off because
it has the opacity on it. So let me get rid of it. Actually. Let me switch
over to Adobe XD. Let me find it here it is. And if I show you
it's at ten per cent, but I want to do
that in Webflow. So I'm going to expand it here, hit Control or Command E. And we have JPEG is fine
images, that's fine. Export. And then bring it to 10% here. Now, if I switch over to workflow and take
you back to my cars, you can see now, it's fine. So I'm going to
find it right here. Click on it and hit Delete. Confirm, Delete. There we go. And now I can go
back to my folder, click drag and drop it inside. And now it's going to
position it at 100 per cent. Because as I said, I want to be able to adjust those settings. What you should do for
all of your images. But I'm not going to bother
you too much with discourse, but it's just the best
practice to do so. Every single one of your
images or icons in this case, should have alt text. Alt text is going to be
carried from the name. So that's why we're
naming them in XD. So convenient car icon, that's what it's going to be. Description or the decorative. So you can write a
description of the image. Alt text is used by
screen readers and, or If an image doesn't load. So it's going to
use the alt-text, and this is the old texts
that we're going to create. So you can simply use
something like this. So convenient car icon. So you can either create that. So Kuan, lenient car icon. And it's going to use
the old texts from it. So it's your job to go
through all of your images, all of your icons, all of your logos
and included there. And speaking about logos, I don't think that we
exported logo here. I think we didn't. So let's go back to
XD really quickly. Zoom in a little bit. I have my logo there, but I'm going to do it
straight from here. So instead of JPEG, Let's go with SVG and put
it inside of our images. And if we switch over to
my web flow, there we go. Go back to my Images
and where is my logo? There? It is meant to
drag and drop it inside. And there we go Now
we have our logo. So once again, if you want to drag any one of these images, let's say this
one, simply click, drag and drop it inside. And you can see it's
going to place, be placed right there. So those were our images. And finally, we have some
settings right here. So you can see general backups. E-commerce workflow automatically creates
backups for you. And it's going to backup
all of your elements there. But basically that's
it from there. So here we have audits, here we have Custom
Search, so find anything. Here we have video tutorials
you can find there. And here we have
the help section. So if a close all of it and
just leave my navigator open. What I have right here is the preview, so toggled preview. And this is how your website
is going to look like live. And you can click through all sorts of
different breakpoints to see how your
website is going to look like on those breakpoints. Additionally, what you can do is let's say I'm on a tablet, you have this handle. So when you click and drag, It's going to switch
between your sizes. You can just watch right here on the top as I drag
what's going on. So it's going to switch
between those sizes. Or as I mentioned, you can click right here and type
in something like 2000 pixels just to see how the website is
going to look like on 2000, or let's say 4,000 pixels. And you can see it right there. So it's just going to mimic that and it's just going
to show you that. So if I switch back to here, what we are going to do next is let me walk you through
this panel and we're going to just stop the video there because I don't
want it to be too confusing for you and too long. So this video, this section
is about the styles. When I hover right here you
can see it's the style panel. This is the Settings panel. This is the style managers. So as you add your classes, we are going to get to
it in just a second. All those classes are going
to be listed right here. And finally, this is
your animation section. We're going to touch upon all these sections
throughout the course, but mostly on this
style section. So basically how you can look
at Webflow is on this side, is everything HTML, so
everything about the structure, how everything is going to
be laid down on the page. And here on the right
is everything CSS. So how everything is
going to look like and how it's going
to be stylized. So. What I can do in this case, e.g. let's get rid of
all these elements. So just hit Delete
on all of them. And let's just work
on our heading. We are going to give it a
class a little bit later. So in the next video we're
going to touch upon that. But here you can change
how it's displayed. Let's say I want to put
margin top to 100 pixels. I can click right
here, pin 100 pixels, and it's going to
position it right here. Then at the bottom, same size. Then for the size, Let's say I want to create
another div block below that. So hit Control K div, just so you can see
what I'm doing. And maybe I can position
this to be pairing. I don't know, 60 pixels maybe. And then use the color right
here to something like this. There you go. And for the size, Let's give it a width. Let's give it a height
actually of 200 pixels, just so you can see
what I'm doing. And let's actually nudge it even more until I know
for the height, for the width, let's say 500. So here we have a box
which is the div block, 500 width 200 pixels. And if I start expanding this like so holding Shift
and my left arrow key, you can see how much
it's expanding. If I add the margin, which is the space
outside of your object, to the left, you can
see how it looks like. Or to the right is going to be exactly the same
and the padding is the spacing inside
of your object. So if I go ahead and inside
of this div blog typing Control K and type in something like textblock, put it inside. You can see that the
text is now inside. So if I type in
something like this, is our button, you can see
that the text will be there. You can just imagine this
to be our button maybe. So the height is, let's say 100 pixels and the width is lets say
to 50. There you go. So you can now see how it
pushes the text around. But there is also another
way for me to fix that, which is called Flexbox. So when I click right here
and we're going to touch upon Flexbox a lot
throughout this course. You can switch it through
horizontal and vertical. And here you can position
how your elements are placed on the page so you
can see how simple that is. And if I adjust
this a little bit, you can see that now we have some sort of a
button here inside. So this is the display block, display flex, display grid,
display, inline-block. This is the inline in
the default for text, and this is all for hidden. So if I click there, it's going to hide all elements which are inside
of this div block, including the block itself. Spacing, as I explained already, size, I'll explain already. So this is your
weight, your height, this is your minimum width
and your minimum height. And you will do this e.g. for smaller screen sizes, let's say for really
small mobile screens, I don't want my
elements to be smaller than this size in
width or in height. Max-width or max
height are doing the exact opposite
of that. So e.g. don't grow any larger than, let's say, 1,300
pixels in width, e.g. then overflow is going
to show elements inside. We're going to touch upon
that a little bit later. We have the fill options, which are great for images. I'm going to show you
that later as well. We have the positioning, so we have static relative, absolute, fixed and sticky. We will cover most of
them in this course. Then we have the topography
will cover that a lot. In the next lesson. We have the backgrounds for all sorts of different elements. Then we have border radius, we have the borders,
and finally, we have the effects and animations right
here at the bottom. This is where I'm going to
actually stop this video. Because if I go into a lot
more details in this video, video is going to be a
lot longer than 20 min. There it is right now. So let's move on to the next video and
don't worry about it. If it looks too
confusing right now, it's going to be a
lot clearer once we actually start
working in Webflow. Just remember, left-hand side is the HTML, which
is a structure. Right-hand side is the CMS
and the animations can be js, which is yellow script. So we're going to touch upon
everything in this course. Don't be intimidated if you
don't know what's going on. If you're just a
little bit confused, it's going to be super
simple, I promise. And I'll see you
in the next video.
167. Creating Style Guide: Style guide. Let's now move it inside workflow and
create our style guide. So here we are in
Webflow and I'm going to try to make this
as fast as possible, but still try to
walk you through in as many details as
possible as I can. So one of the first
things which are going to do is actually add my colors in. So what I'm going to
do is select the body, which is the body tag. And once again, if we
switch you over to Adobe XD, like so. So here we have the page, just imagine it like so
our port in this case, but it's just a page. So everything which is inside of this page is inside
of the body tag. So that's really
important to understand. And the structure goes
something like this. So here we have,
if I click here, we have the nav,
we have the hero, who we are, and so
on and so forth. All of these are sections. Inside of the sections, you can see containers. So you can just imagine
that this extends through these all sorts of,
let's call it like this. It extends from left edge
to right edge completely. That's a section. Container is actually this, which is 1,200 pixels in
width that we explained. And then inside
of that container we have different div blocks, which are again,
different containers which are containing
this information inside. Probably it looks too confusing at the moment,
but don't worry about it. I promise you it will not be. So once again, here we have section which goes from
left edge to right edge. We have container
which is containing content not to go wider
than 1,200 pixels. And then we have
additional containers, also called div blocks. This is one of them, e.g. that holds the content
and here you can see it. So hero content, and
this is another one for hero image because it has
three different images inside. So let's go inside of Webflow and let's start adding our
colors, as I mentioned. So if I switch over to here, scroll a little bit down here, on this side, what we
have are the colors. So what I can do is where
it says typography, I can start adding my colors, or I can simply go,
Let's see backgrounds. I can even go there. And what I want to do is
switch you over to XD. And first things first I
want to add this body color. So let me copy it,
right-click and copy. Switch to Webflow. Select this text right here. Control V to paste it in. And it's going to paste in
that body color to add it, let me switch myself
here so you can see it a little bit better or
right here in matter. So I pasted it effects coding. I'm going to click right here
and I'm going to type in body color like that. Press Enter and it's going
to add that body color. Next up we have the white color. So I'm going to switch
all the way to white. Click right here and type
in something like pure white because that's
what we had in XD. Then if I switch to XD, what do we have
next is light gray. So right-click, Copy, go to Webflow and simply
select Paste, Enter. Click right here,
type in light gray. And I don't use
dashes, but you can. So it's really all up to you how you're
going to use this. Next up we have dark gray. So I'm going to
come in right here. Click dark gray. You can see that
Webflow gives you some indications as to which sort of names
you want to use. Copy and paste my color n. And for this one, I want to give it this name. So H three paragraph. So H three paragraph. So I know which one it
is and where to use it. Then we have this one. V, click on the Plus
dark adding color. And then we have our main blue. Come back here. Add it here. So main blue. And finally we have
our cover color. So copy, paste it in, click here and call
it hover color. There we go. Now that you have
all of our colors, let's apply this body colors. So when I hover, you can
see how they look like. Body is selected in
the navigator will apply the body color and it's going to contain
the body color, which is going to be exactly the same as our designs here. So let's now move
on to typography. And this is why I
actually created this. So if I zoom in just a little
bit so you can see it a little bit better,
something like this. So first of all, we have to integrate
the Poppins fonts. So for us to be able to do
that, let me hide myself. For this part is you
can go right here, click and go to
Project Settings. Inside of the spider
exclusive current website, you have all sorts of
different options. So for the general, you can enter all sorts of
different things right here. And for the Fab Icon, I really recommend you to
upload this web clip is for iPhone devices when they
saved to sort of bookmark. So it's just going to
show that just upload to 56 by 256 pixel
image of your logo, maybe five, I can do the same. So 32 by 32, just upload there. This is the time zone
where you are located, Webflow branding, overview and all sorts
of different things. So what I'm interested
right here is hosting. You can add these hosting plans. As we talked about, Editor is who is able to add it. Plans and billing is you can add the site plans
that we spoke about. Seo is something which we are going to touch upon
a little bit later. So Google site certification
tags and so on and so forth. So maybe you can add
a custom sitemap if you have it here. And you can disable Webflow
sub-domain indexing. Now why this is
important is if you want to launch this
website for preview, it's not going to index it. So Google is not
going to be able to find it until you
allow it to find it. That's going to stop your users from visiting the
website before it's ready. So that's why that is there. Then we have the forms. So here inside a form you
can add a foreign name, send submissions to the
email that you want. Your submissions to go through, subject line reply to address e-mail templates so you
can put all that in, recapture validation to stop spammers formed
form integration. So you can create different form integration from different online providers. We have backups, integrations. So this is what I mentioned
for Google Analytics, e.g. Google Optimize for Google Maps. Api key is required to use Google Maps in Webflow websites, which is what we are going to
create a little bit later. So you can create a Google
Maps JavaScript API key and paste it right here. And I'm going to check our maps guide a little bit later on
when we actually get to it, facebook pixel for
tracking API access, you can generate the API token and connect it
with all sorts of different external providers
which are going to then talk through this
API through Webflow. Web hooks, you can
attach your web hooks, they're outdoors, I
authorize applications. And then finally,
custom code is, this is not where you are going to export your custom code. I'm going to share
that in just a second. But here, when I click Publish, you can see what we
spoke about before. So it's going to publish to
this stage domain for free. Or you can go to custom domain and then connect the
domain that you purchased. Custom code is here. If you want to add some
custom functionality, like maybe you want
to add, I don't know, additional pop-ups maybe, or a different chat functions
that are going to talk about external chats
and stuff like that. So that's what we're
going to import here. So here you can see something
which is called head Code. Head is the element that
goes above the body. It's located in the same
page and the body and head work for every
page on your website, but had just goes above it. Content does not go
inside of the head, but code goes
inside of the head. Content goes inside
of the body tag. And then we have Footer Code, which once again
goes all the way below and inside they can be, you can see at code before body texts or before
the body tag finishes, and it goes at the
bottom of the page. Sometimes you're going to add different
stylings in the fed. Sometimes you're going to add different styles and further, depending on what
you're trying to integrate in your website. What we're interested in
right here is the fonts. So if I click the fonts, we can easily integrate
Google fonts right here. If your client has custom fonts, you can simply unzip them
and upload them right here. We're going to show them Adobe fonts are a little bit different because once again, you have your API
token and simply paste it in right
here, save token. And it's going to pull that font from Adobe fonts and
show it on Webflow. We are interested
in Google fonts because I wanted to keep things simple and what we
need is Poppins. So if I go to
Poppins, there we go. What I need is regular. I need this bold, and let's say several
hundred, which is bold. This is regular and
this is medium, e.g. so I can just click Add font. It's added, and I can click right here to go
back to my designer, is going to load
it up right here. And now we can start
adding our fonts. To do that, what I'm
going to do first of all, is create those sections
which I mentioned. So if I take you back
to XD one more time, we're going to create this
section which is full width. And then we're going to create a container which
is 1,200 pixels. So let's hit Control key and
type in, let's say section. Here, I'm going to add
a class of section. Press Enter. And this
section class is going to be the same for all of our sections throughout
our website. And it's going to
contain all sorts of different elements that
we're going to put inside. So I'm not going to touch
upon these elements at all. Perhaps what I can do is
maybe add it full width. So max width of, let's say, 100 per cent. And you can simply type
in percent, press Enter. And Webflow is smart like
that because it's just going to replace the
pixels width percentage. And what you can also do is click right here and adjust it. And what we will do now is now that we are
inside of this section, which is the class of section, I'm going to hit Control
K and put in a div. And you can see diblock pops in for this div log,
which is right here. I'm going to give it
a class of container. So Kuan, Dana, press Enter. And here we have the
class of container. What I'm going to do
first of all is click right here for the spacing, which is going to center
element horizontally. And it's just going to
put it in the center. And I'm going to give
it a max width of, let's say, 1,200
pixels. Like so. And you can see it's
in the center of my page because I
clicked right there. So that's, that's my container. And for my container
what I'm going to do is simply include
some padding, which is the element inside. And it's going to allow me for easier responsive design later. So I'm going to
click right here. You can see we already
have some presets. I'm going to put in 20 on this side and put
in 20 on this side. There you go. And now when we start
putting content in, is going to have the
20 pixel padding from left and right side, which you will see
in the next lessons once we actually start with
the designing of this side. But for now, it just gives us that breathing room when we
go to the smaller sizes. And it's going to allow us for much simpler responsive
design later. So inside of the container, as you remember
goes, our content. So I'm going to get
rid of this for now because we will
click on the body. We control K and type in H heading and just choose heading one
right here as it is. And I'm going to
click right here. And you can see we
have this HTML tag which says all all H1 headings. We are going to
select that because now wherever you have
your H1 settings, it's going to translate
those settings throughout your website no
matter which page you're in, which is what we actually want. So if I scroll a little bit down so you can see what
I'm selecting. Instead of areas, I'm going to select my Poppins,
which is right here. And weight is going to be bold. Let's go back to XD and
see what we created. So there we go. Now we have, let's
see, H1 Poppins, 64 bolts, and 86 is
the line spacing. So if I go back there, so let's go with 64, 86 volt is the color. And finally, this is the color that we're
going to choose. This really dark one here. So dark heading,
color. There we go. And now our font is prepared and it's going to be left aligned,
which is fine. So this is going to be our H1. So if I go and type in
something like heading one, just so that we know what it is. And if I type in Control K, h, use heading again. This time we're going
to choose H2 and select all H2 headings because we changed this for
all H1 headings. And if I click right here, you can see values come
from all H1 heading. So it's pulling that styling
from all H1 headings, which are HTML elements. And they are the same for every single page
on our website. So once again,
this is the H2 and it's pulling up from all
H2 headings right here. So instead of area, let's change it to
Poppins right here. It's going to be bold. And let's see, for
the size we have 32 bolt 56 line spacing. Let me just check the color
to one to two to four. And if I hover
right here to one, to two to four, so it's
the same as this color. So turn it to, and this is 56. So right here, 22, I hide this 56 color is going
to be that darker color. There we go. There we go. Our H2 is ready and it
affects all H2 headings. Now if I hit Control
K type in H heading and H3 and H4, H3 headings. We're going to choose
Poppins once again. And let's go back to XD. So this is Bolt as well, but 24. And is it the same color now? It's now the age three paragraph color because it's the H3. So let's switch, or sorry. So 24.40 is the line spacing. So 24, this is going to be 40. And this color is going to be this color for H3 and paragraph. There we go. So we are affecting
all h3 headings. And let's see what we have next. We have the textblock.
So let's do that. And I'm going to type in
Control K text block. But now watch what happens
when I click right here. We don't have that
textblock option, so we will have to
create our own textbox. So simply type in text block, my painter, and it's going
to affect all textbox. So here we are going
to select Poppins. There we go. Normal is the weight. And let's see for the
color, what we have. We have this 70, 70, which is dark
gray, I think here. And it's 20 irregular and
40 for the line spacing. So let's go that this
is the dark gray. There we go, and 20.40. And there we go. Now
we have our font size. So we have 24 here, and here we have 20, which I think maybe is going
to be a bit much on the web. I don't know. Let's, let's just keep it there. So we have our text blocks, and now what we will do
is select our paragraph, which is a regular 16, 26, and it has this h3 color. So 16, 26 regular. So let's create that
control K paragraph. And I'm going to select
all paragraphs right here, Poppins, 16, 26. And for the color we're going
to use age three paragraph. There we go. Lovely. Let's just give it text graph. There we go. This is going to be our H2. This is going to be RH three, this is going to
be our text block. Then finally, what we
need for our paragraph is all stylings have
been completed for the old paragraph tags,
you can see right there. And finally, what we
need is that all texts, so just hit Control K, type in text block. There you go. Inside of the text box,
I'm going to call it. Let's see. So labeled texts, which is going to
be Poppins 12.20. So let's call it
label text by that. And it's going to be, as I said, Poppins, 12, 20, normal for the size. So you can see normal, medium, and bold is what we
use for the color. Let's see, Let's see. Edit it using this to D to e30, which if I hover
is in this color. So H three paragraph is
the color it's using. So click right here, h three paragraph. There we go. And now we have a labeled texts, which I will write
in right here. So labeled texts,
and there we go. So now we have all
of our elements. Just remember, we already
included all of our images, so we just dragged and
dropped them inside. And now we have
created our section, our container, all of our
typography, all of our colors. So now we're ready
to get started and actually start
building this website. In terms of this, we
don't need it anymore. I can simply go back and
hit Delete on all of them. And you can remember that body, we already used that
body color inside. So now that we are ready
in the next video, we're going to tackle this website design and I'm
going to show you how to easily recreate what we did
in Adobe XD now in Webflow. So I'll see you there.
168. Navbar Build: Alright, Finally,
let's get started with building of our Webflow website. And let's start right now. So here we are in Webflow
and what are going to do first is select my body. Click in right here. And what we have right here are all sorts of these different elements that we can include. But once again, as I mentioned, I'm going to use shortcuts
for faster moving around. And I'm going to
simply use Control K one more time and type in nav, which is going to
show me this navbar. But before I put in that navbar, what I'm going to do
is create a section, so Control K section. And putting section
inside of that section, I'm going to put a nav bar. So control K navbar. There you go. I'm going to
call this navbar nav bar. So give it a class like so. And here we can have all sorts of these
different settings, but we're not, we don't
really care about that. What we care about is this container that all
this information is in, because this container is
something like 960 in width. So we're going to fix that
by selecting our container, because our container,
if you remember, is 1,200 for the max-width. So I'm going to hit Control
K one more time typing div and put my div
inside of here. Like so. I'm going to call
that div navbar, something like that, or
navigation or let's call it or main nav bar on top, nav bar or something, or NAV. The deviation. Let's call it, let's call it like that because
we will just have one navigation inside of debt. I'm going to put
just all of this n. And instead of navigation, Let's actually rename
this to container. Like that. Actually even better. Let's remove the class
and start all over. So container, because
we already have that class and we're going
to call it navigation, nav bar like that. So now we have combo class. And what combo class is, is your main class, which in this case is container. And it already knows that it's 1,200 pixels wide because
it's a container. And we already created
that container. Sorry, nav bar,
because we want to know what's the additional
value added to it. So in this case, we know that the
container is, as I said, 1,200 pixels in width, and it has the pairing of 20. As you can see, our navbar is because it's the
navigation on top. What I'm going to do next is
to style it a little bit. So I'm going to
select my container. And here we are going to, let's just keep that
container for now. Maybe we can pull it out of
here completely writing. Now, let's just keep it. Let's just keep it
as they created it. Because I think we can add value to it like
that or I can even add, let's see, container 1,200. And our container is
1,200, so that's fine. So I just added that
container class to their original container. And inside of this container, I just created it as a navbar. So it's a bit confusing, but don't worry about it. It's going to all be
explained in a bit. So what I'm going to do here
is where it says brand. Maybe I can add that, but actually before that, let's start with our container and let's first
change the color. So if I scroll all
the way down where it says color, it
says transparent. I'm going to select
the body color here. And I'm going to do the
same for the nav bar. So you can see it's selected
this DDD light gray color, but I'm just going to
select my body color. There we go, and now
we have it there. So first things
first for the brand, I'm just going to navigate
to our assets right here, select my logo, drag
and drop it inside. There we go. And I'm just going to use
alt texts from asset, which is the logo. Or I can tapping custom
description and e.g. a. Spotter logo. There you go. And I'm just going to
place it right there. Now next what I'm going to
do is select this nav link. We actually have to style
these nav links first. So let's give it a class
of nav link like that. And in terms of styling, what we can do is if I go
back to my design here, if I select it and
jumping right here, you can see we have the
styling of the textblock, so 20 irregular and 40. So we're going to apply
those settings there. So let's go with
Poppins, where we are. And then we're going
to go with 2040. And Without any decoration
right here. So without any links. And I'm going to
put that color in, which is this one I think. Yeah, so dark gray, That's our color for the link. And because we have
the nav link class, what I can do is select
these to get rid of them. Control C, control V, control V. So I have
now have three of them. So if we go back, we have
cars alone and contact us. So this is going to say cars. This is going to say loans, and this is going
to say, contact us. There we go. Now let's see for the
styling because we have 20 on each side for
this Contact Us. I wanted to stick to
the right of the page. So what I'm going to
do actually is add another one which is
combo class for the last I that I'm going to get rid of this padding on the
right-hand side like that. So it's going to
stick to it here. So let's now create the styling. So here we are in
default selected. So let's go with
the hover state. So just click this arrow, select your hover state. All we need to do right here
is change the color from dark gray to hover
color, like so. And then here, Let's go with depressed state and
insert a depressed state. I want to choose our main
blue color. There we go. That's how easy it
is to create this. Now all you need to do
is click right here. I'm going to go to the
preview mode and hover. You can see we have the
hover effect straight away, which is why I mentioned
inside of the design section, don't worry about it too much. Don't spend too much
time with your elements. I think this is going
to work out just fine. Finally, what we will do is select our container with all of our elements and turn it
into a flexbox, horizontal. And let's say like this, and let's select our logo. Just going to be our
brand positioning it right here and it's going
to put it right here. And let's play around
with some settings. So inside of the container, Let's select our nav menu. And here we have
alignment and order, and I can click right there
and select that to be lost, which is going to
push it right here. Then select my
container and maybe play around with these
settings like this one, e.g. and if you hover, you
can see what this does. This is for the end
and this is the space between so to distribute
evenly from start to end. So now when I hit preview, you can see that my logo is centered alongside
with these elements. And when I hover
right here and click, you can see that my navigation
works out just fine because we have that 20 pixel
padding from each side. So you can see how
that looks like. And now when I click right here, you can see how my links
look like right here, positioned directly, so
everything looks out just fine and we can adjust
the debt even further. So when I go right
here, go back, and then I can perhaps
select my entire component. Maybe I can go to the styling and you can
see type is dropped down, how the opening works. And it works, it works. So it works for tablet, it works for phone landscape, and it works for
mobile landscape. So if I say show e.g. inside of the tablet, now I can start styling this. So if I click right here, what I can do for my logo. So let's select that one. And inside of the background, you can see that this
background is selected. Perhaps I can select
this darker background. I think that will work. Maybe a little bit
better, I think, no. So we can see that this is
selected for the background. So let's go for the icon. Color is transparent
in this case, so I don't know where where it pulls the styling game from. So let's see what we
can do right here. Yes, so it's taking
that styling from here. But when I change it
to here, there we go. So it's just taking
the styling from here. So when I select it from here, I don't know why it
doesn't changing. There we go. So
finally it applies. So I'm going to select
this age three paragraph, maybe more, perhaps even this
darker color. I don't know. But just keep it
light gray as it is, and then go inside of
my icon and change my icon color to
this color maybe. But for whatever reason
it changed into that. So what we can do is
later down the line, we can maybe change the icon itself because it has
this box around it. You can see the box
around the icon. So perhaps let's go back to the transparent and maybe
we can select that box. Maybe we can apply something different, like
maybe discolored. There you go. And in terms of the nav links, Let's see nav color transition. Let's see where we are. There we go. So let's
just select this one. And apply it everywhere. And because of this, Yeah, So there we go. Now we have all three like this. I think it's fine. And it's for the hover. What we can do is
go to the main one. So you can see
this has nav link. Now we'll ink and
this one was last. So now Lincoln less. So you could add it
either one of these. And let's select hover state. And inside of the styles, what do we can do is
we can see preload. So where does it take us? I don't think that we can we
should actually select that. See, I think that's fine. That's actually fine because you will not be able to cover anyway when you start
with your design. So I think that's
fine, That looks good. This looks good as well. So we're going to get to
it a little bit later, but I think for
now, this is fine. Until we replaced the icon. Actually what we can
do is perhaps we can quickly go to X d.
So let's do that. Here inside of my plugins. What I can do for
the icon scouts, if it loads, let's
see what it will do. So go back to Icon
scalp once again. And here what I can do
is search for close. There we go. We have this one. Or even better, we already
have that close icon. Let's see what it is somewhere
around here, I think. But I didn't add
it as a component. There you go. That's why it's not there. So if I select this one and hit Control C,
I can close this. I don't need it. Then go
back to my iconography, are right here,
hit Control V e.g. and then choose, let's
say dark heading color and close icon hit Control K. And then what
I can do is open up my iconography and use debt and simply put it
inside of my icons. It's going to put
it at the very, very end of here. There you go. Now, I just need to align it to the center or
something like that. Hit Control or Command E as
an SVG instead of images, I'm going to export it to icons. Select folder, hit
export as SVG. That's fine. Let's close this control S go
back to Webflow. And I'm going to head
on over to right here. And let me just open up
my folder once again. So we have a spotter assets. There we go as icons. And I'm going to select C, close icon, drag
and drop it inside. There we go. And now when I head
on over to tablet, I can go right here where it
says icon and select this. And let's, let's, let's
adjust it to body color. There we go. And select my icon. And let's see, select
those settings. Maybe I can even drag it inside. So let's check that. Click and drag it inside. Let's see if that
works. You sit does. So when I select this
icon and hit delete, It's going to put
it in right there. So when I click right here, click right here, there you
go. Everything is there. And let's click Show to
see how that looks like. I think that looks quite fine. And now we can even go ahead
and move further with this. So first things first for this, I think we don't need
this color anymore, light gray, so let's
change it to body color. There we go. And all of this can be
body color if you want to, but I think light
gray works just fine. And let's just leave it at that. So as you can see, we now have the
custom icon there. So that's how easy it is and
that's how nice it looks. And it's going to work just
fine on all different sizes. So now that we have
created our nav bar, and it took us
quite a bit of time because I wanted to explain, because we're going to reuse
it throughout our design. What we will do now is
turn it into that symbol. To create a new symbol, what we will do is we have this navbar inside
of our section. So I'm going to simply
select my entire nav bar. Because later down the line, we're going to create a section. Inside of that section, we can pull in the navbar. Or even better, we can
simply set it outside. Let's give it a name. But he named class of nav bar. Like this. Let's go remove nav bar, top main nav bar. That's how our section is going to be called in this case. Just so that we can see it on the page with this name.
As you can see it. Select our symbol,
create a new symbol, and I'm going to
call it nav bar. And create symbol. There you go. So now we have our main nav bar, and now wherever we
are on the website, we can go ahead and
edited and we can simply copy and paste it when I
switch over to my symbols, you can see that now we
have navbar one instance. If we use it on for pages, we will have four
different instances and so on and so forth. So basically, this is
what we have so far. Now in the next video, let me just close
this for a second. In the next video, we
are going to move on to this section and create this image with a car
and this right here, we're going to have
a little bit of padding on top of 100 pixels. So I'll see you in
the next video.
169. Home Hero Section: Alright, so let's continue
where we left off here we have this hero section. So let's go back to overflow. And we're going to
select our body hit Control K and type in
S for this section. I'm going to go back right here, type in section to give it that class Control K type
in div for the do block, I'm going to call it
C for the container. There we go. And now inside of this section, let's call it, let's give
it a combo class of hero. And inside of this container, what we can do is maybe
put into different divs. I think that that can
be quite beneficial. But actually before that, what do we can do is
put in a wrapper. The wrapper is actually
the element which goes, just remember if we go
back to XD right here. So we have to wrap this
into that wrapper. So what I can do is either use that as a
container and call that a rapper or create a
completely new wrapper. So I'm going to do that instead of using container
as my wrapper, I'm going to hit Control K
one more time typing div, and now call this
one hero wrapper. There you go. And the whole
purpose here is for it to wrap our content inside. So you can see
container is here, hero wrapper is inside. We still have that 20 pixels
padding because it pushes that hero wrapper and
inside of the hero rapper, what we actually want
is to additional divs. So let's hit Control
K, type in div. This div block is going to be, let's say hero content. There you go. And you can see it right here. And I want to
select another one, hit Control K, type in div. And this div block
can be hero.eg. For the hero image, e.g. inside of the hero content, what we can do is maybe we can, first of all use
the hero wrapper and turn that into a flexbox. And that's going to push
our content side-by-side, as you can see right here. Now, inside of this container, what do we can do is, or even better in this
section, what we can do, let's say, give it a
top margin of 100s. So here we have
this section, hero. And I'm going to use
top margin of 100, and it's going to
push that content away from my navigation. So go back to the hero, rapper. What I'm going to
do here is e.g. I. Can maybe, let's say
distribute like this. So it's going to push the
content from side-to-side. Same like we did right here with the navigation inside
of the hero content, what we can do is I can type in Control K type in H heading, and I'm going to choose the H1. Let's simply use the text. So H1 and use all H1 headings. There you go. I don't know why
why didn't pick up the something is not right. So if I go to Poppins and 64 and use my color
for the dark color. There we go. Now when I paste in my text, yeah, something is not right. I don't know why it didn't save the classes that
we previously did. So if I select my age
one, you can see it's 86. So if I go back and type in, 86, must be a bug or something. So your partner for I'm going to press Enter for exclusive cars. There we go. So now inside of debt, what I'm going to do is
hit Control K for a text, not text link, sorry, I can get rid of
that control key. Text block. I'm going to straight
away give it a class of text block. There you go. Now we have that. So I'm going to copy my text, paste it in right here. A documented history
looks lovely. And one final thing I want
to do is to add a button. So hit Control K button. There we go. And I'm going to give
it a class of main btn, same like we did with the, with the design in Adobe XD. So here straightaway,
what I'm going to do is use the font of Poppins. I think it was 20. So let me check in my design. So let's see. This is Poppins 20
regular and 40, and it's going to be
the color of white. So let's see, 2040, Poppins, normal,
that's what we need. Color is going to be pure white. There you go. And now, in terms
of the padding, maybe what we can do is
put in something like, I don't know, maybe 16. So I'm holding Alt and holding
my left mouse button, 16. Or you can click right
here that I've been 16. Click right here, they've been 16 if it doesn't work for you. And for here I'm going to
use something like 52. I think that's
going to work fine. And for the corner radius
you can scroll all the way down and type in
something like eight. I think that will
work just fine. There you go. I'm not going to deal with
any sizing right now. I think that's fine
for the color at what we will do is
select our main color. And here what we
will do is typing, explore our course and you can see that the button
grows just like in Adobe XD. Finally, I'm going
to select right here hover state, color. I'm going to switch
it over to our color. There we go. Remove it from here because I want my current
state to be this. And now if I hit
preview and hover, you can see how that looks like. I think that looks
great. This looks good. And let's now go back to it. And let's see hero rapper. What I can do, maybe, yeah, maybe I can give my hero wrapper max
width of 1,200. There you go. And because of the content
which is pushing in, maybe I can give it a
further padding of 20, let's say something like that. And now when I hit right here, you can see that now they are actually aligned sub is just taking that 20 and gives
it another 20 inside. So when I switch
over to right here, you can see that now we
have 20 here and 20 here, which is aligning
with our top logo. Or what we can also do is go back and simply
remove it from here. But I think it's going to work just fine for this example. So here we have 20, here we have 20 or your better, I can get rid of it right here. So zero and then zero
right here because we have the container which
has the 20 inside. And I can simply
adjust the navbar. So press Enter. And inside of the navbar, what I can do is for my
container here I have 20. And when I go inside here, once again, I have 20. So here what I can
do is hit zero. Here I can hit zero, and now these two
are going to align. So when I hit preview
one more time, you can see now the
content is aligned and we still have that 20
padding on each side. So that's how easy it is to fix it and
don't worry about it. We're going to deal
with that a little bit later with responsive. Let's go back to our
design and let's work with the hero
contents section. Now, what I can
do right here for a hero content is
perhaps I can give these a little bit of padding or margin or something like that
just to differentiate, differentiate them a little bit. So in this case, I can type in and
select all H1 headings. And in this case, let's add H1 hero here
instead of top margin. I'm going to get rid of it. And for the bottom margin
I'm going to add 32. There you go. Here for my textblock, what I can do is let's say textblock and add a
combo class of hero. And inside of that we can add a bottom margin of 32 dairy go. And if I take you
back to our design, that's exactly what we have. So if I select my old key, 32, and then 32 right here, that works like a charm. I think this is going to work
out quite nicely for us. But one final thing which
we might want to do is to select this hero content and maybe give it a max width. So in this case, I'm going to come right
here and it says width. And whoops, not that
click and then reset. Let's see width. I can give it a width of 60%. So I don't know what's going on. So 60 and type in percent. There you go. So now it's going to
cap the width at 60%. So as I mentioned,
you can use pixels, you can use percentages, you can use all sorts of these different values right
here inside of Webflow. But for this case
we're going to use 60. And for our hero images, what we can do is
use a full width. So what we can do is go back to our design. Let's
see where we are. And if I select the entire box, you can see it's 515 with 450. So if we go back to here, maybe I can go with something
a little bit different, like five to two and maybe 388. There you go,
something like that. And inside of our hero image, because this is done, let's see with the button, I don't know why it's
giving me this margin. So let's see hero content. Does it have the margin? No. So here are our
wrapper or maybe we can position them in the center. There we go. So now the text is going to be in the
center with our image. So with our image, what I'm going to do is hit
Control K type in image. For my image, I would
want to use this car. There you go. Now, typing Control
K one more time, type in image, one more
time, choose image. And let's see, we will need this and Control
K one more time, IMG, we will need another image. And that image is going
to be that gray circle, which is this one. There we go. And now you can see
because of the HTML, it positioned them below. And I don't really
want to do that. So what I'm going to do
is use my hero image. And now we're going to
talk about positioning. So if I scroll a
little bit down, here, we have the position
static instead of static, which is just there. I'm going to put it to relative. And relative basically allows
you to point your code. Because remember, Webflow
writes the code in the background all the time
as we start designing, it points to code to a specific task that
you want it to achieve. So for this case, I want to select this image. And instead of, let's see, instead of position static, I'm going to put it
to position absolute. And you can see it's
absolute to hero image. So wherever the hero image is, this is going to be
absolute to that position. So here in this case I'm
going to put my blue image to the top left corner and then I can adjust the
positioning in a second. But I'm going to also
select this gray one and also selected
to be absolute. But in this case, bottom
right-hand corner, like this. And now I can select
it and come right here and maybe I can
adjust this blue circle. Let's see. Let's actually reset it. And maybe I can adjust it here and perhaps even hear
something like that. And you can see how simple
this is to do with this one. I'm not going to experiment
too much perhaps here. And I think we can
call it a day there. And if you want to
adjust the size of this, simply adjusted like this, pulling from the corner. And then maybe I can move it slightly down,
nudge it slightly. There we go. We have our completed section. Keep in mind. We're going to adjust
it a little bit later when it comes
to responsive. And this section is, let's see, 100 from the top. So it's going to respect that. So when I preview, this is how our website
looks like so far. We don't have any
link right here because we are going
to create a page, write up a little bit later. Same story with these pages. Once we've finished
the homepage, we are then going to move over
and position those pages. And what I forgot to tell you
is about to y positioning. So I'm going to touch upon
that in just a second. But when especially the tablet, everything is going
to break down. So we're going to
deal with that a little bit later when
we get to responsive. But for now, let's
go back to here. And what I'm going to do here is with this image selected, or even better with this image selected with this blue one. And I'm going to find this
one which is Z index. And basically you
have your x index, which is top and bottom. You have your y index, which is left and right. And then the other way around, the y indexes, top and bottom max index
is left and right. There we go. And z-index is front and back. So basically like looking
things in 3D once again, because HTML puts
things on top of each other and it doesn't
care about spacing. That's why they
created this z-index. So for us to be able
to point it out. So here you can see
that this image kind of Sean's shines through. So I'm going to
select this blue one, put z-index of five maybe. And now I'm going to
know it's upfront and upfront of this car image. And I'm going to do
the same for this one. So simply use number
five, press Enter, and now I will know
whatever happens. It's going to be in
front of this image. But in terms of its positioning, because the main
image is relative and these two images
are absolute, it's going to
position them there. So there you go. That's our hero section. And I'm going to
call it right here. Because if I select
my hero wrapper, you can see that the flexbox
is positioned to horizontal. If I switch it over to vertical, this is great once
again, for responsive. So you can see how simple
this is to adjust. But as I said, we are
going to adjust it a little bit later and play
around with the settings. For now, we're
just going to move on through these sections. And as I said, this
is our section hero. And in the next lesson, let's deal about width
section about us, and I'll see you
in the next video.
170. Who We Are Section: Alright, let's now create
who we are section. And I'm going to
select the body. Because if I create this
section is going to give me an error because I cannot put a section inside
of this section. So let's select the
body control K type in C for this section. Select the section, and
I'm going to give it a combo class of who
we are. Let's say. Instead of that control key div. For the div, I'm going to select combo class of container. There we go. And now for this one, I'm going to give it a top
margin of, let's say 200. And I'm going to push
it 200 from here. Because if I take you
back to Adobe XD, you can see when I hover, we have 200 between
these two sections. We have 100 between
this and navigation. So we now need this. So if I select that section
and select that container, what we need is we will
create another div, so Control K, type in def block. And we're going to call it, let's say who we are. Rapper, Something like that
inside of this container. And for that rapper, what I'm going to do is turn on the flex display because I'm
going to create Control K, put in an image. And this image is going
to be this image. There you go. I'm going to then select
the who we are, rapper. And inside, Let's create
another content div. And let's create
who we are content. And inside of that content, what we can do is
maybe we can put in, let's see, H2 heading
and type in H2. Let's see if it's
saved in settings. So all H2 settings. I don't know. Why didn't I just don't know. So I don't get it. So H12 right here, it didn't save it
for whatever reason. So if I choose
Poppins right here, and choose the color from H2, which is this 132. And let's see, I think we are at 48 or something, 30 to 56. Let's keep the deaths of 56. All H2 headings. There you go. Now we have that. So let me select my text and go with a spotter exclusive cars. There we go. Before we move on any further, what I can do is perhaps
I can give my image a margin right here
so I can space these out evenly. Even better. Who we are, our wrapper,
we can do the same thing. So click right
here, it's going to position them right there. And then image, I can put in maybe 80, something like that. And then we don't
even need that. Maybe we can position it
to the left. There you go. And now we have the 80 pixels. If I hover over my image
and hover right here, you can see that we
have the AD pixel spacing for the margin here. Now inside of our content, I'm going to hit
Control K and type in text block like this, give it a class of
text block like so. And I'm going to select my text type in passion
and dedication, Control K. And let's see if we have any styling
for the paragraph. Once again, no, I don't
know why it happens. So select Poppins right here. So let's size of 16, select the color of
H3 and paragraph. There we go. And for the height, let's see where we are
with Adobe XD, it's 26. So come over here to 26. There we go. And
I'm just going to select my content right here. And I'm just selecting
and pasting. You can paste from Adobe XD
because I have two monitors. I'm simply copying and pasting
the text from our designs. So if I take you to
Adobe XD, there you go. So I just double-click
copy Control C and go back to Webflow
and simply paste it in. So that's basically
it for this section. The only thing which
is now left for us to do is simply style
it a little bit. So first things first, who
we are calling wrapper, because it's the flexbox. I'm going to click right here, which is going to
center my content. And now I'm going to
give this image a class. So I'm going to rename
it to who we are. Img, like, so, just so
that we know what it is. And here let's see
what we can do. So maybe we can give this. He had engaged t2. I'm going to give it
a separate class. So let's give it a Th2. Who we are. Well, let's see. H2. Dark, maybe, because you're going to reuse
it throughout our website. And here for the margin, I'm going to go with zero. For the bottom margin, I'm
going to go with 24 maybe. Here for this textblock, what I can do is add a
combo class of who we are. There you go. And here I'm going to add another bottom margin of
24 and paragraph is fine. There we go. Now we have
this section completed. And you can see how
super simple this was. So when I click right here, you can see now we have this
top section with the button. And now we have this
bottom section. And when I switched to a tablet, obviously we're going
to switch these two and the image is
going to go to the top. Text is going to
go to the bottom. So it's going to work just fine. And here we have this sum. I made a mistake actually because instead of
putting the Menu icon, I putting the clothes icon. So I'm going to fix that. Let's go back to here. Let's go back to our
navbar typing Enter, go to here and select our icon. Let me actually go to X d, and let me actually go to here. And let's see, select
our search menu. There we go. Menu and maybe we
can use this one. I think it's going to be good. There you go. Let's select paste
it in right here. And let's give it
a name of menu. Icn. Let's give it that color, which you use a darker in color. There we go. And I'm going to put it right here to the center. So it's going to be
much simpler for me to paste it inside of my icons and position it all the way down below close
icon. There we go. Make sure it's in the
center and hit Control E, export it to assets. There we go. And now when I
switch over to my folder, let me just find it
out where it is. There we go. And I'm going to go to my icons, and then select my Webflow. Go to my assets. Find that menu icon. There we go. Lovely. And then for the menu icon, Let's hit right here
to expand this. So I don't know why it's showing me like this,
but it doesn't matter. Let's just go to here menu icon and add it right
here. There we go. And what I can do is perhaps make it be a
little bit bigger. So width, maybe we
can go with 16 by 16 or 24 by 24
pixels. There we go. Looks lovely. Select this, get rid of it. For some reason. You can see it doesn't get rid of
it straightaway. So it's really annoying. Menu Image. Get rid of it. There we go. And
I'm going to give this Rename To Menu icon. There we go. Now,
it looks great. So now when I go
back to my instance, select the desktop, hit
preview, go to tablet. Now we have this Menu icon. So when I click,
you can see that now all of this
works as it should. So go back to it and go back. So now in the next section
what we will do is go back to XD to show you where
we're actually going to get started with our cards. So as I said, and I have it right here. We're going to design this card. We're going to put in
this information inside and then we will add these
images a little bit later. So I'll see you there.
171. Car Selection Section: Alright, let's go ahead
and design this section so you can see that we have
the title in the center, and then we have these
three cards with the Bot button at the
background, at the bottom. Sorry. So let's switch you
over to our workflow, right? So let me actually close my folder so it's
not distracting me. I'm going to select my body hit Control K. I append
div, div block. And for this div block, what I can call it
is actually no, let's get rid of it. Sorry, Control K type
been sectioned first, give it a class of section
and car or selection. Selection. That's going
to be our section. Inside of that div. For the container. There we go. And inside of that
container where we can do is maybe create a wrapper
or something like that. But here, let's first give it
a margin of 200 so that we can push it away from
this section, this one. And inside of this container, what I can do is typing Control
K type in div, div block. And this is going to be
our car cards wrapper. There we go. So inside
of this container, what I'm going to
do first is typing Control K, type in heading. I'm going to use
the H2 for this, and I'm going to
use all headings. There we go. Finally, we are
now with this and I'm just going to add the H2 centered. There we go. And inside of the H2 centered, I'm going to get rid
of this and this. There we go. And I'm going to make sure
it's centered like so. And inside, I'm going to type in like our exclusive collection. There we go. And I'm going to just put it
above my cards of wrapper. And if I select my section, you can see that
now we have 200 for the margin inside of
the content rapper. What I'm going to do is turn that content wrapper into
a grid a little bit later. But before I do that, hit Control K typing div to add another div which is going
to house my elements. And that div, I'm going to
give it a name of car card. There you go. So inside of my car card, what I'm going to do is actually put in all
my information. So let's see what we can do. We can let say inside of the car card I can hit
Control K type in image. And let's just leave
it at that for now. Car image because
it's going to pull an image from the container. But actually let's, let's, let's see what we can do. So for here, I can go
with car images and maybe add three different images on the guinea hurrah Khan was one. So let me actually
select it from here. So who are account is
going to be added. Then let's see, escalate
is going to be added. And Lucid Air is going to be
added here inside as well. Because we're going
to add images later when we actually start
messing with our CMS. But for now, we're going
to just put it at here. So car image, I'm going to
hit this clock, choose image, and I'm going to select
Twitter account just so that we can see it obviously is just huge because we need to add all of these
additional elements. And to do that inside
of the car cards, I'm going to create another
div Control K. Just think of it like a
folder type in div. And this div block we
can name something like car card info, card, card info. And inside of that info, what I can do is perhaps
add in that age three, control K type pin heading H3 and see what
we have right here. So all h3 headings, it's still didn't
take the information. So let's take Poppins. I don't know why when
I first designed this, it didn't cause me any issues, but now for whatever
reason it just does. So here we have that
h three colors, so let's do that. So color h three and paragraph. There we go. And I'm selecting
and this just so that you guys can
see what I'm doing. And what I'm going to do is
use all h three paragraphs. That's fine. Here I'm going to type in
Lamborghini would occur. There we go. And right here I'm
going to hit Control C, Control V to paste it in. And this h3 is going
to be H three blue. And all I want to do is simply switch this to the blue color. And this blue color is actually going to
be for the price. So let's go with 1949990, sorry. And then finally, what
we will do is create another div block inside because if I switch
you over to my design, if you remember, we created this year kilometres
and I actually going to select that and
give that as a combo class. This year, kilometer has the padding on it and it
has a distance of 24. So that's exactly what
we're going to do here. So Control K one more
time typing div if block, I'm going to give it
that class which are just copied year kilometers. And let's add two texts inside. So Control K type in text. And let's see, textblock maybe. I think, yeah, textblock, give it a class of
text block right here. Text block, there we go. This first one is
going to be 2021. There you go. I'm going to hit Control C, Control V to create another one. And this is going to
be for the kilometers. So let's go with 63 to 4 km. And I'm just going to
switch them around and then select your
year kilometers. Come right here to the display. Click right here
for the flexbox, and click to be in the center and then just distribute
them like so. There you go. Now, only thing which is
left for us to do really is to play around with the
settings of our elements. So what I can do with
H three blue right here is give it maybe
instead of this margin, I'm going to go with zero. Bottom margin, we can go
with 16 or something. Let's see. Or maybe padding, we can
give it to 16 of pairing. There we go. And this H three, let's call it h three dark. Maybe. Here we will remove this, and here we will remove this and perhaps give it 16 as well. But now what do we
can do is yeah, yeah, just give it that. And for the car card
name for what I will do is actually give
it a padding of 24. Because if I take you back to XD and select my car card text, in this case, 24
here, 24, 24 here. So to do that in Webflow, selected and then go
24 here, four here. And finally 24 here. And there you go. Now that our card is ready, what we will actually do is
let's give this a class of who the car like so
and on the car cards, rapper, what I will do is turn the display from
inline into a grid. And grid works like this. You have your columns
and you have your rows. Now, these are the
columns at the moment, we just have two columns. But if I go right here
and typing this plus, we now have three columns
and now we have two rows. You can see this is
the row number one, these big three columns. And now this is the
row number two, these three smaller columns, to get rid of them because
we don't need them. I'm just going to hit Remove
right here on the rows. And now we're just going to have one column, super simple. So you can play around
with the settings here for the grid and for the
sizes and so on and so forth. But before we do anything, we have the car card, which is located in the
one column of our grid. I'm going to hit
Control C, Control V, control V to paste
it in three times. And before I move
on any further, what I want to do next
is for my car card, I want to give it
that background. So car card go to my
design for the background. I can go with the color and
I can select my white color. You can see that right here. So simply select
your pure white. There we go. And it's going to color in
the colors from each side. Now, what we have right here is the rounded corner radius. So I'm going to select
the debt and typing aids. There we go. We now have the eight for the corner radius
and for images, Let's select this
first one, e.g. because all of them are exactly the same
here for this one, I think we're going to
have the escalates. So let's right-click right here. Duplicate the class
type in escalated. There we go. I'm going to straight
away replaced the image so it's not confusing. There we go. And here for my image, what I'm going to do for the
radius is click right here. For the left corner, I'm
going to type in eight. For the right corner,
I'm going to type in eight and it's going to and
replaced them with these two, but not with this one
because I change it around. So when I select my
escalate and do the same, so type in aid, type in eight. And it's going to round
those corners like so. And that's exactly what I want. But the last thing is for this. So you can see here with
the years, kilometers, what I will do is just maybe, let's see, maybe I can put in the pairing here or 24 maybe. And I think that
will work just fine. Or maybe even better with
16 because we don't need that much spacing right
here on this side. And there you go.
Our cards are ready. But even better, what
I can do is type in zero right here because
I want to achieve this. And typing instead
of text blocks, I'm going to call
it car card year. And if we take it
back to the design, Let's see here. There we go. We have a stack of 24 distance. So when I go back to our design, Let's take Q right here. And for the text blocks, what we can do is select
this tech blog car year and simply add
a margin of 24. There we go. And now this, we are going to
set it up to be like this, to be lined up to here. And this year kilometer for whatever reason
didn't translate to here. So let's give that a class. So this was textblock
card, card year. So if I add it right here, card card year, it's
going to apply it. Select this one. Card, card year. It's going to apply it. There we go. And one final thing
which is left for us to do is simply select this. So Cadillac escalate,
this is the price. This is going to be
the luck escalate. I think that's how you write it. With two L's escalate 2020 and this is going
to be the mileage. So this is going to be 2020. And this is going to be
the mileage. There we go. And finally, this is
going to be Lucid Air. Let's go ahead and replace. First of all, let's
click right here. Duplicate the class, call
it Lucid for this image, and simply replaced
the image right here. There we go. And for the price, let's go back to XD. Let's see. 2022 is the year. This is the price. This is going to be 22. 22, there we go. And for the year 40 km, sorry, we can go back to here and type in
debt. So there we go. Now we have our cards. And the last thing which
I want to do actually is let's first collapse
all of this and then select our card like this. I'm going to select my card and then putting a
border right here. So I'm going to
click on the border. Instead of color black, I'm going to choose this
color or even better, this color, and then reduce it all the way down to zero
so it's not visible. So that's our default state. And now let's create
a horror state. And all we need to
do is simply bring that back to 100, like so. So now when I hit preview, hopefully it will work. There we go. But for whatever reason
it stays right here. So let's see what's calling it. Do that. There we go. So if I remove that, hit preview right now, hover. You can see that all
of it works just fine. But now we have a bit of
a problem because this is too close and these are
too close to each other. So if we go back to my workflow and let's see what we
can do right here. So maybe we can add to the car cards wrapper
a top margin of 64. There you go. And finally, for the
grid itself to edit it, what you can do is
click on this icon. Here we have this FR, which is the fraction
of the grid. And how you can think about
it is your grid columns are divided by default
on equal f ours, so here we have three fractions, so three equal fractions. And you can adjust
these fractions by clicking right
here, adjusting it, making one column, short-term, making one column larger. But what I'm actually
going to do in our case is come to XD and C. So we have 38, so we
don't necessarily have to achieve the same result. But if it had been 24, maybe for the gap
between these columns, press Enter, you can see. So maybe we can
have 32, even 38. Let's see. So yeah, I think this looks quite nice. Maybe it's already too late. I don't think that 38
is quite necessary. There we go, because it makes my images look a
little bit smaller. And you can see the hover
effects work as they should. And there you go. Now we created this. Now, obviously, because this is going to be our
dynamic content. Once we actually
finished this page, we are going to
start talking about that dynamic content
before we move on to the next page is because
obviously we will need it for the next pages. But for now, let's
quickly see what we did. So here we have our navigation. We have our button,
and it works. We have these two sections. Then we have this
section with our image and this width or the text. And finally, we have our exclusive collection
when we hover, it works exactly the same, same like we imagined
it to in Adobe XD. So I'm really happy with
how this looks like. In the next section, we're going to talk
about what we offer. And I'll see you
in the next video.
172. Offer Section: All right, Let's continue
where we left off and start with our
Offers section. So hit Control K on the
body type in section. And I'm going to add
a section class. And maybe our offer. There we go. And inside of that
control K type in div. For the div, give it a
class of C of container. There we go. And for our section, Let's see, maybe we can give it a margin of 200s so that we can push it from these below inside of the container Control
K to have been div. For the div, I'm going to
add it a class of offer. Our offer wrapper. There we go. And inside of that wrapper, what I will do is perhaps, let's see what we can do. Maybe we can put in, let's see, Let's use this H2. So hit Control C right here, close all of this, and hit Control D right here
inside of our container. And it's just going to put
it right below our wrapper. Just put it right here. And I'm just going
to use the texts of what we offer like this. There we go. Inside of our wrapper. What I'm going to do is maybe
turn that into a flexbox. Because remember if we take you back to our design right here, scroll back to what we offer. We still have these two columns, same like we did with the
hero and with whatever. So here on this column we are
going to have this section. So let me close this
so it's not confusing. So here in our offer, we have offered in four and we have our image on the side. So that's exactly the same what we will do with
our design here. So let's hit Control K
type in def, add a div. And this div is going
to be something like our offer content. There we go. And maybe we can hit
Control K type in image and add that
image for the offer, which is this one. There we go. Finally, because we have
turned this into a flexbox, make sure we centered it and make sure we
spread it around. So we put that equal positioning
between our elements. So now we have this
and we have this. Finally, our offer rapper can
have a margin of 64. Maybe. There we go so that we can
distinguish it from the text. And if I take you back to here, as you can see, we still
have that 64 texts. So inside of our offer content, what I want to do is e.g.
let's see what we can do. Maybe create, maybe create
three different news. Because if I take here, maybe this can be one div and all the contents
should go inside. So inside of this one div, we can have three more divs. So 12.3 and inside of each of them can be one div
which is going to hold this, which has the stack of 16, So icon and the text, and the text below it. So let's structure it like that. So if I go back to my
workflow right here, so we have our offer
content, which is this. And inside of debt, what I can do is maybe hit
Control K type in div. And inside of that div, which I'm going to call
Let's see, offer warranty. Offer warranty. What I'm going to put inside
of there is maybe image. For the image, I'm going
to use the icon of, let's see, let's see, let's see where we
are for that batch. But I need that blue badge. It looks like it
didn't export it because they just have
this white version of it. So let's just put that for
now until we go to X d, selected warranty icon, badge, blue, Control X exports. There we go. And now let me find
it in my folder. There we go. We are at icons. And let's see, I can
click here my icons. So that was warranty, badge, icon, blue,
drag and drop. There we go. Let me close this so
it doesn't bother us. Replace the image with this one. And now it's inside. So if I go back to here, here we have the offer warranty and here we have this image. So I'm going to type
in something like war. Ran. T, icon, blue. There we go and decide that I need to have a text
which is going to be an h3. So Control K, type in
heading, select the H3. Let's see if it's saved. My settings, all h3 headings. Yes, it did. Finally, lovely. And you can see the
settings right here. And what I'm going
to do is perhaps add a combo class of H3 and dark. Like so, just so that
we know what we have. And I'm going to get
rid of this bearing for now because I don't
need it in this case. And here we're going to write in something like
extended warranty. There we go. Now we're going to use that offer warranty and
turn that into a flexbox. Make sure it's centered. And I'm going to select my
icon here, warranty icon blue, and give it a margin of 16
because that's what we had, if you remember in our stack, in our design, instead
of our offer content, what I can do is
perhaps, let's see. Maybe I don't want to do this. Maybe I can rename this
to offer a title, maybe. So renamed class
to offer a title. There we go. And I'm going to create another
div right here. Put that on top, then put this title
inside of that div, like so, and then
give this offer. Offer Let's see warranty.
Offer warranty. Inside of that offer warranty, I'm going to put in a text
block, K, text block. There we go. And here I'm going to give
it a class of textblock. And let me just take some texts. There we go. And here for this textblock, what I can do is offered title. Maybe I can push
it down a little bit. Let's see what we can do. Maybe we can give
it a bearing of 24. So select our offer
title and it's going to go to 24 margin below. I think that will
work just fine. Here we have our offer warranty. So what I can do with this
section is our offer content, which once again is the main
div holding it up in place. What I can do is perhaps
turn that into a stack, but maybe I don't even need
to. Let's check it out. So if it hits like
Control C, Control V, Control V, it's going to
paste it in three times, which I think is fine
because our offer wrapper remember is a flexbox itself. So this is just the child of our Flexbox, this offer content. So here what I'm going to do
is offer warranty is fine. This next one is going
to be maintenance. So let's see what I
can do right here. So offer warranty, I'm
going to click right here. Duplicate the class. Instead of warranty, I'm going to type
in maintenance. And then I'm going to select
the texts right here. So for title is fine, but this, I'm going
to replace it, replaced the icon
and we just need to find that maintenance icon. So let's see where it is. There we go. And instead
of warranty icon bloom, I'm going to duplicate
the class and type in maintenance. Icn. There we go. And it's going to
keep the same setting of 16 as you can see, which is what we want exactly. And finally, let's
change this last one. So let's right-click,
left-click, sorry, duplicated the class. And this is going
to be offer loans. And let's double-click
right here type in loans. And this is going to
duplicate the class alone. Icn, lovely. And instead of this icon, let's replace it
with the loans icon. So let's find it where it is. It's the hand holding a car. So let's find it. There we go. Loans
icon globally. It still keeps that
16 a distance. Now let me just take the text
and paste it in right here. And take the text from here, paste it in right here. Lovely. And what I'm going to do next, and finally is if I
take it back to XD, we have some distance
between each of these. So we have 40 and
we have 40 here. So perhaps that's what
we can do here as well. So if I close all my, uh, see what I did previously. So offer warranty, maybe I can push this to 40 and
offer maintenance. Maybe I can push
this to 40 as well. So let's see how
that looks like. There we go. When I hit preview, I think that looks just fine. But perhaps 40 is a bit much and we want to have the
space for our image. So let's go with 32. I think it will
work out just fine. So 32, lovely, lovely. Now this section is
completed basically. So you can see what we did
and how fast that was. And I'll see you in
the next video where we are going to create
this benefits section. And it's going to require a bit more work because
of the image overlay. So I'll see you there.
173. Benefits Section: Alright, let's go ahead and deal with our benefits section. So if I take you back
to flow right here, I'm going to select the body hit Control K type in C for us, sorry, S for a section. Section. There we go. They've been controlled
Kate and div, and this is going to
be our container. Lovely. And now inside of
that container, what we can do is perhaps
put in the wrapper. So Control K type in div. And this div can be,
let's see, benefits. Rapper. Like so. Inside of that
content obviously is going to be our text content. Now in terms of this, Let's
call this section benefits. There you go, and give
it a top margin of 200 seen like with all of
these other ones that we did. And finally, what I
want to do right here is I want to make some changes. So for the container, I want it to actually
be full width. So I'm going to type in full
width for my combo class. And for the width right here, I'm going to type in 100%. And it's going to take
the entire percentage of my screen. Benefits of wrapper is
actually going to be at 1,200 pixels. There we go. And we're going to center it
just like that container. Then what I'm going to do is instead of where it
says backgrounds, image, gradient,
I'm going to select that and I'm going
to put in an image. I'm going to choose my image. And from here I'm
going to select my benefits. There we go. Make sure it's centered, make sure it does not tile, and make sure it's set to cover. And that way it's going
to cover in just fine. Now finally, what's left for
us to do next is perhaps, let's see, make some
changes inside. So if I go inside and let's see, maybe I can put in some content inside
of our benefits wrapper. And for now, let's see, let's give this
container some size. So if I take you back to here, what we have for our
benefits is 469. So let's actually use that
for now as a placeholder. Let's go back to here. So
containers should be in height 469, like that. And now we have this. So this benefits wrapper and container can maybe live
inside of each other. But let's just work with the
benefits wrapper for now. So I'm going to hit Control K, type in H for the heading. And here for the heading
we're going to go with, Let's see, H12, maybe. There we go. And it's going to retain
all of our settings. So let's go with H2 white. And for that, what do we can do is get rid of this margin. Get rid of this margin here. We can go with white color and we can go with
centered like so. And I can type in something
like our benefits. Lovely. And below that what we can do is perhaps create another
div Control K typing div. This div is going to have
a class of our benefits. Something like this. Inside of debt. What I can do is perhaps
create another one. So our benefits is going
to be our main div. And let's hit Control
K type in div. This div is going to be called
free delivery. Delivery. There we go. Let's select it from here, hit Control K to
type in an image. And I'm going to
add a quick image, which is going to be
that delivery icon, which is the car
with a pin on top. There we go, which is this one. And below that, what I'm
going to do is perhaps ads. Let's see, maybe
an H3 Control K, h. Let's go with H3. Save the settings. No, it didn't for some reason. All these three headings,
there we go. Lovely. And I'm going to simply
add H three whites. Like so. Select it from right here. Make sure it's white. And also make sure
it's centered like so. Here I'm going to type
in something like free delivery, allow loop. And inside of our free delivery, I'm going to hit Control K
one more time and type in P. For the paragraph. All paragraphs. It took the styling and I'm
going to type in something like paragraph or
p or p body color. Because that's the styling
it is going to take. And from here I'm
going to choose the color of body
color, like so. Let me just copy and
paste that text. Let's see something like that. So let's copy and
paste lovely javelin. And this is basically how our content is
going to look like. Now, obviously
it's not centered, so Peabody College should
be centered. There we go. And for me to center
all of these elements, I can turn them into a Flexbox, but let's not do
that because let's just use our benefits and
turn that into a grid. And you can see it
immediately centered these elements
inside right away. So let's use 32, same like we did previously. And let's just add
one more column. Let's get rid of this row. Lovely. And I'm going
to hit Control C, Control V, control V to
paste in two more times. On this free delivery, what I can do is turn
it into a flexbox with vertical and I'm just going to hit right here where
it says center. And it's going to center
all my content inside. Lovely. Everything is where
it should be. You can even just apply
it to the center, but I don't think that it's necessarily maybe just
place it into the top. So what do we can do next
is here in the center, we don't need free delivery, so I can duplicate
that class and call it a three stage Polish. Like so. And this last one
is going to be, let's click right here, duplicate the class part, exchange, part
exchange while loop. And let's actually
add the content. So paste it in. Like so. This last one is
going to be part of an exchange and the
contents to be in this. There you go. Now, in
terms of H three white, when I'm going to do is
get rid of this top one. And for the bottom one, what I can do is type in 24. It's going to give me that
nice spacing that I want. And for the image, what I can do is this is going to
be delivering icon. And perhaps I can put in the
bottom margin of 24 as well. This is going to be
the Polish icon. And do the same for it. While we are here,
make sure we get rid of this one and
use our Polish, which is this one, lovely. And finally, let's
select this one which is part exchange icon. And on this one, Let's go with 24 as well. Click right here and replace
it with the part exchange. Which is, let's see, to make sure to see
it in my design. Yeah, the one with the key. The one with the key,
which is this one lovely. And what do we can do next? Now that we have all
of our content inside, you can see that our
benefits wrapper is kind of sticking to
the top of this page. So what are we going to do
is make a container into a flexbox and then use our wrapper and
simply makes sure that it is in the
center like this. Then what we can do is make sure our benefits has
the margin on top. So if I select right here, you can see that
here we have 64, so that's what you're going
to create here as well. So our benefits should
have a top margin of 64 and everything is going
to align quite nicely. Now finally, what we're
going to do is use our container and scroll
where we have our image. So now what we're going to
do is select the color. So let's see color
overlay perhaps. And for the color, what we can do is
maybe use this one. So dark hair and color and
simply reduce it by 10% or so, maybe even a little bit
more, something like this. So in this case,
because it's reversed, maybe we can go to
80% just so that we can have the same
effect that we had in XD. So if I take it to XD, you can see how that looks like. So if I hit Control
Enter here, sorry, Control, Control Enter for the preview and scroll
right, right here. You can see that now
we have that effect. So I think that
works quite nicely. The next step is our forum. So let's go ahead
and finish off this, because I think this
looks quite good. And I don't think that
no further changes are necessary to this
section, to be honest. And it's going to work quite
fine because it is a grid. When we get started
resizing these, obviously we're
just going to push the content right on
top of each other. But for now, everything
works as it should. This loans, let's get
started from the top. So here we have
this, we have this, we have this cards
work just fine. We have this section
which works like a charm, and then we have this section. So I'm pretty happy with
how this looks like. And in the next section, as I said, we're going
to tackle in the forum. So I'll see you there.
174. Contact Form: Alright, let's now continue
with the Contact Us form. And before we move
on to workflow, let's quickly remind ourselves
how it looks like in XD. So here we have the text
which is Contact Us, then we have one full
form field or inputField. This one is going to take up six columns or three
columns higher, you want to call it because
this is going to be a grid. And this one is going to take a bit more space because it's going to be a bit taller
for the message to accompany the space
for the message. Finally, we're just
going to reuse our main button component
with the send message. So let's get over to Webflow. And first things first,
there's always hit Control K and type in section. And one thing I want to mention is you can see that now
workflow is saving. And when I click C section
right here and there we go. And it's going to show
us that checkmark. You can see we still
have unsaved changes, but when it saves is going
to show that saved change. Instead of here, what
I'm going to do is hit Control K type in div,
div block presenter. And for the div block, I'm going to add a
section of container, like so, there we go. Inside of that container, I'm going to add another one. So hit, and there you go. It now saved our changes. Hit Control K, type
in div, like so. And this one, I'm going to
call forum wrapper, e.g. warm wrapper because
once again it's going to wrap that form
inside of our field. So let's open it up. And inside of debt, let's first select this
section and call it forum. Let's see what we can do. Call it a contact form. Because maybe you're
going to have different forums
on your website. And for this
section, once again, let's go 200 with
the top margin. So it's going to push that
content nicely inside. Now, inside of this content, what I can do is let's see, maybe where it
says forum wrapper inside of this container I can hit Control K and M is something like a heading H2 and search for H2
centered loudly. And here I'm going to
simply write contact us. And once again, because it's directly in HTML below
our main element, I'm going to position
the Form Wrapper below, which is going to push
the Contact Us above. For the forum wrapper itself, I'm going to give it
a top margin of 64. So we're keeping that
nice and consistent look and feel of our design. Inside of the Form Wrapper, what I can do is hit
Control K type in form. And it's going to simply
add this form block inside. When I click on it, it's going to put it in. And this is how it looks like. So if I close this,
we have the name, we have the e-mail address and
we have the button inside. So inside of Form Wrapper
we have our form block. Then we have the
form element itself. Here we have the field label. And this first one, we're going to call it
e.g. I. Don't know. Fullname. That's what it was previously. And inside of our TextField, what I can do is when
I click right here, we're going to say the name, we're going to say the type. And finally for the placeholder, I'm going to write in
enter your full name. And you can see that text
appearing right here. Now, in terms of the styling, what I can do is for
this field label, what I can do is get
rid of this one. But actually no, let's, let's see what we had in XD. So here we have 16, and this is obviously
16, this is 24. So let's go and do
that in Webflow. So this is going to have the bottom padding
of 16, a lively. And this one is going to, I have the bottom padding
of 16 as well, like so. And our text field, Let's go back to XD is going
to have the 32 distance. Let's see, textfield field
label can have 32, e.g. there we go. Finally,
this bottom one, but no, not that text
field should have 32. There we go. And TextField, This one
should also have 32, like so. Instead of e-mail address, what I need right here is, yeah, let's type in email and click on the TextField to what I'm going to do is
enter placeholders, so enter your email. And let's now deal
with some classes. So first things first, this
is going to be a field text. Let's give it a
class of textblock. So remove the class
and let's give it a class of
textblock actually. So I'm Qin style, whatever I want right here. So TextField and form. Sorry. So here what I'm going to
do is instead of bolt, I'm going to go with irregular. And instead of disk color, I might use something
like this color. Yeah, I think that works fine. Let's see what we
had right here. Now here we actually had that gray color
but just regular. So let's go back to here. So let's go with the
gray color, irregular. There we go, and let's
just adjust it to 16. Here. There we go. So now
we have textbooks and a textblock and form. So let's select that right here. So remove the class text block and form was the combo class. And it helps, but not
for that, but for this. Remove the textblock form. Lovely job. So now we have that. And let's go ahead
and style this. So in style of the text field, what I can do is
select that text. And let's see how
we can style that. So maybe we can adjust this. Let's say plane gets an e-mail from and
you can access all of these for the success
and for the error. So you can see how the
success feels looks like, how the error fields looks like, but we're just going to
target the main one. In terms of a TextField. Show all settings right here. And for the sizing, let's go with something
like Poppins. Poppins as well with 16. And let's go with 24 right here. And let's go for the
color of this one. And this one. Let's go with darker in color. I think it will look just fine. Instead of TextField, let's rename the class and
let's call it e.g. forum text field. There we go. And for whatever reason
it didn't change. So maybe the opacity is
playing a part in it. So if I hit preview right
quick, there you go. So it works, but for
whatever reason, it didn't change right here. So what do we can do
inside of the block? Form fields? We're going to adjust this
so it looks like in XD. So here we have 16
on each side, e.g. so let's adjust that. So for the pairing on
the form text field, I'm going to go with
padding of 16 right here. Padding of 16 right here, or just on this side. On this side is
going to be zero. But for whatever reason, it's going to, it's not
going to allow me to do so. So maybe if I select my
text field settings, so form text field. So let's go with that and let me change it
to maybe to eight. And this can be
to eight as well. So I'm delighted
that this can be 16, This can be 32, so it pushes down and
it terms of the sizing, let's go with the height of 50. And now we have what we need. And the text inside a looks. It looks alright. Color should
be white, so that's fine. So forum text field, let's apply that form. Textfield. There we go. We have the same
thing inside and we have the styling and
accompanying this. Now let's quickly close this because we have
this submit button. I don't need it. I'm going to hit Control
K and typing button. And inside I will just add
our main button, like so. There we go. And for our main button, one on the right is send
a message like this. And now that this is completed, what I can do is quite simply maybe put in a div
Control K type in div. And this div block can
host these two groups. Sometimes they can
be a bit stubborn. Just put it inside
text block, inside. There we go. And this def block
we can call e.g. name field like that. And that name field doesn't really need to have
any additional styling. I think that's fine. Now let's create another one. So select the Form
Control K to append div. Put it in just below
our name field and put this inside of that. Like so. What I'm going to
do is perhaps call this email like this. I'm going to hit Control C, Control V on this email, what I'm going to
do is rename it, but first duplicate the class, and now rename it to phone. Here I'm going to
select this one. I'm going to type in
phone here for the text. This is going to be fun. It's going to be enter
your phone number. Like that. Lovely. And here let's see, for the email,
Let's adjust this. So this is the
e-mail, that's fine. And this is the name,
so name, email. And here we have what? We have the phone number, like the phone, There we go. And finally, what
I'm going to do for this one is hit Control C, Control V. And this
one is going to be, so duplicate the class
is going to be message like that inside of
the message here. Let's say something
like message. Here we're going to
type in message loudly. And instead of enter
your phone number, maybe I can say something
like write your message. Finally, what I want to do is
to get rid of this border. So select any one of these and click right here
then right here, and it's going to get rid
of every single border. So when I click, you can
see how it looks like. So I think it looks quite fine. But obviously we need
to now put it inside of a grid and align it
a little bit more. So how we can do that? It's actually super simple. Let's use our forum wrapper, which is going to be our grid this time. So click right here. And then what we need is e.g. six different columns. So let's say 123456. And let's say for the rows, we need something like, I don't know, maybe five rows. So we already have
one here, so 12345. And why we need that? It's quite simple because we are just going
to spend these. So let's select the name field. Let's see what we can do. So text form block. Let's see how we can
adjust the dose. Yeah, I think what
we need is not here. So let's put this to display. But I'm going to do is on
the form itself actually, let's put that to be our grid. So once again, 23456. Yeah, that's fine. And here we said 12345. There we go. So now let's select, Let's see our name field
and click right here in the corner with this dot
is and simply span it. To take up the full
width of your page. Then take the email and
span it three columns. So 123, That's what we're
going to do right here. There we go. Take the phone 123
and take the message, span it all the way to here. And in terms of the message, but I can do is spin it to
take the two column width. There we go. And now simply
select our button. And what we can do is maybe
span at the entire section. But actually know what
we are going to do is maybe span it's just one
column or something. And then maybe we
can go right here and type in last
so it's lost and maybe position it to
the side right here and perhaps simply span
it all the way to here. There we go. Now we have our button. So now the last thing which we need to do is simply adjust the width of this
message section. So how can we do that? Is we need to adjust
the height of it for the text input field. So let's just go back to our
message foreign text field. And I'm going to add
a combo class of message because
remember it's 50, but here I want a B17 one, e.g. Derek go. And now what I can
do is perhaps, let's see. I need to make sure that
my text is at the top. So maybe I can deal with
the padding in this case. So for this one, what I can do for the
bottom padding here, maybe I can go with 112. There we go, 168. And for this one, should I put it to zero? Yeah, I think that
works just fine. So just play around with
the padding values. Play around with
a margin value c, where you are in your design. So now when I hit preview, you can see fullname
and I click right here, is going to pull in my
information, my email information. And for the message, maybe you can type is
something I Hello guys. How are you doing? But before sending it, I actually have to
connect this form inside of my designer as
already explained to you. There, you can put your
client's e-mail and therefore, it's going to be
able to actually send it where you
want it to send. So to which email address? I still think that this button maybe is just touched too big. So if I click on it and see 16, maybe if I adjust this
to eight, we're good. No. No, I don't think it will. So let's just leave it
like it is right there. I think it's going
to work as it is. So now that we created that, because we're going to reuse
it throughout our design. What we're going to do
is click right here, create a new symbol
and call it e.g. Contact Us form. Here we go, create simple, and now we have the symbol for the
Contact Us form. We can go back to instance. And now when I hit preview, nothing really changes, but
still we have it there. Also, when I click here, you can see because we have
that 20 pixels padding inside of our container is
still contains it inside. But now when I adjust this, obviously I will have to adjust these columns a
little bit later, but you can see it responds
quite nicely on responsive. So there we go. Now, the next section
we're going to do is the section with the map. So I'll see you
in the next video where we're going
to tackle that.
175. Map Section: Let's now deal with the map. And here we are in XD and you can just see
the content here. So we're going to have
this left and right content same like we did
previously with the top section. And then we're going to have this text inside
and the address. For the address and
the icon is going to be same like we
created right here. So if I select that, you can see that this
has the stack of 16, the distance between these two. And obviously this
is going to have a bit of spacing of 24, and here is going to have
the spacing of 32, here, 24. So let's jump inside the PLO and let's start building
that section. So let's see what we can do
right here is go to the body, hit Control K, type in section, and go back to the designer, give it a class of section. Lovely Control K div, div block. And for this section, because this was the
form for this section, I'm going to whoops,
why it didn't. Wait, wait, wait, wait, wait. I think give it a class of
section for some reason. No, No matter. And I'm going to type in
something like a map. There we go. Now this def block is
going to be container. And inside of that container I'm going to give
it another div, call it map wrapper. There we go. And for this section, I'm going to give it a margin, top margin of 200. There it goes, so I can
distinguish it a little bit. Now inside of this map wrapper, which I'm going to
turn into a flexbox. I'm going to put in the
content on the site. So putting div and
this div block, we can call something like map content or
something like that. So let's see where
we are content, where we are content. And just name this map wrapper. So maybe we can rename
it to where We are rapper because we might have maps on different
places in our website later. So just leave it like
this, live it like this. So make sure that these
two are centered. And what we're going to do inside of here is
simply add a map, so Control K type in map. And here we have a map. So it's just going to
add your map inside. And because I already
put in my API key, you're going to get your API key by creating your Google account. If you don't already have one, you have to put in your
credit card information. We are now going to be built. Google just needs to
verify that you are a human and that you
are a business. If you're doing this
as your own business, it's probably wise to create this API key because
you're going to create this for your
clients all over again. But if you're not, a business, makes sure that your client
creates this account, simply type in Google API key N is going to show
you for the map, is going to take you
to this Google Cloud. And as I explained already, when you go into
Settings right here, so go to the project settings. Can I go right here? And let's see for
the integrations. Come on load, please. There you go. You have Google Optimize and then
you have Google Maps. So you can click right
here where it says Google Maps JavaScript API key. And you're going to get this API key which you can
simply copy and paste. Right there. You can hit Save and it's going to
show you this map. But once again, it's
best that either you, if you are doing
this all the time, because it's going to be super simple for you to
simply copy and paste the API key in your
future projects and simply change the name and your address later
when you need it. Or your client, if
they need the map, then they can create an account. It's going to be free for them. Just need to put it in the
credit card information so Google can verify
that they are human. Obviously if they start getting traffic directly from this map. So people take this map, click on it, go to the map and
go to the navigation, e.g. for the car, for the
walk or whatever, then Google is going to
navigate that and see how many visits does
the business have and start to billing them at
the end of the cycle, I think it's something like
200 visits or 300 visits for free and then it's going to
start billing them like that. So this is our Google Map, this is our API key. So what I'm going
to do is select my container and select
my map. There we go. Click select right here because I want to enter the address. So let me go back to XD. Here I have the address
in Belgrade, Serbia. And let me go back to here. Obviously you can take
whatever address you want. So we have this one presenter
and it's going to update that address later on when you actually go live and watch it. And you can adjust this to road, terrain,
satellite hybrid, but I'm just going
to leave it at road. So let's see. You can leave this like this. You can zoom in if you want, but let's just leave it
like that at default. So what we can do here in
this case is, let's see, maybe we can give the content
width of 40%. Like that. We're just going to push our
map and maybe we can give it the margin here
of, let's see, 64. Maybe. There we go. And I think that's going to push our map nicely. But here in this case here
we have the wider maps, so it's 683 by default. So if I go here to my map, obviously I can add
the max width, e.g. is 683, something like that. And it's just going to
push my content like that. It turns out the high-tech can go with something like 100%, which is going to take up
100% of my content here. But because I don't
have any content, I should probably start
adding that content. So let's click right
here and reset that just so that we can see our map. So where we are content, what we're going to do is e.g. putting the H2 headings. So Control K type in
heading, select our H2. There we go and let's
see what we have. So H2, dark Live. And for that one, what I can do is let's see, maybe why, why it doesn't
keep the settings. I don't know why
what's going on. So let's go remove the
class, all H2 headings. It still keeps the areal
for whatever reasons. So I hope that you are
having this problem. So H2 and we just
select this, so 32. And let's see where we are here. So we are at 56. So 32.56, right here. There you go. That's going
to be our H2 heading. And let's style that
to be h to dark. Yeah, It's taking classes
from all H2 headings, but it doesn't show me
that it does matter. So let's click right here, so where we are, like so. And then below that, Let's hit Control K type in text block, give it a class of
text block, like so. And let's simply
select copy our texts, put it inside. There we go. And now for the distances, Let's see what we can do
is for this text block, what I can do is put
in where we are. For whatever reason it
keeps the spacing of 20. Let's give it a spacing of
32 actually in this case. So, but just change it to
where we are like in debt. And instead of 20 torr,
Let's go with 32. There we go. So it
pushes this down. And in terms of this, what I can do is
textblock where we are like that and bottom
should be 24, 32. There you go. Because if we
take you back to my design, you can see that here we
have 24 and here we have 32. So let's go back to here. This should actually be
24, sorry about that. This should be 32.
We are now fine. So what I'm going to
do next is putting a diblock Control K
typing div, div block. And the first one is going
to be for the address, the address inside
of that div block. What I'm going to do is type in another div
blocks of control. Kate had been divided block, and this is going to
be the title e.g. let's see, dress,
title like that. And inside of that hit
Control K type in image. For the image, I'm going
to choose that pin icon, which is going to be, obviously you can
use the search, but I don't want to
confuse you even more, which is this one lovely. And inside of that
address title, what I'm going to do is
hit Control K type in paragraph and use
all paragraphs. Let's see, for whatever reason, it didn't change this. Poppins 16, 24, and this color should
be h three paragraphs. So this, as I said, for whatever reason,
it didn't change debt. So let's go with the here. So let's go with a
dress like that. And here I'm going to add
the class of address icon. There we go. And address title. We are going to put
inside of the flexbox, make sure they are centered. And make sure that Let's
see what we can do here. For this. For whatever reason
they're not centered. Let's see what we can do here. It looks like paragraph.
Yeah, that's right. So go to zero. There we go. Because it had that
we're padding paragraph. So where do they
address icon is? Just give it a margin of 16 on the right-hand side because we just want to mimic our design. I have this spacing. So if I select this,
you can see that the stack is at 16 pixels, so same like we did right here. So what I'm going to do
next is use this address. And actually we have the title, so hit Control K type
in P for the paragraph. And inside of that paragraph, Let's try all H1. There we go. Now it kept it and
let's simply paste in our address a lovely,
this addressed title. Let's see what we can do here. So we are distance of 16, so we can give it a
bottom padding of 16. So addressed title,
bottom padding of 16, which is going to push our
address down a little bit. Then select our
address, hit Control C, Control V, Control V two times. Lovely. And here what we can do is this middle one
should be phone numbers. So duplicate the
class phone number. This inside should be duplicate the class forum title and get rid of this
copy text like that. And this should be duplicate. So it should be fun. Lovely. So let's go ahead and
start replacing these. So this should be fun. Let's find the
phone where it is. There we go. So this, instead of address, it should say phone number. And instead of deaths it
should be plus 381-123-4567. So just a random number. And finally, for this last one, it should be opening hours,
duplicate the class. Opening hours like that. And inside of debt, we can do is duplicate. So maybe we can call
it something like opening hours, title, lively. And once again finally, for the icon inside, instead of a dress, duplicate. Let's give it the
class of clock, clock icon because that's what's going to be presented there. Let's locate it right here. Let's see where it is. So clock icon, there we go. And finally, let's do this. So opening hours. And here we're going
to type in something like Monday to Friday, a two to 04:00 P.M. yeah. I think that's going
to work just fine. So now that you've done that, what we need is to put in
the spacing between them. So if I click right here, you can see the spacing is 24, so let's deal with that now. So address should have
a bottom margin of 24. Phone number should have
the bottom margin of 24. And the opening hours
should stay the same. Now when I select my map and
rename it to map, whoops. Rename it to main, our main map. Try that. There we go. And now height can be
altered to fill in this, or it can be 100 per cent to fill in the space
of this content. But for whatever reason, it didn't fill in that. I don't understand why. So let's go back to the
default and let it apply. Or we can go back to XD
and see the height of 507. So maybe we can adjust that. So main map should
be 507. There we go. And now it just fills
in a much more nicely. So if I hit preview
really quickly, this is a generic
map preview view, actual map on published sites. So we have to
publish our website, either two-stage domain,
which is this one, or two custom domain,
which is this one, to be able to view the location, but we don't really care
about it right now. It's going to work just
fine because we set it up already inside of Google
and inside of Webflow. So here everything is, as it should be, everything is
positioned correctly. Everything works as
we wanted to work. And here we can set this
to horizontal or vertical. You can see how this looks
like later for responsive. So everything works just fine. So this is our map. Final thing I want to do
is come back to here where it says symbols,
create a new symbol. I'm going to call it map. Create a symbol. There we go, and now we have that symbol. And there we go. One last thing I think for us to do is to go ahead and
create our footer. And I'll see you
in the next video where we're going
to do just that.
176. Footer Section: Alright, let's now
go ahead and create this footer and finish
off our homepage. And then later in
the next lesson we can tackle that
CMS collection page, which is going to be the
center hop off our page. But for now, let's just deal
with the footer itself. So what I can do is go back
to Webflow right here. And we just created our maps. So let's select our body hit
Control K type pins section. And go back to the designer, give it a class of
section like so. Inside of this section, I'm going to put
in the div block, which I'm going to call
container a lively. And this section is
going to be Footer. And it's going to have the
margin of 200 on the top. Lovely jumbling. And inside of the container, what I'm going to do is
hit Control K to open div and call this footer rapper. Like that. And inside of the footer rapper, what I can do is
put in my image. So Control key, image. For my image, I will choose
my logo, which is this one. Go. And footer wrapper just
has the image right now. And what I can also do is
putting that bottom texts, so Control K, type in P for the paragraph and
inherit all paragraphs. It now works just
fine, which is lovely. Let me copy that text, position it right here. And let's give it a class of p. Let's see p body
color, p centered. Be centered for
paragraph centered. And I'm just going to click
right here and it's going to center that text below. But I also need are those four icons and the
navigation from the navbar. So I'm going to
cheat a little bit. So just open up your nav bar
and find your container. And let's see nav menu. I can hit Control C
to copy it from here, I can simply go back
to my instance, go back to my footer
is going to jump there and paste it just above
the paragraph itself. So you can see, maybe I
can go back to it and adjust it here. So let's see. Instead of the nav menu, I can rename it renamed
class to nav items. There we go. And I'm going to take all of these and perhaps position
them down at the bottom. Let's just try this
one more time. So hit Control C,
go back to here, control V, It doesn't work. So let's go back to here
and let's see what we can do because I always
try to navigate this. So we have a nav link class. So let's go back to here, and I'm going to hit
Control K to turn this text into a text link. Now let's try with nav link. Now blink. There we go. And it's
just going to give us the same text as we did before. First one is going to be cars. There we go. And let's put that
into a div, div block. Put the text inside of
it called the div block. Let's say nav links the footer. Links footer. There we go. And let's duplicate
it two more times. So Control C, Control V, Control V, There we go. This nav link should
have the margin of 24, I think so let's just
check really quickly. Now items nav link. It actually has
the padding of 20. And this last one. Okay? So let's deal with debt. So if I go back
to here nav link, let's actually give it
the pairing of 20 here. So all of them have
pairing of 20, nice. And on the left-hand
side as well. Lovely. So we don't even need that
on the left-hand side. So let's go with
zero and this one, I'm just going to give it
a combo class of last, last, and it's going to
remove that pairing of zeros. So cars, we're going
to have loans here. And finally, we are going to
have contact us, contact us. There we go. So now that we have that, let's position it here. One final thing I want to do
is hit Control K typing div. And this div, I'm going to call social icons like that. And inside of that, I'm going to hit Control
K type in image. And then maybe I can
copy it straightaway. So Control C, Control V, Control V, Control V, because we know we
have four of these. And all four should
actually go here. So, no, not this
one made a mistake. I should copy this one. Control C control V, Control V, control V. There we go. And I'm going to turn in a
flexbox and on the image, let's give this,
Let's see Facebook. And let's see what we have in
content itself. We have 24. So let's go back to here
and give it a margin of 20 for this next one
should be Twitter. And let's give it a margin of 20 for this next one should be YouTube, margin of 24. And this last one should
be LinkedIn, I think. And it should not
have any margins. On this occasion. For the Facebook
click right here, then choose image and let me
choose the Facebook icon, which is, which is
this one lovely. Then for this one
we have Twitter. So let's choose the Twitter. For this one we have
YouTube. Here we go. And finally for this
one we have LinkedIn. So let's locate our
LinkedIn. Here we go. So now that we have
all of our icons, what I'm going to
do is actually put these two in another div so
I can space them out evenly. So let's give it a control. K one more time typing div. This is going to
be footer content. And inside of that
footer content, Let's position these two like so make sure these are here. Select the footer content, turn the flux on, and turn this on so I can distribute them evenly, like so. And social icons,
what do we can do is, I think that they are a bit big. So for whatever reason
they have the max width. Because for all images, so if I type in zero, Let's see, widths should be. Maybe the better
option is to have the height because they'll
have the same height of 24. So let's go back on this one. Like so. So the height should
be 24 pixels. Is it? Is that right? Yeah, hi to 24. Select this one. Height should be 24 px. So you can simply
type in whatever you want inside of Webflow. So 24 px inside of the height and you can see
how it easily adjust them. So 24 p x. There we go. And now let's position
this in the center, like this. And there we go. Now it looks as it should.
I'm happy with it. And now finally what we can
do is select our footer, turned that into a flexbox and make sure it's
vertical this time. And make sure we center
all of our items. There we go. And
now what I can do, perhaps give it a stretch. Know, Let's see what
we can do here. Maybe we can adjust
some of these items. So let's see. Maybe we can give this
the width of 100%. It doesn't work. Let's actually no, let's
get rid of this one. Let's just say stick with the
delete and with the image. So yeah, actually, we
can put in the grid, but before we do what
I need right here is to replace this
with the link. So what I can do
is come in right here and use the brand
because the brand is actually our logo hit Control C. I'm going to replace
my image right here, which the brand I just took. So hit Delete, because once
we actually fix the brand, it's going to link to a
specific part of the page. So right here what I can
do for my footer wrapper, instead of this footer content, like I just showed you, what I can do is actually
push them outside. Like this. There we go. And now we can create our grid. So to do that, simply select the footer wrapper,
create our grid. And what I'm going to do
right here is maybe too. Yeah, we can have two columns, but we can have e.g. four rows. So first one is going to be for the logo is going to
spend the entire row. These two are going
to have their own, and this is going to
have its own sort C3, I think it's going to be fine. Take a longer span, the entire width of it. But no, it's like
the brand actually span the width of
the column itself. Makes sure it's in
the center like that. Then these two are going to be fine because they are taking in, each are taking in this
size, but this one. Should line up to
the right, like so. And then finally we
have paragraph centers. So let's just span
around light here. And let's just give it
Paragraph center footer. And maybe we can give it
that bottom margin of 64. Black Death. So it's going to
push our content even more. Finally, what I want to do is perhaps give these
a bit more spacing. So here we have, let's see, 64, I think 69, but
let's go with 64. And here we have 64 as well. So let's quickly do that. So here what I can do is
perhaps let's go with the brand logo footer. And I'm going to jump
inside the nav bar. Instead of a brand. I'm going to call it logo. Just logo. Okay. And
coming right here. See for this logo folder, I'm going to give it the
bottom margin of 64. Lovely. And let's see what we
can do right here. Maybe either social icons are nav links footer,
or even better. We can go with the paragraph and give it the
top margin of 64, which is just going
to keep these unattended and a traceable. So here we have our
footer and there we go. It all looks lovely. It all looks as we intend to. So one last thing to do
right here is to turn these into a hover states. So to do that, what I'm going to
do is try debt. So we hover. All I need to do is replace
the color with this. But now it's just replaces
and content behind some. Let's deal with that
a little bit later. But for now, I'm just going
to leave it as it is. Because as you saw
with the navbar, you can always go back. And here I'm going to
create a new symbol and call it footer like that. And there we go. One final thing which I
want to do is to give this section top margin of 20. There we go. So it looks lovely
back-to-school. And there we go. So now our entire
website is completed. So homepage is done. I know I'm rambling a lot, but I'm just trying
to give you guys a lot of details to
remember because it's going to be much
easier for you to navigate later down the line. So here we have the car
is loans and contact us. Here we have this for whatever
reason it changes this. So I will have to
go back and adjust this H1 because it
just drives me crazy. All of this looks fine. Just this will have to
adjust one more time. This looks good. This looks good. This looks good.
This looks good. There we go. So we have to adjust each one and we have
to adjust these ones. So let's do that. First things first,
let's select this one. So we have h three
dark cards, car cards. There we go. And select this one,
add card, cards. So if this one ad car cards, and this blue one has 160 here, so 16, and this car, car, it should also have 16. There we go. So now that's fixed and
finalists deal with this one. So H one hero, for
whatever reason, it changes to Poppins, bold 64 color is this one. Let's just see the spacing. Here. It's 86. So let's go back to our hero. 86 should be here. There we go. And now it looks as it should. So now it looks good. The spacing looks
good here and here. And here. This is good. This is good. Once again, it's going to show you once it's published and the footer
looks as it should. So there we go. Our
homepage is completed. As I said, let's collapse
by clicking right here. What we did so far is we recreated the
homepage is going to be much simpler from here
because the same like in XD. Once we designed it, we
can actually copy and paste these symbols
throughout our pages. And we can manage and start creating in
a much brisker way, in a much faster way. So I'll see you in the next video when we
are actually going to talk about this right
here, which is the CMS. It's going to be extremely
complicated to get started, but actually it's not too complicated at all once you
actually get the hang of it, kind of like a Webflow itself. So I'll see you
in the next video and we're going to
start with the CMS.
177. Creating CMS Collection: In this video, we're
going to talk about CMS collections in Webflow. And I'm going to show
you how to create one, especially for this project and how to connect all of those CMS, CMS collection items
in your project. So let's get started. And here we are in Webflow and this is what we have so far. So if we refresh our
memory a little bit, now, here we have navigation, we have our button, we have this section
with the image. We have these cards right here. Then we have what we offer
with these icons on the side. We have our benefits
looking nice, and then we have a Contact Us form which works and you can enter messages and you can have send message
button right here. Then we have the map
and I showed you how to integrate the map inside. And then finally, we have
the footer at the bottom. So how do we go about
including the CMS collection? We're going to click
right here where it says CMS collection,
click right here. So before we get started with
all of this information, it's worth reminding
ourselves what we should actually
include inside. So here we have our XD file and we should actually
create the course page. But before we do, because
these three cards and these eight cards
are all going to be connected to our
CMS collection. And what that basically
means is it's going to pull all of that data
from the CMS collection. And if I show you
that really quickly, this is going to be named, this is going to be the price, this is going to be the year. This is going to be
how many kilometers the car has driven. It's going to pull all of that information and going to be the dynamic content and show all of that inside of
our CMS collection. Then we're going to
create this page. And this page is actually going to be for the car details. But before we put all
of those details in, we first have to create the
CMS collection and then point the elements to that
CMS collection and basically connect
them all together. So we're going to
actually get started with this page and we're
going to pull in the information from this page. So to help us get started what we actually
need right here, let me quickly check
if I connected this. So super car, SUV and Saloon. So these are the icons. If I go back to our Webflow, go back to our items really quickly and just to
check if we have them. So yeah, SUV, supercar insulin. If we go back to my CMS, as I said, click right here. So first things first, we need to create the
CMS collection itself. So collection name, we're
going to call it cars, e.g. and then here we have
collection fields. Now name and slug
is what's going to be included as a basic. And you can see the
collection URL is cars. So you can see website.com four slash cars for
slash Cart page. And that's what we're
going to include inside. So first things first
what we are going to include is we're
going to add a field. And you can add all sorts
of different fields and not to waste too much
time with this lesson, you can hover on any one of these fields to
learn more about it. And you can see through these lessons what
some of these are. We're going to use plain texts, maybe some rich text image and multi image is what
we're going to use here. But you can see you
can have links, email, phone numbers
and numbers, date and time, pickers,
color options. So e.g. this option
drop-down is great if you have multiple
different selections or categories or
something like that. So let's get started
with the plain text. And I'm going to
call this text name. And let's call it maybe Carney. Car name, something like that. I'm going to hit Save field. Then I'm going to, let's see, add a new
field, plain text. I'm going to call it
car price. There we go. Hit Save field. Then next field is going
to be, let's see, image. And this is going to
be car card image. Hit Save Field. And you can see already right here on the
right-hand side, the preview which is building. And if I click right here, what we actually
need and what we're creating is this car card image. So it can pull that image from the image collection
that we create right here and show it where
we want to show it. So once again, we have
the current name, we have the car price, and
here we have the car image. So let's focus now on all of these other details
that we have. Let's go back to Webflow. So car card image, what we can do next is
include another image. So let's go with image. And here I'm going
to call it e.g. car type label. And this label is the actual icon which is
going to go right here. So here we have the SUV icon. So let's hit Save Field. Now below that, what
we can do is put in the plain text and this
one called car type. Car type, he'd say field. Then below that what we
can do is add another one, call it the production year. He'd say Phil, I want the car was produced, add another one. And let's say mileage or kilometers or whatever,
hit another one. And this is going
to be fueled type. Hit Save. And if I take you
back to our XD document, these are actually these ones. So mileage, field
type transmission, engine type, doors,
seats, warranty. So all of this is going to automatically update
on our website. So last one was fuel type than
transmission, transmission. And here you can have all
sorts of different characters. You can limit characters
if this field is required. So it's going to put the
star much like this one. And we're just going to
hit Save field because this is going to be
quite straight forward. Engine type is next. Oops, sorry. So plain texts and gin type. There you go. Next one is
going to be, let's see, doors. How many doors
does the car have? Next one is going to
be, let's see, seats. There you go. Save field. Next one is going to be
let's see, warranty. And now the debts completed. What we're going to do next
is putting the rich text because I want to include the vehicle description,
which is this one. So we have now finished with this section and we have
finished with these information. So you can see car
year is going to pull in from here and
show it here as well. Mileage is going to
show here and here. Current name and car
price is what's showing here and here as well
as here and here. And car image is going
to pull in here. And we also included the SUV, which is the car type, and the icon which goes
with the car type itself. Here we're going to include a rich text and
I'm going to call that vehicle description
for this course. I'm just going to use the
same description, same data, but obviously your
clients are going to include different
information, obviously based on the car. So now let's go further
and add new fields. And you can see that we
have 16 left out of 30. So web for limits you with 30. So let's go with
zero to 100 km/h. So that's how fast the car is
going to get to that speed. Let's include vowels, e.g. you can include all sorts
of different information. I'm just going along with this. This is going to be top speed. And if I take you back to XD, we are actually using this
information right here. So whilst power torque, all sorts of different things. So last one was top speed. Next one is power. There you go. Hit Save at a new one. Let's see cylinders. And obviously for
the electric cars is just going to write
something like an a. So it's cylinders.
This is torque. Should say field. At the new one. This is going to be height. Save the new one. This is going to be weight. Hit Save, add a new one. This is going to be linked. Linked. Let's see if we did, right, Yes, we did. Great job and add a new one. This is going to be boot space. Boot space. Let's see. New one. We're going to say
wheelbase. Say field. I know this is boring, but this is basically
what you're going to do for your clients. So we'll base and the next
one is loading weights. And depending on the project in question and what
you're working on, you're going to add the different information
here and there. So let's see. We are going to include what was the last
one loading weight. Next point is width. So width. Then we will
include fuel tank capacity. And finally, what we
will do is perhaps, maybe reduce some of these. So maybe loading weights, I can get rid of
it or something. I'm not really sure
because I have two fields left and
I need three more. So if you hit Add field, what I'm going to
include is the image. And let's call it car hero. Image. Hit Save. And if we take into XD, it's going to be this image that's going to be
our car hero image. That's what's actually going to trigger the actual lightbox. All of these images
are going to be connected inside
of the light box, but this is just
going to trigger it. So let's see what sort of
information can we get rid of. Because if I go back to here, I need to add one more
field for the multi image. So let's call it
car gallery one. There you go. And you can see
that we ran out of fields, but we still need the
field to include. So I can either get rid of this vehicle description or
on one of these details. So let's see what we can
get rid off right here. So maybe we can get rid
of the loading weight. Let's get rid of that one
because boot space is basically what's showing that
loading weight after all. So how big your boot weight is, that's how much you
can put inside. And obviously you can put all of this information
later if you want. And we are going to put
that and your client can manually add this for every
single page that they create. So because we are
talking with for a smaller project right here, then once they add a page, they can manually jump
inside and add the page. Because once again,
we're talking about a small lot of cards. In this case, they just
have eight cars for sale. So that's going to be
super easy for them. If not, you can get around
this by simply and check what we got rid of what capacity
I think was loading weight. So let me go back to here. Let me hit Save on
this and let me find loading weight,
which is this one. Click right here,
and hit Delete. There we go. And now we have one more left. So click here, multi image, car, gallery too. There you go. So now how this is
going to look like, this is going to be hero image, so image number one, then this is going to be 234 and this is going to be
or maybe five and then 678. I need to do this because
of the layout purposes because It's some sort
of a workflow bug. Me and my friend sort
of finished that. And here's a Webflow
guru in my opinion, because he's doing this for
years and years and years. So basically, what happens in Webflow is it's going to
show me all eight images. You may want to cap them. It's not really easy to connect those images through
a light box. So when somebody clicks
on one of the images, it's going to open
up the light box and all eight images are
going to appear. So therefore, if you're
using this method, it's best to know what to do. So in this case, what we're going to do is because we have eight
images for each car. Obviously your client can
have many more images. So in that case, number one, which is if we take
a look at here, current hero image is
going to be this one. So image number one. Then for this next one, which is going to be, let's see, this one. So Carrier gallery one, what we're going to
include our images, 234.5. And then we are
actually going to include one more of
these and hide it. It's still going to be there, but we are going to hide it and they are going to go
into this gallery. So remaining images
are going to go there for your
particular project. If you have e.g. 40
different images, then you can put the
remaining images. So first five, this
is number 12345. So five images in total. And then the remaining images simply put into
this car gallery, connect all of them
and they're going to show inside of the light box. And I'm going to show you
that in just a moment. But basically we're done here. Finally, I know this was a boring lesson, but
what can you do? It's what you need to do
with the CMS lessons. So remember, we named
our collection cars. So when I click
Create collection, you can see you're about
to close this collection. Now save changes. Would you
like to save these changes? Yes, save the changes. And now our collection
has been created. However, we don't
have any items. And you can see
that the Webflow is smart because I call
my collection cars. It asks me to do a new car, to create a new car. So I can do that right now. I can click new car and I can give it a
name so I can just copy the information which
I created previously. Let's give this
Lamborghini hurricane and you can see
how this is going to look like website.com slash
cars, Lamborghini, Horeca. So then we have a custom name. So car name is going
to be hurricane. Price is going to be in
this one card card image. Let me show how images
are going to look like. This is the folded that
you are going to get in. Each of them obviously
has all of these images. We are going to need
the number three for this particular example. So drag and drop
the image inside car type label is what we need to drag and drop
from our folder. So all of those assets that
you exported previously, if you remember. So let's see. This is a supercar, so type S, here is the supercar icon. I'm just going to drag and
drop it in place right here. There we go. Now, let's move on with the fields are so
card type is super car. Obviously this is
what your client is going to create
every single time. So when they click new card, like you saw right here, all of these fields are
waiting for them. They just need to go ahead
and enter information. And in majority of cases, you are going to get this
information from your client. And I'm going to actually show
you our website in just a second where I got majority
of this information from. Obviously all of this
is public knowledge and obviously you can
find this online. But if you can't, then there are these
websites which are going to be of massive help to you. So just paste in some text. And as I said, this
text is going to be the same for all cars, which I'm going to create. So simply copy and paste
this information here. Let me open up this right here. So top speed power, as I said, for cylinders, cars which run on batteries, basically don't have any
cylinders obviously. So therefore, you are
going to put NA e.g. and I'm going to show that
a little bit later as well. So linked, there you go. Liters capacity will be
there we go, loading weight. Oops. So we'll base boot space. We always, whoops,
I missed that. Space loading weight. So without loading
weight than width. And finally, fuel tank capacity. There we go. Then, now finally,
we're getting to this section that
we just created. So what we're going to do here is if I take you back to XD, what we have is this
image number one. So that's what we're going
to create right here. So let me take you
back to my Images. And conveniently all
of them are named so hurricane 123 and
so on and so forth. So here we have hero number one, so drag and drop it inside. Then we have car gallery. So if I take you back
to XD one more time, we have imaged 234.5. That's what you're
going to include here. So 234.5 are going to go here and then remaining
images are going to go here. So basically 67.8. As I said, this is going to be
hidden from the page, but it's still going
to be connected. And basically that's it. We created our first car. Obviously we cannot see it yet, so we have to connect it. We're going to deal
with it later, but let me hit Create right now. And it's going to
create our first car. Because we have eight cars. I will now go away, create
remaining seven cars, and then go back to you. But basically I'm going to do the same thing which I
showed you right here. So what we can do next is, let's say for the
Cadillac escalate maybe. So you can see, recreate
this hurricane. When I click new car, it's still going
to have all that, all those fields
that we created, all I need to do now
is simply come in with my name and then come
in with my price, which is what my client
provided car card image. Just go back to my folder right
here, locate my escalate. So I'm going to use image
number three for this example. Drag and drop it right
here, and there you go. So let me go back
to this and let me create remaining
cards and I will get back to you when I do
in the next lesson.
178. Using CMS Collection: Alright, so here we are. And I created all
eight of our cars. And if I flick
through them really quickly so you can
see range or walk. So exactly the same
setup as I mentioned, this is exactly the same and it's going to stay
exactly the same, like you see right here. If we just take you to
test the model X e.g. because it's an electric
car. You can see e.g. for vows, it doesn't have
any valves obviously. So NANs for cylinders because he doesn't
have any just an a. So that's how I dealt with that. And now we have eight
cars all filled in with information once again, and you saw this with the images which are
provided to you. You can just put the
images, as I mentioned. So let's quickly run
through that same McLaren, once again, same story. So for the car hero image
putting image number one, then images 234.5, all
of them are labeled. And for this final gallery, which is multi image 67.8. So now that we have all
of that information, what can we do about it? So let's hit save changes. So it saved. So if I go back to
my CMS collection, you can see we have
all of these changes. But if we go to, let's say pages and then go to our homepage because that's the only
page that we have. And what we can do
right here is I'm going to plug in the information here. So here we have this
car card wrapper. And because it's a simple grid, and if I click right here, the distances between
these are 32. So we are going to
quickly recreate that. So what I need to do is
where are my elements? You can see that we have
the collection lists. So what I can do is click
on the Collection list, drag it and drop
it right here just below my exclusive
car collection, and here it's completely empty. So what I can do is double-click
to connect a collection. You can double-click there, or you can click right
here where it says source. And this dialog window
is going to pop up. Simply click right here. And with CMS collections
we only have cars. So watch what happens
now when I do that. When I click cars, it's going to pull in
the information from all of these details
that we pull inside. So what I'm going to do next is I'm simply going
to leave it there. And let's say inside what I
can do is if I open this up, you can see that we have the collection list and I'm
going to give it a name, call it a car collection, a list just so that we know that these are the cars inside. And when I open up inside, you can see that finally, we have collection items. So inside of that
collection item, what I'm going to do is
take one of these cards, simply hit Control C, jump inside the car
collection item and hit Control V. And you
can see obviously, it's going to paste in the information that
I included inside. And it looks exactly the
same for all of these because we still didn't tell
it what to pull in from. Let's go all the way to the top. And what we can do actually is for the collection list
or even for the container, what we can do, Let's see. For the car collection list, let me create that grid. So when I click right here, I can include the spacing of 32 liquid did I can
include another column, and then I'm going
to remove this row. So we're only going to
be left with three, like we have on the
row just below. And because we don't need these, because we already included
the car card inside, which already has
the hover effect. You can see it's
inheriting one selector. If I click there, you can
see it's the car card. So when I hit
preview right here, you can see that my hover
effects still works. So basically discard
cards wrapper doesn't need to be here anymore. So let's just hit Delete
and get rid of it. And for the car collection list, rapper, what I'm going to do
in this case is give it e.g. I don't want to
give it any class. What I'm going to do is give
it that top margin of 64. And it's just going to
nudge it down a little bit. So for the car collection
list, in this case, what I'm going to show and add a combo class of,
let's say home. Just so that we know that
we are on the homepage e.g. but I can go is go to Settings. And if I select, let's see. I don't know, we can filter them through, we
can do whatever. But in this case what
I'm going to do, let's first connect them. So when you select the item, you have this toggle and you
can see get image from cars, which is our collection. So when you click right there, It's going to ask
you which field. So car card image is what
we are going to pull. And straight away you
can see it's showing me different cars from my
collection, which is fantastic. So when I click right
there on the H3 dark, what I'm going to do is
get texts from cars, select field, and I'm just
going to select the name. So you can see automatically
it knows which name I want to pull in because
that's what we told it to do. On any one of these, I
can select this one e.g. and get text from images. This is obviously going
to be the car price. There you go, you
can see it updates to real prices
throughout my cars. This let me connect it. Click right here, select field. And this is going to be, let's see, let's see, let's see car price, name, type, production year, I think. Yeah, production here. There we go. And finally, this last one
is going to be the mileage. So let's connect it here. So let's see where
we are right here, mileage, There we go. So now we have all of our cars included inside
connected properly to our collection list. This hover effect
works on all of them. So what we can do in this
case is I have this wrapper. I can limit my items
and show three items, e.g. and there you go. Now we have our original layout, but you can see that
this is kind of wrong. So what I can do is click
and add a new sort order. So I can either go
reverse alphabetical or alphabetical or I can
go name plain text. So let's see what I can do
or I can add a new filter. Let's see what we
can do right here. How can we order them? Maybe sort order. Here we go. So sorted order, Let's
reduce this sort order, go all the way down. Created on oldest to newest, newest to oldest hit
Save. Should do that. No. Let's go oldest to
newest. And there we go. Finally, finally, we have this order that we need
to include right here. So there we go. We have Lamborghini
Cadillac and Lucid Air. And if I go back to here, we have the same
effect right here. What we are lacking
here is that button. So let me just hit Control
K type pin button. Hit styling for our buttons. So main, main button. There we go. And this button should
write C. All cars. See all cars. There you go. And all I want to
do right here is maybe to put this section as a vertical stack and maybe
Center my elements like that. And this button will have a
combo class or even better. I can because I already used
the collection list wrapper. And where did I put that? I added here. So collection list wrapper I can add
home here as well. There you go. Because we have the margin
64 and let me create the margin of 64 at the
bottoms for this button. And if I select that
button in XD hover, you can see that now we have 64. So there you go. Now you know how to connect your items in your
collection list. And inside of the settings, you can play around with all
of these different settings. You can even add
custom attributes like name value and
stuff like that. And just hit delete. If you don't want to
put something inside, you can paginate items. So you're going
to add the arrows are those dots for
the pagination. And you can show a limit and show how many items
you want to limit. Here we have three on the next page which
we're going to create, we will have eight. So that's what we're
going to tackle in the next video because now this is completed.
Let's hit preview. There we go. And now it doesn't take us anywhere because
we first have to create a page and assign it
to particular collection, which is then going to
take us to that place. So for the end of this video, let's quickly create a new page. Create a new page. Call it cars, which is going to be this page right
here for the cars. And simply click Create. Something happened right
here in the navigation. So let me go back
to my homepage. Let me see what happens. So for whatever reason, it position it here. So maybe I change some
class or something. Let me check for the container. Deduce something no. Side of the container, nav bar. Let's go for a horizontal. Let's go right here. I don't know why it did this. Let me go to my logo. Make sure that's first. Nav items, makes
sure that that's lost for whatever
reason it did this. So let me go back to my instance and see what happened here. Because I just did
this for my navbar. And you can see that it broke a few layouts here and there. So let me see what I did. Let me, let me actually
figured it out and I will go back to
you in the next video. And these things happen, especially when you try to talk at the same time and
figure these things out. So in the next video, I'm going to show you what
was the actual solution. But I tinker just added a combo class which broke
our layout a little bit. So I'll see you in
the next video.
179. Cars Page Build: Alright, so as I mentioned, I'm going to show you what
I did and what I did wrong. So, you know, when something like this
happens, what to do. Usually because these
classes inherit one another, because we use a class container for all of our containers. Right here. I just added the flexbox and it broke
all of my containers. So what I'm going to do right here is because we
have this container, I'm going to simply add
a combo class of card. Cards. There we go. For this combo class. Now, I'm going to
put in the flexbox vertical and make sure that
it works just right in here. You can see if I
start from the top, we have the navigation, we have this section,
this section. So everything works
as it should. Looks fine. This works
fine. This looks fine. Contact form works fine. All of it works fine because I just add it on the container itself and didn't notice because I'm talking to the recording and
all sorts of things. That's why that happened. Now that this homepage
is finally ready, what we can do is, as I mentioned in
the previous video, go to the course page
that we just created. So if I click here,
you can see that the background is
inheriting for the body. So if I click right there
and come right here, you can see for whatever reason. But the old pages
should be applied to this light gray
color, body color. There we go. Let me actually go back
to the homepage and select my body for whatever
reason it created this. So let's remove this class and
select the body old pages. And it's going to
inherit the body color, which is what I want actually. So everything here
works as it should. Let's go back to that
course page one more time and let's start using the
power of these symbols. So first things first, I need to actually show you what we are going
to be designing here. So it's going to be
quite straightforward. The only section which
we're going to actually create is this
section right here. So it's going to just have
this copied, this text. And it's just going to
have the circle and the image of a car inside below. We're just going to have
basically this same section but without any
limit on our items. And it's going to show all of these items without the button. And then we're going to simply reuse these elements below. So let's get started with it. So what I'm going to do first is let me take you back to here. Let's get started
with the navbar. Drag and drop it inside. And let me use the, let's see what we will do. First, Contact Us
and then the map. So I can also hit body, hit Control K type in map. It's going to show map
symbol click there, hit Control K, typing footer. And it's going to
show footer symbols. So just click there and you
can see it's inheriting the spacing that we set
for the top margin. So it works just like any
other design tool like XD, figma, sketch or whatever. When you set your components
and you create them, it's just going to show
you that, all of that. So first things first, let's start with
creating a section. Select your body control, Kate, I've been section and give
it a class of section. There we go. I'm going to position this
section just below my navbar because it is what's
going to hold the text, the image, those
two images inside. So next let's go ahead and
hit Control K type in div. This div is going to
be our container. Like so. And inside of that container, what we can include is e.g. Control K to pin heading. We're going to use Heading H1, use all H1 headings. Let's see, for whatever reason, it didn't included this. So let's go with Poppins. A bolt 64 color is going to be this
color, darker in color. And let me just remind
myself about height. Height is going to be of 86. There we go. And I'm going to add a
combo class of H1 centered. There we go. And in here I'm just going
to make this change. So just click for it
to be in the center. There you go. And for now, I'm just going
to paste in this text. Now below this text is
my div control Kate, but div, this div block, I'm going to call it hero car. Hero Card. There we go. And inside of that hero car, what I'm going to do is
simply put those two images, so Control K, that image. And this first image can be
of that car from the side. There you go. And I can use all
texts from assets. There you go, because it's
called Mercedes Benz, I think. Finally hit Control K, type an image and add a new one. And this one is going
to be this blue circle. Lovely. And finally, what we
will do for these two is, let's see, maybe. Maybe I can turn this
into a flexbox like this and make sure that my
items are vertically centered. Maybe for the position of those, what I can do is perhaps
for the hero car itself, I can go right here, whereas the position there
it is, and click relative. And this car can
be absolute, e.g. but I think it's better to do
it with this circle first. So absolute, there we go. And let's see, the car I
think can be relative. E.g. let's see. We're going to call
it first of all cars, hero, IMG. There we go. Let's see. Here what we can
do actually is let's see. Yeah, let's put the
car to be relative. Actually. Instead of static, I'm going to put
it to be relative. And I'm going to give
it a Z index of five. And this circle, I'm going
to give a Z index of one, maybe something like that. So everything is going to
be nicely centered inside. Now, in terms of our hero car, we're not going to
give it any dimension. Let's see. This Hero Card. Let's give this a margin, top margin of maybe
64 something, which is just going to
give us that distinguish, distinguished layout and just push our content
down a little bit. Now, this is, let's
rename it and we're going to call it cars hero, BG circle. There you go. And here what we will do
is simply center it a little bit better to
something like this. So I can even move it up a little bit or down a little bit. It really all depends. And this car is going to dance around a little bit, but
don't worry about it. As you can see, we
now have our layout. Obviously later on. We will play around with it and reduce the size of this circle. Obviously it's too
huge right now, but everything
works as it should, even on this second page, for whatever reason these
links came to the site. So let me fix that
really quickly. If I go to my homepage,
click right here, go to the tablet's settings. Go inside. Let's see if I click show. Yeah, so these links
don't have the pairing. So right now I'm
going to include the pairing of 20 left padding. And it's just going to move
them about a little bit. And this should work
for the problem, but right here we
have a new problem. And let's go open
up the nav items. And for the background color, maybe I can get rid of
the background color. There we go and do the
same for this last one. Click right here, get rid of it. So just click right
here where it's empty. And now we have
fixed the problem. So if I click right here
and then right here, everything works as it should, and now they are good to go. If we switch back to our course page and test
that out right here. If I preview it really
quickly, click to open. You can now see that we have
this spacing in-between. So now that this
section is completed, but I can actually do is
move on to the next section, which in our design, if you remember, are these cars. So our exclusive collection. What I can do is go
back to workflow. Click on my pages,
go to the homepage, and this is a great
thing about Webflow. I can click right here and
use this entire section. So you can see for
whatever reason I gave it to class of sections. So let's rename this
class and call it a collection or are exclusive. I cannot type e.g. collusive collection. There we go. I'm just going to hit
Control C on that section. Switch back to my course page. Select my body control V, and it's going to paste in that section at the bottom,
here it is right here. I can drag it just right here. And you can see
it's going to keep the same spacing as
it did previously. But now I'm going to
hit duplicate the class and then simply rename it cars. Because I want to be sure that it's just
here on this page. So this is the course page
and this is the homepage. So if I selected here, you can see if I
close this section is just exclusive collection,
which is what I want. So when I make any changes, they will not propagate
to this page, but rather stay on
course page alone. So when I select that, first thing I want to do
is get rid of this button. Then select my
collection list wrapper, click right here, and then
we have the home here. So I'm going to duplicate
the class here as well and just give
it a name, cars. And let's see what else we got. I think we have a
new collection list. We do. So let's duplicate this and let's call it
cars here as well. There we go. And collection item. We don't have anything,
so now it all works fine. Yeah. So on the collection
list wrapper, I'm going to go to
the settings and just show my eight items. There we go. And now it's just showing as it should show in
the first place. So if I hit preview right here, you can see that now we
have the course page, so we have this
image on the top. I don't know why it keeps bouncing up and down,
but it shouldn't. And here we have this. So everything works
as it should. I think that's just great. And let's see, for this, maybe we can limit it. So for the container, let's see one here, a car. What I can do is
add some margins so I can go with
auto and I can go with auto here on
the left and right. And this should hopefully
stop with the bouncing. And for the hero image, this one, I can give it a
max width of 100 per cent, which it already has. And I think that's it. I think that's going to
fix the problem long term. As you can see, as soon as
they go into preview mode, scroll up and down,
it fixes itself. But just when we're previewing, it's going to jump
left and right. And when I click to open
these new pages later, you will see that
issue happening again. But with that new page and with all these different
images that we created and speaking
about net new page, Let's go back to Home. And here what we
have under pages is we have our cars template, which is the page that we
are going to design next, and I'll see you
in the next video when we are going
to tackle that. And that's going
to have a lot of different information inside
that we already created. So I'll see you there.
180. Cars Template Build: For us to be able
to include all of this information that
we put inside our CMS. We need to use this
course template, which is automatically created. So when I click right there, you can see that
nothing really happens. So when I select the
body, let me check. It inherits that
body all pages tags. So body color, which is fine, but as you can see,
no elements inside. So let me hit Control
K type in Navbar. Let's add our navbar
and let's build this page out same like
we did previously. So what I'm going
to do next is hit Control K and type in form, Contact Us form control
K, type in map, and Control K and type
in footer. There you go. Now we have all of
our regular elements like we did on all of
these previous pages, but we're still left with
the information here. So if I go back to XD, what we need to include is this bunch of
information inside. So let's get started. Let's just do that and let's create all of
this information. If I go back to here, what I need obviously
is a new section. And I'm going to put in
the class of section, same like I always do. Put it just below my navbar. And inside of that section, let's first call it e.g. car details like that. And inside of that section, Let's see what we can do
is we can put in a div, div block, call it container. And straightaway give it
another class of card details. Container like that. And so this is card details, discard details
container just so that we know what we are doing. And then let's see. We can put into more divs. So Control K, type in def. This first one is going
to be card information. And that's the
information which is going to be on the
left-hand side of the page. Images and all the text below. And you can see it right here. And finally hit Control K one more time and
add another div. And this div, I'm going
to call Car action card, which is that car
which is going to be on the right-hand
side and just stick to the top and then
follow us as we scroll down. So what we can do right
here for the container is I'm going to switch on the
flexbox, use my horizontal. And let's see, we can
stick it to the top and we can position it
may be like this. Then for the car
information itself, it needs to have a bit of width. So let's go with 65 per cent. There we go. For the car Action Card, what do we can do is use maybe
30%, something like that. And it's obviously going to have that five per cent in
between like that. Then finally, what I
want to do is maybe go with a small margin
here on the container. Maybe go with something
like 40 on top just to distinguish ourselves from
the navigation a little bit. And then let's get started with the car Action Card actually. So what I can do
first is, let's see. Let's first look at the design. So here we have this
label, we have texts, these texts and two buttons and a white background with a corner radius of
eight, I think. Yeah, here we go. So let me go back to my design. Let's select the
car Action Card. Let's start putting
the content inside. So I'm going to hit Control
K. But before I do actually, let's go back to here where it says image and gradient
and where it says Color, I'm going to select
a white color. And I'm going to choose the corner radius to be
eight pixels, y-value. Then inside he'd Control
key and tapping h3, heading and select
h3 right here. For this age three, Let's see. What I can do is I can give it. Let's see all h3 headings. Let's see how that
looks like. Once again. So let's get rid of that h3c, what we have dark. Once again, it didn't
inherit any style. I don't I don't
know what happened. So get rid of that all H3
for this one, Poppins. I really don't know
what happens to 24. And let's see, this should be 40 and the color should
be that age three color. There we go. So now I'm going to type in
something like car name. There you go. I'm going to hit Control C, Control V. And this H three is going to have h three blue. There we go. We are inheriting debt. And below that, we're
going to include Control K p for the paragraph. Let's put in all paragraphs. Once again, it didn't
inherit the style attribute. Don't know what happens because
every time you do this, it does inherit the style as it should. So
let's go with 16. And let's go with, what do we can go here? Let's see, 26 maybe. So 26. And in this case, let me just choose
this dark color, e.g. so this should be. And say available for
pickup now and you can see how the card is
actually scaling. So what are we going to do
in this case is maybe we can put this into
a div right now. So hit Control K. I've
been div and put all of this inside of a div. Like so. So, so this div should be called something
like car Action, Content, correction card
content, something like that. And it should have a padding inside of maybe 24 on this side. Because I want to remove it from the left edge of my screen,
something like that. Inside of debt, what I
can do is hit Control K, type in B for the button. And I'm going to select my
main button right here. And that main button
can also have a separate class of
Car action button. There we go. Maybe I can just simply type
in something like reserve. This car. There we go. I think that's going
to work just fine. Then what I'm going to
do is hit Control C, Control V to paste
in that button. I'm going to get rid
of these classes. For this class, I'm going to duplicate it and simply call it, Let's see Batson outline. For the button outline, we're going to have the
same thing right here, but C, loan options. There we go. And what we have right
here, Let's see. Reserve this car so they
should be the same width. So maybe I can have
47 padding here. So let's reduce this
a little bit to 47 just so that we can match the size
of these two buttons. This button outline should have, let's say white color because
the background is white. The text inside should be, let's see, not this one, but maybe this one. And it should have an
outline like this. But instead of black, Let's give it this outline. And the corner radius
is still eight, and let's give it a padding. Let's see how much did we
separate them here of 24. So top bearing should
be something like 24 and bottom padding
should be 24 as well. So it just gives us this space for our card at the bottom. Then here what we can do is
give this paragraph something like pickup, P pickup. Now let's see what we have for the distances in our design. We have 24 and then
we have 24 here. So let's do that. So I'm just going to select here and type in
something like s104. I'm holding Alt key and
doing this at the same time. So that looks good. And finally, for
the button outline, what I want to do is
change this to hover. Inside of the cover. I'm going to once again
change this to white, then change the color of my text to maybe this h3 paragraph, let's say and let's see, change the color of this outline to age
three paragraph as well. Let me hide myself so you can
see it a little bit better. Like that. N is going to
inherit all that width. So when I hit preview
really quickly, you can see what we have so far. So reserve this car, lovely. And we have C alone options. Yeah, I think that works well. And instead of me going back and forward
with the text here, what I can do is just connected. So you remember how we created that CMS
collection previously, and this is the scars template. And here you can see
for whichever car you want Currently we are on a
Lamborghini hurricane page, but you can change
that at any time. So you can get texts
from cars select field, and I'm going to
select the name. So because we are on
Lamborghini hurricane, it's going to pull
in that name inside. Then this one is going
to pull in as well, select the field car price. And this is just the regular one which is going to go there. Now because this blue one has
the padding at the bottom, I'm going to get rid of it, but H3 blue and I'm
going to call it cars, cars templates, because
it's located here. I'm going to get rid
of it because this is inheriting that
spacing right here. And the car content. Maybe we can have a bit
of padding on this side. So maybe we can type in
something like eight or something on the right-hand
side. Let's see. Yeah, I think eight
is going to go well, just because it wants scale on smaller sizes and
just crop in debt. Well, so basically this car
content is almost finished, but what we need on top
is we need that label. So let's create another div. So hit Control K type in def. And put this on top right here. And for that, what
we can do is e.g. call it car or label. There we go. And for the car and label what I can do is give it
a bit of width. So I'm going to give it 108. So that's going to be my width and max width is going
to be something like 140. Maybe. We can check that
later and see if it works. For the background color. What we can do is
choose the body color. Like that. Because if I
take you to our design, you can see that that's
what it's doing. Here. What we will do is include
those elements in. So first things
first what I need is to drop those elements inside. So hit Control K type in image. For the image,
what I want is get imaged from cars, say field. And let's see car type label,
which is what we need. And in this car, because
it's a super car, you can see that it's
pulling in from that field. Sorry. And now on the current label, what I need to do is include
that paragraph text. So what I can do is hit
Control K type in P, jump in with the paragraph. And let's give it paragraph. Let's see, Let's
see labeled texts. Because it's actually
smaller and we have that class simply
pull in right there. And I can select this. Let's see, Give it
to Texas super car. But before we do, I want to select it and get
texts from cars. And this is going
to be car type. So it's going to pull in
from the car type itself. There you go. Now to make this
stick to one another, I'm going to turn
on the flexbox. Make sure they are
centered right here. And let's see, make sure our image doesn't have
any weird pairing, but our texts does. So let's get rid of it. Let's go with zero.
Now, there are centered and this
is going to be, let's see, car label icon. I see. And if I take
it back to our design, you can see that we have the distance of eight
between those two. So it's just going to have
the right margin of eight. And finally, let's get
some padding inside. So what I can do is maybe
for the car a label here, I can jump in with
16 on each side. I think that looks good. But for the widths, Let's go with 140 here
as well. There we go. I can even go a reset. Let's see how that
looks like. Great. Okay. Let's see 24 on each
side, right here. So let's go with 24. Once again, holding my alt key. There you go. And on this side, I'm going to put in 24 just for it to match
with my content below. But here you can see
that we have this issue, so we do need to
give it some width. So let's go with 140, I think, because
this is the longest. Let's see, something like
one-thirty two, maybe. We can give it to the max
width of one-third e to, I think it's going
to work just fine. And the width here is going
to be, let's say 132. So I think it's
going to be good. And I'm not going to
deal with the height because I already
put in that pairing, but I can add additional
banning of eight maybe. And that's just going to give me some additional space inside. And finally, this has
corner radius of four, so let's just deal with
that really quickly. So here on the current label
I'm going to scroll down and type in four and add
that padding inside. So there we go. Now we have our card. So if I switch
between these pages, so here we are on a
Lamborghini hurricane. You can check this one, e.g. and see how that looks
like for the Maclaurin because the text
is a bit longer. And if I switch
to this one, e.g. you can see that all of it
changes, including this one. But I'm not really a fan
of how this looks like. So perhaps maybe
we can change it. So it's not the same,
but either way, it just keeps the spacing
of it really nicely. So we have current label
and maybe we can adjust this to something
even less like 128, maybe something like that. So now when we
switch between them, yeah, it looks a bit better. So when I hit
preview right here, you can even do so right here and just see how
all of them look like. So I'm going to stop the video here because we are
already 16 min in. And when we come back, we're
going to start tackling this section which is a bit more demanding than this one.
So I'll see you there.
181. Cars Template Build Part 2: Alright, let's continue where
we left off and deal with the most difficult part
of this project because we now have to create this page and these
elements inside of here. And they're going
to be quite tricky, but just try to
follow along with me. If not, you can always
simply either clone this project or open it up and try to do it one more time. So first things first, let's start with a div. So hit Control K type in div. And this div is going
to be called car. Car gallery. Maybe your car
information, let's say. Let me check my original
project and see. So car gallery because this
is the car information. Yeah. The car gallery. And inside of that car gallery, what I'm going to do is
hit Control K type in div. And this div is going to be
called car hero image, IMG. And inside of debt, what I can do is put
in my light box. So hit Control K, type in light box. There we go. With the light box.
It's completely blank, so you need to pull in information from somewhere
so you have to first set up. So get media from cars. And first field I'm
going to do is select, let's say car hero image. So go back to here. Let's see, my light box works. And let's give it a name
of car hero, lightbox. Images. There you go. And now what I need to do
is where it says image, I'm going to select
it and let's see, we need to set it up for
it to pull images from. So get images from
cars and select field, let's say card hero image. And because we are on
Lamborghini hurricane, it works but not car
card but car hero image. There you go. So number one. And now that that's completed
and we have it ready, What do we need to do
is to put in that, that label that we saw here, which says c all images. So let's quickly deal with that. So what I'm going to do
right here inside of the car hero image
is hit Control K, type in def, and position
it just above my light box. And I'm going to
give it a name of C. All images. And let's give it a padding
of 12 on each side. 121 each style, like this. 12 on each side. Let's see something like that. And I'm going to give it a background color of
pure whites are debt. And inside of that, what I can do is maybe
you were the max width. Max width of 145, just so it doesn't go
all the way to the side. Height is going to be auto. And inside of that, I'm going to quickly
add a paragraph. So hit Control K, type
in P for the paragraph. And I'm going to type in my
text and see, see all images. There we go. And see if the styling works. Yeah, because it's
inheriting for all paragraphs that
works just fine. Now on the car hero
images, what I can do, let's see, is I'm going
to put this, Let's see. So car hero image is
going to be relative. This one. So relative. And this inside is
going to be absolute. So let's change the position
to absolute, like so. And just put it in this
right hand corner. Now, in terms of this paragraph, I think yeah, it's
retaining this. So if I go to a zero, it should stay the same it does. And finally here what I can do is play around with the
positioning a little bit. So maybe I can go
with one and maybe I can go with one at the
bottom or maybe two. Let's see where that takes us. Yeah, I think two works
just fine for this case. But if I hit preview,
click right here, you can see that now we have just this one image
inside of our light box, so we need to add more. And to do that, we're going to hit close
right here on this car and gallery on this car
hero image. There we go. And inside of the
car information, what I'm going to
do is hit Control K and typing collection list. There you go. This collection
list is going to be connected to cars gallery one. And it's going to have
those four images, if you remember. So if I go to here and I'm
going to give it a name of, let's say cars, gallery. One. Like so. Go to my settings and make
sure I get the images from it. So source is that one. So cars Gallery
One, which is fine, go back to here, and I obviously
need to assign it. So collection list,
collection item. Here you can see that
we have these images, so we have 234.5. They are not in the right order. So what we can do really quickly
is let's see, let's see. Maybe we can deal with
the collection list and show it as a flexbox like this. And maybe make sure that
we are space in between. For here. Let's see what we can do. Collection, list, item,
car, gallery one. For some reason. It doesn't show me the images. Gallery one. There you go. It shows me the images but shows me the
background images. So yeah, I should actually
put the light box inside. So let's get rid of this one. What I can do is so inside
of the collection item, or I'm going to do is
hit Control K type in light box and put
that light box in. So now you can see that we
have this light box like so. I'm going to give it
basically the same name as this first one. So I'm going to go right here. Car hero, lightbox images. So select this one, car hero or maybe
car lightbox images. Well, even better
now let's give you the same car hero
lightbox images. There we go. So exactly the same class. And finally we have
to connect it. So if I open up the image
and get images from it, you say car gallery one. So click there and there you go. Now we have all of
our images inside. Now, one thing which we should work on is a little bit
of spacing right here. So let's see, Get
Media from cars. Car gallery one, that's fine. So now everything is connected. But actually I don't want that. Because if I hit preview, now, you see it's not connecting, so I need to connect it with
other light boxes. I think. So linked with other
light boxes in here, the group name should be car gallery or
eating or gallery. Okay, if I hit preview, now it's still showing
this course gallery. Let me actually see what
is the problem here. So car gallery, Let's try
that one. There we go. So now we have this 1,234.5. Everything works as it should. You can see how it looks like. And now what I can do, I think, is instead of this, let's play around with some
settings a little bit. So instead of this
being a flexbox, maybe I can turn it into a grid. Create four columns here, and get rid of this second row. Press done. And I think it's fine. So this collection list, Let's see, cars gallery one. Yeah, Keras gallery one can have some margin at the top and
the margin should be 24. So let's go with 24. Margin. There we go. So now we have car gallery one. What we can do in this case is let's try a cheeky
and duplicate. So hit Control C, Control V. So now let's rename this
to duplicate this class, call it Gallery to. And inside of this gallery to. Let's actually try to link it
with that other light box. So collection list. Let's see what we can do. Can we link it someway? We cannot. So let's see what
else can we do? So let's get rid of that. And what I can do in this case is simply add a new collection. Control K, start all over again. So typing collection
or list like that, and we should link it to
car gallery too. Actually. And that's going
to give it a name. So what we can do
is go back to here, car gallery to, in this
case. There we go. And it's going to show
us this. So 67.8. So remember what we
did with this one inside of the collection item we have to put in the light box. So let's do that right here. So collection list, collection, item Control K type in lightbox. Told you this is going
to be difficult. And now we have
to connect these. So a lightbox should
connect to that one. So let's select it from here, I think get image from cars
gallery too. There we go. It's showing this. So 5678. Yeah. Let's see what we
can do in this case. So I think we can have
on the collection list, we can put the grids so same
like we did previously, put in the grid and give it a
grid of three columns wide, maybe four columns wide. So it stays the same dimension, gets rid of it right here, hit here, and go to Settings. And I need to make sure that it links with other light boxes. Box link link with
other light boxes. And what was the
name? Once again? Car gallery. There we go. So let's
close all of this. Let's go to here. Car gallery. There we go. Now when I hit quick
preview, click right here. No, it's still didn't
link for some reason, so let's try that one more time. So you can see no items
found for whatever reason. So let's see in the
settings lightbox link. Maybe I can give it a class. Let's see, this light
box is getting media from media from car gallery
two. And let's try it. Now. There we go. So it just
should have get media from. So now when I click
through these pages, you can see that we
have all eight images. And when I switched
through them, you can see everything
works beautifully. Now one final step is I need to try to make this to be hidden. So what I can do is
close all of this, go back to my styling, select Course Gallery
Tool and just try to hide these elements
and see if that works. And it does. So 2345678. So it's there on the page, it's just not visible. So I can even use my arrows
here and list left and right. You can see in this case, so I can switch between them. Everything works as it should. It's just not visible. So hopefully for it is
14 min in this video, you realize that even sometimes I have my designed
opening right here, but sometimes even that is
not going to work properly. So you have to be
creative with this. You have to imagine it, you have to work through it. And sometimes these issues
are going to pop up. But more of these
issues that you solve better designer
and developer, you're going to get over time. I'm going to stop
this video here. And in the next
video we're going to continue with the
information below this. And I'm going to show how to add those different sections. And basically it's going to
repeat itself all over again. We're going to connect it. But before we do, let's
quickly jump into here. So let's switch to
Cadillac escalate, e.g. and you can see
that it's switched. So if I hit preview right
here, click escalate. Everything is connected
as it should, which is lovely to see and it
saves us a bunch of times. So now we are
creating a layout for our clients for the first time. And then once they switch, you can see it should update. I think for whatever
reason it didn't update. So let's try this one. I draw a walk. So it updates here,
but not here. It now shows me
this loud colors. So if I switch to the next one, maybe it will show me a range or walk because of the update. So you can see it shows me
the range Rover, vogue. But if I go back to Vogue
and hit preview there, it now shows me the
range Rover Vogue, which I wanted in
the first place. So it does work. It just needs a bit of time
for it to update so you can see everything works as
it should as we want it. Let's go back to Lamborghini because that's where we started. And as I said in next video, we're going to get started
with that next section. So I'll see you there.
182. Cars Template Build Part 3: Let's now continue
where we left off. And I just realized that
this is not inside of a div. So let's hit Control
K type in div and inside because it
should be car gallery, but I just placed it outside
so it doesn't matter. Let's call it car gallery top maybe or main Kalgoorlie or whatever
you want to call yours. And let's put it here. This should go here. This should go above, this should go above that, and everything should
work as expected. Let's just check it out. Yeah. So everything works
as it should. And we're not going to
deal with responsive just yet because this section is going to take the
entire section, entire width of the
section and just going to have the 12th 20 padding inside. We're going to hide
these images as well and just have
one main image. But when you click,
obviously you can have your layout here as well. You can see how it looks like on different pages
because this is just a main component
and it's just going to show well on
every single screen. So let's go back to here, and let's go back
to editing because we need to create
that next section, which is going to be
this overview section. So let's go and do just that. So now that we have our
current gallery top, what I need right here is to hit Control K and to put in a div, which I will call overview. Like that. Inside of the overview, what I'm going to do is
putting the max height of 196, which is the max height of
what we created previously. I'm going to have the color
of pure whites, like so. And I'm going to have the corner radius of eight, I think. Yeah. Then let's go inside
and see what we need. So we need that H3
Control K type in H for the heading
type in H three. And it's going to take finally from the
topography that we need, so we're going to keep it and I'm going to
type in overview. And for that, I'm going to
add a combo class here, and I'm going to call
it e.g. age three. Car info. There we go. And here
what we'll do is maybe put in some padding or margin. Let's see. Let's go with zero margin here. Let's go with zero margin here. And I'll put the
top pairing of 24. And I will put, let's
say left margin of 24. That's just going
to give me a bit of space in terms of this
for the overview, what I can do is
maybe let's see. I can just put in my
top margin of 24. Just going to just push
this section right here. Let's see, Maybe,
yeah, that's it. So let's hit Control
K one more time because we now need to
put in that information. So create another
div, the block. And this block I'm going to call Car overview because
that is what it is. And that is going
to be our grid. But before that, we have to deal with those boring
little sections. So if I take you
back right here, here we are going
to have a grid of four columns and two rows containing eight items in total. Every single item is going to be inside of a separate div. And that div is going
to be the actual. So let's see this, which is the flexbox. So let's get started. I'm going to hit Control K one more time. There
have been div. And inside of this div block, which I'm going to
call production here. Oops. I didn't realize I
was changing that. So let's go back to here. So diblock clause production. Here. There we go. And inside of that div, what I'm going to put
is the image control K type in image, like so. And I'm going to get
image from select field. And let's see what we can do. Actually, no, I'm
not going to pull an image because we
already have those images. So this is going
to be, let's see, calendar, icon like that and let him pull it
in straight away. So choose image, let me
find my calendar icon, which is there we go, this one next to it. What we will have is, let's see, a paragraph, Control K
type in PIE paragraph. And it's going to contain the paragraph settings,
which is great. Here. Let's get texts
from select field, and this is going to be
in the production year. Let's see, production
year, production here. There we go. Production here. That looks great. Then finally, what I'm going
to do is turn this into a stack and make sure they line up like this
and make sure that my paragraph is set to P. Let's see what I can do. All review maybe or P cars. Yeah, Let's do a review and just get rid of
this bottom margin. And there you go. Now,
they will go right there. And what I will do
with this one is let's just see how
much was it in here. I think the spacing
was 16. Lovely. So let's go back to here and simply enter 16 for
the right margin, which is just going
to push that in. Don't worry about it
just now because we're just going to put it
inside another wrapper. So let's see. What we can do is for
the course overview, what I can do is turn in a grid. So let's go with four columns. As we spoke about, annelids go with two roles, which is fine, we
already have that. So select that production here, hit Control C. But before that, let me just check something. I'm just going to put
it in the center. And let's see, because
it's a grid child, but Flexbox think doesn't
look that good Right here. Yeah, I think that's
fine actually. So Control C, Control V. And this next one is what we will call
so duplicate class. We'll call mileage. For the mileage. This is going to be duplicate class mileage icon and replace the image
with the mileage. So once again, you can
use search if you want. I'm just going to put in this and for the text instead
of the overview, what I'm going to do is
use mileage. There we go. Now hit Control C, Control V. On this next one, what we will
do is duplicate the class. It will be fuel type. Let's go straightaway to hear a replace this with the
fuel type loudly. And I'm going to
replace this duplicate class fuel type ICN
for fuel type icon. And replace this with
the fuel type icon, which is the icon of a pump. Let me see where it is. There we go. Great. One final one I want
to add is control C. Control V on this line is
if I duplicate the class, it will be transmission.
Transmission. And let's select
the text for it. Transmission, where it is, where it is transmission level. And for this one, Let's duplicate this and let's
call it transmission icon. Great. And let's just replace the
image with the transmission, which is this one. And there we go. So now let's
go ahead and add a new one. Control C control V, Control C Control V, and Control C, Control V. Let's now deal with these ones. First of all, let's
duplicate this one. And it's going to
be engine type. Let's duplicate this one. And it's going to be doors. This one is going to be seats. And the last one is
going to be warranty. There you go. So now let's go one by one
and replace them here. So this is going
to be a warranty. Let's replace this warranty icon and replace this
with the warranty, which is this one grades. This next one should be
let's see, uh, seats. So type paint seats. And this should be
replace it here. So seeds, ICN, replace the image with
the seat, which is here. This one is doors. So select it from here. Once again, when
you do this, once, it will connect and whatever your client creates a new page, it will just connect
those elements in n, just all work flawlessly. So it's called doors. Icn. For the icon, so it
knows what we want. Find the door icon, and here it is, right here. And finally, this is going
to be the engine types. So let's replace it here. Here, engine type grades
and let's replace this took a class and gene
type ICN grades. And let's finally replace that. And we will be
good to go engine, which is this one. That's great. Now finally, what I want
to do is because we have this grid car overview. What you can do is
put in some padding. So let's put in the
pairing from both sides, something like 20 here. And let's give it a margin on top and bottom.
So let's see here. So we have already,
we have 24 and below that we have
32. So let's do that. So if I go back to here, what I can do is
go back to top 24, go back to bottom. Or maybe even better I
can put in margin here. So 24 because I want the space
outside and 32 because I want it to push n. But for
some reason it didn't push in. Let's see overview. So maybe I will need to put
that in on the card itself. So hit zero right here. And I can hit all of
you actually n type in auto for the bottom margin
and that should fix it. No pin order here as well. Usually auto fixes it, but it doesn't matter. Let's just deal with it here. So here I'm going
to type in zero, but for the pairing
I'm going to go with 32 at the bottom. And now that actually
fixes it nicely. When final thing I want
to do is I want to make sure that this
spacing is correct. So what I will do
here is we have 24. What I can do is edit
my grid a little bit. And here for the rows
I can go with 24 and that's going to push
them a little bit in here. Maybe we can have
that 32 spacing. I think that's going to
bunch them up just fine. And now I have, we have, I think we have a lot
more breathing room for all of our icons and
all of our content to show. So one final thing I
want to show you here, because I want to wrap
up this video here. And then we're
going to move on to the next section in the
next video is this. So when I switch
between the chorus, so let's say this is 2021 and it has this many kilometers. Lucy there. You can see it has
this many kilometers, but it's 22 into engine
type is battery. We have two years of warranty. So if I switch this to
Porsche Cayenne, e.g. we have five doors.
We have this mileage, we have one year, everything
updates in real-time. And that's the pure beauty of
these Webflow CMS templates because you create
a template once and all of the content that
you or your client created, it's going to update
automatically. So let's go back
to our hurricane because that's what we edited. And as I said,
we're going to stop right here because
in the next video, we are going to create that vehicle description
which will go right below. But actually because, because that is quite
simple actually, let's do that in this video. So hit Control K
type in def and call this vehicle description
called description. And what I will do is just use the white color here, like so. Let's go with eight
for the corner radius. And in terms of dimensions, Let's see what we can do
right here is first of all, let's give it 24 of
the margin on the top. There we go. I'm just going to steal this text and paste
it in right here. It's going to keep the
same settings as before. And finally, what I want to do is put in the rich text inside. So hit Control K
type enrich text, and just make sure to
connect it from cars. And I'm going to select
a vehicle description, and it's going to put in
that vehicle description. And finally, let's call it let's say vehicle description text. There we go. I just want to make sure
that I have padding on the left hand side of 24, 24. And it's just going
to push that in. And I can put in the top
padding as well as 24 maybe. For the vehicle
description itself, I can go with 32 at the
bottom. There you go. This section has been
completed and it's going to pull in the
different information that you put inside from whatever you
have set right there. And because this
is setup like so, we can maybe go inside and further make some
additional changes. But I think this is where
I actually want to wrap up this video because in
the next video we're going to deal with
vehicles specification. And if I showed that, we
now have to deal with this and this video has
already been 15 min long, so I'll see you in
the next video.
183. Cars Template Build Part 4: Let's continue where we left off with the vehicle specification. And basically it's
the same section. It just has these grids
populated inside. So let me go back to Webflow. Select my car information div
Control K to have been div. And this is going to be
called vehicle specification. Vehicle specification,
straightaway, margin, top 24, margin bottom 32. And we can give it that
background color of white. And we can go with
corner radius of eight. Then I can go inside and still this and paste it in right here. Oops, let's try that
again. There we go. Here where it says all review, I'm going to change it to
a vehicle description. Here below. I'm going to
type in vehicle information. Sorry, vehicle specification. There we go. That's what I wanted. So let's go ahead and close all of this up so it
doesn't bother us. So now when I open that, what I need to do next
is put in a text block. So hit Control K type in text, text block, give it a class
of text block. There we go. And now I'm going to put in
the combo class of maybe, I don't know, car,
cars, templates. There we go. And I did
this because I'm going to be able to add a padding
of 24 on this side. Lovely. And maybe we can make some additional changes
to the styling. So let's see what
we can do here. Maybe we can add the
margin on the top of 24, on the bottom of 32. And because we have
this combo class is just going to
affect that one. Now below that hit
Control K type in def, add a new div, which is going to be
called performance. And that performance
is going to be grid, which is going to house
all of our items. But before we get started, what I will do first is maybe include some
padding on each side, maybe 24, like we did
on top with this one. So if I select that
one, let me check. Yeah, we have 20. You
can increase that to 24. So that's lovely
because here we have 24 and now everything works
as it should actually. So now with that
performance set, what I can do is hit
Control K type in div. And inside of that div block, what I will need is
to put in that text. So I will just need text
blocks inside of here. So let's see. Inside
of the performance, I'm going to put in
zero to 100 km/h, just like this K h.
And inside of that, I'm going to hit Control
K, type in text block. And use the class of text block. And use an additional
class of, let's see, car, the car's templates description, course template description. Because what I want right
here is to just use normal, just everything is
as it should be. But here it should
pull in some texts. So let's see, maybe I can
even lower it down in size. So maybe 16. This one in 40 is too much. Let's go with 32. Because we are on a course
template description, it will work just fine and
you can pull in the text. So first of all, let's select this and type
in zero to 100 K M H. There we go. Hit Control C, Control V.
And then on the next one, just connect that field. So there we go. Now on this one, what I
will do is turn this into a stack like so make
sure they are like this. So connecting on each side. And now what I can do is select my performance and
turn that into a grid. And what I'll do is create
two columns, which is fine. And here I'll have three rows. So add additional
row right here. And let's see,
distance should be 32, this should be 24, I think. Press Okay, and let's
just go back to XD and simply check
really quickly. So these are 24
and this is fine. Let's go back to here. So I will just go ahead and hit Control C Control V. Control
C Control V. Just fill in all of my fields
really quickly so I can go ahead and add an additional
information inside. So what I can do right here
is this is zero to 100. Let's duplicate this one. This next one will
be valves, like so. And let's select this
and call it vowels. And choose this one. And let's see where
are our valves? They are, they are lovely. This next one should
be top speed. And the field itself
should be top speed. So duplicate this
one, top speed. And just change this
textblock to top speed inside where we are. Let's see top, top,
top speed loudly. Then this next one below
that should be power. And I'm going to type in Power. Bi actually type in all of
them so I know what they are. So cylinders. And this last one
should be torque. So let's connect the power. Let's see where we are. Power, power, power, lovely. And this should be cylinders. So let's duplicate this class. And this should be cylinders. And finally, this last
one should be torque. So duplicate it. And let's just connect this
with the torque like that. Now this section is completed. What I can do next is because
we have performance ready. I'm going to see the spacing
and the distance is 32. So I can perhaps give it, so select the
performance and give you the bottom margin of
32, maybe like that. And let's see, this
vehicle specification has the bottom margin of 32, but I don't want that. I want the padding
to be 32 harshly. So it follows
whatever I do here. Let's select this
text, hit Control C, Control V, and just move
it below my performance. And the next one should say
safety, safety like that. And basically, I'm
going to do the same for the safety that
I did right here. The difference is I'm going to actually have a little
bit of a different setup. So let's select this text block, hit Control K typing div. And inside of this div block, which I'm going to call safety
input in 24 on each side. Like that. I'm going to turn
that into a grid. But now it's going
to have two columns, but 245 different rows. So 2345 different rows. There we go. Now inside of that and you
hit Control K type in def. And this first one should be, let's see, safety in form. Maybe I can call it left
column or right column. It's really all up to you
how you want to do that. But I think that this
is going to work just fine for this one. But I can do is maybe I can
just put in some text blocks. I don't even need to do block. So let's see what
we can do here. So hit Control K type in
text block. Like that. Let's give it a styling of text block and let's give it a combo class course
template description. Yeah, that works fine. Let me just check out the texts. What we have right here. That's great. So hit Control C, Control V, Control V, Control V, v, V, v, V, until I fill in
all of my text. And now what I'm
going to do is go ahead and copy and
paste the text in. Now, this text is
really important because it's going to reflect all of your elements that your
car actually has. So e.g. you can see so
adaptive brake assist with hold and stuff like that. But because we didn't use the content
management system for it, because obviously some cars,
especially older cars, can have maybe two or three
different safety features while newer cars, especially with
these Classic Cars, or let's say, luxury cars, like in this case, are going to have like 1,000
different features. So it's really
difficult to judge of what you can do inside of where. But in this case, what we
can do is maybe we can have our clients fill in this
information for themselves. So in this case, as you can see, we now have this grid. So safety, we have 24 on each
side, which is fantastic, but I can do next
is hit Control C, Control V. Move this below. Hopes not here but here. For whatever reason
he didn't do that. Let's go Control Z. Textblock loudly. And let's just move the
safety field just above. So I have some bugs
clearly with the Webflow. There we go. So safety, next one is going
to be driver convenience. What I wanted to say before is perhaps your client
is not going to have that information ready for you to include inside CMS. So perhaps the better
option for them would be to put this information manually
later because as I said, some cars have exactly the
same systems like ABS, like parking brakes,
like cameras these days, but other cars don't. So perhaps it's a
wise decision than to have that be at
your disposal for your client and just put in that insight for them so they can manually within
the site is live, go inside, double-click and
simply replace or remove or edit fields from the ER
design and not break it. Because here we're just
going to have a grid inside. So it's just going
to be super simple. Let's duplicate this one. This is going to be
driver convenience. And I just love
working with grids because of that same reason. So you can see I'm just
using the same grid, but I'm just replacing the
text inside other text. Let's see. And because we are just using one
combo class for it, which is cars
template description. It's just inheriting
that comp class. And it's just showing us what we want to see
in the first place, which is the spacing on
the top and on the bottom, which is exactly what
I want to actually. Let's go with this one. Let's go with this one. Smartphone integration. There we go and we have
two more like this. And finally, like
this. There we go. So now that that's completed
for the driver convenience, what I have next is another one. So hit Control C, Control V. And I'm going to try to position
it just below know. So let's try to
do that this way. Hit Control C, Control
V on this one. And I'm going to position
my text blocks just above. This is going to be safety. Remove class. But remove the duplicate. This is going to be safety. And here I'm going to
simply type in safety. And for the safety once again. So we're going to duplicate this class
will rename the class is going to be safety
already exists. Let's see. This is going to be
actually exterior. Exterior. And this should
say exterior like that. So here in the
exterior we're going to have a little bit less items. So because we have a combo
class here of exterior, the class which we just copied. I'm going to show you how
to deal with that as well. Double-click right here. Then double-click
right here, control C, control V. I have the
star stealing kids, which I have on my car as well. They don't even give you
the spare tire anymore. You just have to fix
your tire, buy or sell. Basically if you're stuck
at the end of the rope. So now that we have
this for the exterior, you can see that these
four are lacking. So I'm going to do is simply
get rid of them like so. And now we're left with
these empty fields. So because this
has its own class, what I can do is just
remove the rows. And that's why I love
working with these grids, just super, super simple to do. And because interior has
exactly the same as this one, what I'm going to do is
hit Control C Control V. And hit Control C
Control V right here. Move it right below. Or move this right on
top where we want. Here. We're just going
to type in interior. And we're going to be done
in just a couple of seconds. Because the last section
actually need some tweaking. It's not going to be
as simple as this one, but I'm going to show
a little trick as to how you can speed
that up as well. So let's click right here, control C, control V, double-click Control V,
Control V. There we go. And one final thing
which is this one, Control V. Now that that's done, I'm actually going to select this because this
is our interior. So duplicate the class interior. You can see because
this is the exterior, this is the interior. It works just fine. And one final thing I
want to show you is this because we have
these dimensions, which is this right here. And we have to pull
these from the CMS. So how can we do in debt? Let's actually close
all of this. Let me. Simply see what I
did right here. So what I can do here is I
can take this information. So let's see, this
was performance. So I can hit Control
C, Control V to paste that section and drag it
all the way down to here. And I can then move these
two up top, like so. Then I can use my textbook
Control C Control V and paste it just below
my interior, like so. And because this is going
to have a bit more, I'm going to use
this performance and I'm going to duplicate the
class and call it dimensions. Dimensions. And now because I will need four on each side, except right here, but
I will still need four. Let's just go ahead and added because we are now
at dimensions, you can click right here
and simply add a new row. And this is going to be blank, but this is going to
have a quantity inside. So let's just deal with it. So this first one,
Let's duplicate it. It's going to be called height. This one is going to
be called weights. This one. So let's just duplicate it. It's going to be called linked. Next one is going to
be called boot space. This one is going to
be called wheelbase. This one going to be, let's see what we actually
removed right here. So fuel tank, so a rename, fuel tank like that. And let's copy and
paste one more. And this final one at the
bottom is going to be wet. So let's bring that
back when the scene, this is going to be
duplicate width. And finally, let's just
double-click and type all of that in height. This is going to be linked. This is going to be wheelbase. This is going to be weight. This is going to be Brightspace. And this is going to be
filled tank capacity. And finally, let's
just connect them. So this one, Let's
connect with width. So let's see where
we are right here. I think, right here, there we go. That's the width. This is the fuel tank
capacity, which is this one. This is going to be
for the wheelbase. C will base, the base
will base, where it is. Power. Wheelbase. Great. This is going
to be for the boot space. Let's start from
the top boot space. So for whatever reason, it just replaces their position. So length, length is right here. This is going to be
for the weights. Let's see, Wait, wait, wait, wait, wait, wait, wait. And finally, this is going to
be for the height, like so. And now everything is completed. Let me collapse everything. So if I hit preview
right now on this page, here we have our images as
we explained as we did some. This overview. We have, we have y equal description, we have specification inside of which we have performance. Maybe we can adjust this
a little bit just so that we can get a little
bit of a better spacing. I think we have this
which is great. We have driver convenience,
exterior, interior, interior. And this finally
should say dimensions. So let's fix that
really quickly. Dimensions. And because this is a textbook course template, what I will do is change its
color to this color just to differentiate it slightly
like you see right here. So it matches a little bit
more with these titles on top. And I think that's
basically, it's, the last thing
which is left to do is to connect this
card to follow. And how can we do that is
actually quite simple. So you can select
the car action card. And you can go back to
the top right here. And for the position, I'm going to choose sticky. And you have to tell it to
where do you want it to stick? So I'm going to tell it
to stick to maybe 20. You can see we already have
these default options. So now watch this magic. Let me actually find myself so you can see a
little bit better. So here we have
everything works, everything is as it should be. But now when I start
scrolling and it gets to 20%, it's going to stick. And it's going to stick. And it's going to
follow whatever we do. It's going to follow a now
when it reached the end of the section is just
going to stop. And now when I start scrolling, everything is going
to work just fine. So you can see how super
simple this is to do. And I really love this feature. And if we switch it over
to Carol calculate e.g. and when I start scrolling, you can see the effect
already takes place. It already scrolls through. One final thing which we need to do if I take you back to XD, is we have this, our exclusive selection,
and we just need to paste this in and I will
connect this later. So let's just go back to
our homepage right here. So pages home use
this exact section. So let's just take it from here. Exclusive collections. So
hit Control C and then go to our course template
pages control V. And I'm going to
put it right here. But in this case, I'm going to rename
this duplicate class exclusive selection
cars, templates. There we go, because we need
to make some changes here. So what I will do here is
inside of the container, let's go to the
collection list wrapper. And this is where I'm
going to duplicate the class and type
in cars templates. And here let's go to the
settings really quickly. Here. What I can show is start at one. Let's start at eight, e.g. this time or no, start at Let's start at one. But for this one, let's sort the order. So let's see what
we can do here. So let's go with a random order. And it should work just fine. Why it didn't choose that. So let's go with random
order, hit Save. And now when I hit preview, you can see that we are here, but we still have
our Lamborghini, which is what we
don't want to see. Actually. What I can do right here
is a random shuffle. Let's go with something else. So maybe we can go with something
a little bit different. You can go by the name. Something a little
bit different. Maybe created on
newest to oldest. Maybe we can show that. So let's try that. So when I hit
preview right here, and when I switch to,
let's say escalate. Let's see if that helps. It does, but when I
switched to McLaren, e.g. it should now update
and move this around. So perhaps we should maybe source this through
a little bit more. So we have to show
maybe filters or equals does not equal, maybe name does not equal. Hit Save, specify a valid value. Maybe I should investigate this, but I think oldest
to newest works, except in the case of
when the car is shown. So you can see right here. So it works. In my opinion, the best version is this one. So random order, hit Save. So whatever you can,
It's going to show that I can even add a new filter here and create that and
maybe show even more below. So I don't know, you can do whatever you want
basically here, but see all cars is the button which we
are going to link in one of the next lessons. But for now, let me
just leave you at this. So finally, let's quickly recap what we've done because
we already at 25 min, which is one of the
longest lessons so far. We have gone ahead and
created this, which works, created this, which sticks, created these elements,
all of these elements. And finally, we created this. And I think that this top margin should be a little bit
less in my opinion. So let's see what
it did originally. Yeah. I'd just love to the 200s, so I think that's fine. Contact Us. So everything works
as it should. And as I said, we're
going to deal with responsive a little bit
later in this class, and we're going to
fix this spacing. Now that that's completed, we can move on to
the next pages, which are loans and contact us. And when we finished
these pages, maybe we can then deal with the responsive
issues that we have. And maybe then we can
adapt a little bit deeper into issues such as this one and how
can we switch this? So it shows us random order, which is not the page
that we're on right now. So I'll see you in the next
video where we're going to tackle Loans page.
I'll see you there.
184. Linking Car Cards: Before we move on any further with our further
work in Webflow, we first have to link
all of those cards, cards with the actual pages. So when our user clicks
on one of these cards, it's actually going
to take them to view the actual page for the car and to learn more
about the car itself. So here we are in Webflow
and how we can do that. It's really quite simple. I purposely didn't do this
because I wanted to show you how these fixes
can be achieved. So here we are in our car
cards, in our homepage. So when I click right here, you can see that I
don't have any link. So you'll have to link
all of your pages and all of your assets if you want for them to lead somewhere, for them to take your
users somewhere. So how can we do that inside
of the car card itself, I'm going to hit Control
K and typing link block. Now simply click the link block. It's going to put it right here and don't worry
about it too much. We're going to attach the
values in just a second. What I'm going to do is
position it right here, e.g. and then use my car card info, put it inside of
that link block, and then car card image put that inside of
mailing block as well. And you can now see that
the styling is all wrong. We now have this underlined on our texts which
we don't want. So select your link blog. Go right here where it, where is the topography? And you can see that the
declaration is set by default. Simply click right here
where it says none. And it's going to remove all
of your styling from there. So now we have a link
block number four. What I'm going to
do is let's say rename this class
and call it car, hard link, block, like that. And now it's going to have that same value for all three of these because
they are connected. Final thing to do is to actually
connect it to something. So when you select your
car card link block, click right here, and go right here where it
says collection page. When you click there, it's going to take you to the current car. So just click there
and it's going to open up the card that
you actually selected. So that's our current car. You can set it to open
new tab if you want to, but I'm not going to do that. And let's just remember this
is car card link block. So what we need to do is to
set it for all of our pages. But first of all, let's test
it out and see if it works. So everything works
as it should. This is the escalate, e.g. if I click on it, it's going to take me to
the escalate page, which is actually what I want. But right here when I scroll
all the way down and click, you can see that
these don't work. So what we're going to do is
go out of the preview mode, go back to our
pages, go to cars, because that's where we have
all of our cars connected. And when I click right here, you can see we don't
have any link bug because we have to connect
it right here as well. So select your car card, hit Control K type
in link block, put it inside, and then simply
drop your items inside. Select your link block. And we are going to
give it a class of card, card link block. There we go. And you can see straight away, it's going to remove that
styling that we did previously. And the only thing which
is left for us to do here is to connect
this collection. Choose the collection page. So just click right here where
it says collection page, choose a collection page,
choose current car. And now all of these
cars are connected. So if I hit preview
really quickly and select something
like Porsche Cayenne, click right there is going to open the Porsche Cayenne page, but still we have
that same issue here. So we have to do that as well. So while we are on
a course template, doesn't matter which page. In this case we are
on the Bosch again. We have to do that
thing one more time. So if I click there,
hit Control K, type in link block,
put it there. And once again bring
my car card info inside and car card image. So you could just imagine
this sort of like an overlay with Lincoln site link block, card, card link block. There we go. And it's going to inherit
the same styling. We are going to click right
here, then right here, choose the collection page, current car, and there you go. But now we have another issue. So we have these three. So when I hit preview, remember we're on
the Porsche Cayenne. So these three will
work just fine. So when you click right there, it's going to take
me to Lucy there. And it's going to update. So just give it a bit of time. But still, we have
Lucid Air here. And we're on Lucy, their page, which we don't want because
it doesn't make any sense. So when I click
right there to go outside of the preview
mode and click on the Collection list wrapper for this exclusive Car Collection
on my course template page. What I can do is go back
to my settings right here. And here I have my sort
order and I have my filter. So I'm going to
add a new filter. And here I'm going to set
up something like a car. And I'm going to choose
is not current car. So I don't want this to be anything which is
which I'm looking at. So e.g. I'm looking
at Lucy there. I don't want it to be right here because I'm already
looking at it. So just show me some other car. So when I hit Save, as you can see, it just
switched those elements. And now I can do I just
chosen random shuffle. So I can do that
if I want to or I can go ahead and
choose something else. I already showed you how
to do that previously. So now, as you can see, we are on a lucid error page. So everything works
as it should. We all have eight images. These work and it
sticks to the top. So if I scroll all the way down, you can see we have our
exclusive collection and now there is no Lucid Air. So let's test it out. When I click Cadillac
escalate, e.g. we are only escalate page. So when I scroll
all the way down, we don't see escalate any more. And that's how easy this is to connect this
house super simple. It is to set up. And that's why it's important. And as I said, I purposely
left it out like this because I wanted to show you
the power of link blocks. You can put these link
blocks on images. You have to, you can
make an image as a link. But if you want e.g. on the loans page, we have that image with
three different images. Maybe you want to put all of
it as a single link block. So you can just put a link
blog as an overlay style. It is already explaining it
right here and it's going to take your users somewhere
if they click on it, or you can go the other
way around and simply style all three images
to be separate links. And therefore you're going
to achieve the same results. So it's really all up
to you and all up to layout that you want to
achieve in your design.
185. Loans Page: Let's now go ahead and
create a Loans page. So from dark pages, click right here
and type in loans. There we go. Hit Create and just check if the body has
inherited the style it has. So what we're going to
do hit Control K type in navigation, control, K, N type in Form, Control K type in map, and control K type in footer. Now that you've done that, what we can do is
select the body hit Control K type in section. Add a class of section. So move the section
just below our nav bar. And inside of that section, if you'd Control K type in def and give it a class of
container, like so. It's great. And what I can do is inside
of this container actually, I can put in that text, but I'm just going to actually create another
one inside of that. So hit Control K type in def. And this one I'm going to name a lone hero rapper like that. And inside of that hero wrapper, let me hit Control K, type in hearing heading H1
and type in H1, which we already created,
which is centered. There we go. Like that. Let me actually copy and paste some text inside like that. And then what I can do
is create another one, Let's say Control K type in div. And this div of give it a
name of loans, hero images. And I'm actually going
to turn it into a grid. But before I do, let me add my images Control
K to pin image. And this image, I will
give it the Audi RS five. Let's give it the name Audi S5. And once again Control
K type in image. And this image is going to be that range Rover,
which is this one. And call it a range
over Voc like that. And finally, what I want
to do is turn this into a grid that's good grades. And finally, what I
can do here is maybe increase this to 24, maybe not. Let's keep it at 16
because it's going to keep the same consistency
for this one. What I'm going to do is align it to the bottom right here. And this one is already
aligned to the bottom. But just to be sure, and
I think that's good. That's great and that's what we need for this
particular section. And let's give it a class
of hero loans that, and now select the body hit
Control K type been section. So we can add the new section. Let's give it a class of section position to just
under this section like so. And this next one we
will call heading. Loans, are loans like that. And inside of that
Let's hit turning div, typing container. Let's say loans are leading loans because it
says market leading lines. Leading lines, there we go. And inside of that, what we can do is maybe put in another
wrapper or something. Let's see what we can do. Let me create another div, so Control K type in def. And instead of
calling it a wrapper, Let's call it market
leading loans like that. And inside of that, but I can do is hit
Control K type in heading. Choose h three. And h three should have h three. Let's see, dark. Let's give it centered. So centered and just
center it like TO. So let me copy and
paste the text inside. And for this section what
I'm going to do is give it a distance of 200
maybe or even less. I don't know. Let's see how it looks
like once previewed. Yeah, 200 is good
because it will still be legible and it will still
be a scene from here. So let's keep it that way and
let's create another one. So Control D div. And this div, I'm going to call loans for slash
benefits like debt. And inside of that. Let's create first one. So Control K type in
def inside of that div, which I'm going to call, Let's see, simple convenience. I'm going to include
Control K image. The image is going to be
simple and convenient. Let's just find it right here. So it's this icon. And below that icon, I'm going to actually put
the h three once again, so Control K to pin herring. Use the age three, and yeah, we can
use whichever one. So let's go with simple
inconvenient for the text. And below that, what
I'm going to do is hit Control K one more time
typing p for the paragraph. And this paragraph is
going to have this text. But for the paragraph, let's go with P in gray because I'm going to give it the gray color from here grades. And finally, what
I can do is put these into a flexbox
of vertical, make sure they are
centered like so. What I can also do is perhaps because this is from the left, maybe I can give it at
that age three centered that we have right on top. Or was it What was it? H3 dark centered. Okay, so H three dark
and then centered. Great. So now that we have debt, but I can do here is
perhaps with this, we can give it some
distance of 24 to the top. Let's press get rid of this one. And to the top we can give it a top margin of 24 like that. And finally, with this icon
which is going to be called, Let's see, simple convenience. Icm. Let's give it the
bottom margin of 24 e.g. great. Now that
that's completed, I'm going to take this loans benefits and turn
it into a grid, give it another column, get rid of this row and
maybe add something like, I don't know, 24 here, 32. Let's see how that looks like. Good for now. So let's close it. Hit Control C, Control V, Control V on this
one and on loans, benefits, I'm just going
to give it a top margin of 64 to spice it up a little bit. Now, this one, I'm going
to duplicate the class and rename it to payment options. And let me actually copy the
text and see if it fits it. Does. There we go. Let's change this last one
straightaway to peace of mind. So duplicate peace of mind grid. And let's change this. Duplicate payments. Icn. And let's replace it with a place image and
find it right here. So let's see where
it is. Here we go. So payment icon grade. And finally, let's
replace this one. So just duplicate it and
call it peace of mind, ICN. And let's find it
and see where it is. It's the one with the shield, which is this one. There we go. Now that that's completed, what we can do is we
can play around with these settings even
more if we want to. But I think that, that's fine. But I'm going to
do next is create that section if I take
it to our design, which is for this. So what we can do in
this case is we can copy this section that we
have on our homepage and adjusted just a
little bit and play around with these positionings
a little bit later. So to save ourselves
a bit of time, but I can do is go
back to the homepage. Use this section. Control C. Then go
to our loans page. Select our body control
V and position it here. There we go. Now instead of who we are, I'm going to duplicate this
class and call it partners. Like so. Here what I'm going to
do is duplicate this. Because partners
image, click the cog, replace image and find my
partner's image. There we go. Lovely. Finally, let's just take the text and
replace it right here. Like so. And finally, what we have is who betweens loans experience? They are you, your next? There we go. That's fine. Finally, what we need
is we need to put this into a div on
its own perhaps. Or we can even just
put images inside. So let's try that first and
let's see how that works. Or what we can do is
let's just do that. Hit Control K type in def. And I'm going to put this
image into a div like that. Now, this div block needs
a height of 100% of its parents and it
needs a width of 60%, I think, was that the
width of the image? Let's see. Now, max-width
is 100 per cent. So let's do that. Max-width is 100%. But for whatever reason, it just doesn't
allow me to do so. Let's try that trick
one more time. So this is going to
be, let's say, 60%. And let's get rid of this one. And this content. Instead of we are content, I'm going to duplicate the
class and say partners. Content, like so. And I'm going to
give it a width of, let's say, 30% or maybe 40%. Yeah, I think that's
going to work out just fine before I
move on any further, let me check the home and
see if it break here. It didn't. So let's read. So let's go back to lungs. And now that we did this, what we're going to do
is use this div block, call it, rename, call
it part nerves, images. And for the positioning of it, Let's choose a relative. And inside of that hit
Control K type in image. Choose image. And I'm going
to choose one of these. So this 1.1 more time, so hit Control K type in image. For this image, I'm going to
choose the other partner. I hope I haven't exported. There we go. And let's now play
around with them. So this is going
to be as leasing. So let's call it that. This is going to be Santander. And for both of those, obviously, we will
put the positioning. So instead of position static, I'm going to change
it to absolute. And it's going to
show me that the absolute is for the
partners images, which is this right here. So as leasing do
the same absolute. So let's play around
with the positioning. So let's see
something like this. Maybe I can put the suntan
dare to be on the top. Right. Was it like
that? Yes, it was. So top-right, ns
leasing is going to be at the top, bottom left. So sometimes there
is going to go to the top right and the S leasing is going to
go to the bottom left. And let's just play around
with some settings. So Santander can go to
here, something like that. Maybe. It can go to here maybe. So once again, these bugs
with the positioning. So let's go with the bottom
margin this time, like this. And let's go with the left
wants something like this. So let's try to mimic this. So we have 20 on
the side and five. Let's go five here. And let's go 20 here. Oops. So now let's go with ten. Let's see why this is happening. So if I click here
and then here, there we go, works just fine. When you hit preview,
it works once again, so everything looks
as it should. And basically that's
our page completed. You can see how easy it
is when you have all of these elements and you can
just bunch them around. I don't really understand why this is going on
with these images. Just bouncing left and right. If I click here
and then here you can see it's completely fine. But then when I scroll up and
down and do something else, it just bounces back into place. So you always have to
figure these things out. And this is basically
the life of a developer. So that's basically it
for our loans page. The only page which
is left for us really to design is this
Contact Us page, which is just going to
be super simple to do. Just basically add an image. So I'll see you
in the next video where we're going
to finish that.
186. Contact Us Page: Let's now go ahead and
create that final page. So here what I'm going to
do is click the New page, type in Contact Us, hit Create. And here let's check
the body once again, body color, that's fine. So here, let's do the same
to control K type in nav. Control K type in Form, Control K type in map, control K typing footer. And one final thing
which I want to do right here is hit Control
K type in div. And let's call this div block, let's say a spotter
showroom like that. And inside of that div, which is going to
be width at 100%, max width is at 100% because I want this image to take
up full width control. Kate, I've been imaged. And let's choose an image
which is going to be this one. There we go. And I'm
just going to call it a spider showroom image. And that image is going to
take up 100% of the space. And basically that's
it for this page, you can see how super
simple it is to create. Maybe you can put
some blurb here, but I don't really
think that's necessary. And I think that's good
enough for our page. Basically now we can go ahead
and get started connecting. These are links. So
I'm going to stop the video here and I'm going to get to you in the next video. We're going to connect
all of these links and connect all of
these buttons and actually make them lead us somewhere and not just
be on the empty page. So I'll see you in
the next video.
187. Adding Links: In this video, we are
going to create our links. We're going to link our
pages in navigation and connect our buttons
to the actual pages. So here I am in Webflow, here I'm on the homepage. And this is really
super simple to do, especially because we are using
these symbols in Webflow. As I mentioned, you can see that these symbols connect
throughout our pages, so therefore, we can
adjust them and, uh, do with them
whatever we want. So here we are on the cars, and I'm going to
select this nav link. And when I select it right here, I wanted to tell me in the
settings where I wanted to go. So here I'm going to
take it to my page. Choose a page, cars. And it can open in
this tab or a new tab, and you can choose a
different payload options. So prefetch, pre-render default, I'm just going to
choose default. You can even go with custom
attributes right here, so you can name your
attributes however you want. But I'm not going to bother
you too much with this. This in page linking
is really useful, especially if you have
long landing pages. You can just imagine that
navigation is going to be sticky in it's going to be at the top of the
page all the time. And it's going to
have, let's say, six different nav items
inside of that navigation. So this id for in
page linking is really useful because on
that page you might have, let's say testimonials, contact
form, gallery, portfolio. You can have all of those
items in your navigation. So when you click on them, it's going to take you down to that section of your website. It's really useful
and you can do so in XD and in Figma as well. But here it's really useful because on your
sections themselves, you can select that
section and say, This is who we are. I'll just name if we had who we are right here
in the navigation, I would name a desk section, give it an ID of who we are. And then when my users
click on who we are here, the entire website would scroll down to that particular section. So these IDs are really useful
when you want to use them. But here we're just going
to leave it as it is. So next up we have loans, so I'm going to do
the same thing. So page and here you can
see, we can have fun. So to call somebody
directly email, to send email directly through
external e-mail providers like Gmail or Hotmail section to link to different
sections and file. If you want to upload
a file and then for your users to be able
to download that file. Of course, there are
filed limitations there. I'm going to leave the page. As I mentioned. This is going to take
us to loans, this tab. So it's going to
open up in this tab. And finally, let's do
the same for contact us. So let's go over to
page, choose page. Let's go with contact us. This tab. There we go. So now that that's fixed, Let's first test it out. Let's hit preview right here. Let's go to the cars. And it's going to take me to
my course page, hit loans. It's going to take
me to the Loans page and it's showing me bad
get away for some reason. There we go because
it didn't wasn't able to save hit Contact Us. And it takes me to the
Contact Us page cars. But when I go back to home, when I click my logo, it doesn't take me anywhere, so therefore I have to link it. So let's go to page, Let's go to home. Let's go to the Edit mode. Inside of our nav bar, you can hit Enter to
be able to edit it. Select your logo, which
is this thing right here. And what I want to do
is do the same thing. So instead of external URL, what I want to do is
to link me to page. I can choose a page
which is the homepage and preload is going
to be default. Now, let's go back and
let's quickly test it out. So when I hit preview and go to loans and select my
logo, click on it. It's going to take me here. But if I go back to my lungs, Let's test it out in the footer. You can see that this
is still acting out. I'm going to try to fix it. Maybe I can add it as a grid. That way it's not going
to stay out of line. So here we have that
same logo and you can see when I hover
over it, it changes. So the link propagates because we took it
from our navigation. So when I click there, it
should take me, but it doesn't. So let's see what
the problem is. So when I select my footer and when I choose
my logo footer, hits the selection external URL. So take me to page, take me to home. There we go. And let's see this. So
this is nab, a link. So when I hit
Settings right here, I still have to
edit it right here. So let's do that.
This is page cars, this is page loans, and this final one
is page contact us. So there we go. Now we have
all of these and make sure to set the social media icons to whatever you
want to set it to. I'm just going to leave it
blank for now because I don't think that it's necessary
to link it for this page. What I want to do, as I said, is I'm going to go,
as you can see now, it's fixed, but when I hit preview is just playing
around with me. So I'm just going to do this. So who we are rapper
instead of flexbox, I'm going to choose the grid. This grid, let's say
I'm going to position this to be a bit narrower,
something like this. And I'm going to get rid of the second row,
something like that. There we go. And then inside, I'm
going to select this. And let's try it
with this or height. Let's get rid of the width. There we go. But now we have to
adjust this as well. Contents. Get rid of the width as well. There we go now works. And finally, let's
adjust this grid. So when I click right
here to adjust my grid, I will just adjust this text to be a bit narrower
than this image. So you can adjust it even more. And you can see that we have the margin here
because you can see where the image is
ending on this side. And there you go. So now
it's going to be much simpler for us to do this. When you click right here in the edit grid and you
are in the tablet mode, what you can do is simply add another row and get
rid of the column. And it's just going
to propagate and expand right here,
as you can see. And we just now have to add some spacing here and make sure that this margin is
removed from this side. Hit zero. Like so. And I can go ahead and select my partner images and make
sure that my width is 100%. There we go. And now all I need to do
is simply adjust this. So let's see this
partner image is, let's say width is 100 per cent. There we go. And I'm just going to select this one and adjusted manually. So calming right here, e.g. and you can see the spacing
on the left and right-hand side that's padding that
we included previously. So you can see how useful this is when you start
working with the tablet. I'm getting carried away a bit, but I'm not going to
do this too much here. Let me just include
a margin of 64 here. There we go. And now you can see
how this looks like on a tablet and it's going
to be the same on mobile. We're just going to have to make some additional
changes to our images. But as I said, let's not get
too carried away for now. This is the video
about the links. And you're going to get to these responsive designs
a little bit later. Here what we have is we have the current page is loans and you can see that it is blue, which is what we wanted in
the first place to show to our users where they
are on the website itself. So if I go back to cars,
Let's hit Preview. Go back to cars and
select one of these. Let's go with Lamborghini. You can see that we are not on the cars at all because
this is that external page. So if I go back and say something
like Cadillac Escalade, maybe there we go. It doesn't show me that, but when I click on the
cars and visit cars, now we have that blue link and same story for
the Contact Us. So let's go back
to the homepage. And what I want to do is
start linking these buttons. This button. Let's take it somewhere. So if I click on the
page, choose a page, take me to cars, and you can open a new
tab if you want to. I'm not going to bother with
new tabs at the moment. We're going to keep this
here, see all cars. We're going to leave the
link to the same page. So cars, because I want
them to see all cars, what we offer
Benefits Contact Us. And then this, you have to
adjust in your dashboard. So you have to adjust where
are you sending links to and where are you
sending messages to. And it's going to work that way. So if I take you there
to Project Settings, and you can see forms right here for notification
from who it is. So you can change
this to your name. So set label and so on. Cent form submissions to currently I have my own
e-mail address here. Of course, when you send this project over
to your client, you're going to enter your
client's e-mail here, and therefore it's going to
send their subject line. You can see e.g. site
name for a name just for them to know where
the form is coming from. Reply to address. So you can enter custom
addresses, their e-mail template. You can enter debt
and form submission can't it's included in
formal notification email. So which one is it? And you can even
include recapture. It's no at the moment you
can click here to enable it and then you can adjust these
settings however you want. And as I mentioned previously, you can integrate additional
forms right here. Let's hit over back to
designer and let's get back to Lincoln because we don't
have too much elements, so we're going to be
finished quite soon. As I mentioned, we
already did this. So when I go to Settings,
you can see we are going to curse, which is fine. I already explained about this. For the map, you don't have to link anything because
when the click there, it's going to take
them to Google. So that's fine. And if you go to cars here, we don't have to link anything. It's super straightforward. In the lungs. What we can do is contact us. So same story, e.g. let's say that I'm going to enter my full name,
my email, my phone, and the message, hey, I'm interested in your lungs
and so on and so forth. So you can see why
these contact us forums are really
useful on each page because whatever user is doing, it has the contact form there. So they can simply send the contact form about whatever they are
doing at the moment, whatever they're interested in, in this case about the loans. So I'm interested in your
lungs. How does it work? Who is your partner? Who can I talk to and
so on and so forth. So that's how that is working. And let's go to the Contact Us. Finally, contact us. We don't have to
do anything here. And the last thing I want to do for this video is cars template, because inside of here
we have three buttons. So let's go back to here first, because we already know
what we want to do this. And here you can see
Collection page. I don't want it to take
to the collection page. I wanted to take it
to the railroad page. And the regular page is
going to be cars because see all cars is going to take them there to see the list of cars. You can open a new tab. You can do it by default. And what I'm going to do in this case actually is
open up a new tab. Why I want to do this? Because perhaps, I want to
maybe compare the two cars. Let's say I'm interested, you guys have to
BMW models, e.g. I'm looking at one angle. I want to go to see
all cars to look at another one and simply compare
the two into two tabs. Or you have exactly the same cars but with
a different color. So maybe I want to open up images in lightbox in both tabs. And I want to compare how the car looks like
in different colors. So that's why that's
useful. Here. What we have is
reserved this car. What we can do now is e.g. we can either go to the URL
and send them to the form, or we can go to the Pages section and we
can choose a page section. And let's say message to maybe, let's see what that does. So when I hit preview, reserve this car message to, it's going to send me there. But perhaps, maybe I can link them to somewhere
around here. So let's go here. Let's go email form,
maybe let's try that. So when I hear our reserve
this car, There you go. It's going to take me
to the email form, which is exactly what I want. So I don't want them to
waste too much time. I want them, if
they're interested, they can simply click there. Or that's why we used
good UX in this case. If they are here on the top of the page and they want to
quickly reserve the car, they can click
here, it's going to take them there to the form. But if they are
somewhere around here, this is still following them. If they scroll all the way
here and say, you know, what, I want to reserve here
is the contact form, so they cannot miss it. It's good UX, It's good design
thinking solution there. Finally, what we want
is C, loan options. What I want is to take them
to a Loans page like so. And once again, you can
open that up in new tab. Why? Because maybe I want them to
read all about these loans, but on a new tab so
they can compare the car they're looking at at the moment and the
loans we have on offer, maybe they are with Santander in this case
or with as leasing, whatever is the case. It's always the good
thinking process to give them options. And in this case, option would
be to open up two tabs so they can compare the two options and see what works
best for them. So there we go. Now, with that completed,
we linked everything. Everything works as it should. So when I hit preview right
here, click right here. All of this works just fine. In the next video,
we're going to talk about responsive design. And I'm going to
show you how to turn some of these designs
into responsive. And it's going to be
fairly quick video because we already did
some preparations, but if we have some glitches, maybe I will break it down
into two or three videos, just so it's easy for
you guys to follow. So I'll see you
in the next video where we're going
to tackle tablet.
188. Responsive Tablet: Alright, so let's now get started with the
responsive design, and let's start with the tablet. And we're going to deal
with the homepage first. And then as we move on, I want to move on
to the next pages, but everything is going
to be exactly the same. You're just going to adjust some of these elements
here and there. And you already saw in the previous video
how super simple that is to do so without any further ado,
let's get started. So already by default, we have our navigation, which works across
all of our sections, which is completely fine. What I want to do here is come in right here
where it says tablets. Open up this section. And first things first,
I don't want it to have this much room at the top. So let me open up my section and let's lower this down
to maybe 40 pixels. There we go. And let's open up
the hero wrapper. Because we have this
flex layout turned on. I'm going to choose
vertical in this case. There we go. And now all I need to do is
simply make some adjustments. So here I have my hero. Content. Width is 60%. I'm going to put it to be at 100% because that
way it's going to take up all of the available
space that is on offer. And when it comes to
these percentages, It's really super
simple to memorize. Just think about it, where your content is located. In, in this case, our hero content is located
inside of the hero wrapper, but that hero of wrapper is located inside of the container, and that container has the
pairing of 20 on each side. So when I hover,
you can see where that pairing is located. So whatever it is inside of my container is not going
to be wider than those, that width of the container
-20% padding on each side. So it's super simple to
calculate and to understand. Now, let's do something
a little bit different. So here we have
the width, we have the height for our hero image. What I'm going to do
is push that down. What I can do is
maybe set this to be, let's say a hundreds. Let's see if that's too much. There you go. And I don't
want it to be 100%. I think that's going
to be just fine. What I can do right here is
perhaps put this content in the center because
it's going to be much easier to scale that way. So let's call it the center. And remember, whatever
changes you make on a tablet will not affect
the desktop size. So when it goes right here
and click on the desktop, everything looks
exactly the same. But when I changed the tablet, it's going to affect the
tablet and a phone sizes down. But when you make
the desktop change is going to affect everything. So it cascades
from desktop down, not the other way
around in Webflow. So Let's go back to
the centered and let's just put our
text in the center. What you can also do
is maybe make this a flexbox and turn it
into a center that way. But in this case, let's
just call it centered. Now let's position
this to be centered. Actually, you know what, we can do so, so let's, let's do it actually, let's put this to be
a Flexbox vertical. And I'm just going to put
everything in a center like so. It's going to be much
more easier for me later to adjust these things. And actually, let's visit the phone size and you can see how it scales with the text. And finally, for
these smallest sizes will have to adjust
the size of our texts, but we'll get to it
in just a second. Let's first deal
with the tablet. For this particular
section right here. It already did the
work for us in a way. So let's select our
wrapper in this case, so we have the grid, so it knows what to do. Let me adjust it because we have these two
columns, That's great. We only have to
adjust the content inside here with the image. Max width is 100 per cent. Let's go with 100% for the width and it's
going to fill that in. What you can do is
adjust the height, adjust the width or
something like that, but I don't think
that's necessary. What I can do inside
of here is I can also align my contents so you can justify your items
in the center, but I don't want you to
do that in this case. I want them to stretch
to fill the full space. Here for this text, what I want to do is perhaps
add a margin of 64 maybe. And I think that's
going to be just fine. It's legible, it's
readable, it's fine. N When I started scaling down, you can see how this adjusts. So when I click right here,
when I click right here, you can see how it easily follows and how
it easily adjusts and everything works as
it should. Like. There. There we go. So let's now move
on to this section. And here we also have a grid for the
collection list wrapper. So what I'm going to do in
this case is let's see. We actually have the Flexbox, but it doesn't matter. But here we have a grid. Just let me see. Yeah, on
a collection list itself. So if I adjust that grid, what I'm going to do here
is get rid of some of these until I only have one
and just add two more here. There we go. And I'm going to keep the
button because I still need it. I still need for
them to go to there. And when I start scaling here, you can see that
it automatically adjusts and fits in
that remaining space. And you can see that
the spacing is kept. And that's why I love grids because they are super
easy to work with. If we go a little bit
down what we offer, let's fix this section. Here on the container. We don't have anything
but here on our wrapper, we actually have a flexbox. So let's turn it to vertical. And what I will
need to do is set my image and go right
here to the margins, set my margin, it's 64 e.g. and let's see what we
can do with this texts. There are many, many different options that you
can do right here. But what I can do here, Let's say maybe I can stretch it or make my width
at 100 per cent. Try it, something like
that and then try to center it or not. I don't know. Maybe what I can do is because
these are in the center, maybe I can put all of them
as a flexbox to be vertical. And then maybe I can
center the content inside. So select each of them. Click on the flexbox
vertical center the content. Click right here, Flexbox
vertical center to content. And there we go. Now we have
the content in the center. And once again, when
you start scaling, you can see how it fits and
how it adjusts nicely to fit in the size which is available for each
particular breakpoint. This image looks great. Our benefits, let's now
deal with that as well. I'm going to go to my benefits. It's going to be
a tad different. So when I hit Vertical, actually let's go with
horizontal because this was for the actual image
benefits wrapper. Let's see what we can do
here and our benefits. Let's turn that grid. So when I adjust it here we have three
columns and no rows. So let's add two more rows, and let's get rid
of these columns. There we go. So now we have the
content in the center. But now what we need
to do is we need to adjust the actual size
of our container. So when I hit right
here and hold my shift key and my up arrow, it's going to adjust
to, let's say 800. I think that's going
to be quite good. And it is quite good. There you go. So that section is completed. And finally, for the Contact Us, because once again,
that is the grid. Remember, but I can
do straight away, which is going to save
me a lot of time, is hit edit right away because it propagates
throughout my pages. Remember, I can go to my container and I can
go to my form wrapper. I can select my form block. Inside of that. I have that form to remember, and here we have that grid. So when I hit edit on my grid, what I will need to do
is perhaps, let's see. Maybe I can add one
more row like that. Go back outside. And I'm going to select
my e-mail right here. I'm going to span it across. That's going to push
the phone down, spent the phone across.
And there we go. Now we have each of
these fields taking up the entire width of our grid and the
button stays the same. But what can you do
about your button? Remember we justify
that right, right here. What I can do is
justify it left. And I can simply click on it
and expand the size of it. Or I can put it in the center, something like that and it
can take up the entire width. I can go with the full width and call this button form btn, just so that we have
a different style. Maybe I can go with the
100% width in this case. And I can go with the text
which is in the center. And it's fine because
we have at a forum btn, which is just going to take
that width. There we go. Now when you switch over
to any size that you want, it's still going to take up the entire width of your screen. And we have to go back to
instance so we are able to see the entire
form taking place. So you can see it
cuts off right here because we have that 20
padding on each side, which is actually what we
want in the first place. Everything works
fine right here. What we can do on the smallest, smallest sizes is actually
cut in that size. So let's deal with the tablet. And let's come
right here where it says map, enter inside. What I can do with the map. Let's see what we have
right here on the wrapper. We have the flux turn
on the vertical flex. And what we can do is
perhaps put these three in a grid or simply leave them
like this, maybe one-by-one. So where we are
content, let's see, maybe I can take the width
to 100 per cent. Like so. But because the wrapper
is at, let's see, 100 per cent and the
content is inside. I don't really know why
it's taking up that room. It has the 20 padding. It should keep that 20 pairing, but it doesn't for some reason. Let's see 2020 on
each side like that, where we are content percent and let's
align it to the left. There we go. Now it works. And now for the text inside, what I can do is perhaps I
can give it that class of centered like that because
I want to center my title. Jumping right here, click on the center and center
this one as well. Click right here. And then as I said, you can do with these
whatever you want. You can put them in a grid and then make sure that there
are three columns wide. And then you can adjust
that grid or you can simply put them to be in
the center either way. So what we can do right here is, let's see, maybe we can put
our content in the center. No, I need to put in
a new div right here. So let's quickly do that. Let's select our
text box control K type in deve, they've block. And let's call this form or map. Map info. And I'm going to put in the opening hours
inside of there. Come on, phone
number and address. There we go. Then turn that map
info into a grid. I'm going to have three columns. I'm going to have no
rows. There we go. Now as you can see,
everything works as it should and it fits
inside really nicely. And it wraps quite nicely. And it gives me this padding at the bottom because I don't
have one for my map, but I think it works quite well. So when I switch it
over right here, it still works, but not
on the smallest size. So perhaps we can fix that
on the smallest size. Somewhere around here,
it starts breaking, but we will deal with
that in just a moment. But basically for our
map, that's basically it. So back to instance, this is now fixed. And finally for our footer, Let's deal with
the footer itself. I think that this works quite
fine even at this scale. Even at this scale. Perhaps, maybe
somewhere around here. So maybe here on the phone size, what we can do is break
it up a little bit. So select the footer, hit Enter. Remember this is
going to propagate the change throughout
our design. So let's switch over to our footer wrapper
because this is a grid. We can hit Edit to grid. And what we can do right
here is perhaps, let's see, maybe we can add
additional row like that. And maybe we can get rid of
one column. There you go. So now we just have, now let's have, let's have two columns just
for the sake of it. What I'm going to do next
is coming right here and adjust my social
icons to here. This is going to propagate. Let's adjust it to here. And here I'm going to put
it to be in the center. Use my social icons, make sure they are
in the center. There we go. This is in
the center by default. And what I can do is adjust these changes
because you can see we are at 64 margin,
top and bottom. Too much in my opinion. So we can maybe lower it down
to maybe 32 or something. 33. Let's go with 30 to manually because it won't listen to me. 32. Lovely. And here what
we can do is maybe use our social icons footer and
make that additional change. Let's see. Our links. Don't have any values. So here we can say
something like 32, I think, or 24, maybe. There we go. Finally, a logo footer just has the padding on the left-hand
side for whatever reason, let's reduce that to zero. And that padding, Let's see. Yeah, I think that's fine. I think we're just going
to leave it like this. So when I check on my tablet, they are still like
this and I can scroll down to the
lowest possible size. Then when I click right
here and start scrolling, you can see that it keeps
there and you can see the different devices
right here on the side. So let me hide
myself just so you can see that a
little bit better. So here are, when
I start scrolling, you can see one plus three
Kindle Fire Galaxy Note. When we stop and start
scrolling right around here, it's going to show
me new devices. So Kindle Fire Galaxy Tab
to when I start moving up, Surface Pro Tools, Surface Pro. So when I walk here, you can see all sorts of
iPads and Microsoft surface. So those are all of your sizes. And same story goes
for the phone. Somewhere around here you can see Nintendo
Entertainment System. This is iPhone SE, Phi of
S and earlier iPod touch. So really, really small devices. And when it starts crawling up, you can see all these diamonds
at the bottom right here. You can see them appearing and showing me all of these values. So once again, tablet
version is basically done. So when I go right
here at the top, navigation still works because we fixed it from the day one. And this hover effect will
not be visible anyways, because you're going to use
your tab in the first place. Here we don't need a
hover, but once again, it won't be visible because it won't
react to your finger. Here. What we can do is because
everything is kinda, yeah, let's just keep
this texts where it is. But perhaps extend
this paragraph to fill in the space.
So how to do that? Click on your paragraph. And let's go with
a width of 100%. Or we will have to,
I think adjusted manually for whatever reasons. So let's go there. Yeah, there you go. Sometimes it will
work quite fine. Other times you will have
to adjust it manually, but you can see how
super simple this is. And now when I start scrolling, it's going to actually crop in that paragraph
and it's going to adjust it as you can see so it fits in the available
space that I have. But I first have to adjust
it manually because it's really important that
your users don't get, don't get the ice train. Which means if the
rows are two great, they're going to be
really tired really soon. So one final thing I want to do right here for the spacing is I don't think that
we need too much spacing right here.
So here it's fine. Here, maybe it's fine. So let's see how much
we've got right here. So we're wrapper container
section, we have 200. So maybe we can have 200, maybe 150, something like that. And here on this section
maybe we can also have 150. Just so that we can narrow down our sections a little bit. Here on this section, we can also have 150 like that. I'm not really a big fan
of this layout for now, but maybe what we can do here is do the same like we did
with our paragraphs. So simply extend the texts. Something like this. You see if the text is
centered, it's not. So that is the problem. So let's go back and select our text block and
I'm going to give it a separate class
what this is, offer, offer centered like that. And I'm just going to center it. And here on this one, I'm going to go with
offer centered. Make sure it's centered. There we go, and
here offer centered. And now when I start scaling
on these smaller sizes, It's going to fill in
that remaining space. And it's actually going to
space the text really nicely. You can see how it
works right here. One final thing I can do is
perhaps make, Let's see, the software warranty
doesn't have any width. So perhaps this text-block can have a width
of 100 per cent. Let's see if that
works. It doesn't. What you can also do is
cap it at something which is called CH, which
is character. So if we go with 60 CAH, It's just going to extend
it so it doesn't work. You have to manually adjusted here, but
it doesn't matter. I think it still works fine. What I might want
to do is adjust the spacing here you can see
at the bottom we have 32, offer warranty, we have 32. So maybe I can adjust that to improve my readability a little
bit so I can go with 40. Think I select my offer
maintenance, click right here, go with 40 and offer loans. It doesn't have any, but it still has plenty of
room right here. Benefits. Everything looks fine. Maybe I can do the
same right here, but I think it's readable. I think it's legible. This look fine. This looks fine. Perhaps we can maybe add some additional
padding right here, but let's deal with that margin. So here on this section
margin is 150, That's great. Let's move on to
the next section. Margins to 100. So let's move on to 150. And finally Contact Us form, if I click inside, Let's go to 150 and remember it's going to
adjust that for every page. Go to the map and
adjust their 2150. And finally, go to my footer, hit Enter and adjust
that to 150 as well. One final thing I
want to do right here is I want to go here to the map. And here I want to make this adjustment and to push
this down a little bit. So maybe I can go with 40. There you go. And this
H2 dark who we are centered or where
we are centered, maybe I can go with 40
as well. There we go. So now this is nice
and centered and we have just a little bit more
breathing room down below. What I can do with two
map is I can maybe kept the height to 450 or something, not 150, but for 50. There you go. I think it looks much better
on a smaller screen sizes. And then you can also go down for here maybe for 50
doesn't really work. All that great. So when I click inside, select my map, maybe 350. There you go. I think
that works much better. When I go to the
smallest possible size. Maybe right here, I can
go with 250. There we go. And I think that
works quite nice. So there we go. Our tablet is basically completed
for our homepage. What we can do next is
we can perhaps go to the next page for the cars
and fix that right away. So this basically
works like it should. All I want to do is maybe adjust the positioning
of this circle. So I'm just clicking
in the corner, dragging it down a little bit. And I think this is
quite alright so far. Yeah. So it's good for
this exclusive collection. What we can do, Let's adjust it. So first things first
for this section. What we have in the container is we don't have any
pairing, which is great. So we're just going to
leave it like that. We don't have any any margin. But here for this one, I want to keep it at 01:20, maybe something like that, or maybe 150, but not, not more than that. And finally for this are
exclusive collections section. But remember we have that grid inside of the car
collection list. So what I'm going to do
is we have eight cars. I'm going to hit right here. And instead of these, what I can do is
Let's say columns, I'm going to get rid of these and just keep
two columns for now. So you can see that now we have two columns and I
think plenty of details at 768, which is great. Plenty of details.
You can tap on it, you can touch it,
you can do whatever. Contact Us form. When I go inside, it still has 150. But here I have
that bottom margin. So perhaps here what we can
do is select this section. Let's see where the
margin is coming from. Let's see Car Collection
list wrapper. Here we have the margin of 64, so let's get rid of that
margin, go down to zero. And now we have that
spaced fixed quite nicely, which I think works quite well. And here you can see all of
those changes that we made. Everything works as it
should, including the nav. So that's good. We don't have to do really
anything right here. Let's now go to the loan speech and see
how that looks like. So what we can do right here, because remember we had
these cars in a grid. I'll just keep them like this. I want do editing basically. I won't touch them out. I'm just going to keep them. And I want him to
scale like it is, to resemble a single image. So let's just leave
it like it is. For this next section, what I'm going to do
is adjust this to be 150, maybe the one-twenty. Because now we
have enough space, then what I'm going to do
is jump inside of here. Remember we have that
grid for loans, benefits. I'm going to click right here. I simply add two
more rows like that. I'm going to get rid
of these columns. It's going to fill
in the content, everything looks as it should. And let's just adjust the
spacing a little bit so the spacing between
rows, Let's go with 32. I think that works quite well, and it's going to scale quite nicely on every single size. As you can see, it's going
to fill in that information. What we can possibly do is on the smallest sizes you can see it pushes the text to the left. So what I can do right here
is selected P gray and add a combo class of
centered. There we go. And I'm just going to
center my text like this. And I'm going to add that
combo class to all of these. So simply select Add
centered. There we go. And now when I start scaling, you can see that it
scales from the center and it doesn't align
to the left-hand side, so everything works as
expected and as it should. We already did this
section previously. Maybe what we can do
right here is have a little bit more breathing room because we have
these images down. So remember we added 64. Let's go with 80 on this case. I think that's fine. And let's see if we have any
additional pairing here. I don't think we do. So wrapper doesn't have any
container, doesn't have any. On the bottom section doesn't
have any, so that's fine. Contact Us is fine. There we go. And final page that
I want to touch upon in this video is contactus. So let's deal with that because
we're already 27 min in. So for contact us,
there's really not much to do around here because everything is already
set up how it should. So here we have showroom image. You can adjust the
size if you want to, but I'm not going
to bother here. This is at 01:50, so I'm going to
leave it at that. So if I hit Enter,
you can see 150. Maybe we can add the combo class here and
adjust this a little bit, but I'm not going
to really bother. You can go into negative margin with this one and the size, but I don't think
it's necessary. I think this looks quite right. One final thing I want
to touch upon for the tablet is actually
let's deal with the CMS, with the cars template. So here what we can do is we can actually position
this to be down. So let's close all
of this like this. So we have car information
and we have car Action Card. And this is what we
plan for initially. So when I select my container, you can see that
we have a flexbox. So when I hit vertical, it's going to push that card
all the way down at the end. So what I can do is hit
centered right here, or I can keep it to the left. I can use my car information
and use the width. You can see it's 65 per cent. I can go with 100%. There we go, and
it's going to fill in that remaining space. My layout is going
to be consistent, but now we have the
issue with our card. Here. I'm going to type in
100 per cent as well. It's going to fill
in that information. I'm going to use this button. What I can do perhaps, is maybe give it a margin of, let's say, 40 or something
for this tablet dimension. And I want to keep this
layout looking left. Here, what we need is
the position is static. It's not really sticky anymore, like it was right here. So once again, you can see
that it stays right here. It stays what we want. And on a tablet is just going to push this content
all the way down. This scaled nicely so we
don't have to worry about it. We have three cars,
That's great. This scale, this scale, so everything is as it should
and as we want it to be. One final thing I
want to do is select my car auction card content. Come right here and add
a margin of 64, e.g. and I think not the content, sorry, but car Action Card. Come right here to the
top 64. There we go. And now we have that separation. 64 is maybe too much. So let's go with
32.32 works fine. I think in this particular case, in terms of these images, what we can do is we
can maybe select this. And let's see, because
this is a collection list. I can go to the collection
list and hide it. Now when I hit preview, Let's see if it works. It does. So it's still hidden, but it still shows me all
of these different images. And I can still use my
arrows left and right, scroll between all
of my eight images, which is actually what I wanted. So see you all images when
you use a stop there, it's going to take
them to this page. So I think that is fantastic
things for our layout. And everything works
great all the way up to really small sizes
which you are going to deal in the next video. But basically for the tablet and the majority of the time here in the mobile portrait mode, everything works as it should. We'll just then adjust
this a little bit later and adjust this and
adjust all of these things. But for now, everything works as it should, including this, except on really,
really small, small, small sizes, which we are going
to deal in just a moment. So you can see right here. So when I'm on a desktop, we have three cards. Immediately when I
switched to doublet, we now have just one
card and it works all the way down to the
smallest possible sizes. But we're going to
deal with them in just a moment. So there we go. That's our responsive. Everything is as expected, everything works as expected. So in the next video where
we can do is perhaps tackle this mobile portrait and
mobile landscape sizes. Because there are some
additional breakpoints and some tips I can give
you for those sizes. But we already did
majority of the work, so it's going to be just fine except for the mobile
portrait when we actually need to start making some changes to our font sizes. So I'll see you there.
189. Responsive Mobile Landscape: Let's now work on our
phone responsive sizes. So when I go right here, tablet we already did. And when we go to phone, we can go and start adjusting
some of these things. So inside of the landscape, I think all of this
works fine, but perhaps, maybe I can start
making changes here, but I want, I want to make
some additional changes here. So let's first get
started with this. Let's see what we
have right here. So perhaps we can start making some changes inside of here. So maybe this section should
have a smaller margin. So let's go with 100. See how that looks. I think that's fine.
So maybe we can just keep all of our sections at 100. For the consistency sake. I think that's good. Benefits. 100, there we go. Size is good and valid
Contact Us form. What I can do right here is
presenter jump into 100. Remember it's going to propagate
throughout our design. Let's go to here, Enter type in 100 here we
already have that as a setup. Andrew already adjusted
the size of this map. So when I go inside of here, finally, let's go to 100. There we go back to instance. And I think everything works
fine up to a point here, but we're going to fix
that in the next size. But for now I think
everything looks fine on a home screen
except for right here. So perhaps, maybe I can start making some changes right here. So here we're here, 1s centered. And I can give you the combo
class of, let's say phone. Here. What I can do is start
making some changes. So for the H1, I can call
right here instead of 64, maybe I can go with 56, see how that looks like. Or maybe 48. 48 looks good here
for this image. What I can do, if you remember, if we go all the way to here, we have fixed width and height. So maybe we can adjust that. And let's go with
width of something smaller like for when
t, something like that. And we can manually
adjust these two, something like this and this
to something like this. And then we can manually adjust them further, move them down, select this one,
and move it up a little bit to something
like this. There we go. Finally, what I can do for this particular section is instead of one-fifth,
Let's go with 100. N is going to work
out just fine. Same like all of
these other ones. So here inside of the phone, the phone or landscape, you can see how that looks like. This is great, this is great. Let's narrow it down
to the smallest one. I think that's good. There we go. So that looks good. So inside of the biggest
phones landscape, even then, this
works quite well. So when I hit preview
and narrow it down, so all of it looks quite okay. So I think that's good. And let's go back to here and let's adjust some of
these other pages. So let's go to cars and see
what we have right there. So first things first,
let's adjust this circle. Narrow it down a
little bit to see how that looks
like. This is fine. So let's keep the
circle where it is. This H1 centered. Looks good. Let's see this
exclusive collection. First of all, for this section, we're going to keep it as it is. But for this section
we're going to go to 100 jumping sides of our healer released wrapper and our collection list
because that's our grid, hit Edit grid. And I'm going to get
rid of my columns. So just have one
column hit there. Because this is cars. It should display
all eight cars. So let's simply count them. 12345678. There we go. So that works like a charm. Contact Us is good because
we already set it. This is good. This is good. So now this page is completed. You can see how simple
this is. Go to loans. As I mentioned, I'm going
to keep this as it is. But here I'm going
to have that class. Let's quickly go to the homepage and see what we did for the
H one right here. So we have the phone class
H1 hero centered phone. So let's go to the lungs. Select this one. Let's see H1 centered. Let me see what I can do here. So let me go back to home. And start exploring
a little bit. So here we have a
centered phone, and for the phone, we adjust it to be 48.86. In this case, I don't
think we need a T6, so we can lowered it
down to maybe 56. Now, maybe 64. Let's see. What we can do. I don't know. 70 to 72 works fine. So 48, 72, That's great. Let's go to lungs. And let's give this H one. See, it's already 38. So let's see, maybe we
can give you that 48. This can be 60, 72. There we go. I think that will
work quite fine for these smallest sizes
until we reach this size. So then we're going
to change it. So here it works well. Here for these images, maybe we can add a bit of breathing room, so maybe 40 pixels,
something like that. I think that will work
quite fine for this one. Let's lower it down to 100.
We already fixed that. So it works just well
for this section. Instead of 200,
let's go with 100, which is going to
grow just fine. And here what we can do is
maybe start centering these. So perhaps at this size, maybe we can center it, centered this one and center
our paragraph as well. Let's see if that change. Yeah, You can see it
didn't affect this change, which is what I
was talking about. You can see in the tablet, it only affected
this break point because that's when we started
messing around with it. So all of this works. Well, looks great. If we now go to the
Contact Us page. We don't really have to
change anything here. Everything is done for us. And finally, let's go to the course template and let's see what we
can do right here. So here, Let's just
leave it at this stage. I think this works. Okay. It's not fantastic,
but it works. Okay. You can see it's 480 pixels, so we are going
to change it here because it does
break down a lot. So here what we will do is maybe we can leave all of this. Yeah, I'm going to
actually leave all of it like it is because
it's inside of a grid. And what I can do here
in this case is maybe, maybe I can adjust
this or something. So let's see, because
this is inside of a container which is called
car auction card content. So maybe we can start
playing around with these a little bit or now let's just keep them at
the smallest size. Let's just leave it
like it is right here. Or perhaps, maybe I can
position this in the center. Let's see how it looks like. So this is in a center and this let's turn it
into a flexbox, make sure everything
is centered. And now you can see the
problem we have right here. So if I position this in the center and
this in the center, it won't work properly. So what I can do
for this button is maybe I can give
it a width of 80%. Let's see, and center
the text inside. Then use this button, give it a width of 80 per cent, and center the
text inside of it. And see what I can
do here. So no. Let's see if this fixes. It doesn't. Yeah, you can see
what's the issue? I have a margin right here, so let's get rid of that margin. And now these are centered in
here for the current label, what I can do is I
have a margin here, so I can get rid of it. And this car Action Card. Actually, let's see, let's
see what we can do here. Maybe I can know. Maybe I can put this, make sure my content
is in the center. Let's see if we set to auto on this side and set
to auto on this side, it's going to push that
content in the center. But now what I want to do is perhaps to adjust this content, but I'm afraid it's going
to break the width of it. So let's just keep
it where it is. And here what I'm going to do
is perhaps add a bit more. Breathing room. May be 40 or 20. Maybe 20 here as well. Let's see. 20. No,
because this has 24. Let's go here with 24 as well. And here for a margin top, we don't really need it, so I think that's going
to work out just fine. There we go. And now finally, let's deal
with this last section, which is this one,
and let's adjust it to be 100. And there you go. We have finished designing and changing for the
mobile landscape. In the next video, we're going to tackle mobile portraits. So I'll see you there.
190. Responsive Mobile Portrait: Alright, so finally, let's
deal with the mobile portrait. So I'm on the homepage. I'm going to click right there. And first things first,
let's adjust this. So here what I'm going to do is reduce the size for a lot. Maybe 32. Let's see
how that looks like. And this can be 48. Maybe. That's fine. This is
fine, this is fine, but the image is not
fine. Hero image. What we can do in this
case is for a width, I can hold my shift key and
bottom arrow, as you can see, it's going to narrow
it down to maybe 270. I think that's going
to work just fine. This we can scale down this, we can scale down like a lot. And what we can
do is hit that to auto and make sure to
position it right here, but adjust it right around here. There we go. There
we go and maybe adjust this a little bit
to somewhere around here. I think that's going
to work out just fine. When I scale even to the
smallest possible sizes, you're still going to be able to see it at
least a little bit. So maybe something like this will work out a
little bit better. So when I come to
the smallest size, you can see how that looks like. So finally, hero image. And what we can do is, let's see, height
is not something. Let's set the height to auto. Something like that. And I'm just going to fix this now and bring it
all the way down. As the width scales, height is going to
scale automatically. That's what I want
for the sizes. There you go. So this is a smallest
possible size. This is our largest size. So maybe we can even go
down with a width to something like
this. There we go. So we're gonna go to
the largest size. Let's see what we can do. Maybe that's not
the right solution. So for my image, I'm going to scale
it right here. Let's see. It only has a width. So if I go to 100
per cent like that, that should hopefully
fix the issue. Or even 80%. Maybe we can go with hero image. Maybe we can include
the padding of, let's say ten pixels. So that's going to stop
it from going outside. There we go. And I think that fixed
the issue quite nicely. Here what we can do is we
can just leave it as it is. We have a margin of 100, which I think is quite large. But it doesn't matter. We can just leave it like there. In terms of this button, what we can do is we can maybe set some heights at
some widths or something. So let's go with
minimum height of maybe 50 pixels,
something like that. So it's always going to keep that 50 pixel of minimum height. And inside I'm going
to center my text. So no matter what's going on, It's always going to scale like this, something like that. So it's not too small and
not two, nuts too crowded. This works out just fine
except for the text. Let's center it like that. And when you start scaling, everything is going to
work out just fine. Perhaps these spacings, we don't need them
to be this big. So here we have 64, maybe
we can go down to 40. And in terms of the entire
section, we have 100s. So let's just keep it that way. I think that works well. This works well on all sizes, so we don't really have
to do anything much. Here. There you go. This button, minimum height 50. So it is going to inherit that styling
that we already set. That's fine. All of this works
fine, imagery works fine. This works fine.
Remember, this is such a small device, 240 pixels. So this is really, really, Let's see what this is. So Nintendo
Entertainment System, N E S. So let's see. Maybe go to something like an S. Yeah, so that's this. That's this. This is the size that we are
designing for right here. So just remember, don't
pay too much attention to these extremely small sizes and nobody is really using them. But for whatever
reason, bad or worse, we can still adjust it and
make changes if needed. What I want to do right here, because this works as it should. I want to adjust this. So go inside of my map here, remember we included that grid. So I'm going to go
where we are rapper, where we are content, lovely. And here we have
our map in four. I'm going to hit right there. And I'm going to adjust
it at three rows, like so, and add just
one column. There we go. Now that fixed debt
and for the map in, for what I can do is add a
bottom margin of 40 maybe, just so I can push this
text down a little bit. So when I scale
all the way down, everything works as it should. Finally, for the footer, Let's adjust and make some
changes there as well. What I can do is hit
Enter right here. So even on the smallest, smallest sizes, this works. But let me just
take these links. And what I can do because
they are a grid child. I can maybe turn them
into a flexbox here. Turn on vertical, make
sure they are centered. And now this works no matter
which size you are in. Everything scales
really nicely like so. No matter the size
that you are in. Now that that works, what we can do is
go to another page, which is cars in this case. This works as it should, all the way down to
smallest possible size except for this one. So what we can do
here in this case is lowered that down 32. And this 248. There we go. Or maybe even more, but I don't think
that it's necessary. Let's just keep it where it is. So this 32, 32, so it just inherits that. What do we can do
in this case is we can lower down the
circle a little bit, but I don't think
that's necessary. I even think that it adds
to a charm a little bit. So everything works even on the smallest sizes,
which is great. Form works great. This works great.
Except for here. Let's see where we
go all the way down. What we can do is
may be centered this information. What
do you guys think? So If I hit right here, being the address and
center the content inside, use the phone number
column right here. Center the content inside, come right here,
center the content. Now when I start scaling, it, kind of looks okay, except for this one. Now, let's just keep it left. Let's just keep it aligned left. I don't want it to work
too hard in this case, because this is longer content, this shorter content and the centering of it might look
a bit weird in this case. So let's just keep
it like that because it does wrap around down nicely. Let's go back to instance. Let's go to our loans page. See where we are right here. I don't think that the changes necessary
here perhaps here what we can do is change this to 30 to it already is at 32. So that's good. Everything works as it should be
already set up debt. This works quite well. This works well, Contact Us. All of it works well, except for these two. So what we can do
is we can set some, you can see the maximum
width is 100 per cent. So what I can do is, let's say minimum width
of maybe 50 pixels. Use this one, minimum
width of 50 pixels, so it won't go down below
50 pixels in width. And you can see how
that looks like. So maybe 50 is too much. Maybe we can go with 20
pixels and 20 pixels. Something like that. Let's see. Yeah, So it kinda starts falling
apart right around here. So you can see iPhone
mini, 13 mini. So below that somewhere
around here, so 310 pixels. So what we can do is adjusted
maybe minimum width of ten pixels like that. And I'm going to
get rid of this. So let's go to here. Maximum widths. Let's say, I don't know 100%
here or maybe 100 pixels. Yeah, let's go with 250. That's a max-width. And this is max
width of 250 pixels. Lovely. So now when
I start scaling, it's going to scale down. Let's go with a width of 250. This can be to 50 deaths. And now when I start scaling, it all looks the same. So let's try 150. See what that does on these smallest possible
sizes like that. Yeah, I think 150 works better because it still
shows the image and it keeps the positioning of them where we wanted them to be. And instead of a minimum
width of ten pixels, I can go with minimum width of maybe 80 pixels or something. So just so it's not too small. 80 pixels, and there we go. So now that's completed.
This is fine. This is all fine. We have that contact us page
Let's quickly go over debt. So let's see, we
don't have to make any changes here.
All of it is fine. And finally, let's go to the course template and see what we can change right here. So first things first,
we have to adjust this because it keeps breaking. So what I can do in this case, remember we have
that bottom padding on each of these
backgrounds is I can adjust the spacing
for my rows so I can go with either 24
or something like that. So what I'm going to do is I'm going to
break it into two. So we will have 2468 into two. So we'll have four
different rows like that. And we're going to have two
different columns like that. There we go. And for
whatever reason, it didn't respect it that. So let's keep that like or view. We have the pairing. Let's see car overview. Maybe we can push
in that pairing and see what happens.
Not much really. So maybe try with
a margin not much. So then what we can do is
perhaps extend this down. So perhaps we will
need some height because we are capped with
maximum height of 196. What we can do is go with something like 500 or something, and then try to increase
this. There we go. So let's go with
32 here as well. Now when I start scaling, it works all the way
out to the smallest, smallest sizes to somewhere
around here maybe. So what this is, once
again, that Nintendo thing. So somewhere around
here still works. So I'm just going to
keep this layout. I'm not going to worry
about it too much. What do we can do actually
is inside of here, which is going to
give us a little bit more breathing room, is I'm going to reduce
this gap to 24. So what that's going
to allow me to do is it's going to be much closer even on this smallest
sizes, something like this. So we are called
description works well. Vehicles specification does not. So let's change that. So let's go to the
specification description. That's good. This specific cation. Now let's see where
we are. So here we will adjust because
we have six of them. Let's see what we
can do right here. Maybe we can adjust
the width of these, something like 0.75 FOR 0.754. And I'm going to reduce
this to 24. There you go. So now the fractions of these columns are
actually much narrower. So you can see that the content is going
to stick much better. Or if you don't
want to see that, what you can do is come
right here and simply get rid of one column and
it's going to push them down. So I need six of them in total. So 123, there we go. And this one FR, is going to be, let's say one FOR like that. And now we have the full content width layout and we're just
going to keep it like this. So just get rid of the second
column and just stick with one column for the
safety same story. So let's see what we can do. We can get through
the warm column and let's see how many we need. So we need 123451 FR. So 12345, lovely, hit, Done. And because it's text is just going to scale
really nicely. We're going to do
the same right here. So just be really quick witted. Get rid of this one. At how many we need. Lively. Move on to the next one, which is the exterior. Get rid of this one. Add the new ones in here too. Okay. Move on to the interior. Same story. So just make sure you are at one FR,
for the width. Because that way everything
is going to fit in quite nicely and do
the same right here. Let's see rows
123. That's great. Now everything is going to
scale a much more nicer and look much more
coherent, natural in here. Finally, for discard
what we have is on the really extreme smallest
possible sizes we have this. So let's see for the
text inside of here, it's centered, here,
it's centered. So what I can do is because it's inheriting that 50 pixel, I can even add the combo class, which I'm not going
to do because I'm really happy with this
layout, how it looks like. I think this is fine
because who really uses something
below these sizes? Something like this iPhone
SE Phi of S in earlier. I don't think that somebody
uses something that's small. So here we have our collection works fine,
everything works fine. And that's basically it. That's our responsive
design completed. And in the next lesson
we're actually going to start and tackle
some animations. So I'm going to
show you how to set up so many patients how to
play around with animations. I'm going to explain
how animations work inside of Webflow and what you should think about
when you're creating these animations in Webflow.
191. Animations in Webflow: In this video, we're going
to tackle animation, but I just want to show you the little error which
I made previously. So if I take it back
to Webflow right here, what I did previously is I tried to lower down the size
of these images here. But what I can do is
add separate classes and then adjust the
width and height here. That is going to keep
those sizes consistent. So no matter what I am doing right here
throughout my design, is going to keep
them consistent. So let me actually show
you that right here. So let's do something like Hiro, hiro, key, image
phone right here. So when I adjust the width and height to maybe
metronome 80 pixels, let's see what that does. And height of 80 pixels. Because I am on that phone, it should not propagate to here. So you can see what it does. And same story here. So if I go to get rid of
this one, remove class, and let's go with
Hero warranty phone. Now let's go with
width of 80 pixels, height of 80 pixels. And it's going to propagate
nicely and it's going to keep the same consistency that
we set it out to be. Here. Maybe I can move
this a little bit, maybe roughly around here
so you can see how this gets tedious from time to time when you play around
with these elements. So I think that that works fine. Now finally, the whole point of this video is the
animation in Webflow. And the animation can be
really complex sometimes, but it doesn't have to be. You can make it as simple
as you want it to be. So what we want right here
is if I switch to animation, you can see that we have
element trigger and we have the page trigger based trigger is you can see right
here what it does. It just triggers the
entire page once it loads. And the elements
trigger is going to trigger that element itself. So let's switch over to here. And let me pin this right here. So it stays consistent. So here we have
this hero content. So what I'm going to do is
for the elements trigger, I'm going to click this Plus. And you already have some
prepared animations and then you have some animations which you have to
prepare yourself. So here you can see when
I hit em and trigger, you can see mouse click or tap. What happens then? Mouse hover, which is
what we already have basically when we hover
over with our button, you can see what we have. Then you have mouse
move over element. So when I move my
mouse, what happens? You can set and you have millions of different
examples online. I purposely wanted
to discourse to be as straightforward
as possible, but once again,
complex as possible. But the adjustable for everybody and I'm not
going to tackle too much, but you can go to award.com
with three w. So a www.com. And you can see all sorts of different animations like that. When you hover, you
have these gradients which are moving
in the background. You can follow my YouTube
channel Alex on design, where in the future I'm going to tackle these tutorials are lot, because a lot of designers
are asking for them, so we're not going to talk
too much about it now. Scroll into view. So what happens when this
element scrolls into view? That's what we're going to do. And while scrolling into
view, what happens then? We have navbar opens.
What happens then? Dropped down open step
change, slide of change. So all of these things. So let's go with, let's say Page trigger. Let's see what we have there. So mouse move in viewport
while page is scrolling, page loads and page scrolled. I'm going to hit right here for the element trigger and
type in scroll into view. And what I can do right here
is I can select the action. And you can see
that I'm selecting just this hero content. So my action will be slide. I'm going to slide
in from the left. My offset is going to be
something like eight maybe, and delay may be off three milliseconds
or something like that. When I hit preview, you can
see how that looks like. So 8.3 and I'm going to
select my hero image, and I'm going to do
exactly the same. So scroll into view. Slides instead from the left, I'm going to choose
from the right. And I'm going to say something
like eight and maybe five. So it's going to be
just a tiny bit slower. So you can see how
that looks like. I'm gonna hit Preview. You
can see how that looks like. So when we go back, let's now deal with
this entire section. And what we can do is we can scroll into view,
select an action. I'm going to choose a slide. From the bottom. There you go. Offset. Let's
go with eight and delay. Let's go with ten
milliseconds this time. So when I hit preview, you can see that it's
called interview because it was just a tiny
bit above the fold. So let's now deal
with this section when it's crawls into view. I'm going to do the same. But maybe we can feed e.g. so appear and disappear. So maybe we can fade
offset of eight, delay of maybe ten. And let's see what that does. So we just have fade
in or fade out. And you can also change
when scroll out of you. We can also start fade, Fade Out offset of
eight, delay of ten. So let's see what
all of that does. Let's scroll all
the way to the top. So here we have this,
then we have this. So maybe you're
scrolling into view and scrolling out of the view. You cannot even see it because
it's already faded out. So that's basically what I want. But maybe we can set this
offset to be zero milliseconds. And maybe this can be, I don't know, 3% or
something like that. So when I go somewhere
around here, fades in and fades out
roughly around here. So you can even reduce
that offset completely. Go back to zero and see what
that does right around here. So I think that's fine. And finally, what I wanted
to show you is this. So we can make these
triggers settings. This is basically so you can tackle either elements
or the class. So I can tackle the class. So you can see
exclusive collection, that's my section, section
exclusive collection. I'm going to tackle
the entire class. And I'm not going to
load this animation on tablet, landscape
and portrait. Why? Because I want for people to save their Internet connection, maybe on the tablets. Let's keep it on a tablet, but not on phone, landscape and portrait,
which is just going to make our website a little
bit faster when it loads. You can do the same
with this one. So I can get rid of it
from here and here. And for this main one, I will actually keep it inside just for the sake of it here what we can do is maybe we can do something a
little bit different. So we have our offer of wrapper, then we have content and we have this image for in
first things first, because we are on a desktop, What we can do is give
this image a name, so we can rename this class
and we can call it our offer, IMG, just so that
we know what it is. We can go to animation
and the element trigger. And we can do while
scrolling in view action. And then we can get
rid of these ones. So you can select an action
play scroll animation while scrolling in view, animation boundaries are
this when element is fully invisible and when an
element is fully visible. So you can even adjust the debt. So you can add offset, you can start exiting. So starts exiting. And you can add a
little bit of upset, maybe something like 20 per
cent, something like this. There we go. What we can do is we
don't have any animation, so we have to start
an animation. So this is going to be our offer animation or our
offer image animation. There we go. So at zero per cent, we are going to say, let's say opacity,
which is going to be something like zero per cent. There we go. And here, let me get rid of myself just so you
can see what I'm doing. So I just reduce the opacity
here at 0% and easing, I'm going to set up
two in, out quad. There you go. That's at 0%. So when I hit the live
preview and when I go to something like six per cent, I'm going to style
opacity once again. And it's going to be at 100%, and this is going
to be in, out quad. So you can see how
that looks like. So when I start scrolling,
it's going to be here. And when I move out of the way, it's going to
disappear completely. So perhaps six per
cent is a bit less. So let's move it down
to maybe 20 per cent. So when it starts scrolling, you can see it easily appearing maybe roughly around 40
per cent or something. There you go. Or maybe even go to 80. Let's see what that does. Not much, so it's at 100 here. So maybe we can set one
more and give it opacity here at maybe 40%,
something like that. So when we start scrolling here, and then here, hit Save. Let's hit preview and
see what that does. There we go. So you can see
it's really slide. You can see it right
here at the bottom. Really slight fade in, like so. And you can also make the
changes to the fade out. What I want for this
particular section or offer content is I just want
it to move into place. So scroll into view. Action, maybe fade
into view, fading. Offset, maybe I can set it to maybe five and delay
maybe ten milliseconds, something like that. So when I hit right here, you can see it appearing so it's just slight delay like that, so fades into view. And when scroll out of the view, what you can do is fate, once again just faded out. And I don't want it
to do any offset, so let's test it out, see how that looks
like a fade in. And when it goes out
to the way it's going to fade out. This one. What do we can do is maybe, I don't know, maybe we
can keep dislike it is, but maybe I can just use this benefits elements
trigger scroll into view. I can slide from the bottom. There we go. And I can maybe move a
little bit of offset and a bit of a delay,
something like this. Let's see if a huge delay makes any difference. Yes, it does. As you can see. You can see how that looks like. So when I click one
more time, There we go. So huge delay coming into place. So something like 460. I think it works just fine. In terms of the contact form, what we can do is we can
do the same elements trigger it's going to propagate
throughout our design. So hit enter so we can edit it. Elements trigger, we're going
to go scroll into view. And I can go slide and delay. Maybe let's go with 350
milliseconds. There we go. Instead from the left, I'm going to go from the bottom. Offset, maybe five, just so that we can have
at least something. And let's hit Preview
and sleep what we do. So benefits. And you can see the form. And we're going to do the
same for this and our footer. So let's see Map, Kit enter the same
scroll into view. And I can go with something like slides from the bottom, 400. And this can be at five. There we go. And I'm
not going to show it on mobile and portrait. There we go, back
to instance and I'm going to do
the same for here. So click on your animation and simply remove it from
here once again, just for the sake of speed, do the same for the footer. For the folder,
scroll into view. Without these, what I can
do is maybe let's see, we can fly, we can drop, we can do all these
things. Maybe fade. Let's go with 400. And this can be five. Fade in. There we go. Now let's go back to instance. Let's, let's go back to the top. Hit preview. These
to pop into place. This still works all fine. So when I come right here, this is going to fade in. This is going to fade in. This is going to fade in. You can see how late
these sections are, which is what we wanted
in the first place. And that's great. So
homepage is done. Let's go to the cars. So to the car is what we
can do is perhaps we can do a bit different animation. So this element trigger
when scroll into view is going to feed and delay
is going to be quite big. So 600 e.g. this case. And let's go with ten. And this card image
scroll into view, can slide, slide up from bottom. And let's go with
something like 100s. And this can be like five. So let's get a preview. So you can see how
that looks like. And I'm not going to show it on these two, something like that. And you can also set the
custom actions right here, or you can set the
custom Easing. But I think this is going
to work out just fine. Like so perhaps we can adjust
this a little bit further. Like cough syrup.
Maybe can be five, just so it's a bit
faster like that. And our exclusive collection
is already there. So maybe we can fade
that out as well. So this entire section scroll into view or while
scrolling interview, you can even set that so it's continuous interaction
animate while elements grows. Viewport. I'm not going to do that because we
have eight elements, so just scroll into view
will work out just fine. Let's hit fade right here, and let's go with something
like 400 milliseconds fading. There we go. Click, and there you go. So now we have these two. And we have contact us. We have this all the
way. It works fine. Perhaps for the footer, maybe we can adjust
it to be a little bit slower because it's
faster, not slower. Instead of 400, maybe 300. There we go. So now that's completed. Let's now move on to loans. And what I want to
do with the lungs is I want to do three
different animations here. So for here. But before I do
Actually sorry about that. Let's go back to cars and
let's adjust some of these. This, okay. And this is for these two. There we go and we
fixed the rest of them. So let's go to loans. And here what I'm going to
do is scroll into view. I'm going to say select
slide. From the top. There we go,
something like 100s. And then these can
slide from each side. So scroll into view, slides from right, 300. And this should be scroll into
view slides from the left, 300, something like that. And finally, let's deal
with this section below. So first things first
scroll into view. I'm going to select fate, not slide, but fate. And something like 400. It's going to be good and the offset is going to
be something like five. So let's test it out. There we go. I think that's going
to be just fine. And then for these
two, what we can do, because that's basically
our last section. We can maybe slide
this from sites like this from a side
and call it a day. They're not waste too much
time and you can of course, play around with these
elements however you want. So this, while
scrolling in view, I'm going to set the action. And first of all, let's
get rid of these ones. And before I do actually, let's see if we set
it up for these. We didn't. So let's
make sure to fix that. There we go. And the texts can stay the
same because it doesn't take too much of the bandwidth. So partners images while
scrolling in view, select the action play
scroll animation. Here what we can do
is smoothing is on 50 per cent are offered
image animation. Let's add a new one. So this is going to be partners, animation, partners image
animation like that. So at zero per cent, we are going to say, let's say opacity is
going to be at 0%. At nine per cent, it's going to be opacity at 40%. And here it's 13%. Maybe we can have
opacity be at 100% IN, OUT quad for the easing, select this one in our quad, and select this
one in, out quad. Let me scale up a little bit, hit preview and see
what we have so far. So you can see it's just
slight, slight bit of easing. Just pay attention to this
corner of your screen. There you go. So slight bit of animation and
everything works fine. And I want to push this
text from the side. So let's set it up right here. You can hit save right here and then go back to your animation. So when I select my
partner's content, it will take me right here. So here, while
scrolling you view, we can do that,
but I'm just going to use a scroll into view. And I'm going to
say something like slide because we already
used those from the right. Something like hundred
and 50 milliseconds. Maybe. Hit preview. There we go. So it looks good and
I think that's fine. And finally, what it's left
for us to do is contact us. I'm not going to
animate anything here. It's already done for me. But let's just deal
with the page of cars template and I'm not going to do too
much right here. The only thing maybe I
can mention here is this. So on animation
because you can just imagine that the
people are scrolling through left and right
through these pages and they're getting a little bit
tired of your animations, especially if you're using them recklessly in every
single section. So it can be a little bit
tedious from time to time. So therefore, in this section, all I want to do is perhaps
animated this card. Maybe just slightly, but I don't think that's
necessary either. I don't know. Maybe I can edit this entire
section. So let's see. Elements trigger,
scroll into view, action, fade, and delay
of maybe 50 milliseconds. Let's see how that looks like. There we go. So
nothing too major. Maybe I can adjust that 200
milliseconds or something just so it looks like
a page load like that. And I think that's really
all there is to it here. I want it maybe
even animated this, but let's, let's do it. For this section. Let's scroll into view, or let's say fades, 200
milliseconds fading. I think that's going
to be good enough. So when I hit preview. Coming right here, you
can see how that looks like. That's all fine. There we go. Our website animations
are finished. And of course you can go
ahead and play around with this a lot more in
a lot more detail. What I didn't mentioned is you can combine various
different elements. So let's see that I want to animate this image
for whatever reason, I can go to the element trigger. And then I can say something like while
scrolling in view, which I already showed you. And then come on scroll,
place crawl animation. I'm going to get rid of
these as already mentioned, and then I can add a
new animation here. What I didn't mention
is you can add all of these at the same time. You can also filter and
do animations on filters, you can click right here
and delete the animation. So when you go right here, scroll all the way down. Let me hide myself
so you can see it. You have these 2D
and 3D transforms. So what you can do on dose is if I show you something
like transitions, you have this opacity. So when you add hover
on opacity, e.g. so here what we have is opacity. There we go. But if I go ahead and add a
hover state to this image, I can now adjust this opacity and move it around so I can
switch to non-state. So let's see when I hit preview, you can see a slight bit
of opacity, but of course, you can adjust that and move it around and position
it however you want. So basically at, let's
say 275 milliseconds, I can adjust this to be
something like that. There we go. And I can even add a
new animation inside. So when you go to hover, says switch to the
non-state to add a transition so I
can switch there. But I don't really need
that at the moment. And I'm just going
to get rid of it. What I wanted to show you,
our 2D and 3D transforms. So what you can do is
also on hover or on load, you can change the x values. So left and right,
which are going to increase the scale via values which are
going to increase the height and Z values. You have moved, you have
scale, you have rotate, you have skew, all sorts
of different things. So you can adjust that. You have your box shadows for the background to drop shadows, you have your various filters. So you have your
pleura right here. Brightness, contrast,
hue, saturation, all sorts of different things. And you can add one to appear at certain frames and then add another one to appear
at different frames. And finally, you have
this backdrop filters, which are basically
the same as this one, but for your background, not for the image
itself in this case. So you can combine these with the basic animations which
I already showed you. And finally, what we can do is we can use the page trigger. So let's go back to
home right here. So it loads one more
time, like this. And then like this. So page trigger, page load. And we can start an animation. So now you can adjust the loading animation
for your entire load. So it happens just
on desktop e.g. and you can start
an animation time. The animations there is no. So I can click here and then
I can start animating this. So let's say home
Page animation. There we go. And here I can click right here. And then let's
say, I don't know, texts, color or size or hide
show something or whatever. Hide Show, I can select the
element which I want to hide. So let's say this one. Hide, show. And I can set that as
the initial state. And now when I start
animating down, so e.g. here at the end, I can hide show elements. I can select the element after previous session
with the delay easing. So you can choose Display. You can do all sorts of
different things right here. And you can really go in depth about animation and workflow has a great course on their Webflow
Academy on their website. So maybe you can check that out and see how that looks like. But for now, I'm just going
to leave this as it is. And I'm just going
to call it a day for these animations
because we are already 26 min in and we can really move forward another hour talking
about these animations, but just remember, whatever you create in your design
software of choice better. That's Adobe XD, figma,
sketch, whatever. You can recreate that in
Webflow and add a lot more. So transitions between pages, hover effects on elements, animations on
different elements, background animations on these different
backgrounds, e.g. here we have these circles. So maybe while in view, these circles can
animate and move around. So if I show that, maybe I can select this
one to be initial state. And then while my user is
looking at the screen, this can animate and
follow this path to here and then bounce back to
here or something like that. Maybe this car image can grow, shrink, and go back. So all sorts of different animations can be achieved right here in Webflow. But basically, this
video is going to cover just the basics
as I mentioned, because we will be here all day.
192. Publish And Code Export: There we go, we reach the
end of this Webflow built. Hopefully you've
had a lot of fun. Now, it's the time to launch this website and to
export our code. As I mentioned previously, you do have to have the paid plan in order
for you to do so. But you can still launch
to the Webflow domain, which is what we
are going to do, but you cannot export
code on a free plan. Let me show you how
to do just that. So when I hit right here
and take you right here, you have these options. So you have this Share option. So you can have your share
only link and you can copy that link and invite guest editors if you want
somebody else to edit it, you have to have your
paid plan to do this. Or you can simply copy and share this link
with your clients. So this is a great option. Same like in your design
software or choice. You can share the link and your clients can
see what you did. They can play around
with the animations. They can see the
responsive that you did. And they're going to see
this preview right here so they can even click through these different breakpoints. And they can see this animation is happening in real time, which is great for them
to give you feedback. And you can even invite them to collaborate with you on
this particular project. Here next to it, what we
have is we have export code, so it doesn't include CMS
functionality or content. You can export collection content from the
collections panel. So this is what we talked about. You can host with Webflow to
take full advantage of CMS, e-commerce form is
search features. But if you just
imagine that e.g. for this project we
didn't have CMS, we just had static pages and we want to export
something like this. This is how the code
is going to look like. So you just click
right here where you have this code icon. You have your HTML, you have your CSS,
you have your JS, which is for the animations. And finally you have your asset. So it's going to package all
of our assets really nicely. We already have
them on a desktop, but you need these
assets if you want to move this website
to another hosting. So let's say I don't want
to host with Webflow. I want to host with
hosting here or Bluehost, which I mentioned previously. This is why you need
all of these assets. What you're going to get
then is hit prepare zip. Let's go into prepare
your files into a zip folder in
about two or 3 min, depending of the
processing time, it's going to prepare
those files for you. And then you can take that zip file and
upload it directly into the root folder of your hosting already did this a
lot of times before, but most recently for my design system called
Inception design system, that page is entirely designed
and prepare it in Webflow, export it from Webflow and just upload it to
my own hosting. That page I don't
host on workflow. And that's how super
simple this is. Basically you can see the HTML, you can see inside of the body tag right
here what we have. So we have all of
these basic divs. So container a container
Navbar section, all these. So we have the hero
wrapper that we added. You can see the text right here. You can see the break
textblock Siqueiros centered, That's the class, and
that's the div name. And then we have this
in terms of CSS, what we have is we
have these margins, sections, all sorts
of different things. So you can just imagine
what we did visually. We will have to type all of
that inside of our code. That's why Webflow is awesome, because you can add
all of that inside. So you can see for the flexbox, for the aligning items, for the margin, you
have all of that thing. And in JS, you have
all of your animations that you did for
the introduction, for the loading of the pages, all sorts of different things. And here you can see that you
have this workflow license, but if you want
to get rid of it, you have to pay
that agency plan. I think that $35 a month
or something like that, which is going to
white-label your code and it's not going to
show the web flow there. Finally, I want to
show this published. So you can choose
Publish destination. You can choose to publish
on the Webflow IO link. And you can close, you can go to Advanced Options and
you can enable SSL, which is basically if you're selling anything
on your website, it just shows that secure
lock next to your browser. Minified HTML, which is just
going to shrink the code inside and make it organized
and tightly packed. Css and JS, it's going
to do the same thing. And you can use
secure frame headers, which if you hover
over right here, protects your site from
several kinds of click jacking attacks by restricting
various side can be embedded. So not everybody can embed your website into
their blocks, e.g. or something like that. So I'm just going to use this. I'm not going to
use custom domain, so you can hit
Publish to select it. Domains is going to take a few moments and when it's
ready, it's going to publish. And then you go
published successfully. And now what we can
do is we can head on over to adjust some
of our SEO Settings. And usually when I do this, I like to work and adjust
SEO at the same time. Or when adjust,
just get started. I'd like to prepare my SEO, but purposely I didn't
want to confuse you guys because not everybody is
going to care about SEO. Obviously, when you
work for yourself, you are the one who is
responsible for that unless your client hires an SEO expert. But if you want and if
you know how to do it, you can learn some basic
SEO really quickly, even on YouTube,
and simply apply that knowledge right
through your Webflow. Websites. Seo is, of course, search engine optimization
is how you help your, help Google to find, index, and optimize
your website. And the better you are at SEO and the battery
or SEO skills are to better your
client's website is going to be ranked in search. So in the next video, we're
going to tackle some SEO. And I'm just going to show
you some basic settings that everybody can do.
193. SEO Optimization: Alright, so let me now show you some SEO settings that
you can do and that everybody can do
Inside Buffalo no matter how experienced
or not you are. So when I go right
here to our site, what I can do is click right
here where it says pages. And here you have this
edit page settings. When you click right there, you've probably noticed this
when we created these pages, but this is just the
basic settings of the SEO because how you write your
code directly affects the SEO. But because we don't
write code in Webflow, we just use the pre-made
components and we just use the page builder and this structure when you're
using best practices, it obviously doesn't
matter because the best practices
are going to get you covered when it comes to SEO. But if you are just jamming elements on a page without any structure,
without using, let's say sections because
this section tells the Google indexes your site that, okay, this is the
section of this page. Inside of this section
we have the container. So I know that it contains
some elements inside. Inside of that container, we have a wrapper. So I know that the wrapper
wraps around some content. And inside of that wrapper, I said I have e.g. I don't know hero content, so I know that that's the hero that's supposed
to go to the top. Also we use that H1, H2, H3, H4, and so on and so
forth for the headings. And we purposely use H1
at the top of the page, H2 below age three below that. And then we used text blocks for the text elements and for the smallest text elements
we used paragraphs. That's all good practice to do. Because Google is going to have a much better time indexing your website
and optimizing it for a search because he's
going to understand what you are doing also for the
images that we spoke about, those alt tags, when you optimize your old texts
for every single image, which you are supposed to do. But I skipped a lot
of it purposely for this course because it will take us hours and hours on end. But you should do that for every single image
that's going to help your images be shown
in the image search. So every single
image that you do, that you upload every single
icon, every single photo. Makes sure to always use the
alt texts and to always use the descriptive text if it's necessary depending on
the image as I explained. So what we have right here, if we go all the way down, we sorted all the way up. We have homepage, so we can
have password protection, which we will not do because we don't need it at a site plan. So you can add a site
plan to unload debt. So SEO settings,
what we can do right here is how the search
result looks like. So title tag, title of the page. This is the optimal
title of the page. So what I can do right here
is called this as parlor. And here you can see how
it looks like on Google, on search, a spider,
exclusive cars. And then Meta Description. Describe the page. Optimal description length
is 155 to 300 characters. So exclusive car showroom,
exclusive car dealership. Let's just fix this. Exclusive car dealership
in the center of Belgrade. So we know that we can connect directly using the
meta description. We can connect the
map because we already did connected
using Google Maps. So it will know once again
to post us and to show us more to the people who are in Belgrade area or in survey area. Now, open graph title is
something when you are sharing your website on something like social media like Facebook,
Twitter, LinkedIn, Pinterest. So what you can do is
same as SEO title tag, same as meta
description somewhere. And somebody who shares your
page to the social media, it will be exactly
the same as this. And you can add open image URL, Open Graph image URL, which you should upload. Open Graph if you want your website to be
shared on social media. So just go to this
website and upload the image in these
dimensions of your site, you can just upload
a screenshot, e.g. and that screenshot is when
you are sharing something, let's say to Facebook
stories or Facebook post, whatever the image that it pulls from the website,
that's that image. And you can exclude this page
from site search results. And you can say search
title, same, same, same. And then finally, custom code. If you need to put in
some custom code inside of the head tag
before the body tag. You can do so right here. Usually you do this for some scripts like let's
say Google Pixel, e.g. when you're doing it your own. But here we have
direct integration, so it will pop in by itself. Or if you have some
external chat, e.g. then you're going
to put in debt. They're usually inside
of the head tag. If you're using something like Google Analytics maybe
or something like that. So what I'm going to do
is simply copy this. And he'd say right here. Then where it says
cars, parent folder, we know how it I'm going
to use this right here. Title tag says cars. So let's see. Cow cars. Yeah. Let's see. Title tag. Is this what you see on the
top of the page? So maybe we can go
with something like a spider cars, parked cars. So this is the actual URL, website.com forward slash cars. But we're just going
to show something like a spider cars maybe. So all of this is
going to be left untouched so we will
not change debt. Then we could go to the lungs. And for the loans, I can hit the same
thing right here. But maybe we can
just change this. So exclusive car dealership
in center of Belgrade. Maybe we can do something like best exclusive car loans in the center of Belgrade because it's talking
about loans. So we can talk about
a spider, cars loans. There we go, Hit Save. And finally contact us. What we can do is
go back to Pages. Click right here, contact us. What we can do is
contact as part of cars. There we go. Meta description
makes sure it's the same. Get in touch with us and
drive your dream car today. Maybe something like that. So you can see how
simple this is. An everybody can do this, but it really helps Google
indexes your images, really helps find n because this image is called
a spider showroom, as you can see right here. That's what we talked about
and you can even point that. So contact us. Maybe we can adjust
this a little bit. So get in touch with us and
maybe visit our showroom to drive your dream car or something like that
just to connect further the image and the
Meta description itself. And here what we have
is we can do this. So we can go with title tag. Maybe. I don't know, using the collection
field as needed. So maybe we can add
a field of name. There we go, meta description. We can add slug maybe, which is this orange
row or Vogue. There you go. Or you can
add additional fields. So let's see maybe, maybe the name as well. And we don't need slugs, so let's get rid of that. We can add a name. So I'm going to draw our Voc. There you go. And maybe we can have slash right here
or something like that. A spider cars as part of cars or spot exclusive cars or
something like that. So we don't want
it to be too big. Spot exclusive cars. So when it changes because
right now it's ranger or walk, when it changes later to Lamborghini hurricane
is going to still have a spotter
exclusive cars, but just have a Lamborghini
hurricane before it. And the name below, it's going to optimize as well. Use the Open Graph settings. Same, same, same. This is the same, same, same. This is the same as I mentioned. So there you go. You can see
how super simple that was. Just these few things
really helped us along optimizing the
SEO for our page. And that's basically it. That's all you can do. In just a couple of minutes. You can see it took
me just 8 min to achieve something like this
on a really basic level. But you can go really
in depth into it. When it comes to general, what I would recommend is, as I mentioned,
upload the Fab Icon, upload the web clip. You can set the time zone, make sure to do just that. Then we have the hosting. If you want to hold right here, you have to purchase the plan. As we mentioned, we
have the editors. So who is going to be your
editor can edit and publish. Then we have billing,
we have SEO, so we can adjust that. So indexing, I
don't want it to be indexed because this is the
practice website basically. So I don't want
it to be shown in the search results. Sitemap. You should add a sitemap if
you don't know how to do it, it's super simple to do. There are websites out there. You can just go to
your design file and see all of your pages or simply go back to here to the website. You basically have
home, you have cars, you have loans, Contact Us, and you have just one page. So that's all you
need to do inside of your sitemap, Google
site verification. So you can go to the
Google Search Console, create your account there, and claim this as your property. And you're going to get this verification Id,
paste it in right here. Those two are going to talk to each other in the background. And you have this
canonical tag URL. You can learn more
about it here. Just these few changes are going to further increase
your website. Then we have the forms,
as I already mentioned, make sure to include your
client's e-mail there and not your own email fonts. We already did the Google
fonts, so that's fine. Backups are going to do just fine integrations
and custom code. So basically, that's
all there is to it. We have this, so it's published. Let's go publish to
select the domains. And there you go,
it's going to publish that website published
successfully, hit close. And when I go back
to my designer, I can see how that looks like. And now on my profile, you're going to be able
to see this website and you're going to
be able to clone it. Because I'm going to make
it Colonial for you guys. I think are maybe not because
we have these images. So maybe because you have the content inside
of this course, maybe it's not the best
option to do that. Maybe in the future. Let me know if you would like me to do so, write me an email
and let me know if you would like me to create this completely blank
file so you can include your own images and
then you can clone that file. Because I'm not really sure, because everybody from
the web whole community will be able to clone this. And we have these license
rights on these images. So that's the only
reason why I wanted, I like to do that. But basically, that's it. You can see how super
simple this SEO is to do. On the beginner level. Obviously, you have SEO agencies who are dealing with
this full-time. They're optimizing for
keywords and then you're using those keywords
inside of your texts. So therefore, you're going to optimize all of these things. So just pay attention to that. But what you can
do as a designer, as a UI UX designer
is just deal with this basic SEO techniques and I think you'll be fine
At the end of the day.
194. SECTION 17 ASSIGNMENT: Your assignment for this
section is to obviously built alongside me and try to create what we
designed previously. Now in Webflow, if
you're having issues, I will provide a link to the colonial file so
you can just cologne it and use it in your
project and just tear it apart and
see what I used, what I created if you get
confused at any point. But, and this is a huge but
which I want to mention. Always try to make sure to
follow along because as I mentioned previously in the design section
of this class, that is the best way for you to learn if you just
use finished files, if we just replace the images, get in there and
call it your own. You will never, ever
going to learn design. You will never learned
development that way. And it's always the best way and always the best approach
to follow along. If you get stuck somewhere, if you make an error, make sure to always watch these lessons at a
bit slower paced. Some of these players
have that option. If not, then you can stop it, you can rewind it, you can
watch it multiple times. And finally, if you just don't have an answer, don't worry, you can always
reach out to me and I'm always there to help you out with any one of these
lessons from the class.
195. SECTION 18 Case Studies: Studies are a crucial part of your portfolio because
you don't actually want to show your clients to final image and
the final result. You want to show
them the process. That's what's called
the case study. What is the problem that you actually solved
during this project? What is the approach you
actually took for this project? Did you start it with the research that you
started with wireframes? Did you started with your
favorite software of choice? Do you started with images? What was your process
during this project? Because hiring managers and design experts who
are looking for design help and to
hire designers. That's what they are
interested about your process, not you're finished results
because every designer, Altair can create
a beautiful design but visit functional. Why do you actually
took these decisions? Why did you did
this and not that? That's what case
studies are for. So they are
incredibly important.
196. What Is A Case Study: Case study is
nothing more than a long for presentation
of your work. Your work can be
your design work, or it can be our
product to create it. And we're going to touch on that part a little bit
later in this class. But for all intents
and purposes, it's just a presentation
of your work. Now, why? Long form and what's
the difference between long form
and short form? Well, it's short-form. Presentation is
something that you see on Dribble every single day. And websites like dribble is just basically
a screenshot of the part of your work
so that it can be a header section of
your website, e.g. or a mock-up image of your app which is
already completed. Well, the case
study is a long for presentation that you
usually see on beacons. It's a case study
because it helps your users and your viewers
of that case study, study your process,
study your steps, and study how you achieve that
end result, which is e.g. product design or app design, web design or
something like that. It's not limited strictly
to UI UX design. It can also be a
great in branding. It can be great in logo design
is just the length of it. It's going to vary depending
of the project in question. E.g. if you're just designed a logo is just going to be a bit shorter because there is not too many steps in
designing a logo. While in UI UX design,
if you are e.g. designing website which
has 20 different pages, all of them are responsive and you have to create
paper wireframes. Wireframes in your favorite
software, of course, is going to vary and
you're going to have many more steps than e.g. in logo design. So basically that's a
case study in a nutshell. And in the next few
lessons in this class, we're going to explore what you should include in
your case study. What are some steps that
you should take and some great presentation
examples to get you started with
your case studies.
197. Elements To Include: There are many different
elements that you can include in
your case studies. And over my 15-plus
years in this business, I've found that some
elements work better than others because
some elements just really helped to tell a story of how that design
developed over process, overdue creation process and, or the process
that you worked on this particular project and some others really distract your viewers from
getting to the point. Because the whole point of
a case study is to attract potential viewers that
can turn into clients. Hopefully if that's
something that you're looking for or if
you want to just show off to your peers and
for them to understand your process and how you
got to that end results. So in this video, we
are going to discuss some major elements to
include, in my opinion, because I see these
elements pumping it all the time in some great
presentations I found online. So here we have this quick
little introduction and some major elements to
include in your case study. Once again, it's going to vary depending on your industry, depending of the
niche you are in. Because not all industries
are going to need these elements and
not all case studies are going to need
these elements. If the project is shorter, e.g. then if the project is longer. So first thing what you need
to do is include texts, describe what each
section and element does. So don't overwhelm your viewers, but give enough information
about the project. So e.g. if you did
a website design, don't go into too many details. E.g. I. Woke up one morning and then
client reach out to me. Nobody wants to hear that. Gets to the point. Be short, concise,
but be precise about the elements that you're trying to describe
with your text. Make the images tell
the key story here. But text is there just to
help cell the oral idea, the oral design, your
oral presentation. So it's just there to help
your images work for you. So speaking the language of your audience and don't
be too technical. What I mean by this is, who is your target audience? Is your target
audience designers? Then you can speak
in terms like I used responsive
resize in Adobe XD, and I use different art board
sizes and stuff like that. But if you're trying to attract the clients than speaking
the language they will understand
because they probably don't know what Adobe XD
is in the first place. So perhaps you
shouldn't mention it a debt prominently
in your project. Of course you
should mention it a few times throughout
your case study. Make sure to stick to what
your clients understand. So e.g. if that is
a beauty company, then make sure to talk
about beauty products, about the process of getting
to this particular design. Use the language they
will understand if that's the target audience
that you are targeting. Of course, if this is to
be seen by art directors, they of course know about
Adobe XD and all these tools, but don't be too technical either with the texts
you're trying to tell here. So once again, if you're
in a beauty industry, make sure to keep that balance. So describe which
tools you're using and also describe the
niche you are in. Describe the process you are in, and use some technical jargons inside of that particular niche, but don't overdo it and don't
over-complicate things. Once again, texts is there
just to aid your images, tell a better story. Next up we have images. So as I mentioned, use images
to complement your texts. Images should be connected to
the story you are telling. A news imagery that
helps your story, not just any imaging. And if you can take
them yourself. What I mean by that is e.g. if you are in a car business and you're talking about cars, didn't just show
image of a mountain. Because what's the
point of that image? It doesn't help to
tell that story. It doesn't help to
sell the idea of that particular design.
So don't use it. Use images which are
going to go well with your presentations and which
are going to make sense. As I said here, take
any images if you can. Everybody has one of these, so you can simply use your
phone and snap a picture of your process about yourself
working on this project, about creating e.g. paper wireframes. Or you can take your phone and give it to somebody,
you know, e.g. your family member or your best friend or
something like that. Or you can even do it yourself. If you don't want
anybody to help you, you can simply position
your phone behind you. E.g. take a shot,
something like this. So over the shoulder of you
working on your computer e.g. or on this side. Or if you're taking a look at
the preview of that design, you can simply show your
phone like this under an angle of you holding that phone and
showing that design. It's really going to help tell a story because it's
going to show to your target clients and your target audience that you really care about this project. That you really put
a lot of thought and effort into this project. And that you really
pay attention to details for our directors, especially who are looking
to hire designers. This is going to be crucial in their decisions because
they can see straight away that you are the designer who is paying attention
to those small details. And it's really going to
pay off in the long run. So just make sure to pay attention to little
details like this. But once again, don't overdo it. Don't just take
pictures of yourself randomly and simply put
them in your case study. It doesn't help to tell a story, but few images here and there
are really going to help you sell the idea of
that particular design. Next up we have style
guide and design system. So show off your style guide or design system to show that you are organized
and structured. Once again, for our directors, this is extremely crucial, but for our clients as well, because they can see all of these elements coming together
in the finished design, present the most important
elements you use, but don't overdo it. Placed the gradients
to cut off your image at the bottom if it is too long. This is especially important for a really long
projects and really long case studies because
in your style guides InDesign
systems in many cases, you can have hundreds
of different elements, but not all elements
are important. E.g. you can show
colors, you used fonts, perhaps some buttons,
maybe some forums, elements, bigger
stuff like that. And then simply introduce
a light gradient, which is simply going to
feed that design system while your viewers scroll
down to the bottom. So you're not overwhelming
them because once again, style guide and design system
is not the end result, is just a tool which
is going to help you get to the end result, which is, of course should be at the very bottom
of your style guide. But we're going to
talk about that a little bit later in this class. Finally, use the colors from your project and style guide in your presentation as well to
the branding is on point. What I mean by this is e.g. if your main colors
are blue and gray, don't just simply go
and use pink because pink is never shown
in your design, never shown in your process. So why put them in
your presentation? Make sure to use colors from your style guide
and design system. If you have one, if you don't have style guide
or design system, your project is too small, is simply worked
on a landing page. Regardless, I really
recommend that you start using style guides
and design systems because they are
extremely important for the future development of
that particular product. But if you don't have them, make sure to use the
colors that you have in your design, in
your presentation. Because that way branding
is going to be on point. You would be amazed
at how many times I see this in online
presentations, especially when I'm browsing for designers to hire to
help me on my projects. So I see this all the time. Make sure not to repeat that
mistake because once again, for our directors,
especially this shows that you pay attention
to small details. Next up we have
paper wireframes, so present them in a
problem statement. Challenge in concept
phases of your study. We're going to talk
about phases a little bit later in this class. But basically what
this means is you have to present your
case study in stages. So start is right up here and
the end is right down here. So users have to
scroll all the way down to get to that end result, basically a progress method. So users are progressing as
they're scrolling down and they're starting from
the very rough stages of that project for ideation, perhaps some texts
on blank pages and paper wireframes
because they provide frames are all about your ideas. So show images of
creation as well as scanned images with a
printer or your phone. What I mean by this is what
I explained previously when somebody else is
taking a picture of you creating that wireframe, you can do that yourself. You can simply use a pen and a paper and use a
form like this. I simply snap a picture of
you creating that wireframe. Once again, don't overdo it, but make sure to include few
of these here and there, just to help tell a
better story and help sell the oral concept
to your viewers. Give enough details to supplement the story
you are telling, but don't overwhelm
your audience. That's just what I said. And make sure to be moderate
with all of these sections. So if we take a look at style
guide and design system, I mentioned by the gradient, I mean the same thing for
paper wireframes, e.g. you can use one strip of images which is going to be
horizontal or you can switch it to the
side just to show these paper wireframes
and to show your process. And of course you can do a
few images here and there about you creating
these paper wireframes. Next up we have a wireframe, so show them in the concepts and testing parts
of your case study. Once again, we're going to get to that a little bit later. And of course, you
can always go back to these lessons and study
them a little bit more. Present them as an
image in perspective, in images and in mockups. Once again, you can simply save your wireframe from
Adobe XD as an image. You can put it in
perspective in 3D, e.g. you can show it in images. So as I mentioned,
you can show it. Somebody taking a
picture of you, e.g. from here or from the side or wireframe on your phone, e.g. So from this perspective, let's say you using that wireframe in prototype
mode of Adobe XD, e.g. and finally, in mockups, you can use mock-up of a
desktop device, laptop device, phone device, no matter
what you are doing and present a mock-up that
way of your wireframe. If you can make some screens, are part of your
design clickable and embedded in
your presentation. No matter which tool you
are using, you can do this. But because I'm using XD, it's native in XD, you can simply share the part of your prototype so you can
share a single art board, e.g. and then you can embed it into your website if you have
that function or if not, you can simply do it in beacons. Because begins
integrates well with Adobe XD because it's
part of Adobe family, It's Adobe product beacons is. So you can simply
use that link from your Adobe XD and then embed it into your beacons
presentation. And then people can click on it and then navigate
your way around. It. Makes sure it tells a story
and it compliments your text, images, paper, wireframes
and other elements. So this goes for everything
I mentioned previously. So don't overwhelm
your viewers by dozens of these wireframes
because it just remember, this is not the end result. This is just a part of your
part to the end result. Finished UI design. There we go. So make sure to show
it in the testing and outcome stages
of your case study. What I mean by this
is you can show it being tested to your users. So if you have users
in the room, e.g. you can go ahead and take
pictures of people using your design on the phone or on the laptop or desktop
devices, whatever. And you can show it
in the outcome stage, which is the last stage of
your case study usually. So how it looks like at the end, how it looks like a
finished product, perhaps your app or website
is launched already. Then you can give a link
so people can see it. Throughout your case study. They're learning about
how you created it, how you solve problems
along the way. And now there is a live
link so people can access it if you're working
on a private project. So you're not
planning to code it, you're not planning
to make it live, then that's all fine. You can present it in clickable
prototypes, 3D mock-ups, and images like I mentioned previously for all of
these other elements. And you can also
record few videos of your screens inaction and
attach those to our case study. Once again, if you're
using Adobe XD, you can simply record a
prototype and you can upload that video to be cans
presentation or to your website. So you can simply embed that
video inside and people can click on it and you can
then show them your e.g. navigation structure
or navigation between two or three screens
or something like that. This is the end
result of your work. So make sure that your UI design stands out from
your presentation. This is the selling point. This is the end point
of your case study. So people scroll all the way down to see your
finished UI design, to see the finished product. So make sure it stands out more then other parts
of your case study. Because once again,
this is the part that really sells you as
a designer and a truly cells the case study and your process as a designer. So make sure to
make it stand out. Finally, we have other
elements to consider. So depending of the niche, you are independent of the
project you're working on. These elements might
work and might not work. So make sure to be careful with the oral styling
of your product, with the overall niche
your client is in. Mockups, 2D and 3D
in various stages. So what is 2D? What is 3D? Obviously
2D is this, and this. 3d is this and this e.g. so you can use any kind
of different angle of your mockups and off
your designs as well. Adobe XD has this 3D features so you can use your art
board and make it 3D. And you can save the image as a PNG like that and then upload it to your presentation
if you want to have clickable prototypes. So I mentioned that if
you're working in XD, simply embed the
prototype think video. So once again, you can
do it walk-through style screen record of you holding a phone or
behind the laptop. So walk-through style
is what I mentioned. You can simply hit record
in XD if you're using it. And these other styles are e.g. somebody else can
take their phone and simply position it like this
over your shoulder, e.g. then here you are using
your design on your device so you can fire up clickable prototype at
the end of the project, and then you can
simply use it on your phone and somebody
else can record you. And of course you
can do the same on your laptop or desktop device. Background elements. So this is what it says, BG elements just to keep
it a little bit shorter, help with visual interests, as well as to guide
through your case study. Of course, this is going to
be dependent of your project. So if you have leaves, e.g. if you're working in a nature-based environment
and company, you can use leaves as
a background elements. You can use flowers, you can use different graphical elements and geometrical elements, e.g. circles and squares
and triangles, and some different
graphical elements, e.g. like diamonds. And finally, you
can use icons to correspond well with all of
these background elements. Once again, don't overdo it. These are, they're just
help keep that audience interests up and to make them scroll a
little bit further. Gradients and blurs if they
fit the project style, but don't overdo it because
a lot of the times I see gradiants throughout
the entire case study and it really does
hurt your eyes. It really does bore you after
a while and don't forget, a lot of the people out
there are visually impaired. So it's really going
to be really difficult on their eyes to see
these gradients. And basically to distinguish your gradients from your design, especially if they're
colorblind, stuff like that. So just make sure to use
gradients and blurs in couple of places just to spice your
design up a little bit. We have stickers and emojis. Usage depends of the
nutrient project, of course. So let's say that you're working
on a project for a bank. Obviously you're not going to
include stickers or emojis. Or maybe the bank is for a younger audience and that's what they're
trying to target. So perhaps in those cases, stickers and emojis
might make sense. So just use your common sense about what you're
trying to create. So these are just some of
the elements which I like to use in my case studies
over the years. And these are the
elements I found some of the major companies
and designers out there use all of the
time to complement their design presentation
and to tell a better story. You can use some of them. You can use all of them, but just whatever you're using, make sure it helps
you tell a story and make sure that it works with
your brand and your niche. Because otherwise
it just sticking elements and making it harder
for people to understand. And of course, if
you're trying to get a job using your case study, it's going to simply push art directors
and people from HR away because they're
seeing hundreds of designers on daily basis and they can really
tell who is good, who is not about
these little changes. So just make sure to
pay attention to those.
198. Creating Case Study Structure: In the last video,
we spoke about which elements should you
include in your case study, but how do you
structure them for easier understanding and
for easier consumption? This is what this
video is all about. So we have creating structure
for your case study. Organize your case
studies so it's easier to consume and understand because there is
really no point of just stuffing these
elements to a page. They really have to have some coherent structure which makes sense and shows to
your viewers that you really pay attention
to this case study and to really pay attention to
your design work over all. So project, intro and brief, in my experience,
and in my opinion, should really come first. And at the top of the page, perhaps in your presentation, you should have something
like cover image, perhaps presenting
the end result, the outcome of your project
and of this case study. Perhaps if there's a mobile app, maybe you should position a nice 3D looking mockup
with a title next to it, just to show and to tell the
story what this actually is. And perhaps one-liner about what the app or website
actually does. Below that, in my opinion, and in my experience, issues
jump straight into design. Brief. Describe what
the project is about, but keep it short and concise. Don't give too many details away in case you are under NDA. So e.g. what I mean by this is if you're working
for a car company, don't just say the car company
is founded in 1954, e.g. and go about your way to describe the details
about the founding story. Nobody cares about that. You can mention that detail. So e.g. companies
founded in 1954, let's say they have
20,000 employees. So you see what I mean? Just be short and concise
and move the story along because nobody has the time
to read all about that, they can simply go
to the website in question that you
worked on, e.g. read all about their story
or if it's a known company, they can simply go to Wikipedia if they're really interested about learning more about
the company itself. Your project is not about
the company itself. It's about the products
they're selling, about a service
they're offering, or about the good deeds they are doing if they're non-profit
or something like that. So once again, make sure to
keep it brief in your design. Brief, just give the
gist so your audience is informed and tell you a
story through your case study. What I mean by this is what I mentioned in
the previous video. A compliment your texts with your images and what
I mean by NDAs, don't mention personal
details of employees. E.g. john is the director here lives in this three to this
this his phone number. Obviously, this is idiotic. Don't do that as well. Don't mention their
personal details. So e.g. you can mention founders
if they agree with you, and usually they will
because it's good PR, but don't mention
other employees if they're not happy with it. Don't ever mentioned their personal details
such as phone numbers, e-mail addresses,
Facebook pages, LinkedIn pages,
don't do any of it. Is those people want to do that. They will do it on
their own website, but just don't make
the same mistake as so many designers out there, which I've seen putting
this in your case study, also, don't mention any
profits if they don't want it. Because this is really going
to show to their competition how they are doing and
it's really going to work against their
advantage in this case. So e.g. you can say
something like they did 20% increase in the last
quarter, but don't do it. E.g. they make $20,000 more last quarter than
they did previously, because that's really
going to show to their competition about
this sensitive information. So just pay attention
to stuff like this. Once again, be sure to be
concise and get to the point. Next up we're here.
Problem you sold. What is the main
problem you faced in this project and how
did you solve it? Designing the website is
not the main problem. It's a problem and it's a job that you took and it's
designed that you created. So you created this
website design, but which problem does
that website design? So e.g. if they have
our product beach e.g. and conversions
are not all that. Well. That's the problem
you are trying to solve. E.g. if the image of the
product is not too big and the potential buyers don't understand what the
product is all about. Perhaps you increase
the size of that image. He positioned the buttons
here and there and then increase the conversion
older long run, e.g. over the next six
months by 20 per cent. So that's the problem you solve. That should be the
key point you're mentioning in your case
study because once again, it shows to your future
employers that you really are taking care of small, small things like this, which is actually
going to turn into big problem if it's
not solved in time. Don't say how to create an app, but which problem you use this faced and how your
app solved it. This is just what I mentioned. So e.g. if let's say let's
stick to the product page. If it doesn't work
well, unresponsive. Let's say that on Desktop, mobile, sorry, on desktop and on
laptop and doublets, Let's say Buy Now, button works just fine, but on mobile it gets lost. So perhaps you increase the
conversion by, let's say, ten per cent over the
next three months by simply making that button
sticky and making that, it's such a way, then
it just starts crawling when users start scrolling
past a certain point. So that's the problem
you solve and you increase the conversion
by ten per cent. This is just one of the example. Of course, every single
project out there is going to have
different problems and that you need to
solve as a designer. This is just one of them. Next up we have
challenges you faced. Was there any particular
challenge you faced when creating your design? Challenges can be short
deadlines, user issues, new idea development,
long testing, implementation and
stuff like that. Be concise and let your
case study tell a story, but give enough background so
viewers can understand what you're talking about
without giving away too many details. So let's say that after you
created initial concepts, users have issue with navigating their
way around the app. So e.g. challenge you faced is you had to
simplify the navigation. So you made it
easier for users to understand and faster to get
to where they need to go. So that's just one of
the challenge e.g. new idea development in
this case, let's say, Let's say that you
are rarely created original concepts
and users liked it. But founders, e.g. had this new idea and they really think they
needed at the moment. So you have to develop it really quickly and introduce it in existing design and existing concepts that your
users already liked. So this is just one of millions
of different examples. So make sure to mention
challenge your face, but once again, be concise. Don't oral them your viewers, with this part of
your case study. Next up, we have
concepts you created. So concepts are not
finished products, but ideas and versions
of your design. Concepts can be
paper wireframes. They can be wireframes. Once again, what I mentioned
in the previous video, you can show them on your
phone of you're using them, you can show your
users using them what I mentioned as well
in the previous video. They can be paper wireframes,
wireframes, UI concepts, but frightening
concepts, as well as UI testing, user testing. So those are all the things
that you can include in the concepts you're
created and you can scatter these concepts
throughout your case study. What I mentioned in
a previous video and what we are going to touch on in the next few videos
about the overall structure. Show them in an
interesting manner, but don't do it. That's where the
outcome chapter is for. Once again, concepts are
not the finished products. They are just ideas that
you've put into place. E.g. paper wireframe is
not the finished product, but the outcome is. So once again, makes sure not to overdo it with the
concepts and make sure to prominently showed
the outcome at the end because outcome is what matters at the end
of the day and what all these weeks and
months of designing, testing, working
on it has led you to the outcome of this project. So make sure to
make it prominent. At the end of your case study, we have user testing, so right about your users testing and give you knowledge
about what you found, how they manage
with your concept. What answer did they give you? How was your user
testing group divided? What age were there? What is their
occupation and so on. Show images of your concepts. Concept being tested next to the text to give better
perspective to your viewers. What I mean by this is e.g. you can create all sorts
of different graphics. So e.g. you can show graphs of female users
versus male users, how many hours they
spend testing. You found that option one was better than option two, e.g. and you can show
all of these things next to your text in
the form of images, in the form of
graphs and graphics, and in the form of icons. So you can combine all of
these elements to really help to tell a story about user testing and Ababa
about how you solve all these problems
using your users, who helped you test
your concepts to get to the outcome and to
get to the finished idea. If you've never
done user testing, I really recommend that you start doing it to
start learning it, because it's really going to
help you improve the outcome of your possible solution for the AP website
wherever you are doing. But usertesting is just that. It's just testing when the
app or website is live. That's when the real users
are going to come in. So this testing really helps you understand before you launch about how your
users are going to interact with your design. We have designed outcome, right? About how long it took, how many hours you spend iterations you went
through and so on. This is where your need text at least because design is
going to do all the talking, but includes some
major information and milestones
from your project. What I mean by this is e.g. project took me six
months to complete. In these six months
we'd done e.g. 20 different user tests were done, 40
different wireframes. We have 100 different
paper wireframes. I drank, I don't know, 200 cups of coffee
and stuff like that. So make sure to include all of these details because
they are going to help you sell the story to your future employers
and to future users. You can include
the testing hours, number of tests
conducted, as I said, to get to this design as well as some closing thoughts and teammates will help you with this project if there were any. So if you had any teammates working with you on this
particular project, make sure to mention them. If they don't want to
show their images. Once again, we're
coming back to that NDA and whole privacy thing. Then simply mentioned their
names and you can always leave their beacons profiles. You can leave the
dribble profiles, LinkedIn profile,
stuff like that. And if you are the key
part of this team, e.g. if you are a team founder, if you are the CEO of
your own company, e.g. then make sure to show yourself more prominent than all
of these other people because people who are hiring
you as an agency, e.g. are going to want to see who is the main guy or girl
in this company. So they're going to want to see who is behind this operation. And if you put yourself
sort of above these people, not like here, I am like this and these
people aren't like this. No. But if those people
are like this, make sure to make yourself like this or simply to position yourself above them just to show to your
future employees. Yes, I'm the person who
is running this show and you should contact me to e.g. talk about your future project. So this is just my structure. This is the structure I
found worked over the years, not just for myself, but for a lot of the
people in the industry, especially big brands
and big designers. So once again, not
all the elements of this structure are
going to work all of the time on every
single project. But majority of these elements are going to work just fine. So make sure to explore them
and to use them wisely. Because once again,
there are there just to help you tell a story and just to help you form the oral opinion
of your project, of your workflow and of yourself as a designer to New
York case study, when you have all of your
elements structured in such a way that users
can easily follow.
199. Awesome Case Study Examples: In this video, I'm going to show some awesome weekends examples
which are found online. There are thousands of
different examples on weekends, especially so you can
browse them and you can also look at some
other websites. You can look at personal
websites of the creators you admire to look for their case studies and to understand how they
are doing them. And make sure to understand that not a single case study is the same as the
other case studies. Not even by the same designer, because every single case
study tells a different story. It tells different parts to that end project and really
shows different design. So here are just some of the
more recent ones I found. But of course you can jump
right here and search e.g. UI, UX case study and
it's going to spit out thousands of
different case studies. And of course you
can browse them and see how they are created. So what we have right here is this car-sharing app concept, and this is what I mentioned
in the previous video. Make sure to include some
kind of a cover image is just for your users
to understand well. And of course you can jump
to here future in UI UX, and then you're
going to be shown the best work on Behance, which is taught by
the weekends team. So once again, in cost
sharing app concept, you can see you owe us 2021 any paper time and who
designed it and someone. So we're starting with an image of a car and
I'm not going to go into too many details about
all of these because this video is going
to be 3 h long. I'm just going to
skip between them, but just make sure to
pay attention to all of these elements that we mentioned previously
in this class. The project. What was the goal
of the project? User flow? So how users are going to flow through your
app, colors and fonts. So they don't have that design
system which I mentioned. They have these
colors and fonts, which is just fine as well. You are just showing to your potential employees
how you created it. We have prototypes, screens, so they jumped straight
into wireframes on device. What we have right here
is a video of sorts. So we have a loading screen. This is what I mentioned. We have login screen, so the entire
navigation right here. And you can see
straight away that this really looks like a wireframe. And I think this is
their finished product, but you can of course do this in wireframe stages as well. And we have finished
product here, like you see. So this was the
wireframe after all. So we have the finished
product and we have these mockups in perspective
what I mentioned, we have these dark mode mockups and we have tanks at the end. So you can link your
Instagram Dribble on Telegram or whatever
you want right here, your own personal website. And of course, give
your appreciation to these designers once you
scroll all the way down. And this is what I
mentioned about yourself, your teammates, or whatever you want to include at the end. So you can do that on behalf, of course on your
own website as well. We have fork, so development of a healthy
food application. And I can link all of these in the PDF and
in fact our will. So you can check the PDF which
is attached to this class, and you can simply
click on these links to access these presentation so you don't have to browse them. You can see for yourself straight away and
then you can simply jump to the profiles
of these creators. And of course you can
see they have many more on each of their profile. So just the one shortcut
for you right there. So what we have once again is these mockups in perspective, what the project is about, what are the goals? So you can see scope of work. What exactly did
this designer do? Finding the optimal solution? So research they'd done
to the competition. So we have our flow right here. So from idea to creation of hypothesis to
research prototyping. So none of these steps
are what matters to you as a designer because these steps are going to change
from project to project. So sometimes you're
going to have creation of hypothesis,
sometimes you're not. Sometimes you're going
to have to do research. Other times clients have
done research for you, prototyping and research
once again design system. So not all of these are, is what you need to include. Once again, they're going
to vary from project to project prototyping for
verification of hypotheses. So we have that right here. We have 3D mock-ups here. So just a spiced
up here and there. What I mentioned previously
not overwhelm your viewers. We have the finished
product right here with all of these background
elements, background images. So you can see the splash
of milk and all of these plants right
here in the forefront, we can see person
holding the mockup. So all of these
mentioned elements, which I mentioned previously
in previous lessons. We have these 3D mock-ups and all of these
elements jumping outside to show that there are more elements on these pages. We have images corresponding
well with text. So you can see statistics and profile, additional
sales funnel. So you can see all
of these details. Cash back up to 20 per cent. So all of these small
details is what helps sell a story to
potential viewers. Once again, click appreciation because we really appreciate it. We have a studio, web design and web
development lending page. And you can see
these two designers. So this is what I mentioned. If you run a studio you
can have multiple owners. On your beacons page. Website was built using
tilda and code modification, competitor analysis, and we
can see this nice structure. So introduction benefits, work services, work in progress. About Us. So all of these, we have typography right here. I'm going to scroll a little
bit faster because you can see how long
this website is. We have this awesome
looking animation. And I would say about these mockups is they are really great idea
because they don't. Age is just a basic screen. It's not showing specific part. And this is what I
see all of the time. Designers are using iPhones, which are generations older. I did that as well
for my products. And you're going to see
that in a future video. But make sure if you're using these mockups to use
mockups which are faceless, basically, you cannot tell
which device this is, which size this is. And it's always going
to stay on track. And basically, because
it's not going to show the elements of
a certain device. If we scroll all the way down, you can see more examples. You can see how it looks like on a phone and on a desktop. English and Russian versions, we can see the grid right here, which is of course important
scrolling animation, which is fantastic. You can see these
elements jumping outside of the initial tablets
showing the page as well. And thank you for watching. So here you have appreciation. We have car dealer websites, which is shown in future
in XD and future in UI UX. So once again, make
sure to check that out and you can see
multiple owners. So we have four
people right here. So car dealer websites for Mercedes Benz, Ukraine summary. So they wanted to create new and more efficient website
to replace the old ones. So excellent brief, and show the oral
problem that they have. The previous website
was based on official Benz template
and resulting in low usability for conversion rates and lack
of necessary function. So this is the problem you
solve straightaway at the top. So this is why I said
don't waste too much time, simply get to the point. Why to redesign the old website. So this is the problem they solved project goals.
So you can go ahead. Once again, I'm going
to leave the links in the PDF so you can read
all about these details. We can see nice
imagery experience what it's like to sit
behind the wheel. So these are the
problems they solved. So when do you want to
schedule a test drive, e.g. just walk or drive, how easy it is to book
it on your phone. Once again, imagery to compliment what
you're talking about. Easy test drive setup. So you can see they're marketing to younger people in this case. So searching filters
how they solve that. And we can scroll down
a little bit more. Automatic Payments, API alone, loan directly to the customers. You can see this nice
animation of all of these different screens from
PDF catalog to online store. This is the problem as well
because majority of these, especially legacy
car manufacturers, so all car manufacturers
there are sending your PDF catalogs and
then you have to click the links in the PDF kettles
to get to the online store, which is ridiculous in
today's day and age, simply launch an online
store in the first place. But you'd be amazed
at how many of these older companies
are still doing this. Full control features
and functions. You can see the grid right away. Details such as
margins, gutters, columns, and so on,
fonts and colors. We have this nice
presentation right here, which is on brand, which is what I
mentioned previously. You don't see yellow
color here, e.g. because yellow is
nowhere to be seen in the original fonts
and colors e.g. so don't use it here as well. I appreciate. And finally, we have
this Mother Care, and it's featured in a UI UX. So the largest integrator of
digital solutions in Moscow. So we can see right here colors. They used. He's a UK retailer
which specialists in maternity in general products
for children under eight. That's it. You don't
have to go into too many details
about what they do. If people really want to
learn about what they do, they can click the link and
access to company as well. So we have online shop, how it looks like across
the global business, There are over 100 stores now for the territory's,
which is great. So app and I really like these
small snippets of texts. Design of the application is made in a light
and modern style, which really shows, it shows to the project leaders and art
directors straightaway. But somebody who is looking, who is probably in this niche, is not going to know what
the modern enlight style is. They just like the overlook, but they don't know
which style that is. And this really helps them. If they contact you for
a project like this, they can reference this texts. E.g. I really want you to create this app for me in a lightened, modern style like you
did for this brand. So it really helps
to tell a story to your users and really helps
with the conversation later. So we have icons here. Perhaps somebody is not going to know that these are
not illustrations. These are icons in 3D. It's really easy to
read and understand. We have second screen web, a lot of air and
clear page structure. Once again, text helps to sell a story and these
background elements like this color right here
and these numbers right here really help to
tell a story as well. I really liked these
texts, snippets. I think they do a
really nice job. So dark version with
the dark background, with the dark mockups inside, you can see the spacing, how well it does. So I think this
is something like 300 pixels or
something like that, maybe even a bit
more in the spacing. And you can see
consistent spacing throughout all of these
background details. Paying attention to the colors. The colors they use are
throughout the presentation. There is really no
outsider colors. You can see this going
outside of the mockup. Once again, this
really compliments, well what you're talking about. I really like these colors. I really like how they tell a story and how the
screens are connected. So perhaps we are
starting from here, then we're going to hear, then we're going to hear from
there, we're going to hear. So I really like this
walkthrough style project team. This is what I mentioned. So you can have yourself as a project leader
right here at the top. So head of UX. And then you can list all of your teammates down below you. If you are once again, the key feature
and key member of this team here to appreciate. And you can see the
largest integrator of digital solutions in Moscow, which is great for our
tagline, for your company. So once again, these
are just some of my examples which I
found just recently. But as I mentioned, there are millions of different
examples on weekends. Especially once again, I really like beacons for case
studies because it really helps you
understand all of these details that we mentioned
throughout this class. And hopefully you saw in
these examples, once again, examples which are shown right here are going to be
linked in the PDF. You can simply click on
these links in a PDF and access them easily
and simply walk through once again with me with this video about
what we mentioned in this class to really help you understand all of these elements that you need to include. Once again, make
sure to understand. Once again, huge case
study is different. Each project is different, so not all the projects, and I hope you saw
in this video, these are all case studies, but all of them are completely
different theories, different elements, there
is different spacing. They use different pacing, they use different colors and fonts and iconography
and stuff like that. So once again, they all use the same structure of the
elements which I mentioned, but they don't all follow
exactly the same structure. They go about it
in different ways, but they help to tell a story which is the end
goal right here, is to help your users and your viewers understand what was your role in this
project and what are some steps you took to
get to the end result.
200. Content Writing: When you're writing the text to include in your case studies, make sure to write in a language that your users are
going to understand. Once again, what
we're coming back to what I said at the
beginning of this class. Don't use the language
which is too complicated, which doesn't speak with
your target audience. Make sure to speak with
them like with a friend. If that's the tone
you want to go for. If that's a more corporate ton, more serious tone, that's fine. But if those are your users, if your users are going
to understand what you are saying in the
very basic language, whether that's really casual or professional
doesn't really matter. What matters at the end is that they understand what
you're trying to tell them. So if I take you back
really quickly to this example which I mentioned
in the previous video. So you can see this text. So setting up personalized
recommendation to deliver the best
product deals. As you can see, they
don't mention right here. So e.g. I. Used XD to create two
stacks to make sure that the right button
is bigger and just go into too many complicated
unnecessary details. What they said is setting up personal recommendation
to deliver the best product deals. So when you're
creating your text, make sure to pay attention to details like those
mixture to be short, concise, get to the point and just make your design
do the talking. That's the whole
point of designers case study is to show
off your design, not to show up your
writing skills or to show up your
presentation skills, which are going to come
through the years of work. So you're not going
to be able to create presentations as high level as these straight
at the beginning. But over time, over practice, over projects, you're
going to be better at it. And then you're going
to get to the level of these presentations which I
showed you previously, e.g. an even higher levels. Once again, at the
end of this video, make sure to keep it concise. Make sure to speak in a language your users and your viewers
are going to understand. So make sure to target it and to speak to the viewers
and users who are going to understand and who are your target audience
because are you trying to get hired or you're trying to show off to
your designer colleagues, who is your target audience and then speak in that language.
201. Presentation Tips: In this lesson, I'm
going to give you some presentation tips depending of what you are presenting. So let's jump straight away. This is one of our products. It's called wire
flow, flow charts, and you can find it on
a web donor dotnet. I'm going to leave the link in the PDF and you can access it. And of course you can
get all my courses, all my digital products
in my membership. I'm going to leave the
link to that as well. If you're interested. You can click their
joint and then get access to every single
thing I created ever. So here we have waffle charts, which is just one
of our products. And wanted to show
this because it's a bit different than your
classic case study. This is the case
study nevertheless, but it's a case study
for a digital product. So it does the different story. It doesn't really show
all of those details. So we have 200
screens, 200 elements, two papers, and we have
light and dark versions. So you have a small snippets
of text right here, but I'm trying to
show right here, so like light and dark versions. And I'm showing this right here, so I'm just trying to sell
the overall product as well. So if we scroll down here, you can see the Buy
Now button right here, so you can purchase
straightaway. But I'm trying to sell the oral story of
the product itself. So light and dark versions, if we scroll down, we
have adaptive components. Components which are inter, interacting with each other and changing places,
changing elements. So what's included? I'm trying to show that
there are 400 components in web and mobile in
three file format. So Photoshop, Sketch and XD
be so perfect components, super organized layers free Google Fonts
to paper layouts, video tutorial included
to help you get started. So just this one alone helped
us sell dozens of copies of this product because a lot of this beginning designers don't really know what this is for. Don't really know what to
use it for, the purchase it. And when they watched
the video tutorial, they just are blown away. I received many
different emails over the years about how
video tutorials really help my buyers understand
how to use my products, improve your project UX. So this is why you are going
to use these flowcharts. By creating flowcharts
and planning ahead, you can save a lot of time in the later stages of the project and both for
you and your clients, reducing the time you would use for wireframes and later for UI. So it explains what the project, what's the product is
for straight away. And it really helps sell story
because you can see all of these different
elements combined together making these screens. So it really helps
users understand how can they possibly use this product if
they purchase it. Organized layer structure. So I'm sharing all of these
screenshots right here. And if you don't
see this properly, I can zoom in a lot closer. So you can see Photoshop, you can see sketch, and you
can see x D, right here. You can see this
organized file structure. So flowcharts of any complexity. So you can combine and connect all of these flowcharts
in different ways. Ready for print. So I'm just showing
a US letter size and A4 print ready so you can print these four
charts if you need to show them in person to your
clients or your teammates. Unlimited variations. So I'm just showing bunch of different
variations right here, so you can combine
them however you want. And then I'm showing
this icon, offer laptop, and I'm showing Web
Elements, light, which are these light elements, 200 light elements for
website flowcharts. And I'm starting with
the category of headers. So you can see how
text is really helping cell the oral story
and the product in this case, by combining it with images. So this is what I was saying. I'm not saying a Web
Elements slide. So e.g. I'm not saying here, they all have white
background to help your elements stand
out from the crowd. Because it's going to help your visually impaired users understand the product better. I'm not seeing any of it. Fab elements light
200 light elements for website flowchart so
users can understand, Oh, this is not for mobile, this is for website and
category for headers. You can see content, sliders, futures portfolio and
so on and so forth. And if we scroll even more down, we have mobile elements light, so users can then tell, okay, so this is
for mobile as well. Awesome. So I have 200 here,
200 there, great. So we have categories of
login walk through and so on. And then when they scroll
all the way down to here. As you can see,
presentation is extremely long because there are dozens
of different elements. Web Elements dark. So, okay, so I can
combine a light and dark or I can use light
or dark straightaway. Awesome. So I don't
have to lose time creating these light or
dark elements later. Which is what's
the whole point of this presentation
in the first place? It's a bit slower to
load because it's huge. You can see how long
am I scrolling? And this is what I
was trying to tell you in the lessons prior. Print out your web flow
charts and show them to your team or clients and work
out the layout with them. And you can see this image
right here of the flowcharts. Printed notes are being taken. Collaboration is
happening right here, or you can print out your mobile flowcharts
and show them to a team or clients are worked
out the layout with them. So here we have mobile phone, we have the same thing, we have the band, we have
all of these details. And I went ahead and
shut these images. First of all, I
combine my flowcharts, I print them out. I took the time to make
some of these changes, to make some of these sketches. And then I took the time to arrange all of these elements
and to snap a picture because this really
helps to tell a story to my users and potential buyers
of these product. Because it really helps
them understand a bit better as to how
they can use these. For zoom all the way in. You can see it gets
down, swipe up. You can see don't,
so don't go here. And you can see all
of these elements in both of these flowcharts. And finally, at the end, what I wanted to
show you is this. So scroll up just a bit here. May read Love by web donut to help you create
sweet designs. So just a little tagline
down at the bottom. And on my website you
can see that we have multiple different products
from the same category and click see more
products to check out all of these other products from the same category
or different categories. But if I start my first scroll, you can see how long this is going to take
to get to the top. So it's extremely long and it
doesn't load in real time, but you can get the picture. I will leave the link
in the PDF, as I said, so you can access this
product just to explore it, to see this presentation. But this is the case study. Nonetheless, case study can be to sell yourself
as a designer, to sell your service, or to sell your product. This is the product case study. In this case, and of course I've done this for all
of our products. So it's going to be a bit different from
product to product depending on how big it is, what it does, what is its target audience
and stuff like that. But the whole point of this video is to help
you understand that the case study is really there to help you
sell something. Whether that's yourself
as a designer, for somebody else to hire you, whether that's a product
like in this case, whether that's a
service that you're providing such as
website design, app design and stuff like that. Always make sure to
speak to your users, to speak with your viewers, and to really help them
understand what it is all about. Your case study, as I
mentioned multiple times, can be about service, about product or yourself. So you're selling yourself as a designer who is
bringing this package. So make sure to be about that. Makes sure to tell a
story and make sure to be as easy to
understand as possible. Because not everybody,
our designers, not everybody are experts and not all the
clients are the same. Some clients are
going to understand. Yes. Okay. I know what
Adobe XD is, e.g. what our stacks,
what are layers, but other clients are not going to know anything about it. Majority of clients
out there don't even possess a computer,
believe it or not. So they're doing all their work on their phone or
on their tablet. And desktop app, which is
available on desktop computer, is not going to sound
familiar to them because they don't have a
desktop computer at all. So just make sure
to pay attention to all of these things and your case study are going
to convert like crazy.
202. SECTION 18 ASSIGNMENT: Your assignment for
this section is to use any one of your designs, just not from this class
because everybody is going to create designs from this
class in that case. So I really urge you to create your own custom design and just presented in
your case study, if you don't have a website,
that's completely fine. As I just mentioned,
you can use beacons. It's fantastic tool to create these long forum
case studies and you can publish them for
everybody else to see. Then once you
actually approach to clients or wants
clients approach, you, you can point them
to the case study and just to show them your way of thinking and your way of
solving different problems.
203. SECTION 19 Finding a Job: In this last section
of the course, we're going to talk
about different places where you can find a UI UX job, and different platforms
that you can use to do so. So let's get started.
204. Freelance VS Agency: When you're searching for a job, you first have to understand
the differences between working as a freelancer
versus working in an agency. Obviously, when you work
inside of an agency, people who work in
that agency have dedicated job position
to find you what to do, to find new your daily tasks, to pay you your monthly salary, and to cover all of the expenses that
you might have, e.g. food, electricity
bill, Internet bill, and so much more. Also in majority
of these places, you're going to get
your own equipment. If you don't have your
own computer, e.g. you will get one there
once you actually start working versus whatever you have at the moment
as a freelancer, you're going to start using it. But nevertheless, when you're
working as a freelancer, you obviously have
much more freedom to work wherever you want, to do whatever you want. And two, e.g. if it works better for your schedule
and for your life, because not everybody
is the same. You can work either
in the morning or at night because some people, especially people with families, like to work more
in the evenings, because that gives them
some additional freedom because the kids need to
be put to sleep, e.g. or you have much
more free time in the evenings rather
than doing the day. Other people like
to work really, really early in the morning, finished their tasks at that time because
it's what suits them. So everybody is different
in that regard. But nevertheless,
whatever you choose, whatever you decide to do, It's really all up to you. One thing that you
should remember and take from this class
is you can do both. You can be hired at an agency and work as a freelancer
at the same time. Or you can start as
a freelancer and then move to the
agency or vice versa. Or as I said, you can work
both at the same time. It's really all up to you also in the rise of current events
on the recent few years. And there is much more
remote positions opening around the globe and much more and more beer
companies are moving towards remote work because they found that their
expenses are much lower because they
don't have to keep the entire company in the
entire staff in the building. They don't have to pay
for huge buildings, huge officers in
all these bills. So for vast number of companies and it's just going
to grow year over here. It's much more
beneficial for you as a worker to work
remotely either way. So either you're working for an agency or
as a freelancer, there's a good chance
out there for you to find either a freelance or a full-time position
to be removed.
205. Design Contests: One great option,
especially for beginners, is to participate
in design contests. And these contexts
can be either for small businesses or for
large global brands. And there is a clear
distinction between the two. And in this video,
I'm going to show you some websites where you can try to participate in these contests and build your confidence
as a designer. Build your skills in
talking with the clients, understanding the
brief as a designer, and also build your
portfolio as a designer. Remember I'm going to leave
the links in a PDF for everything which has speaking about in this section
of the course. Make sure to check out
that PDF Assembly. Click those links in
order for you to easily access all of these websites
and to try them yourself. So the first website
we have right here is 99 designs.com. It's a well-known
website for years now. And how this works is
you can simply browse the contests and it works
almost exactly the same. So let's browse contests, e.g. and let's find all categories
may be web and app design, and all subcategories may be webpage design or WordPress designer or
something like that. And you can see right here, so this is the price that you're going to get if
you win this contest. This is how much time you have to participate
in this context, and this is how many designs are already in this contexts. One tip I can give you
about not just 99 designs, but websites of
this kind is if you can search for clients
who give feedback, of clients who don't give
feedback usually wait until the last minute because they're busy with their work obviously, and then just provide
some random feedback. You don't want that. You want
clients who are actively looking and providing feedback. And then once you actually
win one of these contests, you are going to talk
with them about building their website on Webflow and showing them how
to host it on Webflow. Everything that we spoke
about in the course so far. But what's crucial here is you're going to
win them over with your design and then go over
and transition to Webflow, which obviously you
are going to charge a later down the line for the
debt additional service, but 900 designs, make
sure to check it out. There are various different
categories right here and right here with the subcategories you can
even choose by industry, you can show filters right here. So all of these things, so make sure to check it
out, create your account. And the same story is
for the design crowd, which is a website
which is just a little bit less known than 99 designs, but nevertheless, you can
also find some clients there. The key thing you
should remember about 99 designs
and design crowd is these are for the
smaller contexts, but this means is
usually these are the businesses where
the prices are e.g. I. Don't know, $1,500 to $1,000, something like that,
which sounds great. But you can also find some other businesses and some other contests for enlarge
global brands like e.g. if you go to websites
like your water, which is the marketing
innovation platform actually. And you can see all about the community in the projects
and something like that. So what they do is they create these contests for
large global brands. So you can see like Coca-Cola, Deutsche Bank, Mealer, Henkel, all of these brands. Basically how it
works is you explore, you connect, so you
can build the project, then you can create
and evaluate. So this is how it actually
works for brands, but for you, you're going to get
the project was to actually sign up for
a free account here. You're going to get the projects via email and then
you can participate in these projects are much like with the nonane designs
and design crowd, but on your water
and talent house, which is the next website
I wanted to show you. These can be really
large brands. So e.g. a few months ago, I received the e-mail for a campaign
that Mercedes-Benz did with, I think, talent house, I think. And they were choosing 50 different designers
to give them prizes, ranging from something like €2,000 all the way up to
€10,000 or something like that. And I think the main
price was even a car. So this can be huge, not just because of the money, not just because of
the price itself, but because of the
connections that you are able to get with these brands. And just imagine if you're
working with a brand, let's say mama's little
bakery or whatever, and Mercedes Benz, which one is better to put
in your portfolio? Just think about
it. So don't just think about the immediate price, but the impact that
that contest is going to make towards your career
later down the line. So once again, your
water and talent house, I will leave the links in a PDF. Make sure to check them out. You can see the
briefs right here. So let's check out
one creative brief. So you can see
peacock right here. Unreal Engine. This is for one of the
movies, I think. Yeah. So you can see all sorts of
different brands right here. Nationwide, Building Security, Absolut Vodka, one huge brand. Once again, Downton Abbey, which was the show
on TV, Seinfeld. So all sorts of
different big brands are here and they have a
decent creative briefs. Obviously, you can see
call for submissions. You can submit their
selection period. That's when the client has already chosen
this for CLEA e.g. has already chosen the
winning submissions and then either goes to the final round or simply
choose that final selector, final selection, and just make them all winners and
give them all prices. So make sure to check it out. As I said, be patient
with these websites because most of the time you're not going
to win anything. But it may look like that, but you're actually
going to win a lot of experience and a lot of soft skills that you are not going to learn
anywhere else. You have to deal with clients in order for
you to understand these soft skills
and in order for you to apply them in
your future work.
206. Gig Platforms: Another option that might work
for you is gig platforms. And these platforms
are basically just smaller projects
on these platforms, which various designers bit on. The most well-known is Upwork. And you probably
heard about Upwork. This is where you create
your portfolio and where you can submit all of these
proposals to your clients. So you can find
design and creative. We can go to find work and you can even improve
your skills right here. So basically how it works is one client posts or design brief and various different
designers basically bid for that brief
and for that job. How you are going to be able
to win that is to explore other online tutorials and blogs because there is
a pure art about it. How you can approach it to be more comparable with
other clients, e.g. and with other designers. So I would highly
recommend Upwork, especially if you're just
getting started and when you do it kind of snowballs
into it alike. When you're just
getting started, it's going to be difficult
to find a client. But when you do find the client, he's he or she is going
to leave you a review. That review is going to help
you down the line to get more clients so it just
snowballs into effect. Don't give up. If you don't get a job right away,
just keep submitting, keep trying, make sure to follow all of the
rules and guidelines. Because I heard so
many horror stories where the band designers
because they tried to trick the system and force people into giving them
job and stuff like that. So don't do that. Make sure to be as precise as possible with
following the rules. Therefore, you're going to
get the job much quicker. Next platform is freelancer, who is doing exactly
the same thing. So make sure to hit right
here to browse jobs. And as I said, I'm going to
leave the link in the PDF, people per hour,
exactly the same story. So make sure to explore all three and see which
one works for you. Maybe you can try all three and see where you can get the job. You can see right here
interface designers. So they are always looking for
people who are doing this. And you can see web developer
and you can even find them workflow jobs on all
three of these platforms. And finally, which I want
to show you is top-down. Top-down is a little
bit different because it is one of these
bidding platforms, but it kinda isn't because
they have the vetting process. And you can see top three
of the freelance talent in the world are on this
platform because they are really rigorous with
their selection and hiring process once you actually get inside of the top,
top, top team. So to say, they're going to
give you jobs all the time. So It's up to you to grab those jobs as soon as
they are available. And you can even work as
a web developer here, but I'm going to
show some dedicated web full sites a bit later. But basically how it
works is you're going to get through that hiring process. If you go through, you're
going to be part of a team, so to say virtual team. And therefore you're going
to get a lot more of these job opportunities
and job positions. So I'm giving you three different
platforms and Top towel, so make sure to pick
what works best for you. Once again, same width, the design contests don't get discouraged to
easily into quickly. You have to try all of these until you get
your first position. That first position
is going to get you your second position,
third position. And then it's going to be much, much faster for you to get your additional jobs and
your next jobs because you will have all that
experience and all of that track in these platforms.
207. Digital Nomads: Being a digital nomad
is great because you can work wherever
you want in the world, and you can live
wherever you want in the world and working
at the same time. That's what these
websites are all about. That's what these
positions are all about. Because the figure
right from the get-go that you are not tied
to your house, e.g. you can still be at
your place and you can still live at your place
of work, these jobs. But I'm just trying to tell you that this is the whole
point right here. They are fine with
somebody being remote. So you can live in India, e.g. and work for an American
company, vice versa. So it doesn't matter where
you are in the world, you can work in
one of these jobs. So these are just
three of the websites, and you can find a lot
of them on Google, just search for
digital nomad jobs. And the first one is digital
nomad dot world slash job. So you can find
freelance, full-time, part-time, temporary
contract work. So all sorts of
different things. They even have entry-level
which is fine. You can see majority
of them are a remote where it says USA e.g. because it's a full-time, but maybe you can
even try to get that job to be remote if
you negotiate with them, this is temporary, e.g. suggest a one, let's say
project or something like that. Next up we have remote
jobs and this is working nomad.com slash jobs. So you can find all sorts
of different jobs right here and you can see
design is right here, so you can ****** that. So if I could check
on the design, you can see UX designer, UI, designer, graphic designer,
all sorts of different jobs. Then we have remote ok.com
slash digital nomad jobs. And you can search
by location I, where your clients
are in the world, by salary even so, you can find salary right here. So 70 eternity,
whatever benefits, which sort of benefits do get. So this is a great
website for that. And you can find all sorts of different
results right here. But let's search for, let's say, developer design. There we go. And as you can see, all sorts of different
design jobs up here. So we have test engineer, stack engineer, design developer or a UI UX or all sorts of
different positions. Make sure to check this
website out and remember as same story with all of these previous lessons,
including this one. If one thing fails,
try another one, and then another one, and see where it's
going to get you. If you're going to
get the remote job rather than a design
contests, great, you can put that remote
job in your portfolio, vice versa, it works the same. So maybe you're going to get three jobs at the
same time. Who knows? You just have to be consistent, you have to be persistent, and you're going to get that
job at the end of the day.
208. Design Platforms: Design platforms can be an awesome way for
you to find a job. And not just the
job, but even some friends who are in
the same boat as you, you can connect with other designers you can like to work, you can send them messages. You can exchange awesome
resources you found online e.g. online courses like
this one, wink, wink or you can exchange your favorite books
about UX design, maybe some tips and tricks about working with
certain types of client. So it's a great way to
build your network and to connect with other designers
all while staying at home. I'm going to show three of my favorite websites and you can of course explore and find
other ones out there. So the first one is beacons and Behance is one of the
oldest websites out there. It's great because on weekends you can build your
own portfolio. If you don't have your
own personal website, you can create it on weekends and it's fantastic
because you can create these long
form presentations which are great for
case study purposes. And you can always
point your clients to those case studies and
they could see all sorts of different details
that we spoke about in the case studies
section of this class. Also, it's great
because as I said, you can connect
with the community. You can explore and be
inspired by the community and also you can learn
because they are great and they have this
live stream tab right here, which I sometimes live
stream with them, especially with Adobe XD
and other Adobe apps. But you can find job
right here quite easily. So you can go to jobs
right here at the top. Create your profile, obviously, then you have freelance
full-time and creatives for hire and you can also
save jobs for later. So how to do this,
Let's say freelance. And you can see right here, so you can search all sorts
of different category fields. Or I can filter
through UI UX, e.g. and you can see UI UX
anywhere, anywhere, anywhere. And all of these are freelanced. You can see we have 56 different
freelance job positions. If you want to apply,
you're going to apply directly through weekend. So make sure to have
your profile in order make sure to post your work
that you did previously. And that's it on Dribble. It's going to be a
little bit different because when you
go to find work, your job board is free, but for freelance projects, you have to have a Pro account. So Joe board looks like this. So when you go here,
you can filter. So let's say you are a designer. Lets say UX, let's say
web design, click Filter. And it's going to
show you everywhere. And you can filter through by a full-time freelance
contract and open to remote. And you can see some of them
are remote friendly, e.g. this one, this one, this one. So you can find all sorts of different positions
while with freelance. What you can see is the
budget straightaway. So some of these, Let's
filter them through UI, UX web design, same
like we did previously. Filter results. Let's see what we have. So we have 16 new
projects posted today. So they have a lot of new
projects, but once again, you have to pay dribble for
this particular service. So you can see all sorts of different positions
and it's great because you can see the budget. So you're going to approach this in the way which I mentioned
already previously. So you can offer them
design service for this particular budget and then offer them Webflow as an upsell. You can say to them
somebody like, Okay, we are going to
build this design, which is fine, but you
don't have a developer. Maybe I can develop this
for you in Webflow is going to be awesome
for you because it's going to be easy to upgrade, it's going to be easy to manage, easy to add new information,
easy to exchange. You don't have to deal
with plugins but updates, all sorts of different things. And there is hosting
included inside. It's going to be quite easy. Upsell, in my opinion, especially for small businesses who don't know
what you're doing. And finally, fun final
website is this, which is designed news. And on Designer News they
have this jobs sections. You can click right
there and you can list by design development, full-time, part-time
contract internship, freelance, remote
friendly, or you can even enter allocation if you want
to be location-specific. And finally, you can open
all of these in a new tab, but you have to have
your portfolio prepared. This is basically a blog, so you can click to stories and read different kinds of stories, connect with other
designers as I mentioned, but they have this job section
and the podcast section. So you can click
through and apply it to these different
job positions. So there you go. Same story like with all
of these previous ones, which I already showed
you in this course. Make sure to test it out, make sure to apply
mixture to be persistent, be consistent, have a
portfolio in order, and just keep applying. One of them is going
to get you that job. You can double down on that one, or you can even go wider and try all of
them at the same time. It's already up to you, up your time, but just make
sure you don't give up. Make sure you keep focus, make sure you keep persistent, and you're going to get a
job at the end of the day.
209. Webflow Jobs: Apart from these methods
that we talked about before, when you create a
design and then offer a workflow service on top, you can go to dedicated websites where you can find Webflow jobs. You can go to Webflow and apply to be a certified
Webflow developer. They're going to
say send you leads that way and then you
can easily find a job. You can apply to
different agencies. You can go to LinkedIn, create a profile, add your web
full portfolio there, e.g. to the Webflow free
website section that we spoke about in Webflow
part of this course. And then you can point
that as your portfolio, you're going to get leads
and job offers that way. But in this lesson, I just wanted to show
two additional sites where you can find workflow
jobs quite easily. First of them is
we'll have no code. How it works is you apply here and then it seemed
like a top towel. They're going to send
you jobs all the time. So you have to go through various different tests where they can test your
knowledge about Webflow. And you have to fill
in your profile, you have to show
them a portfolio. So that's why I said you
can attach those of Webflow free posting that you created in your Webflow profile and put
that for your portfolio. You can show them
your experience. Based on your experience,
you're going to get paid. Same story like all of
these different websites. And finally, we have
float or remote IO. So a number one job
board for finding Webflow jobs and hiring talent. So you can go right here, search by location, occupation, company type, and experience. So entry-level job
position, e.g. to upload designer. There we go. Well, the oil per designer
developer anywhere. So all sorts of
different job positions. I think this is a
fantastic website. I'm going to leave a
link to it in a PDF. Make sure to test it out,
make sure to try it out. And once again, same story. I'm repeating myself in all
of these different lessons, but make sure to be persistent. If you don't get this one, you're going to
get the next one. So always keep trying, always try to repeat the
steps that you did when you get a job and
try to innovate a little bit when you
find your next job. And make sure to combine these Webflow websites
with design websites and make sure to
offer Webflow upsells and see what works
better for you. Is it just Webflow is adjust design when you decide that it's going to
be much simpler to, for you to focus all of your efforts into
one basket, e.g. but before that you have
to try all over again.
210. Portfolio Tips: One last thing about
jobs is your portfolio, because your portfolio is going
to get you your next job. So it's really important
to have a good one. And in this short lesson, I just want to give you
a few tips and pointers as to how do you go
about your portfolio. So first thing you
should focus on is if you were to hire somebody, what you would look
for in that person. So e.g. if in this course we were building the
website about cars, and let's say that all you do is build websites about cars. So That's going to be a great portfolio
for you to apply for a position for a website design about cars. You
see where I'm going. So as soon as you niche down, as soon as you organize your portfolio in
a certain way is going to be much more simple
for you to find a job, but makes sure to apply. Let's say in this case, let's stick to this scenario. If you're just
working by width cars and about cars with car brands, you're going to apply to
different car brands and not makeup artists and not music artist and
stuff like that. You're just going
to focus all of your efforts into
this one niche. You can always turn
that around later, but especially when
you're getting started, it's much more better
if you can focus all of your efforts into one
niche or one industry, because that way is going
to be much more simple for you to create your portfolio, to target all of
your next leads, and to make your
sales pitch e.g. to organize all of
your documents alike. Contracts, like proposal,
templates, like design briefs. All of these things that we
talked about in this course is going to be much better and much simpler for you to do. So if you just focus on one type of industry
or one type of niche, you can also work with local
clients, are global clients. It doesn't really matter. You always have to
have your portfolio. Finally, one last
thing I can give you. One last tip I can
give you about your portfolio is always
have your image in it. Because people like to see you. People like to work
with people and not with some sort of brand
or some sort of computer. They want to see who you are. Make sure to put
in your portfolio. Make sure to put some things that are different about you. Are you loud or quiet? Do like dark things? Do like light things
like I don't know, some flashy clothes who do like to sit in the
dark or do like jokes, do like to watch movies, do like to ride bicycle, do have thousand cats do have. What is the thing
that differentiates you from all of the other
designers out there. It can be really small, it can be really big. It doesn't matter. Just make sure to put that in. It's going to put is
going to humanize you rather than for clients
to look at you as a machine. Just remember these
people are looking through thousands
different portfolios. So you have to stand
out from the crowd in order to get their attention
and in order to be hired. So make sure to do just that. And finally, when you
format your work, make sure to start
from the top and go all the way down
to the bottom, like we mentioned in the
UX case studies section. Make sure to always
start at the top. Which problem have you solved in right there at the bottom of your presentation is going
to be the final result. Finally, for this class, I want to wish you
luck in your job. Hunt. Make sure
to never give up. Make sure to be persistent, makes sure to be consistent. It's going to be difficult. You're going to face
rejections all the time, but just keep pushing through
it and you're going to find your dream job
sooner than later. Thank you so much for watching this lesson and this
part of the class. And once again, good luck
with your job. Hunt.
211. Course Conclusion And Next Steps: There we go. We reach the end of this class. Thank you so much for watching. And I really, really truly hope that you learn
something new, that you are going
to implement some of these learnings in
your design process. And I truly wish you
luck in finding a job. If you don't have one,
if you're already have on a truly wish you to find a pattern one or to improve that one using some of these techniques
that you'll learn. Remember, if at any
point you get stuck during this class or after
watching this class, you can always check with me. You can always reach out
to me via e-mail, e.g. or via this website. I'm always there to help you
and I'll be glad to do so. Make sure to follow
some of these methods. If they are not
right fit for you, then you can skip them
until a later date. If you are getting
a job at a company, makes sure to always explore
what is their process, because all of these
companies have different processes in place. If you're working as
a solo freelancer, then each client is going
to be slightly different. And when you're working
with these platforms, each platform is going to
be slightly different. So just try to understand
what works for you because that's the most
important thing right here. If you don't like working with mood boards, don't use them. If you don't like working with paper wireframes,
don't use them. Don't burden yourself too much about any one of these
steps along the way. They are all important steps
of the design process. But if you find it along the way that some of
these don't work for you, simply don't use them. Don't trouble yourself too
much with any one of these. Because if it doesn't
work for you, then don't use it. Thank you so much once again
for watching this course, make sure to check on
my YouTube channel, which is Alex on design. I'm also going to link it
somewhere in this course. I'm creating UI UX
tutorials all the time. I'm creating a lot of these
different courses all the time and I'm always
there to help you along. I also have a Facebook group, so make sure to join that if
you want to post your work there alongside your
fellow students for them to see your work. Or if you just want to get some quick feedback
from myself once again. And finally, thank you
so much for watching. And I really wish
you luck in whatever you are doing in the UX field. Take care.
Aleksandar Cucukovic, Improving lives, one pixel at a time.
