Making Design Systems Work in the Real World
— by Laura Elizabeth
+
- Design systems
- Pattern library
- Workflow
- Strategy
- Measurement
We’ve been there before. Once a source of hope and bright future for the entire organization, a thoroughly crafted design system is slowly becoming one of those legacy products collecting dust in an obscure Dropbox folder. Why are we still struggling to make a design system stick? What seems to be the main problem? Is it that working with a component-driven workflow is too difficult, or that maintaining the design system feels like too much work? We wanted to find the answers.
Often the team doesn’t use a design system; management doesn’t support it, and after a while, the system stalls and it never recovers. The interesting thing to note here is that none of these are technical issues. As we’ll find out in this chapter, despite its robotic name, design systems are predominantly about one thing: people, and how to organize them.
Accessibility in Times of Single-Page Apps
— by Marcy Sutton
+
- Accessibility
- JavaScript
- Semantics
- Structure
- Interactivity
- Focus Management
- ARIA
- Testing
An increasing number of web apps and websites are architected and rendered entirely with JavaScript these days, both client- and server-side. Accessibility is as important of a consideration as it’s ever been, with more products and services users depend on moving online–things like bill pay, shopping and education, among others.
Fortunately, we can apply web accessibility basics to our websites and web applications and start to make a huge impact. However, when developing Single Page Apps (SPAs), there are some unique accessibility requirements we must consider to avoid constructing barriers for users with disabilities. Designing and developing inclusively not only benefits the roughly 15% of people with some kind of disability; it benefits absolutely everyone.
Production-Ready CSS Grid Layouts
— by Rachel Andrew
+
- CSS Grid
- Flexbox
- Fallback
- Layouts
- Strategy
- Gotchas
CSS Grid has been around for a while, but what would be the right strategy to build bulletproof CSS layouts these days? Do we start building Grid-first, or Flexbox-first, or Fallback-first? In this chapter we won’t dive deep into the spec. Instead, we’ll look into the main things that trip people up when starting to use Grid Layout.
We’ll take a look at the fundamental parts of CSS: Grid and Flexbox. Key to both of these methods are concepts of sizing, space distribution and alignment. Our hope is that by reading this chapter, and building the examples, you’ll have a better understanding of CSS layout as a whole.
A Strategy Guide to CSS Custom Properties
— by Mike Riethmuller
+
- CSS Custom Properties
- Preprocessors
- Components
- Strategy
CSS Custom Properties have a huge potential to change how we write and structure CSS and to a lesser extent, how we use JavaScript to interact with UI components. They provide opportunities for well-organized stylesheets, but also the potential to add complexity to CSS. To get the most out of them, we need to know how we write and structure CSS with custom properties.
In this chapter, we aren’t going to focus on the syntax and how they work — there are many tutorials about it. Instead, we’ll explore how dynamic properties are different from variables in preprocessors, how to organize stylesheets with preprocessors in mind, and how to choose a strategy for getting the most out of CSS Custom Properties.
Building an Advanced Service Worker
— by Lyza Gardner
+
- Service Workers
- Fetch API
- Cache API
- Lifecycle
- Maintenance
- Strategy
Service Workers enable a wide array of great features and are beginning to feel like a lynchpin of the modern web. Yet even folks who’ve cooked up a few service workers of their own can be hard-pressed to explain what exactly the right strategy for building, using and maintaining a service worker is.
In this chapter, we’ll look into common scenarios, techniques and gotchas for building a quite sophisticated service worker. We’ll explore browser quirks, versioning issues, how to deal with caches, how to provide an offline experience and how to use Channel Messaging API, Web Push and Notifications as well as Background Sync.
Loading Assets on the Web
— by Yoav Weiss
+
- Delivery
- Compression
- Priorities
- Priority Hints
- Critical CSS/JS
- Intersection Observer
- Image Lazy Loading
- Web Packaging
- HTTP/2
- Server Push
- Latency
- Third-Parties
What does it take to deliver web sites in the highest performing way possible? What would it take for us to say that given certain bandwidth, latency and CPU constraints, a web site was delivered to the user in the best possible speed? This is a question that we’ve spent a lot of time on in the last few years, thinking about what the ideal performance would take both on the browser side as well as on the server/content side.
This chapter will explore ways to make sure these conditions are maintained when loading and executing content on the web. These conditions most probably require changes in the way browsers load web content. However, they cannot rely solely on that. In order for some of these conditions to be met, web content must also be changed; the chapter will focus on fastest resource loading.
On Designing Conversations
— by Adrian Zumbrunnen
+
- Conversational Interfaces
- Writing
- Motion
- Chatbots
- Workflow
- Platforms
Think about the last time you had an engaging conversation. When was it and what made it engaging to begin with? We often have a hard time remembering why certain conversations made us feel the way they did. No matter what our individual preferences, there are underlying rules and principles that define whether we feel a conversation is effective or whether it’s a waste of time.
Conversational interfaces often live outside of the scope of websites, and sometimes are integrated with third parties, be it Facebook Messenger, Whatsapp or voice-based UIs. What do we need to know to create those experiences? In this chapter, we’ll explore the guidelines on designing engaging and useful conversations, the lessons we’ve learned creating one and a workflow to create your own conversational experiences.
UX Design of Chatbots and Virtual Assistants
— by Greg Nudelman
+
- Bot frameworks
- Intents
- Machine Learning
- Wearables
- Hands-Free Control
- Voice UIs
Today, people demand polished, context-aware, personalized cross-platform experiences fully integrated into their work and leisure activities. Tech giants are rising to this challenge, competing with one another by providing sophisticated frameworks and cloud-based services for almost every component of your app, including (which is most important for us) robust language parsing and speech recognition frameworks.
In this chapter, we’ll discuss key considerations for building conversational bots. Throughout the chapter, will be assembling a bot similar in functionality to a basic Amazon Alexa, as an example to showcase some of the key features of conversational UIs. This chapter will give you enough background to comfortably design and code your own bot similar to basic “unskilled” Alexa for whatever app you choose.
Crafting Experiences for AR/VR/XR
— by Ada Rose Cannon
+
- Virtual Reality
- WebXR API
- VR Design
- Interactivity
- Social VR
- Audio
- Performance
- Frame Rate
- Physics
Cross Reality (XR) is an umbrella term for Virtual Reality (VR), Augmented Reality (AR) and Mixed Reality (MR). All of these terms describe different levels of mixing a virtual world with the real world. Work is being done to integrate these technologies into the Web platform but we can build these technologies into the Web today.
The goals of this chapter are to explore how it works and help show some patterns designers and developers can explore to start using them today. We’ll explore the possibilities of WebVR and a strategy for building and designing scalable VR experiences.
Bringing Personality Back to the Web
— by Vitaly Friedman
+
- Design Patterns
- Personality
- Trends
- A/B Testing
- Brutalism
- Workflow
- Psychology
- Usability
- Offboarding
- Art-Direction
Generic web layouts have become somewhat of a misnomer in conversations circling around web design these days. We’re bored and slightly annoyed by how predictable and uninspired most web experiences have become. Not without reason, though. Every single landing page seems to be a twin of pretty much every other web page.
In this chapter, we’ll look into a few practical techniques and strategies that might help you find, form, and surface your personality efficiently. By doing so, we’ll explore how doing so consistently could fit into existing design workflows, along with plenty of examples to give you a good start. But before we get there, we need to figure out how omnipresent design patterns and best practices fit into the equation.