Articles

As we head into the final month of 2022, plenty of new ideas and website design trends are still emerging. The evolution throughout the year has been exciting and designed to help website designers and developers create greater engagement and interactivity while pushing the envelope. These trends are no exception.

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

1. Video Game Inspiration

That space where reality and virtual reality merge is popular for website design. Trending are design elements and themes with a pseudo-video game style that looks interactive, somewhat real, and much imagined.

These websites can have a variety of looks and themes but have a few key elements in common:

  • Plenty of animation
  • Interactive elements, real or perceived
  • Fast motion that puts the user in the scene
  • ”Unreal elements” such as the bat-skull for Mythical Games
  • Dark color schemes
  • Often lack traditional navigation or calls to action so that the “game” is the whole screen
  • Leading text or design elements to help you move through interactions

Each of these examples takes a similar but different approach with their video-game-inspired design styles.

Adidas uses a three-dimensional trio of people in flight to get you interested in jobs at their animation studio. The point of view makes you feel part of the action, but traditional design elements, such as navigation, help you know what to do next.

Mutant Stand looks like an old-school video game and moves between a home screen with navigational elements to more of an in-game experience. The motion creates an interactive feel even before you dive into the design.

Mythical Games is an actual gaming website design, so you would expect video game inspiration here. Interestingly, this site takes the most subtle approach, although the design elements of fantasy are strong here.

2. Difficult Typography

Sometimes website design trends can be tough to explain. That’s the case with this one, where designers are experimenting with very difficult typography styles. What’s difficult about the text in these projects is readability.

Difficult typography is somewhat subjective but is emphasized by designs that have a lot of words. The reading challenge extends to mobile design, particularly when these fonts are smaller and can present even greater readability issues.

There are a lot of different styles and combinations of typefaces that can cause readability challenges. Some of the most common for website design include:

  • Condensed or thin typefaces
  • Unusual character styles or strokes
  • Modern or thick serifs
  • Old world styles
  • Scripts or cursive styles

All of this, though, is somewhat in the eye of the beholder. While these examples all present some reading challenges, the designs are still interesting and visually sound. Whether to make these font choices is a personal choice, but you should pay attention to your audience base and website analytics to make sure it works for you.

Here’s where you probably see a lot of this trend outside of website design. Pay attention to the typefaces used for World Cup broadcasts. Difficult typefaces are paired for all on-screen text elements.

Kakeru Yagou uses an interesting modern serif with a bit of a tilted style. As a logotype, the typography works pretty well. It is when there’s a lot to read that the challenge comes into play.

Abymes Numerique uses a condensed typeface in an all-caps style. Either of these options alone might create less of a readability concern than when paired.

Think Dance uses an incredibly interesting but difficult typeface for the two keywords on its website. They do an excellent job by using only two words and pairing them with easy-to-read options everywhere else. But it still takes a minute to think about and comprehend the words, so you can argue the effectiveness of the font choice.

3. Avatars

Already popular on social media platforms such as Snapchat and Facebook, avatars are having a pretty big moment in website design as well. The big difference is that website avatars aren’t just cartoon heads, they can include full-body designs and animated effects.

Avatars can have an extremely personal look and feel, such as when they are used for portfolio websites or be more character-oriented. Both are an excellent way to use faces and incorporate somewhat of a personal element when you don’t have the right photography for the job or want a greater element of whimsy in the design.

Simona Nikolova uses an oversized avatar for her portfolio site. She pairs it with her name to create a connection with users, and the style shows her creativity as well. An avatar is a good way to “show yourself” in a portfolio without the privacy concerns that might come with an actual photo.

Byte Trading uses “Lego-style” avatars to get you interested enough to “enter” the website. Each avatar moves and changes clothing to get you ready to enter the website for the crypto marketplace. Avatars are a popular option for crypto and NFT websites.

Pomelo Paradigm uses three-dimensional avatars to create scenes throughout its website. These created characters help explain what the company does and interactions people should have with the design. They have very human looks, and you almost don’t miss that they aren’t actual photographs.

Conclusion

As we head into a new year, what website design trends are you most excited for? Do you plan to try new things with projects in the new year? Hopefully, these trends give you some ideas and jumpstart that inspiration heading into 2023.

Source

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

Source de l’article sur Webdesignerdepot

With the holidays fast approaching, there are plenty of fun gifts for you in this roundup of new tools and resources for web designers. Make sure to share anything you find helpful with others to spread additional holiday cheer.

Here’s what is new for designers this month…

Volley

Volley, billing itself as Snapchat for work, is a new way to collaborate with remote teams. The tool addresses the two main problems of remote teams (lack of communication and loneliness) with an async video messaging app with interactive transcriptions neatly organized into workspaces. Volley emphasizes talking over typing (76% of volleys sent are video), doesn’t require you to coordinate schedules (it’s 100% asynchronous), and lives in a threaded conversation with context that’s neatly organized. Plus, the tool is free to use.

Upnext

Upnext is a new type of reading list. It’s designed to help you save, organize, and focus on fantastic content while expanding your knowledge on your favorite topics. You can create playlists with almost any type of content that you can refer to later and follow “thinkers” that you love. Search and filter content, focus on reading, integrate videos, and even highlight and note specific content in your customized library. This brand-new web app has a waitlist that you can join to get access soon.

Startup 5

Startup 5 is a new version of the popular website builder, and it’s a perfect tool to create your online presence. With Startup, it’s fast and easy to get your business online with pre-designed blocks. It includes a visual editor with 150+ blocks with pre-designed and pre-coded elements and styles you can easily customize in a drag and drop interface. It’s an easy tool for building a website quickly without a coding background. Most users can publish a website quickly and easily.

Flatmap

Flatmap generates Mapbox Vector Tiles from geographic data sources like OpenStreetMap. It is memory-efficient so that you can build a map of the world in a few hours on a single machine without any external tools or database. Vector tiles contain raw point, line, and polygon geometries that clients like MapLibre can use to render custom maps in the browser, native apps, or a server. Flatmap packages tiles into an MBTiles (SQLite) file that can be served using tools like TileServer GL or even queried directly from the browser.

Cleanup.Pictures

Cleanup.Pictures is a web-based tool to remove objects, people, text, or other defects from your images before using them in projects. It’s an AI-based alternative to other photo-editing software.

Linkz.ai

Linkz.ai helps you make smart link preview popups for your website to help encourage greater engagement and interaction for links. It works with a line of code you can install quickly and easily, and then you get smart link previews (in two style options) for every link on your site.

Llline

Llline is an SVG generator that helps you create smooth and organic lines and strokes with plenty of customization options for almost any application. This tool helps create graphic elements in just a few clicks, allowing you to add a few points to a canvas and then draw a smooth curve using these points. You can then tweak the resulting SVG graphic by rotating it, changing its color, giving it a gradient, making it a dashed line, and then you can download or copy the SVG markup.

Lorem.Space

Lorem.Space is a valuable placeholder image tool. With just a little bit of code, you can pop cool placeholder images – from movie posters to shoes – right in your website mockup so that the design is easier to visualize. It’s a great solution that’s fun and keeps you from having to put empty boxes throughout the design. And everything can be randomized, so you don’t spend time looking for placeholders.

Huetone

Huetone can help you create more accessible color palettes by making use of the Advanced Perceptual Contrast Algorithm. The contrast ratios and color combinations show on one screen to help you quickly develop palettes and combinations. Plus, the tool has hotkeys that make it easy to change hues, toggle, and adjust quickly. Then you can export everything to Figma.

Rowy

Rowy is an open-source tool to build on the Google Cloud Platform. You can manage Firestore data in a spreadsheet-style user interface, write Cloud Functions in the browser, and connect to third-party platforms.

AdCreative.ai

AdCreative.ai uses artificial intelligence to help create better ad creative. To get started, you upload logos and color files, connect social and other accounts, pick the sizes you need, write text, pick a background, and upload product images, and let the AI do the work. Once you have the creative you like, you can connect to your online ad accounts for easy use. This is a premium tool that’s free to try.

Flowrift

Flowrift is a tool to browse and then copy and customize Tailwind CSS blocks in groups of collections. Filter by block type and then experiment with the options. It even has e-commerce blocks.

Layout Patterns

Layout Patterns is a collection of layout patterns built using modern CSS APIs to help you build common interfaces such as cards, dynamic grid areas, and full-page layouts.

You.com

You.com is a new private search engine that summarizes the web. The tool is in open beta and includes superior privacy choices, actionable results, extensible apps, and personalization through preferred sources.

3D Icons

3D Icons is a fun set of three-dimensional, full-color icons that are free for all uses. (Donations are accepted.) They integrate with pretty much any web design tool you are using and come in four color styles – clay, gradient, color, and premium – so you can get just the right look for your project. Each icon also includes three rendering views – dynamic, side, and isometric.

Arco Design

Arco Design is a comprehensive React UI components library based on the Arco Design system. It includes a customizable theme and more than 60 crafted components that you can use out of the box.

Seekvectors.com

Seekvectors.com is a search tool to find free resources in five different formats, PNG, SVG, JPG, EPS, and AI.

Outline to Single Stroke

Outline to Single Stroke is a tool in the Figma community that works just like the name implies. Select a filled vector on the canvas, and then you can outline it to a single stroke and adjust the line weight if you like.

Codeamigo

Codeamigo is a new self-paced platform to help you learn coding skills. It’s packed with various lessons for different languages and templates and has something for every level from beginner to advanced.

Sizze

Sizze is a Figma to React Native export tool to create app prototypes and instantly export to code.

CodingFont

CodingFont is an excellent game that can help you pick a font to use for coding that you like! If you spend a lot of time looking at code each day, the right font can help reduce eye strain and make the work a little easier to see.

Christmas Revue

Christmas Revue is the first in a trio of holiday typefaces that you can use this season. This SCG color font is fun and perfect for the holidays with exciting glyphs. It is free for personal use only.

Hotsnow

Hotsnow is a fun display font that has interesting fills and shapes in an all-caps character set. It is free for personal use.

Marlwich

Marlwich is a feminine handwriting-style typeface that has the feel of signing a holiday letter or card. It contains upper- and lower-case characters and is only for non-commercial use for free. (A paid option is available for commercial projects.)

Source

The post Exciting New Tools For Designers, December 2021 first appeared on Webdesigner Depot.

Source de l’article sur Webdesignerdepot

Over the years, experts have repeatedly discussed the possible impact of mixed realities on web design. Concepts like AR and VR are expected to have the potential to change the way that we interact with websites on a fundamental level.

Now that we’re in the year 2021, however, discussions about AR aren’t just observational anymore. The age of mixed-reality interfaces is here, in everything from Pokémon Go, to Snapchat filters.

The question is, how do web designers create incredible user experiences in a world where there are now multiple digital realities to consider?

The Benefits of Experimenting with AR

Before we look at some of the steps that web designers can take to enhance their projects with AR, it’s worth examining the benefits of interacting with augmented reality in the first place. 

While virtual reality replaces the typical world around us completely with digital components, AR augments it. This means that developers and designers need to learn how to thrive in an environment where the real world and the digital one work together. 

The most common AR application for website owners is to provide a solution for real-time and remote product visualization. Imagine being able to try on a pair of shoes before you buy them online. That’s a service that the Vyking brand can deliver by creating technology that “reinvents” the digital shopping experience. 

This test functionality plays a massive role in purchasing decisions. In a world where people can’t see a shade of make-up in person when they’re shopping online, or check how an item of furniture looks in their home, AR has a crucial role to play. 

In simple terms, AR helps shoppers to make more informed purchases. 

Here’s how you can use augmented reality to deliver incredible UX. 

1. Focus on Real-Time Feedback

Augmented reality is all about connecting the real world to the virtual world. 

Doing this provides users a unique experience – one that’s filled with real-time feedback that can deliver crucial and insightful information. For instance, an augmented reality system in a GPS app can calculate the average time before reaching a destination based on previous trips.

Another option is for an augmented reality to use solutions like face-mapping to help customers determine how a certain makeup product will look before they buy it. For instance, that’s the case for the Mary Kay Mirror Me app, which simplifies the process of shopping for make-up. 

When designing for AR, experts need to consider how they can provide customers with real-time information that they can use to make better purchasing decisions. 

2. Define input and output

Although you’ve probably performed similar exercises when designing for traditional websites and applications in the past, defining inputs and outputs of UX in AR environments can be tough.

Defining inputs and outputs allows you to determine which elements of an interface your user can actually interact with, in your interface. This gives you a better idea of what to “augment.” For instance, you might decide that physical gestures like a swipe of the hand will be essential for AR inputs. However, you’ll also need to consider how each mobile device offers different input possibilities. 

Outputs are a little simpler. For instance, you could offer a three-dimensional model of a product that your customers are interested in. Once you have that output, you can think about how the customer will interact with it by changing colors or position.

3. Embrace Customer-Friendly Performance

Another feature at the heart of AR applications is interactivity. 

Good designs in the augmented reality world need to be simple to access and use, otherwise customers will end up avoiding them. For instance, 60% of customers say they want to use AR when they’re shopping for furniture. However, they’re only going to use your app if it actually works. 

The Décor Matters website and app mix gamification with home decorating features that help customers get a better view of the home goods they’re planning on buying. The website even has inspiration pages available to help users find and try new design options with their AR technology. 

When designing for AR, think about how you can make your applications or technology as simple to use as possible, so customers actually want to interact with it. 

4. Address the Environment

In augmented and virtual reality applications, it’s important to remember that interfaces aren’t bound by physical screens. The viewport will move with the user, shifting perspectives in response. Most AR designers will use four different signifiers to describe AR environments:

  • Public environment: The entire body of the user is involved as a controller, like with the Xbox Kinect or Nintendo Wii;
  • Intimate environment: Where a user can be seated – often in a desktop environment;
  • Personal environment: AR on smartphones, mobile devices, and tablets, like Pokémon Go;
  • Private environments: Completely private spaces, such as with wearable technology like the Google Glass solution.

The environment that you’re designing for will be crucial for your project outcomes. Remember, spatial considerations need to be carefully considered when accounting for how users will interact with objects in a frame. 

5. Remember User Fatigue

Another thing to keep in mind when designing for AR technology is that user fatigue is likely to be a much more significant consideration. After all, people interact with websites and applications in a much more intimate and in-depth way when AR is involved. 

AR applications can often use the entire body of a customer as a controller. Because of this, designers need to be careful about exhausting interactions. High-effort and repetitive interactions could tire the user out mentally and physically, causing them to give up on the interaction. 

When designing, you’ll need to consider how you might over-stimulate the user with too many interaction-focused elements at once. Keep it simple.

6. Remember the Essential Principles of UX Design

Remember, just because you’re tapping into a relatively new technology doesn’t mean that you should abandon all the basic tenets of user experience design that you’ve come to understand over the years. Although UX is constantly evolving and changing, it’s always going to keep a few fundamental principles in mind. 

For instance, you’ll always strive to give users the best digital experience in exchange for the lowest amount of effort on their part. Additionally, you’ll need to think about how you can make end-users as comfortable as possible when they’re interacting with new types of technology on websites and apps. 

For instance, since AR is most commonly associated with gaming in the current environment, it might be a good idea to implement gamification concepts into your AR design. What can you do to make sure your customers are having fun?

For instance, Inkhunter is an app that allows users to try on tattoos just like using a filter on Snapchat. The experience feels familiar, comfortable, and exciting.

Unlocking the Potential of AR Web Design

Augmented Reality technology has come a long way over the years. Today, developers and designers can access simple plug-in tools like WordPress VR, allowing designers to upload 360-degree videos into WordPress sites and other unique web extensions. 

Augmented reality is becoming much more readily available on sites and apps of all shapes and sizes. Additionally, customers are accessing more ways to unlock AR’s power through everything from headsets to mobile interfaces. 

However, just like any new technology in the web design world, designers need to think carefully about how they will overcome the challenges in user experience that AR can present. For instance, though AR can offer more information for a customer and help them make purchasing decisions faster, there are also risks. For instance, add too many interactive features to a single website or application, and you could scare users off with too much information. 

In the short-term, web designers need to explore the new tools that are available to them and think about the customers they’re designing for. Only this way will we be able to make any considerable advances in the possibilities of AR. 

Are You Ready to Embrace AR?

Designing for augmented reality applications and websites can be an intimidating concept – even for seasoned designers. However, this is just another technology that creatives can use to drive better experiences for end-users. 

Learn how the latest technology works and get an insight into your customers’ needs, and you’ll be amazed at what you can accomplish in the AR world.

Source


Source de l’article sur Webdesignerdepot

La nouvelle version des lunettes de soleil de Snap peut filmer en HD mais aussi prendre des photos. Le modèle de distribution est lui aussi corrigé.
Source de l’article sur ZDNet

La nouvelle version des lunettes de soleil de Snap peut filmer en HD mais aussi prendre des photos. Le modèle de distribution est lui aussi corrigé.
Source de l’article sur ZDNet