1. The Rapid increase in numbers of UI Patterns:

As of today we found that lots of websites are look alike similar in style, layout, design, representation of Content, etc etc... And increase of CMS Websites booming the market. Depend upon the user the designers are designing the web considering the consumption of the web by the user. Hence it is not bad idea why websites are similar and UI patterns must guide users through a smooth experience, Here are few patterns you should be knowing or familiar with:

The hamburger menu: Why i like this because consider an example http://silenza.it/ , u will like it.

Account registration: whenever you try to register for a site You’ll find this pattern There might be a button or a form to fill out that’ll allow you to use a social account to sign up. For Example http://www.typeform.com/

Long scroll: A single page which is having the long info, The technique works especially well for sites that want to describe users through storytelling. Example https://vimeo.com/

Card Layouts: HeHe..!! Here comes my favourite the card layout. Cards are everywhere on the web because they present information in a very informative and easy way. http://thenextweb.com/

Hero images: HD hero images are one of the fastest ways for a user’s attention. for Example: http://maaemo.no/ , U will find the Card based arrengements everywhere.


2. Rich Animations:

Animations are like attractive point to tell story about anything you want just animate it in proper manner and see the user going through and follow up the concept. Animations can be thought of in terms of two groups:

Large scale animations: parallax scrolling and pop-up notifications.

Small scale animations: spinners, hover tools and loading bars, Here are 7 of the most popular animation techniques:
  • Loading animations: Loading animations tend to be popular for flat design, minimalism, portfolios and one-page sites.
  • Navigation and menus (non scrolling): like a navigation drawer hidden behind a hamburger icon, these use animations to reveal a menu when clicking on a specific button and prevent a jarring transition.
  • Hover animations: Just hover on the product in website you will get an effect which is very eye catchy and attractive and tells bit summery of the product.
  • Galleries and slideshows: Browse through photography sites, product showcases, and portfolios you will find many images back to back coming at one place one after one.
  • Motion animation: 360 degree views of the products just hover on product it follows your mouse movement and spins accordingly
  • Scrolling: Smooth scrolling you will find almost every single scroller websites
  • Background animations/ videos: A simple animated background can add visibility to a site, its catchy and tells a lot about the product.


3. Microinteractions

Microinteractions are like these happen automatically for example early in the morning if we wake to alarm then we had to switch off it then it happens like that only after that checking the messages and all are like happens one after one, 

Micro-interactions tend to do, or help you do, several different things:

1. Communicate a status or bit of feedback
2. See the result of an action
3. Help the user manipulate something
Micro-interactions are a vital part of any app.

Each of these interaction types lead users to a path of more human-centered design. This concept of making devices more human-like in their moments is a key to adoption and usability.


4. Material Design: A Richer Alternative to Flat Design

It looks more realistic to the user and It uses shadow effects and the concepts of movement and depth. Last year, Material Design was launched by Google.
The Material Design goal is to create clean, modernistic design that focus on UX.
It's like game-changer in this world. I personally likes it.
flat design is similar to Material Design.. flat design has a lot in common with Material Design however, flat Design makes use of depth and shadow, which allows for more depth than pure flat design.
Google however announced Material Design Lite in July, which is more suited to websites.
Material Design was like that to provide great UI & UX across several different devices.
Lite uses vanilla CSS, HTML and JavaScript and it is simple to add the look and feel of Material Design to websites. https://angular.io/
Material Design lite is independent or not dependent on any of the frameworks so designers can use any front-end tools to create their sites. Material Design it is very lightweight.


5. Responsive Design 

Now a days Responsive design is trending everywhere..
The use of mobile internet is increasing day by day hence thank to it for the rise of responsive design.
And the responsive design is very simple and cheap way for accessing the website in mobile(Mobile Website Design).
There are many issues if not taken care properly while designing. 

According to Guy’s Pod, designers should:

1. Avoid using JavaScript and CSS image loading using the display:none tag. This still downloads the image to the device and adds unnecessary weight to a page.
2. Use responsive images which are defined using a percentage.
3. Use conditional loading for JavaScript as many of the JavaScript components used on a desktop site will not be used on smaller devices. Pay particular attention to third-party scripts such as those used for social sharing as these often impact negatively and reduce performance.
4. Use Responsive and Server Side (RESS)
5. Apply performance testing into the process in order to effectively measure and optimize each site.

Performance of the website is very important factor. Google released mobile friendly update in April 2015, It’s also great to work with cards and responsive design as they adjust themselves according to the width and all. Best Example is http://www.theguardian.com/
However the Responsive design is trending everywhere and it is like practice now a days.
It is best and also very versatile.


6. Flat Design

This is like as name says flat in design Example: http://www.beoplay.com/ Flat design has been around for a while and is compatible with other trends such as minimalism, responsive web design and Material Design.


  • Long shadows: more depth to flat designs.
  • Vibrant colour schemes: 
  • Simple typography: Simple fonts and simple color combinations look awzs!
  • Ghost buttons: Outlined click-able links and the functionality of these will not disturb the layouts of the UX.
  • Minimalism: To create a fresh, uncluttered UI.


My Advise:  Do not follow any trend, because trends are those which are popular but according to me follow the performance, The better the performance the better the productivity an functionality.
Pick right one from your kit, Trends are like additional tools in your kit....
Just go with right Choice.


THANK YOU!!

No comments: