Readdress Success

I am a failure.

My side projects have not made me millions. I’ve not been featured on the App Store. I have not won Site Of The Day on Awwwards, I’ve not even had an Honourable Mention. I’m now over the hill and into my 30’s. My best is past me. I’ve failed at life.

Or at least that’s how it can feel. Every day you can read articles about 20 somethings “disrupting industries” and making millions or people hitting the big time with a lucky strike. I want to be successful and what that success is has been drilled into me by countless “inspirational” stories I’ve read. I’ve lived by the “Dream Big” mentality and it hasn’t helped me. With definitions of success as grandiose as these it’s no wonder that all of my ideas and side projects have been dead before I’ve even started building them.

I’ve Lived by the “Dream Big” Mentality and it Hasn’t Helped Me

For years I’ve planned out the game that changes the game industry; the app that changes the way you live your life; and the website that will change the world. These ideas sat and gathered dust whilst I waited for all of the correct pieces to fall into place. Where the pieces were falling from I couldn’t tell you. God maybe? The stars? Maybe the designs for one of my apps are sitting on a USB drive on the International Space Station. One day, one of the astronauts will be looking down kindly on me and they will eject the USB Drive which will somehow survive the journey back down to earth and land flat in my palm. Or maybe not.

I couldn’t start these projects as they were doomed to fail the exacting standards I’d set myself. For the ones that did manage to fight for themselves and get started an abrupt end was in store for them. My ideas crumbled under the weight of my aspirations. Finishing these projects would just confirm to me that they had failed; that my ideas were never as good as I thought; and that I was never going to be the success I hoped to be. So these half made things, full of promise got pushed aside and they too gathered dust.

My Ideas Crumbled Under the Weight of my Aspirations

Earlier this year I started working on a new idea for an app. A weather app for cyclists who commute to work, a narrow market but I knew I would definitely find it useful. I’d recently picked up Ionic, which gave me a rapid way of building and releasing iOS and Android applications using web technologies (if you’re a web developer and haven’t looked at Ionic I thoroughly recommend playing about with it). Using Ionic to solve a problem I was having felt like a great opportunity for me to learn some new skills. I didn’t worry too much about process (I spend a lot of time worrying about process in my day job), and I had gained some momentum. Instead of wireframing, designing and marketing I just coded. I wanted to get something working as soon as possible.

You may be surprised to learn that my app didn’t make me rich

And I did get it working, sort of. There were a few bugs which needed ironing out. The design needed to be improved slightly. But I had an app that was running on my own phone. It wasn’t on the app store yet but the momentum was carrying me forward. Small steps were making a big difference, and not worrying about the bigger picture meant that I was working stress free.

Small Steps Make a Big Difference

The app I was building was specifically for me, but it was definitely going to make a few hundred thousand. Who doesn’t want to buy a cycling specific weather app? However, I put future riches out of my mind and continued the snowballing momentum I had. The snowball was so large that it actually smashed straight through the brick wall that is Apple’s provisioning profiles, app deployment and review process. Earlier this year I released my first app, solely created by me, which people were paying for.

I’d completed a personal project and this achievement has changed the way I approach all of my side projects now.

You may be surprised to learn that my app didn’t make me rich. It hasn’t got a shed load of 5 star reviews and apple haven’t noticed it one bit. But I feel happy nonetheless. I designed, built and released my own idea. Every time I think, “Well it’s not made any money.” I invariably start thinking, “Well at least I finished it. At least it works”. And it does work, it looks good and I’ve learnt a lot whilst creating it. I’ve navigated the labyrinth that is iOS provisioning and certifications. People can download it and use it, and some are. This is what success is for me.

I found a project I was interested in and didn’t worry about whether it would be popular, or make me rich. I ignored people telling me it wouldn’t work, or wouldn’t be popular. I focused on small steps instead of worrying about selling my idea to Google, or getting featured in the AppStore, and I found that everything became much more accomplishable. All I wanted to do was make it work. If I could get it on the AppStore then it was a success.

I don’t want to get bogged down by fear of failing and it’s not going to stop me from creating things anymore

I’ve started thinking of success as an evolving goal. At the moment success means to me, finishing and releasing the project. After the project is released I can look at what’s next for the project to be more successful, but all the while knowing that the project is already a success. I don’t want to get bogged down by fear of failing and it’s not going to stop me from creating things anymore.

I Don’t Want to get Bogged Down by Fear of Failing

I have already noticed a difference in my mindset. Ideas big and small seem less stressful. I have a couple of projects in the works and my primary goal is to complete and launch them. When I achieve that the projects are a success and after that everything is a plus.

So as a parting note, if you’ve ever not started something because you’re afraid of it not becoming a success, readdress what success means to you. Start small, stay small and finish it. You’ll feel a lot more successful than you do if you never finish anything.


Make Review: A Clean, Enjoyable WordPress Builder Theme

Make is a freemium WordPress theme that brands itself as “your friendly small business site builder.” Essentially, it aims to be a full-service website builder that lets you create a quality business website on WordPress without needing to know how to code. After personally using Make in the past and then revisiting it for this review, I remain a huge…. Continue Reading

The post Make Review: A Clean, Enjoyable WordPress Builder Theme is written by Colin Newcomer and appeared first on WPKube.

UX at Scale 2017: Free Online Conference with 20,000+ Registrants

Scaling design is one of the greatest challenges faced by product teams today.

That’s because design just doesn’t scale like engineering. As teams, products, and processes grow, things eventually break.

Despite how daunting the challenge seems, plenty of companies have adapted their own best practices over the years. Now they’re going to share their stories with the world.

On Oct 3-6, UXPin is hosting its third virtual event: UX at Scale 2017. Learn from 15 UX leaders at Atlassian, Salesforce, Airbnb, GE Digital, IDEO, Google, ADP, Linkedin, Shopify, Autodesk, Forumone, Athena Health, and even the US government’s internal digital agency (18F).

Thanks to sponsorship from Salesforce and Atlassian, the ticket price of $800 is waived – the event is totally free to join.

Topics include: design systems, building UX teams, calculating UX ROI, automating processes, crafting design culture, cross-functional collaboration, and more.

The 15 handpicked speakers include:

  • Maria Giudice – VP, Experience Design at Autodesk
  • Kyle Haskins – Director of UX at Salesforce
  • Alastair Simpson – Head of Design, Confluence, HipChat and Platform at Atlassian
  • David Cronin – VP of UX at GE DigitalRuss Unger – Experience Design Director, 18F (U.S. Government)
  • JonDelina Buckley – Principal, UX Strategy & Research at ADP
  • Amy Parnell – VP, Experience Design at Linkedin
  • Dr. Laura Granka – UX Director, Google

Register now


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


The Designer’s Guide to Color Contrast

The colors you choose while designing a website, poster, or any other type of image, will have a huge impact on whether or not the overall design is successful. After all, there is a lot of psychology behind the colors that people are attracted to, and designers need to incorporate this into everything they do.

Color contrast plays a very valuable role, but it is often overlooked, undervalued and misunderstood. To avoid this problem, you must learn more about color contrast, including how and why you should use it. Once you go beyond the basics of knowing that red and orange aren’t good colors to create contrast but black and white are, you can begin to develop an enhanced aesthetic that will please clients and viewers.

Why is Color Contrast So Useful?

Color contrast, in a nutshell, provides visual intrigue and keeps viewers interested. Consider for a moment how boring it would be if an entire poster was made out of one color or only included shades from the same color family. Although there are some instances when this does work from an artistic perspective, it’s not an approach that is likely to grab someone’s attention when they’re perusing store shelves, looking at movie posters or surfing the web. Therefore, it’s wise to use contrasting colors whenever appropriate.

Think about the classic Coca-Cola can. If the entire thing was red, it wouldn’t stand out nearly as much as it does. The white writing truly pops off of the red background, which grabs attention and is instantly recognizable. This contrast is visually stunning, and it stands out from its competitors.

How to Best Use Color Contrast

The color choices you make must depend largely on the format that you’re using. The Coca-Cola can provides a great way to explain this process. In a physical product such as a can of soda, the red background works. It also stands out well in print advertising, on TV commercials and much more. But what if you were to attempt to design a website with these same colors?

To put it as bluntly as possible, a solid red website page background with white text on top would be atrocious. A full red background will work, though, if you put a text box on top of it that has a lighter color such as white or tan. From there, you’d most likely want to use black text in the text box to create another layer of contrast. Not only will this approach be more eye-catching but it will also enable people to actually read the text. Remember: black text on red is very difficult to read.

Other examples of contrasting color combinations that won’t work well on the web and may also be almost indecipherable in other formats include light green on medium green, green on red and red on blue. Instead, consider using white on green and yellow or white on blue. If you must put text on a solid red background, it’s best to use white just like Coca-Cola.

Of course, color contrast isn’t always used to call attention to text. If you’re looking to put two different contrasting colors together to draw the eye to something specific on the page, you can choose between dramatically different colors and the more subtle contrast that is caused by changes in shade, tint and saturation.

Color contrast plays a huge role in getting your CTA or button standing out. This should go without saying but when the user is skimming the landing page or your article, a CTA with a different color than the page will grab their attention.

This all sounds good but in order to see it in action we should take a look at some companies that are using color contrast to their advantage.
Teamweek is by far one of the best examples I can give you. As you can see in the image above, although the plans are all a different color, the contrast between the turquoise button and the rest of the page still does an amazing job drawing your attention to the CTA. 

The same thing happens on their sign-up page. Although the page is rich in colors and patterns, the user’s attention is redirected to the center of the page.

Trip Advisor does a nice job of using contrasting colors and white space to direct each user’s eyes to the most important aspects of their search results. The mixture of green and yellow is pleasing to the eye, and they kept the classic blue hyperlink color to make it easy for people to know where to click to learn more. Even better, they chose a bold yellow with black text for their “show prices” button, which stands out so much that people are virtually certain to engage with this call-to-action.

Another prime example of how to use contrasting colors to your advantage can be found at Alternating between open and negative space with their choice of white and gray pulls the eye in. Topping off this combination with a splash of red helps ensure that website visitors will be visually intrigued enough to stick around.

What Every Designer Needs to Know

Approximately 8 percent of men worldwide suffer from some form of color-blindness. This condition is much rarer in women, but 1 out of every 17 people with color-blindness is female. In total, 4.5 percent of the world’s population does not see all colors as the rest of the world does.

This may seem like a small enough percentage that you wouldn’t cater to their needs. However, the reality is that in the UK alone, 2.7 million people are colorblind. This is something designers really need to consider, especially if they’re creating something that is targeted at men.

Red/green blindness is the most common version of color-blindness. What this means is that the red and green elements of any color will not have their true appearance to these individuals. For instance, a person with red/green blindness will perceive purple as blue. This happens because they’re unable to see the red tone that helps differentiate purple from blue.

As you can imagine, this makes the process of choosing the perfect color contrast even more difficult. If you were to choose green as your primary background color or even as a font color, 4.5 percent of your intended viewing audience may not be able to accurately see everything. They may not even be able to read the words very well depending on the hue you chose and how severe their color-blindness is.

The Bottom Line

Ultimately, a color contrast should make both elements stand out, but especially the element that is most important. In other words, if you’re putting text on a colorful background or image, make sure that the words are easy to see and read. Keep your audience in mind and try to steer clear of color combinations that would make the final result difficult for people with color-blindness.


5 Reasons to Fire Your Client

I like money. Clients give me money (when everything goes right). Ergo, therefore, and hopefully…clients = money, more clients = more money—I’m actually pretty terrible at math.

When you first start out as a freelance designer or even agency. it can be pretty tempting to say “yes” to every single client that comes your way. It’s kind of like, “They have a project and a budget? Let’s do this.” However, as many designers have pointed out before me, this is a terrible way to do business in the long run. You want clients that you can build a relationship with over time.You want clients who you can trust, and who trust you in return.

You want clients who you can trust, and who trust you in return

As you build a reputation for being good, reliable, and even reasonable with the prices, you’ll attract more potential customers. As you get more customers, you may find yourself in a position where you have to choose between new and existing customers. New clients are always a bit of a gamble, so you’ll mostly have to make your decision based on your relationship with your old clients.

I’ve listed a few factors to consider when making this sort of decision. These factors will have to be balanced against each other. This is not a checklist. Some of these will be deal-breakers. Others may not be.

1. Do They Value your Time?

Deal breaker: Usually, yes

As much as it is on you to treat your clients right, it’s important that you are treated right, too. Hating the way you’re treated at work is probably the number one cause of burnout. It’s apparently also the main reason people leave jobs. When you’re a freelancer, you don’t have just one boss, you have as many bosses as you have clients (sort of).

Do they do what they say they will, when they say they will do it? Do they pay on time? Do they get back to you with the answers and content you need in a prompt manner? Do they actually commit to the project, or do they just expect you to figure everything out on your own? Your time is valuable, and clients who don’t realize this can hold you back in a big way.

Of course, setbacks are inevitable; and it pays to be understanding with your clients. However, a client that’s always late with information, content, and/or payments may not be worth your time.

2. How’s the Communication?

Deal breaker: Yes

Communication is a two-way street, and a lot of this is on us, as designers. We are responsible for educating clients as to best practices on the web, and giving them the best options we can. We’ve got to be the ones to give non-web-people a gentle and informative introduction to our world.

Good designers…deliver results. We can’t do that without solid communication on both sides

On the other hand, it’s our job to listen. We might know more about the web, but our clients know more about their customers. They know more about their industry. They can help you determine what their users will want to know and do on their site.

Good designers don’t just deliver new designs, they deliver results. We can’t do that without solid communication on both sides, and strongly delineated roles. How well you and a given client can communicate is a huge factor in whether or not to keep working with them.

3. Are they Willing to Pay for your Time?

Deal breaker: Yes

It’s normal for people to want to haggle. Everyone wants a good deal. It’s on you to understand that, and to deliver work that makes them feel satisfied with the money they’ve spent. It’s on all of us to help our clients understand the value of what we do.

Still, the best clients understand that you get what you pay for. If you’ve got a big client that tends to be a bit difficult, but pays well and promptly, it’s easy enough to forgive them. Heck, it’s even advisable. A client that tries to haggle you down to unreasonable prices, then delays payment, or whines about having to pay is just not worth the headache. It doesn’t matter how nice they are otherwise, or how much creative freedom you have.

4. Do you Enjoy the Work?

Deal breaker: Perhaps

Now, you’re never going to always enjoy your work. Much of it might be tedious, or you might just feel kind of indifferent to some tasks. There’s nothing wrong with that, it happens to all of us at some point. You don’t want to drop a client for this reason unless you legitimately cannot stand the work you are doing. That’s a pretty rare thing.

On the other hand, if you truly enjoy the work a client gives you, you might be willing to forgive slightly lower pay, or some temporary communication issues.

5. Will the Work they Give you Look Good in your Portfolio?

Deal breaker: Usually not

Sometimes things go wrong, and you just can’t justify including a site you built in your portfolio. Maybe the client meddled too much (see the communication issues), and now it just doesn’t meet your quality standards. Maybe you needed the money and took on a client who sells things you’d rather not be associated with. Maybe you build a site for a company’s internal use, and you signed an NDA.

Having work you can put in a portfolio is important, as that’s how you get more work. But unless your work for this client is taking up all of your time, it’s usually not a reason to drop them.


Remember to weight these factors against each other. Every client, designer, and situation is different, after all. Good luck!


The Best WordPress RSS Feed Plugins for Syndicating External Content

RSS feeds are a great way to simplify and congregate all of the great content that can be found on the internet today. And, since most successful website owners aim to provide their loyal followers highly valuable content related to their industry, RSS feeds offer an excellent opportunity to do just that. Maybe you don’t have enough time to craft…. Continue Reading

The post The Best WordPress RSS Feed Plugins for Syndicating External Content is written by Lindsay Liedke and appeared first on WPKube.

5 Techniques for Engaging Display Type

Sometimes your typeface needs to convey feeling as much as meaning, and for that function more designers are turning to dramatic typography. This type of typography is used for more than just legibility and readability (although that is still the primary purpose). Dramatic typography stands out. It reaches through the device screen, demands the viewer’s attention and directs it toward the message it’s delivering. It is an opportunity to display brand identity, enhance the text content, create a perfect visual hierarchy and create a memorable impression. It’s not a surprise that dramatic typography is quickly becoming a trend in web interfaces.

Whether simple or elaborate, the words on today’s sites are being read in a whole new light. In this article, we’ll take a look at 5 examples of dramatic typography in web design.

1. Simple, But Dramatic Typeface

Simple typography and dramatic typography aren’t mutually exclusive. In fact, simple typography is one of the best forms of dramatic typography. This technique is relatively easy to incorporate on your page—just select a simple typeface and follow these tips:

  • Increase typeface size (large typefaces send a powerful message especially when coupled with hero images)
  • Make text colour contrasting to the background (the color of the text copy is usually white or black which contrasts well against an image or brightly colored background.)
  • Add a bold style

Font size is a means of controlling influence; the example below perfectly demonstrates how letterforms can be gorgeous on their own. By employing extremes, in isolation or in groups, it becomes possible to convey a message powerfully without being obnoxious.

Simple typefaces communicate confidence and clarity.

2. Creative Use of Simple Typefaces

It’s absolutely possible to take the most basic fonts and create a memorable experience. All you need is to experiment with typography:

Need to send your message loud and clear? Use ALL CAPS for copy. Want to create something really special? Use simple typeface together with animated effects or video.

3. Decorative Typeface

Designers have mixed feelings about decorative typefaces. Many designers despise decorative faces as cheap and sloppy, while others adore them and leverage in creative and interesting ways. As for me, I believe that used properly, decorative typography can set the tone for the site and highlights the brand in a lovely way; but only when it matches the personality of the brand and the atmosphere of the site. When a designer achieves a balance by incorporating copy with a proper decorative type, the whole experience is better. Here are a few examples:

In the Hawk&Hen example below, the decorative font helps to establish a quirky and unique style for this kitchen/bar.

A custom typeface on Squarespace’s Sleeping Tapes sets a right mood for experience.

The playful typeface on HeadOfffice sets energetic atmosphere.

The modern and original typeface used on the Maaemo homepage creates mysterious atmosphere.

You’ve probably noticed that all the examples above have one thing in common: the decorative typeface is used together with a simple, minimal layout. This isn’t a coincidence. The fact is that decorative typography is interesting on it’s own. Thus, if you’re going to use decorative type on your homepage, to concentrate user attention on a single element it’s better to use a simple layout.

4. Lettering

Hand-drawn type has long been a part of web design. At times it is a real lettering that is scanned in, but in many cases, it’s a typeface made to look hand-drawn. Script fonts and lettering add an elegant flair to any design when done right. The hand-drawn text is unique as it is capable of conveying messaging about the organisation behind it. Take a look at Grain&Mortar and Femmefatale examples below. The artistic roots of these design agencies shine through in their home page design.

Hand drawn elements are a great way to humanise a brand.

Just make sure that, if readability is the ultimate goal, the message isn’t lost in the beauty. To prevent potential issues, try to limit the use of hand drawn fonts to big titles overlaid across images and use another font for the regular copy.

5. Superimposed Over Elements

One of the best ways to get text noticed is by superimposing it over other elements (such as images or other graphical objects). Usually, the fonts chosen to be superimposed take account of other textures, patterns and artwork that are going to be present in the design:

You can extend text beyond its section into others.

Having half of the words “bleed” over an image.

Or even break the rules and give prominence for primary image and hide the words behind it.

The two important considerations with this technique are contrast and legibility. You need to test out your design to ensure that both requirements are satisfied and the site has good user experience.   


Popular Design News of the Week: September 11, 2017 – September 17, 2017

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers. 

The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.

Note that this is only a very small selection of the links that were posted, so don’t miss out and subscribe to our newsletter and follow the site daily for all the news.

Safari is the New IE


Gone – An Ephemeral To-do List


Design for iPhone X


This Font Makes Graphics Out of Numbers in Seconds


10 Inspirational Examples of Heavy Typography in Web Design


UX Designers: Are You Focusing Too Heavily on Creating a Beautiful UI?


The Modern Web Design Process: Creating Sitemaps and Wireframes


Winners and Trends from the Apple Design Awards 2017


7 Ugly and Universal Truths About Branding You Need to Know


So You Want to Be a Senior Developer?


Designing for Human Attention


Modulos – An Ever Changing Desk for your Ever Changing Needs


Hixle – Discover the Best UI Design Styles & Resources


Compilers are the New Frameworks


Mozilla and the Washington Post are Reinventing Online Comments


Facebook, You Needy Sonofabitch


The Most Innovative Design of 2017


Atlassian’s Bold New Brand


8 Red Flags to Avoid Bad Freelance Clients


A New Look for Goodreads


10 Great CSS Blend Modes that will Boost your Image


9 Ideas Shaping the Future of Design, According to Ideo, Microsoft, Autodesk, MIT, and More


A List Apart, Reimagined


The Only Safe Email is Text-only Email


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


Comics of the Week #407

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…

Thank you and good riddance

It’s free online


Separation anxiety

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


4 Tricks to Make Load Times Feel Faster

No matter how well-designed your user interface may be, at some point or another, people using it are going to have to wait for something to load.

The loading time could harm the overall experience. Making users wait too long for your app to load can make users impatient. If users get that feeling, they’ll abandon your site and go somewhere else. Thankfully, there are a few things you can do to speed up your user’s sense of time and make them feel like your content loads faster than it does.

1. Never make users wait without giving them feedback

If the user’s connection is slow, it can take a while for a site to populate content on the screen. A user’s wait time begins the moment they initiate an action, and the worst case is when they don’t have any indicator that the site has received it.

When your site fails to notify users that it needs some time to complete an action, users often think it didn’t receive the request, and they try again. Plenty of extra taps have resulted due to a lack of feedback. To make people happy, we need to give an indication that something is happening, offer visual feedback.

2. Avoid static progress indicators

Static progres indicators are the ones that have an unmoving image or text, such as “Loading…” or “Please wait…” to indicate that the request has been received. While any feedback is better than none, static indicators are bad UX. Users don’t have any indicator that content is being loaded, so they aren’t sure if the process is actually stuck.

3. Use animated loading indicators

Psychological studies of waiting time show that user focus starts to shift after one second of waiting without any feedback. In order to reduce a user’s uncertainty, use a progress indicator for any action that takes longer than that. (Note: the use of animation isn’t recommended for anything that takes less than one second to load, because users might feel anxious about what just flashed on and off the screen).

Infinite loading spinners for reasonably fast operations

The simplest form of animated indicators is a loading spinner. This type of visual feedback just states the fact that user has to wait, but doesn’t say how long they should wait. As a general rule, you should use this type of progress indicator for fast actions (2–10 seconds).


A spinner of gray lines radiating from a central point is a standard approach.

Loading spinners are often used together with pull-to-refresh gesture. It acts as an intermediary between two states of the UI, and helps users to understand what is going on when the screen changes.


Apple Mail app for iOS

Percent-done animation for long lasting operations

Loading spinners aren’t the right way to indicate long lasting loading. It’s much more bearable to wait for something if we know when it will happen. That’s why for long lasting operations you should give your users a clear indication of how long they need to wait. As a general rule of thumb, you should use a percent-done animation for longer processes that take 10 or more seconds.


Image credit: Behance

Alternatively you can provide a general time estimate for the operation. Don’t try to be exact, a simple, “This might take a minute” can be enough to inform the user and encourage them to wait it out.


Installing software update in Mac OS X

4. Tweaking the user’s perception of time

How fast your content loads is in the mind of the user. When trying to create a faster user experience you can shorten the perceived time rather than the actual time. In order to do so, you can fill waiting times using content, animations, or actions the user can perform.

Progress bars

A progress bar makes users develop an expectation for how fast the action is being processed. The way your progress bar moves affects how they perceive the load time. In order to make a progress bar feel faster to users you can use follow simple techniques:

  • The progress bar should never stop, otherwise users will think the site froze. The worst possible case is when progress bar approaches 99% and suddenly stops. Most users will be frustrated by this behavior.
  • You can disguise small delays in your progress bar by moving it instant and steady.
  • Move the progress bar slow in the beginning and accelerate it towards the end to give users a rapid sense of completion time.

Image credit: Dribbble

Skeleton screens

Wait-time is a right time for skeleton screens (a.k.a temporary information containers). A skeleton screen is essentially a blank version of a page into which information is gradually loaded. It provides an alternative to the traditional animated indicators. Rather than show an abstract widget, skeleton screens create anticipation of what is to come and makes user focus on progress instead of wait times.

Skeleton images load quickly since it’s a small image that is often made up of simple shapes. These techniques can be taken even further in mobile apps because the skeleton template can be stored locally together with app’s data. Facebook’s app for iOS shows users gray blocks and lines to represent images and text as the app loads. Once it finishes loading, the images and text appear in place of the temporary containers. This is no faster than having a loading screen with a spinner, but in the user’s mind, it feels like it is.


Background operations

Another speed trick you can use is background operations. Actions which are packed into background operations have two benefits — they are invisible to the user and happen before the user actually asks for them. Give users other things to focus on as a process is going on in the background. A good example of this is uploading pictures on Instagram. As soon as the user chooses a picture to share, it starts uploading. The app invites users to add title and tags while the picture is being uploaded in the background. By the time when users will be ready to press a ‘Share’ button, upload will be completed and it’ll be possible to share their picture instantly.

Progressive image loading

As modern apps and sites load more and more images, it’s good to think of their loading process, since it affects performance and user experience. Using a blur effect you can create a progressive image loading effect.

One good example is Medium, which blurs the post image cover as well as images within the post content until the image is fully loaded. First, it loads a small blurry image (thumbnail) and then makes a transition to the large image. The thumbnails are very small (just a few kilobytes) which combined with the blurry effect allows for a better placeholder than a solid color, without sacrificing payload.

Medium uses blur to create a progressive image loading effect

Visual distraction

You should always try to make the wait more pleasant if you can’t shorten the line. To ensure people don’t get bored while waiting for something to happen, offer them some distraction. Fine animations can distract your visitors and make them ignore long loading times.

Animated splash screen. Image credit: Ramotion (Dribbble)


Image credit: Vimeo