ui design trends

22
7 UI Design Trends Explained with Examples

Upload: karthikeyan-dhanasekaran-csm

Post on 15-Jul-2015

153 views

Category:

Documents


2 download

TRANSCRIPT

Page 1: UI Design Trends

7 UI Design Trends

Explained with Examples

Page 2: UI Design Trends

1. Minimalism

UI design is going back to basics – In a simple words Glossy icons are replaced by simpler one-color versions or text-based buttons, rich gradients with simple solid color combinations.

For Most of the peoples, this lack of visual detail works astonishingly well – the interface is easy to digest and its elements don’t get in the way of the tasks they’re trying to accomplish.

When to use it: minimalism is a great way to design a web application which focuses on user generated content – if done right, users will rarely complain about it. However, keep in mind that many clients will find this approach too simplistic for their taste, so you might want to check their preferences before starting your project.

Ex:-Pinterests, Yammer, Windows 8 Metro design etc..

Screenshots - Nextpage

Page 3: UI Design Trends

1. Minimalism (Screenshots

Page 4: UI Design Trends

1. Minimalism (Screenshots

Page 5: UI Design Trends

2. Skeuomorphism

Skeuomorphic user interface design approach relies on imitating the look and functionality of traditional and familiar objects to make the interface more intuitive. For example, using wooden bookshelf with book covers to represent digital content is a prime example of skeuomorphism at work.

Still there is big debate going on in the user interface design community whether such highly skeuomorphic designs are justified or not. Some say it’s actually bad for user experience because imitating real-world objects necessarily means imitating the limitations that come with them, while others say this friendliness and familiarity that comes with skeuomorphic designs.

When to use: when designing mobile applications, skeuomorphic designs are highly popular and well accepted among the community. In part, due to touch-screen nature of these devices which gives an impression of touching real-world objects. For web apps and projects, skeuomorphic designs are usually not the best path to take.

Page 6: UI Design Trends

2. Skeuomorphism(Examples)

Page 7: UI Design Trends

2. Skeuomorphism(Examples)

Page 8: UI Design Trends

3. Laser focused

Laser focused user interface puts visual focus on a single primary stuff, obvious task to do once a user opens the web application, instead of providing several equally important options. The key benefit of this approach is simplicity – users instantly know what the application is about and what the suggested action is.

When to use it: Laser focusing is a great approach for web applications and projects that have a single, most important function to promote. In most cases, this will be some sort of search or browse function but make sure to discuss this with the client.

Page 9: UI Design Trends

3. Laser focused(Examples)

Page 10: UI Design Trends

3. Laser focused(Examples)

Page 11: UI Design Trends

4. Context sensitive navigation

Context sensitive navigation came with the rise of dynamic user interfaces and is a great way to declutter your design. Basically, you need to ask yourself a simple question: which navigation elements should be on screen all the time and what can be shown only in certain situations (actions)?

Show options only when you need it or on selecting items.

When to use it: context sensitive navigation can be used in almost any project. Carefully target buttons and gadgets that can be hidden until the user performs a certain action, such as hovering a link, selecting an entry and so on.

Page 12: UI Design Trends

4. Context sensitive navigation (Examples)

Page 13: UI Design Trends

4. Context sensitive navigation (Examples)

Page 14: UI Design Trends

5. Collapsed content

Another great way to declutter your user interface design is to hide non-essential options and widgets under one link which will expand and collapse on a user’s request.

You can do this even on simple websites – instead of showing a large number of links in the header, consider introducing a “More” button which will display a drop-down menu with links to pages that are not crucial for the user.

When to use it: as with context-sensitive navigation, you can use this technique in virtually all projects. It’s especially helpful with pages that contain lot of interface elements for settings and options – these look most intimidating to end users, so hiding the unnecessary components makes things look much simpler.

Page 15: UI Design Trends

5. Collapsed content(Example)

Page 16: UI Design Trends

5. Collapsed content(Example)

Page 17: UI Design Trends

6. Content Chunking

Content chunking is a technique of presenting a large amount of content in smaller visual chunks, so it’s easier for people to read and mentally digest.

It’s important to note that content chunking hasn’t always been around. It emerged during internet era, when people started consuming large amount of information and needed a way to digest it more easily.

When to use it: This technique is something which ultimately depends on the client. However, you can use it in your design proposal to suggest how the content should look on the website, explaining why it’s beneficial to present it in that particular way.

Page 18: UI Design Trends

6. Content Chunking (Samples)

Page 19: UI Design Trends

6. Content Chunking (Samples)

Page 20: UI Design Trends

7. Long Pages

Once disapproved by both clients and designers, long pages which require a lot of scrolling are now all over the web.

This works surprisingly well when combined with previous technique of content chunking – users can quickly skim through content and find an area of interest.

When to use it: Long pages work very well when you are presenting product features and benefits or other similar content. If the content isn’t directly related ,you should split it on separate pages.

Page 21: UI Design Trends

7. Long Pages

Page 22: UI Design Trends

Cognition attempts to make sense of the world: emotionassigns value.

― Donald A. Norman, The Design of Everyday Things

Stay Tuned…