Tumblelog by Soup.io
Newer posts are loading.
You are at the newest post.
Click here to check if anything new just came in.

June 15 2017

Supercharge Your Site With a CDN

June 14 2017

3 UX Rules for Conversational UI Design

June 13 2017

10 Sites Doing Vertical Navigation Right

June 12 2017


The Funtastic June Bundle: 44 Fonts and 50 Graphic Packs from TheHungryJPEG

Inspired Magazine
Inspired Magazine - creativity & inspiration daily

We are always looking for new fonts and graphics that will make our web designs look even better, and today we have found a great bundle from the guys at TheHungryJPEG.com! TheHungryJPEG is a marketplace for designers, crafters, newbies, seasoned graphic design ninjas and anybody with an interest in the design world and features premium bundles released every week with amazing deals and premium weekly freebies.


  • The Funtastic June Bundle is THE biggest fonts and graphics bundle on TheHungryJPEG to date! 
  • This bundle features only high quality, beautiful, and remarkable fonts and graphics to boost up your designs into a new level.
  • 44 fonts and 50 graphic packs.
  • 96% OFF over 90 premium design resources.
  • Only $29!


Chirp Font by Denise Chandler

Caviar Font Duo by Media Lab 

Indulge Script by Anthony James 

Pink Willow by Maroon Baboo

Little Ballerina by Typia Nesia 

Breezy Picnic by Denise Chandler

This post The Funtastic June Bundle: 44 Fonts and 50 Graphic Packs from TheHungryJPEG was written by Inspired Mag Team and first appearedon Inspired Magazine.

20 Best New Portfolio Sites, June 2017

June 11 2017

Popular Design News of the Week: June 5, 2017 – June 11, 2017

June 10 2017

Comics of the Week #393

June 09 2017

Free Download: 100 Nature Icons by Vecteezy

June 08 2017

Improve Your Design, Using Hotjar to Really Understanding Your Visitors

June 07 2017

Affinity Photo for IPad is Unveiled
Giving Popular Apps the Brutalist Treatment

June 06 2017

​Discover Actionable Page Insights with FullStory

June 05 2017

3 Essential Design Trends, June 2017

June 04 2017

Popular Design News of the Week: May 29, 2017 – June 4, 2017

June 03 2017


Comics of the Week #392

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…

Working honey

A thief’s discount


Fun research

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

TT Lakes Font Family Bundle of 54 Unique Typefaces – only $17!

Source p img {display:inline-block; margin-right:10px;} .alignleft {float:left;} p.showcase {clear:both;} body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

June 02 2017


7 Reasons Clients Don’t Trust Your UX

One of the most frustrating scenarios for a UX designer is when a client’s team takes time to think things over and comes back with a batch of design changes without any explanation.

Everything may seem fine: you had perfect communication with the client, gathered and formulated all the requirements for project deliverables and put your heart into the work. But something goes wrong and your design concept gets turned down.

Let’s figure out the reasons why clients don’t trust your UX design and subsequently reject it—and trust me, it’s not because they’re overly officious, or in a bad mood. This article is for passionate UX designers who want to develop enduring relationships with their clients.

1. Your Client Wasn’t Involved in the Design Process

The process of creating a product takes time and effort, every designer knows that. However, your client may have another opinion. They may wonder: What’s so hard about opening up Photoshop or Sketch and crafting interfaces? This is a common pitfall in communication between a UX designer and a client; your client isn’t involved in the design process, so they don’t understand what’s happening and why it’s happening.

To solve this issue, consider involving your client in the process of user experience design to increase the chances that your design idea will be understood. If the client knows all the design stages well, they are likely to realize the benefits of each stage for designing a great user experience. As a rule, UX designers divide the design phase into several stages that include requirements gathering, research, low-fidelity prototyping, high-fidelity prototyping, and user research. The client should be included in each of these stages.

Requirements Gathering

At this stage, project requirements are elicited from the client. What’s the goal the client wants to achieve? What features are we going to build? Who’s our target audience? We ask these questions to map out the project and establish our client’s expectations.


This stage determines how the product will be positioned on the market and defines the end users and their preferences. The research stage helps you define your scope of work and prioritize your tasks.

Low-Fidelity Prototyping 

At this stage, you present low-fidelity prototypes ‒ in other words, rough sketches ‒ that represent the product. The benefit of low-fi prototypes is that your clients are able to see at least a rough project framework while realizing that the work isn’t done yet, and therefore not associating low-fi prototypes with the finished product.

High-Fidelity Prototyping

By sharing high-fidelity prototypes with your clients, you’re able to validate your design ideas before they’re implemented at the production stage. High-fidelity prototypes help you and your clients find out which ideas are worth implementing and which aren’t, discover if the product has value, determine how user-friendly the product is, and so on.

Usability Testing

Even though different companies implement usability testing at different stages, UX designers know that it’s better to eliminate testing of low-fidelity prototypes since they often require additional clarifications. However, testing high-fidelity prototypes that precisely imitate your end product allows all test participants to behave naturally and allows you to detect system flaws and fix them before such fixes are too expensive.

2. You Didn’t Establish Client Expectations

On the web, you can come across detailed manuals on client expectation management with regard to companies and design agencies.  As a rule, establishing client expectations falls on the shoulders of project managers, business analysts, or core executives—leaving UX designers uninvolved. So what should a design team do in case a project is past the phase of requirements gathering and the client’s demands are already finalized?

Consider explaining to your client’s team why each phase of the project matters.

  • Collaborate with project stakeholders at each stage of design so you’re able to continuously get feedback on your design.
  • Coordinate your UX strategy and your project vision with your client’s goals.
  • Plan reviews of updates and reports when all stakeholders are available.
  • Give reasons for prototype changes by appealing to your target audience’s interests and the feasibility of features.
  • Realign priorities; discuss possible risks tied to sudden prototype changes or changes to the stakeholders’ schedule.

3. You Forgot Your Strengths

A UX designer’s work stretches beyond the bounds of simple interface design: you have to keep up with the latest design and marketing trends, become a kind of psychologist to understand the behavior of your users, and be a good researcher.

One common kind of research conducted by UX designers is UX competitive research or UX-focused research. UX competitive research is aimed at evaluating the strengths and weaknesses of competing designs—like usability and interaction design—and comparing them to your own product.

The key benefit of UX competitive research is figuring out if your product rivals your competitors’, and generating new ideas to solve your current UX problems. In addition, the deliverables of UX-focused research, such as spreadsheets with detailed explanations of strengths and weaknesses of your competitors’ UX patterns, may serve as a specification for your project.

If you decide not to bother with UX competitive research, your client may be disappointed. As a famous proverb says, “forewarned is forearmed”: if you don’t understand your client’s business and its competitors, then you may fail to reach your target audience.

A few tips below will come in handy if you want to satisfy your client with a comprehensive competitive analysis.

Get Started with UX-Focused Research

Select Your Competitors

A product’s advantage is based on its novelty, uniqueness, and simplicity. Choose competitors whose products share the same values and features as your product so that you’ll be able to get your end-users’ expectations right on the money.

Select the Criteria For Assessment

Select the criteria that will help you implement an adequate assessment. Your business goals and issues should be reflected in measurable and explicit criteria. For example, for an ecommerce website you’ll likely include the following criteria: “Can users add items to wish lists?” or “Is the In-Stock feature available?”

Create a Matrix with Competitors’ UX Features and Patterns

Transfer all the findings about your competitors into a tangible matrix  that reveals all the strengths and weaknesses of your rivals’ products and compares them to your own product.

4. Your Prototype is Perplexing

On the internet, there are dozens of articles concerned with prototyping. I won’t preach about the importance of prototypes here. Sooner or later, all designers start to realize they need a draft version of a product that can be revised or simply thrown away if a design solution doesn’t work.

Although the benefit of prototypes is obvious, clients can still face a challenge making sense of your prototype. While you’re working closely with your design and keeping every detail in your head, even a small update can make your client go through all the screens again to get the big picture. Such confusion often becomes a reason for new changes, since a client doesn’t have a clear understanding of the interactions between objects.

This is a common predicament for interfaces that revolve around objects like blog posts or products: it’s hard to determine actions before the objects exist. Instead of heading straight for flows and interactions, it’s better to define objects and what actions they’ll be associated with.

The adepts of such an approach call it OOUX: object-oriented user experience design. I hasten to point out that “object-oriented” here is not the same as in “object-oriented” design in programming, even though the concepts share the similar idea of looking at a system through the lens of objects. OOUX means determining and designing objects first and defining actions (like sign-in, checkout, and search) after.

In contrast with a classic human-centered design approach to prototyping that strives to define first how user personas will achieve their goals (their actions), OOUX provides a universal language for developers, UX designers, and clients since people find it easier to perceive a system through objects rather than actions.

Lately, I’ve been trying to postpone designing a prototype as long as possible. Instead of designing interactions, a client and I get to decide together on objects inside the system. Such an object-oriented approach helps us elaborate a framework’s structure faster and better. Let’s take a look the object-oriented approach to prototyping:

5. Your Specifications Aren’t Complete

As I just mentioned, UX designers use an object-oriented approach to provide a better understanding of a system and its objects. The end result is a transparent and clear visual model of a framework.

However, while you’re making decisions in a group chat, during a brainstorming session, or in comments on a shared document, your specification fails to get updated. Therefore, your prototype is at risk of causing misunderstanding and becoming a source of argument if it lacks a CTA inventory.

CTA inventory is a term first introduced by Sophia Voychehovski ‒ a UX designer and avid follower of the OOUX community. A CTA inventory is a list of calls-to-action (CTAs) applied to objects inside your system. Examples of CTAs include “create,” “edit,” and “delete.” These CTAs are likely to be applied to blog posts (objects) inside a blogging platform system.

Sophia Voychehovski differentiates CTA inventories according to their fidelity. A low-fidelity CTA inventory includes a basic roadmap of all objects, content, metadata and CTAs inside a system. A high-fidelity CTA inventory features all the low-fi items plus information like user roles, CTA rationales, placement, priority, and more:

CTA inventory is a specific term applied in an OOUX environment, and we’re not trying to convince you that such an approach is the only right way to deliver a successful UX design. The point here is that you should experiment and try out approaches to communicating and collaborating with your client.

The benefit of a CTA inventory is that it offers a matrix with all the objects and interactions within a system. The matrix serves as a great visual alternative to a traditional prototype and long descriptive specifications. Such an approach allows for faster decision making, idea generation, and synchronization of updates. A CTA inventory can even help you get an immediate response right on the spot! A great plus of a CTA inventory is that it encourages iterative development and better prioritization.

6. Your Design Doesn’t Tell a Story

World-famous companies like Apple, Airbnb, and Zappos generously share their stories with the world. We all know their values, their corporate culture, and how they care about their users. Storytelling plays an important role in a company’s success: thanks to stories, companies are able to convey their value propositions to people and engage with large audiences.

Professionals in many spheres including marketing, copywriting, and user experience design are familiar with the concept of storytelling. In UX design, this concept is relatively new. Generally, there are a few ways that UX designers employ the power of storytelling:

  • as an approach to marketing and selling a product;
  • as a framework in UX design (an approach to defining user personas and their stories to get insights about end-users);
  • as a technique to build an emotional response from end-users (a storytelling structure in UX design that strives to convey a product’s feel).

Embody captivating content in a classic narrative structure—beginning, body, and climax.

Storytelling as a UX framework doesn’t replace detailed interaction design. However, stories help you to reflect a connection between your concept and your client’s idea. Stories can be used at different stages of UX design.

While your clients and end-users don’t observe the process of crafting user personas and background stories, they’re able to perceive how storytelling builds a bond with a product. Long story short, without a well-built narrative  in UX design, your product will look like a batch of typical screens and formal descriptions—and this will likely dissatisfy your client.

7. You Don’t Have a UX Strategy

Why might a lack of a UX strategy become a reason for a client’s mistrust towards your prototype? A modern approach to creating a digital product should be based on real evidence‒not hypothesis‒and on a deep understanding of business goals and user needs. Working on screens that vaguely reflect a real user’s behavior results in endless iterations with design changes and, as a result, an incomplete product.

A UX strategy is one of the indicators of a mature and deliberate approach to user experience design. According to Jaime Levy, UX strategy combines the concepts of UX design and business strategy to present a toolkit for UX designers on how to create products aligned with business goals. UX strategy includes setting the vision of a future user experience, prioritizing your goals, and creating a model of how you’ll assess commercial success.

The goal of a UX designer is to demonstrate the experience an end-user is going through and share the knowledge the designer gains with all the project’s stakeholders.

Modern companies implement UX strategies to do the following:

  • Outline business goals and align business goals with UX design
  • Prioritize business goals
  • Get measureable KPIs for UX design
  • Map out areas of responsibility for UX design

It’s important to point out here that a UX strategy soaks up everything that was mentioned in this article: it involves your client in the design process and aligns business goals with UX design. It’s an attempt to mitigate confusion while still at the prototyping stage, and uses innovative approaches like storytelling to reinforce engagement with your audience.

Wrapping Up

Despite the fact that the term “UX” has been around for a while, it remains a challenge to prove to your clients that focusing on your users’ needs is a must and that a product’s success depends largely on UX design solutions. However, practice makes perfect. Analyze your communication with clients: decide what works well for them and what doesn’t; see how they react to your ideas and how you can facilitate cooperation.

As you might have already guessed, UX designers should be empathetic and smart to comprehend their clients. So don’t stop improving, and eventually you’ll be rewarded with the satisfied smiles of the people you design for.



Hi, my name is Violetta. When I’m not designing interfaces and user experiences at RubyGarage, I do abstract painting or sip cocktails at my favorite bar. Follow me on Dribbble and Behance.

Sketch App Essentials (2nd Edition) – only $14!

Source p img {display:inline-block; margin-right:10px;} .alignleft {float:left;} p.showcase {clear:both;} body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

NBC News Redesign is On Its Way

NBC News is getting a new design! Read all about it! There are so many young people who may never get that joke, unless they like watching period movies. Well, much like humor itself, NBC News is moving with the Times (sorry), and building themselves a whole new design system, in conjunction with the external design agency Code & Theory.

The current NBC News site remains untouched, which gives us time to grab some good before and after screenshots. The new design system is currently being tested on two sub-sites — or “verticals” — called Mach, and Better. And I have to say, it’s looking good.

Like many other sites, NBC News is leaving behind the classic newspaper-esque visual theme in favor of something more modern. In fact, the new design system goes further than the tech-tabloid (techbloid?) style recently embraced by Huffpost, and straight into tech blog territory. Perhaps it even stretches into design blog territory.

The Current NBC News Site

Their new style places a stronger emphasis on imagery and video than the old one, presumably out of a desire to give context to every headline (and get more clicks). But no, they really doubled down on the video as well: they straight up developed their own HTML5 video player for use on their sites.

The Mach Vertical

Additionally, they have embraced a touch of asymmetry on both the desktop and mobile versions of their sites. They’ve gone for a streamlined and pixel-perfect variation on the increasingly popular “collage” look. In the meantime, they’ve actually toned down their traditional branding a little in favor of making each sub-site look like its own thing. This is largely accomplished through the heavy use of accent colors that are different for each vertical. That in itself is a nod to the peacock logo, but it also serves to separate their properties. The tech-minded vertical “Mach” goes for the classic deep blue, while the self-improvement and health-focused “Better” is accented in green. I find myself compelled to suggest a nice depressing brown for their political section, when they get around to it.

The Better Vertical

The typography is solid, and designed to scale to all screen sizes. The headlines are set in the beautiful Founders Grotesk Condensed, and the body text in Publico. These typefaces were chosen for legibility, and as I have yet to encounter any issues, I’d say they got it right.

The really big thing about the design, however, is that it’s meant to be modular, instead of relying on strict page templates. They want to be able to put any kind of content pretty much wherever they want to while maintaining consistent branding and style, so flexibility was a priority. Given the sheer variety of content a large news agency might have to include on their site, this is important.

They didn’t just update the look, they updated their whole process for putting news where people can see it

Now, does this design system live up to its aspirations? Well, like all design systems, it’s probably going to need some iteration, which is why NBC News made the very smart tactical move of testing it out on sub-sites. Still, looking at Mach and Better, and reading the stated goals for the design system in their Medium post, I’d say they got awful close. (Incidentally, they talk about their tech stack in that post; they use Drupal.)

The longer I look at it, the more I realize that the visual refresh is, perhaps, not the most important part of the redesign. They didn’t just update the look, they updated their whole process for putting news where people can see it. That said, I do love the new look. I might be biased, given how similar it is to some design and tech blogs, but I do.

I think this revamp is going to work out for them.

Sketch App Essentials (2nd Edition) – only $14!

Source p img {display:inline-block; margin-right:10px;} .alignleft {float:left;} p.showcase {clear:both;} body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}

June 01 2017

4 Smart Ways to Use Illustration in UI Design

May 31 2017

Outgrowing Growth-Driven Design

May 30 2017


7 UI Choices That Damage UX

User experience is one of the most important aspects of modern web design. The Google Trends graph for ux design shows how much this field has grown in recent years.

Yet there are still so many websites that push certain design trends which seem like the antithesis of usability. Some are done by accident or negligence, others are done on purpose. The latter are called dark patterns and they’re typically used by marketers to meet some end goal.

But as designers it’s our job to push back and fight for a great user experience. The best way to do that is by shedding light on bad practices and encouraging better ones. So let’s dive into a few of these bad UX practices to see why they exist and how they might be solved.

1. Unwanted Modals

The general concept of a modal window is actually very clever. It lets developers add content over the page without using JavaScript to pop open a new tab.

But modal windows are not the problem. Unwanted modals are the problem and they always drag down the user experience.

I’d say there are three different types of “unwanted” modal popups:

  • Exit intents which open when the user’s mouse leaves the page body, usually hovering the browser tab;
  • Timed modals that open after a set amount of seconds;
  • Scroll modals that open after the user scrolls a certain distance down the page.

You can see an example of an exit intent modal on this MaxTraffic post using their own exit intent script.

As much as I’d like to chastise this practice I do understand this from a marketer’s standpoint: it works.

The question isn’t why exit intent/opt-in modals exist. The question is whether you think it’s worth adding an unwanted modal popup to your website.

Is it worth potentially annoying most of your users just for a higher conversion rate?

If you’re more interested in a great user experience then the answer is obvious. Especially with Google now penalizing sites that use annoying interstitials/modals without user interaction.

But these unwanted messages also give modals a bad name, which is tough because they serve a real purpose in UI design. These can be used wisely, like with modal signup fields or information-based modals triggered from a user’s mouse click.

Or they can be annoying marketing messages that just appear seemingly out of nowhere. And don’t get me started on modals that won’t close even when clicking the background.

I really can’t fault marketers for using these modals because they convert well. But they’re also ruining the user experience for everyone else on the web.

2. Guilt in Copywriting

I recognized this trend years ago but I couldn’t put it into words until I read this article by Katie Notopoulos. She uses plenty of great examples to show how guilt-based copywriting annoys users and increase signups.

This writing style appears in those annoying modals I just covered. But this writing can also appear in sidebar fields or in-content opt-in forms. One example from Good Housekeeping is just terrible (hover the browser tab to trigger).

The goal with this guilt-ridden copywriting is to make the user feel so bad that they second guess their choice to close the window. It usually follows a formula that forces the user to click a nonsensical statement that’s unrelated to closing the window.

For example, a modal might offer you a free ebook on web design. The subscribe button might be simple but the cancel button might read “No thanks, I like sucking at design”. There’s actually a whole Tumblr site devoted to this shaming copywriting.

This is another example of a technique that works from a marketer’s standpoint, but certainly holds little value from a UX standpoint.

3. Fullscreen Interstitials

It should go without saying that completely taking over the screen with an opt-in or squeeze offer is just plain obnoxious.

This trend is like the unwanted modal window on steroids. These interstitials take over the entire screen and block the page unless you close the window. And sometimes it’s almost impossible to close these windows!

Backlinko is a fantastic site for SEO tips, but horrible with the pushy marketing.

First time visitors are always greeted with the same fullscreen modal that takes over the entire page. The background uses a video of Google SERPS which is both confusing and ugly.

It places a very tiny X icon in the top right corner and the “no thanks” link is much smaller than the other text, not to mention harder to read. This thing is a usability nightmare on mobile and it’s just one example of a trend that really needs to go.

4. Slide-in Ads/offers

Sometimes you’ll be scrolling down a homepage and see a small box slide into view from the side. This might be a feedback box for user testing, or it might be social sharing links or even a discount/promotion.

I can deal with these every so often. If they stay out of the way and aren’t too obnoxious then, whatever.

But on sites like AccessPress you can find at least 2 different slide-in boxes on either side of the page, and sometimes even a 3rd!

This isn’t meant to shame AccessPress or any other sites in this list. I’m just using this as an example to show how poor UX trends can go too far.

If you have a client who wants this slide-in feature try to make it subtle. No ding noises, no flashing graphics, and preferably no wacky animations. If a user wants to learn more they’ll take the time to read it.

5. Custom Scrolling

Most trends in this post have been marketing-oriented because, as Gary V says, marketers ruin everything.

But custom scrolling can’t be blamed on anyone. It’s just a trend that’s been around for far too long and feels like a remnant of an older web. Nowadays browsers like Chrome have their own custom scroll features that users can enable/disable on a whim.

But websites like Click and Grow still have these annoying JS-based scroll features that turn navigating the site into a chore.

Usually these custom scroll animations have one of two effects. Either the scroll goes too fast beyond where you wanted to rest the page, or it goes too slow and you have to whip your mouse wheel just to move. Why would any designer think these two options are better than the default?

Tied into custom scrolling is a newer trend I’ve seen on single page layouts. They have fullscreen page “sections” where your scroll wheel only moves down one section at a time. Gladly has this trend on their homepage.

My problem here is the same with fixed scrolling. It takes power away from the user.

The Gladly section animations take way too long to complete. The Internet moves fast and Internet users always want it a little faster. So any type of custom scrolling that ultimately slows down the experience is just bad UX.

6. Nav Menus Without Padding

This is a tough trend to explain but you know it when you see it.

Every site has a navigation menu and most links have padding around them. But sometimes the padding isn’t clickable, so to navigate you need to click on the exact block area of the text itself. This drives me crazy!

It takes maybe 30 seconds to move CSS padding from a link’s container element to the link itself. The navigation menu looks the same, but now users can click the link and the space around the link. So much easier!

Take a look at Tilde’s navigation for a live example.

The craziest thing about their site is that their mobile responsive navigation actually does have clickable padding. Only their desktop nav is plagued by the text-only click area.

On the flip side you’ll find many sites that understand the importance of this very subtle yet crucial detail. One example is Think With Google where you can actually see the full link size while hovering:

Just keep this in mind going forward because it’s a very simple alteration that can have a huge impact on usability.

7. Paginated Listicles

Last but not least I’m poking a bit of fun at blogs that design their content into one-item-per-page listicles.

I cannot imagine that any person enjoys constantly clicking the “next” button to read through a clickbait post. You’ll find tons of these on many different websites and none of them consider the user’s experience.

This trend is mostly about pageviews and ad revenue more than anything else. And while it’s not really in the designer’s control to fix this, it does relate to the user experience and webmasters/designers should do all they can to avoid these multi-paged articles.

I can only imagine how many other trends are out there annoying users on a daily basis. But I hope by sharing these ideas more designers will work towards eliminating these dark trends and reducing their presence on the web.

Bundle: 2500+ Professional Photoshop Actions and Vectors – only $17!

Source p img {display:inline-block; margin-right:10px;} .alignleft {float:left;} p.showcase {clear:both;} body#browserfriendly p, body#podcast p, div#emailbody p{margin:0;}
Older posts are this way If this message doesn't go away, click anywhere on the page to continue loading posts.
Could not load more posts
Maybe Soup is currently being updated? I'll try again automatically in a few seconds...
Just a second, loading more posts...
You've reached the end.

Don't be the product, buy the product!