Comics of the Week #393

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…

Mobile marketing

Comfort zone

 

All in agreement

Want more comics? Check them out here

Source

Free Download: 100 Nature Icons by Vecteezy

This set of 100 nature icons designed by vecteezy.com is the perfect antidote to the austere, minimalist line icons used everywhere. Drawn in a friendly, clean, emoji-style, they’re perfect for social media, kids’ sites, and any project where you want to communicate health, innocence, and positivity.

Our favorites include the round bee, the wild cactus, and the camp fire. You’ll also find a great jellyfish, a whole series of different trees, and a happy looking whale.

The download includes a useful reference sheet, and each icon is supplied in SVG, PNG, EPS, and AI formats. They’re free for personal and commercial projects, and you can even use them in templates and themes.

Download the files for free, beneath the preview:

Please enter your email address below and click the download button. The download link will be sent to you by email, or if you have already subscribed, the download will begin immediately.

Source

WP Contacts – Contact Management Plugin Review and Setup Guide

WP Contacts is an easy to use contact management plugin for WordPress that allows you to import and capture leads, and maintain and manage your contacts database and lists. This type of plugin is useful for anyone who maintains a website that collects customer or client details, whether that is from orders in an e-commerce store, a membership site, or…. Continue Reading

The post WP Contacts – Contact Management Plugin Review and Setup Guide is written by Rachel Adnyana and appeared first on WPKube.

Improve Your Design, Using Hotjar to Really Understanding Your Visitors

Being a designer is tough: you can spend months crafting the perfect experience, ensuring your usability is inclusive, writing careful copy, testing on every browser known to man—even the copy of IE on that old laptop that props open the studio door; then you check your analytics and discover that your labor has resulted in not a single $ worth of improvement.

But what if you could leave the personas, and the research, and the design patterns behind, and just look at what real users want from your site?

What if you had a way of not just reviewing statistics, but understanding how the customers behind those numbers really feel?

Understanding your audience is 95% of the design process, if you nailed that, the rest would be easy…right?

Well, that’s where Hotjar comes in. Hotjar is a revolutionary approach to really understanding your users because it combines both analytics, and feedback tools. By combining both approaches—both observing how users behave, and listening to what users have to say—the powerful all-in-one approach helps you understand why your design performs as it does.

Where many competing products offer one or two features, Hotjar combines numerous tools into a designer-friendly package:

Heatmaps

The most visually arresting feature, and the one that gives Hotjar its name, is Heatmaps. Heatmaps show you where users are clicking, tapping, scrolling, and interacting. The more users that interact with a particular area of the screen, the “hotter” the area. This is your strongest indicator of what users find most appealing about your site. Use Heatmaps to quickly identify the UX issues that are costing you money.

Recordings

Recordings are a great way to understand an individual users behavior. Let’s say you see someone abandon a cart, can you be sure they did so thanks to the checkout design? Recordings allow you to rewind that user’s journey and uncover the source of their discontent. You can even compare different user journeys from before and after your tweaks.

Polls and Surveys

Improving the performance of your site starts with understanding what your users want. What better way to do that, than to ask them. Hotjar’s Polls and Surveys allow you to pose questions to users anywhere on your site. You can target specific questions on desktop or mobile. You can even poll for feedback once a goal has been reached, giving you the most complete understanding of users’ views possible.

Conversion Funnels

No site ever achieves 100% conversions, but that shouldn’t stop you trying. Hotjar’s Conversion Funnel analysis helps you understand where you’re losing users, and perhaps more importantly, why you’re losing users. Analyse the type of content that works best, from text to images. Find out which forms are too long. Which buttons are too small. Which text is too verbose. Streamline your content by revising poorly performing content and you’ll take a step closer to that magic 100%.

Incoming Feedback

Currently still in beta, Hotjar’s latest feature gives users the ability to reach out and talk to you at anytime. If they’re experiencing problems with checkout, struggling with a form, or just can’t find the information they need, Incoming Feedback empowers your users to help you understand them.

Try Hotjar for free

Hotjar is an easy way to truly understand your users. Use tools like Heatmaps, Conversion Funnels, and Surveys to get inside your users’ heads. Follow their journeys and rewind to identify problem areas. Even boost the conversion rate of forms—by far the toughest UX to get right.

You can try Hotjar now, for free. Start building an understanding of your customers today, and ensure that tomorrow’s redesign is the right approach for your site.

 

[– This is a sponsored post on behalf of Hotjar –]

Source

Affinity Photo for IPad is Unveiled

Affinity Photo for iPad was announced this week at Apple’s WWDC. The desktop version is one of the most elegant pieces of design software on the market, and that excellence appears to have been successfully transferred to the iPad.

The iPad edition of the award-winning software has been built specifically for the iPad’s hardware, and the interface has been entirely re-imagined to take full advantage of touch interactions. The Affinity team have even built-in sensitivity to the pressure, tilt, and angle of the Apple Pencil, resulting in a new level of experience when interacting with images.

Affinity Photo for iPad might be the first photo-editing software that outperforms its desktop sibling.

All rendering, adjustments and filter effects have been fully hardware-accelerated. The result is a genuinely unique new way to interact with your images and your iPad, with performance you’ll find hard to believe.

—Ashley Hewson, MD of Affinity developer Serif

Compared to Photoshop’s preview windows—which is the only realistic comparison that can be made—Affinity’s live changes enable a greatly streamlined workflow.  The iPad edition of Affinity Photo is based on the same backend as the Windows, and Mac desktop editions. This means there’s perfect file compatibility across devices, including a shared undo history.

Other features include: comprehensive retouching tools, so you can discretely remove those blemishes; non-destructive adjustments, so you can experiment with hue and saturation without losing the original artwork; super-accurate selection, allowing you to pick out elements as fine as individual strands of hair; realtime-effects, letting you add drama, without peering through a stamp-sized preview window.

You’ll also find: RAW editing; RGB, CMYK, LAB, and Grayscale color spaces; HDR merging; PSD support (as well as PNG, JPG, TIFF, EPS, PDF, and SVG); 32-bit editing; live perspective projection; Pantone support; panorama stitching; pro font support; 360 degree canvas rotation; and a whole lot more.

Affinity Photo for iPad is available now at the introductory rate of $19.99.

Source

Giving Popular Apps the Brutalist Treatment

Every time someone talks about Brutalism, I have to ask, “Wait, that’s still a thing?” Brutalism is for people who think flat design is a bit too skeuomorphic, and as a community we seem to have agreed that Brutalism takes things a bit too far, and that prettier websites are usually better.

I myself have no issue with Brutalism as such. If I could get away with ignoring fancy UI stuff and focusing solely on accessibility and good UX, well let’s just say I’m tempted. Why not cut out all the fluff and just make it work, first and foremost? Craigslist still does it. Amazon still ain’t pretty. Even Bloomberg took a stab at it.

By the way, Bloomberg is still using an honest to God “marquee!” It’s not as hard on the eyes as some I’ve seen, but you can’t get more brutalist than ‘90s web design.

Pierre Buttin thinks sites like Bloomberg have brought brutalism into the mainstream, and that it’s going to be a big thing again. Some experts are suggesting that text-heavy design drives more user engagement, and he wanted to see what it would be like to push that idea to the extreme. Moreover, he wanted to see what that would look like in the normally graphics-and-gradients world of mobile apps.

So he did the only sane thing you can do, as a good designer. He tried it. In fact, he tried it on many of the most well-known apps for mobile phones by redesigning them in the brutalist style. As you can read on the project page, he got his ideas from brutalistwebsites.com. Then he stuck to system fonts, used web safe colors, and mostly tried to recreate the existing UX of every app he redesigned.

Original (left) vs. Brutalist (right)

Original (left) vs. Brutalist (right)

Original (left) vs. Brutalist (right)

Original (left) vs. Brutalist (right)

Original (left) vs. Brutalist (right)

Original (left) vs. Brutalist (right)

Original (left) vs. Brutalist (right)

Original (left) vs. Brutalist (right)

Original (left) vs. Brutalist (right)

Original (left) vs. Brutalist (right)

Original (left) vs. Brutalist (right)

Original (left) vs. Brutalist (right)

Original (left) vs. Brutalist (right)

Original (left) vs. Brutalist (right)

Original (left) vs. Brutalist (right)

Original (left) vs. Brutalist (right)

Original (left) vs. Brutalist (right)

 

As a UX guy, I have to say he succeeded. The brutalist redesigns in question do nothing to reduce the usability or accessibility of any of these apps. In some cases, I dare say the usability is improved.

The caveat, of course, is that everything looks kind of the same. If the whole world adopted this trend, things would be very usable (assuming no one started doing Brutalism badly…which has definitely been a thing), but very boring. Besides, Brutalism may lend itself to usability, but so do other styles of design. Still, this is a fascinating look into the potential future of some (not all) UIs.

Source

​Discover Actionable Page Insights with FullStory

When you’re designing for users, and you’re always designing for users, you need to understand them. The problem with user-centered design is that with over seven billion of us, sometimes it’s difficult to pin down exactly what makes us tick.

Building a relationship with customers through your sites and apps is essential, and the only tool you have to guide that conversation is information. The more accurate the information you have access to, the more educated your guesses become.

It’s a simple equation: high-quality data goes in, high-quality design comes out.

One route is analytics, which are great. But what beats analytics is actionable analytics. What makes analytics actionable is your ability to drill down into the data and understand users. One of the best sources of data insights is FullStory, because FullStory’s analytics tools include a powerful inspect mode, that lets you dig into your data to your heart’s content.

FullStory has a number of features to help you get inside your users’ experience, including the awesome Page Insights. Page Insights is a visualization mode that shows you, at a glance, how whole groups of users interact with your site.

Let’s say that you want to examine the profile of users who click on a particular button. With traditional analytics you would feed CSS identifiers in manually, but that’s complex, and error prone. A better way is FullStory’s Inspect Mode: just hover over an element and you’ll be given the option of either running a search, or starting a new search.

Page Insights answer questions like: What are the most clicked elements on the page? What percentage of users click them? Are those percentages different on mobile? What about East of the Mississippi? These chained queries help you build up a picture of your actual users; it’s like personas, except the interactions are real.

FullStory excels at teaching you about users’ journeys through your site. It’s an ideal way not just to know what’s happening, but understand what’s happening. With that understanding you can iterate usable, innovative, and welcome design solutions to the problems your users experience.

now you know which problems to solve, your design work will improve, and so will your ROI

How is this possible? Well, the answer is that FullStory can automatically record everything that happens—from user actions to page mutations—on your site. All that’s left is for you to put on your designer-hat and fire up your design program; now you know which problems to solve, your design work will improve, and so will your ROI.

And of course there’s no complex setup process, and no upgrade cost: if you’re already a customer then Page Insights is already available to you, and if you’re not then it’s included in the FullStory Pro trial, so you can demo it yourself.

You’re a designer, so you already understand the power of visuals and their ability to communicate. The insights FullStory delivers by giving you more than a spreadsheet of seemingly random numbers, will enable you to design user experiences in an intuitive way.

And on top of all this, Page Insights is beautifully designed itself, which makes it a joy to use. You’ll be thankful you opted for the well designed solution.

 

[– This is a sponsored post on behalf of FullStory –]

Source

How to Add Font Awesome Icons to WordPress Manually or With Plugins

Ever see those nifty icons on other people’s WordPress sites? The ones that grab your attention and give you added context for what you’re looking at. Pencils, hamburger icons, those sorts of things… You know, the graphics that look something like this? If you haven’t been living in a cave, I’m willing to bet that you’re nodding your head right now….. Continue Reading

The post How to Add Font Awesome Icons to WordPress Manually or With Plugins is written by Colin Newcomer and appeared first on WPKube.

3 Essential Design Trends, June 2017

Sometimes a simple design tweak can move your website design from ordinary to trendy. Each of this month’s trends is that type of technique, from tiny typography to geometric features to blurred imagery. Any of these techniques can work in a new design project or as an adjustment to an existing design.

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

1. “Tiny” Text

Does it seem like oversized typography is a thing of the past? Smaller, almost “tiny” text has begun to replace the big bold headers that have been a website design staple for a while now. From smaller headlines to body text that seems sparse, there’s been a definite trend in typography downsizing.

While there might be some concerns about readability when it comes to small text sizes, particularly for body text, smaller fonts are not a bad thing. Oversized typography had almost started trending toward garish with sizes and lettering that was almost too big to read with ease.

Smaller typefaces feel somewhat softer and give the design more space for other elements for the eye to move around to. The trick to effectiveness with small type is to keep lettering to a minimum. Without a lot to read, this trend can be effective and interesting. On the other hand, with large blocks of type tiny type gets lost and can hinder the user’s ability to read with ease and scan copy efficiently.

Balance is a concern as well. All of the typefaces have to scale down somewhat to create a nice sense of harmony. Moonfarmer uses a light typeface for the logotype treatment and a small line of secondary copy. The type elements contrast nicely and the light type treatment seems to fit the mood of the imagery.

HTML Burger takes almost the opposite approach with a bold headline and small secondary lines of text. The lighter descriptive words work small because they are common words—HTML, CSS, e-commerce—and contrast significantly with the still-oversized headline.

Mountain Dew’s NBA design pushes everything to a small scale. This is one of the smallest headline treatments you’ll likely find, but combined with the overly bold X overlay and video background, users are still pulled to the tiny text.

2. Geometric Layering

New ways to layer elements has been steadily growing in popularity. First brought back as a mainstream and modern design technique by Google’s Material Design idea, geometric layering is a different way to add visual interest to visuals that might leave something to be desired.

Each of the examples below uses a framework with bold shapes to bring new life to images that are somewhat plain – buildings, a meeting photo, images of people working. The addition of fun shapes, cut outs and color give the user a starting point to get into the design. Note how each of the designs uses geometric to effectively move the user from a shape to the most relevant content, such as a headline or branding.

Geometry can be used in a number of ways that integrates with the rest of the design:

  • cut into images to bring focus to important test elements like Salt Projects;
  • use an unexpected bright border element to create an off-balance focal point that leads users across the screen such as Bailey and French;
  • put photos in unusual shapes to add new focus on the images, like Alchemy Digital.

The best part of using geometric layering is that it is easy and works with pretty much any type of content. Users are growing accustomed to circular buttons and other elements that are placed on top of one another for a multi-plane, more tactile interactive feel.

The angles and curves in geometric elements can help point the users from one element to the next, and when used effectively are a great directional tool. Position angles so that they “point” to the content you want users to see and use circles for content that should be viewed first.

3. Blurred Imagery

Blurred imagery is a technique that’s not new. But it seems to be getting new life with more designs featuring fully, or partially, blurred images or video.

Blurred imagery can create a distinct feel for a website with an element of mystery or help push the emphasis away from the image to other part of the design. Each of the examples below uses blur for different reasons:

  • Digitalux takes what would be a boring bit of video—people working in an office—and uses blue to add a bit of movement behind the main message and call to action;
  • Playkot uses a blurred background to add emphasis to the fun character and interesting typography treatment in the foreground, adding an element of reality to this virtual city-style gaming adventure;
  • ESPN’s “We the Fans” features a blurred stadium style backdrop that would almost be a football arena anywhere to showcase the preview for a television documentary; the blurred backdrop helps put more focus on the fun type treatment that’s the main branding for the series.

Conclusion

Sometimes the biggest trends are stepping stones in the evolutions of other trends. It can be interesting to see the small-step progress almost as it happens. That’s what you tend to get when looking at trending elements that can be applied to almost any project, such as the three trends showcased here.

The nice thing about these ideas is that they are applicable on almost any scale. You can add tiny text to just your homepage, for example, and see how the change impacts users before rolling it out on a wider scale. Trial and testing on this level will help predict whether a trend like this will have staying power or will fade quickly. 

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.

Source

Popular Design News of the Week: May 29, 2017 – June 4, 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.

Better Google Font Finder

 

Examples of Unique Website Layouts

 

Adobe XD or Sketch: Which will Result in the Best UX?

 

This “Brutalist” Thing is Going Out of Control

 

UI Pie: UI Freebie and Inspiration Website

 

The ORY Editor – Next-gen Content Editor for the Browser: WYSIWYG on Steroids

 

4 Reasons Why your Body Text Should Be Bigger

 

30 Trendy CSS Text Shadow and Font Combinations

 

Boarding Pass UI Concepts

 

Board for GitHub – A Native GitHub Project Board MacOS Application.

 

The Changing Culture of Web Design

 

Occies: Eyewear with Screen Light Protection

 

5 Types of Rest Every Creative Should Adopt

 

Designing a Small Business Website: Wants Vs Needs

 

20 Best Atom Packages for Front-End Developers

 

Samsung’s Bizarre Emojis

 

Just Make it Look Pretty…

 

Web Design Museum

 

Fontice – Free Vector Icons Font for Website and Mobile App

 

The Tools of an HTML Email Workflow

 

20 Outstanding Mobile App Websites for your Design Inspiration

 

Google’s New Viz Tool Makes Snappy GIFs Out of your Data

 

Here’s How to Design Ecommerce CTAs that Convert

 

Fontinspiration.com – Lettering, Type and Font Inspiration Split into Helpful Categories for Designers

 

The Honest YouTube Sans Reviews

 

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

Source