Let’s use React, styled-components, and react-flip-toolkit to make our own version of the animated navigation menu on the Stripe homepage. It’s an impressive menu with some slick animation effects and the combination of these three tools can make it relatively easy to recreate.This is an intermediate-level wa...
Or the priority navigation pattern, or progressively collapsing navigation menu. We can name it in at least three ways. There are multiple UX solutions for tabs and menus and each of them have their own advantages over another, you just need to pick the best for the case you are trying to solve. At design and developme...
This post is the second in a series about the power of CSS.Article Series:Colorizing SVG Backgrounds Dropdown Menus (this post)CSS is getting increasingly powerful, and with features like CSS grid and custom properties (also known as CSS variables), we’re seeing some really creative solutions emerging. Some o...
To say that responsive web design has changed our industry would be an understatement at best. We used to ask our clients which resolutions and devices they wanted us to support, but we now know the answer is “as many as possib...
View demo Download source Today we’d like to share an experimental tab-like navigation with you. The main idea is to animate the bars of the navigation in a way that they expand to reveal some further content. The navigation is either shown in a vertical or horizontal orientation. For this experiment we are usin...
I saw an interesting take on off-canvas navigation the other day over on The New Tropic. It wasn’t the off-canvas part so much. It was how the elements within the nav took up space. They stretched out to take up all the space, when available, but never squished too far. Those are concepts that flexbox makes prett...
Buttons are a common element of interaction design. While they may seem like a very simple UI element, they are still one of the most important ones to create.In today’s article, we’ll be covering the essential item...
Design is more than just good looks – something all designers should know. Design also covers how users engage with a product. Whether it’s a site or app, it’s more like a conversation. Navigation is a conversat...
The following is a guest post by Micah Miller-Eshleman. Micah designed a variation of the “Priority+ Navigation” concept and uses it in production at the college he works for. I always dig a show & tell behind the thinking and creation of a design pattern, especially when it’s working out there i...
We talk a lot about progressive enhancement and how it improves backwards compatibility. But how straightforward is it to apply progressive enhancement concepts to a real-life project? When designing a rich interactive experience...
Recent Comments