Friday, May 26, 2017

How You Can Compete Against DIY Site Builders

How does the little guy compete? How do you win against these giant companies? It’s inevitable right? The big guy always wins. Walmart decimated the Mom & Pops. Home Depot killed the local hardware stores.

And now, it’s your turn. Squarespace, and Wix, and Webydo, and a dozen others are winning and putting you out of business.

At least, if you and I are honest, sometimes late at night, lying in bed, it sure seems that way, right? Well, it sure did for me. I almost gave up.

I know there is a small part of you, maybe a big part, that is concerned with the struggle we have in front of us. Big or small, competition always presents a threat. And DIY sure looks like a big one!

Site Builders Are Taking the Internet by Storm

Their ads are everywhere. They have Jeff Bridges, John Malkovich, Jason Statham and a host of other celebrities selling for them. They have multi-million dollar campaigns spread across TV, YouTube, and even radio.

I don’t think I can get through 5 minutes online without seeing one of their ads.

I know you’re seeing the same thing.

On YouTube alone, it seems like every content creator is being sponsored by Squarespace, or every other video is bumpered with a Wix commercial.

Create your stunning website today. It’s easy and free! ~Wix


And worse, it’s not like they’re selling the GeoCities of yesteryear. Their sites are “stunning.”

They do look good. Don’t hate, and don’t be a snob. There are good looking sites on all these platforms.

On top of that, their codebase is no joke. Think I’m wrong? Try running one of their sites through Google PageSpeed Insights or YSlow. They’re pretty hard to beat.

So, How Do You Compete?

Want the simple answer?

You can’t. At least, not directly.

But that’s okay. These DIY solutions are doing you, and your business a favor.

When the Writing is on The Wall, it’s Time to Make a Change

I struggled with this “problem” for quite some time. For years actually. Even before these DIY site builders arrived, I struggled with how to stay competitive against all the web design marketplaces that were popping up.

I had a healthy amount of work at the time, but I could see the writing on the wall.

The industry was changing and my place in it was being threatened.

So, I thought, “If you can’t beat them, join them.” So, I started to research theme shops. I could start building themes to sell wholesale too.

But, just as quickly as I came up with that idea, it was beaten out of me. There were far too many agencies, teams of people, dedicated to cranking out professional themes.

I couldn’t compete with that. And, even if I thought I could, it wouldn’t solve anything. I would have the same problem. Bigger swifter shops doing more for less.

So, I struggled with this for years. Hoping that someday I’d figure it out. In the meantime I continued to serve my clients as before. I kept trying to do better and better. All the while, web design was getting cheaper and more accessible.

Then, one day, I hit “the” wall. I delivered a redesign and it flopped…hard.

I launched a redesigned website for a company. It was a significant overhaul from the previous version. We changed everything. It took months, but when finished, the site looked great. I was proud of it. The company was thrilled. Their sales staff were getting compliments on the phone for weeks. I mean everyone loved it!

After a few months, I peeked at the website’s analytics to see how great of a job I had done, and I was shocked.

Nothing had changed.

Bounce rate, page views, average time on site, and even worse, conversions, they were the same as they’d always been. After months of a redesign, the performance of the website had largely been unaffected.

This made no sense!

A better looking website was supposed to do better. But it hadn’t done better. It had done nothing at all.

So, what was happening? I was lost.

So, now, on top of the market threatening my livelihood, I now had an ethical problem on top of it all.

How could I continue to sell my design services when I was no longer confident it was going to make a difference? How could I continue to market against all those “soulless” pre-built themes.

Maybe, Cheaper DIY is Just as Good

I’m sure you’ve been there, or you’re there right now. It’s the problem any honest web designer is bound to face at some point.

If you know what I’m talking about, If you’re feeling lost, like the market has made you obsolete, do not lose hope.

There is a bright future for web designers. We’re not going anywhere, we’re not being run out of business, and we’re more needed now than ever before.

But, as I’ve discovered, to get there, you have to change your perspective on the market we exist in.

To Win, You Must Know Thyself

The marketplace has evolved. Not just for web designers, but for our clients and their customers as well. Meaning, showing up and looking good is no longer good enough.

If you are only selling clients on getting a beautiful website with a modern code base, you are going to lose for two big reasons.

One, Web “Design” has Become Commoditized

Between marketplaces like Envato, hosted e-commerce solutions like Shopify, and now site builders like Squarespace and Wix, you can get good design anywhere. And, you can get it dirt cheap.

Most of it is quality work. Built by teams of talented professionals mastering their product for the masses.

Today, if you want to get online with a good looking website, you can do it for the price of a Happy Meal.

And you can’t dispute that. At least, not honestly.

And besides, your client’s customers, they don’t care about design. Not in the way we’ve conditioned our clients to think they do.

Two, Having a Website is no Longer a Novelty

And here’s the beginning of why being a web designer today can be so profitable.

If you’ve been around for awhile, you probably remember having to sell clients on the importance of being online. Do you remember those times?

If not, try to imagine having to sell your client on the “vision” of why their business needed to go “digital.”

It wasn’t a gimmick, it was the nature of the market. If you were online, you were cutting edge. You were the company that customer’s wanted to do business with.

Then a few years later, BOOM! CSS came onto the stage and erupted into “Web 2.0”

And the market changed again. Everyone was getting online. It was no longer the differentiator, it was expected. Now, you had to LOOK like you knew what you were doing. Your client’s website had to look good if it was going to succeed.

And this idea stuck.

It stuck because it worked. And it has stuck so well, it’s given birth to the enormous DIY market.

It’s the premise behind the business model of these DIY builders. To give everyone cheap and affordable access to good looking websites.

And our clients are flocking to them. It’s our own fault. We’ve spent the last decade selling them that all they need to do is look good online. That, all they needed, was a good looking website.

Except, we were wrong.

The market has changed again and the web design community has missed it…

THIS is How You Can Compete…

The market is no longer impressed into making conversions. They’re far too savvy for it. Today, the web is a tool to get things done. To find a solution to our problems as quickly as possible.

To succeed online we need to focus on more than design and code.

We must focus on the end user.

This isn’t just so you can stay in business. It’s so you can TRULY be valuable to your clients. You can give them a website that will sell.

You know design and code. That means you know more than the average joe trying to save a few bucks by doing it themselves. Teach them it’s more than cramming sales copy into pre-defined blocks of content inside a pretty theme.

Help your clients form a strategy that answers their customers problems. Give your clients a website that focuses on their customers first, not their own business. Ask, “Why is a prospect on their website?”, “How did they get there?”, “What are they hoping to find?”

Take that strategy and craft engaging content that is customer-focused. If you’re not comfortable writing, then try to deepen your skill set. Learn how to write conversion optimized content. Or, partner with a professional copywriter.

Then, design your client’s website for their customer, around your newly crafted strategic content. Combine their messaging with your knowledge of user-behavior patterns. Use design to elicit pre-defined interactions with the content. Guide the customer to their primary goal.

Stop delivering digital brochures as websites. Give your clients a 24/7 salesman that listens and responds to their customer’s needs.

And That’s Your Golden Opportunity Against DIY Site Builders

They require the DIY’er to be a marketer, professional copywriter, UX expert, and more. But a roofer, chef, banker, lawyer, doctor, they’re not web professionals. They’re not familiar with how the web works and the psychology of the end user. You are!

The DIY site builders are targeting those who don’t know better, those who think just being online with a good looking website is good enough. And again: It’s not!

It’s categorically not good enough!

You know this.

Start Doing More! Make More Wins!

If you help your clients understand it’s about their customers first, then you can build their website around the customer’s end goal. You’ll unlock a gold-mine of opportunity that they could never achieve with any DIY solution.

No matter what John Malkovich says.

EASYTHREE Website UX Flowchart (Sketch Version) – only $14!

This content was first posted here:
How You Can Compete Against DIY Site Builders

Thursday, May 25, 2017

11 Shocking Designs Straight Out of the ‘90s

The Internet has certainly been through a lot over the past 20+ years. We’ve watched web design change from the most basic of HTML markups to complex JavaScript, CSS and HTML5 coding. But remembering the past can be fun and that’s why, this Thursday, we’re throwing you back to the 90’s for a look at some of the worst (or best, depending on how you see it) website designs of the decade.


Where to start with this site? It appears that if you need a drone, ATV or laser show device, you can find them all here. It’s almost like whoever made this site sneezed into a digital Pandora’s Box of random pieces of machinery and behold, an e-commerce explosion formed.

2. McSpotlight

That nifty spotlight effect on the right-hand side of the page was a big deal back in the day, so we have to give this site props for that. However, a redesign once in the last 20 years probably wouldn’t have hurt.

3. Forbes

Forbes’ website from 1996 still conveys the sense of business-oriented professionalism the brand is known for today, just with a little less attention to fonts and more attention to print media, which was still hugely popular then. The real kicker is the text in the side bar that says “One day, everything Bill Gates has sold will become obsolete.”


Who needs Google when you can, uh, find it? This super sweet search engine emerged on the scene in 1995. It’s still alive today, although definitely not one of the more popular search engines in use.


A sister site to IFINDIT, go to this page if you definitely want to have a seizure.

6. ClevelandBrothers

Like many construction websites back in the day, this one leaves something to be desired. However, you have to hand it to them for getting the image switcher down, and for keeping that trend alive on their current website (and in HD nonetheless).

7. TravelASSIST

This website is likely the grandfather of all digital travel magazines. But let’s face it; could the designer put any less effort into the creation of this page? Imagine if that was our job? “Hey, yeah, just throw some text and one picture up.” I wonder how much designers got paid back in the day.

8. Playboy

If you stumbled upon Playboy’s homepage from the 90’s, you’d probably have no idea what the brand specialized in (astronomy maybe?). While their current homepage is a bit more risqué, you at least know what the deal is as soon as you find the site.


Ah, the Technical Advisors Company didn’t really think their plan through. They did embrace their name, though, and show a pretty swift sense of humor. Check out the copy: “We do not sell tacos. We do not make tacos. In fact some of us do not even like them very much.” And you can’t forget those deliciously enticing taco icons on the left-hand side.

10. The Klingon Language Institute

Of course the Star Trek fanatics of the ‘80s and ‘90s would be the some of  the first people to figure out how to populate the Web. Looks like this site has lived long and prospered. It even gets steady traffic to this day.

11. InstaNet

Another classic. This relic even links to “The Famous Yahoo Server.”

If you’ve got time to kill, you can use this tool to access a ton of preserved websites. You never know what hidden gems you’re going to unearth from the past.

The Design Deck – Playing Cards for Designers – only $14!

This content was first posted here:
11 Shocking Designs Straight Out of the ‘90s

Wednesday, May 24, 2017

4 Ways Use Functional Animation in UI Design

Just a decade ago user interfaces that used animations were avoided, being most often associated with popups and flashing ads, but this has changed. Today details of interaction design and animation make a fundamental difference on modern websites and in modern apps. This mindset shift is clearly expressed in Zurb’s statement:

We’re no longer just designing static screens. We’re designing for how the user gets from those screens to actually view content.

If we are to design better digital products, then we need to embrace the interactive nature of the app and websites from the very beginning.

Why Animation Works

Motion, by its nature, has the highest level of prominence in a user interface. Neither text copy nor static images can compete with motion. Our eyes are hardwired to pay attention to moving objects—it’s almost a reflex. We can take advantage of this with this functional animation.

What is Functional Animation?

Functional animation is a subtle animation embedded in the UI as a part of the functionality of that design. It has a very clear and logical purposes:

  • Reduce cognitive load
  • Prevent change blindness
  • Establish better recall in spatial relationships

In a human-centered design approach, where the user is the prime focus, a user interface needs to be intuitive, responsive, and human. Functional animation helps you achieve these goals.

How Functional Animation Improves UX

Our experience and impression of an app or site are shaped by a combination of factors, with interaction playing a fundamental role. Adding motion to our design can be meaningful and functional, when we find the right circumstances. Well thought-out and tested functional animation has the potential to fulfil multiple functions including:

1. Visual Feedback

Good interaction design provides feedback. Feedback acknowledges that the system has received a user’s action and demonstrates the result of the interaction whether it was successful or not. Animation in this group needs to be very subtle and should be designed responsively.

Button Feedback

In real life, buttons respond to our interaction, and this is how we expect things to work. In order to be predictable for the user digital interface should act in the same way.

Source: Jaron Pulver

Visualize the Result of an Action

By following the principle show, don’t tell, you can use animated feedback to highlight that something went wrong. For example, visual shake animation on incorrect passcode entry. It’s like the shaking of the head as if to say “no, try again”. The user notices the animation and instantly understands the current status.


You can also reinforce the actions a user is performing. In the example below, when the user clicks “Submit”, a spinner briefly appears before the app shows the success state. The checkmark animation makes the user feel like the process is finished successfully.

Image credit: Colin Garven

2. Softening State Changes

Other good places to add animation in design are at moments of change. State changes in the user interface, especially on the web, often involve hard cuts which can make them difficult to follow. Nothing feels more unnatural than a sudden change. Abrupt changes in an interface are hard for users to process. These moments of change should be softened by adding some animation to the UI.

Establishing Connections

Animated transitions should act as intermediaries between the different states of the user interface, helping users to understand what is going on when the screen state changes. The user simply follows the motion and understand how the two UI states are related.

Image credits: Anish Chandran

It also works well for associating thumbnail and detail views:

The card animates from its original position into a position in the modal, making it clear that it’s the same item, just with more detail.

Image credits: Charles Patterson

Call Attention to Changes

Animation can help the eye see where a new object comes from upon its reveal or where a hidden object goes, and can be found again. We can use it to call attention to changes that hide or reveal information, such as opening side drawers of content. In the example below, the main navigation slides out of the way when you click on hamburger icon. That movement lets you know the main menu hasn’t disappeared.

Image credits: Tamas Kojo

3. Visibility of System Status

As one of the original of Jakob Nielsen’s 10 heuristics for usability, visibility of system status remains among the most important principles in user interface design. For users, it’s very important to know and understand their current context in the system at any given time.

Progress Indicators

Data uploading and downloading processes are great opportunities for a functional animation. Animated loading bars set an expectation for how fast the action will be processed. Animation can be helpful in the case of failures. Even a not pleasant notification, such as a data downloading fail, should be delivered in a nice way.

Image credits: xjw

Pull to Refresh

A user’s wait time begins the moment they initiate an action, and the worst case is when they don’t have any indication the system has received it. The pull to refresh action should have an immediate reaction. It’s essential to give some visual feedback immediately after receiving the request from the user to indicate that the process has initiated. Animation will help you with that.

Image credits: Tony Babel

4. Explanatory Animation

Sometimes users need a little extra help to understand the user flow or how to interact with certain interface elements. This is especially true for user interfaces that contain new or unfamiliar features or interactions for the user.


User onboarding demands a flawless UX, and animations in an onboarding flow has a tremendous impact on how first-time users will engage with an app. Animation gives you limitless freedom to convey anything, no matter how complex or how dry the subject matter, in an entertaining way.

 Image credits: Anastasiia Andriichuk

Visual Hints

Animation can offer up some useful visual cues. Explanatory animation is most often seen when a page is opened for the first time and the animation shows how certain elements of the page are supposed to be used. This type of animation can be found in games which often deal very well with progressive disclosure, revealing game mechanics as you move further into a game. Such hints are only triggered when the user reaches the appropriate point in their experience.


Animation is powerful tool when used in a sophisticated ways.

We need to embrace the motion from the very beginning and think of it as natural part of our design, because design is more than just about visual presentation.  As Steve Jobs said about design: It’s not just what it looks like and feels like. Design is how it works.

EXCLUSIVE! Create Up to 40 Caricatures from 1 Image with CaricatureStudio – only $5!

This content was first posted here:
4 Ways Use Functional Animation in UI Design

Tuesday, May 23, 2017

This Red Goes to #FG0000: Wide-Gamut Color with ≪Picture≫ and Cloudinary

Recently, I had the pleasure of reading Craig Hockenberry’s short, sweet, and informative Making Sense of Color Management. In the book, Craig points out that while new, Hi-DPI screens present us with more resolution than our eyes can actually see, they’re nowhere close to being able to produce all of the colors that we’re capable of perceiving.

Excitingly, that’s beginning to change. Various long-stagnant pieces of our graphics stacks are lurching forward into a more-vibrant future. The next frontier in making things look amazing on screens is wide-gamut color.

Wide-gamut Screens

For the last 20 years, the display industry has settled on a limited, standard range of colors, called the sRGB gamut.

If the lopsided, chopped-off-rainbow-disc below (technical name: the “1931 CIE Chromaticity Diagram”) represents all of the colors that human eyes can see, the sRGB gamut is circumscribed by the little triangle in the middle.

The latest-generation of displays can produce colors outside of sRGB’s limited range. These screens expand the triangle of possibilities out, to what’s called the P3 gamut:

The P3 gamut, compared to sRGB. It’s bigger!

Triangles are one thing and actual photographs are another—for a sense of what this wider range actually looks like in practice, beg, borrow, or steal a wide-gamut display and go check out Craig’s gorgeous example images, or look at this quick example, from yours truly. Basically, if your subject is really saturated (for example: an incandescent sunrise, or bright-green grass) P3 will let your images pop in new and notable ways. But if your image’s palette is more subdued, sRGB already has you covered and you’ll see no visible difference.

So – devices that can display new, more vibrant colors are shipping en masse. How can we take advantage of them, without screwing things up for everybody else?

Wide-gamut Resources

First, we have to produce files that contain these new colors. Generally, you can do this by making sure that: 1) your camera is capturing– 2) your software is editing– and, crucially, 3) that you’re exporting– in a wide gamut (like P3, Adobe RGB, or Adobe ProPhoto). And don’t forget to embed a color profile.

For a detailed tutorial on how to do this with Photoshop, buy Craig’s book!

If you’ve got a shiny new iPhone, though, you don’t have to worry about minding your Ps and Qs in obscure preference panes. The iPhone 7 captures, processes, and saves photos in the P3 gamut out-of-the-box.

Wide-gamut on the Web

Ok, so let’s say you’ve captured a beautiful sunrise and produced a wide-gamut Jpeg with an embedded profile. Great! How are you going to share that image with the world?

Let’s start by marking it up using a single-src <img>:

<img src=”sunrise-p3.jpg” alt=”Oranges and blues” />

In browsers that implement “color management” – browsers that know how to use the image’s embedded profile to map the image’s wide-gamut colors to a device’s particular screen – the sunrise will always look as good as the hardware will allow. It will look good on sRGB-ish screens, and great on wide-gamut displays. But many browsers are not color managed. And in color-unmanaged browsers, the raw color values in our image are painted directly to the screen, without consideration for how the file’s wide profile relates to the display’s limited gamut. This results in a dull image – much worse than if we’d just left well enough alone and exported our image in sRGB:

Comparison between a vibrant, sRGB sunrise and a a dull, wide-gamut sunrise on a color-unmanaged display

In color-dumb browsers, wide-gamut images look worse than their narrow-gamut, sRGB counterparts.

What can we do about this sad state of affairs? Unfortunately, there’s no easy way to feature test whether or not a browser is color-managed. But we can ask the browser if a screen’s profile is more sRGB-like or P3-esque, using the brand-new color-gamut media query. If we use this query within a <picture> element, we can make sure that we only send wide-gamut images to wide-gamut screens – and send sRGB images to everybody else:

<source media="(color-gamut: p3)" srcset="sunrise-p3.jpg" />
<img src="sunrise-sRGB.jpg" alt="Oranges and blues" />

That, my friends, is a color-adaptive responsive image. Neat!

Responsive Color with Cloudinary

Make no bones about it, creating responsive image assets is tedious. Whether you’re rendering multiple resolutions, crops, formats, or, now, color gamuts – the task of generating alternate versions of your assets is ripe for automation.

Enter Cloudinary.

Cloudinary’s color-smarts are still evolving, but today, the service has two key features:

  1. If an uploaded image has a color profile, Cloudinary preserves it.
  2. Cloudinary can convert any image to sRGB using the cs_srgb transformation.

So, if we generate a wide-gamut original and upload it to Cloudinary, we can deliver it color-adaptively, like this:

media="(color-gamut: p3)"
srcset="" />
alt="Oranges and blues" />

This pattern allows us to generate a single, wide-gamut resource, and deliver it in a way that looks great for some, and good for everybody. ✨☺️🌈😎

Ready for Anything

As screens begin to evolve along this new axis – becoming more colorful – it’s gratifying to see the techniques and toolchains built to cope with the Retina-revolution so ready to tackle a new challenge. On the ever-evolving, always-diversifying web, adapting bitmap images to varied browsing contexts is a general problem, and responsive image markup patterns – paired with a centralized, automated image-processing back-end like Cloudinary – are here to solve it, no matter the particulars.

So – armed with P3, <picture>, and Cloudinary’s cs_srgbvoyage forth bravely into a wider world of color.


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


35 PowerPoint + 15 Keynote Templates with 1000s of charts, infographics, maps – only $29!

This content was first posted here:
This Red Goes to #FG0000: Wide-Gamut Color with &Lt;Picture&Gt; and Cloudinary

Monday, May 22, 2017

10 Essential Rules for UI Design

Design never really used to matter all that much.

It’s hard to imagine now, but before Apple’s meteoric rise to global popularity, design usually took a backseat to functionality. Today, design has become a world onto itself, and the community of designers and developers have united to develop a coherent set of rules for the creative practice.

The evolution of design is constant, and there are always new things to learn and focus on to bring function and aesthetics together in one package.

To stay on top of your design game, here are 10 important rules of user interface design to remember:

1. Cater to Universal Usability

With the explosion of different device types today, one size certainly won’t fit all.

When you create your website or app, you need to make sure that you design with all screen sizes in mind. This means loading fully on both low and high bandwidth Internet connections, to formatting appropriately on both iPad and iPhones.

In the past, developers have concentrated mainly on creating a good user interface for desktop. But, just to refresh your memory, mobile usage overtook desktop usage back in 2014. So, should you now switch your focus to mobile? While it’s important to pay special attention to mobile, it’s also worth considering that desktop usage is still significantly high, with 42% share.

Therefore, the key is to create adaptive user interfaces that will give the consumer a great experience despite the display or orientation of the device they’re using.

2. Clarity

People are extremely busy, and because of this, rarely dedicate their full attention to one task. Because of this, you need to keep your design simple to understand.

Don’t make your users guess. Use language they can easily understand in terms of words, phrases and the concepts. Avoid using special system or industry terms and insist on a language familiar to the audience.

If you’re intending that the user complete certain goals, let the actions be in a sequence that has a beginning, middle and end. When they are done, use a notification to let the user know and include any next steps.

For instance, if you’re designing a page for an online banking system, you can group the actions into “Contact Details”, “Account Details” and “Profile Settings” instead of having them all in a single form.

3. Prevent Errors

Errors aren’t only anomalies and mistakes, but also big roadblocks to visitors taking desired action.

If something goes wrong or loads incorrectly, most visitors won’t wait around for a fix, they’ll just leave. Stay vigilant and stay on a lookout for errors, fixing ones you do spot as soon as possible.

Users don’t like making errors. They feel even worse if they think they are to blame for the error. If they don’t transfer this hate to you and move forward, they will abandon their accounts even before they are set up, for instance.

When designing, eliminate the possibility of an error or design a system that checks the error for them before they go on too far. For instance, let’s say you require users to create a password that’s at least 8 characters long and includes a minimum of one digit.

Will your system let the user go on creating a password that falls short, only to notify them when they’re clicking “Next” or can it notify them as they type the password? The latter is the better design.

4. Make the Interface Consistent

Consistency throughout the user interface boils down to making things continuous, predictable, and within expectations. Designing everything across the board as uniform as possible and making sure there are no surprises or unexpected results goes a long way in making things consistent.

By the Principle of Least Surprise: “If a necessary feature has a high astonishment factor, it may be necessary to redesign the feature.”

Do users have to guess what words mean and which ones mean the same thing? Do they have to worry about clicking a certain button because they are not sure what it will do? Ensure consistency of processes, functionality, appearance and terminology.

Luckily, there’s no shortage of resources on this matter. Most of the reputable website builders will help you with this as they feature a uniform and consistent grid layout design. 

5. Context

As it’s often said today, “Context is everything”. Context is how we’re able to connect new ideas together with old ideas, building relationships and meaning in our world.

The best teacher for this lesson is probably an advertiser. Advertisers know that without context-sensitivity to the time and manner in which they present their ads, then the ads become worthless—and that’s wasted money (look at how Google AdWords determines how to present ads).

Similarly, you have to apply contextual design in your user interfaces. Contextual User Interface is the location-based, time-sensitive and situation-based design of a website or app so that it delivers the most relevant data to the user. And this hasn’t been a major concern for designers until a few years ago.

With the growth of real-time connectivity and dependence on the internet, context could be the cause of your failure or success.

Context is key to human relationships, and equally important for the basic elements of design. We expect interactive objects to be intuitive, and should design to form coherent relationships between our function and design.

6. Size and Distance

Determining the size of UI objects and the amount of whitespace between each other is crucial to making sure that the design looks balanced and predictable.

Apart from gripping the user’s attention, this also helps the users understand where the objects are, without having to look all over the place for it.

Constant testing is best for determining the best way to go about this, enlarging what needs to call for more attention and shrinking what needs to be less distracting.

7. Defaults

Developers and designers usually like customizing everything.

This allows us to have control of everything from interfaces to wallpapers to ringtones. Most people, however, don’t seem to bother with customization. Most devices and other consumer electronics purchased almost never get changed. People typically don’t adjust their factory settings, since changing them takes know-how, time and effort.

By knowing this fact, it’s important to make sure that your default settings are suitable for a large batch of users to easily understand and navigate. This means telling the user, “Hey, you can customize this, but you don’t have to.”

8. Guided Actions

People typically won’t take any action unless they’re asked. That’s why tactics like the call-to-action are so powerful to help drive conversions.

More importantly, ask them “nicely”. What does this mean? For instance, consider the timing and context. Will you ask the user to start another goal without completing the one they are currently on? Consider when a pop up asking them to check out some other stuff appears. If it doesn’t appear after they scroll to the end of the post then you’re doing it wrong.

Take note that it only works when the visitor is actually interested in something you’re offering. If you can prove that you’re providing significant value to people, then don’t hesitate to ask users to do something in return like following your social media pages or blog. This works to keep your users informed, and also to naturally increase your web traffic over time.

9. Feedback

When you walk into a dark room and flick a light switch, you expect the light to turn on. If nothing happens when you flick the switch, you might assume something went wrong. This is equally true when it comes to design.

No one likes being uncertain about their actions, so there should be feedback courtesy of tooltip messages and notifications to show visitors that their actions were successful and have been acknowledged. Feedback can be as simple as running a web survey or adding a “Complete” notification once a form is submitted, but it’s crucial when starting a blog or app.

This also emphasizes the need to not leave your visitors second guessing themselves. The system should be able to offer feedback that is relevant, fitting in importance and urgency, comprehensive and sensible and contextual.


The art of design is ever-changing, and we’ll continue to find new ways to combine function and form into UI design. We’ve been through things like minimalism and responsive design, changing and transforming as newer technologies come to the forefront.

With these ten UI rules in mind, don’t forget that some rules are made to be broken.

Testing and experimenting is how we learn new trusted techniques, but we can rely on several of these rules as our foundation.

48 Hours Only: Learn SWIFT iOS App Programming – only $17!

This content was first posted here:
10 Essential Rules for UI Design

Saturday, May 20, 2017

Comics of the Week #390

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…

Allergic reaction

Minutes old


Subtle response

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

450+ Lightroom Presets and Photoshop Actions – only $27!

This content was first posted here:
Comics of the Week #390

Friday, May 19, 2017

5 Ways to Use 404 Pages Well

Let’s face it, it’s happened to all of us. We clicked a link on social media or on a website to be taken to another website to see some content that we were interested in. Unfortunately, things change over time and links become broken. Pages get moved or redirected, and the inevitable happens. You get the dreaded 404 error page.

Most people are scared to death of this page. It means somewhere a link is broken or there’s an error with your website. However, if you think of it in the right light, you can use your 404 error page to your advantage. If you follow these tips, not all is lost.

1. Create a List of Your Best Content

Just because a website visitor did not find what they’re looking for, it doesn’t mean that they should just hit a dead end. If your focus is on creating quality content, then direct them to your best content.

You have a better chance of someone exploring the rest of your site if you give them suggestions of where they can go, instead of leaving it up to them. They may find the information they’re looking for on another page. This is something that’s important to do on any client’s website.

2. Give away a Freebie or an Incentive in Exchange for their Email Address

Even though a website visitor did not find what they’re looking for, that doesn’t mean you can’t convert them to a future customer. You can offer valuable information or a digital download as an incentive for entering their email address. This gives your client the opportunity to reach out to them later.

For many web design clients, the entire purpose of their website is to generate leads for their business. For some clients, like dentists, plastic surgeons, doctors and lawyers, one customer can translate into thousands of dollars in revenue. It only makes sense to make every effort possible to hold on to that website visitor and try to turn them into a customer.

3. Add a Search Box

If your client’s website is an older site, chances are that pages had been removed or redirected to another location. It only makes sense to add a search box on your client’s website’s 404 error page to make it easy for visitors to search for what they’re looking for. Even though the incoming link may be broken, if you give them a chance to search internally for their topic, the search results may point them in the right direction.

Twitter does a good job of this, directing the user to go straight into doing a site search for the intended topic.

4. Add a Direct Contact form

Many 404 error pages contain a working contact form. This serves a couple of different purposes. If your client’s website is all about generating leads, it is a great way for website visitors to reach out to the business owner directly. Even though they didn’t find the information they were searching for, it still gives your client opportunity to get their business.

Another way that adding a contact form on your 404 error page helps, is that it gives that visitor the chance to report that error. This will give you a chance to fix the error for future website visitors. This will also solve future problems because website visitors will end up where you intend them to, such as a dedicated landing page, or the content that they were looking for to begin with.

5. Don’t Add Humor

Some designers and developers suggest taking a humorous approach to your 404 error page. I’ve always advised against this, because it sends the wrong message; imagine looking for some important information, only to be sent to an error page that is made into a joke.

Most visitors don’t find a broken website to be funny at all. In reality website visitors just want to find what they’re looking for, get in and get out. They also want to do this as quickly as possible, without a lot of runaround.

While making visitors smile is a lighthearted way to handle the situation, taking a practical approach can yield better results.


The suggestions above are meant to keep website visitors from reaching a dead end. You can always turn a negative into a positive by giving users an option to try something else. With that being said, it’s important to understand that you don’t want to put all of these on your 404 error page. Your selection should be made based upon the outcome that you intend for each person that comes to your website.

If you manage your client’s website or they manage it themselves, it is important to follow up with people who experience an error. Many times, the effort of reaching out to them to make sure they found what they were looking for builds trust and rapport with that person. If a user reports an error and they are ignored, it sends a message that you don’t care about each individual user. In this situation, a little effort can go a long way. Also, your client will benefit in the long run from following up with people who experience an error on your website, because it gives you more information about that error so you can correct it properly.

404 error pages are not the end of the world. They have their purpose, too, it is our job to take that purpose and leverage it in the best way possible for our clients. If you use your 404 error pages in the right way they can be helpful, not harmful to your client’s website.

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

This content was first posted here:
5 Ways to Use 404 Pages Well