Subscribe Now!
...with web-based news readers. Click your choice below:
...with other readers:
FeedBurner makes it easy to receive content updates in My Yahoo!, Newsgator, Bloglines, and other news readers.
Learn more about syndication and FeedBurner...
Current Feed Content
-
How To Build A Better Website
Posted:Mon, 21 Aug 2017 10:45:59 +0000
What’s the first thing you think of when you begin a website project? What are your first steps? Are you hunting for design inspiration on step one, or soon thereafter? Maybe, you’re more of the developer type. You might be exploring code and functionality needs soon after your first consultation meeting.Regardless, if you are more focused on design and code at the start of the project, then you’re heading for disappointment.
I can promise you, your fancy new website will fail. It will fail not because you’ve done a bad job. You’re probably more than capable of building beautiful masterpieces that your clients often rave about upon delivery.
No, you and your new website will fail because you’ve ignored the purpose, the sole reason for the website’s existence.
Yes, stunning design and clever code are important, but they’re not the make or break success factor you and I have been conditioned to think they are.
It is impossible for any website to succeed without a deep understanding of its site visitors.
When you get to the core of any website, it’s not built for the designer, it’s not even built for the client. It’s built and it exists to fulfill the need of the site visitor.
You Need A Plan
Failing to plan is planning to fail.
You’ve heard it so much, you probably cringe at the cliché. It’s so ubiquitous a saying it’s easy to ignore its importance. But, it’s true.
Without a plan, you’re relying on your gut instead of research and real customer insight. If you do not take the time, if you do not invest in research and strategy, you should reconsider your reasoning for even building a website.
Now, I could be wrong. Maybe your gut is incredibly intuitive, but if I were you, I’d hedge my bets with some solid research.
Building Your Plan
A website is more than a digital brochure, at least if it’s going to be successful, it should be
A website is more than a digital brochure, at least if it’s going to be successful, it should be.
For any business, their website is the hub of all their marketing efforts, on and off-line, whether they realize it or not. It’s often the first-touch point, and potentially the only touch point, with the customer.
81% of shoppers conduct online research before buying , and if your client is in the B2B market that number jumps up to 94%. With those kind of numbers, it’s imperative you, and your client, understand how to communicate with the ideal customer.
Defining Goals
You need to set measurable goals for the website.
“Drive more traffic” or “generate more leads” isn’t specific enough. Your goals need to be specific, measurable, timed and achievable.
For example, if one of your goals is to drive more traffic, you can make that a specific goal by defining:
- how much more traffic;
- generated by what keywords;
- what quality of traffic;
- over what period of time.
Your goals will be your guiding light for the website. They will guide you through your strategy sessions, your initial build, and your client’s long term marketing initiatives.
They’ll allow you to identify what was a success so you can replicate what worked. They’ll also show you where you missed the mark and by how much.
Zig Ziglar said it best:
How can you hit a target you can’t see? Even worse, how can you hit a target you don’t even have!? If you don’t know where you are going, you will probably end up somewhere else. You have to have goals.
Customer Personas
Even the best plan can go sideways if you neglect the primary purpose of your client’s website. Odds are, efficient communication wasn’t at the top of your goals list. It should be.
Before any other goal, your client’s website is first a communication tool.
Yes, your website can achieve a wide set of goals, but not if you fail at communicating with the customer. To effectively communicate, you need to understand who you are trying to communicate with, and creating a set of customer personas will help you do that.
A customer persona is a detailed profile of a unique individual who will represent a part of the customer base. You should create a few personas depending on the variety of the client’s customer base and business size.
Build customer personas with market research and insights from the client’s very own customer base. The goal is to develop an understanding of who their customers are.
You want to identify each persona’s interest and specific needs.
You will begin to see each persona as a very real and unique individual. Each persona will have their own set of specific needs and challenges. This will allow you to tailor your content, messaging, landing pages, and strategy for each persona group.
For example, one of your personas could be a 40-45 year old male who is:
- a husband, father of two;
- works approximately 50-60hrs per week as an engineer;
- tech savvy with a bachelors degree in computer science;
- researches options online before making a purchase;
- average household income of $110k a year;
- quality is more important than price;
- prefers email communication over telephone;
- is active on reddit, twitter, and linkedin but not facebook, snapchat, or instagram.
What’s the Point?
Well, with the example above, you can now know that price isn’t an issue for this visitor, but time is. The visitor is comfortable with researching, online and prefers to be well informed before making decisions. You should gather quite a few more insights and build a more robust profile, but even with this, think of the “what ifs”.
Your client’s website needs to be a tailored experience for each of your discovered personas, so gather as much information as possible.
Imagine if you had made pricing the dominant content strategy of your landing page with very sparse, remedial content. Make that faux pas and you could be saying goodbye to your ideal customer. You’ll miss the mark, and no amount of design will save the day.
Your client’s website needs to be a tailored experience for each of your discovered personas, so gather as much information as possible.
Buyer Journey / CTA Strategy
Once you have a solid foundation for who the ideal customer is, you will need to address where they are in the buying stage. Not everyone who arrives on your client’s website will be ready to buy.
A large segment of the site’s visitors will be researching their problem, unaware of what solutions exist. Another segment will be aware of the solutions and they’ll be researching feature options.
A third segment will be the motivated buyer who is actively looking for a vendor to fulfill their need.
Every customer goes through a process of awareness, consideration and decision, known as the buyer’s journey.
Don’t make the mistake of only targeting the motivated buyers. Most customers will purchase from the vendor who educated them during the earlier stages of their buyer’s journey.
Increase your sales potential by offering relevant content and calls to action for each stage of the buying cycle.
1. Awareness Stage
You want to describe the problem and industry solutions.
Customers are trying to figure out what they need. They know they have a problem, but they’re not aware of what types of solutions exist. They don’t know enough to have specific questions.
Avoid feature based content that is specific to your client’s unique solution, that’s too granular. The visitor has to “buy” the industry solution before they’ll know enough to understand what makes your client special.
You should aim to design and build landing pages for the site visitor who is uninformed and stepping into the market for the first time. They are green, fresh off the boat and unable to even speak the language yet.
2. Consideration Stage
Customers at this stage are informed and familiar, if not well versed in the industry’s solutions. This customer has bought the industry solution and is researching features.
Give the customer everything they could need. Answer every question they may have about your client’s features, support, warranties, and so on.
3. Decision Stage
This customer is ready to buy. They’re sold on the solution. They know the features they need. This customer is looking for the right vendor to buy from.
Make it clear how they can buy and make it as easy as possible. Answer any question and remove the obstacles the customer faces when deciding to purchase.
Content Strategy
Once you have a good understanding of your client’s customers you can begin to form the content strategy.
It might be easier to mention the most common mistakes you’ll be susceptible to your first time around. Sometimes, knowing what not to do makes it easier to define what you should do.
1. Don’t Let Your Client Talk About Themselves
Customers are selfish. They don’t care about anyone else. They care about their own needs. So, don’t say what you want to say, say what the customer wants to know. If you need to educate the customer, you can do so by first addressing their initial concern. Then pivot to what you need them to know.
2. Never Create Content Inside a Vacuum
Avoid random content. Every piece of content you or your client generates needs to be done as part of an overall conversation.
Consider all the content pieces like wooden planks on a suspension bridge. Each plank fulfills the purpose of helping an individual cross from point A to point B. Do the same with your content. Stay focused on what is necessary for the customer progressing further down the buyer’s journey.
3. Stop Trying to Sound Smart
Drop the “marketingese” and the industry lingo. Nobody likes to feel stupid. All you’re achieving with your acronyms and large vocabulary is alienating the customer. Stop creating friction between you and them. Write so that the customer feels smarter because of your content.
Your website is not a vanity exercise, it’s a tool to get the job done.
The most important thing you need to keep in mind when generating content is that you are writing for one person. Even if you have 100,000 site visitors a day, you are having 100,000 individual one-on-one conversations. The 100,000 visitors are each interacting with your client’s website individually. You’re never talking to a crowd.
Using Your Plan
Because you’ve done all this planning up front, you’re now ready to start your website. You should have a clear understanding of the website’s goals and how to achieve the desired results.
You’re now ready to build your new website.
How Your Plan Helps Site Mapping
Site mapping, also known as site architecture or site structure, is the process of defining what specific web pages are needed. Here you define how the pages interact with each other, and what basic functionality is needed for each web page.
Your planning enriches this process. The goal is to map out what is needed for the website based on your understanding of each customer segment.
Your sitemap will define the following:
- all the pages needed for the website;
- the website navigation and behavior;
- how each page interacts with the other web pages;
- the expected entry points for each customer persona and buyer’s journey segment;
- the expected user interaction for each web page for each persona and segment;
- the expected exit point for each group.
In addition, every web page needs to have a call to action (CTA), or conversion point. Your customer personas and buyer’s journey segmentation will help you define your CTA’s and which will be relevant to your website traffic.
How Your Plan Helps Wireframing
Wireframing is the process that maps out what content goes on each page. Your wireframes will define the page layout and required functionality for each web page.
Most wireframes stop there, but you can go much further than content blocks filled with dummy content. Your planning allows you to dive deep during this stage and plan your intended user-behavior for each of your customer segments.
For each individual page, you can now ask yourself:
- how will each customer persona and buyer’s journey segment interact with this page?
- how did they arrive on this page? What content or action preceded their arrival to this page?
- what is each segment’s expectation for this page? What are they hoping to get on this page?
- what are your intended exit points? What does each segment need from this page to leave satisfied? What should their next action be?
Your wireframes will map out what content goes where. They’ll also define what it will say, and how it will interact with your other page elements.
You will also create your calls to action (CTA’s) with the wireframes. Define how each CTA will display, what comes before, what comes after and the language used.
How Your Plan Helps Design
Finally, the fun part, design!
Think of everything we have covered up until now. All that research, all that planning, and you’re just now getting to design. As you should expect, this isn’t a free-for-all either. Your planning and research will guide your design as well.
Good design is design that gets out of the user’s way.
Your website should establish trust with the site visitor. Familiarity is your best bet. Make sure your branding fits the user expectations, so avoid your personal preference and fit within your market. If you’re designing for a lawyer, don’t make them look like the next hip startup.
Your website is not a vanity exercise, it’s a tool to get the job done. That job is facilitating clear communication. It should direct customers to the solutions they are hoping for and expecting to find.
It’s incredibly seductive to ignore your research and give in to your personal aesthetic. Yes, design is your bread and butter, and your work should reflect what makes you special. But, I can not stress this enough: the website is NOT for you, or even for your client. Your website is for your client’s customers. It is their tool to accomplish their goal, not anyone else’s!
Unless your research has directed you otherwise, you need to restrict your design to follow conversion-centered design best practices. Avoid unnecessary design trends that do not add contextual value to the customer. Keep the navigation clear and in its expected location. Your website should function like road signs, if they’re not clear, chaos will ensue!
The Take Aways
Congrats, you’re now miles ahead of most of your competition. Most designers and developers go straight into designing and building their client’s website.
Knowing what you know now, could you imagine? Would you ever consider jumping straight to the design without all your new found insights?
Develop your plan. Follow these web design best practices. Put them all together. Do the work each step requires. I promise you, if you do the process, your website will be much more successful than it could ever be without it…but at this point, that’s a no brainer, right?
Quickly Build Fully Functional Web & Mobile Prototypes with UX-App – only $29
Source -
Popular Design News of the Week: August 14, 2017 – August 20, 2017
Posted:Sun, 20 Aug 2017 10:45:08 +0000
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.
Dangerous Design Trends 2017
Adobe Bought Sketch?!
Google Allo is Now Available for Desktop… but Who Cares?
It’s Time to Kill the Personal Website
The FREE Definitive Guide to Adobe XD
10 Mistakes in Landing Page Design
PHPBot: The Ultimate PHP Snippet Bot
MadeWithoutCode: A Platform for Startups Made Without Code
Gutenberg is Coming to WordPress
How Google Designers Adapt Material
4 Great Applications for Creatives
OpenAi
Brandmark – The Deep Learning Logo Maker
‘Really Good UX’ – A Library of Screenshots for UX Inspiration
Pointy Papers: A Collection of Minimalist Wallpapers in Every Resolution
Designs of the Year 2017 Shortlist
A Gulp Workflow for Frontend Development Automation
Site Design: Kilokilo.agency
‘Fail Fast’ in Software Design is a Myth
How to Learn UI Design from Zero-Basis
Tinder’s Logo Transformation has Users Swipe Right
How Storytelling Can Improve your Website
The Story Behind the Anti-Nazi, Anti-Trump Symbol all Over your Feeds
Site Design: Goodstuph
Tech’s Damaging Myth of the Loner Genius Nerd
Want more? No problem! Keep track of top design news from around the web with Webdesigner News.
Quickly Build Fully Functional Web & Mobile Prototypes with UX-App – only $29
Source -
Comics of the Week #403
Posted:Sat, 19 Aug 2017 10:13:48 +0000
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…
Sure, blame the designer
No rest for the married
Olympic style feedback
Can you relate to these situations? Please share your funny stories and comments below…
Quickly Build Fully Functional Web & Mobile Prototypes with UX-App – only $29
Source -
5 Techniques for Spotting Mistaks Before They Go Live
Posted:Fri, 18 Aug 2017 10:45:17 +0000
Launching a new website can be exciting and nerve-wracking at the same time. You want to show off what you’ve been building, what you’ve learned, and the creative solutions you’ve come up with. You can already taste that first celebratory taco. You go live.At first, you get a lot of comments from your friends saying, “Hey, that looks great!” Then the bug reports come in. A feature isn’t working as intended. A bit of CSS is playing merry hell with the live content in ways you couldn’t foresee. A link is broken. And worst of all: you have typos. So many typos.
Okay, most of the time, it won’t be as bad as all that. Veteran designers and developers usually have processes in place to reduce the amount of errors that go live. New designers usually build smaller sites, so the number of errors is reduced in any case. Still, if you’re new to web design, and you want to spend as little time fixing things post-launch as possible, we can help.
1. Follow a Checklist
As you are the designer and/or developer, you are the first and last line of defense against mistakes. However, even the best of us can just plain forget things. One of the easiest ways to avoid this is to use a pre-launch checklist for every website you build. The checklist would include things like making sure all of the links work, making sure the contact forms work as intended, making sure your hosting is set up right, and so on.
You can write your own checklist, and as you develop your own way of working through projects, you might want to. In the meantime, you can adapt any number of pre-made checklists to your projects. Here are a couple to get you started:
- A Web Designer’s Site Launch Checklist
- The Ultimate Web Design Checklist – 128 Tasks To Create An Amazing Website
And there are a few more here: 45 Incredibly Useful Web Design Checklists and Questionnaires
2. Get More Eyeballs
For clarity’s sake (and because this is the Internet) these eyeballs should remain attached to their original owners. What you want to do is get some people who aren’t experts in computing, be they relatives, friends, or passing salesmen, and direct their eyeballs at your design, before you launch. Get some basic user testing in by asking these people to perform basic tasks on your site.
This has the double benefit of providing you with some usability testing data, as well as an easy way to find out if anything important is broken. After they’ve followed the main calls to action, ask them to click around on anything they find interesting, to help you check other links.
3. Hire Professional Eyeballs
This may not be feasible for projects with smaller budgets, but if you have the money, it couldn’t hurt to hire a professional or two. For example, you could hire another designer to check for common bugs, peek at the source, and so on. Have them test how the layout handles on their devices, and give you feedback.
If you want to take this further, there are services that will test your site under myriad conditions, in all sorts of browsers, on all sorts of devices. Given that most of us lack a browser testing lab, and these services generally aren’t expensive, they can be worth it.
Here are some of the more popular options (as defined by Google search results):
Lastly, consider hiring a proofreader and/or editor, if your website is text-heavy. They can drastically help you to improve the quality and clarity of your writing, as well as help you to avoid the dreaded typos.
4. Take a Break Before Launch
One of the biggest contributors to screwing up is stress. Launching websites can be stressful, especially if you’ve been working on the same thing, day in and day out. For future projects, it might be a good idea to schedule in a break before launch time. And I mean a proper break, as in one day as a bare minimum. Giving your brain time to think about other things is a known and proven tactic for creativity, but it also works for spotting mistakes.
Take that time off, come back, and run through your pre-flight checklist when you’re rested, and can think straight. Your brain, your heart, your users, and your clients will thank you.
5. Validation and Linting
If you’re developing the site yourself, you can take advantage of services that help you clean up, or “lint”, your code by pointing out problems in your HTML, CSS, or JavaScript. How you do this will depend on what text editor you’re using. Just about every major text editor (Sublime Text, Atom, Brackets, etc.) has a number of plugins to help you with this. There’s no one right tool for this job, so you’re going to have to do some Googling.
You should also run your HTML and CSS through the validating services provided by the W3C. These services won’t catch every bug, but they can help point out potential problems in your markup.
Conclusion
So what happens if you do all of these things, and still miss a few things at launch? Realistically, the world just keeps on turning. We’re imperfect creatures, and we’ll never get everything right, all of the time. And that’s fine. When mistakes are inevitably spotted in your newly-launched site, fix them fast and move on.
Constant perfection will have to wait until our robot overlords get here.
Quickly Build Fully Functional Web & Mobile Prototypes with UX-App – only $29
Source -
4 Ways To Design a Perfect Split Screen Homepage
Posted:Thu, 17 Aug 2017 10:45:20 +0000
One screen divided in two.The split screen technique has long been known in the film industry, with early examples dating back to the silent movies days of the early 20th century, and it is still a popular device in by film and tv today.
A split-screen layout is in use when full-screen elements are divided into two or more vertical parts. A scene from the film “Scott Pilgrim vs the World”
However, this is a relatively new technique for the web design industry. Split screens only became popular around mid-2016 and now we have more and more websites which use this design pattern. There are a few reasons why this design pattern became so popular:
- It has a nice aesthetic quality. When executed correctly it can offer users a wonderful viewing experience.
- It’s a good choice for responsive frameworks. Split-screen design can be adapted for a variety of screens, even small ones. When it comes to smaller screens, such as mobile displays, the panels can be stacked.
- It helps guide navigation. Using simple design techniques, you can draw the user’s attention to a specific part of the screen or encourage them to click.
When Split Screen Works The Best
Split-screen is especially good when you have two things to promote. For example, when a site offers two entirely opposite variations. This approach allows designers to give prominence to both things and allow the user to quickly select between them.
One screen, two messages in Dropbox Guides
When You Should Avoid Split Screen
Split-screen designs don’t expand well as the content grows, therefore it is not recommended to apply them to content-heavy layouts. It’s important to keep the screens simple because complex split screens make the UI look overloaded with information. That’s why split-screen layout would be a perfect fit for minimalist website designs.
How to Decide if Split Screen is Good For You
If you’re considering a split-screen technique for your website, I advise you to ask yourself a few questions:
- Is it suitable for your content?
- Will there be enough negative space to make the layout work?
- Will your users appreciate the layout or it will confuse them?
- Will it be OK to split your users’ attention in half?
The most important thing to keep in mind that content is king and split-screen should be a simple way to deliver your message to people.
Design Techniques For Split Screens
1. Pair Vibrant Color and Dramatic Typography
Thanks to Flat and Material Design, vibrant colors and dramatic typography are big trends now. Vibrant colors are visually stimulating and dramatic typography enhances the text content. Simply combine the two and you will create a visually interesting design. Baesman has done this masterfully. They gave equal importance to both elements while, at the same time, allowing the user to choose between them quickly.
Bright colors and interesting typography pairs can add interest
2. Draw User Attention to the CTA Button
Much more than a simple graphic trend, splitting the screen into two distinct parts provides an original way to guide the user through your site. It’s a great option when you want to create a bigger focal point for calls to action. In the example below, you can see how negative space creates a vertical divide to give equal weighting to two different options.
Vertical divide allows emphasis on two different CTAs without favoring either
3. Create Visual Flow Between “Screens”
When split screen represents a single object, it’s important to establish a connection between content containers. One possible way to do that is by using a color. Simply duplicate a distinct color to establish visual flow between two screens. This works particularly well with a brand color or hue with a lot of contrast. Using color it’s possible to communicate a stronger connection between two pieces of content.
Another possible way to create a strong connection is layering a single element such as text copy across screens:
Overlapping text connects two screens
Last but not least you can use a colored overlay for this purpose:
Consider the left part of the screen
4. Use Animation To Encourage Users To Act
Fine animation and interactive effects encourage users to click. Look at the design used for the “Chekhov is Alive” site below. The design begs you to click to find your character.
Conclusion
It takes approximately three seconds for a visitor to make a decision regarding your website. Consequently, your layouts should always be visitor-friendly if you want to reduce bounce rates. Split-screen technique can help you with that. Split-screen designs are a fun, functional, and responsive way to create an engaging design.
Quickly Build Fully Functional Web & Mobile Prototypes with UX-App – only $29
Source -
Transform Photos into Art with Deep Learning
Posted:Wed, 16 Aug 2017 12:45:03 +0000
Life is like a camera. If things don’t work out, you can take another shot. But if you get that perfect picture, you will want to capture the moment and, perhaps, transform it into a work of art.Have you ever seen art so beautiful and resonating that you wish you could transform your favorite photos into that style? Or perhaps you are a frontend developer or designer seeking an easier way to turn your images into something that’s more appealing, or fits the theme for a special occasion or unique scenario? Maybe you have been tasked to come up with a fun photo booth for a birthday party that enables attendees to transform their photos into a style of art they like? Check out the before and after of the photos below as an example:
Before (left) and after (right)
Before (left) and after (right)
Existing platforms like Instagram and Prisma enable users to upload images, apply different filters and effects, then produce an image with a very unique style and artistic look. However, you may want to build a similar application that provides more flexibility for the type of art, as well as the kinds of images users can upload.
With Cloudinary, developing a platform that enables you turn photos into art is a breeze. All you need to do is add the style_transfer effect to any delivered image while specifying the image ID of the source artwork as its overlay and activating the Neural Artworks addon.
Source artwork (left), target photo (center), and style transfer result (right)
A Closer Look at Style Transfer with Cloudinary
Cloudinary is a cloud-based image and video management service that includes server or client-side upload, on-the-fly manipulations, quick content delivery network (CDN) delivery and a variety of asset management options.
The style transfer effect applies a complex deep learning algorithm—based on the VGG 16 neural network—that extracts artistic styles from a source image and applies them to the content of a target photograph.
Cloudinary’s algorithm takes advantage of Xun Huange and Serge Belongie’s enhancement on the Gatys algorithm, which make it possible to use any image for both source and target, and still deliver a good quality style transfer in real time, using a single feed-forward neural network.
Cloudinary’s implementation is much faster than other available services, not limited to pre-learned images, and even supports high-resolution outputs that are out of scope for similar services.
How to Implement Style Transfer
To apply this effect, simply specify the public ID of the source artwork as an image overlay (l_ in URLs) and style_transfer as the overlay effect (e_style_transfer in URLs). The target photograph is the public ID of the image to deliver. For example:
http://res.cloudinary.com/demo/image/upload/w_700,h_700,c_fill/e_style_transfer,l_sailing_angel/golden_gate.jpg
http://res.cloudinary.com/demo/image/upload/e_style_transfer,l_davinci_mona_lisa/golf_sand_st.jpg
Source Artwork (left), target photo (center), and result of the style transfer effect (right)
But wait, there’s more!
You can include the Boolean preserve_color option or adjust the style_strength of the effect like so:
Artwork (left), target photo (center), default style transfer (right)
Preserve Original colors in Style transfer (left), adjust Style Strength to 60 in Style transfer (right)
Give Style Transfer a Try
Back to the task you’ve been assigned—creating a photo booth with effects for a birthday party. Here’s a cool, simple app that demonstrates how style transfer works.
See the Pen Style Transfer Demo by Cloudinary (@Cloudinary) on CodePen.
You can start making yours by signing up for a free Cloudinary account and activating the Neural Artworks add-on. There is comprehensive documentation available to show how you can take advantage of style transfer in your applications.
You no doubt have a lot of ideas about how to turn your photos into art. With Cloudinary, it’s easy to make your vision a reality.
[– This is a sponsored post on behalf of Cloudinary –]
Quickly Build Fully Functional Web & Mobile Prototypes with UX-App – only $29
Source -
Why CEOs Don’t Care About UX and How to Change Their Minds
Posted:Tue, 15 Aug 2017 12:45:49 +0000
“UX design doesn’t work…And it won’t make us money.”Business executives aren’t all that fond of UX design, or even design in general. It’s an incredibly common problem.
Too many executives see good design as an inconvenient expense. At a certain point, executives see UX design as an unnecessary cross to bear. A burden they’re expected to tolerate. If another department needs more money in their budget, design departments are hit first.
You know the value of good UX design, they don’t and that’s the problem.
This Isn’t a Problem for Design Driven Companies
What do Apple, Coca-Cola, Herman Miller, Disney, and Target all have in common? They’re all design driven companies.
The bad news?
Out of the pool of publicly traded companies evaluated by Motive, only 15 companies met the criteria of a design driven company. Others have found the same. So what does this tell us? Most companies aren’t all that interested in good design. UX design and design in general just isn’t a priority.
But you know good UX matters. You see the difference good design can make. It’s obvious, anyone can see it if they’re paying attention, so why can’t they?
Executives can’t see it because they don’t care. Not even a little bit.
They aren’t interested in design as a whole. In fact, most are looking to spend as little on design as they can. Because in their minds it’s just not worth their time.
But why?
We need to get inside their heads if we want to know the answer.
As Designers, We Speak a Weird Foreign Language
We use words like opacity and kerning and descender as a normal part of our everyday conversations. We argue about design trends, which ones are worth embracing, which ones to avoid. We obsess over tiny, seemingly insignificant details, because we understand the importance small details make.
We’re critical of ourselves and other designers in general because we understand the consequences of poor design on a deep and intimate level.
It’s intense.
And none of that matters. Not a single shred of our world matters to the vast majority of executives. That’s a very big problem.
When it’s time to teach executives about the value of good UX design, we choose the wrong approach. We use the wrong vocabulary. Instead of speaking their language, we speak our language.
Almost immediately, executives glaze over and tune out.
This inevitably leads to:
- Your ideas being ignored or rejected;
- A loss of income for you, the company, your customers or all of the above;
- Dwindling budgets as other departments fight for more money from your department’s budget which means department layoffs;
- A terrible experience for customers, who spend less money or shop elsewhere, making it harder for your organization to survive.
This wouldn’t be happening if executives understood the value of good design, but most aren’t even willing to hear us out. How on earth are we supposed to change their mind?
Grocery Stores Show us How to Win Hearts and Minds
The competition in your local grocery store is fierce. The shelves are lined with thousands of competing products, all focused on one thing: Getting customers to buy their product instead of a competitor’s.
The grocery stores themselves are competing for your attention and your money. It’s a cutthroat environment that only a few stores and some products can survive in.
Their secret? Design.
Your local grocery store is filled with lots of subtle design elements, these elements are used to get you to buy:
- Customers bought more bananas if their peels were Pantone color 12-0752 (Buttercup) vs the slightly brighter Pantone color (13-0858 (Vibrant Yellow). Growers altered the color of their bananas to produce the desired color.
- Store layouts are designed around the user experience. It’s a common strategy for grocery stores to show you the produce section first. The bright colors, fresh produce and pleasant aromas lead you to conclude the store is an inviting and ideal place to buy food.
- Product designers mark up prices strategically on products with strong brand loyalty. Remember the Pepsi Challenge? Pepsi conducted a blind taste test, asking consumers whether they preferred the taste of Pepsi or Coca-Cola. Pepsi won, but consumers continued to buy Coca-Cola. This happens all the time. It’s why people consistently choose the $90 bottle of wine over a $10 bottle, even if the only difference is price.
- Grocery stores are designed to be traps. A well known study found that people spent 34 percent more time shopping in stores that played music. These stores hide time cues to keep you inside. No clocks, windows or skylights. The rationale goes like this: The longer you stay the more you’ll buy.
- Product placement on shelves. This study found kid friendly foods are placed at kids’ eye-level. The characters on cereal boxes make eye contact with kids, a clever way to increase influence and sales. Expensive items are placed higher while inexpensive items are placed near the bottom shelves.
There are thousands of examples like these. The process, environment, imagery, ambiance and displays in grocery stores are all designed.
And here’s the interesting part.
Grocery store executives support these design conventions wholeheartedly. Their executives have fully embraced UX design.
Can you see why?
Designers and executives spoke the same language. Executives don’t care about design for design’s sake. Rather, they view design as a means to an end. A way to attract more customers and sales. A way to grow their business.
But the examples above are manipulative and sleazy!
I completely agree. Does that mean you need to approach things the same way they did? Of course not. It goes without saying, you should be honest and above-board with everything you do. But to change an executive’s mind you’ll need to think and talk like an executive.
What Exactly Are Executives Thinking About?
They’re thinking about results. They have a very specific set of problems they’re required to solve on behalf of the company. An executive’s thought process basically boils down to three basic problems.
- Will this save money?
- Will this make money?
- Will this cut costs?
The vast majority of their desires, goals, fears, frustrations and problems tie back to these three problems in some way. Getting customers, selling more product, making more money, it’s all part of it.
An executive’s language is based almost entirely around one of these three core problems.
What does that mean for you?
A request that’s focused on “What’s best for users” is far less likely to work. A request that’s positioned and presented properly is far more likely to succeed.
Here’s what that looks like:
- “We’ll be able to blow past Q3 projections if we make these four UX changes.”
- “We’re losing $467,891 a month. We have some UX problems here, here and here that would stop the financial bleeding.”
- “We can get a 1/3 increase in revenue overnight with these UX design ideas.”
- “Right now, we’re losing 8 out of 10 customers on our site. With the right UX design, I can get that down to 4 out of 10.”
- “We can get 1/4 of our customers to spend $250 more per order, per month if we make these UX changes.”
See what I did there?
I know, I know it’s loathsome. The last thing many of us want to do as designers is talk business, sales or marketing. Anything but that. I get it.
Here’s the thing. When you speak the same language as executives you communicate value in a way they can understand. They aren’t as worried about looking stupid, protecting their egos or acting as if they understand the finer points of your job.
They’re focused squarely on the things that matter to them. Get these details right and they look like the hero.
Do this consistently, and they’ll slowly begin to understand
They’ll begin to see why good UX design matters. Why design, as a concept matters far more than they think. And more importantly, they’ll understand why design can help them hit the goals they’re desperate to achieve.
Pitch your ideas the right way, get inside the mind of your executives and you still may fail. That’s part of the risk. That risk drops dramatically however, if you’re focused on them.
Pursuing things this way sends an important message. It shows executives that you understand them. That you’re willing to take their concerns seriously and you’re willing to invest in them.
This is huge because it shows you have potential, that you’re someone they can count on for the future. All because you decided to speak their language.
Executives Think UX Design Doesn’t Work
They’re wrong, but they don’t know it. Their subconscious impression is, UX design doesn’t work and it won’t make us money.
Business executives aren’t all that fond of UX design, or design in general. It’s viewed as fluff, an unnecessary cross to bear.
It’s up to you.
You know the value of good UX design. You can change their perceptions, but only if you can speak their language. Start small, showing executives you can make a difference. With consistent effort and lots of patience, your company can become a design driven company.
Quickly Build Fully Functional Web & Mobile Prototypes with UX-App – only $29
Source -
Stockio Free Assets Site Unveiled
Posted:Mon, 14 Aug 2017 14:45:17 +0000
Design assets are the lifeblood of any creative process. Images inspire, typefaces communicate, icons clarify. Whatever the scope of your project, assets are the building blocks of your design.Any fresh source of stock assets is a boon to the design community, and the latest treasure trove of resources is stockio.com. Stockio is a collection of photos, videos, vectors, icons, and even fonts, designed to inspire and stock the toolboxes of the web design industry.
Free Downloads
Stockio resources are absolutely free to download, and can be used for both personal and commercial projects. Sourced from some of the most popular asset producers, Stockio’s assets have been handpicked to be useful to designers.
Intuitive Search Options
There are a number of fantastic features on the site. For example, when browsing images, similar photos are displayed on the download page; some of the best discoveries come by simply clicking on the next thumbnail and seeing where it takes you.
Another incredibly helpful feature for designers is the color search. Just click through to a download page, and you’ll see a bar of colors, click one and the site will find photos, or vectors, containing the same color; it’s a great option when you’re working with a brand-specific palette and need assets to match.
Tons of Choice
Stockio includes enough assets to pack your toolbox until next year. There are over 4,500 icons and the collection is growing.
When it comes to free fonts, you’re spoiled for choice. There are over 11,000 free fonts on Stockio, more than you can use in a lifetime of design. And they aren’t the usual low quality fonts you often find for free, whether you’re looking for a typeface for a logo, or something readable for body text, there are some real gems here.
Quickly Build Fully Functional Web & Mobile Prototypes with UX-App – only $29
Source -
What’s New for Designers, August 2017
Posted:Mon, 14 Aug 2017 10:45:42 +0000
Sometimes the summer months can feel like a dead time for new design tools, but not this year. There are plenty of new elements out there to make your life (and projects) that much easier. Plus, almost everything on the list this month is free, except for a couple of tools. They’re sure to be useful to designers and developers, from beginners to experts.If we’ve missed something that you think should have been on the list, let us know in the comments. And if you know of a new app or resource that should be featured next month, tweet it to @carriecousins to be considered!
Chain
Chain is a Sketch plugin that will help you maintain dynamic color relations. Just select layers to chain, the color referenced, and transformations you want to apply. There are plenty of combinations to choose from and the project is completely open source.
Abstract
Still in beta, Abstract is a platform to help teams collaborate with a secure, version-controlled environment for design files. It builds on and extends the stable technology of Git to host and manage work.
React Simple Chatbot
This simple component for chatbots comes packed with examples to help you envision how your chatbot might work and has a clean, easy to use design.
Musikcube
Muskicube is a fully-functional terminal-based music player, library, and streaming server that runs natively on Windows, MacOS and Linux. There’s also a native Android app version and cross-platform C++ library that drives things.
Beamer
Make sure users know about new features, latest releases and relevant news with this easy changelog tool.
Random Material Palette Generator
This game-style tool automatically generates a palette of three-color Material Design-inspired color schemes with a click. It’s a fun twist on creating color combinations.
Mailit
Mailit is a tiny drop-in microservice for sending emails over a REST API. It just requires a tiny bit of code and you are ready to go.
Chrome Platform Status
What new features are coming in Chrome? When will the release happen? All of the upcoming features and more are listed in this new schedule page with updates on the stable version and next two releases.
SEO Audit
SEO Audit takes some of the manual labor out of conducting a search engine optimization audit for your website. The tool will check the site against an agenda and give a recommendation of what needs to be fixed.
GridBugs
GridBugs is a curated list of Grid interop issues, incomplete implementations and CSS grid layout bugs. The concept is based on the Flexbox Bugs list and you can add your gridbugs as well.
Vue SVG Maker
This tool shows you how to form bindings in Vue and pair them with generative SVG for fun effects that you can download and use in projects.
Build a Tiny Blockchain
Blockchain is a public database where data is stored in a container (block) and additional bits are added (chain). It’s the basis for Bitcoin and creating a stir in technology circles. Here’s how you can create a simple blockchain with less than 50 lines of code in Python 2.
45 Geometric Vector Shapes
Geometric shapes are one of the big design trends of the year and this freebie contains plenty of fun options to work with in vector format. Each of the mandala-inspired shapes can be used in a variety of ways.
Fitty
Fitty scales text up or down so that it perfectly fits its parent container. It is an ideal solution for flexible and responsive websites with no dependencies and an easy setup.
Split iOS UI Kit
This starter user interface elements kit includes elegant details that match the iOS design. Use symbols, layer and text styles and the flexible parts in Sketch to jumpstart design projects.
Rounded Mobile UI Kit
Maybe a more rounded style appeals to you. Then the Rounded Mobile UI Kit might be the preferred option with lots of parts to start a mobile interface, such as screen templates for a menu, chat, a cart, camera and more. All the elements are packed in a Sketch file.
Grabient
Grabient is a fun gradient grabber tool that’s packed with modern color combinations that you can as is or add options, such as additional color or adjust the angle of the fade. Gradient color files are available as a Sketch download.
STYLY
STYLY is a platform that helps you create virtual reality spaces without code. The drag and drop interface also allows you to import assets from other platforms and you can edit and view in a snap. The app, which is still in beta, is available for multiple devices.
StriveSDK
With just one line of code, you can add fun Snapchat-style face filters to your mobile app. This is a paid tool, starting at $5 per month. It is available for iOS with an Android version on the way.
Street Life Social Media Templates
Figuring out the right sizes for social media posts can be a hassle, but this little kit contains 15 flexible templates for Instagram and Facebook to make creating posts easier. The templates are fully customizable as well in Sketch, Illustrator or Photoshop.
Supernova
Supernova turns Sketch designs into native mobile apps in minutes. The tool automates tedious tasks and exports resources, writes navigation, connects components, applies styles and maintains information for you, no hand-coding required. Plus, you can preview it right away in an interactive format.
Coco
Coco is a free experimental display typeface inspired by classic styles.
Vhiena
Vhiena is a layered, vintage-style typeface that is inspired by old serifs. It comes with several layers to create impactful display type options.
Zin Sans
Zin Sans is a contemporary san serif typeface for display use. It has a large x-height and dynamic open forms.
Quickly Build Fully Functional Web & Mobile Prototypes with UX-App – only $29
Source -
Popular Design News of the Week: August 7, 2017 – August 13, 2017
Posted:Sun, 13 Aug 2017 10:30:20 +0000
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.
Best Practices for Using White Space in UI Design
SpeedFont: Extremely Simple CSS Font Embedding
UI Design: 10 Principles Learned from Painful Mistakes
World’s First Design Assistant
Lists: Real Content for all your Designs
Marketing Yourself as a Designer
Publii – Open Source CMS for Static Websites
Swarm 5.0: Remember Everywhere
Introducing DesignBetter.co
Blind: An Anonymous Community for Tech Professionals
BBC Starts Rolling Out New Digital-friendly Font
FontFace Ninja
Olly Moss on the New ‘Frozen’ Musical Poster (and Seven that Didn’t Make the Cut)
Apple Finally Joins Instagram
The Biggest UX Mistake in E-commerce
Gestalt Psychology and UX Design
Don’t Mistake Common UI Patterns for Best Practices
8 Common Portfolio Mistakes (and How to Fix Them)
Create VR Without Coding
A Complete Guide to Grid
Finding Fonts – A Guide
Gradients Generated from Photographs of Nature
Take Naps at Work; Apologize to no One
Designing for Emptiness
Pastel: Feedback for Web Designers
Want more? No problem! Keep track of top design news from around the web with Webdesigner News.
Quickly Build Fully Functional Web & Mobile Prototypes with UX-App – only $29
Source
FeedBurner delivers the world's subscriptions wherever they need to go. Publish a feed for text or podcasting?
You should try FeedBurner today.