The psychology of Web design: How colors, typefaces and spacing affect your mood

The psychology of Web design

A great website design is so much more than just delivering content and making it look good. When visitors come to your site, they produce a set of feelings about your website and your organization. The type of feelings they produce – positive or negative – are entirely in your hands and should not be overlooked when designing content.

Over the years, there has been a body of knowledge produced to help designers create effective visuals that play into the psychology of their viewers. In order to achieve this, one must understand how different design elements and how we use them affect the mood, attitude and experience the visitor will have while browsing our website.

Below are four major areas of website design and development that have the biggest impacts on the psychology of website visitors. These are the tools you’ll need to create a visually-engaging site that encourages visitors to return.

Content

For websites, content drives the design you see on screen. Visitors come to a website to access information they need. Design helps them find the information they need quickly and with ease.
In the early days of the Web, it was common to see pages and pages slammed with content, often pages with 10,000 words or more (as a comparison, this article is about 1,600 words). With pages loaded down with content, it made it extremely difficult to find content, let alone read through to get the information needed. This often invoked stress, anxiety and overall unpleasant feelings for visitors.
With today’s Web, content should be edited and organized so that there is a happy medium between providing adequate and needed information while not overwhelming visitors. When content is in that happy place, visitors are able to find the information quickly and they feel good afterwards.
Hiding content, presenting too much content or otherwise mudding up your website makes visitors irritable, leading to possible loss in potential business.

In addition, the type of content you present sets a tone for you and your organization. If your content doesn’t present the right information in a logical place, is hard to follow or tends to beat around the bush on important information, then visitors will feel this way about you.
http://www.webdesignbysper.com/

Keep your content clean, organized, easy to read, concise, and professional to help aid in the psychology of your visitors and produce positive vibes.
To help you craft the best content for your website, this article at Tuts+ goes into further detail on the psychology of great content for your website.

Space

The way a Web page is organized can dramatically affect how a visitor feels while they are there. Organizing content should be a priority in any website design, but this organization should take into consideration the space it takes up on the site.
If you’re not familiar, “white space” is the areas of a design in which no content or visual element demanding our attention is present. White space plays an important role in any type of design work, especially Web design, because it visually gives a resting place for the visitor. These resting places are often found in margins and the space around things.

The concept of minimalism – that is, using the least amount of visual content needed to convey your point or idea – is currently very popular across the Web, specifically on services like Squarespace.
Said differently, if a visitor comes to your website and every inch of real estate on the screen is taken up by words, graphics, blinking things, etc., it starts to feel chaotic and makes them uneasy. If no white space is present, there is nothing for them to move their eyes to take a visual break.
If you take the time to edit and organize your content in a way that is respectful of the space you have to present the information, you give a feeling of professionalism, organization and overall good vibes to visitors. You want your visitors to feel like you have your stuff together and that you are easy to work with.
Keeping things simple with a well organized website using adequate white space tells visitors you know what’s important and you don’t want to waste their time.
Learn more about white space and keeping things simple in this Smashing Magazine article.

Color

When designing a website, often the colors are dictated by the organization’s new or existing visual identity (or brand). But how these colors are used affects how the visitor feels when they visit your site.
Most visual identities have neutral colors (i.e the tints, shades, and hues of whites, grays, and blacks) that are used along with their main colors. In most modern designs, these neutral colors often take dominance in terms of how much real estate they take up.
For instance, if an organization’s main colors are blue and yellow, with neutrals being white and black, it is likely that they may choose a white background to display their content on, instead of a blue or yellow background.
These neutrals act much like white space does: it provides an opportunity for rest. Using the example above, if all you see on that organization’s website was blue and yellow, it would be an overwhelming site to focus your attention on (think yellow text on a blue background).

The types of colors you use also play into the psychology of your Web design. Cooler colors (blues, greens, purples) often provide an inviting, professional and relaxed feeling. In contrast, it can be used to give a very cold and unfriendly feeling as well. Warmer colors (yellows, oranges, reds) are soothing, warm, and give a sense of creativity but can also give off negative feelings such as anger and stress.

In addition, neutrals such as white often give a positive feeling of openness, but could also feel bland and dull. Grays are often considered slick, modern, and clean, but can be very cold and uninviting. Blacks are often associated with being professional and clean cut, but is also very overpowering and can be rather generic.
How you use colors to help convey the positive feelings discussed above depends on the tint (lightness), hue (type) and shade (darkness) of the color as well as how much of the color you opt to use. If you want your site to be inviting, open and creative, a combination of blues and greens, with touches of yellow or orange, on a white or light gray background will help convey these positive feelings to your visitors.
For more information on how exact colors play into the psychology of web design Malaysia, Vandelay Design has a great article outlining each primary and secondary color and its effects on viewers.

Typography

Finally, typography can convey tons of emotions and feelings for visitors to your website. There are thousands of typefaces out there, and thanks to advancing Web technology such as CSS3, these typefaces have found their way onto websites as well.
No more picking a typeface out of the 15 or so Web-safe fonts. This has opened the door to thousands of new typefaces that can be used. And with great choice comes great responsibility.
Typefaces are designed to be used in specific situations and for certain uses. Serif fonts (those with little serifs, or feet, on the letters like Times New Roman) are often associated with professionalism, scholarly, and seriousness, while san-serif fonts (like Helvetica) are a bit more modern feeling, clean and more informal.

For example, most news websites (i.e. The New York Times) use serif fonts to help convey the feeling of tradition, importance and knowledge. They want you to feel like they are an authority, that what you are reading is important and that they know what they are talking about.
Sans-serif fonts are used more and more to convey a feeling of modern, clean, sophistication and upscale. Those in the technology industry often use san-serif fonts much more than serif fonts because they want visitors to feel like they are up-to-date and futuristic.
For more on what kind of fonts to use for your website design, Super Dev Resources has two great infographics to help you navigate your typography.
The way type is presented on the page is also important. Leading (space between the lines) and kerning (space between the letters) should be evaluated as well. Large leading with lots of white space between lines makes the copy feel airier and easier to read; little leading gives a crowded feeling and is hard to read more than one paragraph at a time.

http://www.webdesignbysper.com/

via Fonts.com

Space between paragraphs, margins between blocks of text and other elements on the page, and font size (and its relation to leading) are also factors to consider. Tight paragraphs are uninviting and hard to read, copy that is too close to elements such as pictures make the page feel crowded, and too large or too small font size will either make the visitor feel like you are screaming at them or whispering.
Need ideas on the types of fonts available for your Web design? Check out offerings by Abobe’s TypeKit or Google Fonts for ideas on the possibilities.

Conclusion

It is often the designers’ job to understand the psychology of their design choices when producing a design, but understand the basics in some key areas of design will help you understand and even further help produce great content and manage your website design more effectively.
While these areas focus mainly on website design, a lot of the psychology of design can be used in other areas of design as well, such as logo and print design.
How will you apply these theories to your website?
Don’t miss: The importance of taking back control of your online identity and Designers’ dream giveaway: Win a Sony Alpha a5100, $300 in MOO supplies or a FiftyThree stylus

---

Interested in Squarespace? Use code THENEXTWEB for 10 percent off.

Image credits: Shutterstock, Unsplash, Squarespace

How to Choose the Right Host for Your Website

How to Choose the Right Host for Your Website

AJ Kumar

 

There are thousands of web hosting companies -- the services that essentially connect your site to the internet. So how does an entrepreneur choose the one that's right for his or her business?

To ensure that your hosting company supports your business needs and doesn't create unnecessary hurdles to your website's success, you first need to understand the major types of hosting. Then, consider some basic criteria to help choose the best plan for you.

Types of web hosting plans: 

 As you begin shopping for a web hosting plan, you'll encounter a number of different types, including the following options:

Individual plans. 

These are the most affordable options. As an example, HostGator's introductory package starts at just $3.96 a month for a three-year package. Typically, these plans provide hosting support for a single domain only and may limits the features, bandwidth and data storage. So, they are often best suited to beginning webmasters who don't anticipate significant traffic or special needs for their websites.

Dedicated servers. 

Individual plans are sometimes referred to as "shared hosting plans" because they share space on hosting servers with other webmasters. When webmasters outgrow the features made available through these limited plans, they will need to upgrade to ones that grant companies their own servers.

These plans will cost more, with Hostgator's offerings beginning at $139 a month, for instance. If you anticipate growing to a size that eventually requires this upgraded option, be sure to choose a hosting provider that offers both types of plans and allows for account transitions.

Reseller accounts. 

Reseller hosting occupies a special niche between individual plans and dedicated server arrangements, allowing clients to set up multiple individual plans within a single account. Reseller plans typically cost between $10 and $20 a month and are best suited for businesses that anticipate running several small websites.

What to look for in a hosting plan: 

Once you've decided on the type of hosting plan, consider these issues in choosing a specific provider:

Cost. 

While it's important to look for a hosting provider that offers reasonable rates, avoid free hosting programs entirely, as they may be unreliable and their low costs are often subsidized by required on-site advertisements.

Customer reviews. 

Customer reviews can be an excellent resource in evaluating web hosts because any fly-by-night host can put up a professional-looking sales page and make bold promises. Search for multiple reviews from current or past customers because a single positive review could have originated from the company's own marketing department.
If you'd like a shortcut here, pay close attention to HostGator, Bluehost and 1 and 1, which all tend to garner positive recommendations from clients.

Customer support. 

Whether you're a beginning webmaster or a more experienced digital business owner, you'll want a dependable customer support team behind your web hosting plan. Things can and will go wrong on your website's backend, but getting support when you need it can go a long way toward minimizing any potential damage to your business.

Look for companies that provide 24/7 phone support, email access and online chat. Before committing to a plan, test out each of these features to get a feel for how well your needs will be met.

Storage and bandwidth allowances. 

As more hosting plans begin offering unlimited disk space and bandwidth, this may not be a concern for your business. But it's still important to be aware of any limitations to ensure that your plan has enough space for your website to operate effectively.

Script support. 

One final consideration is the hosting company's built-in support for popular web scripts. Say, for example, you want to run WordPress on your website. Some hosts offer built-in script packages that make the installation of this popular blogging platform a breeze. Other hosts limit the number of MySQL databases that can be created, which you'll need to run WordPress and other programs.

How to 'Split Test' Your Website to Engage Online Customers Better

How to 'Split Test' Your Website to Engage Online Customers Better

AJ Kumar

November 27, 2012
 
When it comes to designing your website, you have two choices: Select the site elements you believe look best, or you can use "split testing" to determine which design features are most engaging to your audience.

Essentially, split testing randomly serves up multiple versions of your website's pages to generate data about their effectiveness. The process allows you to quickly improve your website's overall conversion rates and isn't nearly as complicated as it may sound. Here's how to do it:

1. Isolate website page variables.

 
There are two types of split testing protocols: A/B split testing and multivariate testing. A/B split testing, which pits two page variations with a single differentiating element against each other, can be a better choice for beginning webmasters than the more complex multivariate procedure.
To get started with A/B split testing, you'll need to choose a single variable to test. A few possible options include:

• The wording, color, font, font size or position of your page's header text
• The specific colors used in your website's background or design elements
• The location of or wording used in your website's email newsletter opt-in box
• The position, color or design of your brand's social media buttons
• The color, design or location of any "Buy Now" buttons on your website

The possibilities are endless so be sure to focus on elements that are likely to bring about the biggest changes in your website's performance. Tweaking the color of your links, for example, may not have as much impact as optimizing your on-site calls to action.

2. Build web page variations.

 
Once you've selected a specific variable to test, create the different pages that will be pitted against each other. Keep in mind that, for now, you'll want to limit your changes to a single variable to conclusively determine which elements result in better website performance.
If, as an example, you've chosen to test two different wordings for your site's headline text, you'll need to create a new page that will challenge your existing version. If your site runs in HTML, simply copy your original page, make the necessary changes to your headline text and then upload the new page to your website using a different file name (as in, "page-2.html").

Alternatively, if your website runs on WordPress or any other content management system, log in to your dashboard and create a new page using the same naming convention described above. Copy the text from your original page into your test page and then change the single test variable you're isolating with this A/B split test.

3. Install Google's Content Experiments program.

 
Once your test pages are ready to go, log into your Google Analytics account and find the instructions for installing Google's Content Experiments program onto your website.
This free program replaces the older Google Website Optimizer service, but still retains many of the same useful features. Although the Content Experiments program can let you test up to five pages against one another, most beginning webmasters will still find it easier to stick to a single test variable across two page variations. That can let you identify the specific elements that have the greatest impact on website performance as quickly as possible.

To set up a Content Experiments test, first select the pages to include in your split test. Then, specify to Google how much of your traffic should be exposed to the experiment, as well as the overall goal of your test. Most webmasters will want to set this value at 100 percent because doing so will help generate test data as quickly as possible. Finally, you'll be given a small snippet of code to install on your website, and your test will go live upon your approval.

4. Measure your results.

 
As your test proceeds, your results will be automatically updated within your Google Analytics account. However, there are a few things you'll want to keep in mind before making decisions based on this data.

First, it's important to wait to make any decisions about which page variation is the "winner" until Google Analytics is able to generate enough data to predict statistical significance. Judging the results of your A/B split test after only a few page visits simply won't give you enough information to draw solid conclusions about the best way to improve your website.
Once you do identify a winner, either move on to a new split test variable or create additional page variations to challenge your winning content. You want to maintain a mindset of continuous improvement for your website, so always be testing.

Are You a Bad Web Design Client?

Are You a Bad Web Design Client?  

Have you burned through multiple creative agencies trying to get an effective website? Are you still not happy with the website you have now? Perhaps the problem has been something you have more control over than you know. That problem could be you.
In this article we are going to help you, as a web design client, learn what makes a bad client and how to avoid these things to get an effective website from your design team.

What Makes a Bad Web Design Client?

We love and appreciate every single client we get the opportunity to work with. However, every once in awhile we do get that one client that makes us reconsider our relationship with them. If you’re a freelance designer or creative agency, then you most definitely have found yourself in these situations as well. If you’re a client, and you’ve burned through multiple web designers or still don’t have an effective website, then perhaps that bad web design client is you.

Let’s take a look at the characteristics of a bad web design client…

• You expect more design work than what you paid for
• You think that every web design task should always be turned around in minutes
• You put in last-minute requests that are always needed ASAP
• You are extremely vague with design preferences or requested feedback
• You ask to copy someone else’s web design exactly as is
• You like to fax photos or copy that you want used in your web design
• You ask your web designer for help with everything, but web design (eg. how to fix your fax machine)
• You threaten your designer with taking your project overseas to someone cheaper
• You go MIA for weeks or months without notice when design feedback is requested
• You offer a payment that is far less than what you’ve been quoted
• You try to teach web design best practices to your web designer
• You completely switch design direction after approving design compositions
• You treat your web designer like a low skill, replaceable employee

---

How to Be a Good Web Design Client…

Don’t get us wrong, more often than not bad web design clients don’t start that way. They become bad clients as a result of their web designer, or their original salesperson, not properly doing their jobs and communicating the right expectations upfront.
To help everyone, clients and designers alike, from avoiding these situations we have created the following checklist to produce positive web design projects
Before a project starts, clients should always…

• Request to see the designer’s best work
• Clearly understand, and agree to, all design costs and prices
• Read and understand any and all terms and conditions
• Provide at least 5-10 web designs that you like (make sure to list reasons why too)
• Provide any and all logos, photos and content that you’d like to see in the designs
• Schedule a block of time each day or week to work with your designer or project manager

It should be the responsibility of your designer, project manager and/or salesperson to clearly communicate and request all of these things, but it never hurts to be proactive. In doing so you will create a level of excitement with your design team that will encourage them to want to produce their best work for you.
TIP: Prepared, responsive clients lead to motivated, enthusiastic designers. Motivated, enthusiastic designers are more likely to include some design work for free.

---

…and Get a Great Website

At the end of the it’s on us, as an agency, to properly manage expectations and produce happy clients. So whether you think you’re a good or bad web design client, if you’re still relying on an ineffective, outdated website to grow your business then we want to help. Our team of designers, project mangers and consultants will make sure to help us both avoid anything but a positive, memorable experience.

The Psychology of Why Sexy Websites Suck at Sales

Did you know we trust attractive people more than unattractive ones?
Illogical, but true.
We like people who are nice to look at—and we want to say yes to people we like. Not only that, but we actually think beautiful people are smarter, kinder, and more trustworthy.
Personally speaking, I was once suckered into paid membership with an organization I’m ideologically opposed to because the young woman selling subscriptions was, well….let’s just say I bought it. True story. On the other side of the coin, I was pretty suspicious of famed internet marketer Bob Bly when I first saw his photo.
But don’t take my word for it — Dr Robert Cialdini wrote all about it in Influence: The Psychology of Persuasion.

WEB DESIGNERS AUTOMATICALLY GRASP THIS PRINCIPLE AND APPLY IT TO THE WEBSITES THEY CREATE

And good for them. Recent research from Melbourne University vindicates their instinctive belief that attractive websites are more trustworthy—and thus more likely to convince prospects to buy. It shows that consumers are 20% more trusting of websites than they were five years ago—largely because websites today are prettier than the websites of 2006:

As aesthetically orientated humans, we’re psychologically hardwired to trust beautiful people, and the same goes for websites. Our offline behaviour and inclinations translate to our online existence … With websites becoming increasingly attractive and including more trimmings, this creates a greater feeling of trustworthiness and professionalism in online consumers.

All great news—we can rest easy knowing our desire for a flashy, sexy, all-singing and all-dancing website is actually going to increase sales as well as our egos. Right?

OKAY SMARTY-PANTS, THEN WHICH OF THESE WEBSITES IS MORE TRUSTWORTHY—?

If you’re like me, you probably feel World of Social and Space Odyssey have a lot more sex appeal than Stress-Free Productivity and Maximus Vita. It’s not that the latter sites are unattractive—just that the former are way sexier.

BZZZT

The problem is, as it turns out, that while our intuition about attractive websites being more trustworthy is dead on…our understanding of what “attractive” is—well, let’s just say it’s not all there.
In a video discussing the research I mentioned before, its author Dr Brent Coker explicitly explains…

By attractive we mean very well balanced, and following conventions such as logo top left, navigation across the top, search on the right, nice colors, nice quality design.

When I quizzed him further, Brent added that “well balanced” means most importantly that the site conforms to the Golden Ratio—as well as having a carefully-selected color palette:

This is a site I created. The spiral is known as a Fibonacci Spiral, and the boxes show the Golden Ratio, which is found in many things we consider particularly attractive. As you can see, fitting the elements of a site into the Golden Ratio does involve compromise—in this case there were technical limitations behind the scenes. Nonetheless, the general width and placement of the elements feels pleasing because of their conformance to the spiral.

In other words, what average users find attractive is not what we like to think of when we envision our new website. You know, the one that will wow our customers and win awards. Something that hasn’t been created before?
What’s important to the average web user is that the site is not original. At least, not too original. If it’s not similar enough to other websites, problems arise.
The Space Odyssey site above is a perfect example. It has no standard navigation—and little to no textual information is visible either.  To interact with the site, you must hit a button that is easily mistaken for part of the decorations.
World of Social has even less text; just a huge number of images that move when you mouse over them—but aren’t clickable.
Obviously the designers intended these problems to be features—so why are they “bugs”? Well, as web usability expert Jakob Nielsen put it, all the way back in 1996,

Don’t assume that users know as much about your site as you do. They always have difficulty finding information, so they need support in the form of a strong sense of structure and place. Start your design with a good understanding of the structure of the information space and communicate this structure explicitly to the user.

THINGS HAVEN’T CHANGED

In case you’re thinking that web users are more savvy today, or at least more willing to experiment and play with unusual designs, let me reassure you: they are not. Discussing his recent research, Coker says:

The biggest source of frustration for web surfers appears to be the ability to find relevant information on a website—that’s the biggest killer, the biggest driver of dissatisfaction. As soon as a web visitor is dissatisfied they will leave that website and defect to a competitor. And the best way that website owners can stop that or reduce that is by increasing the relevancy of information.

In other words, the major challenge for websites is helping users to find what they want straight away. As Coker says, “you need a very good map to help people get around”. And Nielsen has discovered the same thing in his own research:

Uncovering navigation shouldn’t be a major task: Make it permanently visible on the page. Small children like minesweeping (passing the mouse around the screen to see what’s hidden), but teenagers don’t like it, and adults hate it.

JUDGING AESTHETICS STARTS WITH WHAT WE KNOW

Web designers are in a very privileged position, aesthetically speaking. They have a highly developed sense for what is attractive and what is not. They’re aware of design trends, and can see immediately that one website looks dated, while another looks generic. They judge aesthetics on that basis—as in the examples of Maximus Vita and Stress-Free Productivity above.
And we tend to take our cues from them. Indeed, there are dozens of web design galleries online showcasing all kinds of sexy sites. And we take for granted that that’s what really good websites are like. We want something like that. Not something basic, unoriginal, even bland-looking.
But that is not how most people’s minds work.
To draw a somewhat geeky analogy, web designers are like Starfleet officers in Star Trek. They encounter a huge variety of alien species, and many of them have a very sophisticated sense of beauty. Jadzia Dax marries Worf, the Klingon.

Would you marry Worf?

To the average person, human faces are attractive, and Klingon faces are not. They’re too alien. And the exact same thing is true of websites. Sites without the logo and navigation at the top, search on the right, and elements fitting into Golden Rectangles are just too alien to judge. They also tend to be terrible at presenting the information users need.
To make your next web design successful, you need to tether your web designer firmly to the ground. Keep them in touch with reality. You must remember that the average web user doesn’t even know what a design gallery is—and is oblivious to anything except whether they can immediately find what they’re looking for.
If they can, then they have a foundation for judging the site’s aesthetics. Provided it falls basically into the Golden Ratio and meets some basic guidelines for color, they’ll almost certainly decide it’s a good-looking site. An attractive site. A site to be trusted.
If they can’t find what they’re looking for—if they don’t immediately see text explaining where they are and what they can do, and they can’t understand how to find that text—it doesn’t matter one iota how smoking hot the site looks to you, its proud owner.
Because they’re not even going to get as far as asking whether it’s pretty. They’re going to run to the back button just as fast as if a Klingon wanted to marry them.

About the Author: Bnonn is the author of a free course on 5 website changes you can make today to bring in more sales. Known in the boroughs as the Information Highwayman, he helps entrepreneurs sell more online by improving both their web copy and design. When he’s not knee-deep in the guts of someone’s homepage, he is teaching his kids about steampunk, Nathan Fillion, and how to grapple a zombie without getting bit.

10 Secret Code Phrases to Get What You Want from Your Graphic Designer

Pixels, white space, focal points and sans-serif. Designers have their own language, and it’s baffling if you’re not used to it.
It’s almost like we have a “secret code,” and we reserve our best work for the clients who know it. When you speak with us, you might feel like you need a translator to communicate what you want and get marketing materials that stand out.

But the good news is it’s simpler than it sounds.

In the end, you don’t need to know the difference between points and pixels to get the best work from your designer. You just need to know a few secret code phrases to help you describe what you want and avoid the red flags that set graphic designers on edge.

Code Phrases to Avoid:

Say the phrases below at your peril.
When we hear these come out of your mouth, we immediately start either formulating how we can say “no” to working with you, or calculating how much more we should charge for the project so that we can cover the additional time it will take to deal with you.

1. “I’ll know it when I see it.” When you say this, we have visions of parading design after design by you as you sit passively and observe. Design is a two-way process. Your participation and guidance are key to coming up with a final product that meets your needs.

2.”Here, I made a layout for you.” On the other hand, we don’t want you to do our work for us. Tell us about your conversion goals and the market you want to reach, let us know if there is a certain mood you want to create or an image you want to convey, and then step back so we can do what we do best: solve communication problems visually. When you try to do our work for us, you limit our ability to deliver the best solution.

3. “I had a huge falling out with my last designer.” This one puts us on edge. We wonder why? Was it them, or was it you? Were you impossible to work with? Did you not pay your bills?

4. “I don’t have much to spend now, but there’s more work coming.” Whenever you don’t have money set aside for design, it’s like telling a designer that you don’t value good design or well-planned marketing, and you won’t appreciate the impact it will have on sales. It’s a red flag that you’ll be hard to deal with, won’t pay invoices on time, and might even be out of business within a few months or years — none of which are qualities top designers are looking for.

5. “How much does cost?” Designers sometimes have standard prices for projects that have a tight description and don’t vary much. These could include website headers, HTML emails of a particular length, and even logos. But for any project that’s complex, such as a free report, corporate website, or product packaging, we need to gather information before we can give you a price. Experienced business people know this, so asking for a “ballpark figure” before giving details just makes you look like a beginner.

6. “I want to show this to my .” There is nothing wrong with asking for feedback, but this one still makes designers nervous, and here’s why: none of these people are inside your business. If you want to talk with a marketing director or your business partner, that’s fine, because they probably understand your business and marketing goals, but when you go outside of your company for feedback, what it really tells us is that you can’t make a decision on your own.

Code Phrases to Use:

The phrases below are music to our ears. Clients who understand the value a designer brings to the table and know the importance of well-planned marketing say things like this:
7. “What do you recommend we do?” The simplest way to get inspired work out of anyone is to make it clear that you value their opinion. Graphic designers are no exception. Instead of starting a project with your deliverables set in stone, give us a chance to think about it and make recommendations. Sure, it might take an extra day or two, but you’ll often be amazed at the ideas top designers give you. It can be the difference between a mediocre marketing campaign and one that makes you millions.
8. “How much time do you need?” This question tells us you know good work takes time, especially for new clients. First projects always take the longest because we are inventing the “look” of your company from scratch. It takes a lot of thought, back-and-forth, and revisions, all of which take time. But if you’re willing to be patient, it’s worth it.
9. “What’s the best way to communicate?” Some graphic designers are impossible to reach by phone, while others prefer it. Some are happy to talk with you at 10 PM, while others can’t. Before you start your project, it’s important to know how your graphic designer prefers to communicate, and then do your best to accommodate it. You’ll have less mixups, more fun, and a designer who loves working with you — all of which lead to higher-quality work.
10. “Here’s the information you need. Here’s the target market. Here’s how we’ll approve your proposals. Go to work!” The ultimate designers’ fantasy: a client who has all of their text and photos organized; who knows their target market and overall goal for the piece; who has a clear approval process in place; and who is willing to give us the time and authority to do our work. If you learn nothing else from this article, learn these phrases, because they cover everything we want to hear.

The biggest secret of all?

Clients who are easy to work with and use the secret code phrases on a regular basis don’t just get our best work. They also get the lowest invoices, because we can work efficiently and don’t have to fight our way through the process.

How about you? Do you have a good working relationship with a designer? What makes it work? Or have you had nightmare experiences?
Tell us about it in the comments.

About the Author: Pamela Wilson is an award-winning graphic designer and author of the Big Brand System.

7 Deadly Web Design Sins You Might Be Making

Web design is a tricky subject.
People have different opinions about what constitutes good web design and what doesn’t.
Some people think your site needs to be super sleek with an up-to-date, modern design in order to get attention. Others believe that web design doesn’t really matter all that much and you just need a site that works and lets people do what they want, like Craigslist.

Both answers are right depending on which industry or business you’re talking about. But, how do you figure out what’s right for you? And, how can you make sure you’re web designer knows what they’re talking about and won’t make mistakes?

This post presents seven deadly web design sins you don’t want to make on your site. 

The good news is that they’re all simple principles every website should follow. So, whether you get a slick design or not, you still need to know about these design principles and how they apply to your site.

Also, you can use these principles to make sure your web designer knows what they’re doing. Just because someone is a good designer doesn’t mean they know how to design for the web. And, just because someone designs websites doesn’t mean they know how to design a site that will convert. Pay close attention to the principles presented in this post, and use them if necessary to make sure your designer designs a site that’s optimized to get the results you need.

Mistake #1: Fonts That Are Too Small

The first mistake people make is creating a site with fonts that are too small.
The reason for this is that, back in the day, most websites had small fonts. The standard was somewhere around 12 px, and nearly everyone followed that standard.
But, over time, people started to realize that 12 px fonts are hard to read online. When a screen is 24 inches from someone’s face, small fonts make it difficult to read.
People also started to realize that you have only a limited amount of time to get visitors’ attention and let them know they’re in the right place. One study even states that the average attention span in 2013 was 8 seconds, one second less than the average attention span of a goldfish. The same study also states that people read only 28% of the words on an average web page.

A 2013 study found the average attention span of people is 8 seconds, one second less than that of a goldfish. Is that even possible? Flickr: photographer23, Creative Commons license

In order to get people’s attention right away, you need to do the following:

1. Compose great headlines that grab readers’ attention.
2. Write interesting content that will get them to read more than 28% of what you’ve written
3. Use headline fonts that are big enough to demand attention
4. Make sure body fonts are large enough to read so readers don’t give up because they’re tired of squinting.

For all the reasons mentioned above, font sizes have increased over the last few years to the point that many view 14 px as the very minimum font size, and many sites go even bigger with 18 px as a minimum, especially when a lot of reading is involved.
Here are some examples of exceptional web design with great font sizes:
KISSmetrics

• Headline: 35 px
• Footer: 15 px

Vero

• Headline: 41 px
• Body: 18 px

Help Scout Blog

Intro text: 26 px Body: 19 px

The point to keep in mind is that the purpose of writing copy is to get it read. When you pay a writer good money or painstakingly write website copy yourself, you want to make sure it gets read and doesn’t get hidden by a small font that makes the copy difficult to read.
You also need to remember that not all fonts are the same size. A 16 px Arial font can be smaller than a 16 px version of another font. This is something you need to be aware of when choosing a font size, so you don’t arbitrarily pick 19 px because another site did, only to find out your 19 px version isn’t as big.
Keep in mind that footer fonts can be on the smaller side and so can subtext, but if you’ve written something you want people to read, consider using a 16 px font at a minimum. And, in case you don’t want to take my word for it, Smashing Magazine preaches the same thing in this article: 16 Pixels for Body Copy. Anything Less Is a Costly Mistake.
Pro Tip: In order to get a feel for the size font you’d like to use, based on websites you like, download the WhatFont extension for Google Chrome. It’s a Chrome plugin that makes it really easy to click on fonts in order to find out what font type and size a website is using.

 

 

Mistake #2: Moving Sliders

I still don’t understand why so many websites use moving sliders.
Are they effective? Do they convert? Are they the best way to present your information to customers?
In most cases, they are not.
Peep Laja wrote an article for ConversionXL titled Don’t Use Automatic Image Carousels or Sliders, Ignore the Fad. In the article he quotes Chris Goward of WiderFunnel and Tim Ash of SiteTuners as saying the following:

We have tested rotating offers many times and have found it to be a poor way of presenting home page content.
-Chris Goward

And…

Rotating banners are absolutely evil and should be removed immediately.
-Tim Ash

Laja also mentions two studies where rotating sliders were proven to be ineffective:
The first was by usability guru Jakob Nielsen. He asked a visitor if Siemens had any special offers for washing machines on their site. In fact, they did have an offer in 98-point font that said customers could get cash back on a new appliance. Unfortunately, the user didn’t see the offer because it was cloaked in a moving slider and ended up being completely missed.

This points to a theory among conversion experts that sliders cause banner blindness similar to ads in a sidebar. People are used to lame ads in a sidebar, so they have a tendency to ignore them. This principle seems to apply to rotating sliders as well.
The second study was from the University of Notre Dame. They found that only around 1% of visitors clicked on the slider, with 84% of the clicks on the item in the first position.

What’s the point of having a website slider if only 1% of people click on the item that is taking up your most valuable homepage real estate, especially when 84% of those clicks are on the first item anyway? Why annoy people with something moving that’s difficult to keep track of? Why not give them a single option to choose from since the majority click the first item anyway?

So, why do so many people use sliders since they appear to be so ineffective?
The best theory I can come up with is that it seems like a cool and high-tech feature, and it’s easy for web developers to implement. Based on those two factors, business owners say, “Hey, I want one of those fancy moving slider things,” and web designers comply because they look “cool” and aren’t that hard to do.

But website owners need to consider whether they’ll be effective and whether they’re the best way to convey information on their site, something Peep Laja, Chris Goward, Tim Ash, and many other smart internet marketing folks no longer believe is the case.
To solve this problem, start by asking yourself what is the best way to present your information instead of picking a site you like and copying their design, including the cool-looking slider they use on the homepage.

I used this approach with a friend of mine a few years ago for a website he was building for his tutoring company – Genesis Tutoring.
He and his business partner approached me and said, “Hey we want to build a website…and we want to have a slider on the homepage that has this information,” and then he showed me a flyer they hand out at schools to advertise their service. The flyer was beautiful, presented the information incredibly well, and, surprise, surprise, didn’t include a slider (those pesky sliders just don’t seem to translate well into the world of printed flyers).
So, I suggested, “Why don’t you just duplicate your brochure that’s already working on your homepage and then put a contact button along with your phone number and email underneath.” We tried that, and here’s how it turned out…

The site ended up looking great, avoided the dreaded default slider, and converts well. What’s not to like?
When it comes to building your own site, follow these instructions to get the same results:

1. Remember not to blindly add a slider just because everyone else is doing it (even if your designer recommends one).
2. Consider what is the best way to present your information on your homepage instead of just blindly copying what your competitors are doing.
3. Choose a single important offer to list in the A-Space on your homepage and go with that. There will always be other things you want to promote, but you can do that farther down on the page or with a button at the top of the page. Pick one offer, make it prominent, and then get out of the way and let your website go to work.
4. And to really hammer down the last point: think about the #1 goal you want your website to do. Focus on that and can all the other calls-to-actions.

Again, in case you don’t want to take my word on this, here are some articles you can read that support this point:

• Rotating Banners? Just Say No!
• Rotating Offers – The Scourge of Homepage Design

Mistake #3: Low Contrast Fonts

Another huge mistake people make is using low contrast fonts.
Low contrast means a lighter font on a light background or a darker font on a dark background. I’m not sure if this is something that looks ok in print design, but it’s never a good idea on the web.
You always want to make sure your website content is as easy to read as possible. The Smashing Magazine article referenced above told us that the amount of light that gets through our eyes at age 40 is only half the amount of light that gets through our eyes at age 20. This drops to 20% by age 60. On top of that, nearly 9% of Americans are visually impaired.
With these stats in mind, do you really want to make it harder for visitors to read your content, especially after you’ve paid so much and worked so hard to get them to your site in the first place?

Low contrast for fonts is always a bad idea.

You can solve this by always using high contrast fonts. If the background is dark, the font should be light, and if the background is light, the font should be dark.
Actually, I’ll take this even one step further. Rarely are there times when you need to use any font colors besides black or white. Sometimes designers choose a lighter gray font on a white background or a light blue font on a dark blue background.
Why? Is that really easier to read, or are you just trying to add “visual appeal”? Books use black fonts on a white background for a reason – it’s easy to read. Websites would do well to follow this example.
Here are some samples of great font contrast:
Help Scout Blog

Evernote

This is an example of good contrast on an image, which is not easy to do.

Harry’s

The lesson to remember is that fonts should always have a high contrast with the background behind them. If you find the text difficult to read and feel like there should be more contrast, don’t hesitate to call your designer and let them know. Your website isn’t a design showcase. It’s a place to make sales and increase conversions.
Bonus Tip: Not only is high contrast important, but you also want to use reverse type sparingly. (Reverse type is white text on a black (or color) background instead of black text on a white background.)
In fact, David Ogilvy, one of the greatest ad men of all time, said ads should never be set in reverse type. Colin Wheildon, editor of the largest Australian motoring publication, set out to test this theory. His findings were astounding.
According to the study, below is a list of the comprehension level for different colors and backgrounds:

• Black text on white: 70% good, 19% fair, 11% poor
• White text on black: 0% good, 12% fair, 88% poor
• White text on purple: 2% good, 16% fair, 82% poor
• White text on royal blue: 0% good, 4% fair, 96% poor

Isn’t that incredible? The results from black text on a white background compared with white text on a color background are nearly the exact opposite!
The takeaways are:

• Always remember to use high contrast fonts, but also…
• Use reverse type sparingly.

Sometimes reverse type looks good, but it can have a drastic impact on readability and retention. As such, you should use it only for parts of your site that don’t require as much reading and aren’t as important. Overall, you’d be smart to think twice before using reverse type.

This reverse type looks “cool” on HubSpot’s homepage, but it may not be the best for readability and comprehension, especially in the most important space on the entire site.

Mistake #4: Poor Line Height for Text

Line height for text is something that often gets overlooked. A lot of web designers and developers choose a font, pick a size, arbitrarily select a line height, and then call it a day.
But line height has a surprisingly significant impact on a site’s overall design and appeal. Choosing the wrong line height can leave fonts looking crowded. It can ruin your entire design.
The good news is that talented web designers have a good eye for this and will automatically select a good height for you. The bad news is that the average web developer doesn’t have an eye for this design and will often pick the wrong line height.
Chris Pearson of DIYThemes felt so strongly about this that he built a line height calculator configured to something known as the golden ratio. Here’s Google’s definition of the golden ratio:

A more simple definition is that the golden ratio is a proportion that’s believed to be aesthetically pleasing. Without boring you with more detail, Chris Pearson used this ratio to build a calculator that combines font size and content width to come up with the ideal line height. The good news is that the calculator makes this super easy to do. You simply plug in your font size and content width, and the calculator will tell you what your line height should be.

You may not have realized it, but there’s a reason some designs and font combinations are more pleasing than others. Great designers know how to achieve the golden ratio on their own, but Chris Pearson’s calculator makes it easy for everyone else to do the same.

Mistake #5: Line Length That’s Too Long

Another mistake you can make is creating lines of text that are too long.
So, what’s the optimum line length?
The Baymard Institute published an article that says 50 to 60 characters per line is best, with up to 75 characters being acceptable.
The reason line length is so important is because long lines of text are intimidating to read online. If the line length is too long, some people will not begin reading because it doesn’t look like a very good reading experience.
On the other hand, if line length is too short, readers have to start and stop lines frequently, which becomes annoying.
This problem is compounded by the popularity of responsive design. If you don’t set a maximum width for content section, you have no way of knowing how long the line length will be for your blog or any other piece of text since screen sizes vary so much.
At the time the referenced article was written, The Baymard Institute dealt with this problem by setting a maximum width for their text of 516 pixels which leaves an average of 65 characters per line at a font size of 18 px. This creates a great reading experience, as you can see in the image below.

Once again, this is a design detail that not all designers are going to pay attention to, but now that you know long lines of text are intimidating to read, you can direct your designer and developer to make sure you deliver an optimal experience for readers.

Mistake #6: No Accent Color for Calls to Action

The next web design sin is not using an accent color. Here’s what I mean:
Smart internet marketers know that you need a good accent color to draw attention to key calls to action. If you’re asking someone to “Buy Now” or “Start a Free Trial,” you want to make sure you use a button color that will draw people’s attention so they’ll click and take the action you want them to take.
This seems simple enough, but I’ve seen multiple occasions where designers didn’t reserve an accent color for the most important calls to action. Instead, they chose a color that’s already used on the site for something else. That’s not a good idea.
Here are some rules of thumb to follow for accent colors:

1. It needs to be bright enough to draw attention to whatever you’re attempting to draw attention to.
2. It needs to be complementary with the other colors on your website so that it doesn’t clash.
3. It needs to stand out from whatever background it’s on. This means that a blue button on a blue background probably isn’t a good idea.
4. It needs to be reserved for key calls to action so it doesn’t blend in by getting overused on the site.

In the example below, you’ll notice that the CTA button is bright orange. This helps it stand out from the white background. Also, orange is not used anywhere else in the design (except for a splash in the logo which is small enough that it doesn’t compete for attention). You can check out the full page here if you’d like.

Mistake #7: Common Design Principle Violations

The final deadly mistake is not following common design principles, which is something that Steve Krug talks about in his book Don’t Make Me Think.
The point he makes is that website visitors are used to being able to find certain features in certain places. For example, they’re used to finding logos and taglines in the top left of a page, and menus in the top right. They’re also used to being able to find an About page and a Contact page if they want to learn more about the organization or get in touch.
This means it’s a good idea to include those features on your site and that you should think twice before breaking common design principles. This may be something you think is obvious, but it’s not always.
Some website owners, for example, decide to be super creative and come up with a different way to display the menu. Instead of being at the top where it’s normally found, it’s included in the branches of a tree that’s built into the background design (or some other creative way to include a menu other than the standard way).
Sometimes these crazy new approaches work, but often they don’t. In most cases, it is much better to follow common design principles (so you don’t confuse visitors) than it is to come up with a crazy new layout that may be creative but not intuitive.

Conclusion

Hopefully, you’ve learned a lot by reading about these seven deadly web design sins. Most of them seem to be common sense, but they all get broken more frequently than you would think.
Remember, if you’re going to do any design changes at all, make sure you test your changes to see how they affect your bottom line!

Now that you’re aware of these principles, pay attention to the websites you come across and see how many follow these rules. I’m confident you’ll start to realize how important these rules are, which will reinforce why they are important to follow.
Over to you: Did I miss any deadly web design sins you frequently see committed online? Leave a comment to add to this list.

About the Author: Joe Putnam (@josephputnam) is a Growth Manager for iSpionage, a PPC competitive intelligence tool that makes it easier for smart advertisers (and agencies) to set up profitable campaigns faster.