Choosing the right UI component for communication with your users

• Choosing, Right
choosing-the-right-ui-component-for-communication-with-your-users

Adam Shriki

In this article, I’ll explain how to choose the right UI component for the type of message you want to deliver to your users. For this purpose, I created a friction scale which rates UI components according to the level of friction they create for users.

Why do we need this?

Communicating with users is crucial.

Messages can be delivered in many ways and by different mediums. Different stakeholders in the company want to deliver different kinds of messages — product owners might want to let users know about new features, marketing managers want to upsell or advertise, and support agents want to help users complete certain tasks or flows.

Creating a structured scale for different types of messages will help us organize and prioritize our messages. This will help our users understand us better and hopefully, even love us.

So, how do we make the right choice?

(10) Highest friction

Push Notifications

When allowed, push notifications deliver high friction messages on mobile and web applications. They show up on top of everything else, usually accompanied by a sound, even if the user isn’t currently using the app.

Use push notifications to:

1. Deliver high priority call-to-action messages

2. Let users know of something valuable for them

How to use push notifications?

To be able to send push notifications to your users, you need to first ask for their permission. Ask users for permissions at the exact moment they might benefit from granting it. Use notifications wisely and cautiously so users will develop empathy towards your messages, rather than resentment.

Examples:

  • New in app message
  • New opportunity according to current location

(9) High friction

View

Some content is best experienced in a separated ,dedicated view, allowing users to focus on one individual object and its related actions at a time.

It is the highest friction inducing form of showing content inside the app, so its use should be justified.

Use View to:

1. Focus and engage users more deeply with specific content and its related actions.

2. Show complicated data that requires a lot of on-screen real estate.

How to use a full-screen view?

The purpose of a full-screen view is to bring users’ focus to a surface that appears in front of all other elements on the screen and goes away only when they perform a specific action.

Examples:

  • Object View
  • 404 screen
  • Login screen

(8) High friction

Dialog / Modal

Dialogs appear without warning, requiring users to stop whatever it is they’re currently doing. Use them sparingly, since not every choice or setting change justifies such an interruption.

Use dialog boxes to:

1. Keep users in a certain flow — allow users to perform a particular action without exiting the screen they’re currently on.

2. Capture users’ focus and remove secondary distractions.

3. Bring attention to a choice users need to make or

to specific information they need to know before moving forward.

How to use dialog boxes?

Dialog boxes don’t fill up the entire screen and users can perform an action to make them go away. They’re interactive notifications meant to inform users before performing an important action.

Examples:

  • Confirm a deletion
  • Making a BIG announcement
  • Critical error message

(7) High friction

Banner

Banners display important, succinct messages and provide optional actions for users.

They should be displayed at the top of the screen, below a top app bar. Since their location is consistent and they’re non-modal, they allow users to either ignore them or interact with them at any time.

Use banners to:

1. Inform users of site-wide issues.

2. Display warnings or errors that will directly impact users’ ability to

complete certain tasks.

How to use banners?

A banner persists over a session and appears without any action from the user’s side.

When scrolling, banners typically move with the content and scroll off the screen. Only one banner should be shown at one time.

Examples:

  • NPS survey
  • Trial ended message
  • License expired notification

(6) Medium friction

Growl

A Growl displays a promoted message without interrupting the ongoing use of the app.

In addition to text, it usually shows an image or an icon, as well as a CTA that contains a deep link or an external link.

It floats on top of all other elements at the bottom left or right corner of the screen and needs to be explicitly dismissed.

Use growls to:

1. Promote certain communications without disrupting users.

2. Show warnings or alerts that were triggered in the background, not by a process but by a state, and don’t have an immediate effect on users.

How to use growls?

Display growls at the bottom left or right corner of the screen. They can be triggered by background state and/or by a person from your marketing, support or product department who wants to promote an announcement.

Examples:

  • New feature announcement
  • Background warning update

(5) Medium friction

Snackbar / Toast

Snackbars inform users of a process that an app has performed or will perform. They appear temporarily, at the bottom part of the interface. They shouldn’t interrupt the user experience and don’t require any user input to disappear.

Use snackbars to:

Provide lightweight feedback about an operation.

How to use snackbars?

Snackbars automatically disappear after four to ten seconds, to allow users enough time to read the message, without blocking the information behind them for too long. Snackbars can optionally include a single action and can stay on-screen permanently, until swiped off.

Examples:

  • Message sent successfully
  • Document ready for download

(4) Low-Medium friction

Popover

Popovers contain helpful information like explanation of context. They appear next to the relevant element and may contain actions related to it.

They can be triggered independently or by a certain action.

Use popovers to:

1. Provide extra information that might be useful, combined with the question mark icon.

2. Provide direction for filling out a form.

3. Offer more actions related to a certain element in the interface.

How to use popovers?

A popover is displayed upon tapping or clicking a certain element on the screen. Usually a popover appears with an arrow pointing at the pressed button so it remains constantly visible to the user.

Examples:

  • Explanation about a new element
  • Information tooltip including an action

(3) Low friction

Callout

Callouts are text excerpts, used as a visual cue to draw attention to the text. They’re used to help direct users towards important pieces of information. They should appear on top of the element they refer to, without blocking any other part of the interface. They should be short, easy to scan, informative and clear.

Use a different color for callouts that contain error messages.

Use callouts to:

1. Warn users before asking them to take action. This is usually done in anticipation of a significant change.

2. Let users know something has gone wrong after they’ve tried to do something — as an error message.

3. Let users know they have successfully completed an action — as a success message.

4. Alert users about additional information without requiring an action — as an informative message.

How can it be used?

Callouts can contain an icon, a title and a message. There are four different types of callouts: success, warning, alert & informative. Deciding whether to use a callout or a different component depends on the level of information you want to deliver.

Examples:

  • Announcing new elements were added
  • Warning about a settings change that can harm your computer

(2) Low friction

Tooltip

A tooltip is a brief, informative message that appears when a user interacts with an element within a graphical user interface (GUI). Tooltips are usually triggered in one of two ways: through a mouse-hover gesture or through a keyboard-hover gesture. Tooltips are highly contextual and specific and don’t explain the bigger picture or the entire task flow.

Use tooltips to:

1. Provide information for unlabeled icons.

2. Provide descriptions or explanations for their paired element.

3. Don’t use tooltips for information that is vital to task completion.

How can it be used?

1. Provide brief and helpful content inside the tooltip.

2. Support both mouse and keyboard hover.

3. Use tooltip arrows when multiple elements are nearby.

4. Ensure it has moderate contrast against the background.

5. Position the tooltip so it doesn’t block related content.

6. Use tooltips consistently throughout your site.

Examples:

  • More info
  • User Onboarding guide
  • New small feature announcement

(1) Lowest friction

Email

Email messages are relayed through email servers, provided by all Internet Service Providers (ISP).

Emails are transmitted between two dedicated server folders: sender and recipient. A sender saves, sends or forwards an email message, whereas a recipient reads or downloads the email by accessing the email server.

Use emails to:

1. Activate user accounts

2. Deliver welcome or onboarding messages

3. Invite or share content with other users

4. Notify about activity

5. Send reports and dashboards

6. Reset password or perform two-factor authentication

7. Notify users regarding security issues or changes in their account

How can it be used?

While emails are low-friction, they should be fully customizable so each user can tailor them to their own interests.

Emails should always be personalized to match the current progress and state of the recipient within the product.

Emails can contain both marketing and product content, but the message should always be clear and focused.

We’ve seen many different types of messages used for different purposes. Choosing the right element depends both on the content and the context of the message.

Have fun in the world of non-disruptive messages!

Choosing the Right Font for your Design

• Choosing, Right
choosing-the-right-font-for-your-design

Dorjan Vulaj

Typography = Pretty Font. Right?

The main purpose of typography is making it easier to read what you’ve written. It makes it possible to quickly scan your text. When done well, it enhances the message it presents.

Typography can change the entire look and feel of a presentation, it can convey a certain mood or feeling.

On a website, choosing the right font design has this “magical” power of making your website look better, causing your visitors to feel more at ease, thus improving their experiences on your website.

These different typefaces are the main classifications used in 80% of today’s writing and content.

It’s better for a typeface to be clear and legible, rather than so unreadable that it’s distracting from the overall communication goals of the design.

If someone has to spend an extra 3 seconds to understand what has been written, then they will disregard your design.

Typefaces have personalities. A font you select should embody the character and spirit of your brand. Try to match the font style to your brand’s character.

You will need more than one font to make a design work, especially if you’re working on a webpage, but not more than 5 fonts. You have to make sure that the fonts you use are similar enough to complement each other, but different enough to show the distinction between them.

For your main paragraph font, the most formatting you’ll likely need is boldness, italics, and underlines. However, for various reasons you might want to use even more varied font formats, for things such as quotes. In this case, it’s best if you choose a font that has enough weights that can properly convey this information.

There are so many amazing creative designs out there that show how the right choice of font creates a masterpiece. See what fonts similar brands are using. Take a look at your competitors’ styles and collect your favorites.

Of course, getting inspiration from other designs does not mean that you will make your design very similar to it. You have to find ways to make your design stand out. Don’t be afraid to experiment and be bold with your choices.

There are no “wrong” or “right answers”

As you build your own skills in selecting typefaces, you’ll develop your own rules about choosing type.

Tips for Choosing a Typeface (with Infographic)

• Choosing, Typeface
tips-for-choosing-a-typeface-(with-infographic)

Choosing a typeface for any design project can be stressful. Some designers default to using the same handful of fonts they’re comfortable with for every project. Others spend hours trying to figure out the right typeface for the job without ever really feeling confident in their final choice. Not surprising considering there are more than half a million fonts in existence.

The right typeface can make a design, while the wrong one can definitely break it. Experimentation and practice are both important to mastering typeface selection. But there are a few things designers can keep in mind to make typeface selection easier and more focused.

Scope

The scope of the project or projects in which a font will be used is one of the first things designers should consider when choosing a typeface. A font that will only be used for a limited scope, such as a slide deck, will need to be less flexible than one that will be used across a brand’s entire visual presence.

Designers should think through whether the typeface will be used only for digital projects or also in print. They should also think about whether the fonts will be used for a limited time or indefinitely. It can be helpful to make a list of all the potential projects a typeface will be used for at the outset of choosing a new font.

Consider all applications when choosing a typeface
plan. uses one typeface across all of their branding materials, including their logo. (Design by Alan Grynberg)

Mood

Every project has a mood. Whether that mood is formal or informal, fun or serious, modern or classic, or something else entirely. And like every project, every typeface has a mood.

It’s important for designers to consider the mood of the project and how the typefaces they’re considering reinforce or clash with that mood. For example, using Comic Sans on a website for a law firm would clash. Something like Crimson Text or Helvetica would work much better.

Mood boards are a good way to evaluate typeface choices
Mood boards are a great way to evaluate how typeface choices fit within the overall mood of a design. (Design by Olivia Maya)

Functionality

Not every typeface looks good at every weight and size. Display fonts that look amazing in larger sizes can become illegible at smaller sizes. Typefaces that look great at small sizes in body text can sometimes look too plain or even boring when used at display sizes.

Some typefaces can look good at virtually any size, though. Designers should test fonts they’re considering at each size they may use those fonts to be sure they’re readable and don’t negatively impact UX.

How to choose the right typeface: Consider legibility at all sizes necessary
Roboto is one of many typefaces that can be used at both large and small sizes effectively.

Versatility

Fonts that are perfect for use on the web might not translate well to use in print, and vice versa. Fonts like Georgia that were designed specifically for readability on low-resolution screens aren’t as well-suited to print work as a font like Book Antiqua might be.

If a font will only be used for a single project, then it’s easy to determine whether print or screen functionality is most important. But for fonts that might be used over multiple projects, designers should make sure the font will work in every medium in which it may be used.

Typography styles: Choose a font that works in a variety of mediums
Drop Co’s font choice works across print and digital designs. (Design by Marka Network and Mustafa Akülker)

Message

The message of the project—whether it’s a slide deck or a brand’s visual identity—is vital to determining the best font to use. If the message is serious, the font should also be serious, and vice versa.

The wrong font can completely derail the message a brand is trying to send. For example, using something modern like Open Sans on a design for a historical society website doesn’t really reinforce the message. A font like Crimson Text would work much better.

Typeface combinations that reinforce a brand’s message
The fonts on the Olivia Palermo website perfectly reinforce the brand’s high-end, elegant message.

Readability

Readability is arguably the most important feature of a typeface. Since type is used to communicate a message, if that message can’t be read, the typeface has failed its job.

Readability and legibility aren’t exactly the same. Legibility refers to how easy it is to distinguish letterforms within a font. Readability takes that one step further and refers to how easily different words can be distinguished and read.

Readability and legibility can both be impacted dramatically by the size of the font being used. A font that looks great at 18 pixels might be illegible at 10 pixels. That’s not necessarily a deal-breaker unless the designer knows the font will need to be used at smaller sizes.

Typeface characteristics: Font size is important for readability
Font size has a significant impact on the readability of fonts.

Languages

Not every website or design project will be translated into multiple languages. But it’s a good idea to determine at the start of a project whether translation is likely. Not all typefaces support special characters (like those that are accented), let alone alphabets like Cyrillic and Greek.

In almost all projects, it’s important for the typeface being used to at least support extended Latin characters, like accents and umlauts. Not being able to spell words or names because accents aren’t supported can make a project look unprofessional at best.

Typeface elements: Language support can be important for some designs
Support for multiple languages may be important when choosing a typeface for some projects.

Style

There are four basic fonts styles: serif, sans serif, display, and script. Serif fonts are often viewed as more traditional and formal (though not all are). Sans serif typefaces can be seen as more modern and minimalist. Display fonts are unsuitable for use at small sizes, but their appearance varies widely. Script fonts resemble handwriting or calligraphy. Both script and display fonts are used primarily for short blocks of text or things like headlines and titles.

For readability, serif fonts were once viewed as more reader-friendly in print, while sans serif fonts as more reader-friendly on screen. But most modern typefaces in both styles can work well in either medium, especially with advances in screen resolutions.

Designers should consider whether they want to use display or script fonts for their headlines and titles, and decide whether serif or sans serif typefaces better suit their message and the project’s brand. Deciding this narrows down the font choices for a designer, which can make settling on a final selection easier.

Typeface choices: Combining serif and sans serif typefaces
Obachan uses both serif and sans serif fonts throughout their website.

Brand

Every brand has a mood and a message. It’s important that all visual elements—not just typefaces—match and support the impression the brand wants to give to the public.

Narrowing down typeface choices based on brand suitability can start with making a list of keywords that represent the brand. From there, designers can search for fonts that include those keywords or synonyms.

For example, if a brand is formal and traditional, a font like Garamond or Caslon would be a good fit. If a brand is modern and cutting edge, the designer might choose something like Roboto or Raleway.

Good typeface combinations can reinforce brand messaging and mood
Pureskin’s mix of an informal script font with a clean sans serif font reinforces their modern, feminine brand. (Design by Marka Network and Mustafa Akülker)

Licensing

While many fonts have general licenses that allow for use in virtually any situation, others do not. Some licenses only allow for use in one medium or another. Others allow for use in promotional materials but might now allow for use on a product being sold.

Another consideration is that if multiple designers are working on a single project, they might each need a licensed version of the font. Designers should be sure they understand the licensing of any fonts they’re considering using and what limitations those licenses might impose.

Combinations

Not all fonts play well with others. Some typefaces are neutral enough that they can be paired with hundreds of other fonts. But others have such unique character that suitable combinations are limited.

There are advantages to both. Limited combinations can make finding a suitable one faster, since designers might only have a dozen to choose from. But having wider options can offer up more flexibility on future projects. Choosing font combinations is both an art and a science and takes a fair amount of experimentation and practice for designers to master.

Typeface combinations: Serif and sans serif fonts work well together
Combining multiple sans serif and serif typefaces works well in this packaging design for Sophia’s Tea. (Design by Marka Network and Mustafa Akülker)

Large Font Families

Large font families, such as Roboto or Baskerville, that have multiple weights and styles can make it easier for designers to create complex typographic designs without the stress of figuring out which typefaces work well together. Some large font families even include both serif and sans serif versions, which offers even more flexibility to the designer.

On long-term projects like a brand’s visual identity, larger font families also offer more versatility. Being able to switch between multiple weights or styles based on the exact project needs offers designers more flexibility without having to deviate from the brand’s established identity.

Typeface elements: Large typeface families offer more versatility
Large typefaces families like Nimbus Sans offer a lot of versatility to designers, which is especially helpful on long-term or large-scale projects.

How To Choose the Right Typeface

Keeping these tips in mind for any design project can make choosing a typeface a much smoother process. Designers who want to refine their type selection skills can work on practice projects, such as choosing a new typeface for a well-known brand or a fictional project. Then, when faced with real-world projects, they’ll be more confident in their skills and choices.

A thorough grasp of what each project entails allows designers to better understand which typeface will best suit those needs. Once the scope of the project has been defined, the other considerations—such as mood, versatility, message, and brand—can guide designers toward the best font choices. Other considerations like readability, functionality, and language support can help designers further refine those choices to find the perfect font for their design work.

Typeface infographic

• • •

Further reading on the Toptal Design Blog:

Understanding the basics

What is the difference between a font and a typeface?

A font is a specific size, weight, and style of a typeface, such as Helvetica. This dates to when type was set by hand and typesetters stored each “font” separately. In practice, these terms are often used interchangeably, especially in digital design.

What is typography and why is it important?

Typography is the practice of arranging type in order to convey a message. It encompasses more than just selecting a font and extends to all of the visual properties of the text presented. Good typography reinforces the message being conveyed in a way that improves UX.

What fonts are most readable?

Well-designed serif and sans serif fonts are both usually highly readable on screen and in print. Some of the most readable fonts include Garamond, Georgia, Helvetica, and Lucida. But how fonts are laid out on the page (including line length and height) also has a high impact on the readability of text.

How important is legibility in a typeface?

For functional typography that aims to convey a message, the legibility of the typefaces being used is arguably the most important aspect. Type exists to convey a written message, and if that message isn’t legible or readable, then the typeface (or typographer) has failed.

What are the 7 typeface classifications?

7 is an arbitrary number, as there are multiple ways to classify typefaces, each resulting in a different number. Common typeface classifications include serif, sans serif, display, and script. Within those, there are sub-classifications like humanist sans serif, slab serif, transitional serif, and brush script.

Choosing a Good Color Scheme for Your Website

• Choosing, Color
choosing-a-good-color-scheme-for-your-website

color scheme

Colors are a huge part of life. They evoke our feelings, help us remember memories, and affect our mood. Learning how to use color for your website is an effective way to generate a specific response from your users and make your website more actionable.

Georgia O’Keeffe famously said, “I found I could say things with color and shapes that I couldn’t say any other way.” This is true for us all, and you don’t have to be a famous artist to hone the power of color. All you need is an understanding of branding and color psychology. Suddenly, a whole new world of color and design will be yours to explore.

Consumers and brands alike often underestimate the power of color. Well-versed marketers know just how powerful it can be, but it’s hard to put this influence into words unless you have a strong understanding of how color affects us as humans. In this guide, we’ll take a close look at the psychology behind our favorite colors, how brands have successfully used color in the past, and how you can choose a good color scheme for your own website.

The Psychology Behind Color

Does a blue sky make you feel relaxed and calm? Does bright yellow make your heart race a bit faster? If you’ve ever experienced any of these feelings, you’re not alone. Color is a tool for communication, and it’s been used since the dawn of civilization to express influence, action, and mood.

It was in 1666 when English scientist Sir Isaac Newton first discovered that when white light passes through a prism, it separates into all of the visible colors. These visible colors don’t communicate the same things to everyone. The way you feel about certain colors is a deeply personal thing that’s derived from your own experience or culture.

color scheme

However, there are some general “rules” of color that we can take from our own western history. Here are some of the most well-known associations with color that you’re probably familiar with:

  • Black: Evil
  • White: Purity
  • Red: Love
  • Blue: Calm
  • Green: Envy
  • Purple: Wealth

These might seem like a very basic level of color understanding, and that’s because they are. The deeper symbolism behind these colors takes root throughout our history and culture, and they’re not stagnant. Colors can change meaning in different situations and throughout time.

For example, do you know the story of why purple symbolizes wealth? In fact, Queen Elizabeth I forbade anyone except the royal family from wearing purple since it had such an elite status. Hundreds of years ago, purple dye was initially incredibly expensive. In the time of the Phoenicians, the dye could only be found in a small mollusk in the Mediterranean sea. Since it was so expensive to collect, it was only used by the wealthy elite.

There’s a story just like this one behind almost all of your favorite colors. The more you understand the history of colors, the better equipped you are to use these colors to your advantage.

How Do Companies Utilize Color Today?

As you’ve probably realized, we’ve come a long way from purple only symbolizing wealth. Colors have become complex entities, and now they’re a tool used by marketers and designers to create branding that resonates with audiences.

To understand how companies utilize color today, let’s look at some of the most well-known brands and the colors behind their logos and designs.

Red – When it comes to marketing, red is said to trigger stimulation and appetite. It’s also commonly used in clearance sales since it’s known to call your attention. Red has even shown to raise the human heart rate measurably when they see it. Red brands: Frito Lay, Nintendo, Netflix, ESPN, Coca-Cola, and Lego.

Blue – Blue in marketing is used to symbolize professionalism and strength. It’s a favorite color for a lot of people, so it’s often used to demonstrate trust. Blue brands: Facebook, Visa, Samsung, AT&T

Yellow – Yellow is all about optimism and happiness. It’s great at grabbing users’ attention, so it’s commonly used for fast food brands. Yellow brands: McDonald’s, Snapchat, Subway, IKEA.

Green – Green has recently been used to show eco-friendly brands, but it’s also used to convey growth with financial wellness. Green is related to health, relaxation, and productivity. Green brands: Starbucks, Excel, Holiday Inn, Heineken, and Land Rover.

Purple – Purple has come a long way, but it still does symbolize royalty as well as wisdom and success. This is why it’s usually used for luxury brands. Purple brands: Crown Royal, Qatar Airways, Hallmark, and Cadbury.

Black – Black as a color has also developed from its original “evil” symbolism. Today, it conveys professionalism and relates to intelligence and authority. Brands use black to maintain simplicity or to show a luxurious quality. Black brands: Amazon, Disney, Chanel, Nestle, Gucci, Hermes.

Multi-Color – Finally, sometimes brands use a few colors to show their diversity and to stand out from other brands. These are often used by internet-based companies or global brands that want to show connectedness. Multi-color Brands: Windows, Google, NBC, eBay, the Olympics.

How did you feel reading through these lists of brands? If you’re like most people, you likely understood the connection just by your current feelings about these brands. These brands have been crafted by expert marketers who use colors to tell their story.

Step-By-Step Guide to Choosing Your Website Color Scheme

With your website, you want it to tell the story of your brand, but you need to do that in a simplified way that doesn’t get in the way of the user experience. It takes users a startling 50 milliseconds to form an opinion about your website. That’s less than a second to make an impact.

Go through these steps below to make sure you’re choosing the right colors for your website.

Step 1: Choose Your Dominant color

First, you need to choose your dominant color. This is your brand color, and it’s how you’re going to create a design you love. Remember all of those words and emotions associated with the colors we listed below? Refer to your list and decide which color most closely relates to your brand.

This is the color your audience will remember most when they visit your website. If you’re trying to show that you’re eco-friendly or growth-driven, go with green. If you’re a calming, thoughtful brand, go with blue, and so on. If you already have a logo, make sure this color is complementary or the same.

Step 2: Consider Your Audience

Next, consider your audience and what colors they’ll prefer. Remember how we said our perception of color will depend on our history and culture? This is very relevant if you’re trying to address a specific group of people.

While all genders can like all colors, it’s true that some colors and shades speak to one gender more. The same goes for age. Keep your target audience in mind to make sure your colors speak to them. Here’s a simple guide to help:

  • Bright vs Soft – Men prefer bright colors while women prefer soft colors
  • Blue, Purple, and Green – These are the colors women prefer the most
  • Blue, Green, and Black – These are the colors men prefer the most
  • Bright colors – Brighter colors appear to younger users
  • Achromatic – These are colors that have no hue (like black and grey), and they’re preferred by older adults and men

Step 3: Where to Use Your Dominant Color

Now, it’s time to utilize your dominant color. You want this color to attract attention, but not too much attention. We’ve all visited websites that had too much color, and it can be confusing to know where to even look. Try to use your dominant color in a limited number of places, especially where you want users to take action.

The best places to use your dominant color are in the logo, menu tabs, calls to action, and when highlighting important information. They’re also useful for titles and buttons.

Step 4: Choosing and Using Your Accent Colors

Your website would be boring if you only had one color. If you want your website to appear professional, you need accent colors. This is the scary part since mixing colors can be complicated.

When in doubt, limit yourself to 1 or 2 accent colors. Too many colors can be overwhelming. Your accent color might be the same color but in a different shade, like choosing a maroon when you already have red as your dominant color. It might also be a neutral that complements your current color. You might even bring in an entirely new color that means something to your brand.

Where should you use your accent color? Use it in subtle places like in the current menu tab, subtitles, and to highlight secondary information.

Step 5: Tie It Together

Last but not least, it’s time to tie it all together. Now that you know what colors are right for your website, it’s time to create a stylish website that works for your business.

Start by building a website or finding a premium theme that matches your design aesthetic. From there, customize any elements to make sure the right colors are pulling through.

Consider any extras that incorporate your colors as well like graphics, images, and more. These are the things that tie the entire look together. To finish the process, take a look at your completed website. How does it make you feel? It can help to bring in some extra sets of eyes.

Final Thoughts

Creating a website is about more than throwing different colors on the page. In fact, color is one of the most complex parts of the design process. Not only does it take some understanding of colors to know which look good together, but you also need to know the meaning behind the colors you use.

You can experience this for yourself the next time you go shopping. Take a look at the different brands offered for a specific product. How do these brands make you feel? It’s this same effect you’re trying to achieve with your website.

The right colors come from your audience and the meanings behind these colors, not just what colors you prefer. If you put your audience first, you’ll create the best color scheme for your website in no time.

Choosing a marketing automation platform

• Choosing, Marketing
choosing-a-marketing-automation-platform

The proliferation of digital channels and devices can make it difficult for B2B marketers to accurately target prospects with the right messages, on the right devices, at the right times. Faced with these challenging market dynamics and increasing ROI pressure, B2B marketers at companies of all sizes can gain benefits from a marketing automation platform.

MarTech Today’s “B2B Marketing Automation Platforms: A Marketer’s Guide” examines the market for B2B marketing automation software platforms and the considerations involved in implementing this software in your business. This 48-page report is your source for the latest trends, opportunities and challenges facing the market for B2B marketing automation software tools as seen by industry leaders, vendors and their customers.

Also included in the report are profiles of the 14 leading marketing automation vendors, pricing information, capabilities comparisons and recommended steps for evaluating and purchasing.

If you are a marketer looking to adopt a marketing automation software platform, this report will help you through the decision-making process. Visit Digital Marketing Depot to download your copy.


About The Author

Digital Marketing Depot is a resource center for digital marketing strategies and tactics. We feature hosted white papers and E-Books, original research, and webcasts on digital marketing topics — from advertising to analytics, SEO and PPC campaign management tools to social media management software, e-commerce to e-mail marketing, and much more about internet marketing. Digital Marketing Depot is a division of Third Door Media, publisher of Search Engine Land and Marketing Land, and producer of the conference series Search Marketing Expo and MarTech. Visit us at http://digitalmarketingdepot.com.