Scribd
Upload
33 views

Section Notes - Chat App Design

This document provides tips for designing a chat app interface like an artist. It discusses using consistent photos for the hero shot in terms of style and spacing. It also covers adding shadows to elements and adjusting the blur, y-offset, color, and opacity of shadows. Additional tips include utilizing free resources for designs, modifying icon colors to match the project, and more.

Uploaded by

Kide Kide
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
33 views

Section Notes - Chat App Design

This document provides tips for designing a chat app interface like an artist. It discusses using consistent photos for the hero shot in terms of style and spacing. It also covers adding shadows to elements and adjusting the blur, y-offset, color, and opacity of shadows. Additional tips include utilizing free resources for designs, modifying icon colors to match the project, and more.

Uploaded by

Kide Kide
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 1

pa r t 2 : P R A C T I C E D E S I G N L I K E A N A R T I S T

chat app design

Hero Shot

p h o t o co n s i s t e n cy
A hugely important aspect when choosing
photos for the hero shot is for them to be
very similar in style.

This version is a bad match. The girl on the These two are similar in style. They are not
green background is looking into the facing the camera or looking at it, and they
camera, facing straight and she’s zoomed in are proportional to each other. Meaning, the
closer, making here face bigger. photos were taken from a similar distance.

co n s i s t e n t s p a c i n g
When you place your dots behind the image,
don’t overlap them with the image. That
creates unnecessary tension.

Also, use consistent spacing. For example, if


dots are10 pixels from each other, then
distance dots from the image by 10 pixels as
well, on both sides.

-
On this version, dots are well spaced from Here we have consistent spacing. The gap
the left edge of the photo but the gap from between the dots is the same as the distance
the top edge is smaller. This is inconsistent from the photo, on both edges.
spacing.

Figma Resources

Don’t forget to utilize all the free and paid


resources available to you, like free website
mockups, templates, UI kits, icons,
illustrations, etc.

Make these assets part of your design


arsenal. They will help you create more
interesting designs.

Resources for Figma you can find on sites like


www.figmacrush.com and directly on
Figma’s website
www.figma.com/resources/assets

You can also use resources made for Sketch


since Figma has a pretty solid import
functionality of Sketch files. Sites like
www.sketchrepo.com

Shadows

Shadows are under effects. Click Plus icon to


add a new effect. The first thing is usually a
shadow.

Click the sun icon to edit the shadow


properties. Here you will need to edit three
values:

1. Blur

This changes how sharp or blurry the shadow


is. You want it quite blurry. The value
depends on the size of the object, opacity of
the shadow and other factors.

1 2

2. Y-offset

The vertical offset of the shadow. Higher the


value lower the shadow will fall. When set to 2px blur is not enough All other properties the

0, the shadow will fall evenly on the top and in this case. The shadow same as the first, 12px
the bottom.

is too prominent and blur is a better option.


makes it look like the
card has thickness.
The vertical offset for the shadow is good. It
makes it look more natural because, in the
real world light source is above us, in the
form of the sun and light bulbs on the ceiling.
This casts shadows downwards with a vertical 2 3
offset.

3. Shadow Color & Opacity

-
2px Y offset makes the 8px shadow casts a
In most cases, black is the best choice for the shadow distribute more natural shadow
almost evenly on all from the top to bottom.
shadow. Sometimes you could sneak a little
sides.

color hue in it but be careful with this. It can


come out like a neon underglow from Fast &
Furious cars.

The opacity of the shadow will depend on


the background and on the object itself. 3 4
Darker objects need higher opacity value
and lighter ones, especially white, need a
very light shadow.

Black color with 25% 10% opacity makes the


makes the shadow shadow very subtle,
intense in this case. something you can
There’s no rule of thumb or any simple
Especially on the white ignore to focus on the

formula for calculating this. You will have to card. It draws too much content. But it’s visible
J
train your eye. ust like colors, in the
attention. enough to distinguish
the boundaries of the
card.
beginning, it’s best to borrow shadows from
other designs. And soon enough you will
develop your eye for shadows.

Icons & Illustrations

Icons and illustrations can add some flair to


your designs and make them more
interesting.

The internet is filled with free and paid icons.


One of the largest selections you can find on
www.flaticon.com

Also, in the Figma and Sketch resource sites.

Most icons come in SVG format. In this


format, you can make modifications to the
icon in Figma. You can change colors, you
can remove or add some parts, or change
thickness using stroke settings.

i co n t i p
Here’s an easy trick that will add a nice touch
Before
to your designs:

Take icons that are made of at least two


shapes. An icon with a single continuous
shape won’t work.

After
And instead of giving it one uniform color,
combine colors from the project. Like in the
example on the right.

This creates a more refined look and


connects these colors to the project.

You might also like