Outgrowing Growth-Driven Design

I’ve been designing for the web for a while. Since the days of table-based sites when we spliced our images and added them into <tr>s and <td>s. The days of hit counters, Flash splash pages, and keywords stuffed into the bottom of pages (along with text links bought and sold like penny stocks) to fool the spiders. Those trends served their time (well, some of them anyway) but we have outgrown them as a design community.

And as the times progress and the community and its members mature (well, most of them anyway), more trends are thrown at us in a proverbial game of buzzword dodgeball. We may catch a couple, but the vast majority miss their mark completely.

Enter the prodigal son: Growth Driven Design.

The latest buzzword is being recklessly thrown at us like a barrage of red rubber playground balls by marketers, customers, and companies trying to sell us things that we don’t need and that won’t change our design process.

Is this one we should catch, or dodge?

Growth Driven Design is Not About Design at All…Or is it?

The phrase must have been coined by a marketer—a smart one!

One way of looking at it (mine) is that Growth Driven Design is a business approach—not a design approach. Unlike its predecessor design systems, GDD is only about creating websites that are better for business, not necessarily better designed. GDD “experts” talk about the “traditional website design process” being broken, but the frustrations they speak of are related to budget, timeline and results—not design.

In fact, I would challenge GDD proponents to look at any site I have designed and tell me if it incorporated a GDD approach or not.

I guarantee you they won’t be able to. And the reason is that GDD is not about design.

Drilling down into “how it works” of growthdrivendesign.com however, will uncover another way of looking at it (also mine): GDD is what we, as designers, have always done.

Growth Driven Design Strategy  

At the strategic level, GDD is about understanding the audience’s world and how your website can solve problems along their journey. Admittedly, we didn’t define it clearly enough in the beginning, but who in this design community ever attempted to redesign a website without first seeking to understand the target persona? We have been doing this for years.

The Launch Pad MVP  

The next step of the process is defined as “build quickly and deliver something that works better than the current site….then iterate” Again, this does not speak about design. Moreover, I find myself asking yet again, has there ever been a web designer that did not focus on delivering quickly and generating a design that performs better (fully knowing that it will be iterated on and optimized further down the road)?

Continuous Improvement

Setting aside the business-side of the equation for a moment, I have never met a designer who would choose not go back and optimize designs if they could. I have, however, met many customers and agencies who do not want to pay for continuous improvements to a site and therefore stifle the designer’s innate need to continually improve.

It therefore comes down to this: design, by definition, is (and always has been) growth-driven. The current state of the buzzword is designed (excuse the pun) to help customers recognize and agencies sell what designers have long known and practiced.

To GDD or Not to GDD?

Let’s forget about GDD as a buzzword for a few minutes (bench it, if you will). Now that those paying the bills have caught up and want us to keep doing what we have been doing (albeit, call it by another name), what’s a designer to do?

The answer is a 3-step solution based on a methodology that involves the design process, but does not change it.

1. Understand the Need

Customers have started asking for a growth driven website. Often, if asked to describe what they mean, they will either:

  1. Stutter and not know (hint: this unveils GDD as a buzzword—those who use it, don’t fully understand it—they just think they need to have it to keep up with the Joneses); or
  2. Explain that they want it quick, cheap, and easy to change based on data.

In either case, explain that this is your modus operandi; that you have worked this way since long before the term was coined and frankly, can’t imagine a design process that isn’t growth-driven.

2. Use a Growth Engineering Approach with the Entire Team

Once you recognize that GDD is not about design at all, but rather about the entire process of websites, you may find it beneficial to change how you work with the entire team.

Tackling unknown, dealing with changing priorities, relying on data—these are not problems reserved for designers. The entire team deals with these issues—both on the client side and the agency side. The solution is a growth engineering approach to the process.

We believe in investing in processes, not in projects. For example, in our recent work on a SaaS client’s site, we uncovered a need to not only improve the website, but also build a mobile app. We involved our content team to create assets that provide value to the target persona and even got granular with the client’s product team to make some required changes to the product itself and their onboarding process.

Growth Driven Design is just one cog—the entire machine needs to work in iterative processes where all participants learn and apply in continuous cycles. Our culture is driven by numbers, out-of-the-box creative thinking, and passion for engineering growth.

3. Use a Pattern Driven Approach for Design

While design principles per-se are not altered in a GDD approach—your fonts, white space, lines, iconography, etc.—how you go about putting them together may be improved.

Ever pondered the term homepage? The pattern driven approach can take that analogy to a new level. Instead of building a home—that is hard, expensive, and time-consuming to renovate, we are building a wardrobe. We define the style and create many pieces that can go together and swap out easily. If your neighbor gets a new roof and you want to keep up with the look and feel, you are in for a long and costly venture. But if your neighbor’s daughter gets a new hat, a quick trip to the mall (or the Amazon app) will have your girl in one that’s even better before the bell rings for recess—she can even do it herself because the style has already been defined.

We design patterns. And how they relate to each other in an organic way. Let’s say a section intro block that has:

  • An H1 heading
  • A description <p>
  • A CTA button

That’s a pattern! Why should we recreate the same pattern for a testimonial block? We just need to duplicate the same pattern, replace the description <p> with a blockquote, replace the CTA with the person’s avatar et voilá!

This pattern can be easily replicated for each page (even sometimes between projects) making the design process more efficient and more exact as patterns always fit the grid.

Using a pattern approach makes the user experience on our sites flow better and enables our designers to spend less time on the “science” and more time on the “art.”

At the end of the day, we deliver quicker and whether they understand the why or not, customers are happier with the deliverable and end up sending us more work (and referrals!).

Growth Driven Freedom

If Growth-Driven Design isn’t about design, then what is it about? In a word: independence.

Creating websites built on patterns puts growth in the hands of everyone—both clients and agencies can run tests and make changes easier than ever. The idea of constant improvement moves from the realm of buzzword to standard operating procedure. Aligning with customers and consultants about the need to continually improve gives power to the people.

In an era long fallen by the wayside, marketers used to need a coder to make text changes to their sites. Then came CMSs that gave them the power to update text themselves. This did not put coders out of a job, it allowed them to focus their efforts on actual coding rather than a Find and Replace script for new buzzwords.

In much the same way, GDD empowers marketers to update site designs based on data they track—and it will not put designers out of a job—it will allow us to focus on designing rather than changing the CTA button from red to orange…and back again.

Is GDD a buzzword? Perhaps, but that doesn’t mean you can’t ride the wave of its popularity to create the same beautiful and effective web designs…in a new way.  

Now, who is up for some GDDodgeball?

Source

7 UI Choices That Damage UX

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

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

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

1. Unwanted Modals

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

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

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

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

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

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

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

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

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

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

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

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

2. Guilt in Copywriting

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

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

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

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

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

3. Fullscreen Interstitials

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

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

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

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

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

4. Slide-in Ads/offers

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

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

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

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

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

5. Custom Scrolling

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

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

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

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

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

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

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

6. Nav Menus Without Padding

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

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

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

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

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

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

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

7. Paginated Listicles

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

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

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

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

Source

How to Automate WordPress Installs and Setup

One of the great things about WordPress is how easy and quick it is to setup. Many web hosts now offer management dashboards with one-click WordPress installation, often with the option of pre-installing some of the most popular plugins and themes. Even if you install WordPress manually, the process is pretty simple. However, if you’re frequently setting up new sites…. Continue Reading

The post How to Automate WordPress Installs and Setup is written by Rachel Adnyana and appeared first on WPKube.

7 Ways to Design at Lightning Speed (and Still Be Good)

Some of the world’s best designers – and even the best designers where you work – all have something in common: Many of them know how to work at lightning speed. And the work is still good.

While part of this speed work comes with experience, some of it is comes back to solid work habits and great time management. Working quickly and efficiently can be great for helping you make good with the boss, and for freelancers, taking care of tasks quickly can result in the ability to take more jobs (and increase your earning potential).

So how do you get faster without sacrificing quality? Here are seven tips that you can start using today.

1. Create Shortcuts and Styles

No matter what software or tools you prefer, a set of basic libraries, styles and presets will make your life easy. That’s not to say you use the exact specification for every project, but it establishes a starting point so that you can switch fonts, colors or layouts with just a click.

One of the first things you can do is establish a set of universal quick, or shortcut, keys for all programs you commonly use. (I love the “Duplicate” function, but every piece of software uses a different keystroke combination; I always create my own cmd+d, so that the command is universal and not clunky.)

Take this a step further and create basic styles for common text bits – body text, headlines, subheads, captions, quotes – with quick keys. Then when you need to change a font, size or color, styling is universal. (This can make work in Adobe products a breeze and can dramatically speed up the prototyping process before the first line of code is even written.)

2. Organize Consistently

There’s no right or wrong way to organize your design files. (We aren’t getting into that here.) What matters is that you have a consistent system for how you do it.

If you organize files in the same manner every time, using folders, layers or labelling, then you will always know where to find things as you move through iterations of the design. Other members of your team will appreciate this consistency as well, because it will make it easier for them to use your projects as well, while understanding the filing system.

This applies both to how you organize objects and information within files and how you create and use folders outside of the actual project file.

3. Have a Go-To List of Typefaces

For the projects that don’t come with a set of typography specifications, it can help to have a short list of go-to typefaces to jumpstart projects. Your arsenal should include a couple of serifs, and few sans serifs and one or two novelty or script options for special use.

You won’t always end up using typefaces from this “de facto palette,” but it will get you moving quickly on the overall design outline. It will help provide a starting point for font pairing combinations that you can actually show a client almost immediately (and get a feel for how they react to those type styles).

Bonus tip: This concept works great for color palettes, too.

4. How to Use the Right Tools

Using the right tools for the job can make all the difference in the world (and prevent a lot of rework later). Think of how many times you’ve come across a logo in a raster format when the right tool is vector-based software, such as Adobe Illustrator.

This applies to every aspect of design work, both for online projects and printed materials. As a general rule, anything that’s part of a branding scheme or might be needed for multiple uses (logos, characters, iconography) should be designed in a vector format. You can also scale it down or save other files types, but you can’t go from a gif to a scalable image. One time use objects and elements can be designed using small, raster formats or with CSS tools.

Remember, no matter what file format you need for the final version, save everything in a native file for easy access later. Native files are a lot easier to edit and adjust. 

5. Use Premade Parts

Repeat after me – you do not have to create everything from scratch to be a good designer. Particularly when it comes to website projects, use available kits and tools as appropriate to speed up workflows. Most buttons don’t look that dramatically different; it’s ok to start with a kit that includes buttons, icons or other user interface elements. And it will save you a lot of time.

If you plan to use some premade parts of kits, invest in a high-quality option that’s easy for you to edit and adjust. A set of buttons won’t do you any good if the colors or fonts can’t be altered. (While you are looking for user interface kits to help you get moving quickly, grab a couple of nice mockups as well. Clients love seeing their projects displayed in this manner.)

6. Cut Out the Clutter

A clean workspace makes for a happy designer. Cutting the clutter comes in two phases when it comes to your digital space:

  1. Keep files and folder clean and free of old versions or materials that aren’t going to be used. Project files and folders should only contain usable materials. If you want to store older versions, set aside a specific location for those elements.
  2. Clean your computer of distractions so that you can work without checking email or Facebook or getting lost in shopping online. (Admit it; this has happened to everyone.) When a project is pressing or even if you are just “feeling it,” turn everything else on your computer off (especially those pesky notifications) so you can focus on the work at hand. You’ll finish sooner and then have time for all that extracurricular activity.

7. Start in Black and White

Every good website starts with a solid wireframe. That mantra can apply to the design of any element. Whether you start with a sketch on paper or screen, a black and white outline can be the first step to creating something with plenty of practical application.

Used as a tenet of logo design, a black and white concept is something most projects will need to include at some point anyway. (You might need to use the design in single color printing or all white over a hero header image.)

You’ll end up doing a lot of backtracking if your design won’t work in these ways. An efficient process starts with black and white and then color and details are added once the black and white concept is finalized. 

Conclusion

Ready to get faster? Start at the top of this list and work through the tips until you are starting to shave time off design projects. The key to working at lightning speed (and staying good) is focus. There are so many distractions that take us away from good processes and work practices, go back to the basics to get reacquainted with good workflows.

And good luck. Becoming a quicker designer takes time and patience. Give yourself room to grow.

Creative Commons photos in this article are from Unsplash.

Source

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

Websites We Like: May 2017

 

Here are Some Popular Design Trends in 2017

 

8 Graphic Design Trends for 2017

 

Finally, Photoshop is Dead for Web and App Design

 

Refreshing the Atlantic Homepage in 2017

 

How Google Reimagined 2,000+ Emoji

 

Scott Gilbertson: ‘Kill Google AMP Before it Kills the Web’

 

Inspirational UI Design Ideas for your Next Website Project

 

Can a Font Be a Whole Brand? YouTube Thinks So.

 

Mixfont: A Font Generator for Aesthetic Font Pairings

 

The Slash Workers

 

IKEA Online Made More Personal: Redesign Concept

 

User-Centered Design: An Introduction

 

Desktop-First Design Tips for Responsive Websites

 

Helpful Extensions for Front-end Developers and Designers

 

Design ‘No Results Found’ Pages that Get Results

 

Starting Small in Web Design

 

Logopony: Make your own Beautiful Logo with AI

 

Treefort – Organize your Team

 

PayPal Files Lawsuit Against Pandora for Mimicking its ‘Iconic Logo’

 

Ambiance – Color Palettes You will Love to Stare

 

Workspaces for Mac 1.0

 

Google Quick, Draw! — the Data

 

Designing for VR: A Beginners Guide

 

Inside Design: LinkedIn

 

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

Source

Comics of the Week #391

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…

No competition

 

Relax, he needs a site

 

Growing pains

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

Source

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

FREE!

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.

Source

Pixel Caffeine Review – Easily Add Facebook Pixel to WordPress + More

If you’ve ever visited a website only to immediately start seeing that site’s ads on Facebook, you’ve probably wondered how that site manages to target you so accurately. Don’t worry – they aren’t tracking you through some grand NSA conspiracy. Rather, they’re using something called Facebook Pixel to track your movements on their site (and then retarget you later on)….. Continue Reading

The post Pixel Caffeine Review – Easily Add Facebook Pixel to WordPress + More is written by Colin Newcomer and appeared first on WPKube.

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.

1. ARNGREN

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.”

4. IFINDIT

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.

5. EASYNETT

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.

9. Taco.com

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.

Source

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.

2

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.

Onboarding

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.

Conclusion

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.

Source