Posts in Uncategorized (6)

On Visual Hierarchy

What is Visual Hierarchy and why it's important?

Designer’s job is not only making something beautiful but also arranging the content clearly and making an interface work well so the user never get lost. And that is possible by creating visual hierarchy.

Visual hierarchy is the organization of items on an interface. It is so important, because it helps people recognizes the most important elements first and in the right order on the given interface.

Especially on mobile app interfaces, the users have a very low attention span. They need to understand the interface within an instant, without reading labels or content - even more so than on the computer. Why -? Because they are looking at the screen on a mobile device: They are usually multi-tasking, or outside, walking even.

When a user looks at a interface they don't read, they scan. That means they will not stop until something interesting catches their eye. Visual hierarchy make the interface easier to be scanned and lets the user focus on the important information. It is like an invisible hand to lead them to notice the things that matter most and lets them take action confidently.


4 basic components of visual hierarchy

Use contrast, size, color and proximity to organize elements on a page to create a sense of visual importance. Actually there are many other things which can affect the visual hierarchy such as shape or prominence. However, those four above are basics to create hierarchy.

1.Contrast

Contrast shows relative importance. you want to give important things higher contrast like the square in the middle. The rest of the image is light, so a dark square is more noticeable. People would click the dark one than if all the squares were the same colour.

201506116_blog_VH_1_contrast

2.Size

This one is simple. We all know the larger text is more important than the smaller text - News headline is bigger than other less important article for instance. Bigger grabs our attention first and so comes across as more important. Size guides your eyes from the biggest to the smallest elements. If everything is the same size, nothing looks more or less important.

201506116_blog_VH_2_size

3.Colour

You can use a bold color to make something stand out. Applying a bright, bold color to a feature will draw eye to it, making it a main item within the design.

201506116_blog_VH_3_colour

Like in this example blue is quite, red is loud. More people will click a colour that comes forward like red. Colours that stand back are good for something like a menu that is always on the screen. If it is as strong as red, it steals focus from more important things.

4.Spacing & Grouping

The closeness or distance between two objects creates a feeling of those objects being related or unrelated.

201506116_blog_VH_4_proximity

In the image you see 6 squares which are not aligned horizontally or vertically, but we see two groups of squares and the squares in each group seem together.

To create this perception put related elements closer together and unrelated elements farther apart in your design.

Reference Article


Create Visual hierarchy : 3steps

201506116_blog_VH_5_3steps

1. Create a version without hierarchy, spread the content out and read each item’s hierarchical level.

2. Place the items (Spacing) and give different weight(Contrast, Size) on them to achieve a solid foundation of Visual hierarchy without using colour.

3. After nail down the purpose of each items then dress the design up using colour to take the visual hierarchy even further.

4. Last but not least, always do user-testing. Get your design and VH choices validated by potential users by asking them what elements on the screen they are drawn to first, second, and so on.

To sum up, Prioritize your interface based on thoughtful consideration of the content and goals of the design. Then, apply contrast, size, and spacing. For the last step, figure out where to add colour to use for increase the visual importance.

>Reference Article


Here are some good articles to check out if you want to know more about Visual hierarchy!

52weeksofux 

Awwwards : Understanding Web UI Visual Hierarchy

Creativebloq : 4 key ways to create visual hierarchy

 

Curtis Hayes joins ReignDesign

Curtis

Curtis joins ReignDesign as a project manager.

We’re extremely thrilled to have Curtis as part of the team. Curtis is a true Brooklynite who has spent the last 14 years in China.

Curtis must be the ideal PM:

With years of experience as a developer himself, he knows what it takes to be the link between client and team.

He further is fluent in agile development methodologies, a previous agile Scrum-master.

His friendly yet thoughtful attitude means he is ideal person to understand our clients' needs and his good sense of humour and his air of authority lets him keep a clear head when things get tight.

When he is not working, he likes to play board-games, go to quiz nights, and nearly became a professional rugby player in Wales once. Lucky he didn’t.

Jason Wong joins Reign Design

Jason is ReignDesign’s new Interface Designer. 

Jason grew up in Los Angeles and later moved to Seattle where he studied both design and psychology. Since then his tireless work ethic has seen him practicing design in all media: graphic, industrial, web, video, and motion graphics. 

Jason ran a small design consultancy in Seattle for two years, giving him valuable experience in producing designs which reflect the values of a company.

In his spare time Jason loves to forage for berries and mushrooms, read books, listen to Ethiopian jazz and travel to places that are outside his comfort zone.

Camille Christian joins ReignDesign

10993138_10152652740440868_6409772093959443174_o

Camille joins ReignDesign as a executive assistant.

Why we’re really proud to have her as part of the team:

Camille is like a super-woman, she is extremely smart (got best grades of her year in college), knows how to kick ass (trained in all sorts of martial arts since she was 3 years old) and has a truly multi cultural background - she grew up & lived in England, France, USA and now Asia, which she totally puts to use when interacting with people.

She hails from London, where she had several jobs as executive assistant. And did I mention she is into video games and boxing? Swoon…

Merry Christmas!

Hello there!

Since Christmas is almost here, I wanted to give my colleagues a special gift. And drawing is what I do best - since I am a graphic designer, so I decided to do a Holiday version of each of us. Since we're in three different countries, I thought this would bring us together for the holidays. In the past, I've observed everyones behaviour and quirks, so I used this to create a special red and green ReignDesign.

 


Merry christmas_Alex

 

Merry christmas_Andreas

 

Merry christmas_anna

 

Merry christmas_april

 

Merry christmas_Fluxa

 

Merry christmas_Jason

 

Merry christmas_JC

 

Merry christmas_Matt

 

Merry christmas_ming

 

Merry christmas_sherry

 

Merry christmas_sinae

 

Merry christmas_Tuo

 

 

 

2014_christmas_card_All_a4

 

I would like to wish everyone a joyous and blissful Christmas and a new year filled with joy, peace, and prosperity! May 2015 find you happier and more caring for all humankind.

With warmest wishes,Shinae.