Articles

Get Ready For Next Month’s Google Shakeup

Google has been talking about the Core Web Vitals tool and the Page Experience Update for about a year now.

With the update scheduled to roll out in May 2021, now is the time to make sure your websites are prepared for it. It’s taking a lot of the best practices Google has recommended over the years and making them an official part of the search algorithm, so not taking this seriously could negatively impact your sites’ rankings.

Today, we’re going to look at everything Google has told us about the update and how to use the Core Web Vitals tool to ensure your site rankings don’t drop once it rolls out.

What We Know About the Google Page Experience Update

Google first told us about the page experience update back in May 2020. Here’s what we know about the upcoming update:

Google’s Search Algorithm Will Change in May 2021

Although there’s no specific day given, we do know that the page experience update will go live sometime in May 2021.

The Goal is to Reduce Friction on the Web

It’s not as though user experience is something that designers and developers overlook when building websites. Heck, there’s an entire disciple of UX design dedicated to it.

That said, Google hasn’t taken too hard line of an approach in enforcing its page experience suggestions, like mobile-first design, removing intrusive pop-ups, or improving page speed. With this update, though, Google is now telling every site owner that performance, accessibility, technical best practices, and SEO must be built into their websites.

Of course, the goal isn’t to create more work on your side of things. Google believes that by encouraging developers to build better web experiences that consumers will experience less friction and businesses will be more profitable as a result.

The Update Will Include Older Signals

According to Google, the page experience update is going to combine a bunch of older signals with the new Core Web Vitals:

The Core Web Vitals tool will now merge all of that data we once had to gather from various Google apps. That’ll make it more convenient for designers and developers to improve the on-page experience across a variety of areas.

The Page Experience Algorithm Will Change Over Time

Per Google:

Because we continue to work on identifying and measuring aspects of page experience, we plan to incorporate more page experience signals on a yearly basis to both further align with evolving user expectations and increase the aspects of user experience that we can measure.

So, don’t expect this to be a one-and-done thing. You’ll have to rely on the Core Web Vitals tool, and pay close attention to updates out of Google, to ensure your sites are keeping up with Google’s page experience standards.

Your Other Google Apps Have Already Been Updated with Core Web Vitals

If you hadn’t noticed, Google has already updated its other apps in anticipation of the page experience update.

Google PageSpeed Insights, Search Console, and Lighthouse all have Core Web Vitals data in them.

Here’s an example of how Lighthouse’s report on the Amazon website now looks:

By including these metrics within the tools you’re already using, you don’t necessarily have to add the Core Web Vitals tool to your growing toolbox. That said, there are some really valuable reports in there, so I’ll show you why you may want to add it anyway.

Google’s Top Stories Will Be Affected

In the past when someone did a news-related search on Google, they’d see “Top Stories” results like this one:

Until now, the only pages shown here were AMP-enabled ones.

Once the page experience update goes live, though, the AMP requirement is going away. So long as a page meets the page experience criteria along with Google News content policies, it can now rank in this section.

Google Search Results May Show a Page Experience Indicator

In the Top Stories example above, notice the AMP indicator I highlighted in yellow. Google is thinking about adding something similar to any search result that fulfills its page experience criteria.

While I think a small, eye-catching icon might draw a little more attention from Google users, I’m not sure if it’ll be that big of a deal to them. People working in this industry certainly know what that lightning bolt means, and we’ll also be the ones who recognize the page experience indicator, but I’m not convinced it’ll matter to users.

That said, this is something Google is thinking about rolling about, so it’s something to be aware of. At the very least, you can consider it a badge of honor when showing your websites to clients and prospects who want to see what you can do for them.

Content Is Still More Important Than Page Experience

Even if a website checks off all the page experience boxes, there’s no guarantee that it’ll start to rank better than websites that haven’t. The quality and value of the content on the page still matters greatly.

Using Core Web Vitals to Measure Page Experience

Alright, so let’s take a look at this Core Web Vitals tool. Here’s what the tool looks like when you enter the “Measure” tab:

It’s like most other Google analyzer tools. You enter the URL you want to audit and let the tool run. The results then spit out something that looks like this:

Core Web Vitals are graded on four categories:

Performance measures the loading speed, interactivity, and stability of the page.
Best Practices focus on the technical aspects of the page, including things like having an SSL certificate and making sure images fit within the parameters of the mobile screen.
SEO checks on the typical SEO signals like metadata, structured data, and so on.
Accessibility reports any issues with visitors not being able to see or access parts of the page.

If you scroll down just a little bit on the page, there’s more data available. It mainly has to deal with the technical stuff, like page speeds and unoptimized code:

Now, this isn’t really anything new. We can get this data about load time, interactivity, and content stability from Google’s other apps.

The real value is in the report, which you can access up top next to the date of your audit.

Open the report and you’ll find specific suggestions and pro tips to optimize each part of the page experience, like this SEO report:

Just like other Google tools, this one can teach you a lot about what makes one site more rankable than another. So, make sure you update your web design strategy going forward to integrate all of these ranking signals.

While you’ll have to do annual audits on your sites to see how much Google has changed the page experience signals, you’ll create less work for yourself if this baseline set of criteria are met with every site you build.

Source

The post Get Ready For Next Month’s Google Shakeup first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

12 avril 2021/par Service comm.

3 Essential Design Trends, April 2021

Actualités, Actualités

The best thing about writing about website design trends each month is looking at all the great sites that are being developed. Designers are stretching creatively and exploring new techniques and ways of doing things all the time.

It’s refreshing and inspiring. This month, some of those trends include a style that nods to brutalism, slide scrolling that’s interesting and fresh, and animated typography.

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

1. Almost Brutalism

Brutalism can be a lot to handle and only really works for certain types of projects. That being said, some of the elements of brutalism can be the foundation for an interesting aesthetic.

So, it’s not surprising that an “almost brutalism” trend has emerged.

Designers are working with some of the design elements – slab fonts, simple color schemes with a lot of contrast, twitchy animation, mono typefaces, and overall design patterns that are almost over-simplified.

The result is a striking design that isn’t so harsh that it turns users away. It’s the right combination of brutalism and usability to create something with a harder-edge feel that people understand.

Good Garms uses a typewriter-style typeface, simple patterns, and one of the most streamlined designs you might find for an ecommerce store. It’s effective and makes you look because it is different.

Dockyard Social uses an unexpected color combination with high contrast, sharp shapes, and design elements, and bold slab typography to grab your attention right away. The theme continues on the scroll with new color combinations with equally brutal design elements. It feels a little tight and uncomfortable in places but still highly usable – exactly what almost-brutalism intends to do.

ZN Studio uses the same big, bold type elements as the previous example with a twitchy-style animation to draw you into the design. The entire design uses clever animation effects with a brutal aesthetic to keep you scrolling.

2. Beautiful Slide Scrolling

You can argue the value – or lack thereof – of website sliders as long as you want to. The reality, though, is that, for the most part, they are clunky and get in the way of the content. It’s a lazy option that keeps you from having to make a content choice.

Not with these beautiful slide-scrolling website designs.

Each of these designs uses side-scrolling as a design asset. Here’s the trick that makes it work: Slide scrolling isn’t a “feature” above a bunch of other content. It is how the content is featured.

These examples show you how to use the trend well and should get you excited about slide (or side) scrolling.

Eduardo del Fraile uses a side scroll to show different projects in his portfolio. In addition to scroll, each element also has a simple and beautiful animation that allows you to see each product he has designed. Everything about the scrolling motion is intuitive, and the site never scrolls vertically, which is where many side scrollers go wrong.

Jo Ash Sakula uses a similar concept for the side scroll here but with different design elements. The bold card elements are striking in terms of color, contrast, and design. You know the scroll will move horizontally because a third element sneaks into your field of vision on the right side. It’s simple, clean, and highly usable.

Crimea is interesting because it has an “almost brutalism” style design and uses a side-scrolling pattern. The design is bold and almost overwhelming, but the scroll works to tell a nice story with visuals and content.

3. Typography Animations

Web typography can make or break a design from font choice to size and color to animation, every detail with text elements matters.

This trend explores and pushes the boundaries of animation with text elements in website design. And it is so tricky. The difference between an amazing result and a design fail is a thin line that can be quite subjective.

Each of these examples does something unique with text and animation together to create just the right feel. The flow for each is seamless and text elements – while incorporating movement – maintain readability.

Visages Du Rhone has two layers of animation. The first happens as the words come onto the screen as the color and fade change within the letters. The second is a subtle hover state with a fluid feel for the letters that match the design’s underwater theme. What’s special about the typography animation is that it happens without distorting the letters, something many other liquid text animations do.

Poolhouse uses transparent letters with movement in a layer behind the words. What’s very neat here is the additional filtering so that the background motion still works while maintaining the integrity of each letterform. Again, the focus on keeping text readable is what sets this design apart and makes it trend-worthy.

Komnata takes a wholly different approach with letters that float and look like balloons. The motion mimics what you would expect from an element that looks and feels like something in the real world. The user doesn’t have to do anything for this motion to take place. The animation might be even more effective if the scroll and pointer did not have a tail that “draws” on the screen as a distracting element.

Conclusion

The good thing about looking at variations of different trends is that you can see the practical application and apply it to your projects. While you might not move to a full sliding scroll on your website homepage, you could use that concept in another part of the design.

Experiment, have fun and draw inspiration from trending website designs.

Source

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

Source de l’article sur Webdesignerdepot

5 avril 2021/par Service comm.

15 Useful Tools & Resources Worth Checking Out

Actualités, Actualités

As a web designer, you face plenty of challenges, both good and bad. One of the bad ones is to suddenly find out that you’re either in danger of missing a client’s deadline or will be unable to meet it at all.

A missed deadline could be due to something beyond your control and no fault of your own. There are measures you can take to avoid what you do have control over. Such as not having the right design tool or design resources to do a task that has to be done.

An ounce of prevention can definitely be worth a pound of cure in this case. Before starting a project, make sure the tool or tools you will be using will be up to the task.

The 15 design tools presented here are the tops in their respective categories. You should be better able to handle whatever is thrown at you.

1. Be Theme

Its more than 200,000 sales to date have certainly established the BeTheme multipurpose WordPress theme as an all-time favorite among web designers.

In truth, “multipurpose” doesn’t do BeTheme justice. Users might argue that “all-purpose” would be a more accurate description.

Be’s 40+ core features give web designers plenty to work with in terms of page-building tools, design aids, design options, and special effects.

Most notably:

The Muffin Builder, which when used with other core features, makes building a website quick, easy, and coding-free;
The Admin Panel/Shortcode Generator combo gives all the flexibility designers need;
BeTheme’s 600+ customizable pre-built websites could well be the star of the show. They cover 30 business sectors and all the popular website types, they are customizable, responsive, and feature cool UX features, and they can get any project off to a rapid start.

Click on the banner to learn more about Be’s other core features.

2. Timezy Booking Software

Timezy will help you create a booking environment that works best for your business by allowing clients and customers to book your services as easily as possible. You can then integrate Timezy into your website to streamline and speed up your booking operation.

Clients and customers can book appointments online 24/7;
They can receive real-time email notifications and reminders;
Timezy can be integrated with Zoom;
You can reorder steps on the booking form to fit your needs;
Timezy can be used to manage employee assignments and schedules, vacations, and special days.

If you lack a website of your own, Timezy will provide you with a modern web page you can customize to fit your brand for clients to book appointments at any time.

3. wpDataTables

wpDataTables is the top-selling and most powerful WordPress table and chart-building plugin on the market. There are other good ones, but their table and chart-building capabilities quickly become inadequate as you go down the list of what wpDataTables can do that most others cannot.

wpDataTables key features and capabilities:

The ability to create interactive and responsive tables and charts;
The ability to create frontend editable and easily maintainable tables and charts;
The ability to rapidly process massive amounts of data that come in various formats and from various sources;
The ability to build tables and charts using real-time data.

You can also brighten up or improve a table or chart’s readability by highlighting or color-coding key information.

Click on the banner to find out more about what this plugin can do for you.

4. LayerSlider

LayerSlider is not for sliders only. This multipurpose WordPress tool can also be used to create eye-catching animations and engaging content.

Add a little spice to a stale website;
Create popups with stunning effects to interact better with visitors;
Avoid coding, since LayerSlider is drag and drop.

This popular design tool has been assisting web designers for nearly a decade and serves millions of active monthly users.

5. Amelia Booking Plugin

Amelia is a user-friendly WordPress booking plugin you can use to manage your appointments and events on a single platform.

Clients can instantly book, change, or cancel appointments online 24/7;
Employees and customers can manage meetings, appointments, and events from their own dashboards;
Amelia can be integrated with Zoom to conduct training or consultation sessions;
Amelia can also create packages of services with discounts and validity periods.

Amelia can service multiple business locations.

6. Uncode – Creative Multiuse & WooCommerce WordPress Theme

With its more than 80.000 sales to date, Uncode has become one of ThemeForest’s all-time best sellers.

You can create custom layouts and designs with Uncode’s Dynamic Content feature and use them as templates for category pages;
Uncode features the WooCommerce Product Builder, custom Checkout, Cart, My Account, Quick-View, etc.

Uncode has a comprehensive library of tutorial videos and a showcase of user-created websites that is well worth visiting.

7. Total WordPress Theme

Created with perfection in mind, Total is nonetheless an extremely user-friendly WordPress theme.

This drag and drop website building tool’s extreme flexibility allows users to create any type or style of website;
The WPBakery page builder is accompanied by an assortment of custom modules;
Total is RTL and Translation-ready and easily integrates with WooCommerce;
Total is developer-friendly.

Click on the banner to learn more.

8. Dr. Link Check

Dr. Link Check saves you the inconvenience of having to periodically conduct a manual search of your site for broken links.

Dr. Link Check inspects for:

Broken links and improper URL formatting;
Blacklisted malicious content links;
Websites that do not contain any valuable content, including ad-only sites.

Dr. Link Check publishes downloadable daily, weekly, or monthly reports.

9. Mobirise Website Builder

Mobirise is not only a top tool for creating fast, responsive, user-friendly websites. It also has the advantages of being offline. Mobirise is also free.

Factors that contribute to Mobirise’s excellent performance include:

Google Amp and Bootstrap 4 frameworks;
Professionally-crafted website templates, popups, sliders, and eCommerce features;
Mobirise is all drag and drop.

Click on the banner to download your very own copy.

10. 8b Website Builder

When a website builder is fast, free, responsive, user friendly, and Google-friendly as well, it is certainly worthy of consideration.

The 8b website builder:

Allows you to create websites at home or on the go on any device;
Features templates and website sections designed to get projects off to a rapid start;
It gives your site a Google ranking with a couple of clicks;
It can be hosted wherever you want.

Download your copy now.

11. WHATFONTIS

WhatFontIs, with its database of more than 700K commercial and free fonts and font-finding AI functionality enables you to identify fonts from images you upload.

This top-of-the-line font-finding tool:

Identifies an uploaded font 90% of the time;
Gives answers in seconds;
Identifies cursive fonts (the letters in the image must be separated);
Displays 60+ similar fonts for each uploaded image.

12. Litho – The Multipurpose HTML5 Template

Litho is a responsive multipurpose Bootstrap 4 HTML5 template that gives startups, design agencies, and other businesses an ideal website-building starting point.

Litho’s features include:

Cool selections of ready-made home pages, inner pages, and template blocks;
Page styles for portfolio, shop, and blogging sites;
Sliders, banners, forms, and other creative design elements.

Litho offers 5-star professional support.

13. XStore – The Most Customizable WooCommerce Theme Ever

XStore may be the best tool anyone could have at their fingertips when looking for a fast and easy way to create a high-performance eCommerce website – for only $39.

XStore’s key features include:

100+ customizable ready-to-go shops;
$500+ worth of premium WordPress plugins;
A Single Product builder and a Header builder.

14. Goodiewebsite

GOODIE’s web development platform assists clients who are eager to get a professionally-coded website quickly up and running.

GOODIE’s services focus on:

Web designers seeking a development partner;
Startups looking for ways to test their ideas and concepts;
Small businesses seeking an online presence or improvement of an existing one.

GOODIE’s specialties include 1-10 page, WordPress, and eCommerce websites.

15. Heroic Inbox

There are several excellent reasons for letting Heroic Inbox manage your business’s departmental email inboxes.

They include:

Encouraging efficient staff collaboration on email assignments and responses;
Helping staff members accomplish and maintain Inbox Zero status;
Tracking key team performance metrics.

Two key Heroic Inbox features are its smart workflows and a fast and friendly UI.

Every web designer owns a toolbox of tips and tricks they use in their website building projects. Even when a toolbox is superbly stocked, it is always challenging to keep it up to date. Doing so requires maintaining a knowledge of the latest and greatest web design resources and tools—some of which you may need to meet ever-changing industry demands.

This article features the top tools & resources for designers and agencies for 2021. Choosing one or more of them could not only help you stay on top of your game but could even make your day.

Source

The post 15 Useful Tools & Resources Worth Checking Out first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

31 mars 2021/par Service comm.

20 Best New Websites, March 2021

Actualités, Actualités

This month’s collection of the best new websites launched or updated in the last four weeks features color, and more color, and then — just for good measure — a bit more color. Yellow is a hue of choice, but you’ll also find burnt orange, rich purples, and greens and blues in equal measure. What is missing is the tech-blue of years past, replaced with something altogether more Mediterranean. Enjoy!

Cevitxef

This site for Cevitxef ceviche restaurant in Bilbao creates drama with oversized text, heavily styled photography, white on black, and lots of movement.

Katarina Markina

Katarina Markina’s portfolio site is bright, bold, and full of character.

How & How

Digital design agency How & How keep things light and clean for their own website.

Caleño

Caleño makes non-alcoholic distilled spirits. Their relaunched website is bright and joyful, reflecting the character of the brand.

Staffan Sundstrom

Art director and photographer Staffan Sundström has a simple portfolio site that matches his work’s calm, minimalist aesthetic.

Modyn

Modyn is a product design agency with a focus on mobility. The flexing of logo text and occasionally other elements adds a nice touch to an otherwise simple design.

Letters from Venus

Letters from Venus celebrate people living abroad and the cultures that embrace them. An asymmetric grid creates light and space.

La Manna’s

La Manna’s makes giant pizza slices and pizza cake slices. Their site has a larger-than-life feel with a nod to the 1970s.

Singita

Singita is an ecotourism and conservation brand based in south and east Africa. High-quality photography and a warm, terracotta-based color scheme create an inviting ambiance.

MAD

Digital product design agency MAD has gone for an app-like feel to their website. There is some nice user interaction, and they stay just the right side of cutesy.

Peak

Another non-alcohol drink, Peak, has chosen the healthy angle, with further emphasis on the social. The site is colorful but minimal.

The Hiring Chain

The Hiring Chain website is part of a campaign encouraging businesses to offer employment to people with Down Syndrome. The centerpiece is a video, but the about information is clearly presented appealingly.

Stykka

Stykka’s aim is to digitize the design, manufacture, and buying of furniture. The site has a very light feel, with a simple type and good use of white space.

Crappy Explanation

Crappy Explanation is a fun microsite from design agency Zajno that links to various playlists in Spotify. As a promotional piece, it’s well done without being too flashy.

Platform Seven

Platform Seven offers career mentoring for young people. The site is well structured with a strong narrative flow and a positive feel to the color scheme.

Moth Drinks

This time the drinks are alcoholic: Moth does classic cocktails in a can. As holding pages go, this makes a statement with its black and white graphics and masking effects.

Nêô Sephiri

Nêô Sephiri is a facial oil produced from melon seed grown in the Kalahari. A nice blend of simple illustration and atmospheric photography underlines the nature angle with this product.

The Bold

Digital design studio Bold’s own site has some pleasing transitions and scrolling animation, teamed with fresh colors.

PlantoMax

PlantoMax produces medicinal cannabis from plantations in southern Europe. This is a glossy site, taking a clear step away from the usual hippy image of cannabis.

Orsolina28

Orsolina28 describes itself as a hub for dance training and creative development. Its setting in the Monferrato hills in northern Italy provides some great photography. The inline links to video are a nice touch.

Source

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

Source de l’article sur Webdesignerdepot

22 mars 2021/par Service comm.

15 Psychology Principles Every Designer Should Know

Actualités, Actualités

So, really, you’re in the business of designing websites for your clients’ audiences.

But how do you ensure you get it right? You could take what your client tells you at face value, but that’s only going to scrape the surface of who their audience is.

What you need to do is figure out how consumers think and why they respond to websites the way they do. A lot of this is already explained to us by psychology principles.

Once you memorize them, you’ll be able to design user journeys that get visitors to respond exactly as you and your client want them to.

15 Psychology Principles to Use in Web Design

We as humans think certain ways, and your design should cater to those underlying thought processes and natural responses.

Below are 15 psychology principles that’ll help you design better, more intuitive digital experiences for your end-users:

1. Aesthetics-Usability Effect

The Aesthetics-Usability Effect suggests that people equate more attractive interfaces with more usable ones. In other words, a good, modern, responsive design should always be your starting point.

2. Color Psychology

Color psychology tells us about color’s influence over how something is perceived. With color so strongly tied to emotion, you can do a lot to affect how visitors perceive a website and the brand behind it.

3. Psychology of Shapes

Just as a color has the ability to affect someone’s perception of a brand or the content they’re looking at, so too do individual shapes used within an interface. Each shape — circles, squares, triangles, hexagons, and polygons — has a unique psychological association.

4. Gestalt Principles

Gestalt Principles are a way for humans to make sense of chaotic data presented to them. So, rather than see a bunch of text, images, and space, the human brain recognizes patterns to simplify complexity.

About half a dozen principles are associated with this theory, and they’re related to factors like symmetry, similarity, and proximity.

5. Mere-Exposure Effect / Jakob’s Law

The Mere-Exposure Effect, or Familiarity Principle, suggests that people are more likely to prefer things that seem familiar.

Jakob’s Law applies this psychology specifically to the internet user experience. It suggests that users expect your website to work the same way as the other sites they spend their time on.

6. Von Restorff Effect

The Von Restorff Effect, or Isolation Effect, describes what happens when someone is exposed to identical stimuli, and then a unique element is introduced to the fold. It’s the outlier that will most effectively grab their attention.

7. Selective Disregard

Selective disregard is a type of “blindness” users develop to anything seemingly irrelevant to their main goal. This often occurs when a design or marketing trend grows stale — like websites that use the exact same cookie consent banner.

8. Hick’s Law

Hick’s Law states that the number of choices a person has to make will increase the amount of time it takes to make a decision.

This is a fundamental principle to pay attention to on ecommerce sites as you want to speed up the decision-making process, not slow it down.

9. Loss Aversion

Loss Aversion states that decision-making is more commonly driven by avoiding losses than acquiring gains.

If your website or the content within it gives visitors any reason not to trust it or feel confident in taking action, you’re more likely to see high abandonment rates than conversions.

10. Paradox of Choice

The Paradox of Choice is a response to the problem posited by Hick’s Law. It suggests that the reduction of choices makes consumers feel less anxious, which, in turn, increases confidence and satisfaction with purchases.

If your site suffers from high cart abandonment or product returns, the paradox of choice would be a useful principle to leverage.

11. Miller’s Law

Miller’s Law, also referred to as Cognitive Load Theory, has to do with memory capacity. On average, people can only have about seven items stored in their working memory at any given time.

This psychology principle encourages the reduction of options and the general reduction of content to improve focus and decision-making capabilities.

12. Feedback

Feedback is one of the principles of learning and plays a big part in interaction design.

Feedback is what designers use to tell people when they’ve made progress towards a goal or achieved it. You can also use it to teach visitors how a website will respond to their actions, which encourages faster and more confident engagements with your website.

13. Extrinsic Motivation

There are two types of motivation. Intrinsic motivation is an internal one, whereas extrinsic is external.

It’s Extrinsic Motivation that plays a role in getting users to complete more tasks online. As a designer, you have to make sure these kinds of “rewards” are obvious.

14. Social Proof

Not so much a psychological principle as it is a psychological phenomenon, Social Proof or Influence, suggests that people will copy the actions of the masses. It also refers to the assumption that the truth lies with the majority.

This is why customer reviews, client testimonials, and user-generated content have become so useful on websites.

15. Peak-End Rule

The Peak-End Rule states that people will judge an experience based on their very first and last impressions of it. This is somewhat related to the Serial Position Effect, whereby people will remember the first and last items in a group.

So, this is something to remember when you build out the top and bottom of each page as well as the start and expected end to the user journey.

Wrap-Up

Want to build better websites? Then, you need to design from the end users’ perspective.

The best place to start is with psychology principles, as they’ll tell you how most consumers think and what motivates them to respond. If you understand this inherent cause-and-effect relationship, you can design websites that elicit the right kind of response from your visitors.

Source

The post 15 Psychology Principles Every Designer Should Know first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

17 mars 2021/par Service comm.

Getting Started With Inclusive Web Design

Actualités, Actualités

A key part of designing successful websites for clients is making sure that as many end-users as possible can access and enjoy that site.

So, what if you discovered that around 1 billion people couldn’t enjoy your designs? Even if those people manage to click on a link and visit the website that you create, they might not be able to understand what’s being sold or navigate to the checkout page.

According to statistics from the World Bank, there are 1 billion people with disabilities worldwide. That’s 15% of the total population of the globe.

Despite this, many designers fail to consider customers with differing abilities when creating an engaging app or website. Unless your client explicitly tells you that they’re supporting customers with disabilities, you might even not think about those users at all.

Learning how to embrace the concept of inclusive web design means that you deliver better results to your clients; the more customers your clients can reach, the more praise and positive reviews your designs will get.

So, how do you introduce accessibility in your design choices?

What Is Website Accessibility?

In broad terms, inclusivity refers to activities or behaviors that empower marginalized people in society. Designing for inclusivity means making your content more accessible to anyone dealing with a mental or physical issue that may make it harder for them to use a traditional site.

Ultimately, accessibility is one of the main goals of an inclusive design strategy. When you make websites or applications more accessible, you tweak aspects of your UI and code to make the site as approachable and usable as possible to people with certain limitations.

According to the Web Accessibility Initiative, many modern sites and web tools are designed without the needs of those with disabilities in mind. This creates accessibility barriers that make websites almost impossible for some people to use.

Here are just some of the different types of disability that can affect the way end-users interact with a website or app:

Cognitive issues: Affecting understanding and making it harder to navigate sites;
Auditory issues: Preventing customers from listening to videos and audio content;
Neurological issues: Making certain terms and actions more difficult on your site;
Physical issues: Making it hard to swipe or tap certain tools;
Speech problems: A common issue with voice UI designs;
Visual issues: Preventing a positive experience on highly visual sites.

Web accessibility can also be about making life easier for people who encounter problems in particular situations. For instance, those with muscular problems might have a harder time using buttons and links on a small screen.

So, how do you make your designs more accessible?

Know Your Audience

There’s more to inclusive web design than making your fonts a little bigger and hoping for the best. To deliver a truly accessible experience, you need to know the people and groups that your client is targeting. Spending some time going through your customer’s user personas and asking them questions about those with a disability can help you make informed decisions.

For instance, the Microsoft Inclusive Design toolkit asks designers to recognize exclusion, examining the parts of their website that might be inaccessible, and learn from diversity.

Before designing anything, ask yourself whether you can:

Address any unique needs, like sight issues or hearing problems;
Replace traditional solutions with something more unique. For instance, rather than relying on colors to highlight a portion of text, could you use font-weight instead? This might be ideal for someone with color blindness;
Create something that appeals to both customers with and without disabilities.

Design a Clean and Clear Layout

Any website design should be focused on clarity first.

Whether you’re designing for inclusivity or not, the aim should be to deliver as much of a simple and straightforward experience as possible, avoiding any web design sins along the way.

For instance, no-one likes a messy design full of unreasonable navigational signs. You need a site full of understandable links, buttons that are easy to click on any screen, and large fonts that are easy to read.

Whenever you’re creating a new element for a website or app, ask yourself how you can make life easier for customers from all backgrounds. For instance, Parramatta park uses excellent contrast, clear fonts, and ideal element sizing to ensure that its website feels as easy to use as possible for customers.

Notice how the buttons are clear and easy to press. The colors are bright and engaging on any screen, and the navigation is simple to follow too. Remember, when you’re designing an inclusive prototype:

Test navigation options and ensure they’re easy to use;
Don’t overcrowd the screen, remember that less is more when reducing cognitive load;
Make sure that your design remains easy to use on any screen.

Simplify Language

The visual elements on an inclusive website need to be as simple and easy to understand as possible. However, it’s important not to forget about the way that you handle the written word too.

Using simple terms instead of complex industry jargon can make a massive difference to those with reading issues. There’s also typography to think about, from the color and contrast of your words against your chosen background to the font’s clarity.

Remember, suboptimal design with both imagery and language affects those without disabilities too. Following basic rules for simplicity delivers a better experience for anyone that visits your site.

Make sure you:

Underline, bold, or re-size links for visual contrast;
Enforce proper line spacing with around 1.5x the font size;
Enable consistent paragraph spacing;
Use simple language to reduce cognitive load;
Describe abbreviations when using them;
Use clearly-worded headings to structure content logically;

Look at the design choices for text on the Nomensa website, for instance. Plenty of white space makes content easier to read. Simple words are understandable and engaging. Even the font choice mimics the logo while offering readability.

Optimize Web Design Colors

Inclusive web design trends will come and go. However, color and contrast will always be essential to your decisions.

By making sure that your design elements meet the minimum color contrast ratios defined by the WCAG means that you’re supporting readability for visually-impaired users and improving experiences for customers that aren’t visually impaired as well.

For designers who need extra help in this area, tools like Stark help measure color contrast. This tool also offers a range of other tools intended to support accessibility too.

Remember, the minimum ratio you need to access will depend on the element that you’re designing. The WCAG recommends the following guidelines:

3:1 ratio for graphical objects (charts);
3:1 ratio for focus, active states, and hover;
3:1 ratio for clickable items and form components.

While you’re working on your color contrast strategies with apps like Stark, make sure that you consider the needs of users with color blindness too. 4.5% of the world doesn’t see color the same way as everyone else. If you’re finding it difficult to achieve the right contrast while sticking to your customer’s brand guidelines, try underlining and bolding elements too.

Consider Video and Audio Elements

Finally, these days, more companies are opting to embed video and audio content into their sites. These visual and auditory tools can offer useful information about a brand and what it does. However, you could struggle to deliver vital information to some customers through video and audio alone.

Captions for video content could be essential for those with hearing loss. You may need to think about adding transcripts to pre-recorded videos that people with hearing impairments can access. These transcripts and captions are also helpful for anyone who doesn’t have access to audio on smartphones or computers.

Transcripts can also help those with visual impairments by giving a text-to-speech tool something to describe to your user. That way, everyone gains useful information. Look at this captioned video from the University of Washington, for instance. It ensures that everyone can understand what’s going on in the content. If you add transcripts to your website pages for clients, you could also help them benefit from improved SEO too. Transcripts deliver more keyword-ranking opportunities than videos and podcasts on their own.

Design for Accessibility First

For designers to excel at delivering truly inclusive UI environments, they need to become as good at creating websites for people with disabilities as they are at creating interfaces for people like themselves. As designers, we try to be as inclusive as possible, but it’s easy to get caught up thinking about making a website easier to use for us.

If you can step into the shoes of someone that isn’t like you, and think about uncommon needs first, then you may find that you deliver a stronger, more engaging experience for every user.

For instance, rather than designing a website for someone with the same visual needs as you, then thinking about making tweaks for those with color blindness or vision issues, think about the needs of those with disabilities first.

You can learn more about putting uncommon needs first by checking out Vasilis Van Gemert’s blog post on the “Method of Crisis.”

Accessibility is Good for Business

Inclusive web design, or designing for accessibility, is all about maximizing the potential audience that your clients can earn. Whatever situation end-users find themselves in, you should ensure that you’re taking advantage of inclusive design.

If you can prove to your clients that you can deliver for all customers’ needs, you can unlock a much larger audience and many more opportunities.

Source

The post Getting Started With Inclusive Web Design first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

15 mars 2021/par Service comm.

8 Best Premium Stock Image Sites for 2021

Actualités, Actualités

Stock images are an essential tool for anyone working with clients who can’t afford to hire a photographer for a bespoke shoot, and with the cost of photography shoots running into thousands of dollars, that’s most clients.

Last month we looked at the 10 Best Free Stock Image Sites for 2021, and this month we’re focusing on the premium end of the market.

Paying for stock doesn’t guarantee that you’re getting a higher quality product than the free alternative, but the higher quality product is rarely free.

Ultimately, the right image is the right image, regardless of price. These are the best places to start your search in 2021.

1. Stocksy

Stocksy is a tremendous site with a slight edge to its imagery. There’s a certain cool vibe to the images featured on Stocksy. If you’re looking for a stock image that doesn’t look like a stock image, this is a great place to begin. Its prices range from around $15 for a small web image to $1000s for the image’s exclusive use.

2. EyeEm

EyeEm is a great source of editorial-style images. It has some excellent categories that are geared towards finding images instead of categorizing the collection. Pricing starts at $35 per image, with discounts for image packs. EyeEm has recently introduced the option to book a photoshoot — for clients ready to pay for custom images.

3. Getty Images

It’s impossible to make a list of stock image sites without including Getty Images. The stock behemoth not only has one of the largest collections of stock images but owns several subsidiaries. Loved by news media for its comprehensive coverage, if you’re looking for a particular stock image, try Getty. Getty’s a mid-price supplier with prices for small images starting at around $75.

4. Death to Stock

Death to Stock is all about leveraging the stock industry to fund photographers. These are photographs that photography professionals admire; there’s no filler whatsoever. Subscriptions for creative professionals start from $33/month. There are 100+ new images added to the collection monthly, meaning it’s still small, but if you want something truly authentic, consider Death to Stock.

5. Cavan Images

Cavan’s focus is on building a broad range of photographers, which has produced an outstanding set of diverse images. The curated collections, which are more editorial than commercial, are powerful. Cavan also offers a great support service in case you need help tracking down a particular image. Prices vary but start from $50.

6. Offset & Shutterstock

Shutterstock is one of the best-known stock collections on the web, with over 300 million images. Offset is a subsidiary of the much larger Shutterstock; it’s a high-end version of Shutterstock, with slightly elevated prices to reflect the higher quality. Shutterstock prices start around $2.50/image, Offset’s start around $300; that’s the price you pay for having someone pre-vet your options.

7. Westend61

Westend61 has a smaller collection, but its images are all consistently high quality. Westend61 is particularly useful for designing banner images because the images are very commercial, with authentic-looking people and lots of eye contact. Prices per image start at approximately $25.

8. iStock

iStock was originally independent but was bought by Getty. iStock offers both credit, and subscription options starting around $2.50/image. Although you won’t find everything you’ll find on the larger Getty site, it’s worth checking to see if the image you want is here.

Source

The post 8 Best Premium Stock Image Sites for 2021 first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

3 mars 2021/par Service comm.

Top 9 Tips For Optimizing Images in 2021

Actualités, Actualités

The ‘need for speed’ is an essential item on every website’s bucket list these days. And why not? Enhanced speed is directly responsible for converting traffic into paying clients.

Anyone in any industry wishes to boost their website’s loading speed, providing an improved user experience. Plus, don’t forget that escalated site speeds also escalates the website’s ranking to more competitive spots on the search engine result pages and improves core web vitals. So, how can this need for speed be achieved? The answer is image optimization.

What is Image Optimization?

Image optimization is a process of delivering superior-quality images in the appropriate format, size, and resolution while keeping them at a compressed size. Image optimization, if done right, improves not only a website’s performance but also certain other metrics like:

Page loading speed;
SEO ranking;
Conversion rate;
User engagement;
User experience;
Resource download time.

However, the image optimization process can be accelerated for better efficiency if some modern tips are followed. ImageEngine, with its years of experience in the image optimization industry, has cherry-picked some tips that can help businesses in the year 2021 and beyond.

Tips for Perfect Image Optimization in 2021

In this article, the top five tips to optimize images have been outlined to help you maximize business opportunities. All the tips included are backed by comprehensive research and years of experience in the image optimization industry.

The Right Format Matters

Selecting the right image format matters a lot in the optimization process because every format is meant to serve a specific requirement.

JPEG: Best for still images, real-world images, and complex coloring;
PNG: Best for web images like logos and flat images;
GIF: Best for low-resolution images, animated graphics, small icons, and simple images — however, it is not advisable to go with GIF format but rather use mp4 or a webp instead;
TIFF: Best for high-quality and large-size print graphics;
WebP: A modern image format that offers superior compression while maintaining great quality.

Choosing the right format reduces bandwidth consumption for an improved webpage loading speed. However, a new format has joined the club: AVIF, that covers all the above image formats’ good qualities and surpasses even WebP while maintaining an excellent compression ratio. AVIF provides almost 50% savings in size when compared to JPEG format.

Serving images in the next generation formats like WebP and AVIF is a trending practice these days.

Go for Image Compression

Once the correct format has been selected, it becomes important to reduce the images’ size through a compression method. There are two methods of compressing images:

Lossless compression: In this compression method, all the unnecessary metadata linked with the images is removed without degrading the quality. The metadata can be erased safely while exhibiting the images on a website or application.

Lossy compression: In this compression method, the quality of the image is slightly reduced to accomplish a smaller size. The file size obtained in lossy conversion is lower than lossless compression, however, a naked human eye cannot highlight the difference between the original image and the lossy compressed image.

Never Skip the CDN

Image optimization and image CDNs are a match made in heaven. Website images not only need to be optimized but have to be delivered fast and easily as well. An optimized image is of no use if it cannot be transported quickly. An image CDN (Content Delivery Network) takes care of this need. It makes the rapid delivery of optimized images possible by reducing the distance between the online visitors and the servers.

The global image CDN also serves a ton of other benefits like:

Enabling fast global reach via cloud acceleration;
Audience segmentation (based on device viewport) becomes easy;
It saves many costs by eliminating the need to invest in separate server providers in different parts of the world;
Pulls down the load on the server to achieve reduced delivery cost;
Secure storage capacity.

The carefully engineered image CDN from ImageEngine distinguishes itself from the rest with its unique features listed below:

The images are optimized to be delivered 30% faster than other CDNs in the market;
It is easy to integrate and configure ImageEngine CDN;
The images are automatically optimized to the relevant format as per the user’s viewport size;
The images can be delivered in next-generation formats such as AVIF and WebP;
The images delivered have reduced size (irrespective of the format) and outstanding quality at the same time;
ImageEngine’s extensive global CDN network provides support for HTTP, HTTP/2, WAF, and DDoS protection.

Set-up Browser Caching

The “Leverage Browser Caching” warning displays on the Google PageSpeed Insights tool when there is no caching rule in the place, or the expiration time has been set too low. In simple terms, the warning is a suggestion to improve website speed.

Browser caching instructs the visitor’s browser to save some specific files on the visitor’s local system instead of downloading them repeatedly. For example, a visitor needs to download the logo image of a website on the first visit. However, after every subsequent visit, such a visitor would load the logo file from the website’s local cache, provided that the browser caching has been enabled. The result? Faster loading because the visitor is no longer required to get everything from the website’s server directly. Browser caching can be used for images and many other types of files like statistical resources and object data.

There are many ways to leverage browser caching but simply adding the following lines of code to the .htaccess file is the most effective one:

Browser caching stores the images for a decided interval of time for easy and quick accessibility. A custom timeline or industry standards can be followed for this purpose. The timeline in the above-shared code snippet is one year.

The .htaccess file can be found with the help of an FTP program for connecting to the root directory of the website’s server.

Disable Hotlinking

Hotlinking means when an individual or business copies the URL of an image, which belongs to another website, and embeds it on their website. This results in the image being displayed as if it was an owned content. Hotlinking is a next-door neighbor of copyright infringement, but despite this fact, the practice is widespread. In many cases, hotlinking is unintentional, but it can cost the original owner of the image some money. It can even affect the website’s performance if a drain of the server’s resources happens.

Optimize for Flaky Connections

If a website has a lot of content and rich images to offer, but a portion of the users visiting the website doesn’t have a reliable internet connection, then this portion of visitors would not convert. This situation is no different than any lost business opportunity. Not all website visitors have access to fast and reliable internet facilities; therefore, it is recommended to optimize image content for spotty connections.

One trusted way of optimizing the images for slow connections is compressing the images appropriately in real-time. However, even before compressing the images, it is important to determine the network speed of users visiting the page and then categorizing them into buckets based on connection types like 4G, 3G, 2G, or slow 2G.

But ImageEngine simplifies the whole compression process. It fetches and optimizes the images in the right format, dimension, and quality directly from the URL and then delivers such images on the website’s front-end via global image CDN.

Handling Responsive Images

A lot of traffic arrives from mobile devices, and as such, it is important to have the perfect strategy for responsive images.

If vector-based images are being used, then using SVG format would be a great way to optimize them for any viewport without worrying about sizes because SVG images are resolution-independent.
Using media queries for background images or images that have been produced via CSS is the best way to display smaller images to mobile devices.
For inline images, techniques like the srcset attribute or the picture element can be used.

srcset attribute: This attribute can be implemented on the img element for defining the images at different sizes so that the browser can select the best option based on the device characteristics like width.

picture element: This is best to be used if different images are required to be displayed based on the device’s display size.

All the aforesaid discussed options offer different ways of displaying the optimized images to visitors depending on how they view the website. MDN’s responsive image guide and Google developer’s image guide can be referred to for learning more about responsive images and using picture elements or srcset attributes.

Responsive Images

Images are required to be responsive to deliver the right optimal image for every screen size. It enhances the user experience and reduces load time. According to the browser or device in which images are viewed, images of different sizes are displayed, such as full-size, thumbnail, or featured images. To create a responsive image, you need to have different versions of the image.

The problem is to optimize a high-resolution image that looks great with details while displaying it on mobile devices; details can be missed, so instead of shrinking the image details, consider cropping or scaling down the image for mobile devices.

Advantages of responsive images:

Improve the page loading speed;
Increase your reach through smartphone responsive design;
Increase conversion and sales rate with consistent user experience;
Reduce load over the server and server memory;
Boost conversations.

Client Hints

The fundamental of Client Hints is simple — the client through a device sends the server some hints regarding the requirement. The server with responsibility serves them with the right resource according to the hint. For example, with hints, browsers ask the server for 600px images for the device layout — the image to be served based on the requested parameter. Even if the client informs that data saver mode is enabled, the server delivers identical images of a lighter version. The browser and server interact through Client Hints, the job becomes readable, shorter with the same functionality.

Client Hints with ImageEngine

ImageEngine delivers images with the required – width, DPR, and Data Saver. The responsive images are created based on client hints about width and DPR and later cover the Data Saver client hint.

Optimize Images For Retina Displays

Apple coined the term “retina displays,” which display clear and densely packed pixels to provide perfect vision from an appropriate viewing distance. Now, most smartphones and desktops deliver users a high crispy viewing experience. Apple with Retina squeezed four times the pixels into the same space to create a density of 326 pixels per inch (PPI), making the displays smooth.

Why Optimize Images for Retina?

The average screen pixel density is quite low, so the web-based standard images need to include 72 PPI to cover a certain height and width.

We need to maintain the appropriate density of pixels. Otherwise, the image will cram or get stretched. As a result, a fuzzy image is created with jagged edges that distract the viewer from your brand. To solve the problem, Retina class displays came into the role. They increased image resolution, optimized high pixel density in small space, and even displayed images decently over large screens.

People these days browse from a different device; most users access images from smartphones rather than desktops. So you need to optimize the image for Retina displays.

Wrapping it up

There are many tips and tricks to optimize images, but of all these tips, using a CDN has proven to be the most effective and long-term solution for many businesses all across the globe. Image CDNs automate the optimization process for a business to focus on its core activities properly. The good thing is that it is not all expensive to integrate image CDN. It is easy to get started with and generates the results in a short space of time.

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

Source

The post Top 9 Tips For Optimizing Images in 2021 first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

4 février 2021/par Service comm.

3 Essential Design Trends, February 2021

Actualités, Actualités

It’s hard to believe we are more than a month into 2021 already. But that means more trends to dive into this year, right?

So far, the biggest trend of 2021 in website design is an overall lack of people in imagery. It’s not that surprising with a worldwide pandemic happening, but it can mean that designers are branching out in other ways to enhance visual interest in their designs. Here’s what’s trending in design this month.

1. Non-Traditional Nav

An interesting way to create visual interest can be to mix up the location, size, or placement of the main navigation menu.

While it can be hard to think about not using a top navigation element or a corner placement for a hamburger menu or icon, it is a solid option depending on the number of menu items and surrounding content.

And there are so many options when you start to think about it. Each draws the eye to different locations on the screen because it is unexpected and different.

Tilda uses a navigation menu anchored to the right side of the screen. But as you move through the almost file folder-style tabs, the flip to the right side of the screen. It has an authentic feel that’s interesting without being overwhelming to the user.

Cmentarz Łyczakowski also has a navigation element on the screen’s right side, but it is a closed, red frame with only a hamburger icon. It’s a rather unusual use of space for a navigation element, but it pulls together with the overlapping video box. Clicking the hamburger navigation pulls up a full-screen menu from the bottom (also a slightly different approach) with oversized clickable elements to move throughout the website.

Global Sense shifts the focus from top page navigation to the bottom of the home page. What makes it especially nice is that the navigation bar floats to the top and sticks on scroll. This ensures that while the homepage has a different look and feel, users don’t get lost without navigation as they move through the design.

2. Signature-Style Marks

Website designers use signature-style marks – from logos to headlines – to add a more personal touch to their website projects. And the result is a collection of stunning scripts and novelty typefaces.

So how can you replicate this trend?

You don’t have to digitize your actual signature. (That’s probably not the best idea from a security perspective.) But you can find a font that evokes the same feeling as your own handwriting or contract someone to create an experimental typeface for you.

The portfolio of “Zeus” has a beautiful handwriting style element layered over a dark geo-background. (Can you see the outline of the J and O from the signature there?) The signature-style mark works so well because everything is simple and understated, but with depth and dimension elements.

Another portfolio site, this one for Marco Rezende, uses a signature mark as the site logo. It’s an interesting divot that gives just a little more panache and flair to the overall design scheme to feel weighty and professional. Also, note that the designer used a mostly dark background with a white (light) mark. That’s also quite a common visual theme with this website design trend.

On the other end of the spectrum of this trend is Airport Restaurant. This isn’t a personal site, but the signature-style mark on the homepage gives it a more personal feel. It is almost reminiscent of signing the check after you eat. The additional use of color and size give this treatment a visual boost that helps propel the design forward.

3. Fluid Shapes

Using different types of shapes to create a visual theme has been popular for a few years. Most everyone probably has experimented with some geometric pattern or background by now.

Shapes are taking on a more fluid feel now, and much of that is due to adding hints of animation to shapes and backgrounds to create more liquid looks or harmonic flow.

This trend can work for bigger visual elements such as image frames or the overall homepage art element or smaller patterns or layering effects. The overall goal with fluid shapes is to create something smooth and almost seamless so that users aren’t focused on it but delighted by it.

Each of the three examples below takes a different approach to this website design trend.

Eder Anaya has a rotating rectangle with a fluid animation inside. The overall shape itself is also animated and changes from a rectangle to a trapezoid-type shape to a flat plane.

Wave Lab might have one of the coolest fluid shape animations out there. With images inside the shape, plus a colored outline, plus a subtle bounce, you’d think this is too much for a single element. But it works thanks to plenty of white space and a generally minimalistic aesthetic otherwise. The cleverest part is that one of the shapes is the “W” from the brand logo.

The Bulleit Group also uses fluid shapes but sans-animation. Animated elements are surrounding the shapes but not the shapes themselves. The design’s overall simplicity is intriguing, and the shapes create interest in a place where it might have been difficult otherwise. It’s also nice that they use this shape theme throughout the design and not just on the home screen.

Conclusion

How are you working with fewer images of people? Or is it something you are ignoring altogether with your website projects? Make sure to share some of the ways you are designing this year with me on Twitter, @carriecousins.

And keep those trends coming! It’s so much fun to explore new design elements.

Source

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

Source de l’article sur Webdesignerdepot

1 février 2021/par Service comm.

Build a REST API with Node.js and HarperDB

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

If you are building an application using Node.js, it can get a little overwhelming since there are a variety of databases to choose from and different ways to build APIs. One way to reduce development time and focus on the problem you are trying to solve is to use a Database as a service to store the data. The advantage of this approach is to use a cloud database system without purchasing hardware which can be cost and time-effective.

One such database service is HarperDB Cloud. To build REST APIs rapidly this service allows us to perform all database operations using a single endpoint. It supports a variety of programming languages such as JavaScript, Java, Python, and so on. Some of the features of HarperDB are the following:

Source de l’article sur DZONE

31 janvier 2021/par Service comm.