Bookmarks

I’ve always regarded myself as a perfectionist, and as I’ve recently started exploring this trait in my CBT sessions I can see that it isn’t necessarily helpful. Having read this article I would say I hold aspects of both the adaptive and maladaptive perfectionist types and was a helpful read in why I can get myself into an anxious state, and where setting unatainable goals can dramatically affect my mental health.

A great article on wether you should use the grid role or use a table. A helpful run through with examples.

A great document highlihgting ways to make social media posts accessible to all.

Really interesting insight to the number input type. Especially the focus on accessibility and the silent loss of non number user input. Love the level of effort that the GDS team take to investigate these issues.

An interesting approach to fluid typography. Need to spend some time exploring this.

A helpful tool to find colours with similar contrast without colours going dirty.

Really interesting to hear some of the thinking about front end editing with TinaCMS on JAMstack Radio.

Need to take a look at this in more depth.

Wasn’t aware of this library for adding touch support. Looks good.

I recently switched back to Apple Music from Spotify. This service has helped me convert my Spotify playlists to Apple Music with the click of a few buttons.

Grabbing Strava activity polylines through the Strava API

Nice summary of why body copy should be bigger on the web.

An realy interesting indepth look into how Figma approaches line height and typograpy.

Need to get around to cross posting my articles to Medium, hopefully I can use this plugin to do so.

Nice little tool to create colour palletes based on target aspect ratios.

Responding to raw ideas

Sharing bookmarks / like via iOS Shortcuts

A super helpful site to create date/time formatted strings based on Strftime

Create a simple JSON feed in Jekyll.

I’m not surprised that a campaign like this exisits. What a time to be alive.

A great little overview of the different ways you can style focus behaviour.

Last week I was moaning about the fact that 63% of developers surveyed don’t test accessibility. And I was banging on about editing a ‘learn HTML’ book which was riddled with basic accessibility errors, when Frederik replied in order to shut my whining and make me do something about it:

Sacha Baron Cohen is the well-deserved recipient of ADL’s International Leadership Award, which goes to exceptional individuals who combine professional success with a profound personal commitment to community involvement and to crossing borders and barriers with a message of diversity and equal o

It's a tool that brings attention and understanding to how color contrast can affect different people with visual impairments. The Web Content Accessibility Guidelines (WCAG) covers a wide range of recommendations for making Web content more accessible.

A pain point of the IndieWeb is that it's sometimes not as convenient to share content as it is on the common social media platforms. Posting a new short “note” on my site currently requires me to commit a new markdown file to the repository on Github.

One of the core principles of the IndieWeb is that people should own their own content. Controlling how and where they publish makes users more independent from big content silos.

Recently, I bought an iPad Pro and have been using it for basically everything except software development, which it’s not yet good at.

Building and managing a web project is a big, complex process — one that branches far beyond the phases directly in front of us. On one hand, there’s the multi-disciplinary nuts and bolts work of creating the site itself.

This is not a piece about why you should consider integrating content specifications into your design system. You want this essay instead if you’re in two minds about the business value.

Take a journey through a 3D network of our papers. Across 7 essays, leading historians explore how the past century and a half has forged some of the defining features of today’s scientific system.

Sometimes you want to break your components out of the constraints that they find themselves in. A common situation where this occurs is when you don’t have much control of the container that it exists in, such as a CMS main content area.

A key step in the data visualization process is the conversion of data to the right format. When working with geospatial related information in particular, data needs to be in geoJSON to be accurately superimposed onto a map.

Content types support the underlying structure that is needed to make content reusable. All content types have attributes, or properties. Each property has a name and datatype.

When we first started building websites, they were “static,” meaning each page was coded individually and published by putting files on a server. Today, we have content management systems (CMS) that allow us to turn every piece of content into data, with technical content types.

This is a declaration of love for personal websites, written from years of thinking on the subject, reviewing thousands of portfolios, building websites for friends and bookmarking those of strangers. It’s a subject I’m so passionate about, I built my business on it.

With iOS 11, the iPad Pro made a tremendous leap in capability. The hardware is fantastic, multi-tasking is no longer a bolted on step-child, and keyboard-driven workflows are becoming more common.

Looking for a short workshop that shows the power of Design Sprints or Design Thinking? Use Lightning Decision Jam! It's a problem solving exercise for up to 100 participants! Lightning Decision Jam - 1 HOUR WORKSHOP - Design Sprint & Design ThinkingSpotify Playlist: https://open.spotify.com/user/11

I joined Stack Overflow in the spring of 2017 as a product designer on their then in-beta product, Documentation. After that, I worked on various Q&A efforts. After that, I’d create and maintain their design system, Stacks.

What about Semantics? “SORRY. I disagree. Nonsemantic classnames that refer to visual styles will always be a bad idea.” “If you use templates, then giving a meaningful name to the file should be enough.

GitHub is looking for a Production Designer to join the Design Systems team. This role will tackle high-visibility design projects and build a library of design assets for use in presentations. Styles can be mixed and matched to achieve many different layouts, independent of their location.

For active controls on the page, such as buttons and form fields, any visual boundary that indicates the component's hit area (the region where a pointer can activate the control) must have sufficient contrast with the adjacent background.

There’s a growing demand for designers to make their interfaces accessible to all users. It’s important to accommodate users with disabilities, but there are many myths to color contrast accessibility being perpetuated by misinformed people.

When people think of CSS Grid they normally envision image grid layouts and full web pages. However, CSS Grid is actually a superb technology for laying out articles as well, as it allows you to do things which previously was tricky to achieve.

A daily view of our planet from above.

I’ve been styling :hover, :focus, and :active states the same way for years. I can’t remember when I started styling this way. Here’s the code I always use:

Cool URIs don't change What makes a cool URI? A cool URI is one which does not change. What sorts of URI change? URIs don't change: people change them. There are no reasons at all in theory for people to change URIs (or stop maintaining documents), but millions of reasons in practice.

Link directly to Flickity files on unpkg. If you want to use Flickity to develop commercial sites, themes, projects, and applications, the Commercial license is the appropriate license. With this option, your source code is kept proprietary. Read more about Flickity commercial licensing.

What interface component would you use for selecting from a large set of options? For most designers, checkboxes come to mind. But a long list of checkboxes looks intimidating to users and can cause them to abandon your form.

In the Middle Ages, creating a book could take years. A scribe would bend over his copy table, illuminated only by natural light—candles were too big a risk to the books—and spend hours each day forming letters, by hand, careful never to make an error.

Color contrast is an important aspect of accessibility. Good contrast makes it easier for people with visual impairments to use products, and helps in imperfect conditions like low-light environments or older screens.

At GDS we’re always looking for ways to make our pages easier for anyone to use. One particular area that comes up in user research is the difficulty people have with clicking on small checkboxes or radio buttons in forms.

I created a little Dark Mode Colors ? Re-Colorization Playground app that allows people to toy around with different re-colorization options and report their preferences in a survey.

Overhyped or necessity? Learn everything about dark mode and how to support it to the benefit of your users! We have gone full circle with dark mode.

Freehand is an entirely new way to creatively collaborate in InVision. Wireframing, planning, design presentations, and feedback—do it all with Freehand.

I believe most of us have already heard about the word “crazy 8's”. If you are a designer in the term of software development, you might be familiar with it. Even if you haven’t heard about it, now I’m assuming that you hear it.

Over the past few years, EightShapes has embedded sketching into workflow to quickly generate ideas. Whether with our clients using formal scenarios, or internally to work through ideas ad-hoc, sketching is now part of our DNA, and reinforces our core value of “show, don’t tell.”

I’ve been facilitating design studios with collocated teams for years. Many, including me, have covered the benefits of collaboratively sketching new ideas and concepts with a cross-functional team. Recently though, I was tasked with bringing this exercise to a distributed team.

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

Making long-distance collaboration a team sport.

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.

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.

Nathan Curtis has written a lot about design systems.

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.

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.

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.

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

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.

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.

A set of posters the GOV.UK team put together to communicate their design principles.

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.

16 cards describing different user research activities and explains when and how to use it effectively.

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.

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.

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.

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.

The scrollbar is a humble but productive mechanism that operates as the primary means through which one can traverse a document.

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.

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.

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.

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.

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.

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.

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.

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

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.

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 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.

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.

The most comprehensive collection of design principles on the Internet.

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.

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.

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

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.

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.

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.