Wednesday 31 October 2018

The Secret Designer Halloween Special: Nightmare Clients (and How to Defeat Them)

Friends, I come with a warning…not to alarm, but to assist. Grab your crucifix, gather your silver bullets, prime your chainsaw, because I’m about to shine a light on nightmare clients that will chill the heart of the most experienced web professional.

Nightmare clients everywhere, await the unsuspecting designer. They’ll suck the time from your day, relentlessly pursue you, and trap you in a project that you’ll never escape.

My friends, forewarned is forearmed. This collection of fearsome fiends is easy to tackle…if you know their weaknesses. So pay attention, because what I’m about to share, may just save your life (or at least your weekend).

The Nosferatu Client

The Nosferatu client creeps into your home at night, sucking the life from you to feed his own self-importance. Whether it’s a late-night call, weekend texts, or meetings booked for 7am, the Nosferatu client wants to own you, and every second of your life.

The key to defeating the Nosferatu client is setting boundaries and sticking to them.

The Nosferatu’s chief weapon is flattery. You are invaluable to him. Your quick-thinking is keeping the project on track. The work you’re doing is award-winning quality. It is all designed to make it impossible for you to say, “No.”

The Nosferatu client is always looking for ways into your life. If he discovers that you’re working the weekend, he’ll expect you to be available every weekend. Don’t open the door to him.

How to Defeat a Nosferatu Client

The key to defeating the Nosferatu client is setting boundaries and sticking to them.

Let your clients know that you work regular office hours, even if you really work until midnight every night.

Never invite the Nosferatu client into your spare time, once he’s invited in, he’ll never leave.

Never call, post on Slack, email, text, upload files, or make any other sign that you are working after hours. If you finish a deliverable 30 minutes after your official close-of-business, then upload it the following morning.

Never invite the Nosferatu client into your spare time, once he’s invited in, he’ll never leave.

The Mephistopheles Client

Like the devil of Faustian folklore, the Mephistopheles client has a great deal for you. A deal too good to turn down. The opportunity of a lifetime. Never mind the small print, just sign here…

Lots of clients will offer you a terrible deal. It’s easy to turn down solicitation that only offers “exposure”; the Mephistopheles client traps you with a deal that on the surface looks enticing, but has a hidden sting in the tail.

Your terms are a litmus test; if a client wants to modify them, or work under different terms, then look closely at exactly what you’re agreeing to.

Is the client offering you a higher than expected rate of pay? Is the client offering you unlimited creativity? Is the client overly eager to sign you up? Any deal that looks too good to be true, probably is.

It could be that the client has sneaked a clause into the contract that gives him unlimited revisions. It may be that he’s sneaked in a clause that specifies payment on acceptance instead of payment on completion—yes, that has happened to me, and no, the acceptance never materialized.

How to Defeat a Mephistopheles Client

Have a comprehensive terms of service, and attach it to every single quote you send out. Make it clear that these are the terms under which the quote is issued.

Write your terms in plain-English (you probably don’t need a lawyer to draft them). The terms aren’t to cover you legally, or for use in court, they’re to establish ground rules and promote a healthy working relationship.

Your terms are a litmus test; if a client wants to modify them, or work under different terms, then look closely at exactly what you’re agreeing to.

The Zombie Client

The Zombie client is perhaps the most common of nightmare clients, there are millions of them.

The typical Zombie client is slow: sign-off takes weeks, not days; content arrives in months, not weeks.

Be warned…working with one Zombie client will attract more.

The Zombie client knows who his target demographic is. It’s people just like him. He’s certain there are thousands of them, and he intends to use you as bait.

What is worse, the Zombie client is aimless. He doesn’t have a defined goal, and is rarely able to supply a brief. Stray too close to a Zombie and he’ll make you aimless too.

How to Defeat the Zombie Client

The Zombie client is relatively harmless, if kept at arm’s length, but you do need some form of barrier to keep him at bay. The web professional equivalent of electrified fencing is a well-honed project plan.

The Zombie needs to be herded, and actually enjoys being given direction.

Despite his slow speed, and aimless wandering, it is almost impossible to rid yourself of a Zombie client. Years after you think he’s vanquished, the Zombie client will reappear, more often than not asking if you have a copy of his logo on file. Keep an archive of important files like this so you can send it to him and escape; the faster you respond the less likely the Zombie client is to catch up to you.

Be warned, the Zombie client knows countless other Zombie clients, and working with one Zombie client will attract more.

The Wolfman

The Wolfman client often appears to be a regular, even good client. The Wolfman client often doesn’t know he’s a Wolfman. But beware, for the Wolfman is ever-changeable.

Changes define the Wolfman client. One day he’s signed-off on a deliverable, the next day he’s revisiting the project brief.

When the Wolfman client changes his mind he’s like a dog with a bone. The fickleness of his decisions is matched only by his certainty that this one final change will bring the whole project together.

The Wolfman client spends much of his working life confused. The Wolfman will wake, the day after a meeting, unable to recall what was agreed (and wondering where all these chicken feathers came from).

How to Defeat the Wolfman Client

The Wolfman client isn’t a monster, simply a victim of his own nature. But that doesn’t mean you should allow him to make a victim out of you too.

The Wolfman will wake, the day after a meeting, unable to recall what was agreed…

When dealing with a Wolfman client, get all decisions in writing. If a decision is made in a meeting, or on a call, write it down while your memory is still fresh and post it to your project management system (or at the very least pop it in an email). Keep a paper trail.

The Wolfman client is often unaware of his own nature. If you spot one, then try to get off a fixed project fee and onto an hourly rate as quickly as possible; getting bitten by the Wolfman’s changeable nature is a lot less painful when you’re getting paid for every revision.

Fin

Clients often feel like nightmares, because we don’t understand them. The Wolfman doesn’t want to be changeable, he doubts his decisions. Mephistopheles often doesn’t want to trap you, he’s worried about being trapped himself. The Nosferatu client will respect your boundaries, provided you let him know what they are. The Zombie client will hang around, but is relatively harmless unless you let him slow you down.

When we take the time to establish good working relationships, by managing expectations, setting boundaries, and keeping our work process transparent, nightmare clients have a lot less bite.

So the next time you find yourself confronting one of these fearsome fiends, remember this advice dear friends, and you’ll escape unscathed.

Happy Halloween!

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

Source

from Webdesigner Depot https://www.webdesignerdepot.com/2018/10/the-secret-designer-halloween-special-nightmare-clients-and-how-to-defeat-them/

Monday 29 October 2018

3 Essential Design Trends, November 2018

When looking at good design, I often look for things that aren’t totally obvious. There’s an instinct that you like something before you know why. That’s the common thread among this month’s three essential design trends.

From animations that delight and take projects to the next level, to white space that makes a design so approachable, to dark color overlays that enhance readability, these trends contribute to better user experiences.

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

1. Next-Level Animation

Nothing makes you want to click around and engage with a website like a delightful animation.

While full-screen video is still one of the most popular animated effects of the year, other opportunities for animation can be just as impressive. Use animation to bring attention to certain elements, create the scene for your story and grab user attention or prompt continued engagement with an interesting way to navigate a design. Each of these techniques is used in the examples below (you should definitely click through each to see the animated effects in action).

What makes a good animation? Here’s how each of these designs takes animation to the next level:

Mistretta Coiffure uses a water effect over still images so that the whole background seems to be right below the surface of a pool. Text elements are static to ensure readability. The effect isn’t overwhelming and it’s something that feels unique to the content of the website for a salon—which uses a lot of water.

Wonderland uses animation in a more interactive way, meaning users have to engage to activate it. Each of the photos in the row across the bottom of the screen serves as a secondary navigation element. Hover over any one and it pops up into a larger element and impacts the background as well. This instance of a cool hover animation can help encourage users to interact more with the design.

Naturalis Topstukken takes a completely different approach—every card in the design is part of the complete website. User-controlled animation allows you to drag and drop elements on the screen to enter different parts of the website. It almost feels like a game. The design is highly engaging and for those that don’t quite “get it” the screen scrolls on its own after a few seconds to encourage that first click.

2. Large White Margins

One of the most dramatic—and easy—ways to draw attention to a design or specific element is through appropriate use of white space. While many designs have trended toward more packed full-screen designs recently, there’s a growing shift back to open space.

And there’s a reason for it.

This technique and design make content the focus for users. Elements surrounded by white space are obvious focal points. The simplicity and balance of such as design is easy to engage with and isn’t overwhelming to the user.

Maybe one of the best things about a design with so much white space is that it feels approachable. The clean white space in the design does draw you in.

Think about some of the color associations of white—purity, light, goodness, perfection, cleanliness, safety—all of these are inviting and welcoming feelings that come with an open white background.

Looking at the examples below from Panda Monk, It’s Alive, and Centros, it’s easy to see how this feeling comes from each of the designs. It’s as if each website is inviting users to engage and learn more.

3. Dark Color Overlays

One of the website design trends that’s been popular is use of dark backgrounds in design projects. That trend has extended to the foreground with dark color overlays on images as well.

While this technique can look cool and help emphasize brand colors, there’s another key reason for using dark color overlays. This technique can help make text elements more readable over photos or backgrounds elements with varying light and dark colors.

Each of the examples below uses this concept in a slightly different way:

Lafayette Grande frames an image with a dark color overlay with a double-stacked navigation menu using brand colors. It creates a solid frame that then drives users down to the main headline.

Julius Silvert uses a full screen video b-roll background where all of the images have a mostly transparent dark color overlay. On scroll, the overlay darkens to a mostly saturated box so that text is easy to read while the video still runs in the background. This is a great solution to the probable presented by moving images—it can be tough to find a good place to put text elements so that they are easy to read at all times. The dark color overlay solves this problem nicely.

Scalzo Design uses a dark background plus dark color overlay on images to draw users into his portfolio. The overlay shows that there are visual elements to explore but maintains a focus on the words first, before users get too deep into visual content. This leaves users with the information that Scalzo is a designer first and showcases the work second for a strong first impression.

Conclusion

While some of the animated techniques featured here are more complex techniques, you can start small with a similar idea. The key to using any trendy design element is that it works with the content in the design, contributing to the overall message.

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

Source

from Webdesigner Depot https://www.webdesignerdepot.com/2018/10/3-essential-design-trends-november-2018/

Sunday 28 October 2018

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

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

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

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

New Adidas Site Takes it Back to the ’90s

 

100 Days CSS

 

The Evolution of Website Web Design Trends from the 90s to Now

 

Don’t Be Design Shamed Because You like What Adobe is Doing

 

8 Tips for Great Code Reviews

 

The Scandinavian Rule that Every Designer Should Follow

 

Websites in 2018

 

Is Gutenberg the End or a New Beginning for WordPress?

 

Crack Adobe CC with this Keyboard Cheat Sheet

 

Bird Scooter Redesign

 

Keep Notes on the Web is the Latest to Get a Material Design Refresh

 

Dangerous Times in Design

 

Bad Practices on Phone Number Form Fields

 

User Experience: How to Improve your Website UX with Humor And Cuteness

 

6 Ways to Improve Contrast in your Designs

 

Site Design: Friends, a Collaborative Design Company

 

Chrome 70’s Best New Feature is Picture-in Picture

 

Now You See It: Dark Patterns in Design

 

Confessions of a Flawed Designer

 

Typographica: Our Favorite Typefaces of 2017

 

UI Design Inspiration – Oct 2018

 

Web Accessibility for 2019

 

You Know your Web Page Sucks When it Cost 7-million Dollars To read!

 

Black Light Pro – Color Effects on a Schedule

 

Making your Design Systems Dynamic

 

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

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

Source

from Webdesigner Depot https://www.webdesignerdepot.com/2018/10/popular-design-news-of-the-week-october-22-2018-october-28-2018/

Friday 26 October 2018

7 Ways To Design for a Global Audience

Before you ever sit down to design a website for a client, you develop user personas that are representative of their target audience. Once you’ve established an identity for the main user (or users), you can more easily shape an experience that caters to their needs and motivations.

But what do you do when the target audience isn’t so clearly defined into one or two neatly packaged personas?

Take a website like Zappos, for instance.

Zappos serves customers all over the world. So, how does one go about designing a website for an unidentifiable audience? Granted, you would know they’re interested in purchasing shoes and accessories online, but that’s about it.

Today, I’d like to address the matter of geography in web design as it’s an important one to consider and could have a significant impact on your conversion rate if not handled properly.

How to Design for a Global Audience

You might think it’s easier to design a website that appeals to international consumers than, say, one that targets users in a smaller geographic region. After all, if you’re not focused on targeting one segment of the population, then anything goes, right?

Not so fast…

Great care must be taken when designing a website that’s meant to appeal to an international audience. Here are 7 ways in which you can safely design for and appeal to a broader, global audience:

1. Make Translation Easy

Unless your website speaks directly to an audience located in a region of the world that speaks the same language, it’s better to plan for a space on your site that allows for quick translation. For many websites, a language/country widget appears in one of the four corners of the site—in the header or the footer.

Ideally, so long as visitors can find it easily, it doesn’t matter where you add it to the design.

For instance, this is the Smart car website:

In the bottom-left corner of the page, users can select their Country/Region. This makes the site go from something like this in English:

To something like this for Russian speakers:

Not only does this translate the website for users, but it also provides them with localized information, targeted at their geographic location.

2. Keep Design Minimal

Because you’re designing for a large, international audience, you have to be very careful with certain design factors that might not be perceived the same way from country to country. (I’ll discuss each of those a bit further down below.)

To ensure that your design:

  • Doesn’t offend anyone;
  • Is accommodating of other languages and cultures;
  • Plays well with browsers and devices for users around the globe;
  • Performs just as well for someone located next door as someone located halfway across the world.

Use a minimal design.

This allows you to present a clean and simple narrative that won’t be disrupted by any number of factors that could get in the way.

Take Physiq Apparel, for example. There isn’t much needed in the way of text as the strong image speaks for itself. The navigation also contributes to this overall uncomplicated and universally appealing design.

3. Watch the Layout

Thanks to responsive design, we don’t really have to worry about strange layouts not translating well from one user’s device to another’s. That said, when you take a website that’s written in one language and put it into another, you do have to think about layout and spacing in a way that you wouldn’t for monolingual sites.

Diane Bonheur’s website is the perfect example of this.

Here is the English version of the site:

Now, slowly scroll down and compare the same section in Japanese:

The design is slightly off for both because of how much room each of the languages need. For starters, they’re not identical translations, which leads to a variation in number of lines. And, because they use different character sets, spacing is much different, which actually leads to more of the pictures being revealed for Japanese visitors.

Varying alphabets. Text direction (right-to-left, top-to-bottom, etc). Length of translations. Pay close attention to these subtle distinctions between languages, so you can plan the design for to work well with all of them.

4. Use Safe Colors

Understanding something like complementary color contrast makes sense in the work of every web designer. As does the matter of using colors that work well in terms of accessibility. But what about the psychology of color and how that translates in other countries? That’s why major e-commerce sites like Amazon, Zappos, and Walmart use neutral-colored interfaces.

Their logos have color within them as do the products sold on the websites, but each of these sites plays it safe by avoiding major swatches of color that could hold a negative connotation for some users.

5. Personalize But Don’t Localize Images

Images are another element to be careful with as you don’t want to isolate or unintentionally offend any of your audience if you’ve favored one geographic segment over another. As such, when choosing images for your site, consider personalizing images for the different geographic subdomains, but don’t localize them.

Here’s what I mean by that: Belmond uses this video to welcome visitors to its English landing page:

For other speakers, it uses a variety of welcome images, including this one:

Instead of putting the focus on people that are representative of the cultures or geographic areas this site targets, the designer is highlighting the experience sold here.

6. Be Careful with Shorthand

When designing e-commerce sites for English speakers, there are certain icons your users likely recognize that allow you to establish a sort of shorthand for headers:

  • Three horizontal lines laid atop one another for a hamburger menu;
  • A shopping bag holding the place of the online shopping cart;
  • A magnifying glass for search.

While it’s okay to use some symbols to cut down on clutter, you have to be careful about which ones you use on international websites. If you can’t guarantee that each symbol included in the interface will be understood, it’s probably best to spell each of those elements out as Bellroy has done:

As you can see towards the bottom-right, Bellroy does still use a symbol for live chat. However, since this icon is encapsulated in a button-like design element, this is fine. Users will be prompted to engage with it, unlike the header which needs to remain simple in design.

7. Simplify Contact Form Design

Unless you want to build out specially designed contact forms for each language your site is translated into, it’s best to use a universally friendly form design.

Here is a good example of this:

As you can see, Nordweg keeps it simple. Each element of the form is clearly and simply labeled outside the field (which is good for accessibility, too). And, more importantly, it isn’t formatted in a way that suits one user over another.

Take, for instance, contact forms that ask for a First Name and Last Name, and in that specific order. In some cultures (like Japan), that logically wouldn’t make sense as the last name should appear first and you might run into issues with users providing their last name as a first name and vice versa.

Or what about addresses? You ask for the Street, City, State, and Zip Code… but those fields don’t apply in every country. Even if they do, they aren’t always formatted the same way. The same goes for phone numbers.

So, be careful about how you design contact forms. They should be something your users want to fill out and not something that makes them question whether you cater to customers in their geographic region.

Where in the World Is Your Audience?

To design a website that’s welcoming of all visitors, it requires a certain degree of sensitivity and balance. The 7 tips above will get you started in thinking the right way towards your global users.

For those of you who design websites for the opposite end of the spectrum, stay tuned for my next article which handles designing for the local consumer.

Add Realistic Chalk and Sketch Lettering Effects with Sketch’it – only $5!

Source

from Webdesigner Depot https://www.webdesignerdepot.com/2018/10/7-ways-to-design-for-a-global-audience/