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
-
When Does Emotional Design Cross a Line?
Posted:Wed, 23 Sep 2020 10:45:20 +0000
Designing for emotion in and of itself is not a problem. Websites are bound to elicit an emotional reaction from visitors, even if it’s as simple as them feeling at ease because of the soft, pastel color palette you’ve designed the site with.I don’t want to outright villainize emotional design. Unless there is some form of unethical manipulation at play, designing for your visitors’ emotions can actually provide them with a more positive experience.
So, here’s what I’d like to look at today:
- What is emotional design?
- When does emotional design cross a line?
- What’s the right way to design for emotions?
1. What Is Emotional Design?
When we look at emotional design in the context of a website, we’re focused on three types of emotional reactions:
a. Visceral Reactions
Visceral reactions are instinctive ones. Usually, visitors experience these as their first impressions of a website or web page. For instance, a cluttered or otherwise poorly designed homepage might leave visitors feeling overwhelmed, hesitant, or wanting to flea.
A minimally designed homepage interface, on the other hand, might have visitors not feeling much of a reaction at all. In this case, no feeling is a good feeling.
Design is like a refrigerator. When it works, no one notices. When it doesn’t, it stinks!
— Irene Au (@ireneau) February 14, 2015
b. Behavioral Reactions
Behavioral reactions stem from the usability of a website. There’s a lot that can stir up negative emotions here, like:
- Extra-long contact forms
- Confusing menus
- Error-ridden content
- Slow-loading pages
- And more
Again, if a website is easy to get through and attractively designed, visitors aren’t likely going to “ooh” and “aah” with every step they take on the site. And that’s a good thing. If they’re focusing more on how the design looks, they’re not paying attention to the brand’s actual offer.
c. Reflective Reactions
Reflective reactions are the third type of emotions we design for.
This is complicated because there’s a lot wrapped up in how visitors feel about a website after the fact. Sometimes the most well-designed interfaces and experiences can’t save them from a bad experience, whether they realized too late that the products were overpriced or they were treated poorly by a live chat representative.
As a web designer, all you can really do is to make sure you’re working with reputable companies and then aligning the designs of their sites with their values.
When Does Emotional Design Cross a Line?
Emotional design shouldn’t be about manipulating consumers’ emotions. In most cases, emotional design is about controlling the environment of the website so that emotions don’t go spinning wildly out of control — in either direction.There’s already enough social pressure online; your website doesn’t need to be one of those places, too
It’s when we take what we know about influencing someone’s emotional state to monetarily benefit from it that emotional design becomes problematic.
Here are some ways in which you might negatively impact the emotions of your visitors through design:
FOMO
The fear-of-missing-out isn’t always a bad marketing strategy. However, when FOMO is used for the purposes of rushing consumers to take action now and without time to really think it through, it definitely can be.
Chances are good they’ll feel badly no matter what. Either because they regret the rushed (and probably unnecessary, or expensive) decision or they blame themselves for missing out on an opportunity to be like everyone else.
There’s already enough social pressure online; your website doesn’t need to be one of those places, too. So, be careful with how you present customers with limits (on time, on products, etc.) or how you frame the call-to-action (“If you don’t buy this now, expect to fail/be miserable/suffer even more”).
Analysis Paralysis
It doesn’t matter why people specifically seek out your website. They have a problem or a hole in their life, and they’re looking for something to fix it.
Now, you can’t help it if the website has too much to offer in the way of options or solutions. Companies have to provide every possible solution/option so their users don’t feel like they have to go somewhere else to get what they need. However, the way you design these options can lead to a negative emotional state if you’re not careful.
For instance, your visitors might experience analysis paralysis, where there are so many options that it becomes impossible to take action. Similar to FOMO, this can lead to regret either with the decision they made or the one they were incapable of making.
By simplifying how many choices are presented at once, or designing a clear and supportive pathway to the right option of many, your website will leave visitors feeling much more positively about the whole experience.
Trendy Nostalgia
Nostalgia can be a great way to play upon the positive associations and emotions consumers feel towards an era gone by or a place they once knew. But, again, it depends on how you design with it.
For example, if you design a vintage website for an agency launched in 2019 and run by a group of 20-somethings, it might come off feeling disingenuous once customers start to catch on.
For a restaurant known as the oldest bar in the state, that would be a different story. That nostalgically designed website would be a real part of its story; not just done as a sales gimmick. As a result, customers would likely embrace those warm feelings for the “good ol’ days” they get from the website.
Also, think about how quickly nostalgia fades if it’s done to align with a trend. Unless you’re committed to redesigning a website the second that nostalgic feeling falls out of favor, you could be condemning your client to an outdated website mere months after launch.
What’s the Right Way to Design for Emotions?
Like I said before, there’s nothing wrong with designing for emotions. You just have to make sure your website visitors don’t feel manipulated and that they welcome the pleasant feelings the site gives them.
make sure your website visitors don’t feel manipulated
It might seem harmless at the time. After all, what are they doing on the site if they weren’t interested in the first place? And it’s not like they were bullied into spending their money, right?
But if they sense in any way that their response was driven by an emotion they wouldn’t have otherwise felt, they’re not going to be happy. While it might not be enough for them to cancel their subscription or services, or to return products they bought, it will definitely leave a bad taste in their mouth. And, ultimately, it can cost your website loyal visitors and customers.
So, if you’re going to use emotional design on a website, do it to improve their experience, not to put more money into your clients’ pockets. That means your emotional design choices need to be honest, transparent, and focused on eliciting naturally positive emotions like:
- Satisfaction
- Feeling impressed
- Trust
- Calm
- Feeling valued
Go back to the three emotional reactions I brought up earlier. If you can design a website to give off a positive first impression, and to be pain-free and usable, you can spend the rest of your time injecting small bits of happiness and positivity into the website with color choices, friendly micro-interactions, personalized content, and more.
Featured image via Unsplash.
Source -
Exciting New Tools for Designers, September 2020
Posted:Mon, 21 Sep 2020 10:45:54 +0000
It’s fun to see new website design tools that reflect current times and the state of the world. That’s very true this month with new databases devoted to diversity and women in technology, as well and resources to make your design life easier.Here’s what’s new for designers and developers this month:
Ztext.js
Ztext.js is an easy to implement, three-dimensional typography tool for the web that works with any font you want to use. With the popularity of 3D effects and animation, this tool has a lot of practical applications. Everything you need, including documentation, is available from developer Bennett Feely on his website and GitHub. (It’s free but you can show appreciation with a donation if you like it.)
Gradient Magic
Gradient Magic is a free gallery of fun and interesting CSS gradients. You can sort through a random selection or by category of color to find just the right gradient for your project. Some of them would make really neat backgrounds or image overlays.
Impossible Checkbox
Impossible Checkbox is a fun little divot that you’ll want to play with and emulate. Click or tap the slider to activate and a nifty little friend pops up. Now here’s the fun part: You can’t leave it checked, and take note of the changing expression of the checkbox character.
Diversify Tech
Diversify Tech isn’t your average job board; it is a collection of resources – and opportunities – for underrepresented people in technology. It includes a weekly roundup and everything from scholarships, to events, to jobs, to speaking opportunities.
Women in Tech
Women in Tech is a list of apps made by women. The apps are ranked and chosen based on upvotes and is a good resource if you want to help support women-owned projects. Search or submit an app for inclusion.
Devello Studio
Devello Studio is a tool that allows you to write code in the cloud. You don’t have to install anything and no matter where you are, just can open a project in-browser, and continue development where you had left off last time. Plus, it works with GitHub support built right in.
Hustl
Hustl is a premium Mac app that allows you to create time-lapse videos of your screen. Use it to show off work or projects or create a cool video for your portfolio. Plus you can use it to capture just one active app so you don’t have to do a lot of editing later.
FeedBaxley
FeedBaxley is a user feedback tool that helps you (and users) figure out what’s frustrating before it becomes a real issue. You can customize everything to match your brand and set it up with copy and paste tools. Feedback integrates with Slack, making it easy for you to analyze information with a team.
BestTime
BestTime launched a major update with a new tool that makes it possible to analyze visitor peaks of public business (cafe, gym, etc) for whole areas. Using the heatmap API you can find businesses at popular times, locations, or by business type.
Pixeltrue
Pixeltrue is a new collection of free SVG illustrations and Lottie animations in a trendy style. They are available for commercial and personal use and add a bit of whimsical delight to website projects. (The error illustrations are particularly fun.)
Previewed
Previewed has tons of cool and realistic mockups that you can use to create the perfect setting for digital projects. You can find mockups for a variety of devices and cool panoramas that work perfectly for elements such as app store previews.
Alt Text Overlay Bookmarklet
The Alt Text Overlay Bookmarklet solves a common problem: It shows what images use alt text and what that text is. The tool was created by Christian Heilmann and he’s put it on GitHub for you to play with and test.
MergeURL
MergeURL allows you to merge and shorten up to five links. Enter the links and mergeurl.com/o/xxxxx, for example, will open all the URLs associated with that link. The tool is free to use and you don’t have to register to use the service.
Infinity Search
Infinity Search is a new search engine that lets you look for things privately and efficiently. Search the web, images, or videos. Here’s a little about how it works: “While we retrieve results from other search engines like Bing and Wikipedia, we also have our own indexes of links that are displayed in our search results. We are actively working on improving these indexes and they will only get better.”
Blade UI Kit
Blade UI Kit is a set of renderless components to use in Laravel Blade Views. It’s built for the tall stack and is completely open source. It includes 26 components and you can contribute as well.
Trusted News
Trusted News is a Google Chrome extension that uses AI to assist in evaluating the quality of the online content. In its first release, it scores the objectivity for a selected article, testing whether it is written from a neutral perspective as opposed to a subjective one.
BaseDash
BaseDash allows you to edit production data without coding. You can make changes to the database with the ease of a spreadsheet. This tool makes it easy to find and edit information in a hurry. It works with all major databases including MySQL, PostgreSQL, Amazon Redshirt, Microsoft SQL Server, and more.
Email2Go
Email2Go is a service that helps you create email templates and test them on dozens of physical devices and applications. It’s free right now while it is in early release.
Iconscout Converter
The Iconscout Converter allows you to convert icons and images from one file format to another for free. Convert SVG, PNG, JPG, and PDF with a single click.
Shape 2
Shape 2 is a massive collection of 5,000+ unique icons and illustrations with a full-blown web editor. Customize colors, stroke width, size and full variations that can export to SVG, PDF, PNG, GIF, and React. This is a premium tool and includes a discounted release price for now.
Aestetico
Aestetico is a beautiful sans serif that includes a massive family with 54 styles. This premium typeface is highly readable and has modern lines and curves that make it a great option for a variety of uses.
Arcades
Arcades is a modern display font with a retro, 1980s-style vibe. It includes regular and italic styles.
Brimington
Brimington is a handwriting style typeface with rough strokes and smooth curves. It includes a set of 227 characters and 219 glyphs in a readable design.
California Signature
California Signature is a typeface duo with a slab serif and handwriting style that are perfectly paired. The thick and thin options provide a yin and yang effect.
Eastblue
Eastblue is a script typeface with long swashes and interesting curves. It includes a solid character set and is free for personal use only.
Source
-
Popular Design News of the Week: September 14, 2020 – September 20, 2020
Posted:Sun, 20 Sep 2020 10:45:43 +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.
The Beginner’s Guide to Responsive Web Design in 2020
Frontendor – HTML Templates and Blocks to Help Build Beautiful Websites
Why these Developer Job Titles are Ridiculous and Shouldn’t Exist
Emblemicons – Open-Source Free to Use Library of 1000+ Beautiful Icons
Disrespectful Design – Users Aren’t Stupid or Lazy
Welcome to your Bland New World
Playing with Fonts
The 50 Best Fonts for Creating Stunning Logos
How HTTPS Works
Nova – Beautiful, Fast, Flexible, Native Mac Code Editor
How to Be a Great Email Designer: Essential Tools
10 UX Lessons I Learned Building my Product from Scratch
5 Fears that Creatives Must Overcome
Introducing Mono Icons
From Posters to the Web: The Link Between Print and Digital Design
Designing SaaS Products In 2020
User Experience: What Is, its Guidelines and How to Apply it on your Website
The Evolution of the Google Sign up Form: 2005 → 2020
Principles for Naming a Brand
How to Choose the Right Website Fonts
Design Principles: What, Why, and How
5 Basic Types of Images in Web Design
Documenting is Designing: How Documentation Drives Better Design Outcomes
How to Create Dreamy Color Blurs in Adobe Illustrator
The Entrepreneur Vs the Linchpin: Which Type of Designer are You?
Want more? No problem! Keep track of top design news from around the web with Webdesigner News.
Source -
How to Design the Perfect Developer Portfolio
Posted:Thu, 17 Sep 2020 10:45:34 +0000
As a freelance web developer, how many clients do you get from your website? If you’re like most, you’re probably lucky to get one client every 2-3 months. Unfortunately, that’s very common.These days it’s not enough just to be a web developer if you want to make really good money. You have to be able to differentiate yourself in the marketplace to get more opportunities. If you can do this successfully, I’m 100% sure that it will help you win more projects and charge higher rates.
So today I’d like to share with you a little bit of my own story. In the last 4 months, I was able to position myself as a specialist with my personal site that ultimately helped me win more projects and get better clients.
The Importance of Niching Down
The first thing that I would invite you to do is to shift your thinking a little bit.
If you want to be a high-paid professional (especially if you’re a freelancer), you need to learn how to market and sell yourself. And the first rule of marketing is to identify your target audience and the result that you help them achieve.
I can’t over emphasize the importance of this.
You need to know exactly who you help and the outcome that you provide. That is ultimately what you get paid for. So you need to define your ideal client.
My suggestion is to pick a market segment that you would love to work with, that has the money to afford you and (ideally) those that have already done some projects for. Once you have identified your target market, you need to create your positioning statement. Your positioning statement should immediately tell who you help and what results you help them achieve.
Here is a formula that you can use to create your positioning statement:
I help __ (target audience) __ do (build/achieve/overcome) ___ (problem that you help them solve).
For example: I help startup SaaS companies build highly converting websites. You can go even narrower if you want, but this is already much better than just saying, “I’m a web developer.”
If your positioning statement is “I help startup SaaS companies build highly converting websites” it can still be narrowed down and improved. As you gain more experience and work with more clients, you can refine it to something like: “I help healthcare SaaS companies build highly converting websites.”
Now imagine if a SaaS startup founder from a healthcare niche came to your site and saw that positioning statement vs a very generic one like “I’m a web developer”. How much easier would it be for you to differentiate yourself and gain a huge advantage over your competitors in the marketplace?
4 Elements of a Perfect Landing Page
“I am passionate about coding, I have 10+ years of experience, client satisfaction is my main goal…”
Have you ever seen statements like that on someone’s portfolio site? Or maybe it even says that on your own site. From my experience, statements like that don’t really help you convert site visitors into customers.
If you personally go to a company’s website, what would you like to see yourself as a visitor? Somebody saying how good they are, or to find out if they can be a good fit to solve your problem? I think that most of the time the latter is what you’re after. That’s what other people usually go to your website for; they want to know how you can help them solve their problems.
For instance, take a look at this section from Tom Hirst’s website:
As you can see, this immediately helps the visitors understand if Tom is a good fit for them or not. He doesn’t just boast about how good he is, but rather helps the client understand what problems he can solve for them. Another important part here is that Tom doesn’t use a lot of technical terms. Since a lot of his visitors may be not as tech-savvy as he is, there is no point in confusing them with technical jargon. The more you can speak their language – the easier it will be for you to build trust and connection that will later help you during the sales process.
Let me tell you a bit about the 4 parts of my site that I think have contributed significantly to having me win more projects. The 4 elements are problem, solution, proof, and call to action. Let me go over them 1 by 1 and explain why they’re important.
1. Problem
A good way to start your landing page sales letter is by identifying the problem of the client. If you know their pain points and you mention them, you should be able to hook them into reading your copy. And a well-written copy plays a significant role in persuading your visitors to take the next action.
2. Solution
Once you have mentioned their problem, you need to present them with a solution that you provide. You need to show them how working with you can solve their problems. Whatever their problems are, you have to show them that you understand them and can help solve them.
That’s what UX designer Matt Oplinski is doing on his website is doing. He knows that his clients might need help with 3 types of projects: Digital Products, Marketing Websites or Mobile Apps. For example, the clients who are seeking a redesign of their website may have an issue with their current conversion rates. And that’s exactly what Matthew lists in the middle section under “Custom Marketing Website” headline. I would even argue that he may have been a bit more specific with the solutions that he can offer.
The main takeaway here is that it’s important to be very specific with the result that you can help your clients achieve. The more accurate it is, the better it is going to convert.
3. Social Proof
Social proof plays an extremely important role in converting a lead into a customer. When someone comes to your site, they don’t know if they can trust you. If they were to spend one, two, five, ten or even more thousand dollars – they need to feel comfortable with you. They need to have at least some level of trust. That’s why they want to see as many signs as possible that you’re trustworthy.
Social proof obviously can come in many different forms. The most popular and important ones, in my opinion, are case studies with results that you’ve produced and testimonials. They will be absolutely crucial to persuade your clients and be able to differentiate yourself from others.
Here is a good example from Bill Erickson’s site:
Ideally, your testimonials should showcase a particular business goal that you’ve helped your client to achieve. But even if you don’t have those, you can use ordinary testimonials that your clients give you. That alone is better than no testimonials at all.
4. Call to Action
Last but not least you should have a single call to action on your site. Most likely it will be a button to contact you, or book a call with you.
In my opinion, it’s important to have a single call to action because if you give people too many options they will not be so focused on taking an action that you actually want them to take.
I also suggest that you have a call to action button at least 2-3 times on the page: one on the first screen where you have your positioning statement and/or your offer, and one at the very bottom of the page so that when they finish reading they don’t need to go back to the top to take action. Having another call to action in the middle of your page is also a good idea. My advice would be to add it after you’ve described the problem, your solution and presented yourself as someone who can help your leads with their problems.
Results
I started niching down and created my own website four months ago. Being a member of multiple freelance platforms, I’ve been fortunate enough to get enough leads in my target market to test out my strategy. So far the results are pretty amazing.
It has become a lot easier for me to win projects, get clients that respect my knowledge, and my process. Besides that, I’ve been able to significantly increase my rates for my work. A great thing about working with similar projects every time is that you automate and streamline a lot of things, improve your delivery process and become much more efficient. You can even create a productized service. This is something that is very hard to achieve if you’re constantly working on custom projects that have different requirements and involve different technologies.
To be completely transparent, I’m still in the process of building my authority in the niche, polishing my offer and gaining experience. I still have a long way to go. What I can certainly say today is that it has been one of the best decisions in my professional career.
To become a high paying professional in your industry you have to do things differently. Today I tried to show you one of the ways that you can improve your career or freelancing business fast. It probably won’t happen overnight, but in a matter of a few months you can be so much ahead of your competition if you deploy some of the strategies that I’ve shared with you today.
I really hope that this article has helped you gain some perspective and you will start to consider doing a similar thing that I did to achieve amazing results.
Featured image via Unsplash.
Source -
5 Tips for Designing One-Page Websites That Work
Posted:Tue, 15 Sep 2020 14:45:00 +0000
Smart design choices can help reduce the fatigue and frustration people would otherwise feel when using the web.
There are a lot of ways web designers can minimize distractions, information overload, and analysis paralysis. For instance, designing with abundant white space, shorter snippets of text, and calming color palettes all work.
One-page websites might be another design choice worth exploring.
When done right, a single-page website could be very useful in creating a simpler and more welcoming environment for today’s overwhelmed consumers.
With its diminutive structure, it would leave a unique and memorable impression on visitors. What’s more, a well-crafted one-page website would provide visitors with a clean, narrow, and logical pathway to conversion.
For those of you who use BeTheme’s pre-built sites (or are thinking about adopting them for your next site), there’s good news. In addition to the great selection of traditionally structured sites available, Be also has single-page websites for you to work with.
So, the technical aspects you’d need to master to get the one-page formula right are already taken care of.
Let’s have a look at some of the features that make single-page websites shine and how you can design them:
1. Give Visitors a Succinct Journey Through the Website and Brand’s Story
The typical business websites you design include pages like Home, About, and Contact, as well as pages that explain the company’s services or sell their products. Unless you’re building really long sales landing pages, there’s usually about 400 to 600 words on each page.
That’s still a lot of content for your visitors to get through and it can make perusing a single website an overwhelming experience. Imagine how they feel about reading through all that content when they have to do it multiple times when comparing other websites and options.
In some cases, this multi-page website structure is overkill. The information you’d otherwise fill a full page with can easily be edited down to fit a single pane or block on a one-page website and still be as useful.
Like how design and development studio Pixel Lab does it:
Notice how all the key points are hit in a concise and visually attractive manner:
- The Featured Work portfolio
- The About Us introduction
- The FAQs
- The contact form
The BeCV pre-built site is built in a similar manner (and for a similar purpose, too):
Just remember to keep a sticky navigation bar present at all times so visitors know exactly how much content there is on the page.
2. Opt For a Non-Traditional Navigation for a Uniquely Memorable Experience
Typically, the rule is that website navigation should follow one of two patterns:
- Logo on the left, navigation links on the right.
- Logo on the left, hamburger menu storing the navigation on the right (for mobile or desktop).
There are a number of reasons why this layout is beneficial. Ultimately, it comes down to the predictability and comfort of having a navigation be right where visitors expect it, no matter where they end up on your website.
However, with a single-page website, this is one of those rules you can bend, so long as you have a way to keep the navigation ever-present and easy to use.
There are some great examples of one-page sites that have done this, usually opting for a stylized left-aligned sidebar that contains links to the various parts of the page. Purple Orange is just one of them:
And you can use a Be pre-built site like BeHairdresser to create a similar navigation for your website:
If you’re trying to make a bold brand stand out, this is a neat layout option to experiment with.
3. Tell a More Visually Striking Story
One of the problems with building a website with WordPress is that you always have to worry about how your design decisions affect speed. Even once the code is optimized, images are usually the low-hanging fruit that have to be dealt with.
But when your website only contains one page, this means images aren’t as much of a problem (so long as you compress and resize them). It’s only when you continue to add pages, products, and galleries that you have to scale back your visual content.
So, if your brand has a strong visual identity and you want the website to show that off through images, a one-page website is a great place to do it.
Just remember to keep a good balance between text and images as Vodka A does:
There’s no reason for a liquor distribution company to mince words when the elegant product photos effectively communicate to consumers what it’s all about.
In fact, this image-heavy, single-page style would work well for any vendor selling a small inventory of products: food, beverages, subscription boxes, health and beauty products, etc. And you can use the pre-built BeBistro to carefully craft it:
4. Turn a Complex Business Idea or Offering into Something Simple to Understand
When a company sells a technical or complex solution to consumers, it can be a real struggle to explain what it does and why they should buy it.
But here’s the thing: Consumers don’t really care about all that technical stuff. Even if you were to explain how an app worked or how you use a software like Sketch or WordPress to design a website, their eyes would glaze over.
What matters most to them is that you have an effective and affordable solution that they can trust. So, why bog them down with page after page of technical specs and sales jargon?
A one-page website enables you to simplify even the most complex of solutions.
Take Critical TechWorks, for instance. It offers an advanced technological solution for the automobile industry…and, yet, this is all it needs to explain the technology at work:
If your website’s visitors are more concerned with the outcomes rather than the “how”, you’d do well to make the website and content as easy to digest as possible. And you can use a pre-built site like BeCourse to do that:
Notice how both of these sites take visitors through a small handful of sections (pages) before delivering them to the main attraction: the contact or sign-up form.
5. Capture Leads and Sales at Different Stages of the Sales Funnel
Some of your visitors will be brand new to the site and need more information before they pull the trigger. Others will already have a good idea of what they’re getting into and just need one small push to get them to take action.
With a single-page website, you can design each section to cater to the different kinds of leads and prospects that arrive there.
The top sections should be introductory in nature, providing new visitors with information they need to decide if this is an option worth pursuing. The sections further below should drill down into the remaining questions or concerns that interested prospects have.
Regardless of which section they’re looking at, your one-page site will have CTA buttons built in along the way that drive them to conversion the second they’re ready.
This will enable your site to always be prepared to convert leads, whether visitors read the first two sections or make their way through all of them until they reach the conversion point (e.g. a contact form, a checkout page, etc.).
You’ll find a nice example of this on the Cycle website, with CTAs strategically placed along the single-page’s design:
BePersonalTrainer is a good pre-built site option if you want to ensure that you include a CTA button at the perfect stopping points throughout your page:
You won’t find them at the bottom of every section, but that’s okay. You just need them whenever your visitors are seriously thinking about taking action.
What Should You Build: A Multi-Page or One-Page Website?
Although a single-page website won’t work for larger websites (especially in ecommerce), it could work well for business websites that are on the smaller side to begin with.
By centralizing all of that information into a single page, you’ll create a fresh experience that wows visitors with how succinct yet powerful both the message and offering are.
Just be careful. Many single-page websites are poorly done (which is probably why they fell out of fashion for a while).
Remember: This is not your chance to throw web design rules out the window. In fact, this will be an opportunity to clear out the fluff and the clutter that’s accumulated over the years and to return to a more scaled-back and classic approach to design.
And with the help of Be’s pre-built one-page websites, it won’t require much work on your part to make that happen.
[– This is a sponsored post on behalf of BeTheme –]
Source -
The Latest Research for Web Designers, September 2020
Posted:Mon, 14 Sep 2020 10:45:12 +0000
In today’s look at the latest research for web designers, we’re going to look at studies and reports from Payoneer, Robert Half, Hootsuite, and Contentsquare to see what they have to say about things like:- Current freelancer demand
- Web designer earning potential
- A change in ecommerce shopping trends
- Unseen content rates
1. There’s Light At the End of the COVID-19 Tunnel for Freelancers
Payoneer’s The State of Freelancing During COVID-19 had to take a different approach to reporting on the freelancer workforce than in years passed.
Here’s why:
When 1000+ freelancers around the globe were asked how demand for their services changed during COVID-19, this was the response:
Less than 17% of freelancers experienced an increase in demand for their services and less than 23% saw demand remain the same.
An overwhelming majority of freelancers experienced a shrink in demand, with nearly 29% saying it slightly decreased while almost 32% said it greatly decreased.
However, the data collected wasn’t just assessed on a global scale. Payoneer also looked at freelancing demand trends in various parts of the world:
Notice the differences between Asia and Australia (who were hit with COVID-19 earlier) and North America and Europe (where the pandemic arrived a little later).
It appears as though Asian and Australian freelancers are, economically speaking, already starting to feel the effects of recovery from the pandemic with demand working in their favor.
So, if you’re feeling like there’s no end to the hardships you’ve faced during COVID-19, and were considering dropping your prices, hold on for just a little bit longer. Freelancers are starting to feel optimistic about demand for their services increasing. If you go devaluing yourself now, it’ll be hard to return to where you were before COVID-19 when things get back to normal.
2. Robert Half’s Salary Guide Breaks Down the Earning Potential for Web Designers
On a related note, let’s talk about demand from the employer’s point of view.
According to Robert Half’s 2020 Salary Guide for creative marketing professionals, there’s big demand for digital talent:
So, that’s number one. We know that almost 50% of hiring managers feel as though their digital teams are inadequately staffed. That’s good news for web designers.
However, these same managers complain about creative marketing professionals’ lack of up-to-date skills as the biggest barrier to hiring or retaining them. Although the report doesn’t say so, I’m going to assume this refers both to employees as well as contractors.
This should be a no-brainer. By keeping up with the latest web design trends and techniques, you can make top-dollar for your services — and hold onto those valuable client relationships for a long time.
According to the report, this is how much you stand to earn working in web design (in the U.S.) today:
If you’re eyeballing those salaries in the 95th percentile, then you know what you need to do. Hiring managers have spoken up about what’s holding them back from hiring.
For those of you who feel as though you’ve gone as far as you can as a web designer, it might be worth exploring a new specialty. Like one of the following:
As you can see, designers in the UI, UX, and interactive space (along with web developers) have the opportunity to make more money, even earlier on in their careers. You may also find that more job opportunities are available as you move into these niches (because of less competition), which might cut down on any demand issues you’ve been experiencing because of COVID-19.
3. Hootsuite’s Digital 2020 Report Reveals an Interesting Trend in Ecommerce
Hootsuite’s Digital 2020 report is always a great resource for learning about social media marketing trends. That said, that’s not why I read it.
It’s for hidden gems like these:
It’s no surprise that we’re seeing changes in retail and ecommerce during COVID-19. What is a surprise, however, is how consumers’ online shopping habits have changed.
Here’s what we’re seeing when we compare 2020 ecommerce data with the pre-COVID benchmarks:
Site visits are 1.7% lower than expected. That would make sense considering how budget-conscious consumers are right now. It likely keeps them from going on unnecessary shopping sprees.
Session durations are 3.3% lower. This could be related to fewer site visits. It might also indicate greater consumer confidence. If they come to a website with a plan for what they need to buy, they’re going to take a straight line to conversion instead of spending time window shopping that prolongs their session.
The number of transactions is 19.1% higher and the conversion rate is 21.6% higher. Considering shoppers aren’t spending as much time with ecommerce websites, this point suggests that there’s a massive shift happening from in-store shopping to online shopping.
If that’s the case (even if consumers are currently spending less money), that means web designers need to set their sights on the ecommerce space. With the holiday shopping season expected to start sooner rather than later this year, now is the time to get in there and make sure these sites provide as streamlined an experience as possible.
4. Contentsquare Studies the Unseen Content Rates By Industry
Contentsquare analyzed more than 7 billion user sessions globally to create the 2020 Digital Experience Benchmarks report.
There’s some interesting data in here about website traffic and conversion trends, but what I find the most valuable is the breakdown by industry.
It was this chart, in particular, that really caught my eye:
According to Contentsquare’s data, between 60% and 75% of a website’s content is unseen. Some industries fare better than others, like home supplies and luxury retailer websites, but the numbers still aren’t flattering.
For example, what does it mean when consumers miss 75% of a financial service provider’s content?
Does this mean that the financial advisory content — which I’m assuming comprises the bulk of the pages on the site — is useless or irrelevant? Or perhaps it’s an issue of discoverability since blog content and other resources often take a backseat to service and product promotion?
What about ecommerce brands in the apparel or beauty space?
If two-thirds of their pages are unseen, does that mean their websites are overrun with obsolete inventory? Or, again, is it an issue of navigability and discoverability around the store?
As a web designer, I’d suggest performing your own unseen content analysis on the websites you’ve built. If over 60% of your pages never get any views, you’re going to have to decide what to do with them:
Option 1: Fix the navigation or search function so people can actually find these unseen pages.
Option 2: Remove them from the site and make room for content your visitors actually find valuable.
Wrap-Up
As you encounter research and reports online — whether it’s written specifically for web designers or other creative professionals — spend some time looking for hidden gems.
As you can see above, there’s a ton of relevant research for web designers out there, even if it’s hiding behind the mask of a larger issue or matter. And it’s this data that will help you get a leg up on the competition since it’ll get you thinking about your business and your approach to design in different ways.
Source -
Popular Design News of the Week: September 7, 2020 – September 13, 2020
Posted:Sun, 13 Sep 2020 10:45:33 +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.
UX Design for Navigation Menus
How to Choose UI Colors for Mobile and Web Design Wisely
A Step-By-Step Guide to Create your own WordPress Theme
HTML5 Canvas Cheat Sheet [PDF]
Beyond Media Queries: Using Newer HTML & CSS Features for Responsive Designs
The Power of not Messing Around
Tailwind Ink: AI Color Palette Generator for Tailwindcss
Resumey.Pro – Save Time and Effort on Designing your Resume Using Markdown
The Ultimate List of YouTube Channels to Boost your Web Dev’t and Programming Skills
10 Google Font Combinations for Inspiration
Everything You Need to Know About WordPress 5.5
How to Create Stronger Layouts with the 8pt Grid
TEDx Talk: Good UX is a Problem
All the Ways to Make a Web Component
Landing Page 101: How to Design a Landing Page that Converts
30 Free HTML and CSS Book Effects and UI Design
A Guide to Design System Models
15 Designer Curated Color Palettes to Inspire your Next Project
My Thoughts About Editors in 2020
The Napoleon Technique: Postponing Things to Increase Productivity
Announcing TypeScript 4.0
Un-Cancelling 2020: Virtual Conferences for Designers
How to Manage Stress as a Developer
Explaining UX Design to a 5-year-old
How to Win Over Skeptics with Qualitative Research
Want more? No problem! Keep track of top design news from around the web with Webdesigner News.
Source -
Should We Be Designing For Voice?
Posted:Fri, 11 Sep 2020 10:45:05 +0000
Voice is one aspect of technology that is getting bigger and bigger, and showing little sign of relenting. In fact, 2019 data revealed that 22% of UK households owned a voice-controlled digital home assistant device such as an Amazon Echo or Google home. This is double the figure recorded in 2017 and it is predicted that over the next five years nearly 50% of all homes will have one. Smart home adoption rates are increasing, and it shows how voice control is something we are all becoming more accustomed to.With these high figures, does it follow that voice should be something web designers build into sites? Or is it merely a gimmick that will die out and render sites with hardware and complex design issues? You only have to look at the failed introduction of Google glass to see that certain technological advancements don’t always have the outcome that might be expected.
Multiple Voices
One of the first issues with voice is establishing whether you want sites to recognise everyone’s voices, or just those who have registered. If you’re using the site in a crowded room will it pick up on snippets of conversation from others and think these are instructions? Google Home has a feature whereby you have to register your voice with its app to use more personalised features such as the shopping list. Is this the sort of thing websites would need?
Accents
The implementation of voice is complex, not only does it need to understand certain languages (such as English), but all the accents and variations too. With 160 English dialects alone, that is a lot that the technology needs to understand – not including mispronunciations, slang, and colloquialisms. Also, if a site is used all over the world (which many are) how many languages will it need to know?
Privacy Issues
if there are clips of your voice out there on the web…it can easily be imitated
If a website involves a feature such as online shopping or other functions which require sensitive details to be input, this could put people off using voice. Users need to know where this saved data is being stored, how it will be used and if it is secure. In 2018, HMRC had signed up about 6.7 million people to its voice ID service and HSBC said over 10,000 were registering each week. This shows many trust the service, but experts say that if there are clips of your voice out there on the web (such as in a podcast) it can easily be imitated. Bringing with it security and privacy issues.
According to futurologist Dr Ian Pearson, who invented the text message back in 1991, it won’t be long until we can complete a financial transaction with just a few words and a gesture. This can be a time-saver for things such as online shopping, but we need to ensure there are the correct security steps in place.
Users Don’t Talk The Way They Type
When speaking we tend to use shortened and more colloquial language as opposed to when we type. The voice function on a website will need to be able to adapt for this. One example is if you are filling in a form or comment box by voice for a website, you will need to tell it what to punctuate, letting it know where to add a comma, exclamation mark etc.
Website Processes Need to be Simpler
With the web as we use it now, we often browse through pages, reading other snippets of information before clicking through to the page we want. With voice recognition it will cut out these middle steps. For example, if you are looking for a recipe of something specific, you will just say the command “Show me the … recipe” and it will take you straight there. This direct access to what we are looking for could lead to a simplification of websites.
Regular Updates
With websites as they are now, they need updates semi-regularly, depending on how they are built, how complex they are, and what features we have built into them. A voice-based site will need updating regularly, whether to add new words or processes or to keep up with the fast-adapting technology. It might end up being quite a complex process.
Mistrust
While there are more of us now than ever using voice control via tech such as Alexa, Google, and Siri, there is still a level of mistrust over it. It’s still not quite clear where data is being stored, if it is being stored, and how easy it could be to abuse.
Larger Storage and Bandwidth
If a site is built for voice, will it utilise a ready-built plugin or will it have its own software built by developers? Will this feature require a greater amount of storage and bandwidth to cope with it? These are further factors to consider when thinking of the future of implementing voice to websites.
We Still Don’t Know Where It Will Go
Voice technology while working in some respects, is still a bit of a grey area when it comes to future use. Will it be the next big thing as many have predicted, or will it simply die down?
Look at Google Glass – highlighted as the big new technology, they soon died down and were eventually discontinued. Smart watches were another thing. You can see their initial downfall by reading an article published in 2017 about smartwatches – how major smartwatch makers such as Apple and Samsung rushed into the market before the technology was ready and they subsequently failed. Motorola exited the smartwatch market, Pebble and Jawbone shut down and Fitbit sold 2.3 million fewer devices than in their previous quarter. It was perceived as being a fad. However, fast forward to 2020 and more people than ever are wearing and using smartwatches. The smartwatch market was valued at shipment volumes of 47.34 million in 2019 and is expected to reach 117.51 by 2025, reaching a growth of 15.4 over the next five years.
Will voice follow a similar trend?
No More Impulse Buying
People enjoy browsing websites and many businesses rely on user’s impulse buying and ask their websites to be designed to reflect this. With voice taking you directly to the page’s users want to find, will they bypass these potential selling traps and just buy what they want – rather than added extras? Will it end up being a negative for businesses and see users not as satisfied for the experience?
Voiceless Still Matters
You will also have to remember that not all devices might work with voice, or people might be browsing somewhere where voice cannot be used. This means in the design process it needs to work both for voice instruction and manual use. It needs to work just as well for both to ensure the customer journey isn’t affected.
There are many ways voice can affect how we design websites in the upcoming future. It’s important to take note of market trends and usage – seeing how people use voice and thinking of the customer journey. It’s vital we don’t forget the end goals of websites – whether it’s to inform or to sell, the implementation of voice needs to assist this process not make it harder.
Featured image via Unsplash.
Source -
Looping Measures of Effectiveness Back to the Creative Team
Posted:Wed, 09 Sep 2020 10:45:21 +0000
When analysts for professional sports teams noticed that marketing promotions that included the team’s logo vastly outperformed similar creative assets that featured player imagery — something which, to the casual observer, this may simply sound like good analyst work — it showed something significant: creatives rarely receive an analytical assessment of their work.More than half of creatives say they rarely…get qualitative performance data about the creative content
Those analysts didn’t just stumble upon that insight. The feedback loop — where someone is dedicated to evaluating the creative used in marketing campaigns and feeding the data back to designers — was the result of a concentrated effort to improve the creative process, workflow and by extension, organizational culture.
More than half (55%) of creatives say they “rarely” or “never” get qualitative performance data about the creative content they’ve produced. Less than one-in-five creatives (17%) receive such feedback “always” or “often.” That’s according to our research, as published in the 2020 In-House Creative Management Report, which was conducted in partnership with InSource, a professional association for in-house creatives.
Two Approaches to Measuring Creative Value
The 2020 In-House Creative Management Report revealed that 89% of respondents think creative work is important to meeting business objectives. Similarly, 87% said their organization is giving them the same or more credit for the business results their work delivers for the organization.
How can a creative team improve what it does for a business if they never see how their work influences market behavior?
Those statistics are encouraging since creative teams have been asked to do more and more — with the same or fewer resources — for years. However, to sustain this positive relationship with marketing and business leaders, creative teams will need to find quantitative ways to demonstrate their value. The feedback loop strengthens the strategic relationship creatives have with their business leaders.
So how can creative value be measured? Efficiency and effectiveness are the two primary approaches.
Efficiency
Measures of efficiency center on output. Efficiency aims to quantify requests, project by volume, type, requestor, and per designer, completion times, cycle times, cause of delays, and rounds of revision.
Such measures are essential for making a case for the resources the creative team needs to get the work done. In our research, most in-house creative teams are at least thinking about output metrics. This is a good start but it’s just the beginning.
Effectiveness
Measures of creative effectiveness are the next level in organizational sophistication. The creative process doesn’t end when a project has been approved. Instead, there’s a feedback loop that still needs to be completed – performance metrics must be shared with the creative team. How can a creative team improve what it does for a business if they never see how their work influences market behavior?
Importantly, the benefits of sharing performance data goes beyond process improvement. It spreads to the overall culture which strengthens the partnership between creatives and marketing.
As Brent Chiu-Watson, a product leader at Adobe, wrote, measures of efficacy lead to a “mutual interest in understanding creative effectiveness.” In turn, cross-functional collaboration improves and the whole team begins “to provide better insight through dialogue.”
3 Ideas for Looping Measures of Effectiveness Back to Creative
When marketing organizations are interested in measuring creative, there is often more emphasis on measures of output than there is effectiveness. Sometimes, what gets measured is what’s easy to measure. There are several reasons for this:
- Creatives haven’t traditionally focused on metrics;
- The trend of bringing creative in-house has been driven by efficiency;
- Creatives don’t typically have access to performance metrics.
“There is an old adage that you can choose quality, speed or cost, but not all three. Sometimes two, but never all three,” says Adam Morgan, an executive creative director for Adobe, who contributed to the 2020 In-House Creative Management Report. “So, we say the most important thing is quality creative, but then we measure on speed and efficiency.”
Fortunately, Adam and several other big thinkers in the creative space offered some ideas for approaching this business problem.
1) Establish metrics and access in the beginning
“Two thoughts come to mind when you see creative teams not getting feedback on their work. First, does that data even exist? The marketing team might not be collecting it because they haven’t defined success metrics,” wrote Ilise Benun, a speaker, author and business coach for creative professionals at Marketing Mentor.
“Second, the marketing team has data, but they aren’t providing it. In that case, the creative team has to make it easy for the marketing team to pass that data over. Define what those metrics are at the beginning of the project, and then set up the project so that you can collect that information or have direct access to it at the end of the project.”
2) Pair creatives with analytics teams
“In general, teams that are earning their seat at the strategic table are probably also more connected to data. But I don’t think that the creative department should get swamped down in endless metrics,” says Adam.
“Use this as an opportunity to build a strategic partnership with even more departments within the organization who are already focused on measuring performance.”
3) Sharpen analytical skills of creatives
“It’s important to remember that operational metrics are key to showing the impact creative work has on the business,” says our very own Molly Clark, who heads our marketing team. “Creatives will strengthen their relationship with the business by becoming analytical creatives – the best combination of data-driven and creative.”
A Culture of Creative Feedback
The design team for the professional sports organization, at the beginning of this piece, were surprised by their analysts’ findings: most usually agreed that player imagery is visually more compelling. However, the organization built a feedback loop into the creative process that put combined analytics and creative to drive better business results.
Featured image via Unsplash.
Source -
3 Essential Design Trends, September 2020
Posted:Mon, 07 Sep 2020 10:45:03 +0000
A seasonal change is on the horizon and that always has me looking to refresh projects. This month’s design trends provide a few different ways to do that without ripping up your entire website.Here’s what’s trending in design this month.
Animated Heroes (That Aren’t Video)
Hero headers and screens that feature video animation have been popular for a while, but more website designers are experimenting with other types of full-screen moving graphics.
What’s cool about this trend is that it can take on plenty of different forms and look a lot of different ways, meaning that no two websites are identical in this regard.
The other bonus to this trend is that you can add a full-screen animation to almost any style of design without a complete overhaul of the website. You may need a few small tweaks to create a seamless transition from one screen to the next, but it’s a quick, modern design element that you can deploy rather quickly.
Typozon uses a quick motion graphic with plenty of different brand marks to tell the story of their brand identity work. Admittedly, the animation can get a little dizzying if you look at it too long, but the bright colors on the olive background are attention-getting for sure.
Day 1 Club by Spotify opens with a lot of motion in the setup and then settles into subtle motion behind the primary call to action. Shades of black and soft movement bring everything together and help you focus on the bright red button and text overlay.
Kieran Baybutt uses multiple animations for this portfolio website. The most interesting might be on the “second screen.” A couple of things are happening here. The words change with mouse movements as does the background image. There’s also a cool hover pointer featuring portfolio elements that’s in constant motion. There’s a lot going on here, but it makes you want to click around.
Animated or Floating Circles
Circles might be one of the hottest design trends of 2020. They are in all kinds of projects and keep evolving in different ways.
Maybe part of the reason is because of the message that designers are trying to convey in these projects. Circles are associated with harmony and protection. They are used to represent unity, community, and commitment. In motion, circles can also spark feelings of motion or movement with speed determining how chaotic (or not) that movement may be.
This month’s iteration of circle trends is animated. Some circles animate in place, while others seem to float in space on the canvas.
The circles in each example have something in common though – they bring you into the design and encourage interaction with it. (That might be why this website design trend is increasing in popularity all the time.)
The circular motion for the UX+ logo actually helps draw the eye away from all the almost overwhelming animation on the left side of the split-screen design. With plenty of white space surrounding it, the constant movement is just enough to pull attention to the logo and then down the screen to important information about the event.
Katch Me uses circles that seem to float over the background video with a soft “bounce” in place. The animation changes when the mouse hovers over each circle with an expanded action and the ability to move the circle in a larger space. The circles here are actually the call-to-action buttons.
Visually, the circles for Anastasiia Afanasieva’s website look like a mashup of the above examples. There’s a rotating animation for circles that seem to float in space. You have to click through this design though to see the real brilliance in it. Each circle has a hover state that changes the background color of the website (and images in each box) to match the color displayed.
Bright Yellow Coloring
Another website design trend that might be a reflection of the state of the world is in the use of the color yellow. With a global health pandemic, design projects are leaning in to brighter, more cheerful tones to help offset the stress of the world.
For many, yellow can shine just a bit of hope and optimism into gloomier times.
While most of the projects using bright yellow as an eye-popping accent, others are going all in.
Next Big Thing AG uses yellow imagery inside of oversized cutout lettering (another website design trend this year) on a dark background. Even with the darker overall palette, the design feels bright and enticing. You almost want to dive deeper into the design to see what the image behind the letters is and what else the site contains.
Sonya Mudvex uses a full yellow background on her portfolio homepage to stop visitors in their tracks. The rest of the design features a soft gray background and plenty of yellow accents. In addition to great use of color here, there are plenty of other UX tricks in this design, including some geolocation tools if you interact with the ticket validation graphic on the screen.
Upqode uses yellow with a peachy color palette to stand out. The illustrated animations are much more lively thanks to bright coloring. The overall color palette is a bit unexpected, and that’s what makes it interesting.
Conclusion
If this month’s website design trends tell you anything, it’s that interactive elements and animation are a growing part of the conversation. Are you already using these techniques in projects? (If not, it is probably time to think about it.)
You can also see how the influence of what’s happening in the world around us impacts design as well. It can counter other emotions to create a better mental space or mirror what’s happening in the world around us.
Source
FeedBurner delivers the world's subscriptions wherever they need to go. Publish a feed for text or podcasting?
You should try FeedBurner today.