Samer Haddad

Trending Ways to Use Color in Web Design

Color is a staple design element we see everywhere in our lives such as on every website we visit or app we use. Right now you’re seeing the colors of SamerHaddad. No brainier. The thing is, each year we see a lot of design trend predictions and they never fail to include color.

Over time, designers have used color more boldly and more strategically. Sometimes it is used to give a specific element more attention, sometimes to tell a better story and sometimes to enhance the brand experience.

Let’s talk about some of those examples.

Create a Strong Background

A few years back there was a tremendous trend of bold backgrounds. I still see examples like that today. In a good design, a colorful and powerful background can be a good move to give interest to a specific section. Whatever your opinion on trends may be, we can agree that when done well, a good background color can help a section stand out.

Let’s start with Root Studio and how the design uses a yellow background to highlight its case study about the Chester Zoo. The yellow background helps set the tone for the case study. In addition to the minimalist design style, the background color is an important design element. Not all of their case studies use vibrant colors like the Chester Zoo yellow and that’s okay – you don’t have to use a vibrant hue to make something stand out. This design wouldn’t work so well if the case study sections weren’t minimalistic either.

Next, is Mambo Mambo which uses color to highlight different sections of the portfolio as well. Some sections are neon yellow, deep blue and even black. In the screenshot you can see that the neon yellow is paired with greens, blues black and skin tones; they work in harmony.

In this whole page, it’s the background colors that help make these sections unique and interesting. It’s also good branding for the agency.

Make a Statement

Other times, color can be used to make a bold statement. Let’s start with the Uber sign language landing page. The orange gradient background definitely catches your attention. This is a great design strategy since the purpose of the page is to teach people basic sign language which relies on visual cues.

Next, is Kickpush design studio portfolio. As you read the copy, notice they have a different kind of personality. Kickpush wants to show they are different and the chosen color scheme helps do this. It is purposeful and makes a quick visual statement.

This is also a good example of branding that we’ll talk about later.

Tell a Better Story

Color is a great asset in helping to tell a story. A good example of this is the home page of Bloom. They use the same almost-electric blue throughout the design. Along with other visual elements, the blue is used to help the user scroll from the header to the footer. If all the different sections had a different main color in this flow, the storytelling would be broken.

I can say the exact same thing for Adobe’s Marketing Cloud landing page. It’s a massive page with large sections. Each section has its own color scheme. Colors differ from light blue at the top to fire engine red to dark purple. It’s not just the solid UI color either; the photography goes with each color as well.

Because this is such a long page, color helps tells the story of each section.

Create Bursts of Interest and Add Personality

Sometimes color is used specifically to add a interest to a design. Large and bold colors don’t always have to be front and center in a design in order for color to be used effectively.

For example, Designmodo’s own Qards landing page uses all sorts of little color bursts. It makes the landing page more pleasant to look at and engage with without having the bright red background or anything else that might be considered over the top. As long as it’s strategic, using bursts of color can be a good tool.

Improve Branding for Your Product or Company

I’ve saved my favorite use of color for last. I just adore when color is critically used in branding. I don’t only mean just one hue or color set like for Kickpush or Bloom.

Many of us have followed Asana’s redesign, where they implemented various color gradients as part of their new identity. In some sections of the website, color is heavily used while in others not so much; it’s a balance. The colors are vibrant and different. The colors work well together, too. Now, Asana’s newest branding is vibrant and colorful. Asana is now bright pink, orange and purple. The color strategy seems to be a key in Asana’s brand positioning.

The same thing can be said for Stripe, which might be a big trendsetter in this kind of color use. They use gradients between neighboring colors like blue and green. The branding is mostly blue but the designs don’t shy from including green, pink, purple or orange. Color choices work together and make impactful branding for Stripe.

The last example is the website for Goulburn Valley. Their branding uses slightly unusual colors. Yet, the design is very good.

The landing page uses the same brand colors as in the screenshot throughout all of the photography. Green with hints of orange. It’s great to see that the colors weren’t just important for UI elements. The whole landing page flows well thanks to coordination of colors in the photographs.


We are seeing more strategic use of color on websites, whether it is to create better branding like Asana or make a bold statement with a bright red background to make sure people realize you’re different like Kickpush.

Above all, color helps bring about personality and, most notably, brand identity. The use of color in web design is only going to get better and stronger as designers grow even when web design trends change.

10 Website Fails Your Business Is Making

A website for your business is no longer a luxury — it’s a necessity. But, just because you invested in a website doesn’t mean that it’s effective in connecting with your customers and ultimately improving your sales. While there could be numerous reasons why your website isn’t effective, here are 10 of the most common explanations for website fails.

1. It’s not mobile friendly

This shouldn’t come as a surprise to most of us, but for the first time ever mobile and tablet usage surpassed desktop usage. As the mobile revolution continues to grow around the world, this trend toward “on the go digital,” will continue. In other words, internet consumption is moving away desktops and in to the portable devices territory. This means that your business’s website has to be optimized for mobile users.

Unfortunately, there are still lots of websites that aren’t mobile-friendly. This is just bad for business since it can lead to penalties from the Big G (Google), decrease conversation rates and deliver your customers a poor experience.

To make sure that your site is ready for mobile users, make sure that you use a responsive design, have large buttons and due your due-diligence on a/b testing, keep your layout simple and again, test it using tools like Google’s Search Console Mobile Friendly Test.

2. Contains too much jargon

I understand that you’re an expert in your field and that you want to demonstrate your knowledge and authority. But unless you’re talking to directly to your fellow industry experts, your average customer isn’t going to understand the technical language or industry jargon that you use to describe your business throughout your website.

Avoid the jargon and use simple and straight-forward language that your customers can easily understand.

3. Lacks content

Your customers have a problem. And they’re turning to your website to help them solve said-problem. That’s why your website needs to contain fresh and valuable content that answers real-life questions.

Remember, that doesn’t mean that they’re searching for your exact business. For example, our blog contains useful information for freelancers and small business owners. If a person is searching for advice on invoicing and processing payments, they could also land on our site because that’s the type of content we’ve been producing, as well.

In short, start a blog and keep writing awesome content. This will also help boost your SEO and content marketing efforts.

4. Hides essential information

Besides looking for information that will make their lives better, if customers are looking for your specific business, they want to easily locate information like:

  • The address of your business. If you have a brick and mortar business, include a map link.
  • Contact information, specifically a phone number and email address.
  • Social media plugins.
  • Hours, pricing and an “about us” page.

You’d be surprised at how many businesses still don’t have this information on their websites. And, if you’re like me, you may tend to stay from those types of businesses over security or legitimate concerns.

And, there’s really no excuse for forgetting this information. These additions are easy-to-integrate onto your site and usually free as well.

5. Loads too slowly

Customers expect a website to load quickly. In fact, 47 percent of consumers expect a website to load in just 2 seconds or less. And, that’s important to remember because an astounding 79 percent of shoppers who don’t enjoy their website experience less likely to ever return to that site again, nor buy from that site again.

You can test the speed of your site using tools like Pingdom and GTmetrix. These tools provide insights and advice on how to speed your site-up too.

6. Doesn’t have clear calls-to-action

You don’t want to leave your visitors in the dark by making them guess what you want them to do next on your site. So, give them clear instructions by creating a call to action button or hyperlinked text that is front and center.

HubSpot has 31 call-to-action examples that you should review if you need some inspiration. For instance, Dropbox has a blue “Sign up for free,” call-to-action button that stands out from the rest of the page.

Remember, without these buttons, your potential customers won’t move forward with the services or resources that you’re offering. When that happens, you won’t get those all-important business conversions.

7. It’s outdated

Webpages that are maintained and have a current design build trust and credibility. That doesn’t mean that you need to update your site every month. But, if it’s been years since you’ve had a major website design overhaul, then it’s time to find something more contemporary. The last thing that you want is to have a site that looks like a Geocities page from the late 90s.

8. It’s annoying and cluttered

Believe it or not, that are still businesses that insist on having websites that have music or videos play automatically once your enter the site. Even worse, these sites are also full of banner ads, bright colors and flashy text. These sites are just plain annoying and end-up slowing the page down because it’s so cluttered.

So, how many people are going to ever click on that site again at work — or anywhere else?

Keep in mind that a bulk of your visitors are browsing your site on mobile devices too. This means that you’re site should be clean and organized. Keep information to a minimum and use sub-headings, bullet lists and graphic elements so that visitors can digest this info in smaller chunks.

9. Shopping cart or payment platform is broken

Unless you’re relying on a third party payment gateway or shopping cart, then it’s your responsibility to frequently check to make sure that everything is working properly. You won’t be able to make a sale or receive a payment if your cart or payment processor is busted.

10. You don’t guide users to different pages

A lot of businesses send all their traffic to their website’s homepage, as opposed to relevant links that their customers actually want to land-on. This could be because service pages and other pages of the site are just an afterthought when designing a website. But, the fact of the matter is that the home page isn’t as important to general web traffic and the overall design.

Instead, start creating specific landing pages for the various types of potential customers you encounter and where they are in the sales funnel.