6-web-design-trends-awwwards-image02-1

6 Web Design Trends You Must Know for 2015 & 2016

Trends in web design come and go.

Who can forget the GIFs of the ‘90s, or the more up-to-date focus on flat design?

Recently, we’ve seen a surge in popularity of responsive web design, as more and more sites join the drive to become ‘mobile ready’ which is now even more important in the wake of Google’s Mobile Friendly update.

Let’s examine some of the most popular for this and the coming year.

1. The Proliferation of UI Patterns

One of the side effects of responsive design has meant that a lot of sites look similar. However, responsive design isn’t solely to blame. The rise of WordPress sites and the booming theme market also have a hand in it.

And some folks, such as Matthew Monbre, have copped to being guilty of following everyone else’s look with his company’s site.

6-web-design-trends

Photo credit: Cypress North

But having a similar look isn’t necessarily a bad thing. That’s because we’ve changed the way we consume the web, which has resulted in a lot of common UI design patterns. Design patterns have matured and as such, there’s little in the way of innovation when it comes to UI patterns.

In other words, a checkout will still be a checkout and should function as such. Same with a login model. There’s no real reason to reinvent the wheel. UI patterns must guide users through a smooth experience.

Here’s a few patterns you should be familiar with:

    1. The hamburger menu: While some criticize this pattern’s use, there’s no doubt that it’s widespread use makes the function easily recognizable for users.

6-web-design-trends

Photo credit:Silenza via awwwards

    1. Account registration: You’ll find this pattern whenever you try to register for a site. There might be a form to fill out or a button that’ll allow you to use a social account to sign up. Multi-step form wizards are also effective since they “chunk out” the required fields, reducing friction and encouraging users to flow through the process.

6-web-design-trends

Photo credit Typeform

    1. Long scroll: Placing all your important elements above the fold is now a well-known myth. Furthermore, almost everyone is accustomed to long scrolls thanks to mobile devices. The technique works especially well for sites that want to lure users through storytelling, and you can still mimic a multi-page site by breaking the scroll into clear sections.

6-web-design-trends

Photo credit: Vimeo

    1. Card Layouts: Pioneered by Pinterest, cards are everywhere on the web because they present information in bite-sized chunks perfect for scanning. Each card represents one unified concept. Since they act as “content containers”, their rectangular shape makes them easier to re-arrange for different device breakpoints.

6-web-design-trends

Photo credit: TheNextWeb

  1. Hero images: Since vision is the strongest human sense, HD hero images are one of the fastest ways to grab a user’s attention. Thanks to advances in bandwidth and data compression, users won’t suffer from slow load times either. One common layout you’ll find is a hero image above the scroll, followed by either zig-zagging sections or a cards-based arrangement.

6-web-design-trends

Photo credit: Maaemo

For more UI patterns and techniques, check out the free e-book Web Design Trends 2015 and 2016.

2. Rich Animations

Animations are being used more and more to enhance a site’s storytelling, making the experience more interactive and entertaining.

However, you can’t just stick animation in anywhere. Consider carefully whether it adds to your site’s story elements and personality. Animations can be thought of in terms of two groups:

  1. Large scale animations. These are used as a primary interaction tool have more impact on users and include effects like parallax scrolling and pop-up notifications.
  2. Small scale animations. These include spinners, hover tools and loading bars, and don’t require any user input.

We’ll describe 7 of the most popular animation techniques:

    • Loading animations

These are used to entertain users and delight users during an otherwise tedious experience. Loading animations tend to be popular for flat design, minimalism, portfolios and one-page sites.

6-web-design-trends

Slack via Lauren Tan

Keep them simple and avoid adding sound. They should however match your site’s personality and color palette.

    • Navigation and menus (nonscrolling)

Hidden navigation menus have become increasingly popular, especially as they can be used to save screen space. As you can see in the example below created in the collaborative prototyping tool UXPin, these use animations to reveal a menu when clicking on a specific button and prevent a jarring transition (like a navigation drawer hidden behind a hamburger icon).

    • Hover animations

Hover effects give a more intuitive feel to a site as users mouse over content. Users unsure about a feature’s function tend to hover over them automatically for instant visual feedback.

6-web-design-trends

Photo credit: Humaan

    • Galleries and slideshows

Galleries and slideshows are an effective way to showcase multiple images without overburdening the users. These are great for photography sites, product showcases, and portfolios.

6-web-design-trends

Photo credit: Born Fighter via awwwards

    • Motion animation

Our eyes are naturally drawn to motion, which makes it the perfect tool for drawing a user’s attention. Motion can also help with visual hierarchy. This can help to add interest and intrigue to forms, CTAs and menu items.

6-web-design-trends

Photo credit: Bugaboo via awwwards

    • Scrolling

Smooth scrolling relies on animation and gives further control to the user, who can determine the pace of how the animation unfolds.

6-web-design-trends

Photo credit: Squarespace

    • Background animations/ videos

A simple animated background can add visibility to a site, but should be used in moderation or it can be very distracting to the user. The key is to work on individual sections or create a gentle movement of an entire image.

6-web-design-trends

Photo credit: Dunckelfeld

3. Microinteractions

Microinteractions happen all around us, from turning off the alarm on your mobile phone to liking that cat picture on Facebook.

Each one done without a second thought. It’s likely that you started your day with a micro-interaction. By turning off the alarm on your mobile phone, you engaged with a user interface in a single moment. And more and more of these are baked into the apps and devices we use.

6-web-design-trends

Photo credit: Slack

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.

As recommended in Web Design Trends 2015 and 2016, you’ll want to ensure that these interactions happen almost invisibly. Don’t go overboard and keep it simple. Consider each detail with care, and make each interaction feel human. That is make text conversational and not robotic.

Micro-interactions are an important part of almost every digital design project. You’ll be hard-pressed to design a website or mobile app that does not include some element, or moment, that a user needs to interact with.

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

Last year, Google launched its new style language, Material Design. It uses shadow effects and the concepts of movement and depth in order to create designs that appear more realistic to the user.

6-web-design-trends

Photo Credit: Google Now

The goal of Material Design is to create clean, modernistic design that focus on UX. While Google’s design aesthetic has detractors, it’s been mostly praised as a game-changer.

With its minimalistic look, Material Design has a lot in common with another growing trend — flat design. Material Design, however, makes use of depth and shadow, which allows for more depth than pure flat design.

6-web-design-trends

Photo credit: Angular

Before now, we’ve seen the majority of Material Design projects limited to app design. Google however announced Material Design Lite in July, which is more suited to websites. Nevertheless, Material Design was intended to provide great UI and UX across devices. Lite uses vanilla CSS, HTML and JavaScript and is intended to make it simple to add the look and feel of Material Design to websites.

Material Design Lite doesn’t rely on any particular framework, so designers can use a wide variety of front-end tools to create their sites. It’s also lightweight when it comes to the code.

5. Responsive Design

Responsive web design has become incredibly popular in recent years thanks to the rise of mobile internet usage.

6-web-design-trends

Photo credit: UXPin

It’s safe to say responsive design isn’t going anywhere soon, as it represents a relatively simple and cheap way for businesses to build a fully-functional mobile-friendly site. But responsive web design does come with some issues if not carried out properly, the most important being performance.

To ensure that a responsive performs at the peak of its ability, 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 RESS – Responsive and Server Side
  5. Apply performance testing into the process in order to effectively measure and optimize each site.

Performance is important not only to UX, but also to Google in the wake of the Mobile Friendly update which released in April 2015. Responsive web design is also highly compatible with minimalism, thanks to the necessity to keep page weight down. It’s also great to work with cards and responsive design as they can easily restructure in order to fit any breakpoint or screen size (like rearranging rectangular containers of content).

6-web-design-trends

Photo credit: The Guardian

Responsive web design is becoming less of a trend and more of a best practice. And designers have come up with clever ways to get around any speed issues.

There’s no doubt that responsive design is highly useful and versatile, but it also should be lightning fast in order to deliver a great UX.

6. Flat Isn’t Going Away Anytime Soon

Flat design has been around for a while and is compatible with other trends such as minimalism, responsive web design and Material Design.

6-web-design-trends

Photo credit: Beoplay via awwwards

Going forward, it’s likely that we’ll see the following further trends in flat design come to the forefront.

  • Long shadows. These bring more depth to flat designs.
  • Vibrant color schemes. Popular UI frameworks and templates have prompted many to begin using more vibrant colors in their designs.
  • Simple typography. Simple typefaces help to ensure that text remains legible and readable in flat design.
  • Ghost buttons. These allow for functionality without distracting from the UX and are often represented as outlined, clickable links that change when the user hovers over them.
  • Minimalism. Looks to cut down on the number of elements in order to create a fresh, uncluttered UI.

Additional Advice on Web Design Trends

Don’t follow trends just because they’re the “hip” thing to do at the moment. Trends represent popular techniques for good reason, but make sure it’s best for your users. For example, an e-commerce site certainly wouldn’t do well as a single-page infinite scrolling site.

Trends are nothing more than additional tools in your designer toolbox. Always pick the right ones for the job.

For more advice on the 10 most important web design trends, check out the free e-book Web Design Trends 2015 and 2016. You’ll learn from the best with analysis of 166 examples from companies like Google, Apple, Reebok, BMW, Intercom, Adidas, Dropbox, and many more.

Jerry Cao

By Jerry Cao

Jerry Cao is a UX content strategist at UXPin — the wireframing and prototyping app. For visual case studies of effective use of white space in web design, check out the free e-book The Zen of White Space in Web UI Design. 23 examples are analyzed from some of today’s hottest companies including Apple, Square, Lever, Wunderlist, and more.

 

Original Article Link: AWWWARDS

2016-logo-design-trends

2016 Logo Design Trends Forecast

This article has been contributed by Chandra.

The art and science of logo design is continuously changing as businesses can now engage consumers in an increasing number of digital channels. The frequency of engagement is increasing at a rapid rate, while the quality of engagement has become more inclusive, more personal.

2016 Logo Design Trends

Considering everything else that is happening, the way in which business logos are designed is changing as well. The “rules” that worked before the turn of the century no longer count today. In fact, what has held true for the last five years no longer has the same authority. The art and science of logo design is changing as fast as the “opportunity to engage consumers” grows.  And again, this “opportunity,” is changing as fast as technology develops.

Fortunately, there are many people who have dedicated themselves to closely studying these changes, establishing patterns and forecasting trends in logo design. Bill Gardner of theLogoLounge (read the interview here) remains one of the most credible sources for such forecasts. His observant eye and attention to detail, as well as his innate “radar” to detect design approaches fast becoming “trends”, is what sets him apart from the other forecasters.

So what will logo design be like in coming months, or in the near future? Here are six logo design trends that are forecast to strong in 2016.

2016 Logo Design Forecast 1: Flat

Famous Flat Logos

Flat designs will continue to dominate and not because they look clean and forthright, but because they register well in any browsing device, especially due to SVG. They load a lot faster too. Patterns, textures, shadows, gradients will give way to simpler lines and colours. These register better in print or online, in black, grey or colour, and on any browsing device. Companies will lessen or simplify their design elements making them easily identifiable, almost iconic.

2016 Logo Design Forecast 2: Handmade

Handmade logos speak of honesty. They somehow convey an effort to be intimate or personal. This trend has been slowly gaining ground for several years now. It is not something new. A small sketch of an arrow, or one or two scribbled letters prominently combined with some other design elements have been evident in a growing number of company logos. Some look like “hybrids.” They’re the ones that don’t look “truly” handmade but they don’t feel digital either. Such designs suggest the idea of being handmade and yes, they also do seem to register the same charm, though not on the same level.

Handmade Logos

Handmade elements and font sets, or a suggestion of such, will be more evident in logo design as the year progresses. Bespoke font sets will be a valuable design asset.

It is important to emphasize that typography is no longer just the style of text you add to the design to spell out something. It is, and will always be, a great contributor to communicating the brand’s personality.

2016 Logo Design Forecast 3: Kinetic Logos

Dynamic logos, kinetic logos or logos that change-but-remain-the-same will find greater appeal. Perhaps because the style offers freshness, or it could be because the decision of what is attractive becomes even more personal, while the need to connect to as many people as possible becomes the priority.

Dynamic Logos

It has also become a great way of breaking down information and communicating it in “byte-sized” pieces.

Penguin Random House
City of Melbourne Logo Variations

This type of logo has the ability to make consumers unconsciously aware of the direction and diversification the company and brand is pursuing in real-time. The danger lies when the “kinetic” change does not “rhyme” with the core values the company has effectively communicated and has established for itself.

Think of the daily changes in the Google Doodle and you will get the idea of how this growing trend both fascinates the consumer and answers the need to present something fresh on a regular basis.

2016 Logo Design Forecast 4: Negative Space

Negative space will continue to amaze. A design is something you see first, but then it speaks to you and you understand what it is saying. That is what makes a design work. If it is able to convey more than this, and the consumer is able to pick up on a deeper message, it becomes much more special. This is why negative space will continue to lure many to explore its strengths.

Negative Space Logos

The ability to communicate “more” to the consumer without adding extra elements is a challenge to a designer. To the public, it’s a welcome visual “egg hunt.”

2016 Logo Design Forecast 5: Letterstacking

Letterstacking will continue to hold ground. This trend has been around for quite a while but is it not losing popularity. Perhaps it is because it draws in the consumer and challenges them to make sense out of it.

Letterstacking Logos

There’s a nagging suspicion that our tendency to break down things and discover how we can rearrange them better is not the reason for this continuing trend. It may be because it offers a creative solution for logo designers to be able to present long “text” in visual bytes. It offers them a creative way to break down long messages. Whatever the reason may be, the style seems to work and has gained a foothold in logo design.

2016 Logo Design Forecast 6: MonoLines

Thin Lines/Mono Weight will present itself as “the fresh, clean look”. This is the use of a line, unchanging in thickness, to design and compose the entire logo in something akin to “wire”. At first glance, this logo design style seems to run against the idea of “simplification” because of the “intricacy” of the execution.

Monoweight Logos

A deeper look, however, will result in an appreciation of its ability to present something clean, clear and outrightly “honest”, with a hint of craft (handmade). This makes it more in line with the above mentioned forecasts rather than against them.

Monoweight Logos

True, it offers so much, and yet, the clean thin lines do strike you with an “honesty” that is quite refreshing. It presents a welcome break from seeing so many gradients and colours in the last few months, if not years. The use of thin lines, or lines with a consistent thickness in mono scripts, mono icons and mono crests, is a lively progression of just how strong this design style has been growing over the past few years.

Trends for Toppings

Trends Topping

The frequent and more personal interaction between brands and their markets has resulted in greater challenges on the part of the companies behind them to continuously and effectively communicate their messages uniquely and creatively.

Changes in the design of logos are common. As the company grows, as its interests diversify, as its personality and values change, so too must its logo. It is for that purpose it was created – to visually communicate the company and its values.

Trends are like the sprinkles you put on top of an ice cream sundae. You already know how your ice cream will taste like because you picked the flavour. You can opt to add sprinkles. These will make it more exciting to the eye and probably add a bit of texture or crunch, but they will not change the flavor of your ice cream. If your ice cream is Vanilla, it will still taste of Vanilla. If it’s Rocky Road, it will still have the chocolate flavour and the nuts. Adding sprinkles on top does not change the ice cream. It will simply make consuming it a bit more “interesting”.

That is how it is with trends. They can add a touch of visual excitement, of freshness, or “now” in your logo. It must still have something to say. Something about the company that must ring true. Adding a trendy design element is like topping your ice cream with sprinkles. It simply won’t make a difference if you happen to choose a flavour you don’t like.  It’s the same with design trends. Adding something trendy to your logo will not help if your logo is poorly designed, if the message your logo must convey is not well communicated or understood, or simply and sadly, does not exist.

But wouldn’t it be great though, if you could have the perfect ice cream flavour and have everything on it?!

Chandra is a graphic designer and content writer at welogodesigner – a creative logo and graphic design team. Connect with him viaTwitter.reative logo and graphic design team.

Original Article Link: Just Creative