Everyone, and welcome back, we covered a ton of content around different types of design theories,
like anything in relation to the basics, in terms of like typography, color forms, grids.
I mean, we covered in the beginning more wireframe, basic stuff, user first and now I think it's
time to start building up our fidelity.
Now, this is a big topic in the design realm, I would say, in terms of like where do we start?
How do we end up somewhere and design fidelity is just it's something hard.
And I don't know if there's any really right answer.
I guess you can just say that we should always start just quick.
And you start with your sketches.
I have here are wire frames that we designed, which were really great.
Here's our home page.
And we should really start somewhere like here and build our way up over time.
Now, nothing is ever designed and perfected in the same step.
This is something that never happens, going to those final beautiful designs.
That takes a lot of testing and refinement.
And that's why we use those prototypes that we made.
And that's why we use like these wire frames and sketches that we created.
You want to continuously build upon your learnings instead of jumping right into beautiful designs.
And you saw that and how we've handled that over this entire course.
We've started with sketching and we gradually started to build our way up.
We've covered a lot of different topics around style.
And I think now is the time to really kind of start to think about that before we get into that.
I think it's a great Segway into, you know, thinking about building, measuring and learning.
And that's something I always try to incorporate in my designs and my design process.
This is something you should really apply to everything you do, and you should go and read the book
Lean Startup into amazing book.
And it really teaches this build, measure, learn cycle.
So build is to explore your ideas and prototype those possibilities like we were talking about with
those basic prototyping and wireframe, measuring, you know, testing your assumptions always go out
there and user test, just put it in front of a user, get their feedback quickly and the next step
is learning.
So learn from the feedback, learn from your users and validate just so you can squash your assumptions
just so you can get right back into building again.
Think of it as a circular cycle.
So build, measure, learn, keep that always at the center of your design process.
That's what I feel like we've done here thus far.
I mean, we haven't user tested just yet, but we've built a lot of designs just basically with wireframe
sketches.
We've also went into different things like typography.
So this is the type system that I've started to build out, not finalized just yet.
I've picked a typeface.
I'm using Lieto or Loto and I've created a bunch of styles and just headings text.
So I've started to think about these types of things.
What I would do in my process is to see what works in terms of visual exploration, in terms of typography,
and start to build up to that and see what we need.
Even color palette.
This is what we've kind of built together and this isn't finalized at all.
And we should continuously try to incorporate that into our designs and just see where we kind of lead.
We may colors like these colors we may just stick with like a monochromatic scheme.
So it's that's just something to think about.
You have to kind of explore all these different styles.
We also kind of jumped right into our form exploration when we were talking about foreign best practices.
So you could see that we're using some of our own colors here.
We were just starting to see what different types of inputs could look like when they're disabled.
I like these buttons.
We could start seeing what these types of things could look like, these little checkbox squares.
We also start to think about like just general hierarchy when it comes to copy.
And the way we lay that out, in essence, what you want to do is you want to seek your feedback early
and go on to learn and apply.
This is how you build an understanding about the product you're building, but this is also how you
build and reach that level and type of fidelity that resonates with your users.
So the reason we seek feedback is to use those learnings to inform and improve our designs, waiting
too late to test or find that feedback.
And then it often is just way too late to actually act on that feedback and it could be way too costly.
So you use those low fidelity wireframe.
Let's just go back to that quickly.
So use these to start getting feedback early, and then you can continue to improve on your product
and build up that fidelity and continue to test, you should just test with these designs.
They may not actually do good at testing like those small micro interactions or just motion in general
and stuff like that.
And we'll get into that.
But these are great for testing things like hierarchy, layout, the type of content you have, that
placement, maybe just navigation, a hierarchy as well.
So use that as a way to just validate your assumptions.
This can really have a massive impact on how we build out certain elements.
So in an example, typography, are things legible?
Can people read the small copy?
Are things readable?
Is there enough hierarchy and contrast between typographic elements?
Like if I were to think about contrast in hierarchy, I would go right into like just product details
if I squint, are things blurring together?
So I'm looking to create that contrast early on and test that with a hierarchy of information.
Are things in the right place?
Does this make sense?
In terms of the homepage.
How about there's a navigation structure you need to be reworked, is this accessible, is it usable?
Should we stop using the search at the top?
And incorporated maybe into the navigation.
So these are questions that we're asking ourselves, what will the style of our components does the
style of this card over here make things look too condensed?
Does this budding.
Like these kind of square buttons that I have or this button, do they look clickable or does it seem
clickable to seem like a user can interact with it?
Are inputs actually working properly?
Let's move that.
Let's go back to our our registration form, so we have all these inputs, I mean, do they do they
work properly?
Do users easily interact with them?
So we're testing all of these assumptions that we have.
It has a really profound impact on all of our choices.
And you shouldn't be making large decisions without proper feedback.
So I just wanted to take the time to stress this, because a lot of people like to really jump into
high fidelity designs right off the bat.
And that is just a no no.
Start with your sketches.
Gradually build yourself up, because if you start with beautiful designs without figuring out if certain
things do not work or do work, then you're setting yourself up for a big surprise later on when you
actually deliver that to users and you find out maybe users aren't interacting, users aren't getting
too deep into the funnel of like checking out or even using your application.
So remember to always test your wire frames, just get feedback early and learn from it and then jump
into designs and visual exploration later on and gradually build up that fidelity.
That's all I wanted to say about how to build design fidelity.
Next, we're actually going to jump in and start doing that ourselves.
We're going to start working on the home page next.
That will be, I think, a great start to figuring out the type of color palette that we want to incorporate
our typography system, fleshing that out some more, just generally seeing what types of components
that we're going to have to build for in the future.
Can't wait to get you back in here and working on the home page.