4 modern background tricks to try out

It seems that, as a constituent of a design, backgrounds live in the shadows; however, that’s not entirely true. In times when CSS only began to make its first steps towards the world conquest, the background had already taken on the role of the main decorative element of the website.

Nowadays the situation has not changed drastically. In most cases, it serves as a primary visual driving force that makes an important contribution to the general theme.

Traditionally, photos and videos are first choices for a backdrop. The fact is that they are simply overpopulated hero sections: every other website greets the online audience with either image-based or film-based backdrop. And that makes the Web (and your interface in particularly) pretty alike resulting in anticipated user experience.

One way out is to find fresh solutions by exploiting the brand-new techniques and playing around with the CSS3, HTML5, and JavaScript. Actually, there is a discernible trend of going for these options. There are at least four different modern dynamic backgrounds that take part in a competition to win its place in the sun these days.

Let’s look at them:

Particle Animation

Particle animation is one of the most popular choices right now. Loads of websites has successfully adopted this elegant cosmos-inspired solution. It works well in combination with plain solid color canvas, illustration, vector drawings, and even photos.

Moreover, the animation varies. It can be a bundle of chaotically moving dots that are scattered throughout the entire page to imitate starry sky or rain of stars, or constellation-themed solution where you can connect circles with thin lines. And that’s not all; sometimes it is paired with the effects triggered by mouse hover events: in this case, you are able to drive the particles away, form swirls from them, attach them to cursor as a trail, etc.

Huub is an example of the typical particles animation. It features a neat moving cluster of dots that goes perfectly well with a dark coloring and a map placed on the back. Use your mouse cursor to have some fun.

Tip: If you want to get to grips with the Huub’s dynamic header background, then you should take a look at the project created by Dominic Kolbe called mouse parallax demo. It looks almost the same. But if you need an immediate solution then JavaScript library by Vincent Garreau that is called Particles.js is what you’re looking for.

Waves of particles

Whereas in the previous example, the effect can be achieved with the clever manipulations with HTML5 and CSS3 and a pinch of JavaScript magic, this one is an ingenious experiment with Three.js library. With its arched forms and smooth ripple-like movements, it easily reminds one of small tides. It creates a feeling of a breathing canvas. You can use the mouse cursor to rotate it in different directions, exploring it both horizontally and vertically.

StuurMen has a simple, refined “welcome” section. It is minimal, clean, and exquisite. The content unobtrusively enters the field of view while the pulsating background establishes a right mood for the project.

Tip: Here you can find an original script by ThreeJS and its successful adaptation by Deathfang with a demo called three.js canvas – particles – waves.

Mouse hover parallax

Layered parallax is another growing trend. Along with particle animation, it can transform a dull static background into a composition with a subtle 3D feeling. The great thing is that you do not have to ditch your favorite image choice, just use parallax to spruce it up a bit.

It is pretty beneficial when you need to liven up the title, logotype, surreal scene, or illustration. It is also suitable for various abstract animations. Triggered by standard mouse hover event, it not only adds another dimension, but also allows the users to play with the environment.

The personal portfolio of Alexandre Rochet has an outstanding splash page. Not only does the behavior catch the eye, but also mouse hover parallax makes the letters shift.

Tip: There are numerous libraries and viable code snippets for generating parallax. One of the most popular is a plugin created by Matthew Wagerfield called Parallax.js. However, if you need to see it in practice, especially applied to the typography, then you can explore a pen by Frontnerd that features his take on a 3d parallax on the mouse.

WebGL experiments

WebGL experiments are, of course, a variant for sophisticated hardened developers and clients with a generous budget. They can be brilliant, awe-inspiring, and a bit pompous. It’s worth every penny. However, there is always a fly in the ointment. With great power comes great responsibility, and with WebGL you should never forget about the amount of resources that it consumes, and the lack of full browser compatibility.

Solarin is all about an unforgettable and mind-blowing user experience. It is a 3D WebGL experiment that is rich in numerous exciting and innovative features. The header background is a huge futuristic sphere that responds to the mouse cursor and creates a tremendous impression.

Tip: While to imitate what geniuses in MediaMonks have done is fiendishly complicated, on the Web, you can always find a starting point that will give you food for thought. Consider the WebGL API, and this codepen from Yoichi Kobayashi who has come up with a project called “The wriggle sphere”.


Whereas utilization of images and videos is a time-proven and less painful way to prettify the background, there are still other promising and experimental options that can obtain the desired result. Staying away from the banalities is challenging and even money-consuming, but these measures are justified and pretty reasonable.

Whether it is a simple yet elegant particles animation or remarkable WebGL experiment it injects new life into a core detail of the interface, giving your website a head start.

LAST DAY: Laura Worthington’s Charcuterie Font Family (22 fonts) – only $19!


from Webdesigner Depot http://ift.tt/2eJxWQP

8 web design trends to watch for in 2017

2017 is just around the corner, and the world is literally at its greatest technological peak in history. New innovations have opened the doors for creative minds to make their ideas a reality, especially on the webpage. Web design is a constantly morphing industry.

Exciting things are developing that could make 2017 a fantastic year for web designers. Keep an eye out for these eight web design trends in the new year:

Goodbye flat design, hello semi-flat imagery

Windows’ Metro UI style catalyzed the trend toward flat design, with drop shadows, textures, and gradients that cleverly provided the illusion of 3D imagery on a minimal background. While flat design was and still is popular, it has its drawbacks.

Many people call flat design’s usability into question. Users tend to like flat design, but they are often unable to navigate the page. Links aren’t conspicuous, and users hover over items in the hope of finding where to click. The solution at the forefront of web design in 2017 appears to be semi-flat design.

Semi-flat imagery uses subtle shadows, transitions, and cards to integrate dimension without confusing users. Semi-flat design rectifies the usability issues that have plagued flat design, striking an appealing compromise. It uses handcrafted illustrations that are not completely flat; creative grid design becomes fluid as the designer implements new ideas to develop the webpage’s framework.

This way of organizing graphic elements makes the site easier to navigate while still staying true to flat design. Using tiles for image placements is the popular semi-flat design trend moving into 2017.

Example: http://ift.tt/2dIbDeV

Creativity triumphs: custom-made illustrations

One trend that remains on top in 2016 and won’t be fading anytime soon is custom-made illustrations on websites. Throughout history, custom-made has generally been preferred to mass-produced. It’s no surprise the same is true for web design. Creating your own graphics for the background of your site, the icons, and the menu is a unique way to grab attention and set your brand apart from the crowd.

While a custom-illustrated interface costs more time and money, the final effect is stunning. Take the Lighthouse Brewing Company’s website, for example. Its unique illustrations immediately pique users’ interest and makes them more inclined to stay and explore the website. The visual appeal of custom-made graphics is uncontestable and will continue to make waves in the future.

Example: http://ift.tt/UBnllA

Show, don’t tell

Brand storytelling has been important for a while, but as web design becomes more creative, so do the ways in which companies tell their stories. Now brands are not limited to simple text on their About Me pages. They can create videos, hybrid graphic novels, and interactive illustrations to capture their audiences’ attention.

Consumers are hungry to know a company on a deeper level. Creative, immersive storytelling is the perfect way to send a strong message. Take advantage of new ways to show instead of tell with unique videos, illustrations, photography, and typography.

Example: http://mario.ign.com/

A World Wide Web of micro-mini interactions

Microinteractions were the buzzword of the year back in 2015, and today the cyber universe is replete with them. We encounter hundreds of microinteractions when we browse the web, many too small to notice. Microinteractions have one task, revolving around a single use case. Logging into a website or “liking” something on Facebook are two examples of microinteractions. Like a household appliance built for one main use – say, a toaster – designers build most apps today around a single microinteraction.

The next level of microinteractions is micro-mini interactions, or microinteractions that are increasingly more specific and granular. Individual actions are breaking down into even smaller segments with greater levels of interaction.

These microscopic interactions exist within one microinteraction. For example, a microinteraction is following someone on Instagram, but a mini-micro interaction is the act of tapping “Follow.” By 2017, many designers will be thinking in terms of micro-mini interactions.

Example: https://www.justyo.co/

Mobile-first web design

If you haven’t transitioned to a mobile-first web design by the end of 2016, web design experts suggest you do so sooner rather than later. The rise of mobility has long-since been in full swing and is only projected to increase. With more and more consumers accessing websites via their smartphones instead of a desktop computer or laptop, it’s incredibly important for brands to utilize a mobile-first approach.

A brand must deliver a seamless, effective experience on mobile devices to stay relevant in 2017 and beyond. Designing for mobile first instead of trying to squeeze the content from your full-size website onto a tiny screen gives you the advantage of fully optimizing for mobile. Instead of forcing things to work for mobile and hoping for the best, design specifically for mobile for optimal user experience.

Hapnotic feedback will be a sensation

Haptic feedback is a user’s sense of touch on an interface. This includes the virtual keyboard on smartphones and other items the user touches to activate. As haptic technology advances and the costs of electro-active polymer actuators (EAPs) decreases, experts predict more sophisticated haptic feedback on high-end mobile devices.

Web designers will be able to use subtle haptic cues such as vibrations to direct users to an action, such as tapping “Purchase.” Designers can even create a pleasant-feeling webpage through pulses to encourage a user to stay on the page.

Hapnotic feedback is the conversion of haptic cues with subtle hypnosis. Hapnotic feedback is an emerging type of tactile interfacing that serves to subconsciously encourage users to do certain things. The science behind hapnotic feedback and mobile devices is still in its infancy, but expect to see more on this subject as we head into the new year.

Treating transition anxiety

Transition anxiety, or interstitial anxiety, is the second of tension the user experiences after making an action (tapping an icon) and the response (seeing the next page). Load times and latency creates this feeling of anxiety, which can translate into poor user experience and lost customers. The user feels powerless in this moment and confused as to what to do. Web designers have found a way to capitalize on interstitial anxiety and use it to their advantage instead of their demise.

Web designers can channel this state of high emotion into transition elements that allude to the next page the user will see. Thus, users can preview what to expect before the page loads. This eliminates the feeling of powerlessness and instead cultivates a feeling of pleasant anticipation. Transition animations that show what will happen if the user clicks a button creates a seamless experience for the user so, even during lag time, they are not left in the dark.

Example: http://ift.tt/2dId2Sk

Video overthrows the content throne

The statistics supporting video content as a content mainstay are overwhelming and indisputable. There is no longer any question of whether video content will fizzle out over time. Its power is only becoming more palpable as brands utilize video in new, exciting ways to capture user attention.

Live video, for example, has hit its stride and will continue to be a force to reckon with in the future. Consider creating a Vine or YouTube account for your brand if you haven’t already, and post videos as religiously as you post to your company blog. Video content is not a fad you can expect to fade. it’s the future, and smart brands are jumping on the bandwagon.

Example: http://www.dittodc.com/

As 2017 looms around the corner, web designers have several exciting new prospects and technologies at their disposal. Savvy web designers will keep consumers on their toes with intriguing new interface ideas and take budding concepts to the next level. The world of web design will never be the same.

Enjoy Making Sites for Clients Again with Pulse CMS – only $19!


from Webdesigner Depot http://ift.tt/2eFSRS0

Cinemagraphs in web design

If you read any of the countless web design trend reports that came out earlier this year, you likely read about the promise of large, hero-sized cinemagraphs placed prominently on homepages everywhere. So where are they?

While a few fashion-forward companies are using them on their websites, the cinemagraph has been largely relegated to showcase round-up articles and reddit pages.

Well I say enough is enough. It’s time that cinemagraphs rise up and take their proper place as the web page heros they were destined to become.

Why cinemagraphs work

The idea of following a web design trend simply because it was forecasted never really excited me. But what if you could actually pioneer such a trend? And what if it actually had a purpose, and solved a problem at the same time?

The human eye loves motion.

When it comes to cinemagraphs, all of the above statements are true. While it has certainly been discussed, (and even forecasted as a trend in web design,) very few websites are actually using them. As a result, they haven’t even come close to reaching a critical mass, so they are still mesmerizing to most web users.

Not quite a photograph, not quite a video, cinemagraphs are inherent eye-candy because they fool the viewer just long enough to make them take a second look. In the A.D.D. era we live in today, anything you can use to make a user pause — even for just an instant — counts as a small win for one very important reason:

You’ve got their attention.

One particularly effective way of attracting a bit of attention on a website has always been video. The human eye loves motion. But a large hero video (even a short one) is so bulky. Sure you can compress it within an inch of its life, but then it just looks… compressed. Or you can leave it alone and suffer the consequences of a slow-loading web page.

But by using a cinemagraph, you can save a lot of bandwidth while still satisfying that need for motion. Actually, you’re upping the ante, because you can capitalize on the novelty aspect of a cinemagraph — People just don’t see them very often, and are impressed when they do.

So now that you know why cinemagraphs deserve a place of importance on the web, let’s take a high-level view of how to bring one to life.

Glendevon Motors uses a cinemagraph in its hero area to convey a mood and stand out as a “premium brand” amongst its competitors.

Option 1: use a pre-existing cinemagraph

There are many instances when sourcing a ready-made CG is acceptable, or even preferred to making your own. I’d say that if you can find what you need, and it’s in your budget to get the rights to it, then that’s the way to go. The only question is: where do you find it?

The good news is, you’ve got options. They will be largely determined by your budget, (or your client’s,) but there are many sources out there. There are even a few free ones to choose from. However, if you have eighty bucks to spend, Shutterstock has a pretty decent selection of high-definition CGs.

(Tip: They don’t have a stand-alone cinemagraph section, so you just have to search for the term “cinemagraph,” plus your other search terms within the “footage” section.)

If you manage to find what you were envisioning, you’ll probably still want to compress the file to a certain degree. More on that in a bit.

Option 2: Make Your Own

The whole point of using a CG instead of a video is that it is meant to be a bit of a mind-trick.

Maybe you couldn’t find what you had pictured. Or maybe you’re just a die-hard DIY’er, and I respect you for it. So how exactly does one make a cinemagraph from scratch?

First, it helps to have the right equipment and a plan. Here is what I recommend to get started:

  • A camera that can shoot video
  • A tripod
  • A model and/or any necessary props
  • A computer
  • Access to a video editing program (optional)
  • Access to Adobe Photoshop or a more dedicated cinemagraph editing software, such as flixel

That is what you’ll need in order to make a cinemagraph. But in order to make it effective, you’ll need a great idea.

What Makes a Great Hero Cinemagraph?

While the general theme of your CG will be largely dictated by the niche of the website itself, there are certain universal points to keep in mind when setting the scene. Be sure to:

  • Keep it subtle: The whole point of using a CG instead of a video is that it is meant to be a bit of a mind-trick. Some of the best CGs look very still, then surprise the viewer with a subtle motion. Speaking of subtlety, make sure the overall composition isn’t overly busy or brightly colored if you are layering text and a CTA on top of it. Remember, the CG should play off those elements, not distract from them. Speaking of which…
  • Leave room for the real hero: Make sure you know where you want your headline, subheader and CTA button to go within the cinemagraph. This will affect where you place the main action in the composition.
  • Keep it anchored: Of course, a CG has some motion, but the scene overall needs to be very still to properly contrast the movement. A tripod should help with background movement and camera stability. If your model’s eyes are meant to move from side to side, make sure she keeps her head very still at the same time.
  • Make it loop-able: Since you want the file to be relatively small, you will need to loop the action so it repeats as seamlessly as possible. Plan for this when setting the scene. Ideally, the first position should very closely match the final position, closing the loop.
  • Use a person if possible: Studies have shown that images with people in them keep people’s attention much more than ones that don’t. This also holds true for CGs. Extra points if you can manage to have your model looking in the direction of the CTA. This has been shown to draw the user’s eye there as well.

Once you have all your elements in place, try to shoot about 20-30 seconds of video, repeating the desired motion several times, with about 5 seconds of keeping things completely still in between. This should give you enough raw footage to turn into an eye-catching cinemagraph.

Putting it together

While I won’t go onto the step-by-step process of turning a video into a cinemagraph, there are several options available to you. You can shell out $299 to use a dedicated cinemagraph design program, but you can put a nice CG together using Photoshop, (which I’m guessing you already use.)

Compressing the file

Whether you made your CG from scratch, or sourced an existing one, you want to make sure it loads quickly. Whether your final output file is a gif or video (which I recommend,) your compression will rely on two separate factors:

  1. Quality
  2. Length

Personally, I try to go for the highest quality possible in any large format hero image, video or cinemagraph. In my opinion, sacrificing the quality of any file that is meant to make such a visual impact is a shame. In order to balance this out, I try to make my cinemagraph loop as short as humanly possible.

The action will have an effect on how short the loop can be — a train buzzing by can be much shorter than a slow, deliberate eye glance, which might look somewhat spastic if it repeated too quickly. Take the below example from web agency The Deep End. Since all that is needed here is for one train car to match the next in order for a pretty seamless loop, I managed to cut it down to around one second.

Even though I managed to keep the action extremely succinct, I still knew the file size could be reduced for an even quicker load. I ended up using a free online video compressor called ClipChamp. I was able to compress the video down from several megabytes to a svelte 319 KB. Remember, most users will bounce from your site after only three seconds of waiting, so it pays to be quick.

And if your end result is left with artifacts from extreme compression, you can always employ a tried and true trick used on imperfect hero videos — mask it with a semi-transparent patterned overlay.

Interested in seeing how others have used cinemagraphs as hero images? I’ve got some good news, and bad — There aren’t too many more to show, which is the bad news. But the good news is, if you were to put this plan into action, you would be on the vanguard of what promises to be a pretty big trend.

Here are a couple that I managed to find around the web:

Gilt Taste


The Nature Conservancy

Final thoughts

A cinemagraph can not only kick an otherwise boring website project up a few notches, but it can actually impact its success too. If you combine it with a killer headline and compelling call-to-action, you can really grab your users’ attention. What you do with that attention is up to you.

Bundle: 110+ UI Screen Templates with 1000 UI Components – only $21!


from Webdesigner Depot http://ift.tt/2dP0es5

Popular design news of the week: October 17, 2016 – October 23, 2016

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers. 

The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.

Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news.

10 Best New Web Design Tools for October 2016 – Creative Blog


8 Ways to Become More Creative in the Next 10 Minutes


The Art of Meaningful UX Design


Black – A Wallpaper Series Using Shapes and Lights


Inspiring, Simple Color Palettes


5 Top Landing Page Mistakes


Top Trending Tools for Designers


Product Design Inspired UX Design


7 UX Design Trends to Watch Out for in 2017


How the Web Became Unreadable


The Redesigned Vimeo Wants to Be LinkedIn for Indie Filmmakers


A Movie Poster Every Day for a Year


Leaked Email Shows What Wendy Clark Wanted in Hillary Clinton’s Campaign Logo


How One Illustrator Eliminated the Need to Hunt for New Clients


Line Maker: Animated Decorative Lines


Tobias Van Schneider — How to Find your Perfect Color Pairings


The Average Web Page – From Top Twenty Google Results


2016 Material Design Awards


7 Ways to Come up with Creative Ideas, Backed by Psychology


Materialette – A Color Palette for Material Design on OSX


New Pandora Logo Vs. New PayPal Logo


The 40-Year-Old Logo America Really Needs Right Now


User Onboarding: A Comprehensive Guide


The End of the Black Turtleneck


Art History: Frida Kahlo and her Influence on Graphic Design


Want more? No problem! Keep track of top design news from around the web with Webdesigner News.

LAST DAY: 100 Colorful Grunge Textures from Florin Gorgan – only $12!


from Webdesigner Depot http://ift.tt/2eGgIA9

Comics of the week #362

Every week we feature a set of comics created exclusively for WDD.

The content revolves around web design, blogging and funny situations that we encounter in our daily lives as designers.

These great cartoons are created by Jerry King, an award-winning cartoonist who’s one of the most published, prolific and versatile cartoonists in the world today.

So for a few moments, take a break from your daily routine, have a laugh and enjoy these funny cartoons.

Feel free to leave your comments and suggestions below as well as any related stories of your own…

Poor computer

Save a buck



Can you relate to these situations? Please share your funny stories and comments below…

14 Unique Fonts in TT Cottons from TYPETYPE – only $9!


from Webdesigner Depot http://ift.tt/2ehwM11

Poll: should coders learn to design?

Okay developers, it’s your turn. People have ranted on and on for years about whether or not designers should learn to code. Heck, I’ve ranted about it. I still contend that… no. No no… This is about you devs, now.

Should people who primarily code the back end of web products learn to design the front end?  Here’s my opinion:

[I] had to resort to the same sort of explanations that I give to clients.

Unless they actually want to be a designer/developer, learning a whole new field — a whole new industry, even — just isn’t worth the pain. It’s part of the reason I don’t do any programming. The other reason is that I’m bad at it. And HTML and CSS don’t count.

But they should at least learn the basics. They should learn the fundamental principles behind usability and UX design. They should learn the terminology. There have been times when I’ve struggled to explain my design decisions to developers, and had to resort to the same sort of explanations that I give to clients. It’s frustrating to have to do that with someone who’s on your team, but is not on the same page.

What’s more, I’ve worked with developers who could program like nobody’s business, but got lost in the HTML and CSS. I’m serious. These guys couldn’t nest elements properly, kept asking me how to do stuff in CSS, and more. They didn’t know about browser limitations and quirks (and this was back when IE was still a big problem), and even the box model was new territory.

That’s not criticism. Everyone has to start somewhere, sometime. But did things get a lot easier when they mastered the basics? Yes, yes they did.

Well, dear reader, now it’s your turn:

The Fantastic Snow Text Generator – only $7!


from Webdesigner Depot http://ift.tt/2epZd9G