webstack
How I Made a Generator for SVG Loaders With Sass and SMIL Options
While learning Vue.js, I started building free web tools that involved the exploration of SVG, with the goal of learning something about both! Let’s take a look at one of those tools: a generator that makes SVG loaders and lets you choose between SMIL or Sass animation, different styles, colors, sha..
18 Free High-Resolution Adobe Illustrator Brush Packs
If you’re looking to add unique elements to your Illustrator designs or want to spice up your projects, you’re going to need a quality Illustrator brush pack. While Illustrator is a popular design program, you can’t find as many resources for it as you can for Photoshop.
That’s why we’ve decided to..
One Way to Convert Code Indentation
A question:
If you copy a code sample that uses two-space indentation and you want to convert it to four-space indentation, what’s the *fastest* and easiest option?
Matt Stauffer, Twitter
I wrote about doing this in Sublime Text a few years back. It’s not terribly different in VS Code, I don’t thi..
Stealing Game Animation Techniques to Engage Users
Today’s websites are overflowing with animations—often too many. They get in the way of the content and slow down our busy users. But at the same time: they’re wonderful. They bring websites to life, are fun to implement and can be incredibly impressive to show off. I think they’re great. Sorry impa..
7 Essential Design Tips for a Killer “About Us” Page
Creating an incredible brand experience for an end-user is about more than just designing the right home page or lining up a series of great product pages.
Effective website design conveys crucial information about a company, through everything from font styles, to image choices. Nowhere is this r..
E-Commerce Navigation UX – 13 Common Pitfalls & Best Practices
(Note: Unfortunately, e-mail and RSS don’t support advanced layouts and features. If the graphics in this article look strange, you may want to read the article in your web browser.)
Key Takeaways
Our UX benchmark of 60 large e-commerce websites shows that “Category Navigation” performs acceptable overall
However, there’s significant room for improvements — particularly within the topic of “Category Taxonomy”
This article will cover 13 commonly observed e-commerce navigation UX issues, and show the “navigation best practices” we’ve verified to perform the best with end-users.
Designing a user-friendly e-commerce category navigation requires solid information architecture, systematic labeling and hierarchy, and curated intermediary category pages — and that’s just the beginning.
Our Homepage & Category benchmark contains 10,900+ Homepage and Category UX elements that have been manually reviewed and scored by Baymard’s team of UX researchers, with an additional 3,100 best practice..
How to Handle Losing Your Motivation as a Designer
Sometimes, you just don’t want to do your work. It can be such a hassle to get up, start up the computer, fire up the software, and do what needs to be done.
You feel tired and bored, having lost sight of why you chose a career in design in the first place, and you find yourself wondering whether y..
Scrollbar Reflowing
This is a bit of advice for developers on Macs I’ve heard quite a few times, and I’ll echo it: go into System Preferences > General > Show scroll bars and set to always. This isn’t about you, it’s about the web. See, the problem is that without this setting on, you’ll never experience scrollbar-trig..
Architecting With Next.js
(This is a sponsored post.)
Free event hosted by Netlify coming up next week (Wednesday, August 25th): Architecting with Next.js. It’s just a little half-day thing. No brainer.
Join us for a special event where we’ll highlight business teams using Next.js in production, including architecture deep..
Introduction to the Solid JavaScript Library
Solid is a reactive JavaScript library for creating user interfaces without a virtual DOM. It compiles templates down to real DOM nodes once and wraps updates in fine-grained reactions so that when state updates, only the related code runs.
This way, the compiler can optimize initial render and the..