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

February 08 2018

Holistic Web Design: 6 Questions to Ask Before You Make Anything

February 07 2018

Will AI Really Replace Designers By 2022?

February 06 2018


UXPin Releases Adele: a Giant Repository of Design Systems

Sometimes you run across a website or app that just blows your mind. You sit there for a minute, wondering just how in the heck they pulled that off. How indeed?

Well, good news for everybody! There’s this thing you can do where you can right-click on a page and… I kid. Inspecting the source available in the browser can only tell you so much. Sure, you can extrapolate some aspects of the design and development philosophy by looking at what’s right in front of you, but that will only get you so far.

Recognizing this, the people at UXPin have released Adele (not that one), a repository of links to publicly available design systems and pattern libraries. You can browse through, pick a company you want to learn from, and find out exactly how they did what they did, and why they did it that way.

The repository doesn’t just tell you where to find the information, though. They tell you what’s available in terms of code, whether the components are available, and which libraries they’re using. It’s all organized in an at-a-glance sort of way, with filters and sorting options to get you started fast.

So yeah, if that interests you, go have a look now.

Fun fact about the name: the repository is named after Adele Goldberg. She worked at XEROX PARC forty-odd years ago, and helped to create Smalltalk-80, an object-oriented programming language that — while it was not the first — remains influential to this day.

Additionally, their work was the foundation for this whole “graphical user interface” concept that never really went anywhere. Yes, I’m kidding again. We kind of owe our careers to Adele and her colleagues. I think a code repository is probably the least we can do. She is, in the words of the repository’s creators, an icon.

75+ Breathtaking Watercolor and Floral Elements: The Magic Ombre Collection – only $9!

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;}

Ultimate UX Design Guide to SaaS On-Boarding, Part 6: Checkup Calls & Swag

SaaS Customer On-boarding is the process that users have to experience while initiating their journey on a company’s software application. Customer on-boarding initiates from the experience that employees previously had to undergo while joining a firm. The on-boarding process sets the tone for a good user experience.

The SaaS customer on-boarding process is based on 6 comprehensive aspects, the first five of which we’ve already covered:

  1. Sign up Form
  2. Welcome Email
  3. Drip Campaigns
  4. First Login & Product Tutorial
  5. Data Import & Notifications
  6. Check Up Calls & Swag

All the aspects of the process play an equally important part in forming a desirable reputation of the brand in the eyes of the customers during the on-boarding process. Today we will be focusing on Checkup Calls and Swag.

Checkup Call

interacting with a new user can be more effective than any other means of improving your customer retention

Check up calls can considerably impact your user on-boarding experience. This is simply because it affords human interaction with your user. The worth of directly interacting with a new user can be more effective than any other means of improving your customer retention and the overall growth of your business. Furthermore, there is the added benefit of getting a lot of feedback that could give you a number of actionable things to work on; Everybody benefits.

Benefits of Checkup Calls

A lot of SaaS founders say that calling over the phone is now obsolete. Furthermore they feel that their users would consider this annoying. Another argument company founders give is that they do not have the time to do that, as this is very demanding of human resources.

So when you go ahead with that phone call and dial up a client, you are bound to see an increase in the rate of activation for your product—simply because you made the effort and your competitors did not.

There may be users who won’t engage with you, but there will be a fair amount which will. And you have a great opportunity to build on your relationship with those that do engage. Customer development can be quicker; you will be able to acquire quick and valuable feedback and market intelligence that can very easily put you ahead in the game. You will see higher closing rates, long lasting customer relationships, and success along with very easily differentiating your brand through improved and personalized service.

But Our Users Might be Irritated!

It is understandable to think that your users would be “bothered” by a phone call. We live in an age where your average user is bombarded by companies vying for attention in a variety of innovative ways, so it is logical to think that a phone call would simply be another annoyance.

However keep in mind that your user is interested in your product because he/she has signed up for it. The product represented some utility, hence the reason for the sign-up. And a company that manages to communicate personalized attention is definitely going to be well received. So do not worry about irritating your users, they will welcome some personal attention.

Call Within 5 Minutes of a Signup

A popular emerging approach actually suggests that calling up first time users within five minutes of signing up could be extremely beneficial. It doesn’t have to be long, it can simply be telling your user that you wanted to reach out personally, say hello and see if there was anything that you could help with. Companies report very favorable responses to this approach. 

Timing is everything. If you call too early your user probably will not have much to share—as a matter of fact they could be thinking that you are being a bit “needy”. If the call is made too late, they could have already decided that your product is not worth it and hence will not be paying for it.

What are you going to do with all that information? There is every possibility that you have acquired very actionable information from your calls but at the same time you need to have a system through which you can filter the feedback that you get. For all the valuable feedback, there is also going to be feedback that may have no value at all and is incredibly personalized. It is very easy to get caught up in the feedback and completely move away from what you envision your product to be.


There is no one who doesn’t like some swag. Companies have tremendously innovated ways in which they can “wow” their users with the kind of swag packages that they send. Services like StartupThreads offer to manage your swag for you.

There is no one who doesn’t like some swag

It helps to think of the following categories of things when you are thinking about what you could give away for free. So think along the lines of the following options when sending something to your customers:

  • Small tools or apps
  • Blog Posts
  • Infographics
  • Free Ebooks
  • Access to free Webinars
  • White Papers
  • Checklists
  • Beginner’s Guides
  • Consultations that are free of cost
  • Relevant interviews
  • Podcasts
  • Bundles that contain more than one of the items above

Here are some excellent examples of companies that send swag to their users.


The swag can vary, but creativity never fails. Currently ChartMogul’s welcome bag, which new users get, is an excellent mix of useful material including cheat sheets, along with stickers and a branded T-shirt. The current bundle contains:

  • “The Ultimate Churn Rate Cheat Sheet”
  • “The Ultimate SaaS Metrics Cheat Sheet”
  • “The Ultimate Cohort Analysis Cheat Sheet”
  • Stickers
  • ChartMogul t-shirt

Product Hunt

A thousand supporters of the website Product Hunt received a Thank You note along with a kitten sticker. The response was tremendous across the world. People were extremely appreciative of the gesture and as a result, Product Hunt’s popularity received a massive boost.

It’s usually the added cost of giving away swag that deters companies from even considering the simple ways in which this can be done. In this case, Product Hunt simply targeted its first thousand customers for this show of gratitude. The move was cost effective and the return that the company got was spectacular.

Rules of Thumb

Remember, swag won’t go a long way if your on-boarding experience is not up to the mark. It can prove to be the perfect icing on the cake but it can never change a bad experience into a good one.

Be careful deciding what you send your users. They would not want anything that they can’t really use, so think about something that they would really benefit from, or would value.

If you are currently not that big, personalize. Cards that have been hand written, or carry that mark of extra effort, go a long way towards making a user feel appreciated.

Mega Autumn Design Bundle with 700+ Elements – only $9!

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;}

February 05 2018


Why The Hamburger Menu Should Disappear For Good

The hamburger menu was initially introduced as a means to obscure secondary navigation items in an effort to maintain a cleaner and more focused web or application design.

Android was one of the early adopters of this design component, going as far as to include it in their popular Material Design guidelines. Since then it’s found its way into the majority of Android apps, as well as a proportion of iOS apps. It’s even become a staple across a large number of desktop applications and websites.

These instances have been designed with varying degrees of success. Some offer legitimate solutions to navigation overflow, while others opt for hamburger menus for aesthetic reasons at the expense of user experience. It’s become a common and accepted component of modern product and web design.

As far as desktop applications are concerned, the hamburger should have no place. Rarely is a design so lacking in screen space that a navigation overflow is required. Google is one of the main culprits, seemingly including this component simply to provide consistency across their products and between desktop and mobile devices. In reality, it’s a useless and inconvenient user experience practice, particularly when it includes primary navigation items too.

Similarly, the same logic applies to traditional websites such as portfolios, landing pages, and corporate sites. On a desktop computer, there is no excuse for entirely obscuring primary or secondary navigation items.

The hamburger menu is simply an aesthetic consideration, and often a lazy solution

There is so much screen space to play with at the design stage, even when considering small laptops and tablet devices. Even the most complex and extensive navigation menus can be displayed outright, given some careful consideration. There are no set guidelines like on mobile apps, allowing designers to get creative with positioning, sizing, and user-friendly solutions like hover dropdowns and tiered structures.

The hamburger menu is simply an aesthetic consideration, and often a lazy solution unfit for circumstance and device. It makes it difficult to switch between pages, and is outright confusing to even the most computer-literate individuals.

As screen sizes reduce down to tablet and mobile device resolutions, the hamburger menu begins to solve the issue of space limitations. It provides a quick and easy solution to a lack of screen real estate, and one that is consistent across mobile websites and Android apps. iOS essentially offers the same solution, but in the form of an overflow tab icon, typically titled ‘More’. It’s more accessible, given its positioning at the foot of the screen, within reach of your hand.

But in a setting where design thinkers and creatives are devising and considering new alternatives to the most key components of design, is the hamburger menu really the optimal solution?

What the hamburger menu lacks in terms of user experience, is its requirement to be opened each and every time an item within it needs to be accessed. Where navigation drawers are included, this extends to two taps, each time a user wishes to navigate to a different screen. Some of these items can be classed as secondary, less-important items which are accessed far less often. Others, even in Google’s own apps, are most certainly primary actions.

If the hamburger menu is to disappear for good, a suitable and improved solution has to be presented

From Reminders in Google Keep, to Watch Later in YouTube, the hamburger menu frequently provides overlap into key navigation items. As a design component, it’s a compromise. Were each app to devise its own navigation structure based on its own unique needs, users, and layout, a more optimal solution would be reached. But in an ecosystem such as iOS or Android, consistency is crucial in providing a simple solution for developers, and ensuring users are able to understand the functionality of an app, regardless of whom it has been designed by.

If the hamburger menu is to disappear for good, a suitable and improved solution has to be presented. It has to be one which can be applied to each and every app consistently across an ecosystem, with scope for a variety of differing needs and complexities.

The first potential solution is to shift the app title leftward, opening up space for up to four icons grouped in the upper right of the title bar. This covers a majority of hamburger menu use-cases, which often only include between two and four items. For cases with more navigation items, an ellipsis overflow icon could be introduced. This moves away from the one-size-fits-all approach, instead providing a quick-access solution for all apps, while also catering for those more complex cases with greater than four items.

The other solution is to introduce redesigned icon tab bars. Where Material Guidelines currently encourage designers to use text label tabs, these could easily be switched to icons. This would open up enough space to remove the secondary navigation menu for most apps, and encourage designers and developers to simplify the number of primary screens in their app. Similarly, with increasing iOS real estate and a rethink of spacing practices inside the tab bar, apps could fit more items while including any secondary items within each as secondary tabs.

In both cases, it does away with the carelessness of the hamburger menu. Instead, designers and developers would be forced to condense the number of navigation items into more structured and understandable tabs.

It’s all too easy to push items into this obscured menu, at the expense of the end user. It’s often unnecessary, and the icon wastes a large portion of the title bar in Android apps.

Over time, systems like Material Design are likely to devise simpler solutions to move past the hamburger menu. It is at that point where users will be presented with easier-to-use mobile products with simpler, more accessible navigational structures.

Mega Autumn Design Bundle with 700+ Elements – only $9!

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;}

February 04 2018


Popular Design News of the Week: January 29, 2018 – February 4, 2018

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.

Site Design: Mercedes A-Class


Want to Learn CSS Flexbox? Learn How to Take Command of Flexbox


Mobile Navigation – Why We Abandoned the Hamburger Menu


Please Stop Using Local Storage


Design Collaboration Tools for Web Design


6 Reasons Why You Should Be Using SVG


A Gallery of CSS Text Effects


Confessions of a UX Designer


How to Use Variable Fonts in the Real World


Type Everything


Left – A Minimalist Multi-platform Text Editor


UX Design Glossary


Great UX is a Balancing Act


Typography in Mobile Design


What Makes a Really Good Email?


Color Hunt: Behind the Scenes


Up or Nah – Check if a Website is Offline for Everyone, or Just You


Sketching in the Browser


Learn UI Design in 15 Steps


The 18 Best Wireframe Tools


Hyperloop Interface. Around the World in a Minute


Bulma: A CSS Framework to Consider


3 Reasons Why Every Startup Needs a Blog


Clean Email – Clean your Inbox of Emails You Don’t Need


20 Highly Effective Ways to Promote a Product


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

Mega Autumn Design Bundle with 700+ Elements – only $9!

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;}

February 03 2018


Comics of the Week #426

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…

Popular cat


Website on steroids


Open tabs

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

Mega Autumn Design Bundle with 700+ Elements – only $9!

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;}

February 02 2018


7 Places to Find Micro-Gigs for Designers

As a freelancer, there are times when you need to fill the gap between clients, or up your income a bit by completing micro-gigs. Micro-gigs can be ideal freelance projects because they typically don’t take much time. It’s also relatively easy to impress the client, and you may even wind up developing a long-term relationship with them. At the very least, you’re sure to learn some new skills.

Micro-gigs also work well for parents who are trying to do a bit of design work on the side while staying home with kids. These short projects are very doable, and you can take on as many or as few as you’d like between other tasks.

Micro-gigs can also be a good way for a designer to dip his or her toes into freelance design work to see if the freelance world is something they want to take on.

There are many ways to find micro-gigs for design work. You can, of course, seek out your own clients and let them know what types of gigs you are available for. You also can use various websites to find micro-gigs. Here are seven to get you started:

1. Upwork

Upwork started out as Elance-oDesk and is a platform that connects businesses with freelance designers and professionals around the globe. There are about 12 million registered users and about 5 million registered clients. On average the site posts out 3 million jobs per year, but the pay, and the scope of those tasks, can vary widely.

One of the advantages of Upwork is that you can bid on gigs only when you want extra work. Adding a profile allows businesses to see at a glance just how well suited you are for work with them.

2. Gigbucks

This is another micro-gig site that offers jobs from $5 to $50 per gig. It’s set up similar to Fiverr in that the freelancer lists the services they are willing to provide and the cost of those services. Individuals can then hire the freelancer. If you are looking for a one-off gig, then this type of setup is not exactly conducive to that, but if you are looking for ongoing filler work, then this is the perfect platform for you.

Gigbucks works well to find new customers and clients who otherwise might not know what services you offer.

3. Fourerr

Fourerr is set up for buying and selling micro-jobs, but they also try to connect businesses with professionals so you can find a long-term position if you want. One thing that’s kind of unique about this particular micro-jobs site is that you earn rewards when you buy, sell or connect with others, turning the entire process into a fun game with badges and rewards.

Fourerr works both as a micro-gig finder and entertainment. If you’re looking for gigs with a hip vibe, then this is a great place to start.

4. Taskr.in

Taskr.in is another micro-gig site that works well for freelance designers. Some of the tasks you can complete on this site include banner design, image editing and web design. There are other business services as well, of course, but these are some of the specific design-related tasks available.

The site is the best of the various platforms in that freelancers can both create tasks to offer businesses to, or they can bid on existing jobs.

5. Zeerk

Zeerk is set up more like a classified ad site but also allows freelancers to offer tasks for a set amount. In addition, businesses can list what they are looking for, and freelancers can shoot off a custom quote for the gig. One of the keys with this type of site is to make sure your profile shows off what you’re capable of and then to gather some positive reviews by keeping your clients happy.

One of the benefits of Zeerk is that you can connect with businesses looking for specific skills and send them a quote based on a fair market price.

6. Damongo

Damongo offers numerous micro-jobs, including work for freelance designers. If you are in a financial pinch, or your design business is having serious cash flow issues, you might enjoy a site that offers all different types of tasks for pay, though, so that you aren’t limited in what you can do to earn money. On this site, you set the price for the job you’re willing to complete.

One way you can use Damongo effectively is to figure out what others are not yet offering and how you can offer that service to businesses. Where can you fill the gap?

7. Gigblasters

On Gigblasters, you can sell products and services for between $5 and $500, depending on where you want to set your price point. Like many of the other micro-gig sites, they have various categories including a graphics section that designers will find interesting. The gigs that pop up on that page include product label design, logo creation and business card design.


If you’re looking for fresh clientele, then getting your services listed on new sites is a smart choice. You can pick up work here and there on each site, but overall you’ll have a steady amount of micro-gigs coming in from your various sources.

These are eight of the micro-gig sites out there that work particularly well for designers. Of course, you’ll also want to keep an eye on Craigslist and job search websites for more short-term gigs.

LAST DAY: Bundle of 625+ Beautiful High-Quality Design Elements and Fonts – only $21!

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;}

February 01 2018


How Gamification Improves UX

Creating products which respond to the user’s needs has become the de-facto standard approach for product design. In the attempt to create the best possible experience designers constantly search for new techniques that allow them to create better user experiences. One of the methods that recently became popular among many product designers is called gamification.

In this article, I’ll share a few tips on how this technique can be applied to web design.

What is Gamification?

When we hear a word “gamification” one of the first things that comes to our mind is game design. While gamification and game design have a few similarities, they aren’t directly related terms. Gamification is design technique that is based on employing game mechanics in a non-game context to enhance user flow and engagement. Done right, gamification can improve engagement and increase conversion.

How Does the UX Improve When Game Elements Are Involved

We often associate “gamification” with PBL (points, badges, and leaderboards). It’s relatively easy to assume that it’s possible to make user experience more exciting just by adding some sort of bonus points into it. But it’s a wrong assumption. Gamification isn’t about points; it’s about motivation. If people are motivated to do something, they’ll do more of it. People play games not because of points, but because they think that this experience is exciting and challenging.

Gamification In Web Design

Gamification can be used to create a path for your visitors—using this technique it’s possible to give your users clear goals and objectives while showing them where they’re headed. Website’s visitor will feel like the real player starting the personal journey of the product usage: an interaction will be a story where a visitor (“hero”) overcome obstacles (“challenges”) and expect to reach the goal (“receive a reward”). This will make the process of interaction with a website much more predictable.

Challenge and Reward

People love challenges. Challenges make us focus our efforts on results and prove that we can handle any problem we face. Remember the last time you bought something from IKEA, brought it home and spent a few hours assembling it. That’s a lot of fun of doing this.  

Human nature always makes us take the challenges and prove that we can handle them.

Similar to this offline experience, a challenge in user flow can be a compelling game element that motivates people to take action. This technique can be used to encourage users to go through tasks that otherwise may seem boring (e.g., completing a user profile).

The percentage at the top left of PayPal’s account page continuously motivates users to add more details to their profiles

You can enhance an effect from a challenge by adding some kind of reward. When completing tasks on a site becomes rewarding users will be more motivated to face a challenge.

Producthunt asks users to complete a few tasks in exchange for being able to join in on the discussion.

Group Quest

Group quest is a technique similar to the multiplayer experience in video games. To win the game, all players should participate in it as a team. This experience unites people and makes them feel bigger than they really are.

Kickstarter is a great example that utilizes a lot of game design techniques. A countdown timer which creates a sense of urgency paired with last mile drive motivates visitors to act. But what’s most important, is that visitors can accomplish the crowdfunding quest only when an entire team act.

Kickstarter utilizes gamification for crowdfunding.

Step-by-Step Learning

Step-by-step learning is a technique that helps you educate users on how to use your web service. All education program is divided into the number of steps (e.g. levels), and each next step becomes available only after users have completed the previous step.

This technique works perfectly for onboarding process. This game mechanic aims to make the process of first-time interaction with a product as easy and understandable as possible. When ProdPad thought about how to improve onboarding process, they come to the idea of gamified onboarding. ProdPad turned their onboarding experience into a journey; the user is getting an extension on the trial period each time they completed a task for onboarding (such as entering a product name or setting up specific information). In this way, ProdPad was able to efficiently get their users to explore all the features of their product and turn them into power users.

When it’s possible to visualize the entire journey, it becomes more understandable for users. They’ll be able to evaluate their effort and plan their time.

Social Influence

People are social creatures. What we do usually base on what other people think. This natural psychological property can be used in web experience.

Opower is a company that tries to help people lower their electricity bills. They found a great way to change people’s behavior—instead of showing abstract numbers, the company shows the best neighbor and the average neighbor. When people see such information they immediately think that they should be at least above the average.

Opower has encouraged millions of homes to reduce their energy use by using social comparison

Development and Accomplishment

This technique is based on the fact that users motivated when they feel that they are developing. This motivates users to level up, achieve mastery in some discipline.

One good example is Duolingo which gamified the learning process for their users and turned it into a fun, entertaining experience. Each lesson is presented as a challenge for a user. When users accomplish the task, Duolingo celebrates progress with users by rewarding them with a badge.  


Of course, user experience at its core is about usability and simplicity, but there’s one ingredient that has a significant impact on user experience—delight.

The user experience doesn’t have to be entirely about ease-of-use, it should be also enjoyable. Using gamification in design it’s possible to make interaction with a product more fun and delightful. Properly incorporated gamification can significantly increase engagement and conversion.

LAST DAY: 1500+ Design Elements in 1 Huge Graphic Pack – only $8!

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;}

January 31 2018


The Secret to Site Traffic, and 7 Ways to Make it Happen

Whenever someone asks, “How can I increase traffic to my website?” the answer is invariably, “Regularly post new content.” You could be alone in the forest where the proverbial tree fell when you ask this question, and you’d probably get the same answer from a passing bear. The bear might even offer you a course on making website content for only $49.95 USD, involving three easy web seminars.

People keep saying that your company blog needs to be more than press releases, and they’re right. They’re often kind of short on details, though. So, here, with no need for seminars or payment from you, I’m here to let you in on the super secret recipe for blogging success that I mostly learned by reading other blogs. Oh, and there was some personal experience, I guess.

No, but seriously, some of these tips for maintaining a stream of regular content have worked quite well for me. Other ideas on this list worked really well for other people. If you’re just starting to put together a blog for your company, there’s a lot here that you’ll probably find useful.

1. Keep Notes

New writers and creators might have lots of ideas of things they’d like to try. and that’s great! Start with that. But once that initial pool of ideas is exhausted, you will most likely find that coming up with new ideas is one of the harder bits of being creative.

Now some people like me can only come up with new ideas when we sit down and force ourselves into a certain idea-finding mindset. Others, however, come up with ideas all the time, and then forget them. Don’t let that happen to you. Grab a note-taking app on your phone, for example, and write that stuff down! Keep all of your content ideas in one place, so you can pick and choose from them when it’s time to sit down and work.

2. Look for Contributors

This option requires a bit of a budget, if you want to do it right. But, if your company is large enough, you might consider investing in hiring a writer/creator part-time, or on a freelance basis.

This is not as easy as it sounds, though. You want a writer who knows at least enough about your field or industry that they don’t sound like complete amateurs. You want a contributor who can meet deadlines. You want one that can take suggestions. And ideally, you want one that has their own voice, a distinct style to create a personal connection with your readers/listeners/viewers that they’ll keep coming back for. And then you want one that’s within your price range.

As they say: cheap, fast, and good. Pick two.

3. Start a Series

One of the easiest ways to keep regular content going is to start a series. I don’t mean a series of articles that has two-to-five articles and that’s it. Those can provide some content, but they have an ending point by nature. I’m talking about a series that can be continued nearly ad-infinitum if you make a new installment every week, every two weeks, or every month.

Easy ideas for this kind of content include:

  • Reviews
  • State of the industry articles
  • Interviews
  • Compilations of resources (ie the 25 best tools for X)

4. Start a Podcast

Don’t let anybody tell you that you have to spend a ton of money to start a podcast. There are some decent ones out there that have been recorded (and even filmed) on higher-end mobile phones. Just grab some friends and colleagues in your field, sit down, and talk about your industry.

It helps to have a short outline of topics you’d like to discuss, but otherwise, keep it fairly casual, and don’t make it too long. Then just put up an episode on your blog regularly. Once a month is fine to start with, if you’re quite busy.

If the podcast in particular really takes off, then you might consider investing more in equipment.

5. Contribute to the Conversation

In every industry, the people who blog about it tend to follow some trends. Whenever a big story comes up, read what others have to say on it, and write a response. Well, you could try to be first to get your opinion out there, but that’s a rough game that would require some sleepless nights.

Responses can take a few forms. You can politely point out things you disagree with other people on to provide a different perspective. You can respond to people you agree with, but try to build on the points they made, and look for things they might have missed. Lastly, you can just point your own readers to content that you can’t find any fault with. Yes, that’s an option.

6. Editorial Calendar

Put together an editorial calendar. It’s like an outline for your blog, but you put in a calendar format. Simply put, an editorial calendar does for your blogging what any calendar does for the rest of your life. Once you have your regular posts and already-written posts on the calendar, you can immediately see where you might be missing anything.

You can make one with a tool as simple as Google Calendar, and keep it synced with everyone who contributes to your company blog. If you use a CMS like WordPress, there are plugins like the appropriately-named Editorial Calendar to give you an easy calendar overview of posts that are actually in your CMS. From there, you can move posts around as you see fit.

7. Build Your Writing Confidence

One of the things that was most difficult for me as I started writing was the simple yet panic-inducing fear of failure. Nothing kills a writing/creative habit like just being sure that you’re is going to suck anyway, so why try?

Practice is one of the more obvious answers to this conundrum, and it’s absolutely essential. However, you can get some confidence by just preparing yourself correctly. Prepare yourself by reading, a lot. I’ve mentioned CopyBlogger maybe a thousand times, and I’ll reference a thousand times more. They offer good writing advice.

Prepare to write by making sure you have a solid outline that covers everything you want to mention. Get some good music going, or find a quiet place to work. Just make sure you’re calm and feeling good. It makes it a lot easier to just focus on making something that will keep your users coming back.

LAST DAY: 1500+ Design Elements in 1 Huge Graphic Pack – only $8!

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;}

January 30 2018

How Dark UX Patterns Target The Most Vulnerable

January 29 2018


The Art of Building Better Websites

Inspired Magazine
Inspired Magazine - creativity & inspiration daily

Creating websites has become almost a commonplace skill these days, and there’s such an overabundance of sites out there competing against yours that anything you can do to stand out from the crowd is going to be a huge help.

What can we do to get our sites noticed, admired, and paid attention to? It requires a certain adjustment of the way we think about site design. In this short article, we’ll take a look at some of the key things that are necessary to creating better websites.

Content must take priority

As designers we’re always going to be really keen to create amazing designs. Of course this doesn’t apply to those who merely call themselves designers, because they do not allow their very souls to weep onto the page, enshrining a moment of inspiration eternally in electronic glory.

What site owners want, of course, is for people to read their content, engage with it, and perhaps even buy something because of it. Pretty pictures are wonderful to have, but not if they’re getting in the way of the user being able to experience the content.

As this is the case, what we might regard as “stylistic enhancements” must certainly take a backseat to the main presentation. If you need to drop something, it should always be the stylistic element.

image courtesy of 

Responsive design is essential (except when it’s not)

Responsive design is so important these days because of the massive numbers of people using their phones for web browsing, and the fact that most phone browsers still do a lousy job of rendering web pages.

There are a few notable exceptions, but they are very rare. Such exceptions would be when something needs to be displayed on the page in order for the content to make sense, and where it needs to be of a set size. Some things simply wouldn’t work if scaled down too much.

Cases like this need to be handled carefully. How you would do it is to use a special responsive column that is displayed only when a screen size is detected which is too small to display the content, with a message instructing the user to view the content on a larger monitor.

This will generally be something you should avoid doing, but in exceptional circumstances it is acceptable as long as it is handled with tact.

illustration courtesy of 

Important content needs to be obvious

While it should be obvious, so frequently it doesn’t seem to be. Design should not make important things subtle. It must make what is important stand out and be seen by the viewer first, and yet so many designers try to be “creative” and subdue those important items.

Do not make this mistake. Users may not stay on the site for long, so getting the brand in front of their eyes is crucial. Even if they leave quickly, you’ve at least made an impression. Later when they encounter the brand, they’ll recognize it as familiar, and will be more likely to purchase from a familiar (i.e. “trusted”) brand.

What happens is a kind of cognitive self-trickery, where the conscious mind says “If I have heard of this, it must be good.” This is why companies are willing to spend millions of dollars just to get their logo on a sign at a sports event.

What else is important though? Well, the answer to that question depends on the kind of site you’re building. What you need to do is think about what you would be looking for if you were to visit this site. It’s usually very different to what a corporate honcho will say they want to show. The things people are going to be looking for are the important things to include and feature prominently.

Stylistic elements should blend in easily

Your design embellishments should make the viewer astonished in a good way. They should bring delight rather than annoyance. Quite often designers get carried away and add things to a page to generate the “wow factor” without making sure these things don’t have the potential to be annoying.

You also need to make sure that such embellishments degrade gracefully. When they can’t be displayed properly, they shouldn’t be displayed at all, and it should appear as though they never had been there.

gif courtesy of 

Layers to the rescue

You can add these embellishments through the use of layers. People creating responsive designs seem to have forgotten they have a 3D stack to work with, and as a result they’re missing the true potential of responsive design.

An example of how this works… Imagine you have a site where you have a layout with multiple breakpoints. The conventional way of thinking would have you putting everything on one layer, which will lead to crowding on smaller displays, forcing you to drop things, or (as is usually the case), exhibit a hideous design.

Those last two words should never go together when you’re talking about something you created. The good thing is that you actually can avoid the situation through the use of layers.

By stacking stylistic elements on a separate layer, you can hide or show them at your leisure, independently of the content layer, and both layers are fully responsive.

Suppose the user is viewing the site on a monitor with a resolution of 2560 x 1440. Our lower content layer spans the full width of the screen, but we can set margins on it that would place the content inside a decorative border that could be any size we want.

Placing that decorative border on the upper layer without margins, we can just set the width to be equal to the size of the margins on the lower layer.

As the user steps down through different screen breakpoints, the two layers can continue to work together like this, and the upper layer can even display entirely different borders for each breakpoint. Until on the final breakpoint we dismiss the upper layer entirely, just by setting it to be hidden.

The potential here is obvious. Do you have a large number of annoying link ads in the right column? You can hide them from users with small screens, and furthermore you can add them back on demand using jQuery.

Finally a way to properly separate content from design

This is the way web pages are supposed to work. By storing your “extras” on a completely separate layer, you get even greater separation of content from design, because that upper layer can be messed around with at any time without affecting the lower layer, and vice-versa.

Have fun experimenting with the freedom this opens up to you, so you can play around with all kinds of creative ideas while the content itself remains unaffected.

It is exactly the same concept as using virtual machines for sandboxing. No matter what you do, you can’t affect the page content because it is isolated from the decorative layer.

header image courtesy of Matt Carlson

This post The Art of Building Better Websites was written by Inspired Mag Team and first appearedon Inspired Magazine.


3 Essential Design Trends, February 2018

Sometimes design trends are tough to see, even when you are looking for them. This month is no exception with trends that include use of circles in design, split screen layouts, and dark backgrounds with light text.

These elements might seem like common design tools but when used in similar ways across the board, distinct trends start to emerge.

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

1. Circles

The implied meanings and associations of circles in design can have a lot to do with their usage. Circles imply a sense of completeness and harmony. They are used to represent love, energy and power. (It’s somewhat surprising that more designers don’t use circles regularly.)

While the most common uses of circles recently has been in the form of buttons or calls to action thanks to Google’s Material Design, circles are taking on stronger design roles.

The thing that can be difficult about circles is the canvas and shape of websites—either distinctly horizontal (desktop screens) or vertical (mobile screens). So the design has to use circles in space so that the shape doesn’t get lost in the responsive format. Each of the examples below do a good job or maintaining the circular flow without losing the shape as the canvas shifts.

KymberleeJay uses a big pink circle to bring attention to the main copy on the screen. The eye moves directly from the woman’s face to the strong round shape.

Buddha Pizza implies a circle with text and ingredients surrounding a slice. Part of what makes the circle appear is the idea that a pizza is often round. Even with the triangular image in the middle of the screen, the circle is obvious.

Hotel Poispois uses floating circles to create visual interest, but they also serve as giant buttons that take users to different parts of the website.

2. Split Screens

Split screen designs are one of those trends that grows in popularity and then disappears, but it always seems to circle back. The latest iteration of the trend includes both super bold split screens and more subtle pairings.

The great thing about split screen designs is that they work with the responsive format beautifully. You get double content on desktop and stacked content on mobile screens. Regardless of device, the user doesn’t feel like he or she missed out on anything by changing device type.

Split screen design also provides a solution for having dual pieces of content with almost equal importance. You can showcase multiple elements and offer two distinct courses of action (and associated calls to action) on the screen at one time.

This concept puts users in control of the design, allowing them to feel like there is a choice in how to interact with the content.

Taco Bill’s website is a prime example of this. The design immediately poses a question to users: Do you want to order food to go or do you want a reservation to eat in. The split screen design does more than just make the design easier to use, it actually shows users that they have multiple options visually.

Nikos Pandazaras takes another approach with the photography portfolio website design. The site showcases two vertical photos side by side with the navigation in the middle. It’s a different approach for a portfolio style design but effective in that users get to see more images immediately. The split screen style implies that both images carry equal weight and one is no more important than the other.

D’Aucy uses a more subtle split screen aesthetic. One side includes an image on a textured background paired with the same color background without any texture and a headline. The design is a good way to help draw the eye across the screen so that all the content is viewed.

3. Dark Backgrounds, White Text

Dark backgrounds and white text are a classic combination. But this trend is emerging with a twist—there’s video or animation in the dark background.

Whether the movement is subtle, such as Top Estates, or fast and furious, such as Bullying and Behavior, the action in the background is what helps draw users even. The lack of color adds an element of mystery and makes the scene a little more enticing.

White type adds to the starkness of the design. While it is easy to read—that’s a good thing—the text isn’t overwhelming the design. These projects are a bit more stark by nature. The driving visual element is movement in the dark space of the background. All of the designs below feature looping animations that help create a feel for the projects.

The darker the background with these designs, the more mystery they create. Darker backgrounds also increase readability because of the amount of contrast with white text. The speed of animations can create a sense of calm or frenzy.

It’s pretty spectacular how much information can come from what at first glance looks like such simple designs.


The nice thing about this collection of trends is that they are all things you can implement in almost any design project. Use of circles, split screens and dark backgrounds aren’t limited to a certain style of design. You can use these ideas to freshen us a site that’s feeling a little stale or incorporate them into a new project.

As with any trend, think about the content and context before you get started. Does the visual plan help you achieve your overall goal with the design?

Fontfabric Font Bundle of 90+ Fonts – only $29!

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;}

January 28 2018


Popular Design News of the Week: January 22, 2018 – January 28, 2018

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.

Facebook Just Invented a New Unit of Time


UI Design Inspiration – Jan 2018


Finding Dead CSS


Web Typography Quiz by Better Web Type


Gradient Topography Animation


35+ Best Free Script Fonts for Designers


Instagram’s Latest ‘Feature’ Proves it’s not Listening


Year in Pixels


Bolt ECommerce


Lean UX Principles to Keep your Users Happy


Nerv – A Blazing Fast React Alternative


Drag and Drop for Design Systems


22 Awesome Websites with Stunning Free Stock Images


Eight Microinteractions to Help Improve UX


How a Single Line of Computer Code Put Thousands of Innocent Turks in Jail


Iris – Protect your Eyes from your Computer’s LCD


This is the World’s First Graphical AI Interface


Stripe: Ending Bitcoin Support


10 Best Free Monospaced Fonts for Code Snippets


Secret Heroes of UX Design


The Art of Storyboarding


Build a Better Homepage


How I Got Hired by GitHub


Stop Asking if Users Want Notifications from your Site


The Language of UX


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

Fontfabric Font Bundle of 90+ Fonts – only $29!

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;}

January 27 2018


Comics of the Week #425

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…

Timesaving chair

Comic Sans crime


Photoshop fitness

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

Fontfabric Font Bundle of 90+ Fonts – only $29!

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;}

January 26 2018


A Constructive Guide to Up-Skilling in 2018

For years now, I’ve spent a lot of time trying to figure out the best way to go about investing in myself.

As an individual focused and working professionally in the tech industry, up-skilling is part of the territory. In fact, it’s so essential to our careers that it’s very much a “survive or die” scenario. Everyday there are new frameworks, syntax, libraries and methodologies being introduced. This very fact requires you to be disciplined, to be strategic and to manage your time responsibly.

For some reason we tend to think that the more we work ourselves into the ground the more we will absorb

In general, people tend to think in black and white rather than shades of grey. We’re not used to thinking outside the box, being smart with our time, or equating our effort with our current energy levels. For some reason we tend to think that the more we work ourselves into the ground the more we will absorb.

In order to solve the up-skilling predicament, we need, in the famous words of Steven Hawkins: “a simple, elegant equation” in order to gain control of our most important value: Consistency.

Consistency in our modern day world is on the verge of extinction. When was the last time you had 3 days in the row that were the same? When was the last time you were distracted at the same time every day? Our bodies and lives are in a constant, relentless turmoil. The mere fact of saying to yourself: “Hey, I’m going to study Javascript for an hour a day” is a bigger commitment than we realise, and we often let ourselves down due to poor planning and over /under-estimation. That golden hour is sometimes just as unreachable and overwhelming as the thought of becoming 100% proficient in Javascript (especially when you’re just starting out).

Be Protective of Your Time

This point is a difficult one, but if you can succeed with it you will be able to gain that hour a day you need. There’s a concept of time-blocking which erupted onto the internet some time ago which is very interesting.

On your calendar, you block out everything. Be it lunch, up-skilling time, going to gym etc. With so many things fighting for our attention, protecting your time is a hard discipline, however, once you get it right you’ll learn that your time is actually yours.

Take a look at my calendar:

The blue events in my calendar are time-blocked. You’ll see that I’ve left 15 minutes on either side to adjust / cope with life. We’re not robots, so we need time on either side of our activities to be human (take the remote away from your puppy, go to the toilet etc) blocks can be replaced as you can see in my social calendar, I’m going out for dinner with friends on Thursday, from 16:00 – 17:00 is my study time, and its part of my working hours. I’ve left 17H00-18H00 completely empty to allow me some space in my day to adjust to any unforeseen.

Maybe I need to finish a piece of work or do some admin, it’s time that can be interrupted that I’m not precious about. I try lead an incredibly balanced day. You may notice that I’ve blocked off time for lunch and breakfast as well. I use this time to chill out a bit, catch up on news, or whatever I feel like doing that day.

If you would like to read some further resources on this topic:

Bigger isn’t Better

Our society and culture is big on big.

Great things are done by a series of smalls things brought together.

~ Vincent Van Gogh

We let go of small. Small isn’t good enough, but small is incredibly powerful for a number of reasons. It allows us a much tighter grip on consistency. The number one key point that you could take out of this article is that smaller is almost always better and more effective in achieving larger goals.

smaller is almost always better

At work, I develop large scale websites. Over the last few months, a lot of sites have moved over to using React. There was some major upskilling required in order for me to do this. I’ve spent the last 6 months, debating about what framework I should even consider learning (Vue, React, Angular, Ember, Backbone, Preact) – the list goes on for a while…

I’m relatively well-versed in JavaScript, as I work with it a ton everyday on nearly every single project I’m tasked to. React appeared as a big mountain to me. It involved some very dedicated time to understand ES6, Object-Orientated JavaScript and above all else, the framework itself, which as much as its been labelled as one of the easier frameworks to understand, its not to be taken for granted or underestimated.

So how did I tackle it? As I’ll explain in the next section the act of learning, is not just about writing code. Reading (technical documents as well as opinion pieces) and asking questions to people who know more than me, is where the real learning happens. It’s kind of like learning to drive. When you get your license, we all know you can drive a car, but when you’re actually driving by yourself around your city, that’s when you truly learn to drive. It’s the same with technology. We need to spend a lot of time understanding, absorbing and clearing up misconceptions before we can be allowed to build by ourselves.

Some days I’d spend an hour reading Medium articles about React. That’s where you find the golden bits, you learn from people who have already made the mistakes you will probably make. Sometimes I read the documentation of React. Technically it’s great and gives you a good high level understanding of the framework. Other days I’d dive into code, get a feel for the framework, the errors I encountered, I would ask when I didn’t understand and repeated the same functionality in multiple ways until I felt like I had produced something of standard.

When did I do this? Well, I blocked my hour off in my calendar. I turned off my cellphone, closed my email, my Slack, my browser tabs, put on some classical music on Spotify with some noise cancelling headphones and got into the mode. For me, an hour was just right, it was manageable and even movable around my day and I protected it with all that I could with just one mantra: “After this hour, I want to have learnt one, constructive, useful thing, no matter how small or seemingly insignificant”. Whether that was from reading an article about React architecture or developing my own component with ES6. It didn’t matter.

Bite sized chunks is all you need.

As I build up this picture you may begin to start to understand that I’m not trying to assimilate the entire React framework in a week.

Bite sized chunks is all you need.

Learn How To Learn

“Learning” is a word that has become very meaningless of late. You can’t learn with Facebook open, or with WhatsApp pinging you about plans for the weekend. Your mind is not good at staying focused and the 21st century doesn’t help. I struggle to stay focused just as much as the next person. That being said, you can adjust your behaviour and habits to benefit your learning.

We’ve spoken about protecting your time, for an hour a day, but what about protecting your mind? You need an incognito mode for your brain sometimes.

It requires a little bit of growing up on your part. Leave your phone alone, close Facebook, this is the time you are protecting to get something worthwhile. You don’t need to be connected with everyone in your life while you do it, you just need to focus on the website, IDE or tutorial you are viewing, using or attempting. You’d be surprised and quite possibly horrified the first time you put your mind to this. You’ll start to see just how productive you are with a little self-discipline instead of procrastinating about it. The time you spent distracted trying to understand Redux may take you half the time when you’re focused on absorbing what other people are trying to get through to you.

Iterate, Iterate, Iterate

Most of our giant failures in life is due to the fact that we give up. We take on tasks that are too big to iterate on, in order to achieve some misguided sense of success. Iteration is key. Some people are naturally gifted learners, others need it drilled into them a few times before the coin drops.

If we go back to our React example, React State is really something that I’ve been trying to understand in its entirety. When you read the documentation on the React website its a seemingly simple concept to grasp. However, when you jump into the code it becomes more elusive than it originally lead on. It’s a far fetch to be able to state (no pun intended) that I would/could have fully understood State just by reading the docs. I needed to spend many hours iterating over the concept. Reading, asking, trying, reading, trying, failing, succeeding, failing some more and reading again.

Our learning behaviour patterns aren’t linear, in other words, they don’t look like this:


They look like this:


Iterating over smaller tasks becomes manageable but also rewarding as your chances of ascertaining that knowledge becomes a lot more in your favor compared to trying to understand the Go programming language in a week.

Building Our Equation

So what does our equation look like? Lets consider:

Our productivity at the end of the day is going to be a combination of how our focus compounds the small tasks that we want to perform as well as how we perform them, multiplied by our iterations. In other words, we can iterate a 100 times over, with small, achievable tasks that we can focus on and perform in the correct way. This will eventually build up to a large goal, like being proficient in React, or whatever that may be for you. By performing this process, an hour becomes incredibly useful each day. It does require some planning beforehand so make sure to factor that in.

Here’s a look at my schedule for a week in January for self-investment:

As you can see, my goal is to become more proficient at React. I’ve dedicated myself to achievable tasks that I know with my current energy levels, obedience and discipline I can achieve if I put my mind to it. The great thing about this? Not only does your mind respond so well to the way that you are approaching your up-skilling it simultaneously sustains confidence, reward and gratification. Even better, because this technique is so scalable, in 12 months you’d be incredibly surprised at how easy it becomes for you to pick up concepts and apply them. Not to mention your new found knowledge of web technologies.

Fontfabric Font Bundle of 90+ Fonts – only $29!

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;}

January 25 2018


Ultimate UX Design Guide to SaaS On-Boarding, Part 5: Data Import & Notifications

Data Import & Notifications is the 5th Part of The Ultimate UX Design Guide to SaaS Customer On-Boarding

SaaS Customer On-boarding is the process that users have to experience while initiating their journey on a company’s software application. Customer on-boarding initiates from the experience that employees previously had to undergo while joining a firm. The on-boarding process sets the tone for a good user experience.

The SaaS customer on-boarding process is based on 6 comprehensive aspects, the first four of which we’ve already covered:

  1. Sign up Form
  2. Welcome Email
  3. Drip Campaigns
  4. First Login & Product Tutorial
  5. Data Import & Notifications
  6. Check up calls & Swag

All the aspects of the process play an equally important part in forming a desirable reputation for the brand in the eyes of the customers. Today we will be focusing on Data Import & Notifications.

Data Import

Usually B2B apps would require their users to either import data or connect data sources, in order to start using an app; For example, Buffer requires its users to connect to a social media account. Importing data is one of the steps that can prove to be a significant impediment to the onboarding flow, because at this point, users will not see the product in action at all.

This is a step that is going to be boring for your user, no matter what you do

So this is a step that is going to be boring for your user, no matter what you do. This is also usually one of the points where you might lose your users. Numerous funnel analytic studies have shown that when most of the users of an app reach the part of the signup flow when they have to import data, they leave, and never come back.

What can you do in this case? You can minimise the pain.

One of the things you can try is to shorten the time it takes to do this. If that isn’t possible, try minimising user involvement during this process. If none of this is possible you can try sending support emails or in-app messages offering help to users who might be stuck.

Groove is one of the companies that has benefited a lot from using what it calls “red flag” metrics.

The company analysed the behavioural patterns of users that could be classified as most loyal and those users that left the app and were part of the churn rate for the company. There were a number of points in the use of the app, where Groove noticed that customers spent a lot of time.

So they sent messages to the users offering to help, assuming that the user was encountering difficulty over there. It turned out that they actually were encountering difficulty (response rates were quite high for those particular emails). As a result of this directed attention, Groove’s user retention ratio drastically shot up.

One of the simplest things to do is to actually entertain your users. This is something that doesn’t need a lot of investment. Consider the example of Zapier, a company that takes its customer onboarding very seriously, and aims to make the process as easy or entertaining, as possible. For example, a section from one of its FAQs, which is about importing/exporting data natively between two apps, moves on to using Google Sheets, and includes a screenshot:

These are well known characters from the Game of Thrones series. It’s a small and simple thing to do, and definitely something that would keep your users engaged.

To sum up this discussion on Data Import, keep in mind the following things:

  • Automate the process to whatever extent possible
  • Extend support via emails / in-app messages
  • Minimise user involvement
  • Entertain!


The impact of notifications on the user on-boarding process can differ from product to product. Notifications are an essential point of contact between you and your users and they have the potential to convert users who are disengaged from your app. Apart from being able to re-engage users, they can also ensure continued engagement on the part of your existing user base.

The nature of notifications can vary tremendously. Notifications could be about new features that you have upgraded your app with. They could be about overall product upgrades / overhauls. Notifications could be in the form of in-app messages in which you highlight different features of your product as users are using it. They could also serve to remind your users if they’ve left anything incomplete.

Notifications may have a lot of potential for user retention…but they are a double edged sword

Notifications may have a lot of potential for user retention, and re-engagement, but they are a double edged sword. Being too persistent with your notifications can seriously backfire on you. Your users are bombarded by notifications and ads on a daily basis and they do theirx best to avoid them. Disabling your notifications would be the least of your worries, as a consequence.

One of the things you can do is send triggered emails, based on specific milestones that your users achieve. For example, Buffer sends an email to its users if a given post reaches a specific number of views:

Another possible strategy to use with notifications is that you could keep track of features that haven’t been used by users, and based on programmed triggers, could remind them of the benefit of the feature. Remember, ultimately you are not selling a product to your users, you are selling a means by which you are enabling your users to do something really cool! So show them what the feature allows them to do.


You should not be frustrating your users into disabling notifications, and neither should you be so infrequent that the notifications have absolutely no impact on your user.


Giving the user too much information is not going to help. The idea is to get your user to re-engage with the product, which means that you should just give enough information to get them to log in to your app and try it again. For example, if you have developed a new feature, send a notification that gives a brief explanation of what it does and provide a link that will take the user to their profile page.


Your users should always have the opportunity to choose whether they want notifications or not and if they do, their frequency as well. Nothing can be as off-putting as forcing notifications upon your users.


Your users would not be pleased waking up at 3am thanks to a notification sent by you. Time sensitive notifications are rapidly gaining popularity and are something you should definitely keep in mind when designing your notifications system.

Fontfabric Font Bundle of 90+ Fonts – only $29!

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;}

January 24 2018


Adobe’s Creative Resident Program is Open for Applications

Side projects are the wellspring of many a creative career. Industry changing concepts, technology leaps, companies, entire communities, have all sprung from a simple idea developed in a designer’s spare time.

Sadly for many, being freed from the ‘tyranny’ of a client brief, also means being freed from the tyranny of a regular paycheck. Ideas that could come to fruition in months, take years to realize—or are abandoned altogether—because life gets in the way.

If you’ve got more ideas than free time, you should consider applying for Adobe’s Creative Resident Program.

Take a minute and imagine all of those side projects you’ve been writing down and dreaming about. You know, those ideas you can’t stop thinking about. With the Creative Residency Program, you can turn these endeavors into a reality with a year’s worth of focus, incredibly supported by Adobe.

~ Nic Annette Miller, 2015 Creative Resident mentor

A handful of lucky applicants will be furnished with tools (hardware and software), resources, professional advice, and most importantly cold hard cash, to enable them to focus on their creative practice for a whole year; while inspiring others in the community.

The Adobe Creative Resident Program is in its fourth year, and is open to applicants from the US, Canada, Germany, and—for the first time—the UK. (The program will expand into other territories in the coming years.)

The application process for 2018 focuses on UI, UX, print design, digital design, short-form online video, digital drawing and painting, and photography; which covers just about everything, but if you do happen to work outside of those fields, you’re still invited to apply.

One of the key factors in the selection process is your flexibility, and willingness to take on new challenges. You should see the program as an opportunity to push yourself creatively, and is certainly a platform that will benefit successful applicants.

To get your sticky fingers on all that Adobe money—and the other stuff too—submit your application before February 25th.

Fontfabric Font Bundle of 90+ Fonts – only $29!

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;}

9 Ways to Design for Human Error

The thing about human beings is that you can’t trust them with anything. Okay, maybe that’s a bit unkind. However, it’s a simple truth that even the most caring, careful, and diligent of us are going to make mistakes. The rest of us are going to make a lot more mistakes.

Those mistakes, in relation to web design, could be as simple as mistyping a URL, putting the wrong information in the wrong field in a sign-up form, or as bad as accidentally sending hundreds of dollars to the wrong person via PayPal. Then there’s a situation like Hawaii; we don’t have any actual screenshots of the UI that was used to scare millions with a false missile warning, but it has been recreated by several designers—I suspect some of them were being a bit sarcastic.

So here are several basic ways to account for human error when you design your websites. I present them to you with one caveat: You can’t possibly stop everything from going wrong. If you make something idiot-proof, the Universe will make a bigger and better idiot. Good luck.

1. Clear Instructions

People often see basic instructions as a bit condescending. I mean, they already know coffee is hot, right? Why do they need it printed on the side of a cup? Because they might not have all of the information: the coffee in the famous McDonald’s case was served at 180 to 190 degrees Fahrenheit, or around 82 to 87 degrees Celsius. That might have been useful information for customers, don’t you think?

It’s human to assume you know everything you need to know

It’s human to assume you know everything you need to know for a simple-seeming task. This causes errors. I find myself thinking we might need to put instructions on any task more complex than a contact form. And even then, it helps to have hints.

2. Clear Warnings

People sometimes need to have consequences of possible actions explained to them. In detail. This won’t stop the sorts of people who constantly ignore clear warnings, but there’s not much you can do for them in any case.

On the other hand, there are people who, when faced with any warning or dialogue box they don’t fully understand, will simply leave your site, or call in a more tech-savvy relative for help. You’ll have to decide whether you would rather deal with potential inaction from some customers, or more errors. Both approaches have their pros and cons.

3. White Space

Mis-clicks are a thing. Mis-taps are perhaps even more of a thing, depending on the manual dexterity of the user, and the accuracy of the touch-screen. The aforementioned Hawaii debacle was reportedly caused by a mis-click in a dropdown menu.

Even on my large mechanical keyboard, I occasionally “fat-finger” the wrong keys, leading to embarrassing typos, and virtual grenades going where they shouldn’t in video games. Like I said, you can’t prevent every error, but you can make them a lot less likely.

4. Confirmation Dialogs

a quick “Are you sure you want to do that?” message can be invaluable.

To someone who has to repeat the same process over and over (example: anyone in data entry), a confirmation dialog seems like an irritating and useless extra step. And for them maybe those dialogs can, and should, be disabled.

But for anyone completing a new task for the first time, or even for the tenth, having a quick “Are you sure you want to do that?” message can be invaluable.

5. Form Validation

Now this is one that most people are getting right these days. Form validation, while imperfect, is a powerful thing, and a great way to gently guide the user in the right direction. While proper form design can help keep users from simply putting the wrong text in the wrong form, form validation is great for double-checking information, and catching typos and forgotten fields.

I would just point out that client-side validation (while helpful) is not enough. JavaScript breaks. If you’re going to implement client-side validation, it would be good to have some on the server-side too, just to be safe.

6. Labels

Ah labels. Now this one might sound really obvious, but I’ve seen so many vaguely-labelled forms on the Internet, that I had to include it. Worse are the forms that use industry jargon on a client-facing website. And don’t even get me started on the forms where the labels and inputs were misaligned. That’s just wrong.

7. Use Both Color and Contrast

People often use color so simplistically: green = good, red = bad. That’s a start, and it certainly helps a lot of people. It doesn’t necessarily help the color-blind, or people with other visual impairments. Find another way to add contrast to your elements, so they’re clearly and easily distinguished from each other. Pay special attention to this if two options use similar text, but do radically different things.

8. Make Changes Carefully

People tend to operate on autopilot when performing familiar tasks. That’s useful enough, as it makes them more efficient. Unfortunately, that propensity for routine leads to mistakes when things change. There are whole memes about remembering to write down the date correctly after the new year, and they show up every year on the dot.

People tend to operate on autopilot when performing familiar tasks

Now, sometimes your UI does need a full redesign. If so, that’s fine. Otherwise, don’t make changes too quickly. Leave people’s menu entries in familiar places. And always, always highlight small changes in the UI, so people will see them, and begin to form new routines.

9. Undo Buttons Where Possible

Well, “CTRL-Z” works just fine in regular forms, so you usually don’t need to implement this yourself. But if you’re building a web app, you might seriously consider implementing some sort of “Undo” function for just about every action with permanent consequences.

Gmail actually gives you a few seconds (if you enable the feature) to undo sending an email—and to think we’ve been living in a world where you can undo sent emails for a few years, now—it blows the mind.

Now if only we had an undo button for unintentional missile alerts…

Fontfabric Font Bundle of 90+ Fonts – only $29!

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;}

January 23 2018


5 Website Metrics You Can’t Ignore (and How to Design for Them)

Analytics are all the rage. But all those numbers can get overwhelming fast.

Here are five website metrics that you can’t ignore—traffic sources, keywords, visitors, top 10 pages, exit pages—and design tweaks you can make so that you’ll see improvement in those areas. (You can find all of these metrics and more in Google Analytics. If you aren’t tracking analytics on your website, you need to start right now.)

1. Traffic Sources

Do you know where website visitors come from? That’s what the traffic sources metric tells you.

Traffic is grouped into three buckets:

Referral: Visitors that get to your website from a link on another website

Search: Visitors that get to your website from entering keywords in a search engine and clicking those results; search traffic is further divided into organic search and paid search (if you run search engine ads and users click those rather than unpaid search listings)

Direct: Visitors that get to your website by typing in a URL

Most websites benefit from having traffic that comes from all three sources, but many websites only have organic search traffic and don’t necessarily have a budget for paid search.

Design For It

Knowing where users come from can help you create a design that will engage them more. Breaking down traffic sources might also help you understand how to design for segments that you aren’t reaching.

Design for referral traffic by creating content that other sources want to link to. This might include blog posts, UI kit or graphic element kits, or infographics that other sites can embed and link back to.

Design for search traffic by using search engine optimization best practices, such as proper keywording in content and alt and meta attributes. Designing for search might not be the sexiest part of your job, but it can be one of the most valuable.

Design for referral traffic by using URLs that are easy to remember. This website is a great example of how to use a URL: The site name, Webdesigner Depot, and URL, webdesignerdepot.com, match. It’s easy to think about any type in. URLs that are a single string of words are easiest to remember. When users have to question whether there are dots or dashes or underscores between words, they get confused.

Here’s another design trick: Incorporate search prominently in the design. Repeat users will know they can get to whatever they need from your homepage with ease. That can help increase direct traffic and time on site in one step!

2. Keywords

What is your website about? Keywords are the answer to that question.

There can be confusion between what you think a website is about, and what users think. Keyword metrics, as well as internal search, will tell you what keywords users associate with your website and content. It can give you an idea of what users are looking for when they found your website. In an ideal world, you and users have the same idea as to what the design is about.

Do the keywords match? Are you getting valuable traffic from users who really are looking for the type of information on your website? 

Design For It

Most designers think the solution is to stuff the design full of keywords. While you should use keywords, stuffing the design is not the answer.

You really just need to create a solid visual plan that relates to a topic. Use quality images (and use slugs and tags to describe what’s in the image) and copy to draw users. Then focus on things that you probably already know you should be doing:

  • Use a responsive design; avoid multiple websites for the same content
  • Write the text in the way people speak and read, and make sure it doesn’t contain spelling or grammar errors
  • Make everything on your website easy to share to help build social credibility
  • Link to sources that have content – and keywords – similar to yours
  • Promote content and information or products users want; don’t get stuck trying to use the same keywords over and over again because you will start to sound like a robot

3. Visitors

There are two types of website visitors: Those who are coming to your website for the first time, and those that are coming back for a repeat visit.

A mix of both types of visitors is important. If all you ever have are new visitors, then the website was not engaging enough to bring them back again. If all you ever have are returning users, you aren’t growing a potential user/customer/fan base.

Design For It

To give both types of visitors what they need, the website design has to do a couple of things.

It has to have a strong visual that draws visitors in from the start, but it also needs to be dynamic so that repeat visitors will still be engaged. Interesting photos or video can be a great place to start.

It should immediately give visitors an idea what the website is about and how to find what they are looking for. Use a large headline, branding mark or logo and navigation elements to establish a sense of purpose.

There should be something for users to do so you can create a lasting connection—click a link, watch a video, play a game, register for an event or promotion. The call to action should be obvious. Don’t be afraid to tell visitors what to do and how to best interact with the design, particularly if it is a little complicated or unconventional.

4. Top 10 Pages

One of the most interesting website metrics can be a list of what pages visitors are most engaged with. Websites with robust blogs can use this information to help track what types of posts to create in the future based on popular topics, ecommerce sites can see if page traffic and interest translates to sales (and what products are most popular online) and top page rankings can help you determine traffic flow and if users are finding what they are looking for.

Many website owners are often surprised by which pages are the most popular. Top 10 pages often include About or Contact pages (users want to know who you are or get help with something), blog or news posts (maybe you’ve been lucky enough to have something go viral), data and information about your field or business and the homepage.

The pages that users are clicking may also help you determine if your goals are in-line with the goals of users. Are they viewing content that’s important to you?

Design For It

Include links and calls to action to the most-visited pages from the homepage and other pages. This is in-demand content; you should make it as easy as possible for more users to find it.

Get users to your top 10 pages even easier by including links as part of a slider or hero image. Create a visual presence for these links.

Include popular pages in the main navigation or share them on social media. Link from top pages to other top pages to encourage users to keep clicking. A sidebar element of the “Most Clicked Pages” or “Top Stories” can be an easy way to facilitate this.

5. Exit Pages

Just as important as how a user gets to your website is how they leave it.

Exit pages (rates) show the percentage of visitors that left your website from a particular page. It’s different than a bounce rate in that it tracks visitors who clicked around to multiple pages (bounce rates are a single page metric).

If a certain page has a high exit rate, it could be an indication of a problem with the user interface, such as an error or broken path. On the other hand, some pages should always have high exit rates, such as the checkout/order processed page on an ecommerce site that shows an order is completed.

If exit page rates aren’t in line with expectations, a redesign of the page is probably in order.

Design For It

The key design element on pages with high exit rates (when they shouldn’t be) is to give users something else to do. Link to interesting or related content on another page. And make sure that there aren’t broken CTAs in the design (that’s often the case with unexplained high exit rates).

If pages that should have low exit rates are high, why is that? Let’s go back to the design of the ecommerce completion page, do you have a loop link included by design that keeps users on your site, or are they failing to get to the final step in the process (look for UI errors).

Remember, exits are not good or bad. Every user will leave at some point. The key thing to think about with exit pages and the design, is unexpected exits. As long as users are leaving in the natural places, the design is in working order. If the exits are less natural—such as leaving in the middle of a process—there’s probably a lurking error or design issue.

Fontfabric Font Bundle of 90+ Fonts – only $29!

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!