Articles

What’s New in Ecommerce, January 2021

Ecommerce design may seem fairly straight-forward; you build an online store that showcases a company’s products or services and gives customers a quick and pain-free way to purchase them.

While that formula will always hold true, ecommerce is undergoing some big changes, and web designers need to be prepared to keep up with them. This monthly ecommerce trends roundup will explore these new and evolving design, sales, and marketing trends.

1. Calmer Color Palettes

Although we’re not likely to see this trend go near the sites for big box stores, it’s something smaller ecommerce companies are adopting. And with good reason.

As consumers become wary about how much money they’re spending, they don’t need to feel pressured or rushed into a purchase. And ecommerce sites that employ calmer color palettes — like pastels and earth tones — will do a better job of putting their customers at ease.

Bicycle saddle manufacture Brooks England shows how this trend plays out in ecommerce design:

It’s not just outdoors or sporting goods companies that can use more natural-looking colors, either. CBD product vendor Cannaray is another company that uses a more subdued color palette:

Really, any store that wants to do a better job creating satisfying experiences for customers and gaining their long-time loyalty should consider toning things down with color.

2. No-rush Shipping Rewards

For years, we’ve seen consumers go crazy for brands that offer free and fast shipping. But thanks to the surge in online shopping in 2020, ecommerce companies, their shipping partners, and delivery service providers just haven’t been able to keep up with the pace.

When customers are unhappy with slow deliveries, they’re going to go to social media and review sites to bombard brands with complaints, as has been happening with Loft since November:

Although many ecommerce stores still don’t inform customers ahead of time about these delays, we’re starting to see a new checkout trend.

Here’s how Gap is encouraging and rewarding customers for choosing no-rush shipping:

Amazon is another ecommerce site that encourages no-rush shipping at checkout with a reward:

Not only does this set better expectations for customers before they finish their purchases, but it encourages everyone to slow down a bit so that ecommerce companies and their shipping/delivery partners can keep up.

3. More Human and Empathetic Assistance

Each year, design trend roundups suggest that AI will play a greater role in web design.

While that may be true for things like the search bar or personalized recommendations, ecommerce sites are pulling back the reins on automated support and assistance.

Best Buy, for instance, offers customers the option to “Shop with an Expert”:

After shoppers go through a quick survey, they’re given a variety of options — based on their own level of comfort and convenience — to work with the expert:

Something that might’ve been left in the hands of a self-service quiz or automated chatbot is being given the human touch once more.

We’re seeing a similar trend with retailers like Warby Parker. While it still offers a virtual AR try-on, the main navigation actually emphasizes the home try-on option:

Again, this is another example of ecommerce companies becoming less reliant on automated support to give their customers a better and more confident shopping experience.

Wrap-Up

Ecommerce trends are always evolving. Sometimes it’s due to new technologies. Other times it has to do with what’s happening in the world around us. And sometimes it’s simply to keep up with changing consumer expectations.

Stay tuned as we explore new and emerging ecommerce trends in the coming months…

Source

The post What’s New in Ecommerce, January 2021 first appeared on Webdesigner Depot.


Source de l’article sur Webdesignerdepot

4 Predictions for the Web in 2021

The start of the year is always a good time to reassess priorities and consider new approaches, but 2021 is more of a reset than we expected this time last year. 2020 is unlikely to go down in anyone’s autobiography as the best year of their life, but it has done something positive: it’s prepared the ground for rapid change in the next 12 months.

More than any other year in our lifetimes, 2021 is set to be revolutionary, with emerging trends that will last well into the new decade. Here’s what we think you can look forward to around the next corner.

1. The End of Minimalism

Minimalism has been the de facto approach to web design for the last decade because it works.

But design reflects the zeitgeist. Where minimalism once felt clean and fresh, it’s starting to feel dull and uninspired. There have been a few false-starts breaking out of the long-term trend, but thanks to the pandemic, 2021 will be the year minimalism finally folds — at least for a while.

Prior to coronavirus-mandated lockdowns worldwide, there were already signs of a more vibrant, more decorative, more joyful approach to design. Simple typefaces have been replaced with more decorative examples — faces that use ink-traps to fake 3D effects are surprisingly popular.

trends are cyclical, and the wheel always turns

One of the biggest aspects of this blossoming trend is the move away from Material Design-style flat color not just to gradients but to multi-color gradients and even animated gradients. Even Apple, the last bastion of the clean white-box approach, jumped on the gradient bandwagon with its Big Sur branding.

One of the few things COVID-19 hasn’t slowed is the adoption of new web technology, and CSS, in particular, has had some major developments in the last year. CSS Grid is now a practical technology, and our ability to code standards-compliant designs that aren’t dependent on hierarchical boxes is greatly enhanced.

After more than a year of pretty grim news for most people, much of the world will be vaccinated over the next twelve months, and life will rapidly return to normal. The last global crisis on this scale was the 1918 influenza pandemic, and it led directly to the decade known as the Roaring Twenties.

Minimalism was already dipping in popularity — trends are cyclical, and the wheel always turns — but lockdown, or perhaps more precisely the end of lockdown, is the catalyst for significant change.

2. The Decline of WordPress

In Autumn 2020, something entirely unexpected happened: The W3C announced the platform its new web presence would be built on, and WordPress — the previous choice of the web’s steering committee — didn’t even make the list of finalists.

Due to accessibility concerns, the W3C development team opted to migrate away from WordPress to Craft CMS. The decision was met with a mixture of glee and outrage. But whether you agree with the decision or not, it’s hard to see it as anything other than yet another symptom of WordPress’ decline.

WordPress faces a triple threat: there are web builders that do an adequate job for low-end web projects; there are newer rivals like Craft that outperform WordPress as a CMS; there’s a growing interest in alternate approaches, like Jamstack.

So will it all be over for WordPress in 2021? Not even close. There are myriad reasons WordPress will continue to be the choice of designers and developers for years to come. Tens of thousands of professionals worldwide have invested their whole careers in WordPress; there are millions of themes, plugins, templates, and build processes that are tightly woven into the WordPress ecosystem. What’s more, there are millions of sites with substantial content archives powered by WordPress [WebDesignerDepot is one such site].

WordPress reportedly powers approximately 37% of the web, and it will still be the dominant CMS in 2022. But it’s unlikely to grow beyond that 37%, and by 2030 its market share will be in rapid contraction.

2020 was the high-tide mark for WordPress

But for all its faults — and it’s undeniable that WordPress is full of faults — WordPress is the best of the web; it has given a voice to millions of people, launched countless careers, and empowered entrepreneurship worldwide.

2020 was the high-tide mark for WordPress, but it’s not an extinction-level event — even the much-maligned Flash, which was killed dead in a matter of months by the first generation iPhone, limped on until a few weeks ago.

WordPress will have to find a niche and accept a smaller market share; in doing so, it will address the single biggest complaint that anyone has about WordPress: that it’s trying to do too much.

WordPress is one of the great success stories of the web. In a decade, it may have to settle for powering just 10% of the web — a level of failure most of its rivals can only dream of.

3. The Digital Currency Explosion

2021 is undoubtedly the year that cryptocurrency goes mainstream. In 2020 Bitcoin grew by almost 400%; currently valued at around $35k, conservative predictions for a December 2021 valuation are $100k, with five-year predictions as high as $1m. And Bitcoin isn’t the only cryptocurrency; the value of developer-friendly Ether has jumped by more than 50% in the first few weeks of 2021.

In the US, the incoming Biden administration is preparing a multi-trillion dollar relief package, which many believe young Americans will invest in cryptocurrency. Perhaps more importantly, large investment banks are now pumping hundreds of millions in digital currencies. PayPal and Visa are both in the advanced stages of adopting blockchain technology.

The biggest threat to the new digital economy is the volatility of cryptocurrency. You cannot price services in XRP if XRP’s dollar price could crash at any time — as it did a few weeks ago.

And so there are two routes in which this trend will unfold for ecommerce. Either pricing will remain in dollars, and the equivalent price in various cryptocurrencies will be calculated in real-time. Or, transactions will make use of stablecoins like Tether that are tied to the value of the US dollar.

Cryptocurrency is the latest gold-rush, and whether you think it’s the chance of a lifetime or yet another Ponzi scheme, it will become increasingly high-profile in ecommerce throughout 2021.

4. No More Video Calls and also More Video Calls

2020 was the year of Zoom. Its growth from bit-player to overtaking Skype is a material lesson for entrepreneurs that every obstacle is an opportunity.

every obstacle is an opportunity

Over the last year, we’ve discovered two things: meetings are more creative in person, and office costs are significantly reduced when staff work remotely.

There’s going to be a shift in the business landscape this year. Remote working will continue to be normal for years to come as businesses enjoy rent savings. Video calls will still be common for quick update meetings. But expect to travel to physical meeting places periodically for in-depth strategic planning.

Expect to see major cities with deserted office buildings and a rapid expansion of co-working spaces, especially those with meeting spaces — if WeWork can hold on a little longer, there may be light at the end of the tunnel.

As a web professional, you’re in a unique position to thrive in the new business world, even more so if you’re a freelancer. Remember, if you’re working onsite, be mindful of your physical health, and if you’re working remotely, be mindful of your mental health.

What Do You Think?

No one saw 2020 coming. Sometimes world events are outwith our control, and we have to hang on and hope it gets better. It’s been a tough 12 months, and the truth is we’re not through it yet.

But the 2020 coronavirus pandemic is the first pandemic in human history that we’ve had the technology to shorten.

2021 offers the opportunity for enormous change. Will designers look for new, more decorative approaches? Will we replace our technology stack? Will you be billing clients in Ether this year? Will you suffer the misery of a packed evening commute ever again?

 

 

Featured image via Unsplash

Source

The post 4 Predictions for the Web in 2021 first appeared on Webdesigner Depot.


Source de l’article sur Webdesignerdepot

How CentOS Became 2020’s Final Victim

If you were paying close attention to your IT department around the 8th of December, you might have heard some quiet sobbing and the occasional wail of, “Why? Why?! WHY?!” Now, it was the year 2020, so this might have seemed normal to you, but it’s actually something of a problem that could affect your business: CentOS is pretty much dead.

For the non-total-nerds among us, here’s the skinny: CentOS is a Linux-based operating system, typically used on servers. CentOS has been incredibly popular, and quite a few businesses run on it. But now, that’s changing.

CentOS is a Linux-based operating system, typically used on servers…But now, that’s changing

CentOS used to be released in thoroughly tested versions, the latest being CentOS 8. CentOS 8 was released in September of 2019 and was supposed to be supported for ten years. Now, it’s been decided that CentOS will no longer have versioned releases, opting for a rolling-release style of updates. That means there’ll be one version that constantly gets new software.

That’s cool in theory, but it means the operating system will be less stable overall. Essentially, it’s going to be used as a development branch of / testing ground for Red Hat Enterprise Linux and is no longer its own OS. If you have CentOS-based servers, you should migrate to another OS sooner rather than later.

And I just got my own CentOS-based VPS set up the way I wanted it.

Wait, What Does Red Hat Have To Do With This?

Here’s the short, short version of the history of CentOS: Red Hat (an OS developer) has two Linux distributions of its own and has had for a long time. There’s the free and community-focused Fedora and the business-focused highly expensive Red Hat Enterprise Linux (AKA RHEL).

Funny story: RHEL, despite its expensive licenses, is still mostly made from open source code, which anyone can access and use. And it’s a good OS, particularly for people who like stability.

In 2004, some smart people took all the open-source parts of RHEL and made a brand new, nearly identical operating system with it: the Community Enterprise Operating System, or CentOS. Basically, people could download and use an enterprise-level server OS for free. All the documentation for RHEL was compatible, and you could get support from the community.

It was the perfect alternative for anyone who didn’t have the budget for expensive software licenses.

In 2014, Red Hat offered to partner with the CentOS community. The idea was basically this: “It’s pretty much the same software. If our company and your community work together, both our products will be better! We make our money from enterprise customers, anyway.”

Most importantly, with Red Hat doing a lot of the heavy lifting in terms of updates and support, the CentOS community could focus on growing in other ways.

Red Hat pinky swore [citation needed] that they were in this for the long haul, and CentOS did continue to flourish. You know, until 2020.

Well, So Much For Pinky Swearing

Red Hat must have eventually decided that having a popular free version of its own enterprise software and managing it themselves no less — wasn’t that good for business. So they all but shut the project down.

Well, technically, they just changed how it operated. Instead of producing tested, production-ready versions, CentOS is merely a testing ground for RHEL. It is no longer, in my opinion, a good option for anyone who wants to run a stable server.

Current and Future CentOS Alternatives

So if you jumped on the CentOS 8 bandwagon, what should you put on your physical and virtual servers now? Well, you’ve got options.

Debian / Ubuntu

For those who don’t mind going to a very different kind of Linux, Debian has been the picture of OS stability and sysadmin-friendliness for a long time. If you want more frequent software updates, the Debian-based Ubuntu Server is popular and pretty good.

Oracle Linux

Yes, that Oracle has a RHEL-compatible Linux distribution of its own. But it’s not a clone, exactly. I mean, this is Oracle. It’s set up to use their tools and ecosystem, so I hope you like Oracle products. But hey, the OS itself is free!

ClearOS

ClearOS is another RHEL-compatible OS that’s mostly doing its own thing, though I’m not entirely sure what that thing is. Does the company have some deal with Hewlett-Packard? Anyway, they do have a free community edition and paid editions for home and business use.

The CloudLinux RHEL Fork

This is an upcoming release from the makers of CloudLinuxOS. It looks like they intend to load the new RHEL-based OS with some of their own tools, such as reboot-less server update tech. The first release is intended to be a more or less drop-in replacement for CentOS 8.

Rocky Linux

So the community that made and loved CentOS in the first place is, to say the least, ticked. They are so ticked that Greg Kurtzer (a co-founder of CentOS) has decided to do it all over again by making Rocky Linux and keep it in the community this time.

Again, the goal is to make a re-build of RHEL, a drop-in replacement for CentOS (at least for now). Eventually, the goal is to migrate from CentOS to Rocky Linux as easy as using a single, one-line command. The ETA for initial release isn’t quite set in stone, but I can personally vouch for how hard the community is working.

[See, full disclosure here… after writing this article, I joined the Rocky Linux documentation team.]

So Yeah, You Have Options

Some are out now, and others will be soon. Again, CentOS 8 will be supported until the end of 2021. CentOS 7, weirdly, will be supported until June 2024.

Migration shouldn’t be too complicated. Still, a pain in the rear that we have to do this at all, though.

Source

The post How CentOS Became 2020’s Final Victim first appeared on Webdesigner Depot.


Source de l’article sur Webdesignerdepot

The Potential of AR in Web Design

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

50 Best Websites of 2020

2020 has been one of the most memorable years in our history. Few of us have been alive long enough to experience a more turbulent time. But throughout the year, we saw design respond to challenging events with positivity, color, and a desire to elevate those people and projects working to make the world better.

As we head into 2021, there’s no denying that 2020 has changed our outlook on life and marked a major turning point in web design trends.

Here’s a collection of the websites we loved the most this year. Enjoy!

Looks Like You Need Iceland

On Looks Like You Need Iceland, you are invited to record a scream, which will then be broadcast into the Icelandic wilderness. It’s meant as a form of therapy. The idea is that you will one day visit Iceland in person. That might still be some way off for most of us, but we could certainly use a good therapeutic scream.

Black Lives Matter

Across 2020 there were major protests around the world in support of Black Lives Matter. The movement’s website is a central hub for news, resources, and civil rights information in 38 countries.

2º Earth

2ºC Earth takes the user to 5 locations worldwide and shows what will happen there if global temperatures rise by 2ºc. Sound is used really well here to create an immersive experience, along with some beautiful photography.

Github

Along with some new features announced earlier this month, GitHub has a glossy new homepage. It has a clean feel, with some nice scrolling animation and sparing but effective use of illustration.

I Weigh Community

Political and social initiatives were big in 2020, and non-profit activism initiative I Weigh Community is the brainchild of actress Jameela Jamil. It’s devoted to radical inclusivity, communicated with bold, expressive graphics.

UNREAL

Back in January, we clicked around UNREAL’s site for hours, enjoying the sharp transitions. The Swiss agency produced a wonderfully chaotic love letter to web animation.

Delassus 

Delassus grows fruit, from citrus to avocados. The Moroccan company employs a cornucopia of 3D design to make its site bold, fun, and practical.

Lynn Fisher

We loved everything about Lynn Fisher’s site back in May. The homepage illustration was awesome. It was a humorous approach to RWD that we really appreciated. The site has since changed, with tons more to explore.

Minervo

The Minervo site feels distinctly Latin, with the hot pinks and sun-blasted desaturation feeling suitably South American. We love the cropping on the custom typeface.

Babord

Norwegians have an almost mystical connection with the sea, which is evident in the site for Babord, a Norwegian seafood supplier. We loved the brand font too.

Calexo

Calexo makes THC-infused beverages, and back in April, we loved the color and positivity of the site. The animated hamburger menu was a hit too.

Moooi

Moooi’s site layers illustration with a maximal effect that makes you feel like you’re chasing a white rabbit. There are tons of great UI details here, especially the bar that reveals the product videos.

Blind Barber Anniversary

The Blind Barber celebrates 10 years of success with this microsite. A deconstructed grid and an entirely black and white design, but with color photos, create energy and a sense of joy.

Zand Harirchi Architects

Zand Harirchi is an architecture firm based in Tehran, Iran. Its site features subtle references to architecture, like the delightful thumbnails reminiscent of small windows.

WFN

The WFN (Women’s Funding Network) is an international alliance supporting women’s foundations and gender justice funders. The sophisticated color palette and clean type are both confident and feminine.

Nathan Taylor

We loved exploring Nathan Taylor’s playful site all the way back in January. The different lighting modes were a firm favorite.

Käthe Kollwitz Memorial

A tribute to the life and work of Käthe Kollwitz, an Expressionist printmaker. There’s a catalog of her work, presented alongside large type and splashy color transitions.

Emotive Feels

Emotive Feels is a design manifesto from the Emotive Brand agency that illustrates an A–Z of potential brand emotions with simple animations that we likened to a Blue Note release.

A. N Other

A.N Other’s site for perfume highlights quality ingredients, materials, simplicity, craftsmanship, and the environment; in the process, it cleverly invokes a sense of luxury.

Playtype

Danish type foundry Playtype’s site fits its name perfectly. The playful site with bright blocks of color and the occasional animation shows off some pretty nice typefaces.

Feijoo Montenegro

All-text sites are always a thrill, and back in June, we were treated to this simple one-pager by Feijoo. Details like the numerals being replaced by words are delightful.

Wavering Stripes

Although this site’s subject matter is harrowing, it is presented in a very beautiful, thoughtful manner.

The Oyster & Fish House

Sophisticated typography, the wave textures, the nostalgic feel of the photography, and even the cookie notice’s on-brand styling all show attention to detail, which gives this site its appeal.

Who Cares

Find and ‘photograph’ the endangered species to learn about them in this delightfully illustrated game.

Curbed

When Curbed came under the umbrella of New York magazine earlier this year, it got a makeover. Neon highlights and a distorted grid give an edge to the classic magazine layout.

Yolélé

The carousel of fonio (it’s a West African grain) products on Yolélé’s landing page is a good example of horizontal scrolling that works well. There are some great page transitions too.

Pantheone Audio

Pantheone Audio’s site employs elegant scrolling to enable seamless navigation of an extremely luxurious site, underpinned by a complex grid.

Aelfie

Bright color, an irregular grid, illustrations, and a display type that feels almost hand-drawn perfectly captures the aesthetic of this NY-based home furnishing brand.

Highcourt

This site for private membership leisure club Highcourt uses subtle background color changes and simple line illustrations to create a sense of calm. Black and white are softened to dark blue and ivory, and gentle animation adds interest.

Kate Jackling

Kate Jackling’s site takes a step back and allows the content to bask in the glow of attention, placing her photography at center stage.

Treaty

While there is less hustle and bustle outside than we were used to pre-pandemic, we could certainly all use some calm. Treaty’s site for CBD oils reflects that calm with a combination of video, whitespace, and botanical drawings.

Ukrainian Railroad Ladies

Ukrainian Railroad Ladies is a book of photographs of women, and some men, who work on the Ukrainian railways. The site is basic, even brutalist, but it has charm, and the photographer’s fascination with his subject comes through.

Year & Day

Year & Day is an ecommerce site that sells tableware, from glassware to ceramics. The colorful collection is designed to complement different types of food, and the site’s color scheme reflects that perfectly.

Juan Mora

Juan Mora’s ‘under construction’ holding page has probably been crafted with more care than many full-blown sites. This showcase cleverly manages to demonstrate its subject’s skills without showing a single piece of work.

Lucciano’s

Lucciano’s homepage hero video alone will have your mouth watering for some of their gelato. Much of the appeal of food is visual, and the photography here does not disappoint. Circular text boxes in ice cream colors complement the product shots nicely.

Bored Solutions

Back in April, we were already a little weary of lockdown — if only we’d known how long it would last! The amazing color blobbing of bored.solutions was the ideal distraction.

Grand Matter

Grand Matter is an artist agency representing illustrators. There is a wealth of talent on show here and a broad enough range of styles to keep the web interesting for a good while.

Dunderville

This site for Dunderville motion design studio features a paper fold detail, which adds tactility to the virtual. Some superb type and vector animations showcase an impressive portfolio.

Album Colors of the Year

Album Colors has taken the covers from 150 albums released this year and arranged them by dominant color. The hex code for each color is provided if you want to copy it.

Mammut Expedition Baikal

Mammut uses stunning photography and a strong narrative to present its Eiger Extreme outdoor clothing. Longing for the great outdoors will either be alleviated or exacerbated by this one.

808303

808303.studio is a virtual Roland TR-808 drum machine and TB 303 bass synthesizer. You can program, record, and share your very own 80s techno masterpiece.

Bliss

Humor can be hard to get right, especially when you want to be taken seriously at the same time. Here, it works, and the result is a memorable site, oozing with confidence.

Jazz Keys

Type your message into Jazz Keys, and you’ll hear it in sound. You can send the message to anyone and let them hear your words — the web lives for side-projects like this.

Érika Moreira

The fabulous, simple site for Sao Paulo-based Érika Moreira has some awesome big type and creative case studies. It’s an excellent example of a non-visual portfolio.

G.F Smith

Earlier this year, the site for leading paper supplier G.F Smith got a redesign. It is a simpler design than the previous site and keeps the visual focus on the products and the colors.

Abbotsford Convent

Abbotsford Convent is a creative arts venue in Melbourne, Australia, based in a former convent. The UI for its site blends architectural forms to acknowledge the building’s heritage.

Waka Waka

Waka Waka designs and builds wooden furniture. The mid-century typography and the noise textures transport the site to the last century’s radical graphic design. There’s some clever disruption to the typical thumbnail approach.

Cone

Sites advertising apps always seem to want to box the design into a hastily de-branded mock-up. Cone takes a daringly refreshing approach by depicting a more expansive mobile experience.

Ride Out

Amsterdam’s Ride Out bike store teases the content with an intriguingly masked video. Plus, we love the wheel-inspired spinning links.

Puddle Sound

This site is a model of minimalism. Beautiful photographs and very little text, there is nothing to distract from the product on display.

Source


Source de l’article sur Webdesignerdepot

Popular Design News of the Week: December 21, 2020 – December 27, 2020

Every week users submit a lot of interesting stuff on our sister site Webdesigner News, highlighting great content from around the web that can be of interest to web designers.

The best way to keep track of all the great stories and news being posted is simply to check out the Webdesigner News site, however, in case you missed some here’s a quick and useful compilation of the most popular designer news that we curated from the past week.

Minimal CSS Loader Collection

 

Webdesign Toolbox: Find the Perfect Web Development Tools

 

Facebook: Free as in Bullsh*t

 

New Year Edition: Top UX/UI Design Trends Rushing to Us In 2021

 

Our 50 Favorite CSS Libraries, Frameworks and Tools from 2020

 

404 Page Inspiration – The Best 404 Pages from Around the Web

 

7 Best Instagram Tools for Designers in 2021

 

HTML New Tab for Chrome – Design your own New Tab Page

 

48 Incredible Ways Designers Responded to COVID-19

 

QR.New – Make a New QR Code with Text

 

Hotwire – HTML Over the Wire

 

Entry.dev – Entry-level Developer Jobs

 

The Dribbble Shots that Defined 2020

 

Convert Web Pages into PDFs with Puppeteer and NodeJS

 

Best Practices for Building Offline Apps

 

Axel – Powerful Rituals to Drive your Team to Success

 

Sorry, but We are not all Designers

 

Zecoda – The Easiest Way to Build Websites Without Code

 

Nebula – A Fully Featured Particle System Designer for the Web

 

Write Code. Not Too Much. Mostly Functions

 

How to Favicon in 2021: Six Files that Fit Most Needs

 

5 Years of Design – Time Travel Through Handpicked, Beautiful Designs

 

How the Web is Really Built

 

How to Be a 10x Developer

 

Why this Forgotten Punctuation Mark Should Be Revived for 2021

 

Want more? No problem! Keep track of top design news from around the web with Webdesigner News.

Source


Source de l’article sur Webdesignerdepot

5 Ways to Boost Engagement With Animation

Animation is a fun and interesting way to bring life to a website. Used correctly, it can capture audience attention, make your website more engaging, and even improve your chances of delivering conversions for your clients.

Unfortunately, like many things in the web design world, it’s also easy to get too carried away with animation. As professional designers and developers, it’s up to us to find the line between making the most of animation on our website projects and creating a site that’s overwhelmed with too much activity.

Fortunately, by the time you’ve finished reading this article, you’ll have a deeper insight into how you can use animation in web design, without going too over the top.

Introducing Animation in Web Design

Animations are virtually everywhere on the web today.

In the past, when designers first discovered that they could embed movement into their websites, the amount of animation we saw was often higher than it needed to be. It wasn’t uncommon to find some websites running entirely on Flash, where every element could be animated.

Fortunately, the trends of modern web design have left those practices behind. These days, it’s a lot more common to make animation a part of the overall user experience, rather than focusing on them as a centerpiece attraction. For instance, you’ve probably noticed plenty of animated sliders showing off pictures in a gallery, or transition animations when people hover over a button.

Since it’s entirely possible to construct an entire website with no animations at all, the key to creating an engaging website today is making sure that every animation you use serves a specific purpose. Your animations should make a website more attractive, easier to use, and better for navigation. Add too many, and you could even risk slowing down a site.

So, where does it make sense to use animation for web design?

1. Loading Animations

One of the best ways to use animations in a website is to distract and delight users as a page loads. You can use the animation to deliver a unique experience, or even just highlight the playful nature of your brand. For instance, just check out this classic load animation called “Tightrope.”

You can also use things like particle animations to capture a customer’s attention and help your visitors relax when they visit a website. Particle animations can be interactive or non-interactive, and they’re a great way to stop visitors from feeling frustrated when a page takes too long to load.

A website by Edan Kwan called “Particle Love” shows you exactly what kind of experience you can create with real-time animations.

The more you can delight visitors with experiences that keep them engaged while the information they need is loading, the less likely people will be to hit the “back” button.

2. Microinteraction Animations

Microinteractions are quick and simple animations that come with specific use cases. Usually, this animation works to provide visual feedback and information when you interact with a specific element.

For instance, this microinteraction design from Colin Garven encourages users to enter their email address and password into a login field:

Ideally, the best way to use microinteractions is to make them as subtle as possible. These tools aren’t here to steal the spotlight from other information on the page. However, they can sometimes encourage your viewers to take the next stage in their conversion journey.

Animated microinteractions can be as complex or as basic as you choose. For instance, you could use them when:

  • Highlighting if a feature is switched on or off;
  • Letting users know when actions were successful (like sending a message in a contact form);
  • Showcasing important information, like prices on a table;
  • Animating icons on your site to encourage action;
  • Depending on your experience with animations, you can even find themes and plugins that come with options already built-in.

3. Dynamic Backgrounds

An animated background can be an excellent way to make your website stand out from the crowd. However, it’s important to remember that excessive animation has a habit of making your site slower and more clunky than it needs to be.

The animated background on the mystaticself.com website is fantastic for introducing customers to new information with a handy dynamic menu.

Often, the only reason that you should create your own dynamic background for a website, is if it’s going to improve your customer’s experience in some way.

Remember, ensure that the animations that you’re using on your website aren’t going to make any aspect of your site more difficult to use. Animated backgrounds need to offer a compliment to your existing website, rather than distracting customers from what they want to do.

Before you go all-in with your background animations, focus on animating small sections of an image, one piece at a time. You can also animate components with very small motions too.

4. Reveal Hidden Messages

Another excellent way to use animation in web design is to harness it for showcasing important information. For instance, a navigation menu is an important component in your website design, but it can also take up a lot of valuable space.

In some cases, a hidden menu that appears when a customer scrolls over a small box or icon could make a lot of sense. You can also think about animated drop-down menus if you’re working with a website that has a large number of pages.

Check out this fun example of an animated CSS3 menu:

The sections change color and move as you hover over them, making it easier to see exactly where you’re clicking.

It’s up to you exactly how creative you want to be when you’re playing with animated menus. The easiest option is often just to have a component that changes color or shape with a hover effect. However, you can also expose hidden menus and extra information too.

For instance, with some websites, you can create pictures that turn over to show information on the other side. That means that you could create an about page with pictures of team members, which flip to show biography information.

Just make sure that everything works smoothly, both on desktop and mobile.

5. Try Carousels

Finally, we come to perhaps the simplest and most popular way of using animation in web design. Carousels are a common component of almost every theme on the web today. They’re great for showing off useful information, such as what a website has to offer, or which deals are available.

When creating a carousel, you can either give your users control over how quickly an image transitions, or you can implement automatic movement. On the heathfield.co.uk website, the designer has added buttons to let you flip backwards and forwards between photos, while also ensuring that the animation is automatic.

Without the animation to show you the pictures sliding into space, the transitions between each picture would be instant – which is a little more jarring for viewers.

Sliders are such a common component of web design today that customers almost expect to see them on many websites. That means that you can enjoy a very effective experience if you want to avoid doing anything too dramatic with your websites.

You can use sliders for everything from showing off products, to displaying testimonials from customers and more. It’s a great way to compress a lot of useful information into one small space on a site.

Use Website Animation Carefully

The most important thing for most designers to remember with animation and web design is that it’s entirely possible to have too much of a good thing. When it comes to creating amazing designs for your clients, you can take advantage of animation to encourage more engagement and a unique experience. However, you shouldn’t allow yourself to go too over the top.

Rather than animating every aspect of a page to constantly grab visitor attention, think about how you can make the visitor experience more compelling with the right animation choices. If an entire page of animation on the background isn’t right for your target audience, perhaps custom animations on a navigation bar or a slider would be a good option instead.

At the same time, remember to make the most of the latest technologies on the market for adding animation to web design. A good combination of CSS3, JavaScript, and HTML5 often makes it easier to create more immersive, high-quality animations that users can interact with on desktop and mobile alike.

Source


Source de l’article sur Webdesignerdepot

Display the Latest News on Your Site With Mediastack

What an extraordinary year 2020 has been for the news! From the ongoing coronavirus crisis, to a turbulent US election, to the unrelenting march of Bitcoin, this year like no other we’ve been glued to our phones micro-analyzing every tidbit of news.

Which makes this the perfect time for mediastack, an awesome REST API that allows you to embed a customizable news feed, sourced from the world’s top news agencies, and updated by the minute, right on your site.

Integrating Global News with Your Site

News is the beating pulse of so many global industries. From political decisions that affect stock prices, to natural disasters that interrupt goods and services, to the whims of celebrities who overnight transform brands from unknown to must-have.

Whether you’re building a site for a non-profit in Louisiana that cares deeply about both Washington politics, and hurricanes in the Caribbean; or you’re building an app for a golf course in Halkidiki that’s focused on both local news, and golf around the world; delivering real-time news content to those users elevates UX.

Tightly integrating the news with your site makes it a hub for users hungry for that very news. The only limit is your creativity.

Display Up-to-Date News on Your Site

When news breaks around the world the top networks scramble to catch up; they simply can’t maintain correspondents in every town and city in the world, and so they rely on affiliates. mediastack pulls in news from over 7,500 different sources in over 50 countries worldwide, giving you access to exactly the same affiliates frequently used by big news organizations like CNN, MSNBC, BBC, or ABC.

When it’s one of the big players in news that breaks a story first, mediastack still has you covered because as will as covering smaller, lesser-known sources mediastack delivers real-time news from CBS, Sky News, The Guardian, Al Jazeera, USA Today, and a host of trusted names across the industry.

If your site targets users that are only interested in certain types of story — like sports, or Hollywood celebrities — then you can even pull in stories from ESPN, TMZ, or Fox News.

Get Started Quickly with mediastack

Getting started with mediastack couldn’t be simpler, and there’s a free plan that’s more than enough to prototype your project.

Full documentation is provided with code examples for PHP, Python, jQuery, Go, and Ruby. To start integrating all you need to do is register for a free access key.

Once you have your free access key, you connect to the API, then customize the results you receive with simple parameters. You can specify the types of news, the precise sources (including omitting sources), languages, countries, and most importantly your keywords.

For example here’s how you’d request science news from CNN, but not TMZ:

https://api.mediastack.com/v1/news
?access_key=[ INSERT YOUR ACCESS KEY HERE ]
&categories=science
&sources=cnn,-tmz

Let’s say you want to display Spanish language crypto news on your site, it couldn’t be easier:

https://api.mediastack.com/v1/news
?access_key=[ INSERT YOUR ACCESS KEY HERE ]
&categories=business,technology
&languages=es
&search=crypto,bitcoin,btc,xrp,ripple,etherium,altcoin

The API sends back simple JSON data that’s easy to run through. Each news item includes the author, title, description, url, source, image, category, language, country, and a published_at timestamp that records when the story was posted.

Once the feed is setup, sit back and relax. It’s all automated from now on.

The Best Source of News for Your Website

mediastack is delivered by apilayer, quite rightly one of the most trusted names in APIs, and is capable of handling millions of requests simultaneously.

Fast, updated by the minute, highly customizable, reliable, and sourced from the biggest names in the news industry, mediastack is an amazing API.

There’s a free-forever plan that allows you to use the API without charge, for up to 500 API calls per month, that’s perfect for trying it out.

For commercial use, plans start at just $19.99/month, and can handle up to 250,000 calls per month. Commercial plans also include HTTPS encryption, live news delivery, access to historical data, and — should you ever need it — technical support.

Head over to mediastack today, to prepare your site for whatever events 2021 throws at us.

 

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

Source


Source de l’article sur Webdesignerdepot