Tuesday 28 February 2017

How to visualize a startup’s USP

Common web design problem: Just writing out why a company is special is usually an insufficient way to tell a story to people in a way that will give them a rapid understanding of what makes a company’s product or service awesome.

We have to get visual—people should be able to blur their eyes when they land on a site and know what you do, and what key actions they would take on the site immediately. But it also takes deeper collaboration with key stakeholders in the company you’re working with to be on board, so you can allocate project resources.

Ideally a site visitor in a company’s demographic should have a positive reaction to the site that is instinctive and immediate. This is why it works so well when sites use photography of a person smiling, interacting with the product or receiving the benefit of the service; when visitors see that, it’s their natural instinct to imagine that scenario—with themselves at the center of the scene. A website created with an understanding of how humans instinctively react to certain types of imagery, will most certainly be more effective in driving action.

If someone imagines themselves as a client, or enjoying the benefits of a product when viewing someone smiling and doing so, it’s referred to as the “mirror effect,” and you can use it to your advantage if you can first get to the core of why the startup you are marketing appeals to it’s best customers. This works best in conjunction with “future pacing” or website copy that invites them to think about what it will be like when they are enjoying their new purchase—like “imagine how you will feel ten days from now when you are driving a Tesla home from work.”

Ask: “Why do your best customers come to you vs. the competitor?”

The answer to this question—is not only pinpointing the core demographic, but is also digging up the key differentiation that’s so critical to hammer on, in a website design. If you can determine not only who the best customers are—but why they come to your client and not their competitor, then it’s time to show the visual representation of that somehow.

Dig deeper—ask key stakeholders or people in the startup to give actual examples of people that have told them why they went with them over competitors. If there is a sales team, there will be many examples, since people often chew through their considerations before closing a deal. If it’s a product, talk to those doing customer service and ask them the questions they get asked over the phone with people considering purchase. These questions, and the positive answers that led to a sale, will be keys to showcase visually on the site.

For instance in the case of juicing startup Juicero, their biggest differentiator is the lack of a mess and the no-hassle aspect of their first at-home cold press juicer for mass market. They show someone enjoying the juice, but also a very clean counter behind them—the number one differentiator between their solution and cheaper at home juicers that make an incredible amount of mess.

If your product has a better user interface than the competitor – perhaps show that in all its glory in a couple different devices, so people can get a feel for what they’re buying, like this site for Oppsource.

And of course – if it’s a beautiful product, simply showcase it with well done photography in a way that shows its best features like this site for Starry Wi-fi systems.

Ask: “What does a successful interaction look like physically? What does a pleased customer look like as they’re receiving the benefit of your product or service?”

A happy customer is always going to be your client’s best sales tool. Whether they be through referral, testimonials on your website, or my favorite—photos of previous customers, or pictures of people happy and receiving the benefit of what the company does.

For a traditional business—this might be a satisfied man in front a perfectly cooked steak, taking his first bite, or a woman looking at herself in the mirror with something she finds fits her perfectly well. This is the single most effective principal of effective web design—it’s not about your product or service, and every detailed feature, it’s the customer or client experience—the benefit, and showcasing the emotional appeal of that benefit that will tell the story you need for the site visitors to feel.

For this medical device and solutions startup Nuance healthcare solutions, they needed to show that their documentation solutions aren’t just the same old, but rather make it more natural with visual components, voice documentation, and imaging exchange within the software.

By showing someone, directly benefiting from the solution—interacting with a patient and using voice documentation, rather than taking notes, they are able quickly allow a visitor to understand, at an instinctual level, how their practice might benefit from the software.

Ask: “How can we get photography, iconography, graphs, visual statistics and trust factor badges to support the claim of superiority for this offering?”

Of course it’s not just about the homepage hero section—there are ways to do icons in a way that feels commonplace and generic, and  then there are ways to do them that feel intentional and specific to your brand.

Ask: “How can we show your real team in a fun and down-to-earth way that helps people trust you?”

People want to see who works for the company. Whether that’s two founders by themselves, a 15 person team at a grill out, or even like this photo for Buffer, sharing transparently how they spent 100k on their team retreat and – thanking customers for their support through their subscription:

To recap, the keys to helping people have a positive reaction when they land on the page are:

  • Making it easy for them to find what the site is about quickly, and what key action the site is for.
  • Showing smiling faces of customers—or smiling faces on the startups team.
  • Demonstrating the benefit from the startup’s product or service in a visual way by showing it in action, or someone who is receiving the benefit. Make it immediate and evoke emotion.
  • Display brand appropriate iconography that actually makes sense with the key points of differentiation the site is supposed to demonstrate, and consider how motion can communicate those unique value propositions.




Found

The document has moved here.


Apache Server at www.mightydeals.com Port 80

Source

from Webdesigner Depot http://www.webdesignerdepot.com/2017/02/how-to-visualize-a-startups-usp/

American Cancer Society Launches Major Redesign

A medical website is only as good, and helpful, as the clarity of the information presented there and the navigability of the site. In acknowledgment of this, the American Cancer Society recently redesigned its site in order to serve its site visitors more effectively. When you’re searching for information about cancer for yourself or family members, you need to find what you’re looking for easily and efficiently.

The Society sought to better serve patients, medical professionals, caregivers and others who are searching for cancer resources. The ACS’s site didn’t only get a facelift; it also was moved onto another platform: Adobe Experience Manager (AEM) to achieve this goal—more than 10,000 webpages were also moved over from the legacy content management system of ACS to AEM. The site is one of the most highly trafficked sites for cancer information, so it was crucial that the UX and mobile friendliness were improved for faster searching success.

While UX and navigability across all devices were primary redesign goals, so was making the site bilingual, specifically to serve the Hispanic audience. The solution? The redesign also resulted in the creation of a Spanish-equivalent site that’s fully functional.

The redesign was quite a challenge because it involved a slew of different objectives.

Finding information on particular forms of cancer is a high priority for many visitors, so the redesign focused on creating better navigation paths that empowered them to discover the information they wanted more easily, including launching the new Cancer A-Z Glossary.

News on cancer is a big part of patient and doctor education. The redesign made sure to establish a lively news center where the content is tagged by cancer type and other, vital particulars. This allows visitors to efficiently filter the news via one-touch access.

Along with the above, 12 unique templates were created to provide ACS site managers with the flexibility the required to create custom pages. At the same time, they were able to stick to ACS design and brand guidelines for a consistent look and feel across the redesigned site.

The end result is a faster site with better information architecture. Part of that is attributable to the clean, minimalistic design approach, too. The homepage features a lot of white space, which helps visitors focus on important site elements like:

  • The navigation bar
  • The headline (mission statement)
  • The Donate CTA
  • Contact info
  • The hero image

Scroll down below the fold, and you’ll also see a card-based design that easily chunks content into different information groupings and sections for a seamless transition.

The site’s color palette is also accordingly minimalistic, with red, blue and white being the main colors repeated throughout the design.

Overall, the ACS’ redesign is a study in how good design makes life easier for visitors by improving usability. For a medical resource site like the ACS, there’s no more important task to be accomplished by the designers, as millions of people around the world depend on its high-quality information to help them make educated decisions about their health.



Found

The document has moved here.


Apache Server at www.mightydeals.com Port 80

Source

from Webdesigner Depot http://www.webdesignerdepot.com/2017/02/american-cancer-society-launches-major-redesign/

Monday 27 February 2017

Essential design trends, March 2017

Here’s the point of emphasis…

That’s the theme this month. This collection of trends focuses on adding emphasis to the design with specific detailing from italics to split screens to stark, minimalist backgrounds paired with a trick or two.

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

1. Split Screens

Split screen design was something that started gaining traction in mid-2016 and now it is a big deal. Browse through collections of website design and split screen outlines are everywhere.

What’s nice is how quickly the style has evolved. Early split screen designs featured mostly symmetrical designs with a yin and yang style aesthetic. The new split screens have a more “anything goes” feel to them.

The three examples below show three very different ways to use the same trend.

  • Rency uses a split design to contain a loop video and the main navigation. The contrast between the white area and red is stark and forces the eye across the screen. It also ensures the user will find the navigation because it is the only element within the colored portion of the design.
  • GECN is a complex governmental site that uses a split screen to convey two different ideas with two links immediately in the design. While the split isn’t full-screen and contains a lot of text, this is a good alternative for a design with lots of calls to action, user bases or complicated content.
  • Bashful uses a concept similar to Rency but with a twist: The design features a full-screen video loop and half of it is covered with a tinted color box. All the clickable elements are inside the tinted area and the navigation menu is hidden in the top right corner of the video.

What each of the examples have in common is that the split screen design adds emphasis to the content. It helps drive the users to specific elements in the design through use of color and with actual or perceived movement, thanks to contrasting “screens.”

The best part of the newer split screen designs is that there’s an asymmetrical flow to them. Designers aren’t stuck in a yin and yang format and the result is much more interesting visual patterns.

2. Italics

One of the least used character styles is getting more play as a display option.

Italics are making their way into the typography palettes of designers, and not just for the occasional point of emphasis. More italics are being used for display typefaces, secondary elements such as links or menu items or for broader emphasis.

Italics are a fresh take on your typical type styles. Because they aren’t so widely used, this trend is one that is sure to grab the attention of visitors, even if they aren’t sure what about the lettering got their attention in the first place.

Italics are a subtle change that don’t even require a new typography palette. They do come with some cautions and suggestions for best practices.

  • To make the most of italics use them sparingly for small blocks of text.
  • Use a highly readable typeface if you plan to italicize; novelty options can get tricky.
  • Use the typeface italic and don’t try to create your own version by slanting letters. (That can get messy in a hurry.)
  • Use italics to represent commonly italicized elements, such as the title of something, as showcases in many of the examples below.
  • Pair italics with a simple effect, such as an animation or color, for even more emphasis.
  • Because italics can be a little more difficult to read, make sure there is plenty of contrast between the type and background.
  • Pair italic type options with a simple serif or sans serif typeface as to not detract from the italic.

3. Solid Backgrounds with a ‘Trick’

One of the easiest ways to create visual emphasis is with contrasting elements. While a solid color background might seem plain or flat, it can be the perfect canvas for a design trick, such as animation, illustration or sound.

The contrast between the starkness of the background and the trick, helps bring the user interface element to life. From the simple bouncing squares in the 3K design to the fun cartoon from Retrace Health to the parallax scrolling of Florian Monfrini.

Each of the effects stands out because of the simplicity of the background. Further, these backgrounds don’t get in the way of the design either. Each one is white or pastel and fades out of the foregrounds so that users focus on the messaging of the primary content. (Black or simple dark backgrounds can work equally well.)

This is why it works: Users aren’t caught up in the canvas and the design almost pops off the screen. It’s almost like art on a wall. If the wall is painted with wild colors and patterns, it can be tough to see the framed image that you are there for, but a piece of art on a white wall is a showpiece.

This design trend creates a showpiece for that trick you’ve been wanting to incorporate into a project. It can be almost anything. And it will be the highlight of the design with a simple canvas to display it on.

One caution when planning a color choice for a simple background: For the most impact stick to a white, black or neutral color. Bold, bright colors are almost a design trick in themselves and might detract from your goal.

Conclusion

Every design needs to place emphasis on something. That’s why this group of trends is so refreshing. Each underlines something important for users with an easy to understand way of providing emphasis. Users know exactly what italics mean and they can see variance in split screens or backgrounds that contrast with user interface elements.

What trends are you loving (or hating) right now? I’d love to see some of the websites that you are fascinated with. Drop me a link on Twitter; I’d love to hear from you.



Found

The document has moved here.


Apache Server at www.mightydeals.com Port 80

Source

from Webdesigner Depot http://www.webdesignerdepot.com/2017/02/essential-design-trends-march-2017/

Sunday 26 February 2017

Popular design news of the week: February 20, 2017 – February 26, 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.

55 CSS Checkboxes

 

Do Responsive Sites Have to Be so Tall on Mobile?

 

How I Started Drawing CSS Images

 

CSS Cheatsheet for Box Alignment

 

Responsive CSS Patterns Without Media Queries

 

The Circular Design Guide

 

Design Patterns for Humans

 

Netflix’s New Design Series Spreads the Wrong Idea About Design

 

The Value of Design Constraints

 

5 Essential Steps to Building a UX Design Portfolio

 

How to Build a Freelance Website that Actually Drives Leads

 

The Most Creative Newsletters by Designers for Designers

 

Curated List of Best Tools for Launching your Website

 

How to Start a Large Code project

 

Stop Talking and Start Sketching: A Guide to Paper Prototyping

 

Air Canada Unveils Sleek New Brand Design – Forbes

 

Leaflet.js is the Simplest Map Library You’ll Ever Find

 

6 Reasons Why You Should Never Use an Online Website Builder for your Business

 

A Branding Tool for Everything and Everyone

 

48 Free Tattoo Fonts for your Body Art

 

Website Builder Wix Acquires Art Community DeviantArt for $36M

 

The Programming Interview from Hell

 

How the Freelance Generation is Redefining Professional Norms

 

User Research is Overrated

 

Am I a Real Developer – Ever Wonder if You’re a ‘Real’ Developer

 

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



Found

The document has moved here.


Apache Server at www.mightydeals.com Port 80

Source

from Webdesigner Depot http://www.webdesignerdepot.com/2017/02/popular-design-news-of-the-week-february-20-2017-february-26-2017/

Saturday 25 February 2017

Comics of the week #380

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…

The more the merrier

Designer drool

 

Tough choice

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



Found

The document has moved here.


Apache Server at www.mightydeals.com Port 80

Source

from Webdesigner Depot http://www.webdesignerdepot.com/2017/02/comics-of-the-week-380/