7 Ways to Add Zest to Your Website Design

The power of a good visual isn’t just a scientifically well-documented phenomenon; it’s the whole reason design industry exists. Vision is our primary sense and what we see and how we interpret the seen things is a major factor in determining our actions.

According to the research conducted by the Stanford University, 46% of respondents make their mind about a website based in its design. If the user does not like the design, then the content on it will seem unworthy and untrustful. Today we’re going to give you seven ideas on how to improve the look of your website with real-life examples.

Illustrations

How do you make your website alive and personal? Use illustrations. They not only fill the white space but also evoke emotions, strengthen your message and create associations with your brand. Illustrations are also great because they’re made from scratch, which means your website gets a unique design feature.

Keep the style of the drawings consistent or make sure that the styles complement each other. Don’t overload your pages with illustrations.Even the most beautiful pictures will get rejected and cause confusion if they take too much space.

Take a look at how Basecamp used artwork to decorate their website or how Peugeot advertised a car using comic book style illustrations paired with parallax effect.

Typography

Typography is a huge part of brand identity. It has a major influence on how users will perceive and remember the text they see.

Every font has its own character, so make sure to choose one that conveys the mood of the text at the expense of a graphic image.

Every font belongs to one of four families:

Serif — easy to read, great if you need to place a large amount of text on the page.

Sans Serif — well suited for texts of small volume, headings, and narrow columns.

Decorative — mimic a historical style or decorative processing.

Script — imitate handwriting or calligraphy style. Both decorative and script are suitable for dialing a small amount of text, which requires a complex decoration.

Play around with fonts from different families to find your perfect pair. Don’t be afraid to experiment, just make sure they look and read well together.

Here are some great examples of font pairing: Epic Magazine, Crop the block.

Photography

Not for nothing they say they that a picture is worth a thousand words. Most people find it easier to memorize visuals rather than listen to or read a text. And according to a research, a single picture can substitute 84 words. Maybe that’s one of the reasons why designers love to use photography so much.

The right photo can take a good design, and make it great.

But what exactly is the right photo? First things first, avoid using stock photos, especially with people on them. Using stock images for the blog is OK but your website is a representation of your company. Instead, show your team at work, introduce your loyal customers. That way you gain users’ trust and show the real face of your business.

Second, take care of contrast. Chances are high that you’ll be putting things like text, buttons and other elements over a photo, so you want to make sure it all goes together. There’s nothing more irritating than a text that you can barely read because the background photo has the wrong kind of contrast.

Last but not least, the photo you’re putting on a page should be relevant to its content. If you’re building a website for your restaurant use photos of your actual building and food. And if you’re selling intangible then you’re selling emotions. Visuals should be symbolically linked to your product or service. Make sure that the symbolism is strong and easy to recognize.

Animations

Animation effect is an oldie but a goodie. Just like an illustration, it makes your design look more “alive”. Literally.

Back in the days, animations were done as GIFs and later — Flash. Both ways significantly affected the performance of the website. These days animation effects are created with CSS-coding and JavaScript, which are more light-weight and don’t lower page load speed.

Animation can be full screen or integrated into navigation. Its primary task is to help the user navigate through the site easily by drawing attention to important elements.

Here are some great examples of using animation in website design:

Want to see floating burgers as buttons? Go to HTMLBURGER.

Nerisson uses an animated background, color animated ghost buttons and zoom effect as you hover over every block with the project example.

Last but not least, Species-in-pieces is completely based on animation which turns the website into an interactive exhibition of extinct animals. This is truly an example of how design can carry a powerful message.

Videos

Just like animation, a good video footage can instantly grab visitor’s attention. It’s dynamic, narrative and causes a greater emotional response.

Videos can be used in many ways: to enhance the design, make user journey better and…

…to show a demo of your product/app just like Paper did.

…to tell a story of your business/ introduce your team, just like Selecto did.

…to entertain and amaze.

Yet again, avoid using meaningless stock videos. They don’t add value and may lower site’s performance.

If for some reason you can’ make a high-quality video consider using a cinemagraph — photo, one element of which makes a slight and infinitely repeated movement, and the rest of the image remains motionless.

Color scheme

Words are not the only way to speak to people. Colors have a great impact on our emotions and how we interpret things. When choosing a color palette for your website one should consider:

• target audience;
• corporate style and colors;
• contrasting typography;
• color harmony.

To choose a color solution for your website, determine your target audience and the message you want to deliver.

Bright colors

A bright color palette is a popular design trend that’s been around for the last couple years because it is a universal solution for websites with a wide target audience. However, it is quite tricky to work with.

Playing with bright colors some designers eyeball a color scheme, others use color palette generators like Adobe Color CC. They are a very helpful tool but don’t replace designer’s artistic taste. The effective palette that the generator offers may not be a successful solution when you see it on the screen.

Monochrome

A monochromatic palette is a combination of one basic color and its shadows, tones, and tints. This color solution is perfect for creating a flat or minimalistic design. It creates a harmonious, visually cohesive look and most importantly it helps to associate a brand with a specific color.

If you’re going for a monochrome look, pay special attention to the contrast. If it is not sharp enough, the elements of the site will merge with the background.

Retro

Once everyone seems to have forgotten about the retro color palette it makes a comeback again. Partially due to the popularity of photo filters in mobile phone apps such as Instagram.

Retro colors are those that are often less saturated and have a more flat feel, that’s why designers love it. However, giving your website a vintage look you have to complement the colors with corresponding fonts, shapes, textures, and images.

VR-effects

The development of virtual reality technologies is one of the most discussed topics of this year. Technologies do not yet allow full use of VR in web design, all existing attempts are at the prototype stage. But there are design techniques that can imitate virtual reality experience.

Parallax effect

Parallax effect is created by scrolling when the background and the object on it are scrolled at different speeds. This technique can be applied to an entire page or individual blocks in order to draw attention to a certain part of the content.

My personal favorites of parallax use are The Walking Dead and Space Needle.

Myriad and Firewatch Game demonstrate a more simple parallax effect.

360°- view

A 360 °-view is created from a multitude of photographs of an object taken at different angles. They are glued together in a way that allows the user to rotate it and view from all sides.

You can use the 360 °-view not only to demonstrate material things like shoes, furniture, etc. Check out a virtual 360 ° tour of Dubai or Open Continents, a cinematic exploration in global storytelling where you can rotate the Earth at 360 °.

These effects are great because they give your users control over the situation. They turn from passive observers to participants.

Conclusions

• Use illustrations to make your website unique.
• Pay special attention to typography. Each font has its own character, make sure that it fits your branding purposes and text you put on the website.
• Avoid using stock photos. It can disrupt brand trust and loyalty.
• Use animation to highlight the important.
• Implement video into your design if it has a clear purpose.
• Choose a color scheme that supports the brand ideology.

Whether you choose one of the above design solutions or create a one-of a-kind fusion, remember about common sense. Every technique you decide to use should have a clear purpose. There are no perfect solutions but there are those that fit your needs.