Obscure Solutions For Mobile Design That Boost UX

It’s no secret that smartphone usage has doubled over the last five years, accounting for an estimated 3.8 billion users this year. This tells us clearly where people’s attention is and how important mobile web designers are to improving the user experience. We’ve seen plenty of web design experiments in recent years adopted by companies of all sizes....

16h

UI Design Testing Tools I Use All The Time

When I started in web design 27 years ago, testing with users was time-consuming and expensive, but a new generation of tools has changed all of that. Most of us have heard of some of the more popular tools such as Userzoom or Hotjar, but in this post, I want to explore some of the hidden gems I use to test the interfaces I am involved in creating....

3d

Creating An Outside Focus And Click Handler React Component

Oftentimes we need to detect when a click has happened outside of an element or when the focus has shifted outside of it. Some of the evident examples for this use case are fly-out menus, dropdowns, tooltips and popovers. Let’s start the process of making this detection functionality. The DOM Way To Detect Outside Click If you were asked to write...

5d

The State Of Mobile And Why Mobile Web Testing Matters

Things have changed quite a bit over the last decade when we just started exploring what we could do on a tiny, shiny mobile screen. These days, with mobile traffic accounting for over 50% of web traffic, it’s fair to assume that the very first encounter of your prospect customers with your brand will happen on a mobile device. Depending on the nature...

6d

State Of GDPR In 2021: Cookie Consent For Designers And Developers

Last week, I gave you an update on everything that’s happened with GDPR since 2018. (TL;DR: A lot has changed.) In this article, we’ll look at cookie consent: specifically, the paradox where marketers are heavily reliant on Google Analytics cookie data but need to comply with regulations. We’ll take a look at two developments that have impacted cookies,...

1w

Fresh Inspiration For March And A Smashing Winner (2021 Wallpapers Edition)

More than ten years ago, we embarked on our monthly wallpapers adventure to provide you with new and inspiring wallpaper calendars each month anew. This month, the challenge came with a little twist: As we announced in the February wallpapers post, we’ll give away a smashing prize to the best March design today. Artists and designers from across...

2w

Building User Trust In UX Design

Building trust is one of the central goals of user experience design. And yet trust is a concept that’s very hard to define in a precise manner. We all know it when we feel it but often fall short of putting it in words. Being able to turn the elusive and intangible into actionable and concrete steps, however, is exactly what makes UX so crucial in...

2w

Building A Discord Bot Using Discord.js

Team communication platforms are getting popular day by day, as more and more people work from home. Slack and Discord are two of the most popular team communication platforms. While Discord is focused on gamers, some functionality, such as the ability to add up to 50 members in the voice call room, make it an excellent alternative to Slack. One of...

2w

Material Design Text Fields Are Badly Designed

I’ve been designing forms for over 20 years now, and I’ve tested many of them for large organizations like Boots, Just Eat and Gov.uk. One topic that comes up a lot with forms is: where to put the label. In the early days, we talked about left-aligned labels versus top-aligned labels. These days the focus is more about placeholders that replace labels...

2w

Create Responsive Image Effects With CSS Gradients And `aspect-ratio`

To prepare for our future image effects, we’re going to set up a card component that has a large image at the top followed by a headline and description. The common problem with this setup is that we may not always have perfect control over what the image is, and more importantly to our layout, what its dimensions are. And while this can be resolved...

2w