Articles

20 Best New Websites, November 2021

Welcome to this month’s round up of what has caught our eye on the web. As it’s November we’re going to help chase those winter blues away with some color.

Color does so much of the heavy lifting in visual design. It can create a mood, reinforce a brand identity, establish a hierarchy, differentiate sections, highlight type or reduce it; color even makes a statement by its absence.

Good use of color isn’t just about getting the most appropriate color scheme for the subject, it’s also about how much color to use, and where to use it. In this collection we’ve included a range of use examples from bright and full of color, to restrained with subtle tones. Enjoy!

Toboggang

There’s a pleasing UPA cartoon feel to the colors and type in this compact portfolio site.

On

On digital technology studio keep things simple with a black on light blue, and infinite scrolling.

re_

A pleasing mix of reds, greens, pinks, and golds liven up a simple grid layout for re_ package free grocery store.

LA Art Box

This site for LA Art Box makes great use of horizontal scrolling and animated transitions.

JYZ Design

Strong color and geometric shapes create a vibrant feel for JYZ Design’s company site.

Hyperframe

Hyperframe’s site takes on board the ‘show, don’t tell’ theory by cleverly using on scroll animation to demonstrate its product’s major selling point.

Rebecca Atwood

Rebecca Atwood’s site combines product shots with a color scheme that reflects the aesthetic of her designs.

Natural Paint Co.

For any paint company, displaying the available colors is a central function of their site. Natural Paint Co. do a really nice job of this with an interactive picker that changes the background color of the window.

Piaule Catskill

Beautiful photography and minimal text do a great job of selling the experience of Piaule Catskill cabins, and the horizontal scrolling on desktop adds extra focus. I found myself looking up flights to New York…

Rose Delights

There is a vintage, hand made quality to the mix of video and photographs on Rose’s home page, that creates a sense of warmth. The transparent mail list sign up is nicely non-invasive.

Voila

This site for Voila instant coffee creates a modern feel with fresh pastel colors balanced by a grounding dark blue.

Chiwawa

Wrestling masks, skeletons and lots of tone on tone color makes this a lively and appealing site for Chiwawa cantina.

HI(NY)

Keeping the rest of the design elements minimal here allows the movement of content areas not become cluttered and fussy feeling.

Think Tank Team

The divided square motif on the Think Tank Team homepage is a nice visual metaphor for building blocks coming together to create a whole.

Just Egg

Lots of yellow, and food close ups in the what part of Just Egg’s site is bold and confident. But the how section with its scrolling animation is the really good bit.

Moooi Paper Play

Although not a standalone site, this is a very pleasing animation centred around a particular product from Moooi.

Maersk Upside

Logistics giant Maersk have added a more user-friendly and visually engaging section to their corporate site, with use cases and real case studies.

Sol’ace

The color palette for Sol’ace furniture is has been carefully chosen to reflect the idea of luxury and natural materials.

Terra

A good mixture of standalone product shots and styled photographs works well here. The navigation options–shop by type, material or collection–have been well thought out too.

Thanxiety

And finally, for our readers in the US, Thanxiety is a carefully chosen collection of conversation topics to help avoid any uncomfortable silences, or family rows, around the dinner table at Thanksgiving. (And maybe the rest of us could use it on other holidays…)

Source

The post 20 Best New Websites, November 2021 first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

22 novembre 2021/par Service comm.

3 Essential Design Trends, November 2021

Actualités, Actualités

As the year begins to wind down, there are still plenty of new and evolving website design trends going strong. Much of what you’ll see this month carries over from things we’ve been seeing all year but with fresh touches.

From peek-a-boo designs with neat animated elements to vertical bars to brutalist blocks, there are a lot of highly usable trends to work with.

Here’s what’s trending in design this month.

Peek-a-Boo with Animation

Designers have been experimenting with cut-out and layering elements with animation for some time, which has evolved into full peek-a-boo styles with a lot of visual interest.

How each design comes together is a little different. Some have the animation in the back, others in the front, and some include text as part of the style. There’s almost no set of actual rules to how to make this design trend work.

Each of the examples below does it somewhat differently with varying degrees of success. The commonality here is that it is almost one of those visuals that you either see and love or hate.

Jatco Insurance is the most stunning example here, with a bold color choice and a peek-a-book element inside the oversized “J.” The overall effect is soothing and interesting and naturally draws the user across the screen from the top left to the background video layer. The small tagline, “Individual attention you deserve,” is perfectly placed.

Liron Moran Interiors takes a different approach with the peek-a-boo concept with the letters peeking out from behind an image. The animation is restricted to a hover and scroll effect that adds a liquid element to the image as well as changes to the image and color background. The challenge here is in readability. More of the words show on wider screens, but is it enough?

Melon Fashion also layers text and animated effects for a neat peek-a-book style that almost seems cut out from the background. The overall look appears to have three layers: background video, middle layer for the yellow color block, and text on top. The opacity of text elements with the peeking video is interesting and well pulled together without sacrificing too much readability.

Vertical Bars

Vertical color bars are a design element that keeps popping up in different ways. Designers can use it as a standalone element or container for content, such as navigation or other click actions.

Vertical elements are helpful because they can help create a more consistent and unified user experience from desktop to mobile screens. This shape can also be somewhat disruptive because you don’t see it featured that often. (Although with this style trending that might become less true over time.)

New Classrooms uses a vertical color bar on the left to help you move through the design. The color actually changes as each slide progresses on the homepage.

Serving uses multiple vertical bars as links to different content entry points. Clickability is emphasized with a change from a red overlay to a full-color image. The navigation is also tucked inside a white bar on the left side of the screen with a hamburger menu therein.

TechnoAlpin goes with a skinny vertical navigation menu on the right side of the screen. The icons with menu elements make navigation highly visual and intuitive. The color, which significantly contrasts with the rest of the design, also helps.

Brutalist Blocks

Not many people thought brutalism would stick around when it started trending. Elements of brutalism keep sneaking in, though, although they are much less stark and harsh than some of those original trending website designs.

This version of brutalism focuses on block elements that contain images or text and often click to other pages in the design. The blocks themselves are essentially the buttons that help you navigate to additional content.

The critical question about this design technique is whether this click action is intuitive enough. Will users interact without buttons?

The answer likely depends on your audience base, but if you opt for a style like this, it is essential to keep a close eye on analytics to ensure that users know and understand how to engage.

Milli Agency might be the most intuitive example of the brutalist blocks trend. The homepage is essentially a giant navigation menu. Each block changes from white to yellow on hover and expands, further encouraging clicks.

Sick Agency uses brutalist blocks with experimental typefaces and bold color for an in-your-face design. You can’t help but look at all the different things happening here. The biggest question might be, where should you focus and click next? The cursor provides some visual cues, but it’s not quite as intuitive as you might want it to be.

Mawo mixes brutalist blocks with a big blue cursor to help users click through the design to see more clothing options. Even the images here have a rather stark feel, which isn’t typical for e-commerce. Every block element above the scroll on the homepage includes a click action from the navigation blocks across the top to the “Shop Women” and “Shop Men” images. Further, the blue cursor dot helps show where users can click, and text buttons change to blue on hover as well.

Conclusion

Most of the examples here show trends as homepage elements, but you aren’t limited to that application. Try some of these techniques on landing pages or interior pages that you want to add a little something special to.

This can be an excellent way to test the design and see if your users like the style and know-how to interact with it. If it works, then you can extend the aesthetic to more of the design.

Source

The post 3 Essential Design Trends, November 2021 first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

1 novembre 2021/par Service comm.

Facebook Goes All Meta

Actualités, Actualités

It’s almost Halloween, so we were all expecting the odd scare, but little could have prepared us for the blood-chilling horror of Facebook CEO Mark Zuckerberg ‘acting’ amazed in front of a green-screened mockup of The Metaverse, during his keynote at the company’s Connect event.

Zuckerberg — or The Zuckster, as I imagine he introduces himself when arriving uninvited to your birthday drinks — was in the process of announcing that the company formally known as Facebook would from now on be known simply as Meta.

Facebook, the social network, will remain Facebook, but it will be one product among many. Or, as The Zuckster clearly hopes, one among all.

With the new name comes a new visual identity, one so bland that I need to go full-on Clockwork Orange just to critique it. Eyes pinned open, you’ll see an elongated infinity wave in an inoffensive tech-blue gradient and a generic geometric sans logotype. You could throw $5 at a sweat-shop style freelance site and receive a more ambitious, inspiring design than this. It is utterly bland.

If I try really, really hard to find something wrong, I might suggest the M feels a little too large, the single-story a is a little too open compared to the spacing elsewhere, and the wave is a little unbalanced and a little too small. But that is being super-picky because just as there’s little to get excited about, there’s little to be offended by either. It’s a logo fit to adorn a mid-range domestic router.

The Zuckster’s faith in himself as a positive brand ambassador means that he takes full credit for the new direction. The small team involved was reportedly required to sign extensive NDAs, and there’s no credit being given to any external agency.

Of course, it’s very easy to point out what Meta (née Facebook) gets wrong. What it doesn’t get wrong is making money. And this is a sensible business decision from a company that has watched Google extricate itself from algorithm-related ethics allegations with its Alphabet rebrand.

Leaked internal research suggests that Facebook is extremely concerned about its ability to maintain its position in the social media landscape. The app is in sharp decline. It’s no longer the most installed app, and even for those who still have an account, it’s used weekly rather than hourly. Most worrying of all, the average age of its userbase is steadily increasing.

Strategically, it’s a good design direction for Facebook. The most significant benefit is that absolutely none of the insidious, anti-democratic crimes that Facebook has been accused of can be associated with Meta; Meta is a blank slate.

In a press release that echoed The Zuckster’s keynote, Meta notes that it will begin trading under the stock ticker MVRS from December 1, staking a claim as the Metaverse business entity.

The Metaverse — and let’s be clear, this is not The Zuckster’s concept — is a so far ill-defined collection of ideas that will potentially coalesce over the next few years into some form of virtual reality web. It’s almost as if someone over at Facebook HQ said, “If only we could name ourselves ‘Inter,’ then we’d own the whole Internet!” And everyone cheered.

So yes, there is the sickening reality that we’re going to spend the rest of our careers trying to find a less tainted name for metadata. But that’s nothing to the amount of time we’ll devote explaining to future generations that Meta is not The Metaverse.

From now on, I’ll be referring to all Web 3.0 as the Geoverse and see if I can’t revive the fortunes of Geocities. Ah, now there’s a social network worth raising from the dead. Happy Halloween.

Source

The post Facebook Goes All Meta first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

29 octobre 2021/par Service comm.

8 Reasons Your Site Is Slow + How To Fix Them

Actualités, Actualités

1, 2, 3 – That’s exactly how long it takes you to start losing visitors if you have a slow-loading website.

Hold on! Surely, the only thing that matters to users is that your website works flawlessly and looks great… right? Wrong!

The fact of the matter is that we’ve all become accustomed to instant access to information and content. The average internet user today places a lot of value on speed, and the bar is continually being raised.

If you are like most people, you probably feel an immediate sense of dread at the thought of optimizing your website. Where do you start? How can you make the most impactful improvements? What makes your website slow in the first place?

Have no fear, as we’ll be answering all of your questions below as well as putting you on your way to a website that loads with blazing speed.

Why Should You Be Worried About A Slow-Loading Website?

Good question!

As many as 53% of visitors abandon a site that takes more than 3 seconds to load. Even worse, 1 in 3 shoppers will leave a website if it takes longer than 5 seconds to load.

So, performance plays a huge role in the user experience of your website and whether your visitors will stay on your website or be converted into customers.

For some time, Google has been keenly aware of this fact. As a search engine, Google knows that it’s counterproductive to recommend content to users if they won’t stick around to consume it.

That’s why they’ve continually been increasing the role performance plays when ranking websites for their SERPs (search engine results pages).

In recent years, Google has introduced core web vitals. These are metrics they hope will help quantify how performance affects the user experience. In general, they measure how fast, stable, and interactive a page is while loading. This will be more important than ever after Google announced its Page Experience update, which started its global rollout in June 2021.

As you may know, ranking highly for Google is vital for your website’s visibility. For one, 68% of online experiences begin with a search engine, of which Google has a 92.7% market share. Even if you manage to land on the coveted first page of Google, the first five results get over 70% of all clicks (28% to the first result alone).

So, to recap why a fast loading website is so desirable:

It directly affects your ability to keep, satisfy, and even convert visitors to your website.
It impacts your search engine rankings which impacts your “findability” and organic traffic.

8 Reasons Your Site Is Slow + How to Fix Them

O.K., so now that we’re all on the same page regarding the importance of your website performance, let’s look at common issues slowing down your website + how to fix them.

1. You’re Using A Sub-Par Hosting Service

As the party responsible for making your website available to the outside world, your hosting service can be a make-or-break factor. Not only should you pick a host that has a good track record when it comes to uptime a performance, but also one that’s suitable according to your needs.

Even if you take all the steps below to optimize your website’s performance, it may still load slowly if traffic to your website is overwhelming your available bandwidth or your host’s server capacity. If that happens, some users may experience extremely slow loading times, broken features, or even complete unavailability.

For most personal, blog, or local/small business sites, a respectable hosting provider like Bluehost or GoDaddy should be good enough. However, if you plan on running any type of large-scale, high-traffic webstore, business portal, or other type of website, you’ll want premium hosting, such as WPEngine (for WordPress), VPS hosting, or even a dedicated server.

2. You’re Not Optimizing Your Media Assets

As you probably know, media like images and videos take up significantly more space than most other types of content, such as text, code, stylesheets, or other static files. Even a single image has the potential of consisting of more data than dozens of website pages containing nothing but the underlying HTML and text.

In a Speed Essentials presentation, the Google team identified images as the largest contributor to page weight. In fact, they have the potential to consume a website’s entire performance budget if left unoptimized. Images can also directly impact all three of Google’s core web vitals – key metrics Google uses to measure the performance of a website.

However, the use of images and video is likely to continue growing, heightening the importance of finding a sustainable solution. According to HTTPArchive, images have increased by 19.3% on desktop and 42.7% on mobile.

For now and the foreseeable future, optimizing your images carries the greatest potential for improving performance.

The problem is that optimizing image assets requires multiple steps. Most importantly:

Using the appropriate next-gen formats which can differ depending on the user’s device, OS, or browser.
Appropriately compressing the size and quality of images to reduce payload without affecting visual quality too badly.
Using the optimal display size and density based on the accessing device to reduce payloads further.
Using lazy loading to only load images as needed.

As you can see, manually going through these steps for every single image on your website can be extremely labor-intensive. This is especially true if you consider that you somehow need to create the optimal variants for different users based on what device, OS, or browser they are using.

In-code strategies, like a JS plugin, responsive images, or CSS media queries tend to bloat your code and lead to other performance issues we’ll discuss below.

Luckily, there are plenty of CDN services available designed specifically for providing some degree of automated image optimization. These platforms analyze the context (i.e., a specific mobile device model, OS version, and browser version) of the user trying to load one of your images and try to serve them a version of the image that’s ideally optimized for them.

However, any media optimization platforms still require installing a small JavaScript plugin to dramatically improve the image and video optimization capabilities.

The one exception here is ImageEngine. ImageEngine uses WURFL device-detection to pick up every possible detail of the user’s device. The logic is built into their device-aware edge servers and doesn’t rely on you adding any additional code or markup to your website pages.

So, not only does it reduce your image payloads by up to 80% and serve them via a global CDN, but it doesn’t leave a footprint in your website’s code. As a bonus, it also happens to support the widest range of image/video formats, including animated GIFs, as well as client hints and save-data mode.

3. Render-Blocking JavaScript And CSS Is Delaying Page Loads

JavaScript is the de facto programming language for adding interactivity and advanced features to websites today. Likewise, CSS is the standard for adding styling. Both are critical components for almost any modern website.

However, nothing good comes free, and both may impact the performance of your website, particularly when used carelessly.

The following are some steps you can take to minimize the impact of these assets on your website performance:

Minify your JavaScript and CSS files.
Combine a large number of JS/CSS files into fewer files.
Replace some of your external JS and CSS files with inline JS/CSS. (Don’t overdo this! Inline JS and CSS is only suitable for small code snippets).
Defer loading JavaScript until after all your content is loaded and use media queries for CSS files.

Because media can have a more significant impact on your page weight, this leads some to believe that adding more JavaScript is the lesser of two evils.

However, depending on whether you already have render-blocking JS, Google might flag this as a completely new issue. Regardless, it will negatively impact your performance score in tools like PageSpeed Insights:

You can avoid it altogether by using an optimization engine like ImageEngine that doesn’t require any JavaScript.

4. You’re Not Using A Content Delivery Network (CDN)

A CDN is a network of servers spread across various regions all over the globe. What it basically does is store a copy of your website on each of these servers. When an internet user visits your site, the CDN automatically serves your website from the nearest server to that user.

What this does is allow your website to load faster, no matter where in the world people are visiting it from. If your website was only hosted on a single server, say somewhere in the U.S., then it could take much longer to load for a visitor located in Asia than one in the U.S.

While they all basically do the same thing, different CDNs are better at handling different types of content. Cloudflare, Fastly, and Akamai are just some of the most popular general-purpose CDNs around. Image CDNs like ImageEngine are purpose-built to not only serve image and video assets but to also optimize them using compression, formatting, etc.

So, the two main factors to consider are the type of content you want to deliver via the CDN and its global coverage. However, it’s usually possible to use multiple CDNs in tandem to cover different types of content and reach a wider area.

5. There’s Excessive Overhead In Your Database

If you have a website with any type of complexity, you probably have a corresponding database. In fact, all WordPress websites require a database to function.

Over the years, a lot of information moves in and out of the database. Sometimes, the data can get lost along the way or become obsolete. If you don’t regularly spring-clean your database, then this can really start to add up. Not only will it bloat the storage size of your database, but it will start to impact the speed of database queries and requests.

CMS users are especially prone to racking up these kinds of artifacts from plugins and themes that have been installed and removed over the years.

Unfortunately, there aren’t many easy fixes for this issue available. With most hosting providers, you’ll probably need to use phpMyAdmin to manually check and scrub your data. If you have a managed hosting solution, the host’s support team might be able to help you out. In the event that you have a locally installed database, there are some tools you can use, although they’re not 100% effective.

The best way to avoid any issues is to make database maintenance part of your routine and to learn the basics of how databases work.

6. You Have Too Many Plugins Or Themes Installed

For CMS users, plugins or themes offer near-limitless potential to spruce up the design and functionality of their website. However, each plugin or theme comes with additional code and content that add to the overall complexity and size of your website.

If you have a hand-coded website, the same goes for any additional applets or libraries you want to add to your site.

The best way to combat this is to be conscientious when adding any extras to your website. Only install what you really need or want, and make sure to uninstall and properly remove them if you don’t need them anymore.

As mentioned, they might leave various transients or artifacts behind, so you should keep an eye out for them throughout your website files (not just the database) whenever you do some spring cleaning.

7. You Aren’t Utilizing Caching

Caching is often one of the most effective yet ignored techniques for improving website performance. Caching stores your website content in fast-access memory in the user’s browser, allowing it to be loaded near-instantaneously by users. This can include everything from text to stylesheets to images to JavaScript files.

Without caching, a user will need to redownload everything when they navigate to or reload a page — whether or not anything has changed.

However, not properly configuring caching on your website can lead to issues, such as users only loading out-of-date content. Most high-quality caching tools have built-in features that automatically clear the cache when you make changes to a specific website page or content. So, users will only reload content once it has been modified.

Some hosts offer out-of-the-box caching tools with their hosting service. CMS can also usually find plugins for this, such as WPRocket for WordPress.

8. Ads Are Dragging You Down

In the end, ads are just another form of media that increases the overall weight of your website pages. While they are typically small and lightweight, multiple ad placements can really start to add up.

What aggravates the issue is that ads are loaded from external sources. This means they’ll take longer to render, generate more requests, and may mess with how stable your pages load — affecting your core web vitals.

Depending on how important ads are to your revenue stream, you’ll want to carefully consider how many ads you use on your site, where to position them, and when they load. If possible, avoid loading ads at the same time as the rest of your page, especially interstitials.

Conclusion

As you can see, website performance is a multi-faceted subject. Although some may be worse than others, you can’t just address one area and expect your website to suddenly be performant.

However, some general principles apply:

Keep HTTP requests low by limiting the number of files required for each of your website pages.
Maintain proper code hygiene and spring clean transients and leftover artifacts.
Invest in proper hosting infrastructure as well as a CDN for your website.
Optimize your media assets to significantly bring down payloads without sacrificing engagement.

The final point deserves another shoutout. As we’ve pointed out, finding an optimization solution for your media, particularly images, is probably the best thing you can do to improve your website performance. From purely a performance perspective, there is no service quite as effective as ImageEngine. It’s also the one that requires the least amount of technical expertise and ongoing maintenance.

Regardless, you’ll want to run some tests using tools like PageSpeed Insights so you can gather data on what issues your website is facing. From there, you can prioritize fixes to make your website more competitive.

[– This is a sponsored post on behalf of ImageEngine –]

Source

The post 8 Reasons Your Site Is Slow + How To Fix Them first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

28 octobre 2021/par Service comm.

20 Best New Sites, October 2021

Actualités, Actualités

We’re well on our way to Hallowe’en already, and it’s time for another collection of websites that have caught our eye.

It’s a mixed bag of candy this month, but nothing that should make you scream with fright. Enjoy!

Tether

This single-page site for forthcoming cycle safety system Tether uses a balanced combination of hero video and illustration to explain its features.

Wayfinder

Wayfinder is a game about our connection to nature that uses generative code, artificial intelligence, machine learning, and data mining to create a new experience each time it is played.

Beechhouse

Beechhouse has a clean, airy feel, with subtle scrolling animation. For a tattoo studio, the overall feel is refreshingly light, without a rose-filled skull to be seen.

edenspiekermann_

This is how you do a portfolio site with absolute confidence.

Forward Festival

Forward Festival is a series of creative conferences run by Forward Creatives design agency. This is an excellent example of a classic magazine site with enough individuality to pull the user in and keep them engaged.

Danmarks Motionsuge

Denmark’s Exercise Week focuses on a national campaign (in Denmark) to get Danish people to be more active. A fresh color scheme, offset grid, and strong photography all create a dynamic feel. And it is somehow reassuring to the rest of us that even the second happiest population in the world needs to exercise more.

Franco Maria Ricci

Because we have come to expect load times to be almost nothing, loading screens are not something too many sites bother with. However, this site for publisher Franco Maria Ricci is a pleasing exception.

Pierre Yovanovitch

Stylishly curated portfolio and catalog site for interior and furniture designer Pierre Yovanovitch.

Gir

Silicone spatulas are probably not the first subject most of us fantasize about designing a site for, but that’s what makes this site for Gir extra good. The ‘add to cart’ footer widget on individual product pages is done well, making sure a buy button is always present but without being over pushy.

Gastronomical

Bright, bold, and in your face, this site for Gastronomical pancake and waffle mix is about as far from Betty Crocker as it could get, bringing ‘cool’ to home baking.

FC XV

Marking 15 years of Dutch fashion brand Fabienne Chapot, this microsite makes a feature of the illustration style used by the brand for its prints.

Websmith Studio

This is a good, simple portfolio site with good use of color to highlight, and the background noise effect adds subtle interest. Good name too.

Van Gogh Museum

This is definitely one of the better museum websites around. The use of color creates warmth without detracting from the sense of space. The ability to search the collection visually is a welcome feature.

Chérie Healey

Life coach Chérie Healey’s site manages to stay on the right side of positive and uplifting without tipping over into hippy meme territory.

Kalso

To mark the launch of the new Earth Shoes website, this microsite traces the history of the original Kalso Earth shoes, starting with their inventor Anne Kalsø herself.

The Order of the Good Death

The Order of the Good Death is aimed at changing attitudes around a subject that most of us find extremely difficult, in a way that is informative and at the same time appealing. The tone of the content is as essential here as the visual style.

Air Company

The use of split-screen works well here for Air Company, to show now and future, along with some great photography and video.

Wild Fi

Wild Fi design agency’s site manages to be colorful but clean at the same time. Bold type and a balance between black on white and white on black make an impact.

Firefly

This site for Firefly digital design agency has some great little details, notably a glow around the cursor.

StudioBand

Dark neutral colors provide a calm, muted background for video and photography of work in StudioBand’s portfolio site redesign.

Source

The post 20 Best New Sites, October 2021 first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

25 octobre 2021/par Service comm.

The REST of the 10 Commandments

Actualités, Méthodes et organisation des process IT

One of the core things I’ve been working on for the past 10 years is APIs — everything from simple APIs that are used by one client to multi-device and multi-purpose APIs. During those years, I’ve also had the opportunity to work with many third-party APIs like Stripe, Twilio, and others who are less popular and glamorous. Almost all of those APIs were REST-based and unique in some way.

There are many reasons why REST is so popular. It’s simple to understand, it’s flexible, it works on any scale, it has a great community and tools built around it. But besides those, I’d also say that a lot of popularity came from the fact that’s its oldest rival, SOAP, is just horrible.

Source de l’article sur DZONE

8 octobre 2021/par Service comm.

7 UX Principles to Boost SERPs

Actualités, Actualités

User experience is one of the most important principles of web design. There’s no doubt that you focus on UX with every page you design on the web, whether it’s a portfolio, a profile page, or an entire website.

Unfortunately, what many experts forget is that UX doesn’t just apply to digital pages. That means that you need to discover the right UX strategies for everything from your website homepages to your email marketing messages and even your listings on Google.

Today, we’re going to explore ways you can apply UX principles to your client’s image on search engines.

Why Your Search Engine Listing Matters

Let’s start with the basics…

89% of customers start their purchasing process with a search engine.

That means that whether you’re creating a portfolio to sell your services or building a website for a client, the first connection a customer has with your design isn’t on the homepage.

Developers and designers know that first impressions count when it comes to succeeding online. However, they assume that those first impressions happen on a social media channel, a landing page, or a home page.

The truth is that most of the time, you’re driving a specific experience for an end-user before you even realize it. Before you can wow an audience with a beautiful site design or a fantastic CTA offer, you need to convince them to click on your Google link.

Just as UX on a website is all about giving your audience what they need in an informed and strategic manner, UX in search engine results works the same way.

How to Make Your Search Listing Stand Out with UX

So, how do you begin to apply the principles of UX to your Google Search results?

It’s much easier than you’d think.

Step 1: Show Immediate Value

Delivering an excellent experience on a website often means providing end-users with the information they need as quickly as possible. Imagine designing a landing page; you wouldn’t want your audience to scroll forever to find what they need. Instead, you’d make sure that the value of the page was immediately apparent.

When creating an image for your search engine listing, you’ll need to take the same approach. This often means thinking carefully about two things:

Your headline
Your meta description

Around 8 out of 10 users say that they’ll click a title if it’s compelling. That means that before you do anything else to improve your SEO strategy, you need to make sure that the title of your web page is going to grab the audience’s attention.

The best titles deliver instant value.

Immediately, these titles tell the audience exactly what they’re going to get when they click onto the page. The promise drives action, while clarity highlights the informed nature of the brand.

The great thing about using an excellent title for a page is that it doesn’t matter where you’re ranked on the search results. Whether you’re number 2 or number 5, your customers will click if they find something they want.

It’s just like using a CTA on a landing page. Make sure your titles are:

Informative: Show your audience value immediately
Optimized for mobile: Remember, your audience might not see your full title on some screens. That means that you need to make the initial words count.
Easy to read: Keep it short, simple, and straightforward. Speak the end-user’s language

Step 2: Build Trust with Your URLs

Trust factors are another essential part of good UX.

When designing a website for a new brand, you know that it’s your job to make visitors feel at ease. Even in today’s digital world, many customers won’t feel comfortable giving their money or details to a new company.

Within the website that you design, you can implement things like trust symbols, reviews, and testimonials to enhance brand credibility. In the search engines, it all starts with your URL.

Search-friendly URLs that highlight the nature of the page will put your audience’s mind at ease. When they click on a page about “What is SEO” in the SERPs, they want to see an URL that matches, not a bunch of numbers and symbols

Use search-friendly permalink structures to make your listing seem more authoritative. This will increase the chances of your customer clicking through to a page and make them more likely to share the link with friends.

Once you decide on a link structure, make sure that it stays consistent throughout the entire site. If a link doesn’t appear to match the rest of the URLs that your audience sees for your website, they may think they’re on the wrong page. That increases your bounce rate.

Step 3: Be Informative with Your Meta Description

To deliver excellent UX on a website, you ensure that your visitor can find all the answers to their most pressing questions as quickly as possible. This includes providing the right information on each page and using the correct navigational structure to support a visitor’s journey.

In the SERPs, you can deliver that same informative experience with a meta description. Although meta descriptions often get ignored, they can provide a lot of value and help you or your client make the right first impression.

To master your meta descriptions:

Use the full 160 characters: Make the most of your meta description by providing as much useful information as you can within that small space.
Include a CTA: Just as CTAs help guide customers through the pages on a website, they can assist with pulling in clicks on the SERPs. A call to action like “read about the” or “click here” makes sense when you’re boosting your search image.
Focus on value: Concentrate on providing your customers with an insight into what’s in it for them if they click on your listing.

Don’t forget that adding keywords to your meta description is often helpful too. Keywords will boost your chances of a higher ranking, but they’ll also show your audience that they’re looking at the right result.

Step 4: Draw the Eye with Rich Snippets

You’ve probably noticed that the search engine result pages have changed quite a bit in the last couple of years. As Google strives to make results more relevant and informative, we’ve seen the rise of things like rich snippets. Rich snippets are excellent for telling your audience where to look.

On a website, you would use design elements, like contrasting colors and animation, to pull your audience’s attention to a specific space. In search engines, rich snippets can drive the same outcomes. The difference is that instead of telling a visitor what to do next on a page, you’re telling them to click on your site, not a competitor’s.

When Google introduced rich snippets, it wanted to provide administrators with a way of showcasing their best content. Rich snippets are most commonly used today on product and contact pages because they can show off reviews.

Install a rich snippet plugin into your site if you’re a WordPress user or your client is. When you enter the content that you need into the website, use the drop-down menu in your Rich snippet tool to configure the snippet.

Ideally, you’ll want to aim for the full, rich snippet if you want to stand out at the top of the search results. Most featured snippets have both text and an image. You need to access both of these by writing great content and combining it with a relevant image.

Step 5: Provide Diversity (Take Up More of the Results)

As a website designer or developer, you’ll know that different people will often be drawn to different things. Some of your visitors might immediately see a set of bullet-points and use them to search for the answer to their question. Other visitors will want pictures or videos to guide them. So, how do you deliver that kind of diversity in the SERPS?

The easiest option is to aim to take up more of the search result pages. Google now delivers a bunch of different ways for customers to get the answers they crave. When you search for “How to use Google my Business” on Google, you’ll see links to blogs, as well as a list of YouTube Videos and the “People Also Ask” section.

Making sure that you or a client has different content rankings for the same keywords can significantly improve any customer’s experience on the search engines. Often, the process of spreading your image out across the SERPs is as simple as creating some different kinds of content.

To access the benefits of video, ask your client to create YouTube videos for some of their most commonly asked questions or most covered topics. If you’re helping with SEO marketing for your client, then make sure they have an FAQ page or a way of answering questions quickly and concisely on articles, so they’re more likely to appear in “People Also Ask”.

Step 6: Add Authority with Google My Business

Speaking of Google My Business, that’s another excellent tool for improving UX in the search results. It allows business owners to manage how information appears in the search results.

With this service, you can manage a company’s position on Google maps, the Knowledge Graph, and any online reviews. Establishing a company’s location is one of the most important things you can do to help audiences find a business quickly. Remember, half of the customers that do a local search on a smartphone end up visiting the store within the same day.

Start by setting up the Google Business listing for yourself or your client. All you need to do is hit the “Start Now” button and fill out every relevant field offered by Google. The more information you can add to Google My Business, the more your listing will stand out. Make sure you:

Choose a category for a business, like “Grocery store.”
Load up high-quality and high-resolution images
Ensure your information matches on every platform
Use a local number for contact
Encourage reviews to give your listing a five-star rating

Taking advantage of a Google My Business listing will ensure that your audience has all the information they need to make an informed decision about your company before they click through to the site. This means that you or your client gets more warm leads and fewer people stumbling onto your website that might not want to buy from you.

Step 7: Use Structured Data Markup to Answer Questions

If you’re already using rich snippets in your Google listings, you should also have a plan for structured schema markup. Schema markup on Google tells the search engines what your data means. This means that you can add extra information to your listings that will more accurately guide your customers to the support they need.

Providing additional schema markup information to your listings gives them an extra finishing touch to ensure that they stand out from the competition. For example, you might add something like a “product price” to a product page or information about the product’s availability.

Alternatively, you could provide the people who see a search result with other options. This could be an excellent option if you’re concerned that some of the people who might come across your listing might need slightly different information.

For instance, you can ask Google to list other pages along with your search results that customers can “jump to” if they need additional insights.

Baking structured data into your design process when you’re working on a website does many positive things. First, it makes the search engine’s job easier so that you can ensure that you or your client ranks higher. Additionally, it means that your web listings will be more thorough and valuable.

Since UX is all about giving your audience the best possible experience with a brand, that starts with making sure they get the information they need in the search results.

Constantly Improve and Experiment

Remember, as you begin to embed elements of UX into your search engine listings, it’s essential to be aware of relevant evolutions. Ultimately, the needs of any audience can change very rapidly. Paying attention to your customers and what kind of links they click on the most will provide you with lots of valuable data. You can use Google analytics to A/B test things like titles, pictures, featured snippets, and other things that may affect UX.

At the same time, it’s worth noting that the Google search algorithms are constantly changing too. Running split tests on different pages will give you an insight into what your customers want. However, you’ll need to keep an eye on the latest documentation about Google Search if you want to avoid falling behind the competition.

Like most aspects of exceptional UX, mastering your SERP position isn’t a “set it and forget it” strategy. Instead, you’ll need to work on constantly expanding your knowledge if you want to show clients that you can combine UX and SEO effectively.

Make sure you have plenty of tools set up to offer reports and insights into the kind of changes that you may need to make to align with search engine expectations.

Making the Most of UX in the SERPS

It’s easy to forget that there’s more to UX than making your buttons clickable on mobile devices or ensuring that scrolling feels smooth. For a designer or developer to deliver excellent UX for a brand, they need to consider every interaction that a company and customer has.

This means starting with the way a website appears when it’s listed on the search engines most of the time. Getting your SEO listing right doesn’t just boost your chances of a good ranking. This strategy also improves your reputation with your audience and delivers more meaningful moments in the buyer journey.

Don’t underestimate the power of UX in SERPs.

Featured image via Pexels.

Source

The post 7 UX Principles to Boost SERPs first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

7 octobre 2021/par Service comm.

3 Essential Design Trends, October 2021

Actualités, Actualités

Design trends on top of design trends. This theme of this month’s collection is trends that seem to build on each other. These examples use multiple trends listed here: hero typography, round buttons, and big branding.

Here’s what’s trending in design this month…

1. Hero Typography

Big, bold, and even unusual typography choices are the norm right now for hero headers in website design. The thread in this design trend is that type options seem to break all the rules – and it doesn’t matter.

These hero typography styles are often dramatically oversized, use unusual or nontraditional type styles, and break at least one common rule of typography. The trick is to do these things while creating a visual that still works.

For the most part, that means the typographic element is the dominant art, although not always. The examples below each take a different approach and can give you an idea if you love this website design trend or not.

Eighty uses oversized type elements with almost nothing else above the fold. The rule-breaking happens on the fourth line of text with a scrolling series of serif words. The two typefaces don’t seem to match and have a stark contrast. There’s also the sneaky registered trademark icon that’s spinning next to the brand name. (Another trend – big branding – that we dive into more below.)

Miranda Biondi uses super large text to grab attention – and a lot of it. The design also sneaks the contact and social media links in an unusual location, creating an odd text wrap that pushes the image. You can see the broken “rules” there. Overall, it is very attention-getting but a little difficult to read.

Humain’s homepage is rooted in a font choice that’s pretty unexpected. The all-caps serif is thin and complex. It’s not exceptionally easy to read, although it is beautiful. There’s a second level of hidden text that you can discover with hover and the brighter sphere.

2. Round Buttons

Buttons have been mostly rectangular for a while. Some have hints of rounded edges, but nothing as distinct as the circular buttons that are growing in popularity.

Round buttons are having a moment from major call to action click elements, to timeline navigation or secondary actions.

What’s nice about this trend is that simply the change from a rectangle to a circle is enough to make you look at the element because it is different from what you might expect. The challenge is ensuring that users understand the interactive quality of circles in these instances.

When using a nontraditional element such as this, it is important to include common cues so that users know what to do with round buttons. This might include tooltips, hover actions, shadows, or tiny animations that draw users to the designs.

Salesgroup uses small hover animations on the circular buttons. It further emphasizes it with a circlular button for the cookie notice that pops up on the screen.

Jan Jansen uses a big circular button, the only thing to click on the screen, and a hover state to imply functionality.

Earth Eclipsed uses a series of different circular click elements to facilitate understanding. Sometimes just the lack of another button style is enough to show that circles are for clicking.

3. Big Branding

After a long time of subtle, rather small corner branding for websites, big branding is in.

This design trend features logos – most commonly logotypes – that are almost uncomfortably large on the homepage. They can be in the traditional top-left location or almost anywhere on the screen.

The trick is to integrate branding with the rest of the design not to feel garish. This can be rather difficult to pull off and seems to be one of those things that people either love or hate when they see it.

Here’s how three different websites are doing it:

The 50th anniversary logo is a timed solution with big branding. It creates emphasis on the historical aspect of the train. Not only does the logo appear large on the homepage, but there’s also a loading animation as well.

Kunst Architects Associated uses a very large brand representation in the middle of the hero slider. The giant type element brings your eye into the design for sure and is re-emphasized by the company name in the left sidebar. The trick here is the balance between brand and other information in that valuable homepage space.

Hyer might use one of the biggest corner logotypes you’ll find. There’s no second-guessing what website you are on. The longer-term question is, does the big lettering imprint more on your memory so that you come back to the website later when you need the products or services offered? That’s a hard question to answer, but one that might be worth debate for design teams considering a visual outline such as this one.

Conclusion

There’s a risk when it comes to layering trends in a single design. If they don’t take off, the design can look dated fast, and there’s a lot of work to remove multiple trendy visuals from the project.

But when trends take off, they can work wonders. So it will be interesting to look back in a few months and see which of these trends is still making waves.

Source

The post 3 Essential Design Trends, October 2021 first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

4 octobre 2021/par Service comm.

How to Use Quizzes More Effectively in Interactive Content

Actualités, Actualités

Content is the king of the digital world. This is an undisputed fact among marketers and business owners alike.

However, not all content is created equal. Interactive content is a more immersive form of marketing specifically intended for the digital age. Great for companies that need to develop deeper relationships with their audience.

There are various kinds of interactive content for brands to explore these days. For example, you can create a poll where your customers vote for certain answers to questions. In addition, some companies hire developers to build immersive gaming experiences with prizes and rewards.

Even standard content like blogs and articles can become more interactive with things like animations, buttons, and elements that ask visitors to do something.

One of the most valuable forms of interactive content is the quiz. So, how can companies use quizzes to engage their audience effectively? Let’s find out…

The Benefits of Quizzes in Interactive Content

According to studies, 93% of marketers believe interactive content is extremely effective for educating and entertaining customers. Interactive content is meaningful because it’s engaging, and many marketers state that creating engaging content is one of their toughest challenges.

In an environment where the average attention span is constantly dwindling, interactive content reduces the risk that your customer will end up being distracted by something else before they have a chance to convert on your website.

Quizzes are an excellent form of interactive content, but many marketers don’t take full advantage of them yet. Quizzes, like some other forms of interactive content, can come in different styles. For example, you could have a personality quiz that tells your customer what kind of vegetable they would be. That might sound odd, but it helps to give your customer a sense of belonging, gives them a feeling of being understood, and offers entertainment.

Some quizzes can answer questions for your customer.

For instance, a quiz on “what to buy your dad for father’s day” is an excellent way to solve a customer’s problem while guiding them towards potential products that you sell.

Z Gallerie, a retail company, launched a quiz called “What is your Z Gallerie Style personality?” The quiz offers a personalized recommendation experience on what to purchase for every current and potential customer.

The personality quiz became a great way of bringing product recommendations to leads without being pushy. Z Gallerie could, therefore, consistently provide a unique experience to each customer based on their results.

So, how do you make a quiz that’s really effective for your content marketing plan?

Step 1: Creating the Quiz

Quizzes are a kind of interactive content that can almost feel like a conversation with a brand. They’re an opportunity for you to show your audience how well you understand them.

According to TryInteract, people take quizzes because they want to know themselves better or want to confirm what they think they already know about themselves. These content solutions solve problems, even if they’re handling a person’s curiosity about what kind of celebrity they’re most like.

Before you start making your quiz, you need to know your goal and what you’re trying to do for your audience. If your goal is to get more people to feel more attuned to your company, you might need to create something that demonstrates how well you know your visitors.

The goal for the company is to demonstrate a deep knowledge of the industry and target market. If the quiz is helpful and informative, it adds to the brand’s credibility and makes it more likely that customers will want to continue purchasing.

Before you build your quiz, ask yourself:

What do you want to get out of your audience taking this quiz? (More conversions, better brand loyalty, improved engagement?)
Why would your audience want to take the quiz? (Is it relevant to their interests, will it give them some vital information?)

Knowing exactly what you and your audience should accomplish with the quiz will give you a good platform to begin building on.

Step 2: Choose the Title and Quiz Type

Titles are important in any content marketing. 80% of readers decide whether to check out an article based on its title. The same process is common for people who want to decide whether they should take a quiz or not.

There are a lot of great ways to pique your visitor’s attention with a quiz title. For instance, you could challenge your audience to prove their knowledge with the word “actually.” For instance, “How much do you actually know about Kale?” That kind of title immediately appeals to the competitive nature of the human being.

Another great example of a challenging title is to tell your audience that they can’t do something. Buzzfeed did that with its millennial quiz. The great thing about this quiz title is that it speaks to the competitive nature of the reader but also gives that reader a chance to show that they belong to a specific community.

Another option could be to ask a question and hope that curiosity will do the rest of the work for you. For instance, “Which celebrity chef are you most like?” The key to success here is understanding your audience and knowing exactly what they most want to know.

Once you’ve figured out the title, choosing the kind of quiz you want to create is the next step. For instance, you can try:

Personality quizzes: People like hearing good things about themselves because of a psychological phenomenon called self-serving bias. A personality quiz that recognizes the features your customers like about themselves will make them feel happier and more connected to your brand.
The knowledge test: Commonly found on social media, these quizzes challenge a person’s knowledge on a specific subject. The benefit here is that your audience can learn something and share their knowledge with their friends for social points. This quiz from Unicef is an excellent example of the “knowledge” style quiz.

Step 3: Crafting Quiz Questions

Once you have a good idea of the kind of quiz you want to create and the title you’re going to put alongside it, you’ll need to begin bringing your interactive content to life. That means designing the right questions.

Writing questions for a quiz is just like creating any excellent content. First, you need to keep your target audience in mind. Next, think about the kind of personality you’re trying to appeal to. Breathing some life into your quiz by injecting your unique sense of personality into it will be an excellent way to strengthen your bond with your customers.

Other tips for making the most of your quiz questions include:

Use visuals in your questions: Having text-only questions is fine in some cases, but it’s worth looking into images too. Using pictures helps to keep things relevant and interesting and makes your quiz feel a lot more immersive.
Don’t make questions too long: In-depth and complicated questions will only scare your audience away. Remember that they’re looking for something fun and lighthearted to do. This means that your questions should be as short as possible.
Make it interesting: Don’t just ask basic questions like “what’s your favorite color” try to go beyond what your customers usually see on quizzes and make it relevant to the quiz topic. Again, this is your chance to show your audience how much you know.

Step 4: Creating Results That People Want to Share

If you want to design a quiz that really blows your audience away, then the results are one of the most important things to focus on. The results you offer your customers dictate whether they enjoy your quiz so much that they want to share it with other people. Creating share-worthy results is how you boost your chances of finding new customers and even going viral.

So, how do you design results that people want to share? Start by helping your customers to feel positive about themselves. The results should make them feel like a better person or confirm the good things they already believe about themselves. Research tells us that positive emotions are more likely to promote sharing.

For instance, this quiz from the PBS company makes people feel good by demonstrating that they know their books. This confirms a customer’s idea that they are well-read.

Using share-worthy images is another way to improve your chances of designing results that people want to share. You’ll need to use interesting pictures here that speak to your audience. Bright and entertaining pictures will make results more eye-catching on a social media feed.

Don’t forget to include a call-to-action on your results page too. It’s always helpful to give your audience a nudge in the direction you want them to move in. Providing a call-to-action that asks your customers to share their results increases your chances of positive sharing behavior.

Step 5: Know How to Distribute Your Quiz

Once you’ve put all of the essential components of your quiz together, the next step is ensuring you can distribute that quiz and share it with as many people as possible. For instance, you can promote your quiz on social media to reach more possible customers. Twitter and Facebook are always great places to get started but don’t be afraid to experiment elsewhere.

Sharing snippets of the quiz experience in an Instagram Story could be a great way to generate engagement or posting a picture on your Instagram feed.

When promoting your interactive content on social media, use an attractive image to highlight the experience and ensure you make that captivating headline stand out. Share both the caption and image with a shortened link to measure results. Shorter links are more likely to attract audience attention and encourage sharing later. If your links are too long, they can end up looking spammy or unprofessional. That’s not the image you want to build with your quiz content.

If you need an extra boost for your quiz, promoting through Facebook advertising could be the ideal solution. Paid ads are a great way to get extra attention, but you need to choose your target audience carefully. Select your audience according to demographics, behaviors, connections, and locations.

Remember that Facebook gives you plenty of opportunities to track down the kind of customers you want to speak to. Creating a custom audience could be a handy step too. This is always useful if you have a lot of information from an email list or a collection of contacts you’ve generated over time.

Step 6: Following Up on Your Quiz

Once you’ve successfully attracted people to your quiz experience, the next step is to follow up on the leads you’ve hopefully collected. When designing a quiz, it’s always a good idea to ask your customer for their email addresses before you give their results. This ensures that you can collect plenty of leads in the long term for nurturing purposes.

Marketing company, The Foundation, designed a quiz that asked customers whether they had an entrepreneurial mindset. The quiz was based on an existing eBook offered by the company. The quiz, combined with a Facebook ad campaign, helped the business collect new leads to advertise their ebook. The Foundation managed to reduce its cost per lead from $6 to $3.80 using this method.

When following up on your quiz experience, make sure that you get the tone right. The first thing you need to do is thank your audience for taking the quiz in the first place. After someone opts in and offers their email address, send a quick email that shares their results and says “thanks.”

After a couple of days, you can follow up on your thank you email by asking your audience to retake the quiz or take a new one. Encourage these repeat customers to share their testimonials and gradually introduce more interesting content you have that’s connected to your quiz. For instance, if you create a quiz to determine whether someone has an entrepreneurial mind, you could advertise articles that cover similar topics.

Finally, after regular engagement from your audience, you can begin to implement strategies that might convince your audience to purchase your products. This could mean showing off your entrepreneurial eBook, asking someone to sign up for a webinar, or something else entirely.

Don’t forget to track the performance of every quiz too. Examining metrics like click-through rates for your quiz advertisements and conversion rates will help you see which quizzes generate the most attention and action from your intended audience.

Time to Add Quizzes to Your Interactive Content Strategy?

A content marketing strategy is one of the best ways to engage with your audience and strengthen your position in any industry. The right content demonstrates your knowledge, develops trust, and helps you to attract new customers. With interactive content, you can take the relationship you build with your audience to the next level. It’s your chance to engage with your customers and create an emotional relationship.

Quizzes are one of the most effective forms of interactive content, and they’re also one of the easiest to implement into your existing strategy. It doesn’t take a lot of time or money to create a good quiz, and you can usually find tools online to help you with things like structure and formatting. You could even hire a professional to design a quiz for you.

Once you’ve got the kind of quiz that’s really going to interest your target audience, the next step is distributing it in a way that generates as much attention as possible. Remember, you can advertise on social media and various other channels. However, it’s also helpful to pay attention to your options for helping do your promotion for you. For example, many customers will be more than happy to share quiz results that confirm the identity they’re trying to build online.

Featured image via Unsplash.

Source

The post How to Use Quizzes More Effectively in Interactive Content first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

16 septembre 2021/par Service comm.

How Illustration Adds Emotion To UX

Actualités, Actualités

From 45,000-year-old cave paintings to 21st-century space rocket diagrams, illustrations have long played a significant role in human communication.

Pictures cross-language and literacy barriers, allowing people to understand and communicate complex moods and feelings that they cannot in words. When we were little, we could understand and appreciate E.H. Shepard’s illustrations of Winnie the Pooh and friends long before we could read A.A. Milne’s words.

The word ‘to illustrate’ has two main meanings: to create a picture of; and to demonstrate or provide an example of. In the context of the web, illustration is part decoration, part emotional signal, helping to create a particular impression to the user by painting a metaphorical picture.

Why Use Illustrations on a Website?

Illustrations provide a useful shorthand means to convey mood or tone, the voice of a brand.

You could argue that icons are illustrations because they are pictorial, but they are symbols. Icons may, and usually should, fit stylistically with illustrations, but they are not illustrations themselves. A symbol is a simplified representation of an object, idea, or action. For example, ‘search’ is usually represented by a magnifying glass shape.

Illustrations, on the other hand, are more complex. They transmit an underlying emotional quality that connects with the intended audience. Illustrations can create a narrative about the subject without the need to add more text. It gives even the most basic, functional website a sense of personality when used properly.

Popular Types of Illustration Online

Illustration styles are many and varied, ranging from simple outlines to detailed, full color, realistic images. And the amount of illustration used varies greatly across sites.

Different styles evoke different feelings and provoke different responses, so it is important to think carefully when choosing an illustration style. There are two major factors to consider: what the site is for and what sort of character do you want to give it.

It is possible to break things down into broad categories to see what works best in different areas. We’re going to look at how designers can use illustration to good effect across four categories…

Financial & Corporate

Financial services, fintech, enterprise software, and larger corporate sites tend to use illustration as a way to humanize themselves.

The style tends to be minimal, using simple shapes and sparingly. Acorns uses a simple oak leaf motif to go with its acorn logo. Other illustrations are tied in by keeping to shades of green.

This creates a feel typical of newer companies (Acorns was founded in 2014), especially those that are primarily web-based.

Longer established, more traditional organizations use illustration for the same purposes, although they may be restricted to certain areas only, where they want to emphasize approachability. Danske Bank, for example (founded in 1871), has illustration on its corporate site in the ‘About’ and ‘Sustainability’ sections.

Visa also limits illustration to a specific area, the section on Visa Direct. This has the effect of separating this particular (newer) service from the rest of what Visa offers.

Another increasingly popular approach in this category is abstract graphics. This is particularly useful when it is difficult to show what is being promoted. For example, Instabase adds arrangements of geometric shapes for visual interest, using the same color palette as the site icons.

One of the key points with illustration in these types of sites is getting the balance right between friendly, human and approachable on the one hand and serious, trustworthy, and secure on the other. Get too cutesy, and potential customers won’t take you seriously. Github’s enterprise page does have some illustration, but the color is less vivid, and Octocat is only alluded to, unlike the home page which is illustration-rich.

Food & Drink

Things get a little freer when it comes to food and drink. Styles vary much more, and the personality conveyed can be stronger and more individual. Some still go for a light peppering of illustration, with aspects such as color and type made stronger, while in other cases, the illustration becomes much more prominent.

Palais Kitchen and Caleño both do the former, with brand-appropriate line drawings.

My Drink’s vintage-style animated illustrations take the place of photographs to balance the text on its home page.

Melopeion Honey doesn’t use very many illustrations, but what it does use is large.

Monkey47 could be described as a concept website, and the illustrations play a key role. (The social media menu is really rather charming.)

Hospitality & Leisure

In this category, what users really want to see is photographs, but illustration can help too. A photograph can only show what something looks like, while illustration can add the extra emotional dimension connected to an experience.

At the minimal end of the scale, Protos Car Rental uses some nice, simple illustrations to emphasize the holiday aspect of its business.

Comptoir Libanais blends photographs with illustration to create a very distinct identity.

Hotel Frida is also about character, and the victorian-style fantastical animal illustrations help create a quirkiness.

Highcourt uses simplified and stylized layout illustrations to give a complete overview of the building’s interior than photographs could.

The Neverlands doesn’t just use illustration; the whole site is an immersive experience based on illustration.

The Responsible Web

Sites promoting ethical and or sustainable companies, natural skincare, natural and/or organic food and drink, vegan products, social responsibility, and so forth tend to rely heavily on illustration, particularly if they are reasonably new.

Quite often, this is in the form of plant drawings that make a lazy allusion to nature, but it can also involve conveying information in a way that doesn’t come across as lecturing.

Wild Souls steers clear of any hint of hippiness, with a sense of randomness to its illustration placement.

Superfood Gin does the plant thing, but it is in reference to the botanical ingredients here, so it is very relevant.

Capsul’in’s main company page is a fairly standard offering, but for its Zero Impact product, it has a separate section with illustrations to help explain the product’s features.

Donate Responsibly uses illustration to explain how well-meant action can be inadvertently damaging without appearing to scold or patronize.

A variety of children’s brands will use illustration — even when it is parents or guardians who are really the target — and Little Yawn Collective combines the child-friendly, and natural product approaches with its sleepy animal illustrations.

Using Illustration on The Web

Illustration can be a powerful tool in a designer’s arsenal, but it can be difficult to get right because it invokes emotion, and emotion is subjective.

Just like type or color, it needs to be used appropriately and with care. Sometimes less is more, and sometimes getting the placement absolutely right can make the difference between a successful design and a flop.

This is just a selection of the wide range of illustration styles and usages out there on the web, but we hope it will give you a starting point when you are considering whether and how to use illustrations in your next project.

Source

The post How Illustration Adds Emotion To UX first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

1 septembre 2021/par Service comm.