Simply put, users don’t read a web page; they scan it for individual words and sentences.

A typical pattern shown in eye-tracking reports is that users will rapidly scan a page, scrolling down to do so. Then either hit the back button and pump your bounce rate, or scroll to the top and re-engage with the content.

Even when content, volume, and quality tick all the user’s boxes, and they choose to stay on your site, they still don’t read; they scan; a slightly deeper scan, but still a scan.

As a result, it’s vital to design websites to be easily scannable, both in a split-second scan to decide if your page is worth the reader’s time and on a second or third pass.

Clarify the Page’s Purpose Immediately

Every page should have a primary goal. The majority of the time, that goal is embodied in a CTA (Call to Action).

The good news is, if your SEO (Search Engine Optimisation) has gone to plan, your goal (i.e., to sell something) and your user’s goal (i.e., to buy something) will align. By clarifying the page’s purpose, you can show the user that your goals align.

You can be experimental if you’re an established company and the user knows what to expect. But if you’re new to the market or have a lower profile, you need to conform to established design patterns. This means that a SaaS should look like a SaaS, a store should look like a store, and a blog should look like a blog.

Including your CTA above the fold — which in the context of the web, means the user doesn’t have to interact to see it. Doing so makes it easier for the user to progress and clearly tells the user what you are offering.

The landing page for next month’s Webflow Conf 2022 clarifies the page’s content, with a clear CTA above the fold.

Employ a Visual Hierarchy

The Von Restorff effect states that the more something stands out, the more likely we are to notice and remember it.

Visual hierarchies are excellent for guiding a user through content. HTML has the h1–h7 heading levels — although, in reality, only h1–h4 are much use — which gives you several levels of heading that can be scanned by different readers scanning at different rates.

For example, we know that subheadings have little impact if a user diligently reads the page from top to bottom, but they are excellent for catching the eye of skim readers.

Amnesty uses very a very simple hierarchy, the only change for its subheading being increased weight. But it is enough to catch the user’s eye.

You can also create visual hierarchies with other forms of contrast; weight and color are often employed in addition to size. For accessibility and inclusive design, it’s wise to combine visual indicators when creating a hierarchy; for example, headings are usually larger, bolder, and colored.

Use Negative Space

Imagine a person standing in a crowd. Let’s say they’re wearing a red and white striped jumper and a red and white bobble hat — pretty distinctive. But if there are hundreds of other characters around them, they might be hard to spot.

Now imagine the same person dressed the same, standing on their own. How long will it take you to spot them? Even without the stripy outfit, it’s not much of a challenge.

Elements in isolation are not only easier to spot, but they pull the eye because the negative space (sometimes referred to as white space) around them creates contrast.

When using negative space, the key is to give elements enough room to breathe and attract the eye without giving them so much room that they are disassociated from the rest of your content.

Across its site, Moheim uses negative space to highlight UI elements while grouping associated content.

Use F Patterns

Users scan a page using either an F-pattern or a Z-pattern.

Because users scan your page in predictable ways, we can employ layouts that cater to this tendency.

Designers have been aware of F and Z patterns for some time, and because they’ve been used for so long, they may be self-fulfilling, with users being trained to scan a page in this fashion. However, both patterns are similar to how eyes travel from line to line in horizontal writing systems.

Whatever the cause, by placing key content along these paths, you increase the chance of capturing a user’s attention.

Kamil Barczentewicz uses a beautiful, natural layout that also conforms to a classic F pattern.

Include Images with Faces

Images are a great way of conveying brand values and making a site engaging. But when it comes to catching the eye of a user scanning your design, the best images include faces.

For example, a testimonial with an image of the customer will catch the eye more than a text-only testimonial.

The Awwwards Conference uses an animated computer with a face to capture attention. And large images of speakers making eye contact.

This is almost certainly due to social conditioning; we see a face, and we engage with it to see if it is a threat or not. Most of us naturally look to expressions of emotion to understand situations, and the distinction between a real-life person and an image hasn’t made its way into our mental programming yet.

You don’t need to use photos. Illustrations are fine. The key is to ensure there is a face in the image. That’s why illustrations of characters perform so well.

Copy Print Design

Print design is centuries older than the web, and many print applications, from newspapers to advertising, developed design elements to catch the eye of readers scanning the design.

Subheadings, lists, blockquotes, and pull quotes all catch the eye. Introductory paragraphs in a larger size or even italics draw users into the text. Shorter paragraphs encourage users to keep reading.

Horizontal rules used to delineate sections of text act as a break on eyes traveling over content with momentum. They are a good way of catching a scan-reader who is losing interest.

You can use a horizontal rule or break up your layout with bands of color that divide content sections.

Omono uses horizontal bands to highlight different sections of content.

Mass, Not Weight

We often discuss design elements as having weight; font-weight is the thickness of strokes.

But it is more helpful to think of design elements as having mass; mass creates gravity, pulling a user’s eye towards them.

The trick is to design elements with enough mass to attract the user‘s eye when scanning at speed without forcing the user to change how they engage with your content.

Featured image via Pexels.

The post How To Make Your Designs Scannable (And Why You Should) first appeared on Webdesigner Depot.

This month, the web is dominated by animation. Designers are cramming in motion in unexpected ways. And it’s fun to explore. Here are 20 of the best new sites on the web this month. Enjoy!

Bannach

Bannach is a German furniture brand. Its products are colorful and geometric, so it makes sense that when you scroll down to the collection, the thumbnails begin as pixel blocks and animate into product photography.

Fornasetti Profumi

Fornasetti Profumi takes a different approach to motion. It uses video to emphasize stillness to promote the calming qualities of its candle products.

The Other Side of Truth

The Other Side of Truth is a superb exercise in utilizing the web for a cause. It presents facts on the Russia-Ukraine war, but the standout feature is the toggle switch that, instead of light mode-dark mode, toggles facts and Russian state propaganda.

Glasfurd & Walker

Glasfurd & Walker is a portfolio site for a design agency. So far, so standard. However, it sets itself apart because it’s slightly bigger than the browser and swerves left and right with your mouse movement.

Sirup 5th Anniversary

Sirup is a Japanese singer-songwriter, and to celebrate the fifth anniversary of his first hit single, his record company has put together this awesome maximalist micro-site that uses type, motion, and art direction to capture his style.

Fitzjohn’s

Fitzjohn’s is a slick site for a new apartment complex in the Hampstead area of London. It uses a refreshing modern color palette and calming animation to take the edge off the frankly ludicrous price tag.

Persepolis Reimagined

Persepolis Reimagined is an awe-inspiring WebGL tour through one of the most important cities in ancient Iran. Make sure you tour it on a large screen. It’s hard not to be wide-eyed with wonder.

JaM Cellars

JaM Cellars is a Californian wine brand that’s pitching to bachelorette parties. With names like Butter, and Sugar, it’s not the most sophisticated tipple, but yellow, we love a yellow site.

Danielle Levitt

This portfolio site for film director and photographer Danielle Levitt features samples of her best work scrolling past the viewport. There’s a clever switch of thumbnail and background color when you scroll down to the contact details.

Propel

From total color energy to Apple-levels of minimalism: Propel is a slick, animate-on-scroll site for a marine motor brand selling an outboard and inboard motor. The animated masks on the images are a nice subtle touch.

Standards

Standards is a site for a SaaS that helps organizations create, maintain, and share brand guidelines. It uses subtle animation, video of its UI, and compelling copy to sell its approach.

Chris Carruthers

The portfolio site for Chris Carruthers is deliberately self-indulgent with scrolling text, clipped images, and scroll-jacking, but it’s also delightful to peruse.

Theodore Ellison Designs

We don’t often see colored glass in real life, but the play of light on stained glass is beautiful. This site for Theodore Ellison Designs uses video to bring the effect to the web.

Owomaniya!

The Owomaniya report for 2022 uncovers the state of gender diversity in the Indian entertainment industry. Presented in the style of infographics, the information is brought to life by animation.

Meetings

Meetings is a French events company. Its site uses an animated collage approach to showcase its services, and animated text to pull you into its content.

Blakeney

Blakeney invests in African companies on behalf of institutional investors. Its site is typical of the financial industry, but it uses animation to lift it to a higher level of interest.

Becklyn

Becklyn is a digital design agency. Its portfolio site uses animated text, expanding image masks, and video to guide us through its site and app design approach.

Cabi

Cabi is a brand of Japanese condiments with a typically Japanese feeling site. Bright colors, a slowly scrolling slideshow of dishes, and editorial to pack shot hover effects are a great introduction to the brand.

Slantis

Slantis provides building information modeling to architecture and infrastructure providers. Its site uses animation to showcase the types of content it produces for clients.

July Fund

July Fund is a venture capital project. It takes an entirely different approach than its competitors by adopting a chaotic but enjoyable card-based design.

The post 20 Best New Websites, October 2022 first appeared on Webdesigner Depot.

A strong user experience increases your client’s chances of successful audience engagement and conversions.

What you might not realize, however, is that the strategies you use to enhance UX as a web developer or designer can also influence how the search engines respond to a website. 

Though many designers assume that SEO (Search Engine Optimization) is the work of a copywriter or content producer, there are design elements to consider too. 

After all, the definition of optimization is “the action of making the best version of a resource.”

So, how are UX and SEO connected?

Adding UX to a Successful SEO Strategy

SEO used to be easy. To stand out on the search results, you just needed to stuff a page full of as many keywords and phrases as possible. Now, it’s a little more complicated. 

Leaders in search engine development, like Google and Bing, know that they need to offer their customers excellent experiences to keep them. In this new experience-focused landscape, SEO and UX share common goals. 

Search engines don’t just want to provide customers with any answers to their questions. Instead, Google and its competitors are using everything from artificial intelligence to machine learning algorithms to ensure that search results are accurate, relevant, and engaging. 

In the same way, user experience is about providing users with easy access to the information and resources they want. 

Now that SEO is a multi-disciplined approach, UX is just one of the essential tools that makes it possible for developers to optimize their websites properly. 

Where UX Developers Influence SEO 

There are plenty of connections between UX and site indexability. 

We all know that since 2018, site speed has become a crucial ranking factor for companies in search of better search results. As a developer, it’s up to you to ensure that there aren’t too many elements weighing a website down that would prevent it from delivering fast results. 

Bounce rate is another critical factor in search engine ranking algorithms. When customers click on a website, Google wants to see that they get the answers they want. If your navigation is difficult to understand, or the correct information isn’t easy to see on a page, end-users will just hit the back button. 

Let’s take a closer look at how developers can influence SEO with their UX strategies. 

1. Site Navigation and Ease of Use

It’s no secret that today’s digital consumers crave easy-to-use sites.

A complex website with pages ranking for different terms might seem like an excellent idea for SEO. However, from a UX perspective, the easier it is to navigate your website, the more your end-users will benefit. 

According to a study from Ahrefs, well-optimized pages that rank for several keywords can be more beneficial than dozens of pages ranking for similar terms. At the same time, if the search engines have difficulty crawling all your pages due to a poor site navigation strategy, then some pages won’t get indexed. 

So, how do you improve navigation and SEO at once? Follow the proper structure for your site first, categories and subcategories on the retail page help customers find exactly what they need. A solid internal linking structure allows the crawlers to examine your website and index each essential page individually.

Keep navigation simple when designing a website for both UX and SEO potential. 

2. User-Friendly Page Layouts

There are countless cases where poor layout design and formatting disrupts SEO potential. For example, cluttering a page with too much information makes it tougher to read and index. At the same time, if your pages aren’t attractive and easy to navigate, customers are more likely to hit the back button. 

If customers come to a website and immediately leave it again, this tells the search engines that they’re not finding what they need on those pages. That means Google will bump you to a lower position on the SERPs. 

So, how do you make your layouts more UX and SEO-friendly?

• Get your category pages right: Say you’re creating a blog page for your client. They want to list all of their blogs on one main page while linking to separate locations for each article. A design that puts a large chunk of content from each blog on the main page can be problematic for UX and SEO. It means your customers have to scroll further to find what they need. At the same time, the search engines never know which words to rank that main page for. On the other hand, listing blogs on smaller cards, as Fabrik does in this example, makes sorting through content easier. 

• Leverage headers and tags: Your customers and the search engines habitually “scan” your pages. When trying to improve UX and SEO simultaneously, you must ensure that it’s easy to find crucial information quickly. Header 1 or H1 tags can help by showing your audience your website’s critical sections. Title tags also give search engines more information on the term you want to rank for. Organizing your content into a structure that draws the eye down the page also means your customers are more likely to stay on your website for longer. That shows the search engines that you have quality, relevant content. 
• Make the most of images and videos: Visual media isn’t just an excellent way to engage your audience. With videos and pictures, you can convey more vital information in a quick and convenient format. This leads to greater satisfaction from your audience from a UX perspective. However, visual content is also great for SEO. You can optimize every image with alt text and meta descriptions. That means you have a higher chance of ranking both in the main search results and the image searches on Google. 

3. Using Search Data to Inform Site Architecture

Today, SEO is less about building hundreds of landing pages for individual queries. Now, it’s more important to take a simple, de-cluttered approach with your website. SEO can determine what kind of architecture you need to create for a successful website. 

For instance, say you wanted to rank for eCommerce SEO. There are tons of related words that connect to that primary search term. Rather than making dozens of different pages that try to rank for distinct phrases, you can cover a lot of other ideas at once with a larger, more detailed piece of content. 

If a topic is too big to cover everything on a single page, then you might decide to create something called “pillar” content out of your main terms. This involves using one main page where you discuss all of the topics you will cover. Then, you design several smaller sub-pages that link back to that central pillar. 

Once again, this helps the search engines to navigate your website and index your pages while assisting the customers in finding the correct information. At the same time, you combine more pages on a website and remove anything that might be detracting from your site’s authority or not offering enough value. 

4. Improving Website SERP Listings

It’s easy to forget as a developer that a customer’s first experience with a website won’t always happen on that site’s homepage. Usually, when your customers are looking for solutions to a problem, they’ll find your website on the search engine results instead. 

This means that you need to ensure that you make the right impression here:

There are a few ways that developers can ensure the search engine listings they create for their clients are up to scratch. For instance, a reasonable title tag for each page that includes appropriate keywords is excellent for SEO and UX. A title tag lets your customers know they’re in the right place and helps them find the information they need. 

Remember, around eight out of ten users on search engines say that they’ll click a title if it’s compelling. 

Another component you have control over as a developer or designer is the “rich snippet.” Rich snippets are the informative chunks of content that Google adds to a search listing to help it stand out. You can use rich snippet plugins on a website to tell Google what kind of extra information you want to include on a page. 

For instance, you might want a company’s ratings to show up on your search results, so customers can see how trustworthy they are:

5. Local Business Rankings

When you’re creating a website for a company, it’s easy to forget about local rankings. We see the digital world as a way of reaching countless people worldwide. Local orders are easier to overlook when you have a global scope to work with. 

However, as a developer, you can boost a company’s chances of attracting the right local audience and boosting its credibility. For instance, you can start by ensuring that the correct directory information appears on your client’s website and social media profiles.

Another option is to create dedicated location pages for each area the company serves. This will make it easier for clients to find the contact details they need for their specific location. 

At the same time, pages that have been carefully optimized to rank for specific locations will earn more attention, specifically from search engines. The more of the search engine landscape your client can cover, the more chances they have to attract new customers and leads. 

Combing SEO and UX

In a world where experience is crucial for every business, it’s no wonder that UX and SEO are blending more closely together. There are a lot of areas where SEO and UX work in harmony together if you know where to find them. Improving your client’s SEO ranking with UX doesn’t just mean ensuring that their pages load quickly anymore. 

Simple strategies, like making sure a call-to-action button is clickable on a mobile page, can simultaneously boost a website’s UX potential and SEO performance. At the same time, adding images and alt text to a website provides search engines with more information while adding context to your content. 

The key to success is understanding how SEO and UX work together. If you look at SEO and UX as part of the same comprehensive strategy to give end-users a better online experience, achieving the right design goals is much easier. 

Of course, just like any strategy, it’s also worth making sure that you take the time to track the results of your UX and SEO campaigns. Examine which systems help you, and examine customers from an SEO perspective with design and development strategies.

Features image by gstudioimagen on Freepik

The post 5 Ways That UX Developers Influence SEO  first appeared on Webdesigner Depot.

Excited press releases extolling the benefits of the “collaboration” followed the news. Dylan Field, founder and CEO of Figma, said: “There is a huge opportunity for us to accelerate the growth and innovation of the Figma platform with access to Adobe’s technology…”

The reaction from the design community has been a little less enthusiastic.

The problem for the design industry is that we’ve been here before. The acquisition of Macromedia followed a period in which Adobe tried to compete, failed to update its legacy code, lost the battle, and purchased the victor. You only need to look at the number of former Macromedia products in Adobe’s stable (zero) to see where Figma’s heading.

Figma has grown faster than any of its rivals in the last eight years. It is, of course, easier to grow when you start at zero. But there’s no denying Figma is a well-managed business and probably a good investment — if not worth the $20bn that Adobe reportedly paid.

Figma’s technology will give Adobe a leg-up in the collaborative design stakes, where it is clearly lacking. And Adobe’s resources will iron out some of the kinks in Figma, especially around typography, which is, if we’re honest, a bit hacky in places.

Adobe will provide a good home (we hope) for the Figma team, who will have the opportunity for career advancement in a much wider pool of development teams.

And, of course, Figma’s annual revenue will begin to trickle into Adobe’s vault — although it may be some time before it makes a dent in that $20bn hole.

But Adobe didn’t buy Figma for its business model, collaborative technology, team, or revenue stream. Adobe bought Figma’s users, all four million of them.

Adobe‘s approach to design software is upselling. It lures you in with free apps, and when you’re engaged, it integrates them with other parts of its ecosystem until suddenly, without meaning to, you’ve agreed to a Creative Cloud subscription.

Adobe was losing customers to a competitor. And more importantly, due to Figma’s free-use approach for individuals, it was losing young customers to a competitor. If it hadn’t bought Figma, Adobe would have needed to invest heavily in its own products while providing them to freelancers for free; that isn’t viable for a company with as many commitments as Adobe.

Yes, it is entirely accurate to say that competition drives innovation, and with fewer competing apps, there is less need for companies like Adobe to build high-quality, reliable products. However, it is also true to say that a lack of competition creates opportunities for new apps.

Somewhere out there, in a dorm room, or a basement, or on a kitchen table, someone is working on Adobe’s next big acquisition. It’s probably an AR design app; we need a few more of those.

For Figma, the next 12 months will be bright as Adobe works to retain the customers it’s bought. Within five years, you’ll probably need an Adobe Fonts subscription and a Photoshop plugin to use Figma. In ten years, it will be stored in a code archive next to Freehand.

Some designers will turn to Sketch; others will turn to Affinity; some will shrug and keep using Figma; others will shrug and keep using XD.

If an app is intrinsic to your design work, it’s probably time to switch apps. Your skills are transferable. I’ve switched apps many times; some I loved, some I just needed. I’ve never encountered an app that improved my work, although plenty have improved my mood while working.

Figma took a great approach and will continue to be great until it isn’t. Tools come and go, Adobe’s acquisitions team, it appears, is eternal.

Featured image uses photos by Afrika ufundi, Andrea Piacquadio, Andrea Piacquadio, Anna Tarazevich, cottonbro, fauxels, Ketut Subiyanto, Mikhail Nilov, Moose Photos, Pavel Danilyuk, Pavel Danilyuk, Polina Tankilevitch, Tima Miroshnichenko.

The post Adobe Has Acquired You first appeared on Webdesigner Depot.

Expected to be released ahead of next month’s macOS 13, Safari 16 is packed with updates, making it one of the most capable browsers available.

For web designers, the significance is the forward momentum in web technologies that enable freer design work and fewer hacks to achieve complex layouts. Little by little, CSS recommendations are being implemented to the point that using JavaScript for layout is rapidly becoming as unnecessary as it is disliked.

Some of this was announced in June in the Safari 16 beta. But a lot has been added in the last couple of months. So here’s what’s new in Safari 16 today.

CSS Container Queries

The most exciting addition to Safari 16 is CSS Container Queries.

It is hard to understate how in-demand this feature has been; if you imagine an edit button on Twitter that gifted you crypto every time you corrected a typo, you’d be getting close to how popular this feature is.

Until now, media queries have detected the whole viewport. And so, if you have an element like a card, for example, that needs to change at smaller viewports, you need to calculate the available space and adapt the element’s design accordingly. Unfortunately, this frequently gets out of sync with edge cases causing more than a few headaches for front-end developers.

Media queries are severely restrictive to modern layout methods like Grid that wrap elements automatically because there is no way to detect how the elements are laid out.

Container Queries solve this by allowing you to define styles based on the size of the actual containing element; if a div is 300px wide, the contents can have one design, and if it’s 400px wide, they can have a different design—all without caring what size the whole viewport is.

This is dangerously close to OOP (Object Orientated Programming) principles and almost elevates CSS to an actual programming language. (All we need is conditional logic, and we’re there.)

The latest versions of Chrome, Edge, and now Safari (including mobile) support CSS Grid. Even discounting the rapid decline of Twitter, this is way more exciting than any edit button.

CSS Subgrid

Speaking of Grid, if you’ve built a site with it (and if you haven’t, where have you been?), you’ll know that matching elements in complex HTML structures often results in nesting grids. Matching those grids requires careful management, CSS variables, or both. With CSS Subgrid, grids can inherit grid definitions from a grid defined higher up the hierarchy.

CSS Subgrid has been supported by Firefox for a while but is not yet part of Chrome or Edge. Until there’s wider support, it’s not a practical solution, and using a fallback negates any benefit of using Subgrid. However, its introduction in Safari will surely herald rapid adoption by Google and Microsoft and moves the web forward considerably.

CSS Subgrid is likely to be a practical solution within 18 months.

AVIF Support

AVIF is an exceptionally compact image format that beats even WebP in many instances. It even allows for sequences, creating what is essentially an animated GIF but smaller, and for bitmaps.

AVIF is already supported by Chrome, with partial support in Firefox. Safari now joins them.

AVIF support is one of the more valuable additions to Safari 16 because you’re probably already serving different images inside a picture element. If so, your Safari 16 users will begin receiving a smaller payload automatically, speeding up your site and boosting UX and SEO.

Enhanced Animation

Safari 16 introduces some significant improvements in animation, but the one that catches the eye is that you can now animate CSS Grid.

Yes, let that sink in. Combine Container Queries and animation. The possibilities for hover states on elements are tantalizing.

Safari 16 also supports CSS Offset Path — known initially as CSS Motion Path — which allows you to animate elements along any defined path. This enables the kind of animated effect that previously needed JavaScript (or Flash!) to accomplish.

Chrome, Edge, and Firefox all support CSS Offset Path; the addition of Safari means it’s now a practical solution that can be deployed in the wild.

Web Inspector Extensions

Announced as part of the beta release, Web Inspector Extensions allow web developers to create extensions for Safari, just as they would for Chrome.

Web Inspector Extensions — or Safari Extensions as they’re destined to be known — can be built in HTML, CSS, and JS, so the learning curve is shallow. It’s a good route into app development for web designers.

Because the underlying technology is the same as other browser extensions, anyone who has made a Chrome, Edge, or Firefox extension will be able to port it to Safari 16+ relatively easily. As a result, there should be a rapid expansion of the available extensions.

Improved Accessibility

Accessibility is key to an effective and inclusive web. Be like Bosch: everybody counts, or nobody counts.

When testing a design for accessibility, emulators don’t cut it. In my experience, Safari has some of the most reliable accessibility settings, especially when it comes to Media Queries like prefers-reduced-movement.

Further gains in this field mean that Safari continues to be an essential tool for QA tests.

Reduced Resets

Finally, I want to throw up my hands to celebrate the reduced number of non-standard CSS appearance settings.

For years we’ve been prefacing our style sheets with elaborate resets like Normalize, designed to undo all the assumptions browser developers make about design and the UI preferences of their engineers.

Safari 16 has reportedly “Removed most non-standard CSS appearance values.” How effective this is and how much we can rely on it given the other browsers on the market remains to be seen. However, like many of Safari 16’s changes, it’s a step towards a browser that’s on the developers’ side instead of an obstacle to overcome.

The post Exciting New Features in Safari 16 first appeared on Webdesigner Depot.

Below you’ll find productivity apps, icons, gradients, AI, and some awesome new fonts. Enjoy!

CSS Scan

Forget right-clicking on a website to see how it’s coded. CSS Scan is a browser extension that lets you view the CSS styles of any element and copy them to your clipboard.

Slicons

Create stand-out UI designs with Slicons, a set of 300+ pixel-perfect icons. Light, regular, and bold versions match your typography and work with Figma, Sketch, XD, and Iconjar.

Codex

Codex is an IDE extension that lets you comment on your code like a pro. Anyone on your team can add comments, questions, or notes to any lines of code.

Gradientify

You too can leap aboard the gradient design trend using Gradientify, a collection of 100+ beautiful, human-designed gradients. Copy the CSS, or download PNGs for free.

90 Bitmap Shapes

Create unique logos, social media assets, apparel, and abstract icons using this editable set of 90 Bitmap Shapes in vector form for Photoshop, Sketch, and Figma.

BlockBee

Get paid in crypto using BlockBee. The Web 3.0 payments infrastructure integrates with the best ecommerce carts, including PrestaShop, Opencart, Magento, and WooCommerce.

Flatfile

Banish the woes of importing CSV data with Flatfile, a CSV importer that formats human-edited data files to eliminate errors and speed up B2B onboarding.

ClipDrop

Effortlessly clip the backgrounds from images in Figma with the ClipDrop plugin. One-click removes backgrounds, objects, people, text, or defects.

Craiyon

Craiyon is an AI drawing tool based on a stripped-down version of DALL-E. You can generate any image you like using a simple text prompt.

Google Headline Tool

Use Poll the People’s powerful Google Headline Tool to optimize your headlines for more effective search ads and clickable blog post titles.

Retro Postcard Effect

Embrace the trend for retro images using this Retro Postcard Effect for Adobe Photoshop. Easily drop your custom images into the placeholder layer for an instant vintage style.

Hugo

Hugo is an admin suite for freelancers that takes care of business with intelligent contracts, audit trails, and an integrated wallet, so you can focus on being creative.

CTA Examples

CTA Examples is a database of call-to-action examples for every possible scenario. So no matter what you want to persuade your users to do, you’ll find the best prompt here.

Superhuman

Create unique 3D characters to wow your customers using Superhuman. You can customize clothes, hair, and poses using 1500+ elements or choose from 500 pre-made characters.

PostHog

PostHog is an extensive set of tools built on a modern data stack. You can do more with your data by creating your own app or using one of the 50+ that are included for free.

Radix UI

There’s no need to reinvent UI components for React when you can use Radix UI. The high-quality, accessible components are perfect for web apps and dashboards.

KB Clip

Now you can create a searchable wiki for your business with a fraction of the effort thanks to KB Clip. Just highlight a Slack conversation, and transform it into an article in one click.

DropBlok

A great way to monetize your followers is with a custom app. DropBlok is a no-code tool that will build the app for you.

Blofishing Font

Blofishing is a gorgeous handwriting font that adds personality to your layouts. It’s ideal for wedding stationery, social media marketing, and anything that needs a personal touch.

Haratte Font

Haratte is an elegant font with graceful curves and a modern aesthetic. It’s perfect for logos, magazine design, social media assets, and more.

The post Exciting New Tools for Designers, September 2022 first appeared on Webdesigner Depot.

If you are unfamiliar with the term, a modal is a dialogue window appearing when a visitor clicks on a hyperlink or hover image.

Suppose you want to collect on-site subscribers or you want visitors to sign up for a freebie. In that case, you can use modals.

However, many web designers – and some website visitors – are against using modals in web design. The main argument is that it affects the user experience. But are modals in web design a UX disaster? Read on to find out.

What Do Modals Do?

Modals often appear as pop-up windows on a web page, requesting a visitor to take action. Most times, they appear following a click on a page element.

Also known as lightboxes, modals isolate the page’s main content. The user will have to complete the action requested by the modal or close it before reassessing the page.

Web designers use modals to capture a visitor’s attention. Since other page contents are inaccessible, a visitor must interact with the modal.

Cons Of Modals In UX

While there are different cons of modals in UX, they all sum up to one con – interruption. When modals appear, they interrupt whatever the user is doing.

Unlike regular pop-ups, users cannot simply ignore the modal and continue browsing. As a result, modals demand immediate attention. 

A user may be interested and decide to interact with the modal. However, if the modal’s content differs from the page’s, the user could forget what they were doing after interacting with the modal.

Furthermore, sometimes modals require action related to information on the page. For example, suppose the user wants to review the information before taking action. In that case, they’ll have to close the modal since the main page is inaccessible.

Statistics show that up to 82% of users dislike pop-ups. Most website visitors aren’t knowledgeable about the technicalities of web design. As a result, they won’t be able to differentiate between regular pop-ups and modals.

After all, modals are a type of pop-up. Some users may consider modals worse since they darken the page’s primary content, making it inaccessible.

Furthermore, people want to visit a website and get what they want immediately. Hence, time is significant. Therefore, modals that require actions that take time can make a website lose visitors.

With all of these cons, you can understand why many web designers say modals are a UX disaster in web design.

Can Modals Be Useful in UX?

In some situations, modals are helpful, and they can improve UX. Many web designers swear on the usefulness of modals, and it’s not difficult to understand why.

Firstly, modals can help simplify a website’s content. For example, a user can immediately exit the page if your website is relatively complex, with lots of content and elements.

You can use a modal to explain the content on the page so that the user doesn’t get confused. Perhaps the modal can display when the user clicks on the back button. The modal can highlight the most critical content on the page and tell the user what to do next.

Secondly, modals are invaluable if you must capture your user’s attention. For example, perhaps you want to display a warning or pass any crucial information that users must know before they continue browsing.

As mentioned before, a user can easily ignore a pop-up, especially if it opens in a new window. However, with modals, the user must at least view the content before they proceed.

Thirdly, a modal can make a web page easier to navigate. It sounds ironic considering the cons, but it’s true if properly implemented. Rather than packing different elements on a web page, you can set some to display as modals.

For example, you can have a page with just text to improve readability. Then, users can click to view visual elements like images and videos as modals.

How To Use Modals the Right Way

Using modals correctly is key to ensuring they don’t negatively affect UX. Here are some ideal situations when you can use modals:

1. Display Warnings

Using modals to give users crucial warnings is ideal, especially if their subsequent actions have serious consequences.

For example, most websites display modals when users click the delete button. Deletion is always critical because, in most cases, it’s irreversible.

A practical example would be an eCommerce website where a user opts to delete items from their cart. You can use a modal to ask the user to confirm before deleting.

2. Input or Collect Information

Modals are effective in prompting users to input information. Sometimes, users must enter specific details before they continue browsing.

A practical example would be a review site where a user wants to submit a review. Before submitting the review, you can use a modal to request the user’s name and other necessary information.

3. Simplify Navigation

As mentioned before, modals can simplify a complex website. In addition, it will help a user navigate better, which is a UX boost.

A practical example would be a news site with many stories and updates. You can use a modal to highlight the day’s trending news stories so that users can visit the web pages with one click.

Conclusion: Are Modals a Disaster in UX?

In conclusion, modals affect a site’s user experience since visitors must interact with them. However, it doesn’t always have to be a negative effect.

Modals become a UX disaster in web design when wrongly used. However, if you follow good practices, modals can improve your website’s user experience.

Generally, only use modals when necessary and in a way that won’t frustrate the users.

Featured image by Freepik.

The post Are Modals In Web Design A UX Disaster? first appeared on Webdesigner Depot.

This month’s collection of fresh new fonts includes some typefaces that push boundaries in subtle but irresistible ways, a few retro fonts that evoke specific eras, and some exceptionally well-drawn examples of classic themes.

Gazzetta

Gazzetta is a condensed typeface with soft curves and sharp joins that gives it plenty of personality at display sizes while still being highly practical.

Bacalar

Bacalar is an intriguing variable font inspired by the Yucatan peninsula in Mexico. The bold, simple shapes are contrasted by extreme tapers that create dynamic shapes.

Monden

Monden is a high-contrast serif with an interesting slant applied to the lowercase h, m, and n. This “kick” adds a modern richness to blocks of text.

Flecha

Flecha is a sharp typeface with precise, simplified shapes that make it ideal for digital use. There is a range of styles and weights that provide flexibility.

Wonder Varelia

Countless calligraphic script fonts are available, but few are executed with the same elegance as Wonder Varelia. It works best as concise display text.

Okkult

Okkult is inspired by 70s horror films. It’s a great alternative choice for Halloween, Stranger Things-style retro designs, and hard-rock bands.

Southern Beach

Southern Beach is a classy script typeface that feels carefree and optimistic. It would work well as the logotype for a hotel, a travel company, or a restaurant.

Connection

Connection is a beautifully drawn typeface that makes unexpected decisions to create interest in what is otherwise a traditional design.

Lokeya

Lokeya is a playful sans-serif with a distinctly modern-French style. It includes several stylistic alternatives to enliven word shapes and is excellent for brand work.

Grtsk

Grtsk is an exceptionally flexible set of fonts with two writing systems, six widths, and seven weights that are also available as one highly-practical variable font.

Beast Head

Beast Head is an expressive brush script packed with energy. It’s a great branding option for gyms, workout clothing, energy drinks, and music events.

Happy Monday

Happy Monday is a retro script font that evokes the late-60s and early-70s. It’s a laid-back option for T-shirts, branding, and editorial work.

TT Espina

TT Espina is a serif face with extreme contrasts and particularly large serifs. The bold weight swells unevenly on the counters, creating a unique aesthetic.

Spookyman

Horrifyingly, Halloween is just around the corner, and if you’re looking for a spooky font for seasonal promotions, look no further than Spookyman.

Quebra

Quebra is a useful sans-serif for projects that need a range of widths. At small sizes, it feels corporate and reserved; at larger sizes, more human details begin to emerge.

The post 15 Best New Fonts, September 2022 first appeared on Webdesigner Depot.

This week, we’ll tie up loose ends so that you’re a fully functional agency able to pick and choose the work you accept.

Day 22: Pitch Deck

Over the next few years, you’ll be doing a lot of pitching: walking into a room and trying to convince someone to give you their business.

Here’s the good news: if you’re in the room, you’ve probably got the job. Stakeholders in successful businesses are usually very busy, so if they take the time to see you, they take you seriously.

The best way to allay their doubts and secure the work is to walk in with a pitch deck. Pitch decks are usually associated with startups but work well for design agencies.

Consider your pitch deck a portfolio formatted for business concerns. Include work samples if you have them, your elevator pitch, and as many provable facts about the service you offer as possible. Keep it short, and use it as a framework for meetings.

Day 23: Kick-Off Checklist

No one is going to suggest that web design is painting by numbers. You can’t knock out websites with a checklist as if you were doing your laundry. However, some stages of the process are repetitive, one of which is the kick-off process.

Far too many projects are derailed by a slow start. You’ve probably agreed to a deadline, and making sure you have everything you need to make progress is vital in hitting that deadline.

As with any repetitive process, creating a document, in this case, a checklist, is advisable to speed up this stage of your projects.

Day 24: Find Some Backup

Whether starting as a freelancer, in a partnership, or with a skeleton crew, you can’t do everything yourself.

This doesn’t mean hiring staff — that is a costly step that you should only consider if you have the financial resources to guarantee a stable cash flow.

Instead, reach out to your network or even freelance boards and see who’s available if and when you need assistance. For example, it is always helpful to have the contact details of an experienced server admin — you’ll only need them once or twice a year, but when you need them, they’re worth their weight in gold. It’s also worth having a couple of contacts who can do simple, time-consuming tasks like image processing.

Outsourcing means focusing on the parts of the job that maximise your profits. Don’t wait until you need them; start developing these networks now, so when the need does arise, you know who to reach out to.

Day 25: Website

OK, 25 days in, it’s finally time to build your website. Yes, in one day.

You already have your elevator pitch, logo, and the niche you intend to target. You also have the terms of service and a link to your social media. That’s everything you need to get a simple business card design online.

Naturally, as you begin to onboard clients, you will develop a portfolio that will allow you to improve your site. But right now, you need a presence quickly.

You picked up your hosting on day 19; today’s the day to put something on it.

Day 26: Client No. 1

The biggest challenge for any web design agency is acquiring good, paying clients.

I know an agency that burnt through seed money for a whole year, waiting for clients to knock at the door. I also know an agency that was only founded because one high-profile client turned up at the creative director’s dorm room. Those are the extremes, but no matter your story, your clients will define it.

Way back on day eight, you wrote a list of potential clients. Today, you’re going to approach one. Your goal is to set up a meeting at which you can sell your service to them. You don’t have to telephone or visit in person; it’s OK to email or message them on social media if those are your strengths. Then, invite them for coffee and an informal chat at the coffee shop you picked on day twelve.

Most of you are going to get knocked back. That’s the nature of the business. The key is to get back on the horse. Try to learn from your approach, and take steps to improve next time.

Your first cold approach is nerve-racking; if it isn’t, then maybe you aren’t taking this seriously enough. But I can promise that approach number two is more easier, and by the time you’ve done a few dozen, you may even start to enjoy it.

Day 27: Quit

A wise man once said, “You’ll never make money working for someone else.” Twenty-seven days ago, you started this process, hoping to seize control of your destiny.

The last step is to quit whatever dead-end job you’ve been tolerating up until now. You don’t need to burn your bridges; you don’t need to punch the boss and kiss your office crush on the way out the door; you do need to take a mental break from your old life to focus on the future.

If you can’t afford to quit, then it’s fine to quiet quit. Just make sure you find the mental space to give your agency the attention it needs.

Day 28: Rest

Over the past four weeks, you’ve manoeuvred yourself into the best position possible to launch your new agency. You’ve decided who you are, who you plan to become, and how you’ll communicate that to the world.

Whether this plan is viable long-term is entirely up to you. You make your own luck in this life.

Today, do what you always do on the last day of the week and rest. Then, tomorrow, you’ll start forging your path to success.

Featured image via Pexels.

The post How to Start a Web Design Agency in 28 Days: Week Four first appeared on Webdesigner Depot.

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

1. Blur is Back

Blur as a design element is gaining traction in a big way. This web design trend can look like a lot of different things and be used in a variety of ways.

From backgrounds to blur in images to blurred elements in the foreground, there’s a use case for almost everything.

The thing that makes blur a highly usable design element is that it is easy to create and use. Blur can be created in Adobe Photoshop or similar software, with CSS, or be part of the way an image is created. It can be soft or hard, with or without color, and any size or shape.

The versatility and flexibility make it a popular choice for backgrounds and foreground elements, as you’ll see below.

Future London Academy uses blur in a bit of an unusual way with a blur element in the foreground that blurs the edges of some oversized lettering. The technique is repeated on the scroll and on some images as well.

Outcrowd uses blur in the background with animation to help create visual focus as you scroll. The colorful blurred circles get smaller and less blurred as the user moves down the page to contribute to the story the design is trying to communicate.

Bricklayer Dao uses blur in the background, almost as a red “sunspot” to help create a focal point on the center of the screen. Note how the blur here does not have a distinct shape; it’s almost a swash that leads the eye across and down the screen.

2. Interesting Edges

Most containers that you see for images and videos online are either rectangular or circular. Straight lines help separate content elements from one another.

But more designers are thinking outside the box – literally – with interesting edges for content elements. (Note this website design trend is pretty tricky to pull off and you’ll really have to think about these shapes work together, especially when you switch from horizontal to vertical orientations.)

The commonality with all of these projects that use interesting edges is that images are tucked in behind an element that isn’t a shape you’d typically expect. Most include some element of motion as well, from a load or scroll animation to video. (You should click through to see how each of these examples works.)

Lenka Daviesova has an image behind two cut out shapes that includes a simple load animation. What makes this interesting is that you don’t feel like anything is missing from the parts of the image you can’t see. Your brain fills in the blanks for you.

Ho Daigi Mountain Resort has moving images behind a foreground element in the shape of a mountain. This shape helps provide information about the location and is a clever way to tuck the logo into the lower third of the home hero area. The mountain edge is carried through every scroll on the homepage design.

Kafeaterra uses interesting edges in a totally different way. While the shape is a common rectangle, it’s highly dramatic and text elements encroach into the space. It’s so unexpected that the overlap of elements with no real space of their own, sets a very specific tone for the content.

3. Neon Yellow

One of the most difficult color choices to portray on screens is trending – neon yellow.

Neons are traditionally difficult because they can create visual and contrast challenges and not always look as intended due to user settings. Neon yellow is showing up everywhere right now with black or dark backgrounds though. (Maybe because of the popularity of dark mode.)

The commonality for most of these trending designs is that the yellow is an accent and is not used widely, for the most part. Too much neon can get difficult to read or result in eyestrain.

There also seems to be a consistent vibe with these projects that feels somewhat masculine and stark.

Metaluxe uses neon yellow for text accents and a giant QR code on the homepage. The hue is designed to help move you through content with ease from top to bottom to the call to action.

Robbert Lokhorst uses neon yellow – two shades here, actually – in the logo, as a button highlight, and for keywords in the all-text hero area. Note how the logo and button hues are more yellow than the primary text.

Tortoise & Hare CX Agency uses neon yellow on a black and white video roll as a text and button accent. While this could be a tricky combination, the extra shading over the video helps create enough contrast for it to all come together. Generally, it is not advised to use a neon yellow over white or light colors because there isn’t enough contrast to read it. Here, though, they do a great job of pulling the pieces together.

Conclusion

One of the things that’s interesting about this collection of trends is that we are seeing new iterations of things that were popular in the not-so-distant past. Blur was a major trend just a couple of years ago and seems to be re-emerging again. Neons seem to come and go pretty regularly.

If nothing else, these “recycled” trends are a good reminder to file work well so you can dig out some of those old ideas when they come into fashion again.

The post 3 Essential Design Trends, September 2022 first appeared on Webdesigner Depot.