Articles

Google Fonts may be the single most significant contribution Google has made to the evolution of the web — yes, more significant than search, advertising, or analytics.

Google Fonts gives every business access to a visual voice with which to distinguish itself. Fonts can be downloaded for use in design software and then embedded using best practices for a consistent experience on the web.

If there’s anything wrong with Google Fonts, it’s that its default listings are based on “Trending,” a self-fulfilling criterion that keeps Noto Sans high up the list, destined to be over-used.

But if you spend a little time lower down the listings, you’ll find some exceptional typefaces that are hardly used. Yes, some of them are highly stylized, but there are also usable sans, serifs, and display fonts worthy of your consideration.

All you have to do is scroll; here’s a selection of some of the treasures you’ll find if you do…

Piazzolla

Piazzolla features dramatic and expressive angular shapes when previewed in large sizes, but its real strength is in setting large amounts of body text.

Mulish

If you’re looking for a solid workhorse sans, look no further than Mulish. Halfway between a humanist and geometric sans, there’s even a variable font version.

Ceviche One

Reminiscent of the cool lettering of 60s advertising, Ceviche One is packed with energy, thanks to the dramatic zig-zag formed along its baseline.

Vollkorn

Released by Friedrich Althausen in 2005, Vollkorn is an excellent typeface for body copy, excelling at small sizes. It now boasts a variable font option.

Merienda

Merienda is a delightfully energetic display script. The bold weight feels more confident, but both weights have a dancing rhythm that brings the page alive.

Raleway Dots

Raleway is a hugely popular — and perhaps overused font — but this dotted version is less known. It’s a simple geometric sans that functions as a display face.

Kenia

Kenia is a wonderful, uncategorizable typeface. The stencil forms result in entirely original letter constructions, and the lowercase s is magnificent.

DM Sans

DM Sans is a low-contrast geometric sans-serif that performs wonderfully well at smaller sizes. It only has three weights, but each comes with a matching italic.

Oxygen

Designed by Vernon Adams as part of the KDE project for GNU+Linux, Oxygen is a very readable sans-serif, with a generous x-height and a hint of pen stroke.

Alice

Ksenia Erulevich’s Alice was inspired by Lewis Carrol’s novel Alice’s Adventures in Wonderland. It presents itself as an Edwardian serif with fanciful flourishes.

Carter One

Carter One uses bold strokes, with a medium amount of contrast, to create a sans-style script. It has dozens of beautiful details like the notch on the lowercase o.

Bodoni Moda

Bodoni Moda is a didone-style serif with strong vertical strokes and high-contrast slab-like serifs. It’s the best variable font in this genre that I’ve found.

Ultra

Ultra is a slab-serif that you won’t even consider for body text. Its sculptural shapes are almost American-western. The counter on the lowercase n is charming.

Azeret Mono

Most mono-spaced fonts fail to inspire; practical they can be, charming they are not. But Azeret Mono bucks that trend, its bold weights being particularly fantastic.

Nunito

It’s tough to find a serious sans-serif with rounded terminals, but Nunito is it. There’s also a Nunito Sans with square terminals, but I love the rounded tips.

Bungee Inline

Designed for signage, Bungee is great for display sizes and works well vertically. There are several versions, but my favorite is this classy inline version.

Oi

Oi is unapologetically loud. A slab-serif that swallows its own detail, the counters and ink traps give it a 3D quality, and the curves feel almost nautical.

Expletus Sans

One of the significant trends in typography is the angled clip of adjoining strokes, creating the effect of shadow. This effect is brilliantly achieved in Expletus Sans.

Lustria

It’s comparatively unusual to find a serif face designed to work well at display sizes. At large sizes, Lustria’s rounded terminals evoke ink spread delightfully.

Yatra One

Yatra One is a Devanagari and Latin typeface that uses the Devanagari brush angle for its strokes, giving the Latin text an unusually slanted, stand-out character.

Amiko

Amiko is a highly legible typeface and excellent at tiny font sizes. It’s perfect as a secondary font if your main font is too fancy for elements like legal notices.

Keep Scrolling

It’s always tempting to leap at the first typeface you find that meets your needs, but if you dig a little deeper into Google Fonts, you’ll find a vast range of typefaces that offer both practicality and character.

Source

The post 21 Exceptional Google Fonts You Probably Haven’t Discovered Yet first appeared on Webdesigner Depot.


Source de l’article sur Webdesignerdepot

Creating an incredible brand experience for an end-user is about more than just designing the right home page or lining up a series of great product pages. 

Effective website design conveys crucial information about a company, through everything from font styles, to image choices. Nowhere is this representation of brand identity more important than on the about page. 

People frequently confuse the about page with the contact page or fail to leverage it correctly simply because they don’t know what to say. However, creating an about page that speaks to an audience can be immensely powerful. 

What is an About Page?

The first step in designing a great about page is understanding the purpose of the space. This isn’t just a page on a website explaining what a company does. 

The about page is an introduction to a company’s story, its brand essence, and personality. 

Done correctly, this page will demonstrate a crucial sense of affinity between a business and its customers. It will highlight values that resonate with a customer and make it easier for clients to trust businesses.

The Yellow Leaf hammocks company starts its about page with a video.

As you scroll through the interactive site, you discover new elements of the company’s tale, including what prompted the birth of the business to begin with and the brand’s mission. 

Yellow Leaf lets its visitors know what the company is all about by using authentic images of real people to external content and bold quotes. 

There are even snippets from customer case studies for social proof. 

About pages are relevant because they give customers a way to build a real human connection with a business. Harvard professors say that 95% of purchasing decisions are emotional; we don’t buy things just because we need them. Instead, we look for companies that we feel connections with to solve problems. 

Using an about page to convey an attitude, personality, or just what makes a business special is how designers can ensure that end-users will care more about the business. 

How to Make an About Page Stand Out

So, how do you make an about page stand out?

Since every company is different, there’s no one-size-fits-all strategy for everything.  However, there are a few essential steps to consider as you move through the design process. 

Here are some pro tips for successfully attracting attention with the about page…

Step 1: Decide What to Include

It’s tempting to assume that a complicated about page will lead to a stronger relationship between a brand and its customers. After all, the longer the story, the more the customer knows about the company – right?

While it’s essential to include plenty of valuable information in an about page, it’s also worth remembering that today’s customers are short on time. They don’t want to spend hours scrolling through one part of a website. Instead, they want access to quick, convenient snippets of information. 

The Joseph Payton about page is effective because it cuts the story down into bite-sized chunks. Each piece of information highlights valuable insights for the customer. Plus, hand-drawn images and animations make the experience feel like you’re getting to know Joe on a deeper level. 

Before you begin designing, ask yourself:

  • How much text does the page need? How much space does there need to be for copy? How can you spread the content out in a visually engaging way?
  • What sections should the page include? For example, does there need to be a link to the contact us page or a contact form somewhere?
  • How does the page connect to the rest of the website? For example, can you link to things like case studies and reviews with quotes to tie more of the website together?

Step 2: Make the Mission Statement Clear

In a world where emotion influences buyer behavior, clients and customers want to buy from companies they believe in. It’s not enough to have the right product or price point anymore. People want to know that they have a human connection with a business. 

On some about pages, it’s difficult to pinpoint the real mission of the company. It seems like you have to scroll through endless paragraphs of text to make your own assumptions about what matters to the company. However, a well-designed about page puts this crucial info front and center. 

For instance, on the Apptopia about us page, the subheading tells you everything you need to know about the brand. This heading instantly tells the audience whether it’s worth reading on to find out more. 

The best about us pages often include a lot more than just a single sentence of text. But it’s worth pinpointing some of the essential details from these pages and drawing extra attention to them. A larger font or a different font color could be perfect for this purpose. 

Alternatively, if it’s difficult to refine the company’s mission down into one message, it might be worth creating a whole segment at the top of the page dedicated to this information. That’s what the Toms shoe company does.

Step 3: Invest in the Right Trust Elements

People aren’t always sure who they can trust these days. 

There are millions of websites out there and billions of companies. Not all of them are going to appeal to every customer. Since an about page is all about making a crucial human connection between a business and its client, it’s important to implement as much trust as possible. 

The good news is that there are many trust elements you can embed into an about page to make it more reputable. Star ratings taken straight from companies like Trusted Reviews and Google are a great way to show that a company is already impressing its followers. 

Quotes plucked from your customers or segments of case studies that you can place throughout the About Page copy is another great way to show your authenticity. 

You could even take the same approach as Aja Frost here and embed genuine data and graphs into the about page.

One particularly helpful way to make a website’s about page more trustworthy without eating up too much space is to implement trust stickers. Badges that show all the right groups and regulators approve a company are a great start. 

Even showcasing the logos of companies that the business worked for before on a slideshow could be an excellent opportunity to add depth to their authority. 

Step 4: Convey Brand Personality

Brand personality is reflected in the tone of voice that a company uses for its content. You can see a company’s personality in the choice of colors it has on its website. It’s in the fonts that convey a message, and the videos, images, and other unique strategies that each business uses. 

Although a brand personality needs to shine through in everything the company does, it’s imperative on the about page. This is the environment where a customer is getting to know a business for the first time. As a result, the consumer should instantly recognize what kind of brand archetype they’re working with. 

Take a look at the Eight Hour Day about page, for instance. The first thing you see is a picture of two people laughing. That means you instantly get a sense of friendliness.

As you scroll through the page, you’re greeted by friendly, informal copy combined with bright colors and snippets of useful information. Everything feels comfortable and reassuring. 

When you reach the bottom of the page, you find a bunch of data that makes the company seem more trustworthy. There are links to its social media pages and a partial client list showcasing brands like JCPenny, Wired, and Purina.

Using the right combination of font, copy, and imagery, this About page tells you exactly what to expect before you begin interacting with the company. 

Step 5: Take Visitors on a Journey Through Time

Showing customers where a business is going with things like brand mission statements and values are great. However, it’s also worth giving people an insight into where a brand has already been. 

Many of today’s shoppers aren’t comfortable buying from brands that haven’t spent much time in their chosen industry. They want to see that the people they’re working with have experience, heritage, and plenty of background knowledge. 

What better way to demonstrate all of these things than with a timeline of accomplishments? Here’s an example of how Marshall showcases its history by mentioning various crucial historical milestones.

A timeline of events doesn’t have to be this complex, however. If you don’t want to overwhelm visitors with a wall of text, an actual timeline that offers quick and easy insights into what the business has done over the years could be a better option. 

Another option could be to have a few key statements from the company’s timeline, then link out to a separate “History” page for people who want to find out more. 

Step 6: Show the Human Side

People don’t buy from businesses; they buy from other people. 

An about page isn’t just a chance to show customers what a company does. It’s also an introduction to the people behind that organization. Showcasing the team members that contributed to the growth and continued development makes that organization more attractive. 

Obviously, if there are hundreds or thousands of employees in a team, you might not be able to mention them all on an about page. However, the page should generally include some insights into the c-suite and significant members of staff. 

A selection of company photos is a good way to introduce your team. However, you can consider other options too. For instance, to maintain their unique brand, the Tunnel Bear team designed to draw their own bear icons that represented their personalities.

The design is adorable, and it’s a wonderful way to showcase what makes the company so unique. At the same time, using this kind of illustration means you can avoid the hassle of trying to get all of your business photos to look consistent. 

Step 7: Show Values with Visuals

Finally, as we’ve mentioned frequently throughout this guide, an about page is an essential place to showcase the values of your business. These are the core principles that guide you in everything that you do. They help tell customers what matters most to you and prevent you from moving in the wrong direction. 

However, you’re not restricted to highlighting your values through copy and nothing else. You can also introduce customers to the things that matter most to you through visuals too. Graphics or illustrations that highlight important aspects of your business are a great way to share information without relying too heavily on text. 

Videos are another brilliant option, particularly if you have a lot to say but not a lot of time to say it in. That’s what Ben & Jerrys does.

You can also find a stream of “issues” the company cares about on the website too. This means that people can get more information on things like Democracy, Racial Justice, Fair trading, and what Ben & Jerry’s is doing about all of those things. 

Visual elements like this are a great way to give an about page more pizazz. Plus, they appeal to people who want to learn about your company but don’t want to spend forever reading through the text. 

Create Better About Pages

An about page shouldn’t be an afterthought. 

It’s a crucial part of showcasing a company’s unique style and personality. Used correctly, these pages convey crucial information about everything a business stands for. 

Use the tips above to give more meaning to your about page design, and remember to pay attention to how much your traffic and conversions evolve with every update you make. A better about page could even help you to drive more conversions.

Source

The post 7 Essential Design Tips for a Killer “About Us” Page first appeared on Webdesigner Depot.


Source de l’article sur Webdesignerdepot

Every day design fans submit incredible industry stories to our sister-site, Webdesigner News. Our colleagues sift through it, selecting the very best stories from the design, UX, tech, and development worlds and posting them live on the site.

The best way to keep up with the most important stories for web professionals is to subscribe to Webdesigner News or check out the site regularly. However, in case you missed a day this week, here’s a handy compilation of the top curated stories from the last seven days. Enjoy!

UXBulls***

What Makes a Good One-Page Website Design?

39 CSS Custom Properties (Variables) Examples 

18 CSS Filter Examples

Is it Time to Ditch the Design Grid?

Here’s 8 Google Penalty Checker Tools to Fix Your SEO Problems

3 Essential Design Trends, August 2021

UX Analysis: Apple Music vs Spotify

How to Optimise Fonts for a Faster Website

Quiz: The Inconceivably Hard Color Quiz

Source

The post Popular Design News of the Week: August 2 2021 – August 8, 2021 first appeared on Webdesigner Depot.


Source de l’article sur Webdesignerdepot

Every day design fans submit incredible industry stories to our sister-site, Webdesigner News. Our colleagues sift through it, selecting the very best stories from the design, UX, tech, and development worlds and posting them live on the site.

The best way to keep up with the most important stories for web professionals is to subscribe to Webdesigner News or check out the site regularly. However, in case you missed a day this week, here’s a handy compilation of the top curated stories from the last seven days. Enjoy!

40 New Startup Websites and Landing Pages for Inspiration

Is It Time for Web Designers to Retire the Slider?

Exciting New Tools for Designers, July 2021

24 Beautiful Examples of Gradient Websites

Towards Richer Colors on the Web

3 Kinds of Tech Debt

20 Free Psychedelic Fonts All Designers Must Have

10 Graphic Designers Reimagine the Iconic Instagram Logo

What is WordPress 5.8’s Query Loop Block?

Helvetica Now Variable Offers One Million Fonts in a Single File

Source

The post Popular Design News of the Week: July 12 2021 – July 18, 2021 first appeared on Webdesigner Depot.


Source de l’article sur Webdesignerdepot

Looking to give your homepage a well-needed design update in late 2021 or 2022? Not a bad idea; first impressions are crucial when it comes to business websites. But, fixing your homepage and website design is no easy feat.

Web design trends are evolving faster. Blame the ever-decreasing user’s attention span. The average visitor now spends just 0.5 seconds scanning your homepage to form an opinion about your brand and decide whether to click through or bounce.

Increased user expectations and uncertainty in the user’s response, which is highly impacted by the site’s first impression, are other reasons to consider. This is why the designs which were trending in 2019 are no longer viable in 2021 or 2022.

We have curated the ten best examples of homepage designs to inspire your business in 2022, including a rundown of the best strategies and tips.

Let’s start by highlighting why homepage optimization is necessary for 2022:

Why Your Homepage Will Be So Important in 2022

Your website — especially your homepage — is your brand’s first chance to attract, build trust with, and connect with visitors.

According to recent statistics on why website design is important:

  1. 38% of visitors will stop interacting with a website if they think the layout isn’t visually appealing or intuitive. This creates a higher bounce rate and fewer conversions.
  2. 94% of a visitor’s first impression is based on website design (including colors, fonts, layout, navigation menus, etc.).
  3. 46% of people base a business’s credibility on the aesthetics of its website. Brands with less-than-stellar homepage designs are seen as less trustworthy than companies investing in the visitor experience.

Think of it the same way as walking into a brick-and-mortar store. Visitors are more enticed by a carefully curated ambiance of neatly stocked shelves and welcoming employees than a store that’s dark, messy, or seemingly unfriendly.

Using this logic, your homepage’s above-the-fold section is where you’ll greet visitors and reel them in for more.

10 Homepage Design Comparisons (2019 vs. 2021) To Inspire Your Business Website Design in 2022

Homepage design has come a long way since 2019. In this section, you will explore how.

These homepage designs crush it above the fold. Take just a few of these tips to heart, and your website will be poised to attract leads and conversions — no matter which industry you’re in.

1. Netflix – Crafting The Perfect Call To Action That Reduces Friction With An Additional FAQs Section

Most businesses make the mistake of adding a CTA button that first persuades the user to click on it and then asks for the visitor’s email address.

Netflix also did the same in its 2019 design.

However, Netflix combined both steps in its 2021 homepage design.

The new, improved 2021 homepage design asks for the user email address right up front along with the CTA button.

Here is a good comparison of both the designs:

2019 homepage design

vs.

2021 homepage design

Key Takeaways:

  • The design encourages visitors to enter their email address right when they land on the homepage. As a result, form submission is much easier when the user has started the process. Hence, Netflix makes it easier for visitors to move along their conversion funnel nicely by reducing the friction.
  • The 2021 design also has a nice FAQ section that provides quick information about the company’s services and improves the overall user experience.
  • FAQs also help increase the organic presence of the website in the search engines because Google presents snippets from the FAQ section in the form of an answer box in the search results.

2. Spotify – Revamped Color Combinations For Improved CTA Visibility And Using The ‘Rule of Three’ For Heading Text

The older 2019 Spotify homepage design used light pink and orange colors in its home page main area. The CTA color was green, but if you look closely, the CTA lacks visibility.

The new 2021 design uses blue and green colors with a much larger font size for the main heading. The colors are attractive, and the CTA is visible clearly.

Here is the comparison of the Spotify homepage 2019 design vs. 2020 design:

2019 homepage design

Vs.

2021 homepage design

Key Takeaways:

  • Blue is the most versatile color, and green is the perfect choice for the CTA button. Spotify used universally accepted color combinations to redesign its homepage and made the CTA more visible.
  • The main heading is also made larger than it was in the 2019 design, and it follows the rule of three in writing which is effective and satisfying. It uses just three words in the main heading to allow the human brain to process information as a pattern that is more memorable.

3. Hulu – Give Priority To Your Brand Name And Hide Pricing

If you compare the Hulu 2019 vs. 2021 Hulu homepage, the brand name has been prioritized and shown as the main heading.

Moreover, the older homepage had pricing information everywhere, which has been reduced intelligently in the new design.

2019 homepage design

vs.

2021 homepage design

Key Takeaways:

  • The brand name ‘Hulu’ is displayed as the main heading of the homepage, which helps to build audience trust.
  • The older design persuaded the users to pick a paid plan even though they had a free trial option—this discouraged users from trying their service. The new 2021 design encourages users to try the platform for free. In addition, the packages have prominent CTAs that mention “try for $0”. This design move improves conversions on the website.
  • The new design makes it easier for the visitors to select a viewing plan with easy comparison of the three available plans. The best part is, customers can start all the plans for $0. It’s a win-win situation for the users, and they can quickly pick a plan to start watching Hulu.

4. Nextiva – Reduce Visual Noise And Add Pictures In Menu To Improve UX

Nextiva realized the importance of reducing visual noise in its newly designed 2021 homepage. Visual noise happens when you use too many colors to attract user attention. Different colors compete with each other resulting in diluted customer observation.

In the old 2019 homepage, Nextiva used orange, blue, and green as the primary colors, while in the 2021 revamped design, they have used blue as the main color.

Here is a comparison of the two designs:

2019 homepage design

vs.

2021 homepage design

Moreover, the older homepage didn’t have an image in the product menu, but the new 2021 homepage improves the UX further.

Below is a comparison:

2019 homepage design

vs.

2021 homepage design

Key Takeaways:

  • Nextiva used blue as their base color for the homepage design and removed orange and green colors to reduce visual complexity. This is an excellent change to keep the user’s attention focused. Notice the green colored bar at the top of the homepage in the 2019 version now replaced with blue.
  • The 2021 design has a clean look compared to the 2019 design, which looks scattered with too many different elements, including CTAs that confuse the users.
  • The product menu does an excellent job of linking intelligently to service pages such as phone systems and video meetings. The image of a smiling lady attracts users to click on Nextiva’s products to learn more about them. Improving UX is an impressive way to reduce bounce rates and increase time on site.

5. GoToMeeting – Avoid Lengthy Sign Up Form, Educate Users About Your Products, and Add Images That Depict The Current Needs of The Audience

GoToMeeting does a great job educating the users about their product by adding more content on the homepage that comprehensively explains their product features.

Moreover, they have replaced the older hero image with a new picture that portrays the changing needs of their audiences. Nowadays, there is a rise in work from home culture due to Covid-19. Hence, the photo and the heading text clearly target the needs of their users.

Here is a comparison of the 2019 vs. 2020 homepage of GoToMeeting:

2019 homepage design

vs.

2021 homepage design

Key Takeaways:

  • The 2019 homepage design had a sign-up form on the homepage, which GoToMeeting removed in the 2021 design. People hate to fill in so much information right when they land on the home page. Hence, GoToMeeting did the right thing by removing the signup form from their homepage.
  • The hero image steals the show of the 2021 redesign because the picture of a working mom with her kid playing studying in front of her is a great way to portray the current needs of the society when over 60% of the employees are working from home. Audiences can quickly relate their working environment with the hero image leading to more sign-ups.
  • The older 2019 design was confusing, and it made little effort to help the users understand the different features of the product. The new 2021 homepage design has a product features section that explains the different features of the software. When users are educated about the product, they earn the confidence to try the product.

6. Zillow – Apply Hick’s Law To Allow Visitors To Take Faster Decisions

Zillow does an impressive job of applying Hick’s Law in allowing visitors to make faster decisions. Hick’s law states that the more options you present to the users, the faster they will decide. Therefore, it is a major factor in improving website usability.

The old 2019 homepage design of Zillow offered too many options to the users, like they want to buy, rent, or sell a property. The users first select either one of the three options and then enter the zip code to start their search.

The new 2021 homepage design changed that. Now, Zillow offers users a single option. They only need to enter the zip code to get started.

By reducing the number of actions that users need to take to just one, the homepage design eases the overall decision-making process of the site visitors.

2019 homepage design

vs.

2021 homepage design

Key Takeaways:

  • The new homepage design has a simple search bar that persuades visitors to take prompt action.
  • The Hero image is placed smartly behind the search bar to depict the needs of the users accurately.
  • The homepage does have three different panels for buying, renting, or selling a home when the users scroll below. The old design is missing that. The new design removed so many options above the fold and kept just a single option for the users to encourage more users to search properties on the site.

7. Plex – Placement of Prominent Calls-to-Action On Homepage

The CTA is a key element of every website. It helps the users decide on their next action and helps to convert the visitors into leads.

Plex lacked an optimized CTA placement in its 2019 home page design. Hence, the 2021 design received an uplift to better place the CTA for increased visitor engagement.

Take a look at the home page designs of Plex from two different years. If you compare the two home pages of 2019 vs. 2021, the primary difference that will grab your attention is the CTA.

2019 homepage design

vs.

2021 homepage design

Key Takeaways:

  • The call-to-action buttons are more prominent and have actionable texts.
  • The number of CTA buttons is increased to two to encourage users to take action.
  • The additional CTA button is wisely placed at the center to get immediate attention.
  • Note that the color choice for the button is also bright and highly contrasts with the background yet matches the color theme.
  • The old heading text ‘Stream Smarter’ was confusing because it didn’t help the users understand what Plex does. Hence it is now revised to ‘Watch Free Movies and TV on Plex.’ The new text is easy to understand and has the word ‘Free’ to increase the number of visitors clicking on the CTA.

8. Dropbox – More Above The Fold Content And Change of Fonts

Dropbox has significantly worked on its main content, which is clearly visible in the comparison homepage design images of 2019 vs. 2021.

The 2021 homepage is seen fixing faded, minimalistic, and less engaging content in the older homepage.

2019 homepage design

vs.

2021 homepage design

Key Takeaways:

  • Sans serifs, with their clean readability, are included for longer bouts of the homepage.
  • Bold sans text is doing the job of drawing user attention effortlessly.
  • The color contrast of the text with the background is increased, which improves the visibility.
  • The right side image of a laptop is replaced with a screenshot of the software, which intrigues users to know more.

9. Cisco – Moving Blocks To Outsmart Competitor Websites

The homepage design of American technology company Cisco has seen a drastic change in 2021; it deserves to appear on this list. The company website smartly represents an appeal for future development through its killer homepage design.

Here is a comparison of the old 2019 homepage design vs. the new moving block design of 2021:

2019 homepage design

vs.

2021 homepage design

Key Takeaways

  • The home page contains moving blocks with news from the blog. As you hover over the image, it widens up, and a CTA button appears. The blocks represent a design of the future which the competitors might find hard to replicate.
  • Every block has a CTA, which was missing in the 2019 design. Each block represents a specific Cisco service and caters to the different needs of the visitors.
  • The new design is elegant and cleaner with lots of information.

10. Slack – Product Video On Home Page For More Conversions

Slack has made it easier for the users to understand the product well by using a video on the homepage.

The 2019 design has an image, while the 2021 design has a video that helps the visitors understand how the product works.

Here is a comparison of the 2019 design vs. 2021 design:

2019 homepage design

vs.

2021 homepage design

Key Takeaways

  • The inclusion of a product video leaves a great impression in the minds of the visitors and shows them what your product does.
  • Video helps Slack to make its value proposition clear and super fast.
  • Video has a strong correlation to conversions, and they work well as compared to hero images. Slack used a hero image on the homepage in 2019, but they replaced it with a video in 2021.

Final Thoughts on Using These Homepage Designs for Inspiration in 2021

By making it to this point in our guide, you now have plenty of inspiration to run with when upgrading your homepage. You should also have a better understanding of how powerful this tool may become for your brand.

So now it’s time to brainstorm how to use these ideas for your own 2021 homepage design. First, jot down the key points from this guide and honestly assess how your website currently compares.

Accomplish this task, and your brand might see an uptick in website traffic and conversions. It may even earn a spot in a roundup of killer website designs just like this one.

Source

The post 10 Homepage Design Comparisons to Inspire Your Business in 2022 first appeared on Webdesigner Depot.


Source de l’article sur Webdesignerdepot

There is no shortage of places to buy fonts online, but the quality of what is on offer is variable, and the way of searching catalogs has remained largely unchanged since the first stores appeared decades ago.

I Love Typography — a popular source of news about typography and type design since 2007 — has stepped into the marketplace, starting by inviting some of the world’s top designers to contribute to its new store, resulting in 40 foundries joining the project and 15 new type families available at launch.

ILT’s boldest move is to step away from the traditionally shallow type categories and attempt to devise a system that drills down into the nuances of type design, all to aid discovery.

The approach is named CEDARS+, which is a method of describing the formal characteristics of a (mainly Latin) typeface based on the characteristics of the marks if made by a writing tool such as a pen or chisel.

CEDARS+ can be broken down as follows:

  • Contrast: the difference between the thickest and the thinnest strokes in a character. Permissible values range from ‘none’ through ‘medium’ to ‘extreme.’
  • Energy: the visual energy in the letterform. Values range from ‘calm’ to ‘lively’ and ‘very high.’
  • Details: with several sub-categories, details is a catch-all category that covers aspects such as how strokes end and intersect.
  • Axis: the angle at which the tool would be held to create the form. Axis uses degrees, with 90 degrees being a vertical axis.
  • Rhythm: covers both the tightness or looseness of letters varying from ‘very tight’ to ‘very loose, and the difference in width between the narrow and wide letters varying from ‘highly regular’ to ‘highly irregular.’
  • Structure: another catch-all category that covers the structure of loops with values such as ‘triangular’ and ‘oval,’ and the general construction, which can be ‘formal,’ ‘cursive,’ ‘organic,’ ‘layered,’ ‘stencil,’ or ‘modular.’
  • +: the plus covers several characteristics that don’t fit neatly into an acronym, including the shape of crossbars, and single or double storey ‘a’s and ‘g’s.

With a way to browse font families that is based on the feel of the design, rather than popularity (or alphabetical order!) ILT hopes to expose lesser-known designs and designers, and to encourage more creative typography on the web.

Source

The post I Love Typography Launches Font Store first appeared on Webdesigner Depot.


Source de l’article sur Webdesignerdepot

Every day design fans submit incredible industry stories to our sister-site, Webdesigner News. Our colleagues sift through it, selecting the very best stories from the design, UX, tech, and development worlds and posting them live on the site.

The best way to keep up with the most important stories for web professionals is to subscribe to Webdesigner News or check out the site regularly. However, in case you missed a day this week, here’s a handy compilation of the top curated stories from the last seven days. Enjoy!

How to Treat Clients Who Treat You Poorly

PC Users Are Furious About The New Windows 11 Design

20 Best New Fonts, June 2021

22 Free Web Design Tools from Spring 2021

10 Best Google Fonts for Headings 2021 Collection

Why Python is Not The Programming Language of the Future

The 6 Levels of UX Maturity

Top 20 JavaScript Tips and Tricks to Increase Your Speed and Efficiency

Drawing Graphics With The CSS Paint API

Creating Rhythm With Typography

Soft UI: Making Sense of the Latest Design Trend

Optical Size, The Hidden Superpower of Variable Fonts

WebP Images: A Primer

Perfect Tooltips With CSS Clipping and Masking

Source

The post Popular Design News of the Week: June 21 2021 – June 27, 2021 first appeared on Webdesigner Depot.


Source de l’article sur Webdesignerdepot

A new design trend has emerged in the last year: Soft UI or Neumorphism is everywhere. 

Even Apple is in on the trend; the company introduced a host of changes in both its mobile and desktop operating systems that use the style. The elements of Soft UI introduced by Apple reflect various aspects of the Microsoft Fluent UI design too. 

So, if soft UI is such a huge concept, what do we need to know about it? How does soft UI work, and what are the pros and cons of using it?

What is Soft UI (Neumorphism)?

Soft UI involves using highlights and shadows in design elements to make them look as though they’re layered on the page. 

The term neumorphism is derived from a previous design style — skeuomorphism, where designers create something as close to its real-life counterpart as possible. If you remember the shift between iOS 6 and 7, you’ll remember the switch between skeuomorphic and flat designs. However, neumorphic design isn’t quite as dramatic. 

Neumorphism doesn’t focus excessively on things like contrast or similarities between real and digital elements. Instead, this “soft UI” practice creates a smoother experience for users. 

With neumorphism, you get the sense that buttons and cards are actually part of the background they’re on. This trend removes the flashier aspects of a typical interface and focuses on a softer style that stays consistent throughout the design. 

The Common Features of Soft UI

Soft UI is all about smoothing out the experience by making everything feel more connected. There’s nothing overly harsh in the aesthetic, hence the term “soft.”

So, what kind of features can you expect?

Rounded Corners: Soft UI removes some of the sharper parts of the interface, like the corners on modules and segments. This allows for a more gentle appearance overall. In this experimentation from Iqonic Design, we can see how the round corners tie everything together.

Transparency and Background Blur: Background blur and transparency are more popular today since the infamous iOS 7 solution emerged. Most people hated the appearance of ultra-minimalism, combined with thin fonts. However, the background blur effect was more popular. The blur in soft UI shows that part of the window is connected to the rest of the OS. It seems like parts of the background in the app are pushing through to the surface. 

Unified Symbols: Everything needs to fit perfectly in a soft UI design. Anything that doesn’t look like it’s part of the same entity throws off the experience. In this design experiment by Surja Sen Das Raj, you can see how all the colors, shadows, and gradients tie together consistently. Because everything is more uniform, the experience flows perfectly for the end-user. 

Implementing Soft UI Elements in Your Design

So, what does neumorphism look like in your UI design process?

Ultimately, it’s all about subtle contrast and aligned colors. Every part of your interface needs to look like it’s part of the same form. Your element and background need to be the same color so that you can create a feeling of objects protruding from the background. 

With Soft UI, the keys to success are shadows and highlights. 

Let’s take a look at some key steps. 

Achieving the Soft Look

When you’re designing your interface, remember that sharp edges make the interface more serious and formal. Rounded corners are more playful and friendly. 

What also makes the design look lightweight and delicate is plenty of deep shadows and highlights. When you add shadows to elements, you create a visual hierarchy. The items that cast a larger, deeper shadow are the ones closest to you. That’s why only a few elements need to cast an intense shadow. Everything else should work in the background. 

Take a look at this design by Alexander Plyuto, for instance.

Creating Smooth and Delicate Gradients

Gradients are part of the shadow and highlighting process in Soft UI design. Ideally, you’ll need to choose colors from the same palette, just toned down or brightened, depending on your needs. The gradient needs to be barely visible, but just enough to make the elements stand out. 

For white gradients, like highlights, use a very delicate color somewhere between white and your background shade. For instance, consider this design from Marina Tericheva.

Consider the Little Details

Finally, remember that the neumorphism design principle is all about little details. 

Choosing a font that visually matches the background is an excellent choice. However, you can also choose something more contrasting, as this will help information stand out

Adding a little bit of the background into your fonts might be suitable too. For instance, if you have a green font and a grey background, add a little grey into the mix. 

Extra elements in your design, like allowing a button to shift into a more recessed state after being clicked, are a great way to make the soft UI more engaging. Everything your end-user interacts with needs to feel smooth and perfectly unified. 

The Problems with Soft UI Design

Just because a design process is trending – doesn’t mean it won’t have its issues. 

Neumorphism is a fun way to make apps, operating systems, and websites feel more friendly and informal. However, this softer approach has a weak spot too. 

When you’re dealing with a small margin of contrast and color where neumorphism works well, it’s hard to get the effect right every time. For instance, this all-yellow design for Dtail Studio may be overwhelming for some.

A slight deviation in saturation or a problem with your shadowing could render the entire effect of Neumorphism completely pointless. 

Another major issue is accessibility. The soft UI design looks great for people who have a full visual range. However, visually impaired users might not see the same benefits. Anyone without perfect vision may see crucial objects disappearing into the background.

Your users don’t necessarily need significant vision problems to struggle with neumorphism, either. The design is all about softness that causes elements to almost blend together. People with low-quality screens that don’t have as many pixels to work with won’t see these elements. 

Issues With Buttons and CTAs

Another major issue of neumorphism is that its subtlety can lead to problems with attracting clicks and conversions. Usability is the most important consideration of any UI design. 

Unfortunately, when you focus on subtle elements throughout your entire interface, usability sometimes takes a hit. 

Let’s consider buttons, for instance – they’re essential to any interface. To simplify the customer journey, these buttons need to be noticeable, and they need to shift into different states when your customers interact with them. 

For the button experience to be excellent, users need to notice the design instantly. However, the heart of neumorphism revolves around the idea that nothing stands out too much. 

This isn’t just an accessibility issue; it’s a problem for conversions too. 

Neumorphism is soft on the eyes, with minimal color contrast and few color pops. This means that CTA buttons don’t stand out as much as they should. Buttons almost blend into the background, and the website struggles to pull attention to the areas that demand it most. 

How to Experiment With Soft UI (Free Kits)

The key to unlocking the benefits of soft UI interfaces without getting lost in the negative points – is proper experimentation. Like any new design trends, professionals and artists will need to learn how to merge the elements of soft UI together in a way that doesn’t compromise usability. 

Trends in UI design can’t focus exclusively on aesthetics, as a customer’s comfort will always be an essential part of the process. 

If you want to start exploring, here are some of the best kits and freebies to get you started:

Closing Thoughts on Soft UI

The world of design and the trends that we use are constantly changing. Companies are always searching for the best ways to connect with their users. Often, this means focusing on an interface that really connects with your target audience and delivers the best possible results. 

The soft UI design trend has its benefits and its downsides. On the one hand, the smooth appearance of every element on a combined screen can deliver a delightful aesthetic. Buttons feel less imposing, and elements are friendlier and easier to interact with. 

On the other hand, neumorphism also makes it difficult to truly capture your audience’s attention in the places where it matters most. It suffers from accessibility issues and requires plenty of care and practice.

Source

The post Soft UI: Making Sense of the Latest Design Trend first appeared on Webdesigner Depot.


Source de l’article sur Webdesignerdepot

Welcome to a new series of articles, in which we round up the best new fonts released from some of the top designers on the Web.

In this inaugural edition, the collection includes fonts released or expanded over the last few months. Many of the fonts have free weights available. If you use any of them in your work, be sure to let us know!

Cedar

Cedar is a unique angular serif built by wrapping vector shapes around calligraphic structures. It has its roots in woodblock printing but creates a very modern aesthetic.

Tome Sans

Tome Sans is a very usable business-like type family of ten weights, plus italics. It features some awesome ligatures that you don’t often find in a sans-serif.

Midnight Sans

Midnight Sans is a chunky sans serif, suitable for display sizes. There’s a rounded variation for added warmth and dozens of OpenType features. It’s a good alternative to Impact.

Nouvelle Grotesk

Nouvelle Grotesk is a workhorse sans serif that you’ll come back to all the time. The humanist forms are a little more considered for digital usage than Akzidenz Grotesque or Helvetica.

Glaser Babyfat

Glaser Babyfat is the first typeface designed by the late, great Milton Glaser. It has been released posthumously by P22 alongside three other fonts based on Glaser’s designs.

Kristal

Kristal is a flexible and highly readable serif, suitable for large blocks of text in small sizes. It has some beautiful details, including a selection of ligatures and a fine set of italics.

Lightbox 21

Lightbox 21 is a redesigned version of Lightbox; the original made use of the golden ratio for its geometry, the redesign completely abandons that resulting in a more readable typeface.

Irregardless

Irregardless is a tall sans serif with organic shapes that feels almost like lettering. Unusually for this style of typeface it has upper and lowercase letters. It’s perfect for a retro design.

Futura Now

Futura Now is Monotype’s redrawn version of Paul Renner’s classic Futura. As well as being massaged for screens and expanded to cover more languages, it’s also now available as a variable font.

Granite

Granite is a slab serif with high-contrast strokes, giving it the feeling of an Old West woodblock font. There’s a stencil alternate set that adds to the rustic aesthetic.

Magnet

Magnet is a sans-serif with heaps of character. There is a condensed headline variation that’s perfect for display purposes, but the real standout feature is the quirky ear on the lowercase g.

Bowdon

Bowdon is a warm serif in the Bodoni tradition. The contrast between serif and stroke creates a sense of luxury. It’s available in three weights: regular, narrow, and wide.

Euclid Mono

Euclid Mono is an attempt to design a monospaced font that doesn’t fit the traditional mold. The extended shapes create a dance-like composition with plenty of movement.

Fave Set

Fave Set is a collection of marker pen scripts that are always handy to have in your toolbox. There are ten fonts included in total, with condensed and extra casual styles adding to the number.

Saison

Saison is a wonderfully energetic outline font. It only works as a display option, but it’s perfect for editorial work or even branding.

Hernandez Niu

Hernandez Niu is a slab serif that takes lots of character from its exaggerated ink traps in weightier sizes.

Gomme Sans

Gomme Sans is a typeface with 12 weights. The extended style creates a modern feel, and it’s suitable for display or short to medium amounts of text.

Dobb

Dobb is an Arabic typeface designed to offer a playful and expressive option for pairing with illustrations. It has a graphic novel feel in extended text blocks.

Hatch

Hatch is a slab serif that has drawn inspiration from reverse stress typefaces of the nineteenth century. It has some quirky details that make it distinctly modern and a beautiful italic.

Sculpin

Sculpin is a sans serif with sharp strokes and corners, inspired by the sharp edges of tools like chisels. It comes in five weights with matching italics, and there is a variable font available.

Source

The post 20 Best New Fonts, June 2021 first appeared on Webdesigner Depot.


Source de l’article sur Webdesignerdepot