-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy patharticle.html
86 lines (59 loc) · 7.51 KB
/
article.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:400,700,900" />
<link href="style.css" rel="stylesheet" type="text/css">
<title>Trending Ways to Use Color in Web Design</title>
<link rel="icon" href="car.png" type="image/gif" sizes="16x16">
</head>
<body>
<article>
<h1>Trending Ways to Use Color in Web Design!!!</h1>
<section class="intro">
<p><strong>Color is a staple design element</strong> we see everywhere in our lives such as on every website we visit or app we use. The thing is, each year we see a lot of <a href="https://designmodo.com/web-design-trends-2018/">design trend predictions</a> and they never fail to include color.</p>
<p>Over time, <a href="https://designmodo.com/color-scheme-generators/" data-wpel-link="internal">designers have used color</a> 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.</p>
<p>Let’s talk about some of those examples.</p>
</section>
<section>
<h2>Create a Strong Background</h2>
<p>A few years back there was a tremendous trend of <em>bold backgrounds</em>. I still see examples like that today. In a good design, a colorful and powerful background can be a good move to <strong>give interest to a specific section</strong>. Whatever your opinion on trends may be, we can agree that when done well, a good background color can help a section stand out.</p>
<p>Let’s start with <a href="https://rootstudio.co.uk/">Root Studio</a> 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. <strong>You don’t have to use a vibrant hue to make something stand out.</strong> This design wouldn’t work so well if the case study sections weren’t minimalistic either.</p>
<p>Next, is <a href="http://mambomambo.ca/">Mambo Mambo</a> 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.</p>
<p>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.</p>
</section>
<section>
<h2>Make a Statement</h2>
<p>Other times, color can be used to make a bold statement. Let’s start with the <a href="http://ubersignlanguage.com/">Uber sign language landing page</a>. 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.</p>
<p>Next, is <a href="https://kickpush.co/">Kickpush design studio portfolio</a>. 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.</p>
<p>This is also a good example of <em>branding</em> that we’ll talk about later.</p>
</section>
<section>
<h2>Tell a Better Story</h2>
<p>Color is a great asset in helping to tell a story. A good example of this is the home page of <a href="https://hellobloom.io/">Bloom</a>. 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.</p>
<p>I can say the exact same thing for <a href="https://landing.adobe.com/en/na/products/marketing-cloud/ctir-3108-running-on-experience/">Adobe’s Marketing Cloud landing page</a>. 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.</p>
<p>Because this is such a long page, color helps tells the story of each section.</p>
</section>
<section>
<h2>Create Bursts of Interest and Add Personality</h2>
<p>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.</p>
<p>For example, <a href="https://designmodo.com/qards/">Designmodo’s own Qards landing page</a> 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.</p>
</section>
<section>
<h2>Improve Branding for Your Product or Company</h2>
<p>I’ve saved my favorite use of color for last. I just adore when color is critically used in <em>branding</em>. I don’t only mean just one hue or color set like for Kickpush or Bloom.</p>
<p>Many of us have followed <a href="https://asana.com/">Asana’s redesign</a>, 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.</p>
<p>The same thing can be said for <a href="https://stripe.com/">Stripe</a>, 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 <em>branding</em> for Stripe.</p>
<p>The last example is the website for <a href="https://www.discovergoulburnvalley.com/locations/jaques-orchard">Goulburn Valley</a>. Their branding uses slightly unusual colors. Yet, the design is very good.</p>
<p>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.</p>
</section>
<section class="conclusion">
<h2>Conclusion</h2>
<p>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.</p>
<p>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.</p>
</section>
</article>
</body>
</html>