Mobile app version of vmapp.org
Login or Join
Vandalay110

: How to draw attention to lines of text Background I'm building a breathing and mindfulness application and I have two texts similar to these ones: Breathing in I know I am breathing in

@Vandalay110

Posted in: #Text #Typography

Background

I'm building a breathing and mindfulness application and I have two texts similar to these ones:


Breathing in I know I am breathing in

Breathing out I know I am breathing out


These are shown in a small "popup" dialog on the screen. This dialog is interactive, the user can give input to say whether she is breathing in or out. (Only one phrase is "active")



Question

I'd like to find a way to make it easy for the user to focus on the active breathing phrase

What I've discovered so far

I've been looking at various ways to draw attention to areas in a design, and there's movement, size, color and contrast, space

Movement is very powerful and this is okay for this case since the user will not have to pay attention to anything else. But I'm not sure how to use movement

I'm not sure if moving the text itself would work, perhaps changing the background by changing the color somewhat is one way

10.01% popularity Vote Up Vote Down


Login to follow query

More posts by @Vandalay110

1 Comments

Sorted by latest first Latest Oldest Best

 

@Pierce403

Taken from this answer: How to draw attention to a specific area of a design?


Here are some ways you can draw attention, roughly from the least
subtle to the most:


Movement - While effective, this should be used sparingly because it can grow distracting and annoying.
Size - If a design element is larger than everything else, it will stand out.
Color - Any deviation from the background colors or other colors used throughout the design will draw the eye.
Contrast - A dark object on a light background will stand out. You should also consider logical contrasts in your subject matter, such
as the following list: apple, orange, pear, bicycle.
Text/Copy - Certain words draw the eye: Free, Secret, etc.
Whitespace - Giving a design object enough whitespace around it will help differentiate it.
Guiding the eye along a path - This can be as subtle as the direction a person's eyes are looking in a photograph or as blatant
as an arrow.



You should use size, contrast, and subtle movement. Perhaps your design could mimic the behaviour of the chest when breathing in and out. The interactive pop up should be circular and should expand and contract, with changing text.

Something like this:

10% popularity Vote Up Vote Down


Back to top | Use Dark Theme