Why Analytics?
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.
New challenges, risks, and opportunities for designers
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. …
How to design effective and responsible rewards
Rewards Are Powerful
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.
An Introduction to Accessible Rich Internet Applications for Designers
Introduction
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. …
Overlooked features with powerful results
Defining Navigation
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. …
Quick wins to make your designs more inclusive
What is Accessibility?
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.
Get a website up and running in minutes even if you have never coded before.
1. Webflow
A primer to creating timeline based animations without knowing JavaScript
Introduction
The GreenSock Animation Platform (GSAP for short) is a powerful JavaScript library that enables front-end developers and designers to create robust timeline based animations. This allows for precise control for more involved animation sequences rather than the sometimes constraining keyframe and animation properties that CSS offers.
The best part about this library is that it’s lightweight and easy to use.
With GSAP, you can start creating engaging animations with little to no knowledge of JavaScript.
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. …
The best productivity and performance plugins for Sketch
1. Sketch Runner
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.
Getting started
In this article, we’re going to take the basic concepts from part 1 and pair them with the keyframes and 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…
