Tag Archives: branding

Shades of Grey: Monochromatic Color in Web Design

Web design tips

History is filled with companies, brands and other institutions that have been associated with a certain color. Italian car manufacturer for example is closely associated to the color rosso corsa, a unique shade of red that began as Italy’s racing color. By that same token, Coca-cola has also been forever associated with the color red and white and confectionery maker Cadbury has the exclusive rights for that shade of purple named, appropriately, as Cadbury purple.

Armed with the above knowledge, picking a color to use in your website should be done with careful consideration. Usability concerns and general attractiveness should obviously take priority but you should also take into account the use of color for branding purposes. Monochromatic design, the practice of using only variations of one color is one trend in web development and design that aims to satisfy all the above requirements.

A less colorful world

Choosing the right combination of colors is an incredibly arduous process. While technically there are only 3 or 4 primary colors in the world (red-green-blue or cyan-magenta-yellow-black), there can literally be millions of composite colors that can be derived by combining any of the primary colors. Finding the perfect combination from that embarrassment of riches can be difficult, which is why going the monochromatic route might be preferable.

Now, even though the term monochromatic infer that we’re solely going to use one shade of color in every facet of the website, for practical reasons the use of a single color palette is used by choosing one base color, typically one of the 12 colors featured in the standard color wheel along with the variations of that base color. These variations are obtained by darkening the base color with black, dulling that color with gray or by lightening that color with white.

The tricky part is when trying to use this approach if your website is going to feature a lot of photography. Obviously, limiting your images to only feature colors that you’ve picked for your website is going to be close to impossible but you could remedy this issue by simply adding a color overlay to the photo you’re using. This method is more effective when used on grayscale images however so you might have to tone down overly loud images first before applying the color overlay.

Colin Chapman, the founder of Lotus Cars that was a dominant force in Formula 1 back in the 60s and 70s designed his cars around one simple philosophy, simplify, then add lightness. You can find that same philosophy manifested today in brands such as Ikea and Muji and the whole concept of minimalism. Monochromatic web design builds around that same concept of simplification as well and streamlining the choice of colors to just one palette does a lot of wonders to your website development process, which will be outlined further.

Monochromatic design helps make some sense of a busy layout

When a particular section involves a lot of elements or when you’re presenting a lot of data such as when we’re talking about an infographic, monochromatic design can help keep things grounded. While it’s true that you want each data to be legible with the use of contrasting colors, too many clashing colors might overwhelm the viewers. Using two contrasting shades of a single or color or pairing them up with white and/or black could solve that problem without making your website look like a box of donuts.

To help illustrate a sense of progression in your website

Bear with me on this, but I’m going to use a pretty weird analogy to help explain this one. In the world of Pokémon, there’s this concept of evolution, where some creatures are capable of transforming into a better, bigger version of themselves. In most cases, the evolution is natural, like the Pokémon Bulbasaur having the bulb on its back blossoming into an actual flower when it evolves into Ivysaur and then into Venusaur. In certain cases however, like the carp Magikarp evolving into the dragon-like Gyarados, they make absolutely no sense. They don’t even have the same color, going from red to blue.

You see, if a certain section of your website has this element of progression, such as when outlining different premium pricing plans or when presenting the chronological history of an entity, you could use progressively darker or lighter shades of the same color to illustrate this progression. Monochromatic design isn’t just effective aesthetically; it can also be used functionally in clever visual cues such as this.

To create divisions between sections while still maintaining consistency

Still related to the point above, you can also use differing shades of the same color as an invisible wall to divide sections within your websites. Instead of using progressively darker shades as a sign of progression, you could also use the same technique as a visual cue for hierarchy to show both the division and relationship between sections. Think of this as color-coding done intelligently, using progressively darker or lighter shades as you move further down or up the hierarchy.

Additional thoughts

As an added note, it might be a good idea from time to time to not always stick to the rules in monochromatic design. For example, even though Facebook’s interface is mostly blue and white, they also selectively use green to highlight important action buttons.  You don’t always have to be rigid when it comes to monochromatic design, if there’s an opportunity where you can bend the rules a little bit, don’t hesitate to do so on your discretion.

Designing for Print vs. Digital Media: Feel the Difference Based on the Viewers’ Impression

Web design tips

Design projects may have different kinds of purposes. Whether it is a brochure design, web design, or even interior design, each has different purposes as to why it should be done. However, design has one thing in common when it comes to aim; clients’ satisfaction. Yes, every designer must have a design and practical thinking to a certain extent before diving into a project, because they should also think in clients’ perspective about how a design should be done. In this article, we are going to discuss about the difference between designing for print and designing for digital media. Keep reading to find out.

Viewers’ engagement

The interaction between your viewers and your design is expressed in a different way when it comes to screen and print. For digital mediums, you want to make sure your design is easily accessible, usable, navigable, intuitive and clear while entertaining at the same time. Also, many users arrive in a digital space with a particularly informative goal in mind. When you design for these users, your work should function to facilitate their goal in browsing so that they can get all the information they want to know without having to bounce from the space immediately after entry. In the digital world, there is actual data that can show how effective your design is. For this reason, there is often a statistical element at work alongside the creative design process.

However, in printed mediums, the environmental conditions of how a viewer will find your work can really depend on location and function. Sometimes it is unknown whether they will find your work or not, which can result in these questions; “Will they find my design?” or “Is it seen when they pass by?” or even “Will they even touch my design?”

Senses

Printed mediums give you the opportunity to engage viewers on a physical level. Aside from thinking about the imagination of what you design, you should also consider many of the physical aspects of the printing process. When it comes to printed designs, you should also consider the texture and weight of the paper, foam core or canvas print material. Embossed lettering and design is another way to evoke both visual complexity and the sense of touch.

As for digital designs, we may use our fingers to work on scrolling while viewing a digital design, but it doesn’t give you a sense of touch – it will only let you see visuals. That being said, you can use video and music so you can evoke emotions from your viewers both in audio and visual. Interactive elements can also work to simulate an immersive experience with your design.

That’s how you can feel the difference between printed designs and digital designs. Whether you need it or not, it all depends on your company’s needs. However, when you decide to choose one of them; at least try to make it when the time is right. For example, you are joining a relevant seasonal event to your business; you might want to design brochures to let people know what you are up to in this event. Try to make it more appealing with a choice of paper that can make it more unique and different even though it is just a brochure.

The Professional and the Personal: The Differences between B2B and B2C Web Design

web design for b2b and b2c

Until our A.I. overlords takes over the world, businesses are all about people. The disappearing milk bars, once a ubiquitous feature of the Australian suburbs, cater to people. Large multinational banks cater both retail customers and corporate clients. But you know what’s behind those large corporations? More people. B2B and B2C marketing aren’t diametrically opposed to each other like the Montagues and the Capulets, they’re more akin to first cousins once removed.

Understanding the subtle and the obvious differences between the two is a critical factor in marketing. While there are a lot of similarities between B2B and B2C marketing, the balance between the subjective and objective varies between B2C, B2B and companies that cater to both. In web design, now considered to be the frontline and most important part of marketing, these differences manifest themselves in a number of different ways.

The tone and aesthetics

The basic difference is of course, the look and feel of the website itself. B2B websites are usually sanitized, adopting a cooler color tones and minimalist design. B2C websites on the other hand is usually loaded with personality, especially those targeting a younger demographic.

For a direct example, take a look at the website for MSI, a Taiwanese company specializing in computer hardware for both retail and enterprise customers. The main page for retail products is heavily stylized, featuring personalized fonts and colorful banners with a black background and splashes of red. By contrast, the main page for enterprise products is heavily muted, adopting a clean and minimalist design with only the banner displaying multiple colors, which are nowhere near as eye-catching as the one from the retail page.

The call to action

If you’ve ever been in the middle of a tendering process or have worked in a procurement division, you know how laborious business purchases can be. Even for relatively small purchases, the process of bargaining with a vendor can take quite a while. B2B marketing is a slow and methodical process and as such, B2B marketing is usually independent of the sales department, compared to how B2C marketing practically doubles as the sales department.

In web design, this translates to the prominent of the call to action button in product pages. For example, take a look at this page for one of Juniper’s core routers and compare that to this page for Microsoft’s latest Surface Pro tablet-notebook hybrid. You can’t just go and buy Juniper’s routers but look at how the ‘Request a Quote’ button is placed compared to the prominence of the ‘Buy Now’ button in the page for the Surface Pro. In B2B marketing, closing the deal is usually not part of the job description.

Differentiating between choosers and users

In B2B marketing, there are moments in which the people charged in acquiring the goods aren’t the intended users. Proper division of labor is after all how large corporations work. An employee of the engineering division might be the one doing the research but the decision has to be signed off by the managers or the procurement division. As B2B marketers, understanding how to appeal to this divide is important as this is never an issue in B2C marketing.

The engineering team (the users) is purely objective, their primary goal is finding the best product they could find. The manager (the decision maker) have to look at the bigger picture and have to take into account a myriad of other factors, like cost-and-benefits or potential return of investment, product integration issues or technical support. Making sure that your product page is loaded with the relevant information could help in convincing your potential customers.

The subjective and objective appeal

In B2C marketing, appealing to the emotional core of your audience is usually the right approach. Individual customers aren’t looking for productivity; they want something that makes them feel good. That’s not to say that they lack objectivity but since doing a thorough objective evaluation of two competing products is close to impossible, they gravitate to brands that they like, brands that they feel understand them.

B2B customers on the other hand are looking for an objective valuation. They are looking for goods and/or services that could best meet their needs at a certain price range. Brand cachet is less of an importance in B2B marketing; I’ve attended enough tender bidding process to know firsthand that the value proposition is always number one.

In web design, this difference translates to what contents are displayed. Educational contents, statistics-laden contents and case studies of how your company has helped other businesses are a staple of B2B marketing. For B2C marketing, contents involving emotional storytelling are more preferable. This does not mean storytelling have no place in B2B marketing, framing a case study as a story, like the work of chipmaker Qualcomm with helping Saipan’s water problem, is one method we’re seeing more and more.

Closing thoughts

Whether it’s to a business or directly to a customer, people are the one doing the browsing, which means that the standard arguments apply. Website usability and functionality is still a key. For marketing, having a dedicated chat box for customers to drop a question or two could be particularly helpful, so long as you make sure that the response will be swift. If your business serve both B2B and B2C sector, it is advisable to have sections dedicated to both like the MSI example from above.