Introducing 

Prezi AI.

Your new presentation assistant.

Refine, enhance, and tailor your content, source relevant images, and edit visuals quicker than ever before.

Loading…
Transcript

Web Design trends for 2014-2019

inf 322 - assignment #4

Visuals & Color

Visuals & colors

2014

Simple colors

Over the last year, bold and bright colors have been making a name for themselves. However, so have light and subtle color combinations that use a very light color pallets (for example, Google). A lot of their UI use light grays and subtle sprinkle of color all over making the websites seem light and clean.

Purpose & How to

Using of good color and contrast will make your website look beautiful. Background and text color should be provided with enought contrast so that visitor dont have any problem in read the text .The more visually appealing your website is , the more likely your customer will be able to recall it.

Simple animations

You see this all over websites and apps; they are subtle animations that give affordance and personality to the design. You see it in gestures, like when you move up and down the chat bubbles in Messages where the bubbles bump against one another. You also see it on click events like when you click on the navigation and instead if just bluntly appearing, it transitions to roll down. A lot of this is made possible to the widespread use of CSS animations and transitions.

Purpose & How to

While creating website one should know that it should be user friendly means user should easily navigate to what he is looking for , so while creating website one should think according to user perspective .Also the important page should have easy accessibility. Using of high quality also affects view count of your website , using high quality photos user may spend more time to view your website, increases user engagement.

2015

One-color dominance

In 2015, more websites were using one color heavily. Backgrounds, type, image overlays, buttons. Strong accent on one color puts emphasis and makes it more memorable as well as easily associates that color with the brand.

Purpose & How to

Solid color background is an excellent match for those websites that are obsessed with detailed or busy interfaces. Also, it is one of the main components of minimal style. Although it seems that monochromatic plain background is incapable of attracting visitors, it can easily set onlookers’ eyes on vibrant color and polished appearance. Of course, such type of background is aimed to:

- Make text more discernible;

- complement foreground elements;

- add neatness and accuracy;

- achieve balance;

- bring alive minimal style;

- distinguish multiple areas.

Video backgrounds

Video background is the ultimate experience portraying emotions, intentions and tells way more than any picture. We saw this trend rise quickly in 2014 but the real peak will be in 2015. Using a video background can create a very distinct feeling for your site, establish a mood and even tell a story that might be difficult to convey otherwise. Video also sets your site apart from many others, because while the trend is catching on, there are still not a huge number of sites using video backgrounds. Video is just one more tool that you can use to showcase your creativity.

Purpose & How to

The best option is to create your own video. That way you will have complete control over the contents and own all the rights to it. This though can be time-consuming and expensive (especially if you don’t know anything about video and have to hire a videographer).

If you don’t want to film yourself, consider a creative commons licensing option. You can find and use creative commons videos from popular sites such as YouTube, Vimeo, MotionShare and SitePoint. Just be very careful to check licensing rules and provide proper attribution. The biggest downsides to using creative commons video are that you are restricted in what videos you may find, the number of poor-quality videos to filter through and that another site could be using the exact same thing.

Finally, you can opt to buy pre-made videos. Sites such as VideoHive include a variety of video options for a fee. You do have the some restraints with these videos but most often they are a decent high-quality option.

2016

Hero video headers

Hero Video Headers (Think Movie-Style Sites)

Websites design is going to the movies. Higher speed Internet connections and better video plugin integration is making it easier for more websites to include an immersive movie-style experience. Video clips are growing from small snippets to almost full-length preview clips. The images are sharp, crisp and in high definition, creating a video experience online that is new to users, but familiar from other devices, such as televisions.

Tiny animations

Tiny animation

Animation has been one of the “it” trends of 2015. From hero-style animations that lead off a site design to those tiny divots that you almost miss, moving elements are everywhere. And they will continue to grow in popularity, even as they decrease in size. Animated user interface elements are a fun way to help engage users, give them something while they wait for content to load and provide an element of surprise.

Purpose & how to

Who would have thought that a popular approach for mobile app developers would come in handy with iconography? Designers are eager to apply this trick even to the tiniest things — user unterface icons.

Dynamic icons occur in design now and then. However, thanks to intuitive and lightweight after effects, an increasing popularity of creating visual walkthroughs, and the enormous potential of gifs, it is getting more widespread. Although the technique is used to support the message that icon should convey, yet it does not take long when the animated icons invade actual website designs and app interfaces, the more so the ground has been prepared and the way has been cleared.

2017

Gradients

Gradients

Missing from the design landscape for a few years, gradients are making a major comeback. But the look of the color blurring technique has shifted.

In the last round of gradients, there were subtle variations throughout the design. Apple’s iOS icons were a prime example. Now, gradients are big, bold and use plenty of color.

Purpose & how to

The most popular usage is a two color gradient overlay on photos. (This technique can look absolutely amazing!) It’s a great option to switch up your look or to make a less-than-interesting photo a little more intriguing. You can also use a gradient background to draw the eye when you don’t have other imagery to work with.

Video with sound

Video with sound

People are becoming more accustomed to watching videos – from short bits of YouTube to movies – on their devices. Websites can mimic this cinematic experience as well with a full-on video with sound display on the homepage. (It does not have to be auto-play to be effective.)

Purpose & how to

Proceed with caution. Include an option to toggle sound off and on, because not all users will appreciate it. The content needs to be so stellar that users will demand sound as part of the experience. (This is a trend that can be tough to pull off but can work beautifully if you have the right video and sound content combination.)

2018

Vertical patterns and scrolling

Vertical Patterns and Scrolling

A bigger leaning toward mobile – with some thinking mobile traffic could equal desktop traffic this year – means more sites are being designed with vertical user flows.

A few years ago, we were all debating the end of the scroll in web design only to find it roaring back as an important interaction tool. Smaller screens lead users to scroll more and designers to create user interfaces that are much more vertical in nature.

Purpose & how to

  • Suggest scrolling with design elements or tools so that every user can quickly see how the site works. Arrows, animated buttons or similar user interface tools are fun and easy ways to help the user determine what to do next. Some sites even include a small button with instructions like “Scroll for More” or “Get Started” to help navigate a site with unconventional techniques.

  • Make clear distinctions between scrolling clicks or taps and other calls-to-action so that your website gets the desired interaction.

  • Do some research and look at how users are interacting with the scroll. In Google Analytics, for example, you can open the “In Page Analytics” tab to see how many people click below the fold. Based on the data, you can then tweak the design as necessary.

  • Don’t go overboard. Long scrolling does not mean 500 pages of continuous content – a long scroll can also be simple. Tell your story and then stop. Don’t force it. Deca, below, uses a scroll that is only a few pages long.

Interactions

fOCUS ON INTERACTIONS

Going hand-in-hand with animation is interaction. As the staple of apps and mobile interfaces, interactions create links between users and devices. Good interactions are often small – even micro in nature – and provide value to the user. From the simplest of alarms to a text message to a blip that it is your turn in a game, these small interactions shape how people interact with devices (and how loyal they are to associated websites and apps).

Purpose & how to

  • Create some fun with animation, but exercise moderation. Think about how the icons in OSX bounce as new programs load. The animation informs you that the program is responding but it doesn’t burden your current actions. Strive for the same usefulness in your animations since they are much more than just visual delight.

  • Seek harmony. Contrast is your friend, but use it carefully. When you get down to specific moments of a user experience, details like color theory matter more than you think. If your app uses a green color scheme, make sure the colors flow through your micro-interactions. Each moment should feel visually connected to the larger app design.

  • Think about how microinteractions evolve. Does the microinteraction behave exactly the same on the first and thousandth time? Or does it evolve over time? For example, think about how an alarm becomes louder as you keep hitting the snooze. If you want to stand apart from other designs, you must consider these details.

  • However, don’t obsess too much. Overdesign is the death of micro-interactions. Once you’ve communicated the message in a quickly and delightfully, get out of the way and smoothly transition back into the normal flow of tasks.

2019

Bolder, Brighter Color

Bolder, Brighter Color

Big, bright color really started to emerge with the flat design trend and has continued to gain momentum. Google’s Material Design documentation furthers that conversation. And just take a look around Dribbble, where color is everywhere. These are key indicators that color will stay big in the coming year. Some of the change to the big color trend is in the type of colors used. While 2015 used more monotone big color designs, usage is starting to shift to larger and brighter color palettes with an almost 1980s vibe to them.

pURPOSE & HOW TO

Take Advantage of Color

One of the first things most people notice about material design is the bold and bright color scheme. If you take a look at the color section of the documentation you will see so many colors. This is a great thing for a few reasons. First, bold colors are an amazing way to give any Google UI a personality. There is nothing wrong with creating a design with a fantastic color scheme; it’s a nice change as when iOS7 came out, it celebrated light gray scale colors. Additionally, the way Google sets up the guidelines for color is clear and makes for a great reference on how to use color well.

Websites with Slides

Websites with Slides

First there were sliders, so that websites could move images within a frame to showcase content. The next part of that evolution includes full-screen slides. Each slide refreshes the entire screen with new content; it can work with a click, scroll or timed effect. Users can navigate forward and backward for an experience that is almost physical. Expect to see plenty – and we mean a lot – of sites using this concept in the coming months.

Learn more about creating dynamic, engaging presentations with Prezi