Hey, everyone, and welcome back.
So we are going to be talking about how we bring everything together, so we talked about how to create
different types of components.
We talked about like creating recipes for our design system.
Let's take a look at what that looks like right now.
So over here, we have our major, like foundational base styles.
We have our colors.
We have things like typography, iconography.
If we go into our components, we have stuff like avatars checkboxes different various inputs.
And you may be asking me, well, Daniel, how do I bring this all together?
Like, how do I use these things?
So at this point, you probably have started to, you know, created some more high fidelity designs.
You've settled on more of a specific style.
So as you can tell, things have come together a bit more and there is much more like style definition
in the different types of components that we've created.
So you can tell that we definitely have a direction to go in.
Now, as I said before, design systems are always changing.
We are constantly iterating on them, but they give us a great way to have like a bunch of components
in one place that you can update and have it update through the rest of your application.
So this is my current iteration of the design system for Habitual.
And what I've created here are a bunch of recipes like I showed you, and now I want to show you what
it looks like when we actually start bringing it together.
I have a bunch of different pages laid out.
I have our own burning pages, registration, and as you can tell, they all have that very similar
style and there's a lot of visual cohesiveness.
So let me show you how I went about and actually did that.
So let's go to the wish-List.
I think that would be a great place to start.
So you can tell a lot of things have changed since the last time.
How did I create this actual page?
So as you can tell over here, I've created a frame called the header.
Let's just bring that up so we can see.
So I have everything that scrolls.
I have our footer, which is our nav.
And what I've done here is I've actually gone to my ascites tab here and I'm looking through here and
I see my main navigation component and I want the wish list component, so I'll just drag that into
my frame.
Like I've done here, and then I've set my component there, and then if I change them, I design system,
then it will automatically update in this mock up over here.
So I have one for wish-List, I have one for our cart or a shopping bag.
I have four orders.
And you see we have different variations.
Now, if we take a look at what we have over here, this is our SWIP container and you may actually
remember this from when we created a recipe for product cards.
So we had large product containers.
And what I've done is I've actually just kind of taken this recipe that we've put together.
And I've just copied it over there now, do I think we're going to use this forever?
Probably not, actually.
I can guarantee that things are going to change.
Different types of details will change within these product cards.
But this is our iteration right now, and this is what we think the user wants right now.
So if I go back, I have a recipe over here and I will continue to use this anywhere.
I see a large container that needs to be used.
And that's what I mean about having so much reusability within your design system.
You may also find that there's some components that you may have forgotten or some certain styles that
you may have forgotten.
It's very hard to build an application from the ground up so quickly without taking into account all
the different use cases.
Now, more specifically, I'm talking about like the heading over here.
The last time I thought I was going to use a more traditional, just like a capitalized text, but I've
done in all caps header for the different types of content that follows below.
And then I have Dougray Link or underlined link.
That's all capitalized right beside the on the right side.
Now, I didn't think about this before, but as I started to build out the fidelity of our application,
I found out that, you know, I need a little more variation with my typographic styles.
So I'm going to either create a new style or I'm going to just kind of create a variation.
So I have like the link here, which is this style, the interactions link style, and I've just kind
of capitalized it on my own.
And I may go back into our typography section and actually create a capitalized version there.
So that way it's just easily accessible since we're using it so much.
You may also find that, wow, I use these two typographic elements together and I use them a lot.
So I'm actually I may actually take them out here.
I'm going to actually create a frame around them.
And we'll call it content header, and this content header will be like another recipe that we use.
You'll notice that whenever I move this frame, then it gets moved as well.
This can have that on both sides.
So we'll see what that looks like when we start to shrink it down.
So now we have our own recipe for that section and we can just kind of copy and paste that from our
design system whenever we need it.
So remember, your design system is kind of like that source of truth and you're never going to get
it right in the first try and you're going to continually iterate on it as you see your application
grow and as new demands need to be met.
Like if you new learnings that you found out through user testing or just general analytics, you'll
find out that maybe we should have like a big button on the bottom of these cards that says add to CART
and I'll show you that and how we can iterate later on.
So this is what I've done for the wish-List page right now.
I've also created like different variations.
I'm thinking through these different use cases, more in depth right now, like I've done the user flows
for them.
And I thought, OK, when you come to the wishlists pages, a couple of different scenarios here.
We have like a locked out version where, you know, you haven't logged in yet.
So we have that CTA at the top pushes them to like a sign up or a login screen.
I also have a card here that says you have no safe products.
You know, you can start saving to add to wishlists or creating one now.
So I don't have a log in.
This is probably going to prompt me to create one.
So I have that.
I've also incorporated different elements like illustration.
So let's take a look at that really quickly.
So what I've done here is I've started to use these illustrations through a plug in and I'll show you
with that plug in is called it's actually just called illustrations.
So it's launch that it's running right now.
OK, so pretty funky plug in over here.
And what I've done is I've just taken like one like this.
Let's just throw that in there.
Let's close that plug in.
So I've taken this illustration that we've gotten from that plug in.
And a shift option for that, so I can scale it appropriately.
OK, and what I've done is I've just used our brand colors, so I'll use like the primary to replace
that and to replace the block, I'll use like just a lighter gray.
And just like a little use of an illustration like that makes this card much more better.
Like, if we remove that, it doesn't necessarily have the the same effect that it did prior.
So let's just move that up so as you can tell, it's really plain, the illustration adds a little more
of a dynamic touch to it.
It makes a little more exciting and gives your application a little bit more personality.
So that is what I've done here.
And like I said before, I've noticed that I've started to use cards like this to prompt users to do
certain things with like a primary button.
I have like a secondary copy and I also have the primary copy over here.
And then an illustration.
I'll create card and I may actually create a component out of this now because I found that I'm using
a bunch of different illustrations.
I'm using this a bunch of different scenarios that it may be reusable.
So that's another example of how you find more reusability as you start to design.
I've also created like a title over here with a background.
So this is our header.
So all housing right now is the background color, it has the wish list copy and the avatar can actually
come in here as well.
OK, you can throw that in there and then we can just say log in CTA and right now we have a nice header
component as well.
So that is another way to start to build out your design system a bit more because we do have some top
navigation options.
Now, let's take a look at some other options we have on wish-List.
So over here, when you actually have an active list and you've logged in, you have your avatar, you
see how things have changed a bit.
You have like your wish list at the top.
So right now I have like a personal wish list.
I'm using this component in here as well, which is like your invite.
I'm using a horizontal component that possibly opens up like a list where you can share this.
You can invite more people possibly or actually just delete the list and you'll probably open up an
overlay within whatever operating system you using, whether that's iOS and Android, as you can tell
them, using a small wish list components that we've created these horizontal car reviews.
I've created another observer over here and I have another CTA, which I'm using the secondary button
now, as you can tell, like this seems like a pretty standard thing that we're going to probably be
using a lot of.
And this makes sense to probably create, like either a component out of something like this or just
a recipe so that we can reuse that.
And again, I'm repeating this same kind of thing over here, like I suggested, for U.S. possibly showing
them results that are based off of their recommendations and based off of their warrants within their
wish list.
So I have like some Bose headphones over here.
You know, they coincide with maybe the music that this person is listening to or just general technology.
So that's just another option we have in wish-List, and the last option I have here is what happens
if a user comes here and they don't have a wish list, but they are logged in.
So now what they need to do is all you need to do is create a wish list.
They'll select the CTA over here and it will prompt them to kind of name a wish list, invite some people
and then they can go ahead and start saving to it.
So that is what we have here thus far for wish-List, there are so many other scenarios like what happens
if we don't have a wish list?
What happens if we do have a wish list?
But what happens when we first click this?
Where will it go?
Will it prompt me within a model to say I want to save to this specific wish list or that specific wish
list?
So as you can tell, as you start building out the application, you'll realize that while there's so
many different use cases that I haven't necessarily thought about, and that's totally fine, because
that's just the nature of the job and that's just the nature of actually designing from low fidelity
to high fidelity.
So this is how we've built out wish thus far, using some of the components that we've created, using
the recipes that we've created and actually finding some new components and new recipes along the way.