Generating actionable insights before embarking on a site redesign or update is crucial for creating a successful foundation for your design projects. Whether it’s for a website, app, or e-commerce shop, it’s vital to use a combination of quantitative and qualitative research to aid you in your design process. Although this analysis is a critical first step for any design project, it can often be intimidating to know where to start. By learning the fundamentals of analytics tools and harnessing the power of data-informed thinking, you can bolster your decision-making process and improve the efficacy of your designs.
Within the past few years, designers have been pushing the limits of modern web browsers with new ways to tell stories via websites. Technologies like WebGL, WebSockets, and 3D rendering APIs like three.js have all helped digital creators rethink the way a traditional webpage behaves. Websites no longer have to be a series of scrolling, static pages that linked via hyperlinks. Instead, they can be interactive playgrounds that immerse their respective users. …
You’ve most likely downloaded a new app for your phone, only to delete it a few days later or never open it again. You may have also caught yourself scrolling through your Instagram feed for hours at a time, with no real reason. It’s clear that certain digital products know how to ingrain themselves in our daily routines while others cannot seem to get more than one or two uses.
Imagine if you clicked on a checkbox and instead of the square filling in or turning into a check, you saw it behaving like a dropdown, giving you other options and selections to choose from. Naturally, this would be a frustrating and confusing experience as the element did not function as you expect it would. When users with disabilities navigate your site with assistive technologies, they may be experiencing this issue more than you might think. …
Although we almost always think of a site’s header when referring to navigation, it’s important to remember that navigating a site is not only moving from page to page but also from section to section within individual pages. When designing a navigational experience, designers should make sure that all users, impaired or not, are able to maneuver through your site’s content at their own pace with little to no frustration.
For the general public, this usually means designing a clear header with descriptive titles and ensuring the content on each of your pages has a cohesive narrative. …
When was the last time you visited a website and got frustrated because you had trouble using it? Maybe the site was using Web GL technology that your browser didn’t support, you couldn’t read it’s text due to it being so small, or the mobile experience simply wouldn’t load on your iPhone. If you think back to these annoying experiences where you functionally could not navigate a site, chances are you’ve experienced inaccessibility in one form or another.
animation properties that CSS offers.
The best part about this library is that it’s lightweight and easy to use.
This guide will show how to set up and use GSAP’s TweenMax feature and also dive into a bit of Club GreenSock’s DrawSVG plugin. …
This is the second article in a two-part guide intended to give non-developers the tools to create their own CSS animations. In part 1, we created a button and learned the fundamentals of transitions, easing, and the :hover selector. If you haven’t read part 1 yet, you can find it here.
In this article, we’re going to take the basic concepts from part 1 and pair them with the
transform properties to create precise, multi-step animations. To demonstrate this, we’re going to create an SVG animation that will execute on hover. We will also discuss the proper technique…