38 private links
Bret Brautigam wrote a thought provoking article on how adding a human voice to a computer could be a form of skeuomorphism. This idea made me wonder… Is any form of conversational design Skeuomorph to some extent? via Pocket
If you’ve signed in to FutureLearn recently, you’ll notice that what were your “My courses” are now “Your courses”. Our Interaction Designer Alla Kholmatova explains the thinking behind this user interface (UI) change. via Pocket
Over the last 5 years, it has been my privilege to coach and mentor UX & UI designers in over 40 countries, and at hundreds of the top brands and design consultancies through my workshops and tutorials on UI Animation. via Pocket
You know those obscure menu buttons on apps and websites that reveal even more menu options? They usually have an ellipsis “…” or an arrow ▼ icon on them and sometimes they’ll even have a More label. Or, better yet, a More with a ▼! These are called overflow menus. via Pocket
Front-end development has shifted to a modular approach, improving the encapsulation and structure of codebases. Tooling became a critical part of any project, and right now there are a lot of possible choices. via Pocket
Line-height and vertical-align are simple CSS properties. So simple that most of us are convinced to fully understand how they work and how to use them. But it’s not. via Pocket
CSS can be used to style and animate scalable vector graphics, much like it is used to style and animate HTML elements. via Pocket
One of the most common use cases for SVG graphics is icon systems, and one of the most commonly-used SVG spriting techniques is one that uses the SVG element to “instantiate” the icons anywhere they are needed in a document. via Pocket
At Alley, we frequently design sites that require any given component to appear in a variety of contexts. A visual style guide allows us to view the site not as a series of pages, but grouping of reusable components. Ultimately, this simplifies and standardizes the way our designs communicate. via Pocket
Working with SVG in a RWD workflow usually involves a design phase and a development phase. The design phase is usually handled by designers who may or may not know how to code. via Pocket
In order to follow this tutorial, make sure you have Docker installed and working on your development computer (verify it by running $ docker -v in your command line). You don't need to have any prior Docker experience as I will try to explain things from the ground up. via Pocket
SVG can be used as an icon system to replace icon fonts. The reasons why SVG makes for a superior icon system are numerous, but we won’t be going over them in this article. via Pocket
In September of last year, I decided I wanted to hear stories and comments about how screen reader users access The Web. I suspected, as a sighted web user, I made a lot of incorrect assumptions. Accordingly, I composed seven questions to find out about strategies for reading and operation. via Pocket
To be accessible, UI components need to work across multiple devices with varying screen-sizes and different kinds of input. Moreover, components should be usable by the broadest group of users, including those with disabilities. via Pocket
This is the sixth post in a series on accessibility from Shopify’s UX team, published biweekly. Check out the introduction here. The need for accessibility is substantial: according to surveys, 22% of the population in USA, 13. via Pocket
Accessibility is often solely discussed in terms of people with disabilities. It is also quickly dismissed by smaller companies and startups because they argue that they don't have time and resources to consider this group. via Pocket
There are too few things not to like about SVG, and I don’t mean the things that browsers cause by incomplete or lack of certain features or buggy implementations. via Pocket
"- А у вас есть некий набор стилистических паттернов? Например: предложить клиенту 20 вариантов обоев для сайта.
- Нет. Мы стараемся давать один вариант дизайна."
As the craft of Web design continues to evolve, we’re recognizing the need to develop thoughtful design systems, rather than creating simple collections of web pages.
A lot has been said about creating design systems, and much of it focuses on establishing foundations for color, typography, grids, texture and the like. This type of thinking is certainly important, but I’m slightly less interested in these aspects of design because ultimately they are and will always be subjective. Lately I’ve been more interested in what our interfaces are comprised of and how we can construct design systems in a more methodical way.
In searching for inspiration and parallels, I kept coming back to chemistry. The thought is that all matter (whether solid, liquid, gas, simple, complex, etc) is comprised of atoms. Those atomic units bond together to form molecules, which in turn combine into more complex organisms to ultimately create all matter in our universe.
Similarly, interfaces are made up of smaller components. This means we can break entire interfaces down into fundamental building blocks and work up from there. That’s the basic gist of atomic design.
Even in the ancient times people knew about the great power of motion. Literature, art, folklore, technologies all witness numerous attempts of people to explain motion as one of the brightest features of life. via Pocket