Facebook redesigns its “Like” button

http://ift.tt/29sV55f

Those Facebook buttons that you just can’t live without because you’re always using them to engage with your friends and family, and the site’s content, have gotten a noticeable makeover. The new design signals a shift to more space-conscious design by the company, as well as a tendency to combine old design into something entirely new.

In a post on the company’s developer blog, Facebook reveals the reasons behind its decision to revamp how its social-sharing look.

For starters, the biggest design change affects perhaps the social network’s most prominent button: the Like button. Liking is so ingrained in the Facebook experience that one can’t imagine the site without it. This is perhaps why the most significant changes were made to this button.

The company performed copious qualitative and quantitative research to determine if their initial hypothesis was correct: They believed that more users would understand the straightforward thumbs up icon on the Like button, as opposed to the old design that featured the company’s lowercase “f” logo in the button.

When their testing told them that their hypothesis had some substance to it, they implemented these changes to the site.

In addition, the new Like button features a unification of two, separate icons. The old design separated the actual Like button from the number of likes that are registered beside the button. The new design seamlessly melds these two elements, combining the icon, the word “Like” and the overall number of likes into one, longer, rectangular blue button.

Besides the Like button, the Share, Save and Follow buttons get a different look, too, all based on Facebook’s new “cleaner design” approach.

Essentially, its suite of social buttons has been modernized. This means that each button receives an updated icon that can better represent the Facebook brand while at the same time offering a superior user experience to people on the network.

This dedication to better engagement includes the following design properties:

• A consistent color
• A flat button shape
• A refined visual style that integrates the Like and Share counts within the button

Never one to neglect mobile, Facebook is also thinking of mobile usability in its button redesign. More than 30% of the engagement from people clicking or tapping the Like button comes from mobile, so the company is addressing mobile friendliness, too.

In an acknowledgement that the original version of the Like button is now obsolete as it was designed in the infancy of mobile, Facebook has released a variety of different button sizes. This means more freedom for designers and developers who can now decide on the specific button size to use with their desktop or mobile site.

Interestingly, these new button designs are also going to appear on Facebook’s Instant Articles in the next few weeks. Look for the new buttons at the bottom of those pages. They’re going to count toward aggregate share, like and follow counts.

Facebook won’t roll out these new buttons everywhere at once. Instead, you’ll probably see a trickle of these new designs popping up here and there on its site and apps over the next few weeks.

LAST DAY: Mr Moustache Font Family (10 styles) – only $9!

Source

Vía Webdesigner Depot http://ift.tt/2954anK

Cloudinary: Responsive Images Solved

http://ift.tt/298KC2f

As a designer or developer of responsive websites, your ultimate goal, no doubt, is to maximize an image for each unique device, while not making the files so big they slow down the load time or use excessive amounts of bandwidth. You must find that delicate balance between serving an image that is as large as the device can handle and providing the best possible quality without impacting site performance. This balance is particularly important with increased usage of mobile devices, which commonly have high pixel density, but can suffer from unreliable connectivity, monthly bandwidth limitations and orientations changes quickly.

For responsive designs to work as intended, you require multiple versions of every image so it can be adapted to look perfect on any device in any resolution, pixel density or orientation. Generating, managing, marking-up and delivering these numerous versions can be a daunting task – requiring time-consuming manual intervention. 

You also have to be careful not to make mistakes – such as upscaling or downscaling an image when a window is resized. And, often, you may not take into account the impact of using different image formats. For example, serving a WebP image to Chrome or Opera browsers can reduce the image size by 25 percent compared to the equivalent PNG or JPG.

Solving the image adaptation problems

Cloudinary has long been a pioneer in simplifying image management, enabling developers to just mention the cropping parameters, encoding settings and various resolutions for responsive images so they could be dynamically adapted. Today, the process became even simpler. Cloudinary announced its “Images Solved” solution, which completely automates image management using content- and context-aware image adaptation.

You can upload one high-resolution copy of any image to Cloudinary, which then automatically adapts the image, in real-time, to focus on the most important region of the image, select the optimal quality and encoding settings, and responsively deliver the image to any device in any resolution or pixel density.

Cloudinary eliminates manual intervention, guesswork and tradeoffs by further simplifying image transformation by automating the following features:

Content-aware cropping

Scaling an image isn’t always enough. With experience in responsive design, you likely know that variations in viewport sizes and device orientations mean that images need to be cropped differently. Cloudinary leverages a single dynamic URL to deliver the right image, in the right proportions, on every device. Cloudinary’s content‑aware image cropping algorithm automatically detects the most important parts of each image and crops it on-the-fly, while making sure that important information is never cut off.

Content-aware quality adjustment and encoder fine-tuning

Oftentimes, designers and developers will err on the side of caution when optimizing an image. Despite little discernible difference in quality, you might opt for a JPG at 90 percent over a JPG at 80 percent. This decision packs in extra Kb that offers nothing but wasted bandwidth to the user. At the same time, you may save images as the best all‑round encoding option (commonly JPG), even when alternatives like WebP offer a much faster experience for some browsers. Cloudinary optimizes performance by detecting the capabilities of the viewing browser and delivering not only the optimum level of compression, but also the best-performing format for any browser or device. This, too, is accomplished using the single dynamic URL.

Responsive images

With so many devices on the market, it’s almost impossible to export the right image size, ratio and pixel‑density for every device. Every image could potentially have thousands of variations. Cloudinary simplifies dynamic image delivery for responsive websites by automating the image width and DPR value decision based on the viewing device, display size and layout. Using Google Client Hints, it determines the required width of an image based on the browser viewport or the layout width and then calculates the optimal resolution for displaying the image on that device. Or Cloudinary dynamically selects image-specific breakpoints by determining the required number of versions of every image in order to balance the optimal dimensions vs. bandwidth reduction trade-off.

Dynamic format selection

Developers are expected to select optimal image formats for different scenarios based on the image content and viewing device/browser.

For example, JPEG should be used for a captured photograph or for faster loading while PNG should be used for illustrations or drawings or when using a transparent background. Additional logic should also be considered for modern formats such as WebP and JPEG-XR, if the viewing browser is Chrome or Internet-Explorer/Edge.

Image formats can have significant impact on the page load time and bandwidth – for example using WebP over JPEG can result in 30% file size reduction, which can lead to faster page loads and improved conversion rates.

The browser/format compatibility requirements seem simple, but manually adopting the format logic for many images can be complex and inefficient.

The Cloudinary Images Solved enhancements can make your job infinitely easier. Now instead of managing multiple versions of the same image, you can upload one high-resolution copy of the image and then automatically adapt it, in real-time, to focus on the most important region of the image, select optimal quality and encoding settings and responsively deliver the image on any device in any resolution or pixel density. Read this blog to view some examples.

 

[– This is a advertorial post on behalf of Cloudinary –]

65 Hi-Res Book Mockups from Zippy Pixels – only $14!

Source

Vía Webdesigner Depot http://ift.tt/2945hSg

Design like you’re Hollywood

http://ift.tt/290c6lI

Hollywood is the holy grail for the whole movie industry, and it’s where all blockbusters (or most of them at least) come from. These movies cost a lot of money, but they (usually) also make a lot more money.

And you know how Hollywood movies make so much money? Because they research. A lot. And they design for success.

It’s not about art

It’s easy to create an analogy between design (of a website, an app, a poster) and a movie. In one way or another both mediums try to convey a feeling, and tell a story. Both have something to “sell”, a conversion objective.

If you’re designing a poster, your objective is usually to either promote an event, a brand, or a product. An app has a more focussed objective, accomplishing an action such as “reading email”, “buying tickets”, “taking photos”, whatever it might be. But we can all agree that when designing any of these, there is an artistic influence and a specific design style that you try to use and convey to your users. And while you may want to only focus on the art and the style of your work, you need to keep in mind your end goal.Unless you’re an artist that just creates art for the sake of it, you will need to achieve an end goal.

Unless you’re an artist that just creates art for the sake of it, you will need to achieve an end goal

So, how is Hollywood a good inspiration for designers? Hollywood runs a business, and a movie is nothing other than an investment made by people who backed the movie financially, with the end goal of making profit and taking revenue from it. Their product is the movie, the merchandise, the licensing rights for toys and games, and all of these generate revenue out of the movie.

There’s a lot more to be said about the movie industry and how money is made, but I’ll leave that to the movie experts. My point is, in the end, the movie is not made with the sole purpose of existing as art, or telling a story; it’s a business: Money goes in, money comes out. Unless it’s a flop in the box office, and that’s just bad business.

Testing, learning, and changing

I was absolutely amazed when I found out about test audiences for movies. I was naive enough to think that a movie was simply produced in a team, edited and released, and it would do well or not, depending only on the hunches and talents of the team that made it. But oh, no.

A movie is well-tested, changed and improved, and re-tested again until it tests as well as possible. Movies are shown to a test audience, and people are asked several questions about the movie: How does it make them feel? Do they like the whole movie, or specific parts of it? Would they pay for it?

These tests have a big impact on the final movie, as a lot might change to get the best test results with the audience. Because again, they want to sell tickets and make sure people are happy with it. And unfortunately, I feel like a lot of designers don’t think the same way.

Your preference doesn’t count

For the sake of simplicity, let’s focus on a website. There are a lot of companies and designers out there that do a great job on design and development, but the only people involved in the process are the design team, the development team and the client. They forget about gathering feedback from the most important people of all, their target market.

I’ve seen this over and over again. People have opinions and ideas on layout, copy, features, and obviously the client has the final say (well.. it shouldn’t have, but that’s a topic for a whole another article). And then the website is the aggregated result of the designer’s and developers work and the feedback and opinions and all the rounds of amends requested from the client. And once you publish it and release it into the wild…well, if it does well or not is all dependent on these people.

So why don’t we do it a bit more like Hollywood and use a test audience? Just grab some people that you believe to be your target market, get them in front of the website and ask them what do they think, and more importantly, what do they want? It’s as easy as just paying a beer to a friend after work to take a look at your work, or a lunch, or heck, if budget allows, even allocate an amount to pay for their time!

And by the way, have you done your homework as well? Any market research on your target market? Competition research and checking what others are doing well and what they’re doing wrong?

Show your work to the most relevant people: the ones who’ll be using your work

This is obviously not a general problem. Startups already do this. More and more you see great companies and their user experience teams doing amazing work, having a lot of user interviews way ahead of time, creating personas and use cases. They test it all throughout the design and development process. However, it’s mostly done in product development teams.

But designers still lack the input from users. Instead, they work mostly to please the client. “A little bit more to the right, a little bit more to the left.” “Oh my daughter loves purple, let’s use purple.”

Designers often work in a silo, and that kind of behavior leads to work being created blindly without any input from others. Feedback and input is crucial for good work, so if you’re a loner (like I am), use that for when you need to focus on your work and get stuff done, but remember to, from time to time, get up and show what you’re doing to others. A brand new set of eyes will bring a new view, new ideas and great feedback on what you’re doing.

So take a hint from Hollywood. When you can, show your work to the most relevant people: the ones who’ll be using your work. They are the ones who really matter.

 

Featured image via Sean Pavone / Shutterstock.com

Focus Your Creative Direction with the Beautiful Book of Ideas – only $19!

Source

Vía Webdesigner Depot http://ift.tt/297xtFn

Essential design trends, June 2016

http://ift.tt/28XFpKg

Designers are changing the rules for web design, thanks to creative problem solving. Auto-play sound, mixing real and illustrated images and even layering logos on top of photos are some of the hottest design techniques right now and all three concepts were considered taboo not that long ago.

Here’s what’s trending in design this month:

1. Auto-play sound

Not that long ago, the rule was not to include sound on your website unless it was optional. And you definitely would not go the auto-play route.

Those tables have turned! What used to be a bandwidth hogging, obtrusive design feature is becoming quite commonplace.

Sound is being used particularly for a couple of different website types – for media-related content such as music, movies or news and for game or storyline type designs. The trick to using sound is that it needs to include a toggle on/off button for users that still want to interact with a website in silence.

Sound is that it shouldn’t come to a shock to users. Many sites, such as This Was Louise’s Phone, that use auto-play sound are using a buffer of sorts to show that sound content is loading. Combine this load action with a toggle switch and users can determine whether sound is for them or not before the site makes the first noise.

Another trick when it comes to using sound is to start softly. You don’t want users to jump out of their chairs because your design opens with a heavy metal rift. All sound to crescendo from almost a whisper to full volume in the first few seconds.

Finally, it is important that sound (particularly when it plays automatically) is a vital part of the content that contributes to overall user experience. Don’t use sound just because you want to try something new; use it with purpose. Also keep this in mind – even with sound as part of the design, many users will access the content without it. Design wisely.

2. Mixing photos and illustration

 

It can be a tough technique to pull off but the line between photography and illustration has been crossed. Mixing real and hand-drawn elements can add an air of whimsy to a project that’s both fun and visually intriguing.

Do it without being cheesy to have a lasting impact on users. Here are a few suggestions:

• Use illustrations for icons and buttons, and photography for dominant visual impact
• Create a visual pattern that uses mostly illustration, but add in short video or image areas for emphasis
• Add animated illustrated elements for a touch of something different near photos
• Create a badge or logo that’s illustrated to use with brand photos or on packaging that will appear in brand imagery
• Use illustration to help guide users through other visuals and tell a story

Taylor Made is a great example of this mix-and-match approach to photography and illustration. A financial planning company is not a place where you might expect to find this technique in action, but it is effective. Animated illustrations in the background of photos of people add interest to what could otherwise be a boring headshot. The animated hover stats grab user attention and encourage scrolling. Even more illustrations are used in the sites iconography to encourage clicks and add visual flair to text-heavy parts of the design.

3. Badges on top of hero images

Badges are everywhere you turn right now. From logo design to vintage retro typography styles that could be dubbed hipster favorites, these simple elements have become a staple part of minimal design styles. They are also a common option for designs that might be lacking in photography.

That’s shifting though as more designers are using badges with stellar photography in hero images. The trend is exemplified by a single hero image (typically not a slider) with a white or semitransparent badge on top. Badges are often centered horizontally and vertically, although placements can vary.

It’s a striking photo to logo (or text) contrast. What makes this work is that the big image draws users in. The badge serves as a focal point for what is often a somewhat weak or loose image. (That’s not to say the images used in this type of style are bad, but they do benefit from the help of a badge.)

This trend is an evolution of something we’ve seen for a while with hero image headers. Oversized, bold typography choices were the craze last year. This is a natural shift because of the popularity of badge styles and similarity between how oversized type and badges are used.

• Both tend to be white or light type
• Both tend to hammer home a single message to users
• Both work in designs that don’t have a lot of competing visuals
• Both are bold and daring because they only offer users one real point of entry
• Both work exceptionally well with stock photography
• Both styles offer a bold visual solution when you don’t have a lot of photo options
• Both styles lend themselves to adding a touch of animation in other places (such as a hover state) to entice users because there are not a lot of other moving elements, such as video or an image slider

What’s nice about a great badge is that it can serve dual-duty as your brand mark as well. (This is a great option for small businesses or portfolio sites.) Create a badge with the idea in mind that it will be your logomark. Design color and white versions to mix and match depending on use. This added functionality is another reason why badges are so popular right now.

Conclusion

Are you brave enough to add auto-play music to your website design or mix real and illustrated imagery? Both of the trends come with an element of risk—and opportunity for payout. If you aren’t quite ready for these trends, incorporating a badge over a hero image is something that can work for almost any type of design outline. You can also make this adjustment on the fly and use it as needed.

What trends are you loving (or hating) right now? I’d love to see some of the websites that you are fascinated with. Drop me a link on Twitter; I’d love to hear from you.

The Hand Crafters Font Bundle of 15 Premium Font Families + Extras – only $17!

Source

Vía Webdesigner Depot http://ift.tt/29gaiGk

Popular design news of the week: June 20, 2016 – June 26, 2016

http://ift.tt/290Xfgh

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.

Apple Doesn’t Understand Photography

 

Material Kit: A Material Design Bootstrap UI Kit

 

7 Things You Didn’t Learn in Design School (but Use Every Day)

 

Do We Need Frameworks?

 

19 Things not to Say to a Graphic Designer

 

The Typography of Blade Runner

 

Adobe Announces Major Update to Creative Cloud

 

The Future of the Web

 

The Perks Workers Actually Want

 

What Designers at Apple Did with iOS

 

What if You Have no Talent?

 

Twitter Launches Engage

 

Infographic: Your Slack Usage

 

How to Design for Creative Agencies

 

Reimagining Google Fonts

 

Boords: Simple Storyboarding

 

Mozilla Open Design: Branding Without Walls

 

Particle Love

 

ProtoPie: Code-free Prototyping Tool for Devices

 

The Dark Side of your Design Heroes

 

Site Design: Rleonardi.com

 

Site Design: Independencedaymystreet.com

 

Phone Free Events

 

Site Design: Nycpride.org

 

80,000 Hours Career Guide

 

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

LAST DAY: Mega Theme and Template Bundle from NRGThemes – 97% off!

Source

Vía Webdesigner Depot http://ift.tt/28VkdV2

Comics of the week #345

http://ift.tt/28TEpFg

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…

Just checking in

A comfortable designer

 

Goodbye muscle mass

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

High Quality T-Shirts for Designers Created by the Design Community – only $17!

Source

Vía Webdesigner Depot http://ift.tt/28TohFi