Popular Design News of the Week: April 17, 2017 – April 23, 2017

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.

How Much Should a New Website Cost in 2017?


The Top 10 Google Webfonts for Strong Header Text


20 Split Screen Website Designs for your Inspiration


The New Google Earth


SEO Hacks for Developers


10 Inspirational & Insightful TED Talks for Web Designers


20 Animated Loaders


YouTube has a Secret ‘Dark Mode’ – This is How You Activate it


Microsoft To-Do – An Intelligent Task Management App


How We Write Proposals in my Design Studio


Zuck.js – JavaScript Library that Lets You Add Stories Everywhere


Why Performance is the Best Way to Improve the User Experience


Google Digital Academy Branding


Bonsai: A Simple, Fully Integrated Time Tracker for Freelancers


Smallchat: A Free Slack Integration for Chatting with Website Visitors


Design and Technology: A Collection of Articles and Ideas from Google Design


10 Brilliant Uses of 3D in Graphic Design


Facebook Owns Four Out of the Five Most Downloaded Apps Worldwide


Design Patterns & Sources


Hey Instagram, Don’t Tell Me When to Freeze my Eggs


An Introduction to Atomic Design for Web Designers


From Graphic Designer to Product Designer


How to Retouch Video in Photoshop


How to Run Meetings that Don’t Suck


Focus on What You do Best and Outsource the Rest


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


Comics of the Week #386

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…

Car in disguise

Old school design


Stuffy designer

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


15 Essential Free Icon Sets

When it comes to web design, and especially UI design, icons play a crucial role. When used properly, icons can enhance almost any website design by adding visual interest and appeal. However, creating icons from scratch every time you start a new project is both time-consuming and impractical.

Luckily, the web is full of great resources and you can find plenty of high-quality icons available for free. Whether you’re creating a business website or need icons for the backend of your application, there is no shortage of icons.

But, as busy as designers can get, sifting through all the icon sets to find the perfect one for your project can be just as time-consuming as creating your own. That’s why we compiled the best free icon sets so you can quickly find a few of them that you can put to good use in your upcoming projects, both for personal and client use.

1. Free Minimal Icon Pack

This free minimal icon pack contains 1800 icons in SVG, EPS, PSD, AI, SKETCH, and PNG formats. The icon set comes in both black and white versions and can be used in both personal and commercial projects.

2. Free Flat Icons

The icon set from Icons8 comes with more than 40000 icons that cover several categories; from business and office settings to people, food, and social media icons. The icons are designed to mimic the look of a specific operating system and you can download them in Windows, iOS, and Android versions. All icons can be recolored and there are even apps for Windows and Mac so you can use them in applications such as Photoshop.

3. Eldorado + Stroke 3132 Mini Free Icons

Eldorado + Stroke 3132 mini is a free version of Eldorado + Eldorado Stroke icons and packs a grand total of 3132 icons in PNG format. The icons are mono-colored and include categories such as Basic, Culture, Devices, Finance, and more.

4. Iconmonstr

Iconmonstr’s collection of icons has 3600+ icons. They are a great fit if your project needs icons in black or white. You can find a variety of icons for a business site, interface design, multimedia, social media icons, and much more.

5. 48 Free Flat Designer Icons

This free set of 48 office, social, and travel icons will certainly come in handy for your next project involving a travel or a corporate website. The icons are available in AI and PNG format and come in a bright monochrome coral and multicolor versions.

6. Social Media Icons Pack

Available from FontFabric, the set contains 74 social media icons which guarantees you will never run out of icons for your projects. The icons are available as an icon font so simply download them and use the corresponding key on your keyboard to insert them in your designs.

7. 210 Vector Minicons

Try out this vector icon pack the next time you start a web design project or need to come up with a wireframe. The minicons are available in vector format, feature a clean line design, and are perfectly scalable.

8. 30 Isometric Icon Set

If your project revolves around the accounting industry, consider this set of 30 isometric icons featuring charts, graphs, folders, and more. The icons come in AI, EPS, and PNG format and can be completely edited to your liking in Adobe Illustrator.

9. Retro Icons

Some say retro style is making a comeback so for all those projects that need a retro touch, this retro icon set will come in handy. The set contains 120 icons in vector format.

10. Metro UI Icon Set

Fans of the Metro style need to check out the Metro UI Icon set which comes with more than 700 icons in two sizes. The icons are available in PNG as well as the .ICO format.

11. 40 Design Icons

Another set of design icons in vector format, the set comes with 40 icons available in multiple formats which include AI, EPS, SVG, and PNG. This set would be perfect for a designer’s portfolio or for any artistic website. 

12. 83 Flat UX and E-Commerce Icons

The next time you’re working on an e-commerce site, these icons will allow you to add a touch of visual appeal. You can find icons for shops, signs, barcodes, currencies, and more. The set is available in several colors and in the same bundle you can find a download for flat UX icons. Both sets come in AI and EPS formats.

13. 30 Weather Icons

This weather icon set is a great choice for any weather app or a meteorological website. You can choose between 30 different icons which come in SKETCH and PNG format.

14. Earth and Space Icon Set

If you’ve ever needed icons that cover everything from earth to space, look no further than this pack. Created exclusively for Smashing Magazine, the set contains icons for satellites, planets, meteors, air balloons, and even strange sea creatures.

15. Nucleo Flat Business Icon Set

The last set on our list features 50 icons in a modern, flat style that will complement any corporate website. The icons are available in both AI and SVG format.


MailChimp WD WordPress Plugin – Review and How To Guide

MailChimp WD is a plugin by Web Dorado, launched in late 2016 that aims to make it easier to integrate MailChimp into your website. MailChimp, as you’re probably aware, is one of the most popular email marketing services around. MailChimp is free for basic accounts and provides tools to add an email signup form to your website, design and send…. Continue Reading

The post MailChimp WD WordPress Plugin – Review and How To Guide is written by Rachel Adnyana and appeared first on WPKube.

10 Ways to Create Great User Onboarding

Ok, so you’ve built an awesome digital product—it might be a customer-facing app, an enterprise software, a web app or whatever. You’ve launched and, oh happy day, people are downloading your application. Looks like you’re a hit!

But then you realize users aren’t coming back after the first visit, or that your general engagement rates are terrible, or that users are only engaging with 1% of the awesome features and functions of your software. What’s going on?

The answer might lie in your user onboarding experience.

User onboarding is a critical, if sometimes overlooked, part of any product strategy: get it right and you enjoy higher user retention and engagement; get it wrong and watch churn rise.

In fact, according to Uber’s Andrew Chen, it’s standard for web and mobile apps to churn over 70% of new users in the first three days after download. A compelling reason for ensuring that your user onboarding experience serves the needs of your business and your users.

What is Onboarding?

Before digging into useful onboarding examples, let’s break down exactly what we mean by ‘user onboarding experiences’.

In its most basic form, onboarding is a process built into a software that increases a user’s chances of using that software successfully. It’s automated and usually takes place at the beginning of a user’s journey with a product, although experienced users can also be ‘onboarded’ when new features are introduced.

An onboarding process can take several forms—a quick slide tour of main functionalities, a product tour, an account creation process, and more. The aim is to tell users what they need to know to make the most of your product, and to encourage them to come back for more. 

Successful onboarding makes for happy, engaged and loyal users; unsuccessful onboarding can leave people feeling confused after they download software, and disinclined to re-engage.

What Makes a Good User Onboarding Experience?

It’s obvious that user onboarding is the lynchpin of a successful product engagement strategy. But how do you know when you’ve designed a good user onboarding experience, and when you’ve fluffed it?

First off, there’s no one-size-fits-all user onboarding process. Sorry about that. An appropriate onboarding flow for one website might be a disaster for another. The same onboarding flow won’t work for all users across the board. Onboarding processes with excellent UX take time, research and iteration.

There are, however, some onboarding best practices that can be used to guide the onboarding process. UX Designer and founder of UserOnboard.com Samuel Hulick outlines these principles:

Onboarding Processes Should Be:

  1. “Action-oriented, not instructive: Rather than throwing up a bunch of tooltips that I have to remember later, have me learn by doing.
  2. Informed, not reactionary: Are the things you’re having me do highly correlated with me getting value out of the product, or are you just offloading busywork because your design is broken?
  3. Evolving, not fixed: Onboarding isn’t a “feature” but it’s often treated that way. Are you treating it like a quality of your overall experience that evolves along with your product and market, or is it something you ship every couple years?
  4. Holistic, not one-off: Onboarding can take the form of knowledge center docs, blog posts, invitations from a friend, lifecycle emails, a well-timed phone call, etc. Are you focusing on the interface and leaving the rest on the table?”

And most of all, ensure your onboarding experiences are user-centric, not product-centric: “onboarding tends to fall down when it’s just about the software pointing itself out,says Samuel.

10 Great User Onboarding Experiences

1. Basecamp

Project management software Basecamp has a really great onboarding experience that makes joining up an enjoyable experience. The kind of homey design style of the account creation page assuages new users fears about this being a big, expensive enterprise software. On top of that, the CEO says hello personally. The value proposition (VP) of Basecamp is that it promote team collaboration: having the boss say hi as you onboard reaffirms that VP.

Users are then walked through the creation of a project, in an effective ‘learn-by-doing’ style onboarding process. Before you’ve even realized it you’ve set up a project in 3 quick steps, and been introduced to a key feature of Basecamp—their handy project templates.

2. Dropbox

Dropbox combines the learn-by-doing approach with quick walk-through of the Cloud storage product’s main features. New users are guided through 7 key steps, from user verification to sharing documentation, through clear and neutral microcopy. Dropbox doesn’t let the branding opportunity slip by altogether though—instead of branded copy they go for cute illustrations that capture Dropbox’s efficient yet informal vibe.

3. Slack

Slack’s onboarding is slick and intuitive. From the homepage you’re asked to ‘Create a new team’ just adding your email address, although you’re asked for more details on the following screen. You then go through a 3 step account set-up and you’re in to the interface.

This is where Slack really stands out. They use a bot to onboard you. This is great because Slack is, after all, all about chatting. So you’re already being introduced to the software’s main functionality, and the microcopy is disarming too. You’re then taken on a tooltip tour with just 3 tips, and you’re free to go enjoy Slack.

4. Canva

Graphic design software Canva asks users to get signed up right from the homepage, and uses some fun microcopy to assuage the anxiety of signing up for something new so fast.

As soon as you’re in to the interface, you start designing through an interactive tutorial. It’s fun, incredibly quick, and leaves users keen to come back for more.

5. Justinmind

Justinmind personalizes the onboarding experience by catering to experienced prototyping tool users and newbies in two separate onboarding flows. When users download the prototyping tool they choose between two modes: Full or Beginner.

Confident prototypers selecting Full mode are taken straight to the full tool interface, whereas users who select Beginner are given a tool-tip tour round a restricted ‘getting started’ interface. The interactive tooltips link to YouTube video tutorials, and once users feel they know enough they can switch to Full mode.

6. Pinterest

While Pinterest’s homepage fails to present us with a strong value proposition (“the world’s catalog of ideas”? Why would anyone want to have that?), it does a great job of making users engage with the app from the get-go. To proceed with onboarding you have to pick 5 topics that interest you.

And that’s more or less it. The card layout mirrors the entire Pinterest interface, there’s only one Call To Action once you’re on the home-feed, and that’s Save. From there you’re guided to creating a board. It’s painless and mirrors the guileless simplicity of Pinterest itself.

7. Duolingo

Language app Duolingo uses psychology to onboard its users and keep them engaged. Right from the start users are asked to select the language they want to learn and their goal. Way to create commitment in a user.

In less than 10 taps, users are learning their chosen language and simultaneously being walked through the app with spotlight modals. Users are taken right to core functionality and made to feel successful from the first.

8. Squarespace

Squarespace lets prospective users see their huge range of web templates to tempt them into signing up. Once a template is selected there’s a brief account creation step before you’re left to play around with the template.

Now and then tooltips crop up with clear microcopy, and GIFs guide your way.

9. Evernote

Evernote uses their CTA button to make a big deal of the fact you can sign up for free, thereby assuaging any anxieties about payment down the line. On the next screen they encapsulate Evernote’s 3 main functionalities with illustrations that are disarming but not saccharine and then take you to the interface that best suits your needs.

They 4 step interface tour includes a handy progress bar that shows users just how painless the onboarding experience is. The vibe fits perfectly with Evernote’s userbase: people who want to make notes easily and quickly, as if they were writing in a notebook.

10. Mailchimp

Mailchimp’s onboarding starts with an incredibly strong value proposition. “Send better email. Sell more stuff”. They’ve nailed what Mailchimp users want. They also have an intuitive password creation system that greys out password requirements as you comply with them.

You go through a 5 step process in which the why of every step is explained. And then you’re on your own. It’s simple and beautiful.

Plus their microcopy is awesome.

User Onboarding Design Workflow

Establishing a systematic design workflow will help your onboarding project get off the ground. Run through the following steps with the UX and design team members to hone the onboarding flow before starting to program it out.

Define Your Product’s Value Proposition

What is it that your product or service offers and how is it better than others? You need to figure this out from the get-go, because it will define not only your onboarding strategy but your wider product strategy. The VP doesn’t have to be complicated—take Spotify, which has a VP as simple as ‘users get instant, legal access to any song they want’. Simple. So define the problem you’re out to solve and how your product solves it. Forbes has some good, clear advice on how to get started on defining a digital product’s VP.

Research the Competition

Let’s face it, versions of your application probably exist out there already. They might be very successful already. You need to know what they offer and, most importantly, how they onboard users. Sign up for the competition, scrutinize their onboarding experiences and learn from their errors as well as their successes.

User Research

As with any UX project, user research is vital. You not only need to know their pain points and unfulfilled needs, you also need to be aware when they will use your product and how. An onboarding flow designed to be seen in an office is going to be different to one that will be seen by on-the-go mobile device users.

Onboarding Strategy

Decide what kind of onboarding strategy you’re going to trial. This could be anything from a walk-through to gamification and social account linking.

Wireframe Out the Navigation Flow

Build a click-through onboarding flow with a wireframing tool. Keep it simple and static, and use the moment to map out information architecture and content categorization. You can test these fundamentals with a select group of user testers using just a basic wireframe.

Iterate Up to an Interactive Prototype

Based on discoveries from user tests on wireframes, build the onboarding process into a high fidelity prototype. Adding animations, real data, transitions and, in the case of mobile onboarding flows, gestures, will give you an accurate understanding of the eventual onboarding process. Test, iterate and tweak.

Don’t Stop Testing

Monitor the performance of the onboarding flow continually. Is there a particular step where users give up and go home? Are they interacting with all the features you introduce them to? A good onboarding experience is a work forever in progress


Good user onboarding is tailored not solely to the company but also to the target user group. It’s an ongoing design process that benefits from constant tweaking, creative thinking and a willingness to test and test again. While copying these 10 companies’ user onboarding experiences won’t automatically result in a jump in conversions or engagement, using them as inspiration will help you build better user onboarding flows and reap the rewards of keeping users happy.


This is the New Google Earth

If you’ve ever at least casually used Google Earth in the last few years, then you know how the service allowed you to get an in-depth perspective on many places on the planet. If you’ve been a fan of Google Earth in the last few years, then you now have a bigger reason than ever to enjoy the website: Google has debuted a redesigned Google Earth that was two years in the making.

The new Google Earth was redesigned from the bottom up, both for the web and Android. (An iOS version will follow in the future.)

One of the biggest improvements is the guided-tours concept. Now, users are able to go on interactive tours from their desktops or smartphones, which are led by experts like scientists and documentarians, from wherever they are. Upwards of 50 tours are already available at press time; users can find them in the redesigned site’s “Voyager” section.

These voyages are versatile, with some displaying 360-degree video content and others showing embedded YouTube videos

An example of one of these guided tours is “Museums Around the World,” where users will be taken on a street view of 28 museums all over the planet, including New York’s MOMA. Each of these journeys on “Voyager” comes with a little blurb on the screen that gives more info about the place on the screen. These voyages are versatile, with some displaying 360-degree video content and others showing embedded YouTube videos to complement the voyage.

Another noteworthy part of this redesign is the introduction of Google search’s “I’m Feeling Lucky” feature. Now, it’s applicable to the interactive experience in Google Earth. Here’s how it works: Users click it to get whisked away to an unpredictable location, whether that’s Graceland in the U.S. or some little-known hot springs in Japan. A knowledge card sporting some insightful factoids for these locations will also be shown.

While 3D was a part of the original Google Earth, it’s now a big cornerstone of this redesign. The service’s revamped 3D feature provides a dedicated 3D button on the screen. Click or tap on it, and you’ll be shown the location you’re currently viewing in all its 3D glory. Essentially, you’ll see a drone’s view of the structure that you’re observing.

The redesign is aimed at increasing the educational value of this service, to be sure, but there’s also a practical side to it: Trip-planning has also gotten easier. Google Earth now offers trip itineraries as well, meant to show users all of the hottest spots in various destinations such as Mexico City, Tokyo and London.


How to choose the right look for your portfolio

I have been looking at a ton of portfolio sites. The good news is, I get paid to do this. I look at a bunch of portfolios, pick the ones I like best, and then I magically turn those portfolios into a monthly article. Coffee counts as magic.

I pick the portfolios on mostly aesthetic criteria. I pick what looks good to me, be it professional and familiar, or wild and post-modern. I pick these websites for how they might inspire other designers to break the mold a little, and try something new.

I also secretly judge them based on whether or not I would actually hire them for work. Many designers with a strong sense of aesthetics are lacking in the UX department, and their site is nearly impossible to navigate. Sometimes the the UI is easy to navigate, but there are possible functional problems. Sometimes they’re issues that could easily be solved with progressive enhancement, but no one bothered.

There are two reasons for this: bandwagon-hopping, and misplaced experimentation.

The “Don’ts”


Following trends isn’t an inherently bad thing. Right now, trends are basically what push web design forward. It’s how we went from “Web 2.0” gradients to skeuomorphism, and then on to flat design, and beyond. People following trends, and the inevitable backlash to people following trends are what keep the discipline alive, interesting, and ever-changing.

More recently, trends are how we ended up with some highly creative post-modern style sites:

Trends are how we ended up with daring typography-based sites:

Trends are the reason we talked about brutalism and pseudo-brutalism for like a month before we forgot about it:

The downside is that many people embrace trends without thinking too hard. They don’t think about the purpose behind the aesthetic, or the usability concerns of the people who started these trends. These aesthetic styles didn’t come from nowhere. They came from the minds of people that needed to solve a specific problem, to scratch a particular itch.

There’s nothing wrong with having a design in a currently-trending style, just make sure that you’re embracing the trend for the right reasons.

Misplaced experimentation

If you do any creative work, you’ll always get the urge to try something new and different. You might feel as though you’re selling out if you make two similar site designs in a row.

Experimentation is good, both for design and development. You should be doing new things. However, maybe your portfolio isn’t actually the best place to do them. I contend that if you’re going to get crazy with the animation, the navigation placement, or what-have-you, it might be better to do it with a side project.

Too many of the portfolios I’ve seen throw basic usability principles to the wind in favor of wild creativity. Your portfolio is supposed to be selling your work or services. If the site breaks because the JS doesn’t load properly, or if it’s just hard to navigate, the results are just as bad as they would be on a large eCommerce site, or a major blog. You will lose money.

People with bad internet need websites too.

The “Do’s”

Okay, that’s enough negativity in your life. How should you approach your portfolio’s look, then? Well, I don’t have all the answers, but I do have two pretty good answers:

Approach 1: Design the site your customers want

Design the site that your client aspires to have. Make them envious, and then give them what they want. I mean, you have a chosen niche, right? A target audience? Make your portfolio site feel a lot like the sites you build for clients. You know your market. Use that.

Shape does this quite well. The whole look and feel of the site is vaguely similar to that of an eCommerce template. Well, they design eCommerce sites, so that’s absolutely perfect.

Now how about a portfolio that isn’t about web design? Stefanie Bruekler’s portfolio bears a striking thematic resemblance to the print work showcased on her site.

Approach 2: Put your work front and center

Don’t give them the time to judge your portfolio site’s aesthetic by putting your work right in front of them. This approach is typically used with minimalist sites, but it can work pretty much anywhere. Put a preview or two on the home page, or put the full portfolio there. If they’re already looking at your work, then the look of your site (and anything you might have to say about yourself, really) is incidental.

Christopher Hall does this by showcasing his two major disciplines (furniture design and interior design) side by side, with no frills. Just look, and you get the idea.

Will Sanders does pretty much the same thing, only his photography is organized as a collage. The photos draw in the eye so quickly, it’s easy to forgive the inconveniently-orientated navigation.

You may have noticed that Stefanie Bruekler’s portfolio from the last section could also easily be in this section. You can easily combine both approaches.


Sharp observers will note that these methods alone will not solve all of the issues I raised earlier. No matter how you choose your site’s aesthetic, accessibility and usability are on you. However, using these simpler approaches to the question can remove some of the temptation to go overboard.

You’ll notice that these two approaches allow for a lot of variation and creativity. Still, you don’t need to limit yourself to them. If you end up with a trend-filled site, that’s great. If you invent a whole new kind of UI, I’m in (so long as it’s usable).

If you’ve made these decisions with care, then I’ve done my job, here. Besides, I am curious to see what’s coming after this big asymmetry trend.


Why Art Direction is Critical to Responsive Design

Art direction plays a role in all facets of life. It’s especially important in advertising and magazines. The visuals in ads and magazines often are presented in a way that evokes an emotional reaction and leaves us with a lasting impression.

Have you ever seen an ad in a subway and you pause to look at it because it connects with you in a certain way?

Maybe you’re reading a magazine and you find yourself flipping over the same pages over and over because the colors, the typography and the photo focus just resonates with you?

Or perhaps you’ve seen different blog posts with similar content, one of which stood out because it was more visually appealing, with a carefully selected font weight, the perfect amount of whitespace, and well spaced paragraphs.

Art direction has made all of these experiences possible.

Art direction is a filter for making judgments; you pass every design choice through it. Start by determining the overall emotion. All the copy, photography, UI elements, buttons, and the kitchen sink should be pinged against this ideal. I like to think of it as the Magic Kaleidoscope Looking Glass. It helps to determine which path I need to take when struggling with design decisions. — Christopher Cashdollar, Creative Director, Happy Cog

Art direction also plays a vital role in the world of web design. Designers and developers create responsive designs that involve a lot of imagery. In the realm of responsive design, the role of art direction can’t be over-emphasized; from the flow of content on web pages, to placement of ad banners, to the way images are displayed at different resolutions.

Design is the how. It’s the foundation of all communication, the process and production of typography, color, scale and placement. Art direction is the why. It’s the concept and decisions that wrap itself around the entire product. — Jarrod Riddle, Senior Art Director, Big Spaceship

Art Direction in Ads

Let’s look at some examples of art direction in ads. Below are some ads with astonishing art direction.

Fedex: China – Australia

Zoo Safari: Lion

Kapiti: Designer Ice Cream

Fedex: Always First Truck

Plant for the Planet: Factory

Looking at these ad banners creates an emotional connection and evokes an experience that I’ll not soon forget. Yes, that’s the power of art direction!

What is Art Direction in Responsive Web Design?

While these are great examples of art design in advertising, our focus is on delivering impactful images in responsive web design. So, what is art direction in this regard and how does it affect responsive images on your web platforms?

Art direction is a technique for drawing attention to the most important parts, or targeting specific features of an image, even when it’s viewed on different devices or platforms. Consider this example:

Source: ResponsiveImages.org

The full image can be seen on a wide display, 2560 x 1600 for example. But when viewed on an iPad or an iPhone, the dog is is the central focus. For this image, the art director — such as the designer, developer or a visual director, wants the viewers to see more of the dog than any other object in that image.


Let’s take a look at another example in action. It is an art-directed front page created by Eric Portis.

You can check it out here : https://ericportis.com/etc/cloudinary/

So, right now you might be thinking, “Wow, this is cool” or “This is awesome.” and wondering how you might implement this yourself and give viewers a captivating art-directed page?

Crafting Art-Directed Responsive Images

Doing so doesn’t need to be complicated. To achieve this on your own, you would have to manually crop individual images to fit them on various resolutions. Another alternative is to go the route of cropping all images to focus on the center of the image. And as you might be aware already,  important content can be lost trying to use the “one size fits all” approach.

One of the easiest ways to go about is to take advantage of Cloudinary’s face detection, cropping, resizing and optimization capabilities to provide art-directed images. Let’s start with this image below:

Serena Williams is centered in this image (1600 x 700)

We will apply various properties to this image and see the results, before putting it together using a <picture> and <source> to see the full impact of art direction. New to the <picture> element? Check out this excellent post on how the <picture> element works.

Cloudinary enables us to supply a certain aspect ratio like so:

Source: http://res.cloudinary.com/unicodeveloper/image/upload/ar_16:9,w_600/4739297-free-images_mostdh.jpg

Let’s crop the image by using the c_fill parameter that Cloudinary provides. It works like background-fit: cover in CSS. You’ll discover that the image will be stretched to fit the width. Notice the difference?

Source: http://res.cloudinary.com/unicodeveloper/image/upload/c_fill,ar_16:9,w_600/4739297-free-images_mostdh.jpg

When cropping, Cloudinary focuses on an image’s center by default. Now, focusing on the center doesn’t always work like I mentioned earlier. An example would illustrate my point better.

Check this cute cat below:

We applied the “c_fill” filter and it yanked out a greater part of the cat image and left us with the background. Is this what we want? Definitely not!

Source: http://res.cloudinary.com/demo/image/upload/c_fill,ar_4:6/white_cat.jpg

Cropping it on another point using the gravity property such as g_auto gives us our desired output like so:

Source: http://res.cloudinary.com/demo/image/upload/c_fill,ar_4:6,g_auto/white_cat.jpg

That’s what I’m talking about. Whoop! Whoop!

Now back to our original example, let’s crop in on another point using the gravity property like so:

Using g_south, you can see how it shows the bottom part of the image and crops off the head

Source: http://res.cloudinary.com/unicodeveloper/image/upload/c_fill,ar_4:1,w_800,g_south/4739297-free-images_mostdh.jpg

Using g_north, you can see how it shows the top part and crops off the bottom.

Source: http://res.cloudinary.com/unicodeveloper/image/upload/c_fill,ar_4:1,w_800,g_north/4739297-free-images_mostdh.jpg

But by default, we can see a more focused image.

Source: http://res.cloudinary.com/unicodeveloper/image/upload/c_fill,ar_4:1,w_800/4739297-free-images_mostdh.jpg

On very small devices, we can take advantage of the Cloudinary c_thumb parameter that tries to focus on in on the image with an aspect ration of 1:1 like so:

Source: http://res.cloudinary.com/unicodeveloper/image/upload/c_thumb,ar_1:1,w_600/4739297-free-images_mostdh.jpg

Visible Art Direction

Now, let’s see how this works in a web page. Create an `index.html` file and insert this code in it like so:

<!DOCTYPE html>
<html lang="en">
   <meta charset="UTF-8">
   <title>Art Direction</title>
<!-- wide crop -->
   media="(min-width: 600px)"
   srcset="http://res.cloudinary.com/unicodeveloper/image/upload/c_fill,ar_2:1,g_face,f_auto,q_70,w_800/4739297-free-images_mostdh.jpg 800w,
           http://res.cloudinary.com/unicodeveloper/image/upload/c_fill,ar_2:1,g_face,f_auto,q_70,w_1600/4739297-free-images_mostdh.jpg 1600w"
 <!-- standard crop -->
   srcset="http://res.cloudinary.com/unicodeveloper/image/upload/f_auto,q_70,w_800/4739297-free-images_mostdh.jpg 800w,
           http://res.cloudinary.com/unicodeveloper/image/upload/f_auto,q_70,w_1600/4739297-free-images_mostdh.jpg 1600w"
   alt="Serena Williams Jumping"

Browsers will use the srcset to select the image to load based on the viewport size and display density.

We have already defined the breakpoint in the source tag. Once the browser is opened on larger screens, the image visually adapts for a larger viewport.

Check out the flow in your browser.


A combination of the <picture> and <source> tags helped us craft art-directed responsive images. Art direction brings out the best in your ad and web platforms, it establishes a connection between the user and the website or ad banner. With Cloudinary you can easily integrate art direction in your process flow.


[– This is an advertorial on behalf of Cloudinary –]


7 Best WordPress Migration Plugins Reviewed and Compared

WordPress is incredibly easy to install, but if you want to move an already setup WordPress site to another server, it can be a bit of a headache. There are several reasons why you might need to migrate your WordPress site. If you started development on a local server and you’re now ready to launch the site, you’ll have to…. Continue Reading

The post 7 Best WordPress Migration Plugins Reviewed and Compared is written by Rachel Adnyana and appeared first on WPKube.

What’s New for Designers, April 2017

From new tools to code snippets to typefaces that will make your design life better, this month’s design newbies are a lot of fun to play around with. My favorites include a task management app that’s free, a new website builder that is incredibly easy to use, and a tool that can help you clean up all those old forks on GitHub.

Almost everything on the list this month is free, with a few high-value paid apps and tools. They’re sure to be useful to designers and developers, from beginners to experts.

If we’ve missed something that you think should have been on the list, let us know in the comments. And if you know of a new app or resource that should be featured next month, tweet it to @carriecousins to be considered!


FreePhotos is a collection of creative commons stock photos that you can download and use in projects. The site uses a search engine to pull together some of the best, top-quality stock images available for use and modification. Images are top-quality and free to use thanks to creative commons licensing. The photo database is packed with images including landscapes, technology and business, nature, fantasy, people, and more.

Google Invisible reCAPTCHA

Since the launch of No CAPTCHA reCAPTCHA, millions of internet users have been able to attest they are human with just a single click. It’s been called the unbeatable CAPTCHA and now Google is taking it a step further and making it invisible. Human users will be let through without seeing the “I’m not a robot” checkbox, while suspicious ones and bots must solve challenges.

Grid Garden

This might be the most addictive game you’ll find online today. You write CSS to grow a carrot garden with 24 levels of challenges.

Wayback Machine Downloader

Have you ever wanted an old version of a website? This tool allows you to download any website from archive.org’s “Wayback Machine.” The best part? It only takes two clicks?

Web Load Speed Test

How fast is your website? Test load speeds from six locations at one time to ensure your site is working as expected.

JSON Web Container

JSON Web Container is an addition for Jasonette that allows you to take HTML/JavaScript/CSS and turn them into a native component. And with a single JSON markup. Just take the entire HTML markup and wrap it with JSON markup.


Burst is a library of over 1000 high-res photos, with more images being added weekly. The images are free for use without an attribution, so they’re perfect for your next side-project.

GorillaStack AWS CloudTrail Listener (Slack)

GorillaStack is a chatbot for Slack that will make your life easier if you use Amazon Web Services. It allows users to define and manage real-time workflows to monitor AWS CloudTrail, right from within Slack and only takes a minute to install.


Tippy is a lightweight, pure JavaScript tooltip library with plenty of different interaction styles to work with. It works on pretty much any browser, making this an easy to implement tooltip tool.


This tool helps you create native, cross-platform apps with ease. Starting with a template, almost anyone can create an Android or iOS app without previous app building experience. It’s a great tool if you need something in a hurry.

Sketch Starter Design Template

Trying to learn your way around Sketch? This starter template is a good introduction to the basics of using this web design tool with an easy to use set of base templates.

Malina Seamless Patterns

This set of seamless patterns provides the perfect backdrop for a number of project types. The pattern pack includes 20 styles that can be used in web and print projects and comes in EPS, PNG and JPG formats. (Plus, the vector version is fully editable.)


Made into a game-style format, this tool is a tourist-style guide to all your React components. It can better help you understand what you have and how to work with it.


This open-source learning platform can help you advance your skills and career. New tools include modules for learning how to create a chatbot, and elements that take you through understanding blockchain, technology-enabled blitzscaling and machine learning.


This tool allows you to create CSS animations in-browser. The tool is still in beta but is amazingly easy to use and understand with plenty of options to help guide you through the animation process.


With a little JavaScript and HTML5 “magic” you can create interactive maps using data. Use them with information such as weather, results reporting, statistics and more. The tool is ideal for interactive dashboards and side-by-side reporting.


It only takes a few seconds to create a visually pleasing DMG for OS apps with this tool. In the time it takes to read this description and click the link, you can create a DMG temporary image.

Bash Guide

Want to learn Bash? A Bash script is a plan text file that contains a series of commands. This guide will help you better understand those commands and so you can make something of code if you aren’t real comfortable with it.


Adlanta is a beautiful and simple round style, thin sans serif. It includes a full character set with punctuation in regular and light styles.

Bomba Stout Typeface

Bomba Stout bring back memories of old-school video games with a wide stance and fun feel. While you won’t feel comfortable with using it a lot, this typeface is great for small splashes of personality. It comes in two versions – with sharp edges and with smooth edges.

Eduardo and Aurelia

This equally weighted upper- and lowercase typeface is fun for projects with personality. It also comes with an “and” character and parenthesis.

Elaris Serif

Elaris is an all-caps serif typeface with a classic style. It is designed for display use and the free version includes four weights – regular, semibold, bold and black.

Source Han Serif

This serif style is the second Pan-CJK typeface family from Adobe and complements the sans serif of a similar name. The typeface is for four East Asian languages — Simplified Chinese, Traditional Chinese, Japanese, and Korean – and includes 65,535 glyphs in seven weights. Adobe partnered with Google to provide one of the biggest font projects out there; this new collection integrates with Google’s Pan Unicode font Noto (which covers all languages).

Verde Sans

Verde Sans is a thick-stroked but fun, marker-style typeface. It comes with a full set of uppercase and lowercase characters and numerals.

Zilap Sleep

This rough, heavy novelty typeface is usable for display purposes that need just the right feel when it comes to typography. The character set includes only uppercase characters and some glyphs.