Tag - Building

Building Better UI Designs With Layout Grids

(This is a sponsored post.) Designers of all types constantly face issues with the structure of their designs. One of the easiest ways to control the structure of a layout and to achieve a consistent and organized design is to apply a grid system. A grid is like invisible glue that holds a design together. Even when elements are physically separated from each other, something invisible connects them together. While grids and layout systems are a part of the [...]

Building Accessible Menu Systems

Editor’s Note: This article originally appeared on Inclusive Components. If you’d like to know more about similar inclusive component articles, follow @inclusicomps on Twitter or subscribe to the RSS feed. By supporting inclusive-components.design on Patreon, you can help to make it the most comprehensive database of robust interface components available. Classification is hard. Take crabs, for example. Hermit crabs, porcelain crabs, and horseshoe crabs are not — taxonomically speaking — true crabs. Articles on Smashing Magazine — For Web Designers [...]

Building A Large-Scale Design System: How A Design System Was Created For The U.S. Government (Case Study)

   Editor’s Note: We’ve been closely working with Maya on this article, and we’re happy to see the final result now being published on 18F. We highly encourage more teams to share the lessons they learned when building design systems or pattern libraries, and we’re always happy to support them in writing, editing and shaping that article. This post is a re-post of Maya’s final article.Today, [...]

Building Inclusive Toggle Buttons

   Some things are either on or off and, when those things aren’t on (or off), they are invariably off (or on). The concept is so rudimentary that I’ve only complicated it by trying to explain it, yet on/off switches (or toggle buttons) are not all alike. Although their purpose is simple, their applications and forms vary greatly.In this inaugural post, I’ll be exploring what it [...]

Meet XRespond Testing Tool: Let’s Make Building Responsive Websites Simpler

   The way people consume information is constantly evolving. As web designers and developers, we keep up with all of the different screen shapes and sizes, learning to create beautiful, flexible software. Yet most of the available tools still don’t reflect the nature and diversity of the platform we’re building for: the browser.When I was making my first responsive website in 2012, I quickly realized how [...]

Building A Simple AI Chatbot With Web Speech API And Node.js

   Using voice commands has become pretty ubiquitous nowadays, as more mobile phone users use voice assistants such as Siri and Cortana, and as devices such as Amazon Echo and Google Home have been invading our living rooms.These systems are built with speech recognition software that allows their users to issue voice commands. Now, our web browsers will become familiar with to Web Speech API, which [...]

Building Pattern Libraries With Shadow DOM In Markdown

   Some people hate writing documentation, and others just hate writing. I happen to love writing; otherwise, you wouldn’t be reading this. It helps that I love writing because, as a design consultant offering professional guidance, writing is a big part of what I do. But I hate, hate, hate word processors.When writing technical web documentation (read: pattern libraries), word processors are not just disobedient, but [...]

Building Production-Ready CSS Grid Layouts Today

   Industries often experience evolution less as slow and steady progress than as revolutionary shifts in modality that change best practices and methodologies seemingly overnight. This is most definitely true for front-end web development.Our industry thrives on constant, aggressive development, and new technologies emerge on a regular basis that change the way we do things in fundamental ways. The post Building Production-Ready CSS Grid Layouts Today appeared [...]