# data[].attributes.attachment_link.title
Microinteractions and how to design them properly

# data[].attributes.body
https://www.hubspot.com/make-my-persona

# data[].attributes.body
Here he is in all of his greenish glory

# data[].attributes.body
Can Mara unmute me on Zoom? Ty ❤️😍

# data[].attributes.body
to Andy & Morena

# data[].attributes.attachment_link.description
Discover your product's next artistic direction. I have to confess... I'm an illustration junkie. Hours disappear when I'm swimming through the endless stream of talented artists that post online. The art form of illustration has become a mainstay of landing pages, getting more unique and colorful with each passing year.

# data[].attributes.body
It is better to choose your own style first and then a brand or to choose a brand first and then your own style?

# data[].attributes.headline
Don Norman and his theory on emotional design

# data[].attributes.subject
Don Norman and his theory on emotional design

# data[].attributes.attachment_link.title
Don Norman and his theory on emotional design

# data[].attributes.body
Is allowed material Design? 😭

# data[].attributes.body
We found during our research - on UX research!

# data[].attributes.body
...I love medium.com #2

# data[].attributes.attachment_link.readable_text
Improving your designs with tactics instead of talent.

Every web developer inevitably runs into situations where they need to make visual design decisions, whether they like it or not.

Maybe the company you work for doesn't have a full-time designer and you need to implement the UI for a new feature on your own. Or maybe you're hacking on a side-project and you want it to look better than yet-another-Bootstrap-site.

It's easy to throw your hands up and say, "I'll never be able to make this look good, I'm not an artist!" but it turns out there are a ton of tricks you can use to level up your work that don't require a background in graphic design.

Here are seven simple ideas you can use to improve your designs today.

2. Don't use grey text on colored backgrounds

Making text a lighter grey is a great way to de-emphasize it on white backgrounds, but it doesn't look so great on colored backgrounds.

That's because the effect we're actually seeing with grey on white is reduced contrast.

Making the text closer to the background color is what actually helps create hierarchy, not making it light grey.

There are two ways you can reduce contrast when working with colorful backgrounds:

1. Reduce the opacity of white text

Use white text and lower the opacity. This lets the background color bleed through a bit, de-emphasizing the text in a way that doesn't clash with the background.

2. Hand-pick a color that's based on the background color

This works better than reducing the opacity when your background is an image or pattern, or when reducing the opacity makes the text feel too dull or washed out.

Choose a color that's the same hue as the background, adjusting saturation and lightness until it looks right to you.

5. Don't blow up icons that are meant to be small

If you're designing something that could use some large icons (like maybe the "features" section of a landing page), you might instinctively grab a free icon set like Font Awesome or Zondicons and bump up the size until they fit your needs.

They're vector images after all, so the quality isn't going to suffer if you increase the size right?

While it's true that vector images won't degrade in quality when you increase their size, icons that were drawn at 16-24px are never going to look very professional when you blow them up to 3x or 4x their intended size. They lack detail, and always feel disproportionately "chunky".

If small icons are all you've got, try enclosing them inside another shape and giving the shape a background color:

This lets you keep the actual icon closer to its intended size, while still filling the larger space.

If you have the budget, you could also use a premium icon set designed to be used at larger sizes, like Heroicons or Iconic.

7. Not every button needs a background color

When there are multiple actions a user can take on a page, it's easy to fall into the trap of designing those actions based purely on semantics.

Frameworks like Bootstrap sort of encourage this by giving you a menu of semantic styles to choose from whenever you're adding a new button:
"Is this a positive action? Make the button green." "Does this delete data? Make the button red."
Semantics are an important part of button design, but there's a more important dimension that's commonly forgotten: hierarchy.

Every action on a page sits somewhere in a pyramid of importance. Most pages only have one true primary action, a couple of less important secondary actions, and a few seldom used tertiary actions.

When designing these actions, it's important to communicate their place in the hierarchy.

Primary actions should be obvious. Solid, high contrast background colors work great here.

Secondary actions should be clear but not prominent. Outline styles or lower contrast background colors are great options.

Tertiary actions should be discoverable but unobtrusive. Styling these actions like links is usually the best approach.

"What about destructive actions, shouldn't they always be red?"
Not necessarily! If the destructive action isn't the primary action on the page, it might be better to give it a secondary or tertiary button treatment.

Save the big, red, and bold styling for when that negative action actually is the primary action in the interface, like in a confirmation dialog:

If you enjoyed this post, be sure to visit RefactoringUI.com and subscribe to get notified when we publish something new.

# data[].attributes.attachment_link.title
7 Practical Tips for Cheating at Design - Refactoring UI - Medium

# data[].attributes.attachment_link.description
Every web developer inevitably runs into situations where they need to make visual design decisions, whether they like it or not. Maybe the company you work for doesn't have a full-time designer and you need to implement the UI for a new feature on your own.

# data[].attributes.attachment_link.provider_name
Ergománia UX and digital product design agency

# data[].attributes.attachment_link.readable_text
Donald Norman's world-known work 'Emotional Design' is one of the most famous books among UX and UI practitioners. In this book he distinguishes 3 levels of design based on the nature of the impact they have on users. These are the visceral, the behavioural and the reflective levels. These principles can be discovered even in the now trending fields such as virtual reality (VR), voice user interfaces (VUI) and even self-driving cars. In this article, we are introducing design aspects from all the areas mentioned above organized by the 3 levels Norman defined.

Visceral design is affecting the most instinctive part of our brain, the reptilian brain (which consists of the brainstem and the cerebellum). When you are commuting with public transportation and it is a hot summer day, the uneasy way you feel among sweating people is a visceral response of your brain, as you don't have to think about it. You just feel it and you have little effect on it. The same is applicable in the opposite, positive direction, what Daniel Kahneman refers to as the 'Halo effect' in Thinking, Fast and Slow book. . According to this theory, we are prone to assume that people with a good look are also more likely to have other good qualities.

Behavioural design, on the other side, is focusing on the classical usability of things. If our design is concentrating on the ease of usage, we are talking about behavioural design. A typical example for this is the cup holder in cars from Norman's book. They were not built-in parts of cars, but with careful examination of user behaviour it'sbeen shown to be an important andlacking element of automobiles.

Reflective design is relating to one of the most advanced human capabilities of the brain; its ability to reflect on past experiences. Remember the ugly toy, you got from your dad and you used to play with it together with your best friend for hours? You still have the worn out plush crocodile and that is one of the most precious treasures you own, because so many good memories and experiences are bound to it. That's what reflective design is all about; to create not just a user-friendly product but also one that gives an experience beyond average and make the experience memorable.
Self-driving cars
Visceral aspects of design
started as Google's self-driving car project in 2009 and they have been developing self-driving technologies ever since. At present, they have over 10 million miles test drive in public roads and 7 million miles in simulated conditions. Besides, they have developed a navigation system for self-driving cars and they have been testing it extensively. Consequently, they have enough user feedbacks and observations of user behaviours to be thoguhtful for designing maps. Waymo's plans for their self driving car's navigational interface is clearly aiming to affect our primary senses by its appealing and futuristic look.

Behavioural aspects of design
Waymo's aforementioned map also bears a behavioural element of design by visualizing important elements as more salient than less relevant parts of the road. Moreover, by this differentiation between more and less important elements, the designers also cleared up the view on the map. Consequently, it is not getting overloaded with irrelevant information.

Reflective aspects of design
Stick to Waymo's map solution, the overall goal of the product was to build trust in drivers who are slowly shifting to passengers. For this reason, the map's main purpose is to show the passenger what the self driving system can "see" of the surrounding environment and what is its intended acts at a given moment.

Moreover, Waymo also built physical controls into the car so passengers have the comforting feeling of still being in control when needed. These controls can pull over the car if passengers want to stop at any time as well as lock or unlock the doors. The sense of being in control helps people feel safe and eliminates any unncessary stress from being afraid of some kind of unforseen event.

During the Audi future self-driving testings , passengers were instructed to cross the road while the self-driving car was approaching the crossing. Pedestrians knew that it is a self driving car, experimenters expected fear and uncertainty from pedestriansbut actually they behaved normal. It turned out that the slowing car built trust in people, since it is the widely accepted behaviour of a car driver when reaching a pedestrian crossing. This finding implies that utilizing existing mental models and the societal norms in new technologies builds trust in people even with no familiarity with the technology whatsoever.
"Predictability and communication are key to trust." Juliet Rothenberg, Waymo Product Manager for UX and the Early Rider Program Virtual Reality
In virtual reality, everything works quite different from what we are accustomed to while using NUI (natural user interfaces). However, the main principles are quite the same. Make it appealing to the senses, make it useful and smooth to use and make it memorable so you remember even after finished using it.

Visceral aspects of design
Since in the VR world what we see is different from what the body experiences, there is a contradiction between the body and the mind. When proprioception (the sense of our trunk's position relative to the limbs and the head) is not in accordance with the visual input our mind receives, motion sickness may occur. Though the exact cause of motion sickness is not yet clear, there are several theories about its possible sources such as sensory conflict , eye movement related problems , evolutionary causes , or causes result from postural instability ( ) . In the early models of VR devices, this was not handled properly. However, newer models are applying several small tricks to avoid the unpleasent condition, like providing a single rest frame for the user so their eyes can behave similarly as in the real physical world. Postural instability can be compensated by using motion platforms such as a treadmill that can help reduce the discrepancy between the visual and the vestibular systems.

Multi-sensory interactions: in the world of virtual reality we are not limited to a certain modality regarding the mode of interaction, it can be auditory, motor and tactile or even the combination of these. While many of the available VR solutions are limiting movements to sitting or standing in one place, there are people who are imagining a totally new way of interaction with apps in the virtual space. The following link introducing a podcast app concept that is using 3 scales of structure; habitable, holdable and wearable: https://www.youtube.com/watch?v=o4vRumkDKG4 aims to activate not only the prefrontal but also the motor and somatosensory cortex so the cognitive load of the brain is becoming more balanced and we: less mentally exhausted.

Behavioural aspects of design
Behavioural elements in the field of virtual reality are obviously not the same as in the 2D world. Instead of mouse clicks, we can utilize eye-tracking to navigate by gaze across the VR world.

Tobii, the big eye tracking technology company already has several solutions for VR technology. One of them is foveated rendering that can fasten the processing time by only rendering perfectly the area where the user is actually looking. Using foveated rendering in a VR solution can improve the user experience by creating a smooth, flawless experience without distractions and lags.

Gaze-based navigation seems like a natural choice for VR apps, however, considering possible failure points while designing is necessary so we can prevent them and eventually hand over a fun-to-use piece of software to our customers. According to James Hsu - lead UI designer at Disney one of these possible failure points is the position of navigational elements . The natural position is the center for gazing. Thus, after opening a menu, it is important to place the menu items out of the central view to prevent unintentional "clicks" .

Another important behavioural design consideration in VR is safety. When users are interacting with VR their body is in a physical space and it is essential to make sure they won't get hurt by encountering an unexpected object. HTC Vive Chaperone warns users about obstacles they are approaching: https://www.youtube.com/watch?time_continue=1&v=vnciEkUDnhs

Reflective aspects of design
In addition to physical, psychological presence is the major attribute of VR. This is why it is important to create an immersive and flawless experience for users so they can really enjoy the state of being embraced in virtual . In VR, people with physical handicaps could have a full experience if we are thoughtful when designing VR interfaces and taking them into consideration.

We do not know VR's health effects yet, but the chemicals that are released due to the immersive experience are just as real as if a real monster would chase us. Thus, while designing a VR interface, it is i mportant to take into consideration the consequences of having a full experience.

Moreover, VR raises the moral question of addiction. Just as with 2D interfaces, the contradiction exists between the full and immersive experience and the possible addictive nature of the product. Thus, while designing, we have to make sure that people can set limits and constraints for themselves so we can prevent, but at the very least take steps against addictive behaviours.
Voice user interfaces
Voice as the main and in some cases the only information channel is something very natural in human communication. However, when on the other end of the line is not a human but a piece of software, things become more complicated. Nonetheless, careful examination of user behaviour shows the right way to build voice based interfaces.

Visceral aspects of design
Using variants of the same phrase in order not to have a robotic impression of the voice assistant induces an immediate good feeling. This principle can be applied to chatbots as well.

Anthropomorphizing voice interactions by giving some human-like attributes to the device through patterns of lights, voice- and other sound patterns might bring the UX closer to natural, human-human conversations.

However, antrophomorfization can become odd, even awkward if we don't find the right amount of human traits sufficient for such a device.

Behavioural aspects of design
Whenever the user needs to choose from multiple options, the VUI is giving only a limited, easily processable number of elements and lets people refer to them by only telling the number of the list element so they don't have to remember and repeat whole sentences.

Make your VUI be able to recognise more than one expression for the same idea. In Google Home App, we can enable continuous conversation. This feature will let us give multiple commands to Google in a row.

Smart home integration - e.g.: with your smart thermostat with which you can set the temperature by simply stating that it is too hot.

Google's voice assistant as well as Amazon's Alexa are utilizing other than auditory channels to communicate. As an example both of them are using light signals , for instance, to show their presence to users, so people know whether Alexa is listening. Also, it can give a light signal about unread messages, missed or incoming calls and even if the mic is set muted.

Reflective aspects of design
If you tell Google Assistant to toss a coin, it will actually play a sound similar to a coin falling on the floor and it will answer you "It's a tail". These nuances can build up a voice assistant's personality and contribute to the reflective level of the design.

Privacy and context are essential elements to consider when we are creating a voice enabled solution. If an online bank application uses voice as a possible input source but we are in a circumstance where our privacy is violated (public transportation/ in a supermarket/ office) then we might feel uncomfortable to ask a question loudly. In these cases, an alternative input channel is a good option to avoid our users getting frustrated.

Alexa has an interactive storytelling ("choose your own adventure") skill that helps users to immerse in different - mostly adventure/detective stories by asking questions along the way and it is you who has to solve the mystery (the stories are usually about some crime or mystery.
Summary
The 3 levels in which we perceive and value a product are still applicable to such modern examples as self-driving cars, virtual reality or voice enabled devices. If we keep in mind the visceral, behavioural and reflective aspects while designing , we can make sure that the end result will not only be visually appealing and usable but also leaves a pleasent feeling behind.

# data[].attributes.attachment_link.title
The manifestation of Norman's emotional design principles in 3 modern examples

# data[].attributes.attachment_link.description
Donald Norman's world-known work 'Emotional Design' is one of the most famous books among UX and UI practitioners. In this book he distinguishes 3 levels of design based on the nature of the impact they have on users. These are the visceral, the behavioural and the reflective levels. These principle

# data[].attributes.body
...I love medium.com

# data[].attributes.attachment_link.readable_text
How to make optically balanced icons, correct shapes alignment, and perfect corner rounding. Over 50 pics included.

Our eyes are weird organs that often are telling lies to us. But if you know the peculiarities of human visual perception, you can build more approachable and clean designs. Not only do type designers utilize optical tricks for creating readable and well-balanced fonts, but it's also helpful for interface designers, who build user-machine communication.

1. Measured and optical size

What is bigger: a 400-pixel square or a 400-pixel circle? Geometrically speaking, their width and height are equal. But look at the picture below. Our eyes immediately detect that the square outweighs the circle. By the way, weight-related words are more suitable for describing optical effects.

In case you don't believe me that these shapes are drawn accurately, this is the version with guides and numbers.

Let's take a look at one more picture with a square and a circle. In terms of visual weight, are they equal to you?

For me, definitely yes. At least it's hard to tell immediately which one outweighs the other. Not surprising because I increased the diameter of the circle by 50 pixels.

To show why this happens, I overlapped the shapes from the first example (400-pixel square and circle) and the second example (400-pixel square and 450-pixel circle). As you can notice below, the square outweighs the circle in "a" areas, whereas the circle outweighs the square in "b" areas. On the left, the square totally defeats the circle, like embracing it from four sides. On the right, the circle and the square are balanced; none of them encompasses the other; each of them has four loose pieces.

We can witness the same effect with diamonds or triangles. To be balanced visually with squares, they should be larger.

How can one use this feature in interfaces? For instance, when you are creating a set of icons, it's important to make them all well-balanced, so that no icon stands out too much or looks too tiny. If we directly inscribe icons into square areas, the more square-like icons will look larger.

I recommend compensating the weight of differently shaped icons by allowing visually smaller icons to hang beyond the icon area and by leaving some space between visually heavier icons and the icon area.

And now some real icons balanced optically.

Now it's clear why an icon area is always larger than an icon body - just to allow non-square icons fit it and look not smaller than square icons.

The easiest test to check visual balance is blurring the items. If your icons turn into more or less similar blobs, they have the same optical weight.

But sometimes we work with already existing graphics, for instance, social network logos used as sharing and liking buttons. Facebook and Instagram icons are square, whereas Twitter is represented by a bird silhouette and Pinterest by an encircled "P". That's why Twitter and Pinterest icons are a bit larger, so that they look balanced with Facebook and Instagram icons.

Another example of an optical balance issue is a textbox placed together with a round button. If the button diameter equals the textbox height, the button will seem smaller to our eyes, but if you enlarge it a little bit, the whole construction will become better balanced.

But if you change the style of the button, enlargement won't be needed. On the picture below, the button and the textbox are 80 pixels high, but the button on the right is better balanced with the neighboring textbox owing to the strong black fill.

Important to remember

Optical weight is how human eyes perceive the size and significance of an object, and it doesn't necessarily equal its pixel size.

Circles, diamonds, triangles, and other non-square shapes need to be larger in order to be optically balanced with squarish shapes.

Areas for icons should have some space reserved for optical balancing. It's crucial for sets of icons, which should look consistently.

2. Alignment of different shapes

Optical alignment is a logical continuation of the optical balance topic and the phenomenon of optical weight. Take a look at the stripes below. Do they look as if they are of the same length?

In terms of pixels, the answer is a firm "yes". However, at first sight, the lower stripe looks shorter than the upper one.

One more picture of the two stripes. Has anything changed?

I applied optical compensation for the lower stripe. Allowing the spikes to go 20 pixels beyond the length of the upper stripe is the way to compensate a gap between the spikes and make both shapes optically equal.

And now some more sophisticated examples of differently shaped stripes.

So, if you are creating a poster with folded stripes and text on them or you are putting a bright "discount" stripe on a product card of an online store, mind making them optically balanced. Sharp edges should go a bit beyond the rest of the shape, especially if it's a rectangle.

And what about aligning plain text and paragraphs that have a background? It depends on the visual density of the background. If it's light, you can align the highlighted paragraph with the rest of text.

Since the background is light, it doesn't interrupt the usual text flow.

A different approach can be applied to a dense background. On the picture, the black background is aligned with the rest of text while the white text inside of it is placed with indents.

Unlike the case with the light background, the black one has substantial optical weight, and if the goal is to insert a paragraph seamlessly, it's better to align it the way shown below.

The same principle will work with buttons and input fields. Of course, it's not a dogma, just the optics-based vision of an interface.

The light background of input fields on the left can go beyond input labels and user's input. The right edge of "Send" button is not fully aligned with the right edge of input backgrounds since the button is darker and looks heavier from optical perspective.

On the right, inputs have solid borders, and I aligned them with the labels while user's input has indents inside of the boxes. "Send" button has a triangular side. The button is moved a bit rightwards to look balanced with the rectangular input fields above.

And here we are approaching to one more aspect of alignment - the alignment of text and icon buttons. Look at the buttons below. The text looks centered, doesn't it?

The trick is that on the right button I moved the word a bit to the left, since the right edge is triangular. Moreover, the arrow-like button is 40 pixels wider to look optically equal to the rectangular one.

Not only do text buttons have horizontal alignment, but also they have vertical alignment of a word and a background. The first approach I'd like to tell about is used in the interfaces of various operating systems, sites, and applications. It's the alignment based on the height of an uppercase letter of a font (so-called cap height). It equals the height of either "H" or "I".

Basically, the space above and below an uppercase letter and the edge of a button is equal. It makes sense because command names usually are written in title case and English letters have more ascenders - upper sticking out parts (l, t, d, b, k, h) - than descenders - lower hanging parts (y, j, g, p).

Another approach is to align a name and a background using the height of a lowercase letter of a font (so-called x-height). In sans and sans serif interface fonts, it equals the height of - not surprisingly-the letter "x".

This approach also makes sense because the main optical weight of a text is concentrated in the area where lowercase letters are placed.

Is there any difference between these approaches? Yep, there is a difference. However, it's not that big.

More examples for comparison below. The cap-height approach represented by the left column is definitely better for "Cancel" and "OK" - so widely used buttons - because "Cancel" has no descenders and "OK" is all capitals. The x-height approach shown in the right column is better only for "Sync" button, the name of which has both an upper and a lower sticking out elements; "Cancel" and "OK" words seem to be placed too high.

The situation with icon buttons is slightly different. Let's put a popular "Send" icon on a round button. Which variant looks more balanced?

Hope you've noticed that something is wrong with the left one. It happens because of different alignment methods. The first option treats the icon if it was a rectangle. To a certain extent that's right because when you send an SVG or PNG file to a developer it's a rectangular sheet with a paper plane art on it. The right variant shows the icon placed the way all its sharp edges have equal distance to the circular button background.

If you prepare a file for a developer, you need to reserve some area, so that they can center the icon on the background optically right.

The same story with "Play" buttons. If you directly align these shapes - a rounded rectangle and a triangle - they'll look odd.

If you want to position the triangle optically better, encircle it and align this circle with the button background.

Important to remember

Shapes with sharp edges should be larger to look balanced with the neighboring rectangular objects.

Cap-height alignment is an effective and widely used method of positioning button names on button backgrounds.

One of the effective ways to correctly position an triangular icon on a button is to encircle it and align the circle with the background.

3. Optical corner rounding

What can be more circular than a circle? I used to think that nothing, but as I said at the beginning of this article, our eyes are weird and sometimes perceive things not as we expect. So, which circle on the picture below looks the most smoothly circular?

People who I asked before were choosing between numbers 3 and 4. Numbers 1 and 2 are definitely too skinny, 5 is too plump. If we overlap the third and the fourth variants - a geometric circle and a modified circle - we'll find out that the second one is a trifle heavier than the first one and, consequently, more circularto our eyes.

To show what I mean I took letters "o" from three famous geometric fonts - Futura, Circe, and Geometria. Given that high-quality fonts are built based on human visual perception and use a sophisticated system of optical construction, I suppose their circular shapes look more circular than geometric ones. Aren't these letters pleasant to your eyes?

Let's overlap them with geometric circles. Even the most geometric Futura's "o" has four sticking out parts. Circe's and Geometria's letters are, in addition, wider than circles, but even if they had equal height and width, we could see these four "bellies" as if they were hungry and overate.

So, optically speaking, a modified circle (on the right) can look even more circular than a geometric one (on the left).

How can we use this phenomenon? For corner rounding, of course! If you utilize the embedded rounding feature in a popular graphics editor - Photoshop, Illustrator, or Sketch - the result will be not optically good.

Human eyes immediately detect the point where a straight line suddenly turns into a curve. And this rounding doesn't look natural.

I fixed this issue taking into account our visual perception.

This kind of rounding has an extra area beyond the geometric circle making the point where a line meets a curve unnoticeable.

Just try to feel the difference between these rounding methods.

Now we can apply this approach to rounded buttons.

I guess you might have noticed that the buttons on the right have more smooth corner rounding and it is more pleasant to your eyes.

The same story with app icons. One doesn't simply use standard corner rounding to reach a perfect result. But before we dive into this topic let's take a look at two differently rounded shapes.

The first one is a rounded rectangle, which I created in Sketch. The second shape is a superellipse, also known as Lamé curve. It was discovered by a French mathematician Gabriel Lamé and depending on the formula used can vary from something like a four-pointed star to the shape looking practically as a rounded square.

Marc Edwards proposed the formula of Lamé curve that resulted a smooth and optically perfect shape. Icons starting from iOS 7 are based on it.

Later this shape was modified by adding golden ratio proportions and a grid for guiding the designers of new icons but that's a different story.

The main benefit of using shapes like superellipse is their more circular and smooth appearance. On the other hand, these non-standard shapes are difficult to insert into a real interface. One should either combine multiple SVGs, include special formulas or scripts into the code or use PNG masks like Apple does for its app icons.

As for design process itself, there is a simple fix for rounded corners. You need to convert revertible rounding effects into an outline, enter the shape editing mode and manually move curve handles closer to each other.

The difference is even more vivid with acute angle rounding, which is important for drawing optically correct road or metro schemes.

Important to remember

Geometrically rounded corners look artificial because you can easily see the points where a straight line suddenly turns into a curve.

Optically correct corner rounding needs special formulas or some manual adjustment of a shape.

Bonus

Sometimes a not ideally geometrical square looks more squarish. You might think, "What a ridiculous nonsense?" So, what do you think about the squares below? Which shape looks more squarish?

If you've chosen the left shape, you've managed to hear the voice of your unbiased optical perception.

I personally was surprised when learned that our eyes are more sensitive to the height of an object than to its width. It explains why even in geometric fonts, letters "o" are always wider than geometric circles, and the vertical stems of letters "H" are always thicker than the horizontal ones.

Feel free to get in touch elsewhere. I got cute pics on Dribbble, full-size projects on Behance and design presentations on SlideShare.

# data[].attributes.attachment_link.title
Optical Effects in User Interfaces (for True Nerds)

# data[].attributes.attachment_link.description
Our eyes are weird organs that often are telling lies to us. But if you know the peculiarities of human visual perception, you can build more approachable and clean designs. Not only do type designers utilize optical tricks for creating readable and well-balanced fonts, but it's also helpful for interface designers, who build user-machine communication.

# data[].attributes.body
WHY the CUCUMBER SANDWICH ?

# data[].attributes.body
wish to go running (never had) that grows in each of us because of this Quarantine

# data[].attributes.body
How to find our persona or Stereotype Persona in Quarantine?

# data[].attributes.body
Guys, if you're working on microinteractions, I suggest you to read the book Mara sent us BEFORE starting working at the challenge.
I found it really helpfull!