Search
Vocabularying
Listening
Reading
1. Academic
2. General
Writing
1. IELTSWriting Checker
2. IELTS Writing Samples
Speaking
1. Latest Topics
2. Speaking Club

Do you want to improve your writing? Try our new evaluation service and get detailed feedback.

Learn about more visual design elements

Learn about more visual design elements aJ5L9

So far, you’ve learned about the importance of typography, color, and iconography in mockups. As you continue to design your own mockups, it’s also important to understand the most basic visual design elements, like lines, size, shape, and images. Here's a bit of good news: You don’t have to be artistic to use these elements as you design. So let’s check out each one! Lines: A line is a straight figure connecting two points in space. In the world of UX design, lines can be used to differentiate sections of an app, connect two related ideas, or add emphasis to certain parts of the design. For example, you may choose to place a line below header text to draw additional emphasis to titles. Size: The size of an element is in relation to other elements and factors that affect the design. Size is an especially important consideration when designing an app for a mobile phone screen size, which is pretty small. The size of elements can determine how users experience your design, for better or for worse. For example, a button that's too small can frustrate users or cause them to tap the wrong part of your design. Shape: Shape is defined as lines around a self-contained space that includes length and width. Shapes have a place in almost every app design, whether you use rectangles, squares, circles, or another shape. For example, to view more information within an app, there is often a circle with a plus sign (+) inside, which indicates that users can click the shape to expand a menu and learn more. Alternatively, to close out of a window in an app, app designs often use a circle with an X inside. Image: In UX design, images are used to tell stories, make an impact without words, and add visual emphasis. Images can be static, like pictures and illustrations, or moving, like animations and GIFs. Either way, you should include images that are relevant to the story you want to tell with your design and that are relevant to the users you're designing for. For example, if your app for home repair services is addressing a specific problem that many users face, like a clogged gutter, it might be effective to include an image of a clogged gutter in your designs to drive emotional impact.

This phrase/word is too simple and can be replaced with:consequently
So
 far, you’ve learned about the importance of typography, color, and iconography in Possible spelling mistake found.lockupsmock upsmock-ups
mockups
. As you continue to You use this word too often, consider replacing it withpictureschemelayoutformmappattern
design
 your This phrase/word (depending on the context) can be potentially replaced with :possess
own
Possible spelling mistake found.lockupsmock upsmock-ups
mockups
, it’s also
This phrase/word is too simple and can be replaced with:vitalcriticalessential
important
 to understand the most basic visual You use this word too often, consider replacing it withpictureschemelayoutformmappattern
design
You use this word too often, consider replacing it withfundamentalitemmaterialcomponentdetailmember
elements
, like You use this word too often, consider replacing it withboundaryedgechannel
lines
, You use this word too often, consider replacing it withvolumecapacitydiameterintensitybreadthproportion
size
, You use this word too often, consider replacing it withbodysilhouetteoutlineformatpatternframe
shape
, and You use this word too often, consider replacing it withpicturephotographlikenessformfigureappearance
images
. Here's a bit of This phrase/word (depending on the context) can be potentially replaced with :beneficialproduct
good
 news: You don’t This phrase/word is too simple and can be replaced with:ought to
have to
 be artistic to This phrase/word (depending on the context) can be potentially replaced with :exploit
use
 these You use this word too often, consider replacing it withfundamentalitemmaterialcomponentdetailmember
elements
 as you You use this word too often, consider replacing it withpictureschemelayoutformmappattern
design
. This phrase/word is too simple and can be replaced with:consequently
So
This phrase/word (depending on the context) can be potentially replaced with :authorize
let
’s This phrase/word (depending on the context) can be potentially replaced with :monitor
check
 out each one! You use this word too often, consider replacing it withboundaryedgechannel
Lines
: A You use this word too often, consider replacing it withboundaryedgechannel
line
 is a straight figure connecting two points in space. In the world of UX You use this word too often, consider replacing it withpictureschemelayoutformmappattern
design
, You use this word too often, consider replacing it withboundaryedgechannel
lines
 can be This phrase/word (depending on the context) can be potentially replaced with :exploited
used
 to differentiate sections of an app, connect two related This phrase/word (depending on the context) can be potentially replaced with :thoughtsconceptsnotions
ideas
, or This phrase/word (depending on the context) can be potentially replaced with :accrue
add
 emphasis to certain parts of the You use this word too often, consider replacing it withpictureschemelayoutformmappattern
design
. For You use this word too often, consider replacing it withcasepatternsymbolobjectillustrationpart
example
, you may choose to place a You use this word too often, consider replacing it withboundaryedgechannel
line
 below header text to draw additional emphasis to titles.

Size: The You use this word too often, consider replacing it withvolumecapacitydiameterintensitybreadthproportion
size
 of an You use this word too often, consider replacing it withfundamentalitemmaterialcomponentdetailmember
element
 is in relation to other You use this word too often, consider replacing it withfundamentalitemmaterialcomponentdetailmember
elements
 and factors that affect the You use this word too often, consider replacing it withpictureschemelayoutformmappattern
design
. You use this word too often, consider replacing it withvolumecapacitydiameterintensitybreadthproportion
Size
 is an especially
This phrase/word is too simple and can be replaced with:vitalcriticalessential
important
 consideration when designing an app for a mobile phone screen You use this word too often, consider replacing it withvolumecapacitydiameterintensitybreadthproportion
size
, which is pretty This phrase/word is too simple and can be replaced with:tiny
small
. The You use this word too often, consider replacing it withvolumecapacitydiameterintensitybreadthproportion
size
 of You use this word too often, consider replacing it withfundamentalitemmaterialcomponentdetailmember
elements
 can determine how You use this word too often, consider replacing it withcustomerbuyershopperpurchaser
users
 experience your You use this word too often, consider replacing it withpictureschemelayoutformmappattern
design
, for better or for worse. For You use this word too often, consider replacing it withcasepatternsymbolobjectillustrationpart
example
, a button that's too This phrase/word is too simple and can be replaced with:tiny
small
 can frustrate You use this word too often, consider replacing it withcustomerbuyershopperpurchaser
users
 or cause them to tap the This phrase/word is too simple and can be replaced with:incorrect
wrong
 part of your design.

Shape: You use this word too often, consider replacing it withbodysilhouetteoutlineformatpatternframe
Shape
is defined
 as You use this word too often, consider replacing it withboundaryedgechannel
lines
 around a self-contained space that includes length and width. You use this word too often, consider replacing it withbodysilhouetteoutlineformatpatternframe
Shapes
 have a place in almost every app You use this word too often, consider replacing it withpictureschemelayoutformmappattern
design
, whether you This phrase/word (depending on the context) can be potentially replaced with :exploit
use
 rectangles, squares, circles, or another You use this word too often, consider replacing it withbodysilhouetteoutlineformatpatternframe
shape
. For You use this word too often, consider replacing it withcasepatternsymbolobjectillustrationpart
example
, to view more information within an app, there is This phrase/word is too simple and can be replaced with:frequently
often
 a circle with a plus This phrase/word (depending on the context) can be potentially replaced with :indication
sign
 (+) inside, which indicates that You use this word too often, consider replacing it withcustomerbuyershopperpurchaser
users
 can click the You use this word too often, consider replacing it withbodysilhouetteoutlineformatpatternframe
shape
 to expand a menu and learn more. Alternatively
, to close out of a window in an app, app You use this word too often, consider replacing it withpictureschemelayoutformmappattern
designs
This phrase/word is too simple and can be replaced with:frequently
often
This phrase/word (depending on the context) can be potentially replaced with :exploit
use
 a circle with an X inside.

Image: In UX You use this word too often, consider replacing it withpictureschemelayoutformmappattern
design
, You use this word too often, consider replacing it withpicturephotographlikenessformfigureappearance
images
 are This phrase/word (depending on the context) can be potentially replaced with :exploited
used
 to This phrase/word (depending on the context) can be potentially replaced with :inform
tell
 stories, This phrase/word (depending on the context) can be potentially replaced with :createconstructmanufactureproduce
make
 an impact without words, and This phrase/word (depending on the context) can be potentially replaced with :accrue
add
 visual emphasis. You use this word too often, consider replacing it withpicturephotographlikenessformfigureappearance
Images
 can be static, like pictures and illustrations, or moving, like animations and GIFs. Either way, you should include You use this word too often, consider replacing it withpicturephotographlikenessformfigureappearance
images
 that are relevant to the story you want to This phrase/word (depending on the context) can be potentially replaced with :inform
tell
 with your You use this word too often, consider replacing it withpictureschemelayoutformmappattern
design
 and that are relevant to the You use this word too often, consider replacing it withcustomerbuyershopperpurchaser
users
 you're designing for. For You use this word too often, consider replacing it withcasepatternsymbolobjectillustrationpart
example
, if your app for home repair services is addressing a specific problem that This phrase/word is too simple and can be replaced with:a plethora ofa number ofnumerous
many
You use this word too often, consider replacing it withcustomerbuyershopperpurchaser
users
 face, like a clogged gutter, it might be effective to include an You use this word too often, consider replacing it withpicturephotographlikenessformfigureappearance
image
 of a clogged gutter in your You use this word too often, consider replacing it withpictureschemelayoutformmappattern
designs
 to drive emotional impact. 