Category: Design

TOP 5 Web Design trends to follow in 2020

The web turned 30 in 2019 and over the last three decades it has changed our world like no other technology. It’s empowered us to build experiences we’d never have imagined.
We’ve explored the design trends that will not only help build a better web but will also help brands catch the attention of users in a busy and constantly-connected world.
01: Whitespaces
02: Minimalist and simplistic design
03: 3D digital artwork
04: Black and white web design
05: AI technology: Chatbots

Trends aren’t just about the latest frameworks or immersive 3D experiences that only privileged users can access. It’s about how trends fit in the overall picture, and how we can improve the experience for as many users—as diverse as they may be—as possible.

01: Whitespaces

Whitespace is the blank spaces between the lines or columns of text, the spaces around each visual element and the margins on the website. While most commonly white, whitespaces can also be made up of any other background colour as long as it offers unused open spaces between design elements.

This trend is sure to dominate as it helps create a spacious and well-balanced feel among users visiting such a website. Choosing to add sufficient whitespace comes down to more than a cosmetic decision. It is a clever business decision as by incorporating whitespaces, users will digest content without feeling overwhelmed and will likely stay longer on a particular website thereby increasing the conversion rate.

02: Minimalist and simplistic design

The minimalist design trend is about confidently and fearlessly exposing users to your brand with a less is more design approach. To balance aesthetics with functionality, minimalist web design is defined by fearless use of space, stunning visuals, striking typography and an overall focus on the content itself – and nothing else.

Such websites are easy to spot with its clean and minimal layout that centres on the idea that design is created to support content. Websites that have perfected the balancing act between aesthetics and functionality offer a UX that is engaging, insightful and memorable.

03: 3D Digital Artwork

Websites are moving away from the traditional flat design to a more immersive design experience where 3D digital artwork breathes life to brands and products.
One area of the web where 3D digital artwork will have the most impact is with brands that exclusively sell online. The 3D artwork rendering of products will help improve online sales as users get to experience the product in more detail. This design trend is expected to revolutionise the way users do their online shopping.

Essentially 3D artwork opens the doorway to reduce the barriers to online shopping as anxious online shoppers grow in confidence while experiencing and engaging with the product on more than one-dimensional plane. Of course, 3D digital artwork as a way of creating captivating UX is not limited to online stores but can be incorporated into any brand from Coco-Cola to General Electric.

04: Black and white Website Design

Having millions of colours to choose from makes a web designers job all that easier but if this trend has its way, web designers will be helping brands tell their story in a monochromatic way. 2020 is set to see web designers exploring the design challenge of creating beauty with the clever use of black and white.

By limiting the web design to these two colours, brands will stand out in a world where an explosion of colour is expected. Keeping to black and white, brands will be able to paint a picture where users are forced to use their imaginations to bring the brand to life.

05: AI Technology: Chatbots

Artificial Intelligence (AI) is making its way into web design by cleverly automating and humanising the way information is conveyed to users. Where chatbots lack emotional intelligence, they offer boundless opportunities for brands to offer sophisticated conversations with users by answering questions in real-time.

By taking the time to incorporate AI into the web design, brands can deliver around-the-clock support and assistance to website visitors.
While chatbots are only in its infant years, it is already regarded as the easiest way to reduce bounce rates, support users and improve conversion rates. As AI matures, we can expect to see a more humanised approach.

Learn More

23 Best color combinations to incorporate into your designs

Maybe you stumble on a website with an absurd mixture of yellow, pink, and black. Or, perhaps someone you know decides to wear green pants with an orange shirt. These instances force you to recognize the importance of combining certain colors — and not combining others.

Color combinations have the power to evoke certain emotions, and can even influence our perceptions. But creating beautiful design is more than just ensuring you’re not combining orange with green — it’s also about using the best colors to convey your brand’s message.

When you’re creating designs for your business, it’s critical you use the best color combinations, but it’s easier said than done. Here, we’ve curated a list of the 23 best color combinations, so you can skip the coworker debates about whether pink and orange work well together, and get straight to the design itself.

Good Color Combinations

  1. Coral Red (#F93943) and Viking (#7EB2DD)
  2. East Bay (#424874) and Moon Raker (#DCD6F7) and Ghost (#CACFD6)
  3. Viking (#7EB2DD) and Karry (#FFE8D4)
  4. Tan Hide (#F98866) and Vermilion (#FF420E) and Acapulco (#80BD9E)
  5. Botticelli (#C4DFE6) and Nepal (#90AFC5) and Ship Gray (#3E363F)
  6. Persian Green (#00A6A6) and Vista Blue (#98DBC6) and Mauvelous (#F18D9E) and Sunflower (#E6D72A)
  7. Marigold Yellow (#F6E278) and Ice Cold (#BCF4F5) and Vista Blue (#98DBC6)
  8. Spice (#6E352C) and Tuscany (#CF5230) and Jaffa (#F59A44) and Calico (#E3C598) and Yellow Metal (#6E612F)
  9. Alto (#D9D9D9) and Mandys Pink (#F5B3B4) and Chestnut Rose (#D15656) and Stiletto (#94353C)
  10. Swiss Coffee (#E1DCD9) and Schooner (#8F8681) and Pharlap (#A67F78) and Mine Shaft (#3E3C3C)
  11. Tulip Tree (#F2AB39) and Punga (#563C16)
  12. Swans Down (#D1EDE1) and Monte Carlo (#7BC5AE) and Observatory (#028C6A)
  13. Your Pink (#FFC2C3) and Bittersweet (#FE7773) and Alizarin Crimson (#EA3238)
  14. Pampas (#F1EBE9) and Your Pink (#FFC2C3) and Melanie (#E6CBDD)
  15. Mountain Meadow (#1B998B) and Magnolia (#F8F1FF)
  16. Terracotta (#E07A5F) and Gun Powder (#3D405B) and Moon Raker (#DECDF5) and Acapulco (#81B29A) and Manhattan (#F2CC8F)
  17. Bittersweet (#FE7773) and Cosmos (#FFD8D8) and Nile Blue (#194049) and Seagull (#87CEEB)
  18. Mischka (#DAD5DC) and Pigeon Post (#A7C4DE) and Mystic (#D7EAEA) and Downy (#76C1D1) and Aqua Island (#ACDBDF)
  19. Malibu (#4DD7FF) and Aero Blue (#AEFFF1) and Picton Blue (#32C3EE) and Boston Blue (#3B8FA1)
  20. Navajo White (#FFE0AC) and Vivid Tangerine (#FF8C8C)
  21. Dove Gray (#666666) and Aero Blue (#B5FFE9)
  22. Cedar (#3C1518) and Dark Tan (#69140E) and Fire (#A44200)
  23. Milano Red (#BA1200) and Black Pearl (#031927)
  1. Coral Red (#F93943) and Viking (#7EB2DD)

  2. East Bay (#424874) and Moon Raker (#DCD6F7) and Ghost (#CACFD6)


  3. Viking (#7EB2DD) and Karry (#FFE8D4)

  1. Tan Hide (#F98866) and Vermilion (#FF420E) and Acapulco (#80BD9E)

  2. Botticelli (#C4DFE6) and Nepal (#90AFC5) and Ship Gray (#3E363F)


  3. Persian Green (#00A6A6) and Vista Blue (#98DBC6) and Mauvelous (#F18D9E) and Sunflower (#E6D72A)

  1. Marigold Yellow (#F6E278) and Ice Cold (#BCF4F5) and Vista Blue (#98DBC6)

  2. Spice (#6E352C) and Tuscany (#CF5230) and Jaffa (#F59A44) and Calico (#E3C598) and Yellow Metal (#6E612F)

  3. Alto (#D9D9D9) and Mandys Pink (#F5B3B4) and Chestnut Rose (#D15656) and Stiletto (#94353C)

  1. Swiss Coffee (#E1DCD9) and Schooner (#8F8681) and Pharlap (#A67F78) and Mine Shaft (#3E3C3C)

  2. Tulip Tree (#F2AB39) and Punga (#563C16)

  3. Swans Down (#D1EDE1) and Monte Carlo (#7BC5AE) and Observatory (#028C6A)

  4. Your Pink (#FFC2C3) and Bittersweet (#FE7773) and Alizarin Crimson (#EA3238)

  5. Pampas (#F1EBE9) and Your Pink (#FFC2C3) and Melanie (#E6CBDD)

  6. Mountain Meadow (#1B998B) and Magnolia (#F8F1FF)

  7. Terracotta (#E07A5F) and Gun Powder (#3D405B) and Moon Raker (#DECDF5) and Acapulco (#81B29A) and Manhattan (#F2CC8F)

  8. Bittersweet (#FE7773) and Cosmos (#FFD8D8) and Nile Blue (#194049) and Seagull (#87CEEB)

  9. Mischka (#DAD5DC) and Pigeon Post (#A7C4DE) and Mystic (#D7EAEA) and Downy (#76C1D1) and Aqua Island (#ACDBDF)


  1. Malibu (#4DD7FF) and Aero Blue (#AEFFF1) and Picton Blue (#32C3EE) and Boston Blue (#3B8FA1)

  2. Navajo White (#FFE0AC) and Vivid Tangerine (#FF8C8C)

  3. Dove Gray (#666666) and Aero Blue (#B5FFE9)

  4. Cedar (#3C1518) and Dark Tan (#69140E) and Fire (#A44200)

  5. Milano Red (#BA1200) and Black Pearl (#031927)

 

Learn More

8 Website Design Guidelines for an Exceptional User Experience

When it comes to designing or re-designing a website, it can be easy to get hung up on the aesthetics. “That shade of blue just doesn’t look right …. Wouldn’t it be cool to have the logo on the right side of the screen? …. How about we put a giant animated GIF in the middle of the page?”

However, if you’re truly trying to accomplish something with your website (e.g., brand awareness, lead generation, etc.), you’ll need to focus on more than just how your website looks.

In a world where folks have more than a billion websites they can potentially land on, you need to make sure your website’s design is optimized for usability (how easy your website is to use) and user experience (how enjoyable interacting with your website is for actual users).

Now, you could spend years studying the ins and outs of usability and UX, but for the sake of giving you a jumping off point, we’ve put together the following list of helpful guidelines to apply to your next web design project.

1) Simplicity

While the look and feel of your website is important, most visitors aren’t coming to your site to evaluate how slick the design is. Instead, they’re coming to your site to complete some action, or to find some specific piece of information.

Adding unnecessary design elements (i.e., elements that serve no functional purpose) to your website will only make it harder for visitors to accomplish what they’re trying to accomplish.

From a usability and UX perspective, simplicity is your friend. And you can employ simplicity in a variety of different ways. Here are some examples:

  • Colours. Don’t use too many. It is recommended using a maximum of five (plus or minus two) different colours in your website’s design.
  • Typefaces. The typefaces you choose should be legible at the very least. And when it comes to colours, you shouldn’t use too many. A common recommendation is to use a maximum of three different typefaces in a maximum of three different sizes.
  • Graphics. Only use them if they’ll help a user complete a task or perform a specific function.

Strip away everything that doesn’t add value, then add some visual texture back in.

The great car designer Colin Chapman famously said, “Simplify, then add lightness.” This principle owes something to that mindset. Every element on a page must add value to the user or the business—and ideally, to both. Taken literally, the process of stripping away non-value-adding elements can produce a rather Spartan design. This is where adding some visual texture back into a page comes in. This approach means:

  • The page focuses on the key content.
  • The necessary visual texture and interest is present—supporting the aesthetic-usability effect—but not at the expense of the key page content.

Strip away everything that doesn’t add value, then add some visual texture back in.

The great car designer Colin Chapman famously said, “Simplify, then add lightness.” This principle owes something to that mindset. Every element on a page must add value to the user or the business—and ideally, to both. Taken literally, the process of stripping away non-value-adding elements can produce a rather Spartan design. This is where adding some visual texture back into a page comes in. This approach means:

  • The page focuses on the key content.
  • The necessary visual texture and interest is present—supporting the aesthetic-usability effect—but not at the expense of the key page content.

2) Visual Hierarchy

Closely tied to the principle of simplicity, visual hierarchy entails arranging and organising website elements so that visitors naturally gravitate toward the most important elements first.

Remember, when it comes to optimising for usability and UX, the goal is to lead visitors to complete a desired action, but in a way that feels natural and enjoyable. By adjusting the position, colour, or size of certain elements, you can structure your site in such a way that visitors will be drawn to those elements first.

3) Navigability

Having intuitive navigation on your site is crucial for ensuring visitors can find what they’re looking for. Ideally, a visitor should be able to arrive on your site and not have to think extensively about where they should click next — moving from point A to point B should be as pain-free as possible.

Here are a few tips for optimising your site’s navigation:

  • Keep the structure of your primary navigation simple (and near the top of your page).
  • Include navigation in the footer of your site.
  • Don’t offer too many navigation options on a page.
  • Don’t dig too deep. In most cases, it’s best to keep your navigation to no more than three levels deep.
  • Include links within your page copy, and make it clear where those links lead to.

Another pointer: Once you’ve settled on what your site’s main (top) navigation will be, keep it consistent. The labels and location of your navigation should remain the same on each and every page of your site.

4) Consistency

In addition to keeping your site’s navigation consistent, the overall look and feel of your site should be consistent across all of your site’s pages. Backgrounds, color schemes, typefaces, and even the tone of your writing are all areas where being consistent can have a positive impact on usability and UX.

That’s not to say, however, that every page on your site should have the same exact layout. Instead, you should create different layouts for specific types of pages (e.g., a layout for landing pages, a layout for informational pages, etc.), and by using those layouts consistently, you’ll make it easier for visitors to understand what type of information they’re likely to find on a given page.

5) Accessibility

Research shows that tablet internet consumption grew 30% between 2013 and 2018. Smartphone internet consumption, meanwhile, grew 78% during the same time period. The takeaway here: In order to provide a truly great user experience, your site needs to be compatible with the different devices (and operating systems, and browsers) that your visitors are using.

At a high-level, this means investing in a website structure that is highly flexible — like responsive design. With a responsive site, content is automatically resised and reshuffled to fit the dimensions of whichever device a visitor happens to be using.

At a lower level, improving accessibility can be as simple as adding alt-text to all of your images (so visitors who can’t see images in their browsers can still understand what’s on the page).

Ultimately, it’s more important that your website provides a great experience across different platforms as opposed to having to it look identical across those platforms. And that can mean adhering to platform-specific design conventions instead of trying to squeeze in unique elements that users of that platform might not be familiar with.

6) Conventionality

There are certain web design conventions which, over the years, internet users have become increasingly familiar with. Such conventions include:

  • Having the main navigation be at the top (or left side) of a page
  • Having a logo at the top left (or center) of a page
  • Having that logo be clickable so it always brings a visitor back to the homepage
  • Having links change colour/appearance when you hover over them

While it might be tempting to throw all such design conventions out the window for the sake of being completely original or unique, this would (likely) be a mistake.

In order to provide the best experience possible for your site’s visitors, take advantage of the fact that you already know what types of web experiences they’re familiar with. You can use this information to make your site easier for visitors to navigate.

7) Credibility

Ultimately, using web design conventions — design elements and strategies that visitors are already familiar with — can help give your site more credibility. And if you’re striving to build a site that provides the best user experience possible, credibility (a.k.a. the amount of trust your site conveys) can go a long way.

One of the best ways to improve your site’s credibility is to be clear and honest about the product/service you’re selling on the site. Don’t make visitors have to dig through dozens of pages to find out what it is you actually do. Instead, be up front about it, and dedicate some real estate to explaining the value behind what you do.

Another credibility tip: Have a pricing page. While it can be tempting to force people to contact you in order for them to learn more about pricing, having prices listed clearly on your site can definitely make your business seem more trustworthy and legitimate.

8) User-Centricity

At the end of the day, usability and user experience hinge on the preferences of the end users. (After all, if you’re not designing for them … who are you designing for?)

So while the principles detailed in this list are a great starting point, the real key to improving the design of your site is to conduct user testing, gather feedback, and make changes based on what you’ve learned.

68% of visitors fail to convert because they don’t think you care about their experience. So as a final bit of usability/UX wisdom, start caring more! Put yourself into the shoes of your site’s visitors and keep them in mind every step of the way.

Learn More

15 of the Best Calligraphy Fonts You Can Download for Free

The right font can instantly improve the look of your marketing presentation, impress your client, or escalate your design from average to exceptional.

But it’s often tough to find a font that falls somewhere in-between classy and dramatic — particularly when you’re not willing to pay for an experienced calligrapher.

We’ve compiled 15 of the best calligraphy fonts we found online. These fonts are subtle, professional, and eye-catching. Best of all, they’re free, so you can download and try them all before picking your favourite.

Most of these fonts are for personal use only, but some of them are available for commercial projects. Below each font, is specified whether it’s free for personal or commercial use — however, if you’re considering using the font for commercial purposes, please read the font’s individual licensing agreement.

1. Alex Brush

This font is classic and understated. It’s also legible and clear, with decent space in between each letter, so you can use the font even for dense paragraphs of text.

Download at: 1001 Free Fonts

Free for personal and commercial use.

2. Adreno Script Demo Regular

 

Adreno Script is more playful and fun than most of the other calligraphy fonts in the bunch, making it a good option when your design intent is more lighthearted.

Download at Urban Fonts

Free for personal use.

3. Balqis

If you’re designing an artsier project, like a book cover or presentation swag, this font is folksy and down-to-earth, and doesn’t appear too formal.

Download at: Free Design Resources

Free for personal and commercial use.

4. Bukhari Script

Bukhari Script is bold and fluctuates in shading, making it appear vintage and old-school. It’s a good font to use if you’re trying to invoke some nostalgia in your marketing.

Download at: Font Fabric

Free for personal and commercial use.

5. Champignon

This font is decorative and classically formal — you’d probably use this font for invitations, placeholders, or titles, rather than long paragraphs of text or a presentation.

Download at: Dafont

Free for personal and commercial use.

6. Easy November

The swoopy, exaggerated nature of Easy November makes it a great font for titles or branded items like calendars or stickers. Its eye-catching nature makes it appropriate for many different platforms.

Download at Font Space

Free for personal use.

7. Great Day

This font falls somewhere between retro and conservative, making it fitting for both professional presentations, or playful signs or titles. The spacing between each letter also makes it easier to read than some of the other calligraphy fonts.

Download at Font Space

Free for personal use.

8. Kristi

This is one of the more casual and spirited fonts in the mix, evoking memories of girls names in high school yearbooks, which could be ideal if you’re looking to add a personal or hand-written feel to your design.

Download at: Font Squirrel

Free for personal and commercial use.

9. Learning Curve Pro

If there was ever a font that mimicked a “Learn Cursive” activity book, this would be it. The simple, precise lines make it a good bet for any longform content you’re trying to spruce up, while remaining traditional.

Download at: Font Squirrel

Free for personal and commercial use.

10. Pinyon Script

This formal design echoes nineteenth century letter-writing styles, making it a tasteful option for formal posters, invitations, or namecards. This is a good font to use if your theme is more conservative.

Download at: 1001 Fonts

Free for personal and commercial use.

11. Ralph Lanok Future

Ralph Lanok Future is dramatic, and sleek. While it seems too theatrical for dense text, it’s a great option when you’re aiming to draw a viewer’s attention to a few words or phrases.

Download at Urban Fonts

Free for personal use.

12. Sacramento

 

 

This casual, funky font is a throwback to styles of the 1960s — perfect for large signs or advertisements aiming to create a vintage feel.

Download at: 1001 Fonts

Free for personal and commercial use.

13. Sophia

Undoubtedly one of the more feminine, charming fonts in the list, Sophia uses wide and thin strokes to appear beautifully hand-drawn. This font would work perfectly for any design calling for a soft, graceful feel.

Download at: Creative Booster

Free for personal and commercial use.

14. Special Valentine

 

 

Special Valentine is one of the few classic fonts where the uppercase and lowercase letters are similar sizing and aligned. This makes it useful for full paragraphs by ensuring easy readability, but it’s still elegant enough to also use for invitations or titles.

Download at Urban Fonts

Free for personal use.

15. Qaskin Black Personal Use

There’s something about this font that screams “outdoors-y” to me. I don’t know if it does the same for you, but regardless, Qaskin Black is an unusual calligraphy font, seeming more tough and rustic than the others.

Download at Font Space

 

Learn More

Great web design with the help of Gestalt Psychology

 

Have you ever asked a colleague for something and feared the words, “It’s on my desk”? Because standing there looking at the mess, you wonder how anyone can find anything. They would probably call it organised chaos.

All it really means is that they know where everything is and the rest of us don’t. This happens on websites as well and it is something that we want to avoid when designing a website. The question remains; “How do we create a perfectly ordered website”, a website that not only is pleasing to the eye, but that also conveys the message of the organisation it represents in a simply yet effective way? There are a lot of theories and methods that designers across the world use. One of these is the Gestalt Psychology. Gestalt Psychology helps us to create an esthetical and well-ordered website. So let’s jump in and make sense of the chaos we see.

Figure-ground

One of the first things we look at is that a person sees some objects as the focus point also known as the foreground/figure and other objects as the background/ground. Our job as designers is to make sure that the viewer sees and focuses on the object that is important. Keeping the background clean and complementary to give the figure it’s time in the spotlight. Generally, the darker colour will automatically be the figure until the viewer makes sense of what they see and then decide what the figure is. Look at the image below. In both cases the black is more prominent and therefore we perceive it as the foreground. However, we know that the white laptop on the black background should be the foreground, but we struggle to except it that way.

Figure 1: Figure-Ground

Similarity

Similarity refers to the idea that we place objects with similar characteristics together in groups. These characteristics can include colour, shape, font, texture etc. It could then be said that on a website similar objects would possibly be looked at as one group or thought idea subconsciously even if the subject matter does not correspond.

Figure 2:  Similarity

Proximity

Proximity is the belief that we place objects that are near to one another together. This is where the use of white space comes in handy. White space allows us to organise sections of a website, giving the viewer the time and space to look at something without them feeling rushed into the next piece of information. The other side of the coin is that we can also force the user to continue reading or jump from one object to the next. Allowing them to quickly go through the page to get to the part in the website that is the most important.

Closure

Our minds close object that are not necessarily together or complete to create a whole. Closure is something that people love to use in logo design. The best way to explain closure is by example:

Figure 3: Closure

As you can see in the example above. We can perceive that there are three circles and even a triangle in the middle though neither of these objects are in fact complete. Same with the panda on the right. We know it is a panda even if some of the lines are missing.

Continuity

Continuity refers to when your eye follows a line or a line-up of objects until your gaze is interrupted by space or another object.

Figure 5: Continuity

Order

This is the belief that alignment and symmetry is attractive and essential for clear design. Think of it this way, have you ever sat in someone’s living room and the painting hanging on the wall is skew? You can maybe avoid it if you don’t see it, but it bothers you every time the masterpiece catches your eye. Well go ahead and align that painting, then step back and look at it with wonderment. That sense of peace coming over you is what you should feel when you browse a website. Even if the site has an energetic look and feel, it should not be irritating.

 

The moment we ignore Gestalt Psychology principles, the design starts to feel imperfect and chaotic. You might look at such a website, not knowing what exactly is wrong but that something is off. Start applying Gestalt Psychology and you will see that the site becomes pleasing to look at and easier to browse.

Learn More