UI Design
Tutorial
Hey everyone! Welcome back to the UI design blog. Today we'll be using color and imagery to bring our app
designs to life, we'll get to know the basics of color theory and then we're gonna cover how you can
use colors and images in Adobe XD. By the end of this blog you're going to have an app screen to
show off and share with friends and family I'm Elise, an Adobe XD enterprise
instructor and I've been working as a UX/UI designer since 2015. I'm also a design speaker and I host
tons of free events every week. Before we get started if you have any questions on color theory
please feel free to put it in the comments and we'll get back to you as soon as possible if you want more
content like this from career foundry subscribe
to the channel and hit the bell icon to be notified of new releases we have
more ux ui content coming out every week
this video is the final part of career foundry's free ui short course if you'd like to work along with
the lessons in this video series you can sign up for free in the link in the description below
alright let's dive in and get started with color theory color theory is the
framework surrounding the use of color in art and design if we look at a basic color wheel there are three categories of
color primary colors red blue and yellow
secondary colors orange purple and green and tertiary colors magenta
vermilion violet teal amber and
chartreuse if you remember learning these in grade school well you've already
got the fundamentals for color theory
the color wheel charts these colors and their respective hues tints tones and shades by being able to visualize
how a color relates to another color.
In the color
wheel designers can create color palettes that give a interface a balanced and harmonized aesthetic let's look
more closely at these color variants hue
refers to the pure pigment of a color without tint or shade any of the six
primary or secondary colors is a hue
shade refers to how much black is added to the color so naturally shade darkens the color tint is the result of a
color that has both black and white added to it color temperature refers to the warmth or coolness
of a color warm colors contain shades of yellow and red cool colors have a blue green or purple tint
and neutral colors include brown gray black and white all right so now let's
talk about color systems there's the additive color system rgb which stands for red green and blue and this is the color
model used for screens such as a television or a mobile device.
RGB is an
additive color model in which red green and blue light are added together in
various ways to reproduce an array of
colors additive colors start off black and as colors are added turns lighter and lighter until it becomes
white then there's the subtractive color system cmyk which stands for cyan magenta yellow and black
and this is typically used for printing so
you may have noticed these colors in your printer cmyk obtains colors by the
subtraction of light the background
starts off white like a piece of paper in your printer and then the more color that is added it turns darker and
darker and darker until it's ultimately black the hex color system is concerned with digital colors
a hex code is a six digit code with letters
and numbers and is basically a short code for rgb in web design.
Every digital color has a hex code now let's talk about how you can choose
colors for your app and it's not as simple as just picking out your favorite color gold or blue before
you dive into applying a color let's bear in mind a few considerations the first is color
psychology now let's look at some of the most common color associations orange is energetic and warm red
is associated with energy war passion love and lust yellow invokes positivity warmth playfulness
and sunshine pink evokes feelings of innocence and delicateness also romance blue is perceived
as authoritative trustworthy and dependable and is one of the most commonly used brand colors green
symbolizes growth healing wellness health
and money black represents power elegance and authority these color
associations are helpful in deciding how
you want your users to feel for example if you're designing the ethical eater
app you might want to use yellow or
green to represent vegetables healthy eating for the activist app you might want to use blue or black that really
go along with those themes of activism and sharing ideas now the next thing is contrast now if
your screen has just all these varying shades of the same color it's probably not going to help
the user understand what to pay special attention to or even how to navigate the app aim for a
mild level of contrast and apply more high contrasting colors for things that need to stand out such
as a call to action button also you might want to stick to some ui conventions now when you're
playing around with color it's easy to be carried away with aesthetics over practicality but if you
start to play around too much with crazy colors or have a little too much edginess involved it's
probably going to give a headache to the users some common ui design conventions include using darker
colors for text just to improve the legibility also using lighter colors for the background and also
having some of the more stronger colors as the accent colors you might also want to stick to some
of the classic call to action colors like red or orange .
Sticking to
these conventions will reduce the cognitive load for your users and allow them
to navigate your app much more
intuitively use the 60-30-10 rule this is a popular interior design trick that helps to just keep your interfaces
much more balanced so sixty percent of your
interface should be one color and it's typically pretty neutral then
thirty percent is a secondary complementary color and then 10 percent is the more
stronger call to action accent color sticking
to this formula will help the eye comfortably move from one focal point
to another so let's look at airbnb the
primary color the 60 is white and then that secondary color is a lighter gray
color and then the 10 percent is that
stronger coral color that really pops against those other colors now you know
that saying a picture is worth a thousand words
well sometimes multiple ideas can be conveyed in one image also people
pay much more attention to images than
words especially for interface design an image can capture the user's attention
much quicker and more effectively
sometimes than words so when we choose an image.
We really need to consider how we want that user to feel now
an image can help to showcase a product or showcase how a user uses a product or it can convey an
emotion or represent a brand's personality
you can find free images to use for your interface through sites like
adobe stock pexels pixabay and unsplash
all right so now for the practical part let's move into adobe xd all right so
let's start with colors i am going to start to add colors to my buttons so i'm
going to begin with my sign up button
here and in here if i need to get to a particular layer in this group you can go into your layers panel which is
over here this second button on the bottom left hand side and i can open up this folder and just
get into that particular layer that rectangle layer from there what i'm going to do is go over to
the right hand side my property inspector and
i'm going to select fill and from here i can go ahead and put in some
green color like this or i can apply a
hex code so i am going to just go right into here where it says hex and put in my hex code which is going to be 2 5 8 1 5 b and
then i'm going to actually remove the gray
border here so i'm going to remove that now what i want to do is make
sure there's more contrast right so sign
up is gray on this green background it's hard to read so i'm going to select
the text and i'm going to go again over
into the right hand side into my property inspector and where it says fill i'm going to select that and go all the
way drag this little indicator all the way to white.
Now the hex code
for white is just ffff all right so there is my first button all completed now
i'm gonna go into my secondary button i
can go into the layers panel and just select the background rectangle now the other thing you can do is
just double click to get into that particular layer as well so now i have the rectangle selected
and again the right hand side of my property inspector i can change out the color so now what i want
to do since it's a secondary button i don't want it to compete with the primary call to action so
i am going to leave the fill as white and i'm going to change the border to that green color so
again i'm going to just put in the hex code 2 5 8 1 5 8 there and i want it to stand out just a
little bit more so right underneath where it says border there's size one i'm going to try out size
two so this gives a little more weight to that border then from there i don't like the way this gray
color looks with the button i want to keep
it all within the same sort of color palette so i'm going to select this text now again to get into a particular layer um i
can just double click to get into just that
text layer now from here i can go into the right hand side into my
property inspector.
I can select the
fill and i can get into that green color now here's a little fun trick if you go all the way over to the right where this
little dropper icon is if i select that this
allows me to put to select any color on my screen so i'm going to click onto
that green and it's automatically
applying it so now i don't have to actually put in that hex code if i want to save a color you can also go
over here in the bottom left hand corner where there's a plus button and i can add that and so now
it's a saved color so i don't have to keep going back and putting in that hex code all right so
next up is images now the easiest way to work with images is to apply a container already on the screen
with a shape like where you want that image contained so i'm going to go into the toolbar uh and
the second option here is rectangle i'm gonna select that and i'm gonna make my shape here
basically where i want the image to live so i'm just gonna literally take the image and drag it
into that shape when i do that you're gonna see that it's enabled you see this like blue highlight
on to the rectangle it's like do you want to
drop me here and i'm gonna say yes i do and there is my image all right
so what else i want to do because i want
to put that text so this text on top i want to have more of that contrast between the text and the image so
i'm going to put in another layer another rectangle on top that's just going to darken that image
a bit more and make it easier to read the text
so what i'm going to do here is i'm going to make another rectangle so
over here go into rectangle my toolbar
or r for shortcut then i'm going to make my little rectangle on top right on
top of it and then from there i am going to fill in a color so over here where it says fill my property inspector
i'm going to choose the green but what i
want to do is first go over here into this this color picker here and change the opacity so i can start to see the
image in the background
So now when i
drag it down if i go all the way down
it's completely has no color on it now if i go all the way full there's color so i'm just gonna go like maybe
to here where you can start to see a peak
of that color and the other thing i want to do is just darken it a
little bit so i'm taking this um this
where it was at that bright color and i'm just dragging it down so it's a
darker shade here and that again is just
going to make it much more readable and pleasing to the eye so i'm taking it to a really dark green now from here there's
again there's that border that gray border i just want to remove that border and actually on the
image behind there's a border as well so i'm just going to remove that gray border as well and place that
back in so my text behind is hidden now how
you can bring that text forward is go into your layers panel and i can
from there grab my text layer here and
drag it all the way to the top again with the title drag it all the way to the top here now i can put uh place those
where i want them now again what what do you see here the gray on top of that dark image it's hard
to see so i want to have more contrast right.
So i'm going to change both this title and the body
copy to white so it's just much easier to see so i'm just going to drag this all the way to white
now you can see that it's just much easier to read so now what i'm going to do is i'm going to place
in my icon so now what i'm going to do
is i'm going to grab my logo my little leaf logo and i'm going to select or get
into this artboard just by clicking into
any layer here and then i'm going to paste from here i'm going to just place it where i want it and i'm
going to change out the color so over here my property inspector.
I'm going to get
rid of the border and then i'm going to choose the white fill here so there it is and now i'm going to also just
take my buttons and drag it down a bit all right there we go the app is
finalized the screen is looking good now you guys should have some other text filled in for yours but it
should look fairly fairly similar to this so once you've added all your finalized copy and you feel
really good about it now it's ready to share how you can share your designs is you can export them as a
image so let's do that what i'm going to
do is select the app screen here just select that artboard title so the
whole thing is selected and then i'm
going to go over here into file and from there i'm going to to go into export
and selected now i can save it as put in whatever title i want or leave it as
is and then i can also change the formatting
if i want you should leave it as a png and then export it right so now that you have a exported png of your screen feel free to
share it out maybe tag career foundry and
show your friends and family this first start to your ui career perhaps
and what i recommend is to really
personalize it make it more your own have fun with the colors and the imagery
and the copy congratulations you
completed the ui design short course you should give yourself a pat on the back you also completed your first app screen which
is super exciting over the last five days
you've successfully created your first interface design in adobe xd.
0 Comments
Thank you for your response. It will help us to improve in the future.