Transcripts
1. Class & Teacher Introduction: Hey there, I'm Kate
Liebich and I'm User Experience designer
from Frankfurt, Germany. Today, let's dive into the
world of Neumorphism and discover how to add life and
death to the interfaces. Throughout my career, I've taken all sorts of projects from
simple to super complex. But trust me, Neumorphic
designs can be a bit of a puzzle for
designers and developers. They exciting three is playing
with the idea of depth in your designs is like adding
a whole new dimension. In this course, I'm
excited to show you my special tricks on how to craft those
kind of Interfaces. I'm going to talk about
shadows and light, the dynamic duo that makes your designs pops
out like that 3D. We will also get
our hands dirty. Creating elements that
looked craft in are carved out Using bunch
of cool methods. Also, I'm going
to share with you a super cool and unique
technique on how to pick a red color for the Neumorphic Elements
and Neumorphic designs, I would say that this
technique you can actually use in the future for
any of your projects. We are going to get our
creative mood and put together a couple of screens That's show off your new skills. By the end of this
course, I promised you, you'll have a confidence to whip up Neumorphic you is like a pro. And don't forget that the
project we are going to do at the end of this course will be the cherry on top of
your design portfolio. I'm looking forward to
see you in this course. Ready to rock Neumorphic
designs. See you there.
2. Different UI-morphism Styles: You probably don't remember how or the Alt interfaces look like. The elements you see here are the first step towards
the skeumorphism. This dye was driven by things
from the real-world as an explanation of new
and unknown functions, it is using an analogy or metaphor that
everyone understands. So anyone could figure
out how a computer works. Remember the icon of trash in the old Mac OS or the Safari
icon in 2003 was like that. It is a pure skeumorphism. But time goes fast. Users have long, long to
distinguish a button from icon without unnecessary
shadows and highlights. And three-dimensional
images have particular disappeared
from interfaces. Smartphones have become the norm and overload it interfaces
only annoy people. Skeumorphism as a style
becomes outdated, but there are many different
stuff came out of it. Flat design became popular
after the release of iOS seven and is still
used by everyone from design studios to Apple,
Google, and Microsoft. It is considered the successor
to graphic skeumorphism. But the main idea of
Leginon is opposite. As nowadays the interface
should not distract the user with extra
texture and volume. But in 2000 20s, everything turned
into something new. And alternative. Neomorphism. A combination of volume
and flat elements. But it is impossible to
use it in its pure form. Because then it will be
difficult for the user to understand the state of
the interface elements. Colors are very close
to each other in tone. It requests a lot of
whitespace in which all buttons remain distinguishable
and understandable. Therefore, it performed well in a mobile application with a
small number of functions. Now you have an understanding
of UI-morphism Styles. In this course, we are
going to learn how we can easily build and design those elements using only lights and shadows and how to combine those elements with
other important parts in order to use them
in the interface. Let's dive into the
Figma software and none the main tools which we're
going to use in this course
3. Short Figma Overview: In this video, I'm going to
provide the first Overview of the Figma software and powerful design tool used by professionals
around the world. I personally prefer to
use Figma as you can create your free account and
use it for your own needs. And in the same time, you
will have all tools you need to create a standing
user interfaces. If you get used to another tool, you can skip this lesson and go to the next one where
we are going to learn how you can structure and how you can
build pedals and light. So it's basically doesn't matter which tool you are going to use. The basics are the same. Let's get started with the
overview of the software. When you launch Figma, you'll be greeted with
a blank can document. The create a new document. Simply click through
the plus button in the top-left corner, or use the keyboard shortcut for Windows Control plus M
for Mac, common plus N. Once you have your
document open, you may want to organize your work into
different sections. Figma allows you to add multiple
pages to your document. To add a new page, go to the right Panel and
click on the page icon. You can also use it. The keyboard shortcut for
Windows Control plus, plus N for no common
plus plus N. Now, let's dive into the creation
of your first frame. A frame represents
a specific screen or section of your design. To create a frame, click on the frame icon in the left toolbar or use
the keyboard shortcut F. Simply click to the main area
and draw your first frame. On the right side,
you can change the size of the
frame if you need. Figma offers a variety of tools to help you design
and create your vision. Here I a few essential
wants to get you started. Move tool. This tool allows you
to select and move objects within your
design shape tool. Use this tool to draw
shapes such as rectangles, circles, and polygons.
The pen tool. The Pen tool lets you create
costume shapes and passed by placing anchor points and adjusting their
curves. Texts tool. With a text tool, you can add an EditText in your designs. Lastly, let's explore
the right panel where you find a range of controls
to fine-tune your designs. Let's first draw a rectangle. You can use keyboard
shortcuts are, and we are going to
change the size of the rectangle on the right side just to try and how that works. Let's explore further
the right panel. Here I feel key features
to be aware of alignments. These controls help you to align objects both horizontally
and vertical. Constraints allow
you to define how objects behave and respond
when the design is resized. Figma provides four
types of constraints. Left, right, top, bottom scale constrain and
fixed constraint. You can play around with
them and see how it works. Layer settings. This selection enables you
to adjust layer properties, such as the Opacity, Blend Modes, and Effects. Figma provides a
color picker tool to choose an apply colors to
your designs elements easily. It can be a fill or stroke, but we will look at that
in details in the next. And that's it for this
quick overview of Figma. Remember, this is just
the tip of the iceberg. Figma offers numerous powerful features
of capabilities to explore and allowing you to bring your design ideas to life. In the upcoming lesson, we are going to shine a
spotlight on the Effects Panel. And trust me, it's going
to be shadowing Fn. We'll dive into the
shadow settings and explore different setups. Get ready to witness the magic power of the
shadows for your Interfaces, we'll try different setups and you will see how
it's easier just with shadow to add a Volume to the elements and to
your interfaces. So let's get started.
4. Figma: Shadow Effects Panel: In this lesson, we're going to dive deeper into
one of the figma. Shadow Effects. Get ready to bring
it to your designs. Using only Shadow Effects, you can add a touch of realism at depth to your
designs elements. Let's begin and find out how to apply shadows
in Figma software. For this demonstration,
let's use a simple circle
shape as an example. We can find it the
left top corner. Okay, Let's draw small circle. To apply a Shadow, select the shape and
navigate to the right panel. Simply click to the plus button and you will find the magic
we're looking for the shadow. Now, let's explore the
different settings available for creating
shadows and Figma. By adjusting these settings, you can unleash your
creativity and customize the shadows to achieve
the desired effect. First, let's look at
the X and Y positions. This settings control the horizontal and
vertical positioning of the drop shadow. You can create unique effects by tweaking the values
of each axis. Also, you can try
negative numbers, and that will also work in
the opposite direction. See how you can move the shadow to different directions
by adjusting the values. It allows you to experiment
and create dynamic effects. Blur. The blur setting determines the softness or
sharpness on the Shadow. Higher blur values
create a softer, more diffused
shadow, while lower wages results in a
crisp, undefined Shadow. Notice how the shadow
becomes softer or sharper as we
adjust the blur value. Play around with this setting to achieve the desired
level of effect. Let's continue with
the spread setting, which controls the size or expansion of the shadow
around the shape. Increasing the
spread value makes the shadow extend further
from the shapes edges. Look how the shadow expands or contrast as we modify
this pred value. This setting allows you to control the reach of the Shadow, creating interesting
visual effects, which we definitely will
use in our next lessons. You can definitely change
the color of the shadow, the color setting that reminds
the hue of the shadow. You can choose any
color that complements your design or matches
the desert ambience. Explore different
shadow colors to enhance the mood of your design. Play around with
various US until you find the perfect match. The opacity setting controls the transparency of the Shadow. Higher opacity values results in a more pronounced
and solid shadow. While lower values make
the shadow more subtle. Adjusting the opacity can dramatically change
the shadow impact. Experiment with different
levels to strike the perfect balance between
permanence and sudden. Figma also offers
an inner shadows, which creates a shadow effect inside the shape
rather than outside. It can be used to add a deaf
or simulate embassy Effects. We'll definitely use it. The inner shadow setting opens up a whole new
range of disabilities. Try it out to add the
touch and create depth. One more existing feature
dimension is that Figma allows you to apply multiple
shadows to single shape. This means you can wear and combine
different Shadow Effects, giving you even more
control over your designs. Visual impact just with the
shadow to you can bring different steps to
UI elements and add some kind of a call
it static animation. For example, for hover state, the button has smaller
shadow than the default one, and it gives feeling that it
moves and user physically. In the next lesson, I'm going to show you
how to apply it several Shadow Effects and light
effects to one element. This is our goal to create
a Neumorphic Elements and then place them to your interfaces
through your designs.
5. Shadows and Light Architecture : Before we dive into the element creation for
the future user interface, Let's have a quick
look at the light and shadow Architecture
in simple terms. If we want to make things
look 3D on a flat surface, we need to understand how
light works and where the shadows should go
to make it look real. By moving glide around, we can make shadows go in different directions and
be darker or lighter. This helps us shape
our design elements and make them look like
they have Volume and form. So let's imagine that
we have light source. I'll places in the
left top corner. Of course, when we
will be creating the UI itself, the
user interface, we don't need to play
some kind of light, but at least we have to
imagine where it is in order to place our shadows
in the correct way. So if again, I will
draw some circle. And as you can see here already, I added a shadow. And the Shadow for
this particular, in this particular
example should be on the opposite side of
the light source. And light reflects
or the light side of this element actually
facing the light. Another tip is that if you place some objects
closer to the light, then you can see
that the shadow has a bit more stronger color. It is much stronger. And for the elements
which are a bit far from the light than the
delight become less stronger and more saddled
like for these elements. Another thing also you can see between these two
different circles. It feels like this
one a bit taller. And this big circle
has a more flat shape. It's also a part of the Light Architecture
and Shadow Architecture. So as you can see here, the shadow is very
small and subtle. And then we feel that this is very flat element
and this shadow is a bit more longer and
this circle fuels taller. You can also find it in
your space around. You. Now look at your desk or in
your room and you will see, and you will find that
the taller they have, of course, longer shadow. Another tip which we
should remember when we come back to
drawing interfaces, is that all our shadows, they should be placed on the same side for all the
elements in one interface. What I mean by that,
so imagine if we put place this light on the other
side, on the right side. So it means that all
our shadows here also knew that neither term. So let's try that. The same logic is here. The light is placed at
the right top corner. All the elements have their
shadows on the opposite side. Make sure that all the elements have shadows on the same side. Otherwise, you will
get the P38 result. When we are going to design user interface and use our normal of elements
which we will create. We should use them
gently and delicately, all around the interface
and the user as well. So let's start the next
lesson and create finally, our Elements for the interfaces
6. Creating Various Neumorphic Elements: In this lesson, we will start
with a very simple setup. Remember that our
goal is to achieve some kind of Volume effect. But on the flat surface. The first thing which I would
like to show you is just to add to simple drop
shadows to one element. So let's come back to Figma. But first let's create a circle. We will use the hotkey 0, or just simply find our element
at the top left corner. I would advise you not to have a really big otherwise Shadow and our specs can want to work
and will be too small. Let's pick a size of 160. And another important thing, you need to make sure
that your background also using a Beta of say, warm color. This is the correct hex
and the circle itself also has to be with the same
color than it will. You will see that will
look more realistic in order to change the
background color and pick the artboard itself. And then here,
change the field to the needed hex to change the circle color as well
on the right panel. When the circle is selected, you can change the color here, or you can just simply place. You can simply pick it from
the surface by clicking, I'm in the keyboard. Okay, so let's try to
achieve our goal and create the first
Neumorphic element by clicking this plus
on the right side. So we add the first drop shadow. It, you know, it already
looks quite nice. But let's try to achieve
a more realistic effect. So I will follow
the specs already prepared for this
particular circle. Let's have a look in here. Exists 20. Why is almost 20? The blurb parameter is 14. And spread I won't use in
this example the color hex. Let's color before a E 916. Nice. So our element already
looks very realistic. And as you remember the
spotlight on the left side, I still have it here
just to show you and to follow the
structure we discussed. Now, let's add another effect
which will be our light, also the drop shadow effect. So we'll click Plus in
the right Panel again. And now we will use the
white-collar in order to build. This reflects on the left side. Okay, so let's pick them
white color, just like here. And the opacity will
be eight per cent. And all our position will be opposite to the position
of the shadow itself. So it's minus -20 and -20 again, and the blower is 16. Nice. Let's have a look
how it looks like. So this is our first
Neumorphic Elements which will actually can
already use in interface. But let's try another specs. This is a bit more subtle. Let's build a bit more
flat Elements. Elements. I will copy and the
same circle because some specs beam similar and
it's just easier for us. Again. Let's go to the Effects section. Change the drop
shadow to this back. So X is six-by-six blurb 16. And the color, as you
can see, is the same. And let's change
the opacity to 17. Let's have a look. The light, the light side has
also a bit different specs. So we will use minus ten or
X minus as well, minus ten. Why bluer? He's 30. The rest is correct. Color and opacity. We already changed Okay, Let's have a look. If you compare this to Elements, you can see that
this look a bit more flat and this circle
a bit more factoring. So let's try another
example which will be a bit more complex
in terms of our specs, and we need to add four shadows
with different settings. The first drop shadow, with this parameters,
it's 66160. The color is the same, 70% of their capacity. Okay, then we need to
add another drop shadow. You will see the difference
between these two elements. That this circle will
be more natural, more complex as we will
have more effects on top. So we will add another
shadow with this parameters for four to four blower
spread using and the colors. Whereas concave upwards. So it's 55550 and the opacity is ten. Okay? And we will place it, you can move them. Shadows around. We will place it in the bottom. The light effect is minus
ten, minus 1034 blur. And the white-collar, of course. And I'll opacity,
transparency is a T. Let's add another
light, reflects. And it's quite similar,
but straight out. So it's minus minus ten. Minus ten. So blur is ten. The color white. And they are passive. Yeah. Okay, So we have four different settings
for this element. And let's see what is the
difference between this and it's very subtle difference. But in the interface
you will see that this element looks
a bit more natural. Neumorphism is all
about achieving a 3D effect by using
shadow and light. So the elements will be appearing or inserting
in the surface. Let's start the next lesson and learn about convex
and concave Elements
7. Concave and Convex Elements: Let's start with creating
Convex Elements. Context shapes appear arise from the background as they're
inviting you to touch them. Concave elements have
an instant appearance as if they are curved
into the surface. Of course, shadows and light are the key ingredients in order
to achieve these effects. Here I created a several
elements and Styles. And B are going to
create them together. I already decided to have a name for each
style of this element. And we will see another option in Figma
where you can also save for the future in order to use it for any
other Elements. Let's start with our first
concave and Convex Elements. One will be Convex tall sharp, and another one
concave, deep sharp. I'll place it, beat the top and we will pick
another shape tool, which will be a rectangle. Breasts are at your keyboard or just go to left
side, top corner. And peak rectangle. The size. Let's type 150
pixels by one-fifth. And important point. Let's also pick their
background color as this one, y1, y1, y1. It's very light color
on almost white, but still has a bit of
difference from the white. I can show you if I will, place a rectangle
and make it white. As you can see, it's
quite different. It has like a this grayish,
warm grayish color. Okay, So we have our rectangle. Let's also make the
corners a bit smoother. I'll put here like 32, probably. Yeah, that's nice for creating
this nice smooth Elements. And let's dive into
our FX settings. And we would need to
create two drop shadows and two inner shadows in
order to achieve this effect. And don't forget to pick the same color of the
rectangle as our background. Let's do that together. I'll just do it with them
with this tone here. Okay. So let's create
first drop shadow. Just again, click plus
and the effect panel. And we will use this
first settings in order to achieve the shadow effect and it will be our
shadow outside. So X is 15. Why is 15? Blur is 35. Transparency opacity is 35. And let's pick this color. We will use it in
this lesson, a lot. 806-80-6806. Okay, that looks already nice. Okay, Then let's create
another drop shadow, which will be our light
reflects outside. So somewhere at the
left top corner. So it's minus ten. Minus ten is 40 color as
this is the lightest white. Just be glad, or six times. Leather F. And their opacity, as you
can see, it's 70. Nice. Then I also advise you, this already looks good. I also advise you to bring
it more depth and selecting our shape and add effect, we have to pick inner shadow
instead of drop-shadow. Be careful with that. And we are going to
place five whys. Five, blur is 40. And the color, as I mentioned, we will use it a lot this time. And Duane T is our opacity. Okay, so now it has like
it's a Convex Elements, but now it has a little
bit of concave inside. So it's like pushing a
little bit in the middle. And let's add also a
lighter or efflux inside, which will be also inside. Inner shadow with white
color as our light effect. And let's see, it's minus ten
-10.44 blur effect and 17%. Okay, now we have it. Now. Let's use interesting
feature which Figma offers We will save this. Let's, we will save this Fx
altogether in one style. I will call this style
Convex, tall sharp, but you can call it as you
want. So how to do this? In this Effects Panel, you can see these four dots. We click here and we click again to the
plus, create a style. This is the purview
of our style. And I will place the name Convex tall sharp and
create this style. See now it's appearing here. And if I will draw
any other rectangle, or let's circle shape ellipse. And now I go to the effect
panel and I see my style here, here, Convex talk
sharp, and I click it. And it's already has
this all settings. And actually that's
very convenient. It's very fast to create further Elements for
your interfaces, if you will save it now. And today we will create
six different styles. You can already in the next, our lessons use them in order
to create some interfaces. Okay, let's continue. And we have this concave, deep sharper call this style. And let's try again
to achieve the same, the same effect as
we see in here. Again, I'm drawing a
rectangle which will be one by 150 pixels. And we will again have
round smooth corners. Also don't forget to pick the same color of the background and directly
going into the Effects. So first, Shadow outside, it's our color, which
I will be using again. And X is 15. Why is 15? Lower? Is 40. As you can see, the
parameters is very similar to each
other all the time or just different position, different, mostly
blur and opacity. And then we have really a
completely different effect. Okay, So the first
drop shadow is done. Then let's create
outside light reflects. For that we would need
again drop-shadow. And for the light will
always use the Right Color. X is minus ten. Y is minus ten is 40. And at. Okay, Next, we will use an inner shadow, inner shadow and
eight for X, Y color. For T for Boston
Tea and blur is 15. Nice. And the last Inner Shadow are going to select them shape. Last inner shadow
will be minus eight. Minus eight. Color is white, nerve is 15, and opacity is 60. Okay, Nice. And we can create a
style again, again, four dots plus, and I'll
call it concave, deep sharp. Again, you can use your naming which is
convenient for you. Create a style. Okay, Now, let's continue. And let's create this styles which a little bit more flat. And I dive directly to the
creation of this element. Again, let's again the
rectum go draw it. Don't forget to use shift in
order to create a square, actually not the rectangle. And the size is the same, 150, the corner is 30 to this most of the corners, corner, radius. And the color, you pick
again, the background color. In the next lesson, I'm going to talk about
colors and how to create a really cool and nice
colors for your Neomorphism. And they're more elements. I will show you some of my secrets how I
usually creating them. So let's dive into our styles. First. Again, Effects. Drop Shadow for 4 h eight. I will color is at 6.40
is our policy team. Okay. Next, directly, we are
creating next drop shadow, which will be the
lighter flux outside. And white-collar mine. Dan, ten or 40.74, Opacity. Next effect is inner shadow. Again, our dark,
warm color is five. Whys 5 h 40? 20%. And last shadow
light reflex, it's mine and then
minus ten, nor is 40. And yeah, of course color is
white and 70% of opacity. And we have our element
with all the needed Styles. Now, let's save it
into our library. Again, four dots
at the new style. Alcohol it Convex low, Sharpe, and place it
into their library. Let's directly dive into
the next component. Okay, We will create concave
element 15030 to form, coordinate, reduce
background color, and dive into the Effects. First drop shadow. This 18. Follow the settings in here. Color. The blur is 30.15% for they'll pass it to
another drop shadow. The light effect outside. Again, the color is white for our lights, minus
ten, -1,030.30%. Next is inner shadow. Shadow, and the
color for Y is four, blur is eight and positive 60. And the last one, the light reflects inside. Again, it's inner shadow, it's minus four. Minus four. Color. White. Blur is drink, tea and opacity at. Let's save it. Style library. So one comment
when you save this out, the elements should be, of course, select it, need to be selected. And you style concave,
low sharper code. And the next two elements, their bit more smoother. Also nice for some UI and you can use them as
well for your ideas. Let's create first
Convex smooth element. Again, the same tango. I think once you repeat all these six elements,
you will learn. And you will understand
what actually and how all these
different parameters play around together in order to achieve or concave
effect or Convex effect. So as you can see when you have older shadows
on the right side, and like in this
example, on the outside. And there are more stronger
than it feels like the element is Convex. But if you place a
more stronger shadow inside than it feels that
this element is concave. Let's continue with
our next style. Again, one-fifth to for them, size 30 to four, corner radius. The background
color, and dive into the effect settings first
is our drop shadow, and the settings will be excess zero bit
different settings. But I think what we
want to achieve is like a smooth Convex Elements with
some kind of smooth shape. So zero is zero, Y is four, blur is 30, and the color
is a bit different. It's our background color. Again, Let's put it. Next element. Light reflects outside. Again. We add them. We edited the drop
shadow, ten for 54. Why? Than then? Dark, warm color, cheap percent is positive. And learn 40. Let's add inner shadow. If ten or 15. Why? Color is white? Laura? 14. And opacity at look, become actually this also
some red you can use summer. But let's finish that. Let's add also an inner shadow for them. Shadow itself, not the
light and the color. And the color should be different from the
rest will too deep what we've done minus
2010 blur is 20.40%. Okay? And as before, let's create style
Convex smoothly. I call it and save
it to our library. Okay, Then the last
element in this lesson, again, let's create
the rectangle. Same size and same corner, radius 32, same color for them. For the Elements, be picked from the background and
add the drop shadow. First, 188-30-4806 for the color and 15 for the next drop. Shadow is minus four, X minus Y. Blurb, and 34 Pasiphae, the color is white
in our shadow. 88 is dirty color. And 40 form of Bassett. And last inner shadow. So it's minus four X minus Y. Four tuple blur, 60,
opacity and white-collar. And we've done with the last
element in this lesson. Let's now save it to our Styles. I will call it concave smooth in order to use
it in the next lessons. So now we've learned how to manipulate with all their
effects in order to create different styles
for concave and Convex Elements with different deepness and also like smooth effect. And in the next lesson, I'm going to talk about colors. That's very important. See you in the next lesson.
8. Picking the Right Color: Choosing the right color for
your Elements and shape is crucial to achieving a
stunning Neumorphic Interface. By following some simple rules, you can create a visual
experience that feels warm, cold, or something in-between. In this lesson, I
wanted to share with you unique technique, how you can actually build
the color from scratch. I know for some Designers, sometimes it can be
very challenging to find a Right Color. So let's jump right in. But first let's talk
about warm and cold cars. Understanding the difference
between them will help you create the desert Mode
in your Neumorphic designs, warm colors evoke at sense of coarseness, energy and vibrancy. While cold colors bring a feeling of calmness
and arrogance. Remember, when it comes to identifying warm and cold cars, think of blueish
greens as a cold. And reds, oranges and
reds, yellows as warm. Let's continue in
the Figma Interface. And I've already prepared two artboards for
our next lesson, the exploration of colors. If you'd like to do the same, go to the left side
of the Interface, find the menu select frame, and draw any size of
frame you prefer. Now, let's start by
picking the color palette. Choosing the Right
Color is crucial for any user interface. We need to consider the surface, the element itself,
and the shadow. For the lighting, it's usually better to go just
with a white collar, which is six times F in hex. To avoid making it harder, I'll show you a technique to select the right color
for your interface. First, I'll draw a rectangle. You can use the R
key to create one. The size doesn't matter
for this lesson, as we are focusing
only on colors. The color of the
rectangle doesn't matter, either red, green, or blue. You can pick anyone
in the color picker, place the spot somewhere
in the golden ratio. What does it mean?
The very right side, but about one-third of the
line length from the Right. It's not necessarily, but
it works better for softer, calmer colors, I would say. And you'll see why. Also, let's set the
transparency of the color. To do that, go a bit down
and set it to five per cent. Press Enter to apply the color. Now, draw another rectangle that will cover the previous one
just a little bit like that. The color for this rectangle
should be as simple, dark gray with a
transparency also set to 5%. So we're mixing two colors to find the color we're seeking, which will be our main color. Giving the Interface. Call this, or warmish, in that case, more
colder, I would say mood. The grayish color helps
too deep in the tone. Now, to find out the hex
value for this color, draw another rectangle,
just somewhere in here. And press I on your keyboard, or use the color picker
and select the color red, the balls of the colors overlap of the
previous rectangle. This will be our main color for the future
Neumorphic Elements. And I'll show you what
to do visit later. Now, let's create a
couple more colors. Place another rectangle
somewhere here. Select our first. Create this rectangle, and move this selection to any
color you prefer. You will notice the color
of the first rectangle changes slightly
warmer or colder tone. Let's go with a warmer
color this time. Again. Use the icky at your keyboard to select the hex of overlap colors Let's do again the same
exercise and create another rectangle to quickly
copy the previous Rectangle. Press Alt, while
selecting and moving it. Now we have three colors that we can use in our
Neumorphic interface. Next, let's select the
Right Color for shadows. And I'll show you a
technique called to that. Create a frame where we will work with shadows and Styles. Use the color picker. Again, press I on the
keyboard and select the first color we create
the just, right now, just recently, let's use Effects from the previous
lesson and add colors to them. To do so, go to the effect
panel on the right side. And you should see
all your styles here. If you don't see them, make sure you are working
in the same Figma file, which we were working
in the previous lesson. As you can use this Styles we've created and eventually
in the future, turn them into the
design system. We've created another rectangle and picked a style
you might previously. For this rectangle
is selected Convex, low Sharpe if the name, if you follow the
name convention from the previous lesson. However, the colors of the background and the
element don't match well. To fix this, let's make
the rectangle smoother a bit first with 32 pixels
of the corner radius. Will detach this style to change the colors of
the shadow and surface. Click the small button behind the styles
named to do this. Now, we can see all our creator drop shadows and inner shadows from
the previous lesson for this particular style. A line all the elements with
the background by selecting your element and using the color picker and pick a color from the
background surface. It's already looks much better. However, from my perspective, the shades and other colors
don't quite match each other. So let's make it pop a bit more. How can we achieve that? Well, this is the color we created in the
previous artboard. Let's create another rectangle. Just to pick the right car, select the background color
and open the color picker. Now, let's locate where this color is situated
in the color palette. It appears to be
bluish, magenta color. To pick a shade for it. We'd prefer something
similar in the tone, but more on a grayish, dirty shade and
darker. Of course. Let's put it the spot somewhere in the middle of this space, divided into three parts and adjust the opacity to
around 80 per cent. Great. Now we need a
pick the color itself, as we did in the
previous artboard. Create another rectangle,
select this color, and we can remove
the previous one. Sees it doesn't
have any opacity. Click on the color
hex to copy it. Select your shape and go
to the Effects panel. Let's take a look at
the background shadow. We need to change it to
the color we just created. Just simply paste
the hex value here. The light part remains while, so we don't need to touch them. Now the inner shadow, again, we replaced with the
color we just created. Just copy paste the hex. Now, let's eliminate
our element. It looks pretty nice, perfect. You can use the created
stars and simply change the color of the
elements and it Shadow. Of course. You can also play around with the colors in the color
picker if you prefer, a more intuitive approach. I often do that without
specific techniques, but sometimes it helps
to use the method. I just show you when
something doesn't feel right. Okay, let's recap. It might have seemed
like a lot of steps, but once you understand
the process, it becomes easy and fast. So let's repeat it
couple of times and you will get used and
familiar with that. Let's create another artboard. Select frame and
draw another shape. I'll pick a color we
created previously. The second bit warmer, I'd say. Again, let's find
the shadow for it. First. Make the shape a
bit smoother with a sodium to pick sauce corner
radius like previous one. Select one of the Styles. I will pick a Convex Elements. You can see it
doesn't look good. The grayish cars
seems to be dirty. Let's repeat the process. First, select the color of the element from
the background, press I, and click anywhere
in the background. Now, let's try to build
the shadow color. Select the rectangle,
pick a spot in the color palette where
the color is situated, and move it somewhere around
middle of this square. But now big the shadow color. Remember, this will
be too bright, so we need adjust it a bit, create another
rectangle and select the color we created
without transparency. And to pick it's our own Hex. Select that, press Command C or Control C on Windows
to copy the hex. Now, go back to our
style palette or style menu and
change the shadows. There are four styles. The first shadow, so we
pass the select color here. Then the white light
remains unchanged. And the inner shadow we need to change as well to
the created color. Let's look at our element. It looks pretty cool. That's how you can use
different colors for Interface. As I promised, let's
try a brighter shadow. Again. Select a color we created
in the previous artboard. The last one, the third one, it's a bit greenish. Make the corner radius ready to, to make the smoother shape. And go to the effect panel. Select another style, detach it, and don't forget to select the color for the element
from the background. Vulcanized, but
still a bit dirty. Let's make the
right shadow color. Select a rectangle and big the color from the background
to find its color group. As we did in the
previous two, artboards. Move it to the bottom. And as I said, let's make it a bit brighter. To do this, push our
spot a bit to the right, and maybe somewhere in the
middle or even a bit upper. Let's see how it looks. Also, using transparency
may color deeper. You remember that? Okay. Now select this color without transparency as we
did previously. Two times. Use the dropper tool. This is our target color. Copy the hex of this
element and paste the color into the inner shadow and into the drop
shadow of our elements. It looks pretty cool. Now, you can create your own colors and
Elements for the interface. As you can see, that gives a super nice effect and give the stylish and unique
feeling of the interface. We're almost at the
end of our course. But let's come to the Dark Side of the
number of elements. Yes, you're right. In the next flex
and we're going to do a dark Mode.
Let's get started.
9. Dark Mode: I decided to add
this lesson as I think in the current state of the world is super important. As in this video, we will convert all the stats
and Elements we created in the previous lessons into
the dark Mode or that teams, most of current
implementations of the mobile or web
applications required a simple switch between
light and dark Mode, and of course for Neumorphic
interfaces as well. So let's try to create
Elements for the dark Mode. I can tell you already from the beginning
it won't be hard because we are going to use the
same styles which we already created and which we already use in the
previous lessons. We just adjust background color, adjust the color of the element. And actually, that is all. Of course, the dark teams. They are a bit specific, especially in the field and skeuomorphism design
because It's harder to make all these elements more to them more volume
as everything is quiet, dark, and almost invisible and the text is super contrast
to them backgrounds. So even if we are going to use the Neumorphic Design
for the dark teams, we should be very careful. First of all, because
the shadow itself, we can pick only a
black color for that. Otherwise it won't be visible
than won't be able to provide this volume effect or create the volume
effect for the elements. As you can see in
these examples, all the background color
and the main color. It's kinda dark, but it's
not black or pure black. So you can see the shadows and the element
actually pop from them. Surface. Okay, So let's come back to our previously created styles and quickly change
them to the dark Mode. First of all, I'll select
the first element. It is a square, 150 by 150 pixels with that
32 pixels coordinate radius. And all of them are the same. So select the first element, the touch, the style from that. And now we're going to work with all these drop shadows
and inner shadows. Let's select our in order to
change the background color. As we are going to
do the dark theme. Select our artboard,
go to the right panel. See this fuel fuel
components selected and pick a color from the palette
somewhere in the bottom, in the dark, the dark area. But of course not the very black as I already
explained otherwise, are all are standing,
won't be visible. Let's do some rather cold
colors, something like that. So as you can see, it's kinda in the bottom
and it's quite dark. But we still can distinguish
the hue of the color. Then. Goldfish effect. And of course we need to
copy the selected color as we are going to use it also
for the element itself, as you remember from
previous lessons, the color of the element and the color of the surface
should be the same. Or we can do that also just
by selecting the element. And by pressing I opened Color, Color Picker and pick the
color from the surface. Okay? Now as you can see, all our styling from previous lessons still the same and it's not what we want, it's not helping us to make
this element looks Volume. We, it looks with Volume. Okay, go to the
effect right panel. Let's see what the first
drop shadow Schulz. So let's make it super simple. The drop shadow should be
super dark so we can see it. So we can just select
very black color, which is basically
six times zero. And the opacity should be 100%. So basically there is no, there's no positive
and the color is pure. Next one is the white-collar. Remember from the
previous lessons, it was our light effect or it was basically the
reflection of the light. Here. We don't need
that so strong. And I advise you to
reduce it to add 10% Opacity. Next, inner shadow. Again, this is our shadow, but inside the element, again, we're going to pick ever
dark color and 100% opacity. And the next inner shadow, again it was white. Let's make it only ten
per cent of Boston. Look at our elements. I would say it's completed and we can use
it in the interface. And let's do the same
as all other elements. First shadow is pure
black color 100%. Next one is, it's white. So it's ten per cent, only. The inner shadow, again, it's, should be very dark and
it's 100% no transparency. And the white color,
again is tan. And of course we forgot to
pick a color from the surface. I'll do the same
with other elements. And the last one, style. Pick a black color. 100%, white-collar, 10%, again, pure black and white collar. I was ten per cent. Like to call this
10%. Pick a surface. So now we have our elements
and let's try to change. And then Dark team, the color of that team. Like here, as you can see, there are several cars and
it looks to be different. Let's use some warm color
for the background. Again, select Artboard. And let's pick a
color like that. You can use my selection. Just copy the hex from here. And what are we going to do? You tell me we select all our elements and pick
a color from the surface. And that's all. And in a second we
are going to dive into our last lesson
on this course. Congratulations. We are going to use all the create a Styles and elements in order to
finally create a User Interface
10. Creating Neumorphic Mobile Interface: This is our last
lesson in this course, and I'm super excited to
finally design an interface. Together with you, we have learned how to use
Figma software in order to create simple shapes and add to them
lights and shadows, create reusable styles, and find complex colors for the
future user interfaces. In this lesson, we're
going to create two simple screens for
the mobile application. As you probably remember, I advise using very subtle norm of elements not to
overwhelm the interface. If you have a look at triple or Pinterest and search
for Neumorphic do is, you probably will
notice that the most of the good examples we'll be using just a small amount
of those elements. The rest will be
functional and flat components that give a
User a feeling of balance. This is an example that we are going to create
in this lesson. I prepared this design upfront, and three will achieve the
same result, but together. Follow me in Figma. Let's create a frame, but let's do it a
bit differently. Select the two frame. And on the right side you will see all the
different sizes. You chicken peak for their Mobile Interface
or web interface. I'll choose the size
for the iPhone. And of course,
don't forget about all the elements you've created before and
all the styles. We definitely, we'll
be using them now. Okay, so we can start from the very beginning
from the small menu at the top of the
corner of them. Interface. Not a. To do so, I'll pick a rectangle and
draw a simple tree lines. Yeah, we can assign
color for them. Let's just pick a darker. And let's do the title of
the page as our interface will be about scheduling
an event for the user. Let's do some friendly
warning and friendly UI. If you want to create
a text and interface, you simply pick ducts to the left top corner
from the pen. And we can select
the font style. I would advise for
this interface to select a new sheriff style. Or just follow me. Pick on this font. I really like it. Let's add some space
between lines. I also want to add a small line. The bottom usually
can find it in the iPhones called
informally home bar. But it gives a more realistic
and close look to them. Real interface and real. The next element in our
interface will be the calendar. That's super easier to create. Just place a text tool
again, put some number, I select the Roboto font to
make a bit of contrast. Them. Main header. Change the size to get smaller. And what To Do, we need to place
basically 77 numbers in one row and then copy them in similar roles and
play them together. I advice you to have
a number and place it in some kind of
square so it will be easier to adjust them and
make all the calendar even. I felt that my adjustment
that wasn't me right. So quick, yeah. Rearrange a bit the
spacing between numbers and just copy paste basically all
the rows together. Now we can select all the
numbers together and move them and adjust them a bit to
the size we actually need. Almost done. Let's
remove some numbers from the start because usually not the monster,
not from one day. And place all the new
numbers from the months. It'd be tough, repetitive work, but I didn't know that way how
you can do it differently. And we need the weekends, change the color to a bit lighter to show
that to the user. And some small adjustments. See how it looks together. Other elements. I also want to place
the top bar from the iPhone to make more
Elements for the interface. Tool. Empty. Little bit,
adjust the composition. And finally, we can
use our elements which we prepared before and
we'll learn how to create. Of course, you can create
your styles for this design. But I would advice to use what we have already
adjusted little bit their radius corner to 16, and the size as
well of the button. With a mobile device, usually, it's better to have buttons more than 50 pixels in height. Otherwise, it's Hopi too
small for their finger. Simply using text to, to add an icon to the button. And let's quickly
create another icon, which will be a
magnifying glass plus Search. It looks good. I would also add some more
attention and elements of this already created events or selected the day of the calendar
for today, for example. Some more excellence. And to provide colors. Looks like we've done
with the first screen, but you want to create another
one for aiding the event. So basically when User tweaks to the plus button, the beam There will be another
screen fall for the user. Now look together at
the bowl screens. I feel like the buttons
could be a bit bigger. Our elements, and let's
change them to 65 pixels. For the second screen, Let's remove fold in the
manner in which the needs. And as it will be kinda pop up, the background should be dark. And then the pop-up itself, it appears from the top. And for this pop up, we're going to use the same
calendar picker because you Flow you creating the new event and you
need to select a date. For which date you
are going to be. Even. Change the title. And of course we're going to use another element which
you create a deposit and reach will be you
present the TextField. But let's first adjust some items in the
color picker quickly. I would advice to
select one of them. Concave element. This element will be
representing a text field, or even better say text area, where user will be adding his
description for the event. Change the color, of course, of the element, pick the
color from the background. And I see from my perspective, some of their shadows
can be a bit. Of course we need to adjust
also them corner radius. And I will attach the style and the little bits which
the opacity of their shapes. So it won't be so strong. As our interface. Very light and simple. Of course, user need to
somehow close this pop up so we need to place a
couple of more buttons. Probably cancel and then he can choose or he
growling the pop-up or actually adding this event. Don't account. Another small and last element which I would like to add to this interface is
the small help text inside the text area. So the user will understand
that he can actually type inside this shape
inside the square. And we're done with
the last lesson. I showed you an example of the interface using
an arm of elements. It was probably a bit fast, but my main goal was
to show you and give you some kind of direction rather than you just fold, meet. In order to create exactly
the same interface, you can use those ideas
or the feeling of the composition of the balance in order to achieve your ideas, you can try that on your
own and simply create a similar or even completely
different interface. The last part of this course, I'm going to explain
you the task which you can
perform on your own. And then I'm happy to
review your results and give you a suggestion at all
direction how to improve
11. Class Project: Congratulations, we
done with our course. Your task is to design
one or two screens for a basic calculator using
Neumorphic styles. Of course, you can use elements which we've done
together or create your own using all
the techniques we learned during this course, I encourage you to use
all the principles of Neomorphism to create a
visually appealing interfaces. Remember that at the end, those interfaces will
be used by people. Once you've completed
your designs, you can share them with
me in the course forum. And I'm more than happy to comment or help you to improve. I can't wait to see
what you come up with. Don't be afraid to be
creative and have funded it. Feel free to experiment and remember, practice
makes perfect. Thank you for being a part of this incredible
learning experience. And I'm happy to see
you in my next courses. Please check my profile. I also have another course
which called composition. If you would like
to practice more and find more inspiration
from the world around you in order to develop your skills in terms of
layout and composition. So check it out and see you
later. See you. Bye bye.
Katerina Liebich Blik, UI & Product designer | UX researcher
