Tag Archives: article

Getting in Shape: Using Geometry in Web Design

web design tips

Raise your hands if you recognize any of these notations; 2d10, 20d6, 2d20, 3d6. If you do, then I salute you gamemaster, but if you don’t, here’s a crash course on the beautiful world of tabletop role-playing game. These notations, referred to as the AdX, refer to dice notations. A 2d10 for example would mean that the players are required to roll a 10-sided dice twice, most usually used to calculate damage.

The reason I brought this up is because when I was rummaging through my desk looking for my nail clipper, I’ve lost at least 3 nail clippers this year alone so this was a pretty big deal, I stumbled across a pair of 10-sided dice that I haven’t seen in years. My affection for 10-sided dice doesn’t just stem from the fact that I love RPGs in general but also because I love the shape of a decahedron. Obviously, a decahedron doesn’t translate well to web design, not until VR is widespread anyway, but other geometric shapes still has a place in web design.

Geometry in web design

To sum up, geometry is the visual study of shapes and patterns. Shapes and patterns occur in pretty much all walks of life, not the least in the field of design. Architecture, art and design are all mingled with geometry and even Mother Nature itself is filled with geometric shapes. A honeycomb for example is simply an array of beautiful hexagonal wax cells arranged in a cluster by honey bees as their nest.

The beauty of geometric shapes is that they can be used both aesthetically and functionally. They can be used simply to inject some visual pizzaz on your website or used as visual cues to guide reader’s attention on to certain elements. It’s this exact versatility that makes them so attractive to use in web design and other user interfaces in general. The thing that people need to keep in mind when it comes to geometry is that it’s not just about the shape itself.

Geometry also deals with how those shapes are related to each other and how those shapes relate to the space around and between them. If that description strikes you as familiar, it’s because that is what functional design mostly concerns itself with. The screen the webpage is being displayed on has limited space and deciding what to communicate and how to communicate them best is pretty much the question every web designer should ask themselves.

Geometric shapes in web design

Quite possibly the most simplest shape there is, dots or a circle when it’s bigger in scope, is the most common shape you’re probably going to see. Circles are most commonly seen as standalone icons, such as on your phone for example, due to their shapes, which is an indicator of fullness. Circles are also widely used when dealing with a gauge of some sorts or when you wanted to display some statistics using a chart, especially of the pie kind.

The second common shape we’re dealing with is rectangles. Rectangles as a shape are foundational because they are used as the basis for the grid layout that is widespread in a lot of websites. Check out the homepage of the tech blog The Verge for an example. Headline contents are arranged on a rectangular grid at the top with other most recent articles spread out on a list below them. This grid layout is also quite commonly seen on booking websites such as Airbnb and Booking.com.

The third shape we’re dealing with is a collection of shapes referred to as polygon, which is any 2-dimensional shape formed from a collection of straight lines. Yes, rectangles technically fall under this definition but we’re focusing on less common polygons such as triangles and hexagons. Because of their sharpness, triangles are commonly used as navigational cues, guiding viewer’s attention into an element on the webpage.

How geometry is used

If you’ve ever used an Android device in the past 3 years or so, you should be familiar with the words Material Design. For those unaware (read: an Apple devotee), Material Design is the design language Google has been using on their mobile interfaces since the release of Android 5.0, Lollipop in Android parlance. Geometric shapes, the grid-based layout and the use of shadows to create an illusion of depth are the hallmarks of Material Design, creating simple, consistent yet attractive user interface across all of their devices and services.

I’ve stated before that geometric shapes is notable for their versatility, which is why they’re perfect for Material Design. Whether stuck in on the upper-right corner of a desktop screen or sitting right there on your phone screen, geometric shapes are universally relatable and customizable to a degree than you can use them for any goal you could think of. Recently, Google has updated this design language with softer colors and gentle curves in place of hard angles but I won’t be surprised to see this style to be used for many years to come.

One other use of geometric shapes I’m particularly fond of is isometric projection. For those of you who grew up with video games back at the dawn of the 21st century, you should no doubt be aware of isometric video games. Back then, 3D graphics was still very rough so video game developers played around with 2D video games to give players the illusion of depth using isometric projection.

Think back to classic strategy games such as Command & Conquer: Red Alert 2 or the first game in the Age of Empires series. By displaying elements in such an angle, you can create illusory depth even though the images are still flat. For something contemporary, check out the game Monument Valley and its Escher-like aesthetic. The isometric viewpoint isn’t just a stylistic choice in that game; they also form the basis for optical illusions central to the game puzzles.

The simplicity and versatility of geometry

Good design is simple, yet understandable. In a way, designing using geometry is no different than the approach taken by companies like Muji and Uniqlo with their products, taking a simple, minimalist approach that is borderline industrial but still pleasing to the eyes. In good design, form and functions lives in harmony and using that standard, there is no way to describe geometric shapes as anything other than good design.

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.

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.