Bookmarks - page 5

2019

September

Optimizing for collaboration in Figma

Last week, Figma Chicago held our 2nd Meetup, titled “Optimizing for Collaboration in Figma”. This is a recap of the event.
Tagged with: Figma, Remote, and Design

A list of creative exercises for creative teams

Every Friday afternoon, the Product Experience team at Foursquare gets together and ends the week with a creative exercise. The PX team is a big mash-up of visual designers, UX, copy, research, and product operations, and it’s a lot of people’s favorite meeting of the week.
Tagged with: Teams and Creative

Brad Frost and Dan Mall: Rethinking designer-developer collaboration

In this episode of the Design Better Podcast, Aarron and Eli talk with Dan and Brad about reducing friction between these two very different disciplines. They explore a few misconceptions around agile methodology, the risks of the creative technologist role, and the latest in design systems thinking. This is a conversation you don’t want to miss.
Tagged with: Podcast, Design Systems, and Collaboration

Team models for scaling a design system

Nathan Curtis looks at how we can avoid the 'Overlords' those who may have previously 'owned' the design system to a federated approach, allowing consistency but also allowing the design system to scale with multiple contributors.
Tagged with: Design Systems

Open Source Guides

Open Source Guides are a collection of resources for individuals, communities, and companies who want to learn how to run and contribute to an open source project.
Tagged with: Open Source

Making remote teams work

Mandy Brown, Editorially’s CEO, looks at remote work culture from a positive angle. Through interviews with other remote workers and mining her own experiences, Brown offers up some observations about what makes for a good remote culture, and why it’s likely here to stay.
Tagged with: Remote

Vanilla pattern

A Coggle Diagram about Already exists (Does it fulfill all requirements?) and Does not already exist

The 1-hour design principles workshop

Design principles are a valuable tool for any team that works together towards a shared outcome. Written well, design principles can create alignment, speed up decision-making, and increase the quality of the team’s output. Lately, I’ve worked with two of my teams to write design principles.
Tagged with: Design Principles and Workshop

An HTML attribute potentially worth $4.4M to Chipotle

My parents are retired. They continue to try to pay for meals. I don’t want them to. So we often end up in a competition to see who can pay first. In this case, I knew I had an advantage. My card details were already stored in the browser.

GOV.UK design principle posters

A set of posters the GOV.UK team put together to communicate their design principles.
Tagged with: GOV.UK and Design principles

Atlassian plays

Step-by-step instructions for tracking your team's health, and new ways of working ("plays") that build your Get $#!τ Done™ muscle. Use the plays on their own, or in concert with Atlassian tools.
Tagged with: Team Building

User activity research cards by GOV.UK

16 cards describing different user research activities and explains when and how to use it effectively.
Tagged with: UX, User Research, and GOV.UK

A color accessibility tool for designers and developers

Hex Naw is a tool that helps designers and developers test entire color systems for contrast and accessibility. Plug in your palette or color system and let Hex Naw do the rest.
Tagged with: Accessibility, a11y, Colour, and a11y tools

Introducing SF Symbols

SF Symbols introduces a comprehensive library of vector-based symbols that you can incorporate into your app to simplify the layout of user interface elements through automatic alignment with surrounding text, and support for multiple weights and sizes. Learn how easy it is to adapt to different screen sizes and layouts, and improve the accessibility and localizability of your app. Get details on how to create new symbols for your specific needs that perfectly match the visual style of SF Symbols.
Tagged with: Video, Design, SVG, Icons, and Apple

Light Theme, Redeemed

This is a story of light theme’s redemption. So sit back, remove your protective eyewear, and let’s go on a journey. Maybe you’ll even find yourself using light theme in the coming days. That said, you probably don’t use light theme today.

The gradual design system: how we built Slack kit

In 2016, Slack was two years old and already used by millions of people. Our codebase had grown rapidly, and like many companies that focused on product/market fit, our code was built in a way that favored time-to-market over maintainability, consistency, or reusability.
Tagged with: Design System

Two browsers walked into a scrollbar

The scrollbar is a humble but productive mechanism that operates as the primary means through which one can traverse a document.
Tagged with: CSS, Front End, Accessibility, and a11y

Jina Bolton - Designing a design system

Product design for web and mobile is evolving at a fast pace. As the range of devices and platforms continues to expand, so do the various design considerations. Design systems help a design team build a framework that meets their needs by bringing together all of the critical design components - in one place.
Tagged with: Video and Design Systems

Typography in design dystems

I’ve never really been happy about the way I’ve worked with typography in design systems before. As I’m currently working on another big design system, it seemed time to change that. Let’s deconstruct these a bit.
Tagged with: Design Systems and Typography

Star Wars styling (a silly idea that might just work)

I sometimes work with other designers helping them to translate their design atmosphere and wide screen layouts into responsive designs. Breaking down their designs into systems is big part of what I do.
Tagged with: CSS and Typography

10 tips on using components in Figma

This article, explains what components are, how they work, and give you a set of best practices you can use to incorporate them into your design workflow.
Tagged with: Figma and Components

Change aversion and the conflicted user

Change aversion, much like change itself, is a divisive topic. One camp asserts that users hate change. Software users have “baby duck syndrome” – imprinting on the first system they learn and judging later iterations by their similarity to the first.
Tagged with: UX and Design

Top 10 application-design mistakes

Designing complex applications is a challenging undertaking. Building applications that have both the depth to support complicated tasks and the intuitiveness to make it clear how to get that work done is a tremendous challenge.
Tagged with: UX and Design

WICG/focus-visible

Based on the proposed CSS :focus-visible pseudo-selector, this prototype adds a focus-visible class to the focused element, in situations in which the :focus-visible pseudo-selector should match.

The Contentful design system

A design system by Contentful that intends to reduce the overhead of creating UI by providing tools and guidance for digital teams.
Tagged with: Design Systems

Garret Miller - The gradual design system

As Slack has rapidly scaled, we've built our own component library that outlines our product foundations and interface elements. In the process, we found that the most important output of our work isn't just the design system, but rather the processes that define how we work together with shifting priorities and a rapidly scaling product. Learn about what we've built, the hiccups we've encountered along the way, and how the work we're doing now will pave the way for an even more powerful Slack in the future.
Tagged with: Design Systems and Video

GOV.UK Service Manual

Helping government teams create and run great digital services that meet the Digital Service Standard. The Service Standard provides the principles of building a good service. This manual explains what teams can do to build great services that will meet the standard.

Design principles

Design Principles are a set of considerations that form the basis of any good product. Design Principles help teams with decision making. A few simple principles or constructive questions will guide your team towards making appropriate decisions.
Tagged with: Design principles

Design principles: what are they and how do they help?

From Silicon Valley startups like Airbnb to multi-national companies like IBM, design principles are becoming adopted. But what exactly are design principles? Senior management is very good at establishing goals, but are much worse at clearly defining how the company will achieve those goals.
Tagged with: Design principles and Workshop

Design principles for the win

The most comprehensive collection of design principles on the Internet.
Tagged with: Design principles

Why we prefer CSS custom properties to SASS variables

Since the release of our framework a few months ago, we've been asked by many users why we opted for CSS variables, instead of SASS variables, even though we do use SASS in the framework.
Tagged with: CSS, SASS, and CSS Variables

The problem with tooltips and what to do instead

Tooltips are messages that appear when the user hovers over part of an interface, usually an icon, to explain how certain things work or what they mean. They then disappear when the user hovers off the element. Adam explains some of the pitfalls with tooltips and offers some alternative advice.
Tagged with: a11y and Accessibility

Styling links with real underlines

Finally we can demarcate links without sacrificing style thanks to two new CSS properties, text-underline-offset and text-decoration-thickness.
Tagged with: CSS

Mark Boulton - The ugly truth about design systems

Design systems are great for scaling design across complex organisations and products. But in our drive for scale, consistency and standards, have we considered the risks and the cost? What are the problems we may face and how can we overcome them? In this talk, Mark will expose the ugly truth of rolling out design systems; from engineering and code, to designers and stakeholders and provide guidance from his experience of producing design systems for over a decade.
Tagged with: Design Systems and Video

Faster image loading with embedded image previews

The Embedded Image Preview (EIP) technique introduced in this article allows us to load preview images during lazy loading using progressive JPEGs, Ajax and HTTP range requests without having to transfer additional data.
Tagged with: Performance and Front End

Cancel vs close: design to distinguish the difference

Distinguishing between these two actions is critical to avoiding losing users’ work. Save changes before closing a view, use text labels rather than an X icon, and provide a confirmation dialog before destructive actions.
Tagged with: UX and Design