Collective #555

dreamt up by webguru in Uncategorized | Comments Off on Collective #555







C555_duplicate

Imagededup

Imagededup is a python package that simplifies the task of finding exact and near duplicates in an image collection.

Check it out


C555_dropbox

Guided by style

An article on how the Dropbox design team keeps their content style guide current and use-worthy.

Read it














Collective #555 was written by Pedro Botelho and published on Codrops.


Source: Codrops, Collective #555

Design Systems Are About Relationships

dreamt up by webguru in Uncategorized | Comments Off on Design Systems Are About Relationships

Design Systems Are About Relationships

Design Systems Are About Relationships

Ryan DeBeasi



Design systems can be incredibly helpful. They provide reusable elements and guidelines for building a consistent “look and feel” across products. As a result, users can take what they learned from one product and apply it to another. Similarly, teams can roll out well-tested patterns for navigation or reviews, making products more trustworthy. Effective design systems solve boring problems in a repeatable way so that developers and designers can focus on solving novel problems.

Yet when someone uses the term “design system” in a meeting, I’m never quite sure what reaction to expect. I’ve seen curiosity and excitement about trying a new way of working, but I’ve also seen frustration and concern at the idea of a system limiting designers’ creativity. Some designers argue that design systems sap creativity, or that they are solutions in search of a problem. Design systems can fragment over time, causing teams to stop using them.

Design systems aren’t going away, though. Just 15% of organizations lacked a design system in 2018, according to one survey. That’s down from 28% the previous year. Some teams use large, general-purpose design systems such as Google’s Material Design, while others use smaller, more bespoke systems such as REI’s Cedar and Mozilla’s Protocol.

Design systems should empower teams, not limit them. For that to happen, we need to start thinking more holistically. A design system isn’t just code, or designs, or documentation. It’s all of these things, plus relationships between the people who make the system and the people who use it. It includes not just CSS files and Sketch documents, but also trust, communication, and shared ownership. As it turns out, there’s a whole field of study dedicated to exploring systems like these.

Grid of icons including stars, a shopping cart, and a snowflake

In REI’s Cedar Design System, icons are tailored to the company’s outdoor gear business. The snowflake icon indicates ski and snowboard services, and the ruler icon indicates a size chart. (Large preview)

The Big Picture

A 1960 paper titled “Socio-technical systems” explored the interactions among technology, humans, and the larger environment in which they exist. Enid Mumford explained that researchers began by investigating how to build better relationships between managers and employees, but by the 1980s, they were focused on making work more efficient and cost-effective. In 2011, Gordon Baxter and Ian Sommerville wrote that this research helped inspire user-centered design, and that there’s a lot of work left to do.

Baxter and Sommerville argued that today, there is still a tension between “humanistic” research, which focuses on employees’ quality of life, and “managerial” research, which focuses on their productivity. They also explained that it’s important to consider both technology and human interactions: “system performance relies on the joint optimization of the technical and social subsystems.”

I’d argue that design systems are socio-technical systems. They involve interactions between the people who create the system, the people who create products using the system, and the end users who interact with these products. They also evoke the same tension between efficiency and humanism that Baxter and Sommerville saw.

Design systems aren’t composed just of images and code; they involve conversations among designers, developers, product managers, CEOs, and random people on GitHub. These interactions occur in various contexts — a company, an open-source community, a home — and they happen across cultures and organizational boundaries. Building a team can mean bringing together people from disciplines such as animation, sound design, data visualization, haptics, and copywriting. Creating a successful design system requires equal parts of technical expertise and soft skills.

And yet, peruse design or engineering news aggregators and you’re likely to see a distinct focus on that “technical subsystem” — code and tools, rather than people and conversations. Which creative tool is the best at keeping track of design tokens? What JavaScript technologies should be used for building reusable components — React, web components, or something else? Which build tool is best?

The answer to these questions is, of course, “it depends!” Who will design, build, and use the system? What are their needs? What constraints are they operating under? What tools and technologies are they comfortable with? What do they want to learn?

To answer these sorts of questions, Baxter and Sommerville recommend two types of activities:

  • Sensitisation and awareness activities
    Learning about the varied people who will create and participate in the system, and sharing that information far and wide.
  • Constructive engagement
    Communicating across roles, building prototypes, and considering both the technical and social parts of the system.

Digging In

In early 2019, I was part of a team — let’s call them “team blue” — that was building a design system for a large organization. I facilitated informal chats with this team and “team green”, which was using the design system to build a web application. Every couple of weeks, we got all the developers and designers together around a table and talked about what we were building and what problems we were trying to solve. These chats were our “sensitization and awareness activities.”

We didn’t have permission to make our design system public, so we did the next best thing: we treated it like a small open-source project within the organization. We put the code in a repository that both teams could access and asked for contributions. Team blue was responsible for reviewing and approving these contributions, but anyone on either team could contribute. Team blue was also building an application of their own, so in a sense, they were both users and custodians of the design system.

These interactions helped the teams build better products, but just as importantly, they established trust between the teams. Team blue learned that folks were using the system thoughtfully and building clever new ideas on top of it. Team green learned that the system really was tailored to their needs, so they could work with it instead of against it. Baxter and Sommerville might call this work “constructive engagement.”

We found that both teams were under pressure to learn new technologies and deliver a complete product quickly. In other words, they were already operating under a pretty considerable cognitive load. As a result, the two teams agreed to focus on making the system easy to use. That meant sidestepping the whole web components debate, focusing mostly on CSS, and ensuring that our documentation was clear and friendly.

Screenshot of links to Windows, Web, iOS, and Android documentation

Microsoft’s Fluent Design System targets four very different platforms. (Large preview)

Putting It All Together

Organizations of all sizes create reusable design elements to help teams build more consistent, elegant applications. Different organizations’ needs and dynamics are expressed in their design systems. Here are just a few examples:

  • Google’s Material Design has several implementations in different frameworks and languages. It’s used by a variety of people inside and outside of Google, so it has comprehensive documentation and a variety of toolkits for design apps.
  • Microsoft’s Fluent Design System targets four very different platforms. Like Material, it includes toolkits for UX designers and comprehensive documentation.
  • Mozilla’s Protocol is implemented in Sass and vanilla JavaScript. It has a strong focus on internationalization. Alex Gibson says that this system helps Mozilla “create on-brand web pages at a faster pace with less repetitive manual work.”
  • REI’s Cedar is built with Vue.js components and can’t be used with other JavaScript frameworks. Cedar is used primarily by REI’s internal developers and is closely tied to the company’s brand. The design system’s code is open source, but its fonts are not.
  • Salesforce’s Lightning Design System is a JavaScript-agnostic CSS framework. It can optionally be used alongside the Lightning Component Framework, which includes two JavaScript implementations: one using web components and another using Salesforce’s proprietary Aura framework.
  • Red Hat’s PatternFly was created to provide a consistent user experience across the company’s cloud platform products, so it has a relatively high information density and includes a variety of data visualization components. The PatternFly team recently switched from Angular to React after some experimentation with web components. PatternFly also includes a JavaScript-agnostic implementation using HTML and CSS. (Full disclosure: I’m a former Red Hatter.)
  • IBM’s Carbon Design System offers implementations in React, Vue, Angular, and vanilla JavaScript as well as a design toolkit for Sketch. The Carbon team is experimenting with web components. (Hat tip to Jonathan Speek for tracking down that repository.)

Systems like these are consistent and reliable because people from different teams and roles worked together to build them. These systems solve real problems. They’re not the result of developers trying to impose their will upon designers or vice-versa.

Josh Mateo and Brendon Manwaring explain that Spotify’s designers “see their role as core contributors and co-authors of a shared system — one that they have ownership of.” Mina Markham describes herself as “the translator between engineering and design” on the Pantsuit design system. Jina Anne digs into the team dynamics and user research behind design systems: “Spoiler alert! You’re going to need more than just designers.”

Let’s Build Some Stuff!

Now that we’ve gone through research and some examples, let’s talk about how to build a new design system. Start by talking to people. Figure out who will be using and contributing to your design system. These people will probably span a variety of disciplines — design, development, product management, business, and the like. Learn about people’s needs and goals, and ask them to share what they’re working on. Consider planning an informal meeting with snacks, coffee, or tea to create a welcoming atmosphere. Establish regular communication with these folks. That might mean joining a shared chat room or scheduling regular meetings. Keep the tone casual and friendly, and focus on listening.

As you talk about what you’re working on, look for common problems and goals. You might find that teams need to display large amounts of data, so they’re investigating tools for displaying tables and generating reports. Prioritize solutions for these problems.

Look also for repeated patterns and variations on similar themes. You might find that buttons and login forms look a bit different across teams. What’s the significance of these variations? What variations are intentional — for example, a primary button versus a secondary button — and what variations have happened by accident? Your design system can name and catalog the intentional patterns and variations, and it can eliminate the “accidental” variations.

Screenshot of five different button styles

IBM’s Carbon Design System lists all the variations of its components. (Large preview)

The goal here is to establish a rapid feedback loop with people who are using the design system. Faster feedback and smaller iterations can help avoid going too far in the wrong direction and having to dramatically change course. P.J. Onori calls these sudden, large changes “thrash.” He says that some thrash is good — it’s a sign that you’re learning and responding to change — but that too much can be disruptive. “You shouldn’t fear thrash,” he says, “but you need to know when it’s useful and how to help mitigate its downsides. One of the best [ways] to mitigate the downsides of thrash is to start small — with everything.”

Consider starting small by setting up a few basic elements:

  • A version control system to store your code. GitHub, GitLab, and Bitbucket are all great options here. Make sure that everyone who uses the system can access the code and propose changes. If possible, consider making the code open source to reach the widest possible audience.
  • CSS code to implement the system. Use Sass variables or CSS custom properties to store “design tokens” — common values such as widths and colors.
  • A package.json file that defines how applications can build and install the design system.
  • HTML documentation that demonstrates how to use the design system, ideally using the system’s own CSS.

The node-sass documentation for the CSS framework Bulma describes these steps in a bit more detail. You can skip installing and importing Bulma if you’d like to start from scratch, or you can include it if you’d like to start off with some of the basics in place.

You might have noticed that I didn’t mention anything about JavaScript here. You might want to add this element eventually, but you don’t need it to get started. It’s easy to go down a rabbit hole researching the best and newest JavaScript tools, and getting lost in this research can make it harder to get started. For example, “5 Reasons Web Components Are Perfect For Design Systems” and “Why I Don’t Use Web Components” both make valid points, but only you can decide what tools are right for your system. Starting with just CSS and HTML lets you gather real-world feedback that will help you make this decision when the time comes.

As you release new versions of the system, update your system’s version number to indicate what has changed. Use semantic versioning to indicate what’s changed with a number like “1.4.0.” Increment the last number for bug fixes, the middle number for new features, and the first number for big, disruptive changes. Keep communicating with the folks who use the design system, invite feedback and contributions, and make small improvements as you go. This collaborative, iterative way of working can help minimize “thrash” and establish a sense of shared ownership.

Finally, consider publishing your design system as a package on npm so that developers can use it by running the command npm install your-design-system. By default, npm packages are public, but you can also publish a private package, publish the package to a private registry, or ask developers to install the package directly from a version control system. Using a package repository will make it easier to discover and install updates, but installing directly from version control can be an easy short-term solution to help teams get started.

If you’re interested in learning more about the engineering side of things, Katie Sylor-Miller’s Building Your Design System provides a fantastic deep dive. (Full disclosure: I’ve worked with Katie.)

Wrapping Up

Design systems are made up of code, designs, and documentation as well as relationships, communication, and mutual trust. In other words, they’re socio-technical systems. To build a design system, don’t start by writing code and choosing tools; start by talking to the people who will use the system. Learn about their needs and constraints, and help them solve problems. When making technical, design, or strategy decisions, consider these people’s needs over the theoretically “best” way to do things. Start small, iterate, and communicate as you go. Keep your system as simple as possible to minimize thrash, and invite feedback and contributions to establish a sense of shared ownership.

By giving equal weight to engineering and interpersonal considerations, we can get the benefits of design systems while avoiding the pitfalls. We can work in a way that’s efficient and humane; we don’t have to choose one over the other. We can empower teams rather than limiting them. Empowered teams ultimately help us better serve our users — which, after all, is why we’re here in the first place.

Further Reading on SmashingMag:

Smashing Editorial
(ah, il)

Source: Smashing Magazine, Design Systems Are About Relationships

Editorial Design Patterns With CSS Grid And Named Columns

dreamt up by webguru in Uncategorized | Comments Off on Editorial Design Patterns With CSS Grid And Named Columns

Editorial Design Patterns With CSS Grid And Named Columns

Editorial Design Patterns With CSS Grid And Named Columns

Rachel Andrew



Many websites, in particular those which display long-form content, have a fairly straightforward repeating pattern of components: a full-width area for images, a central content area, and perhaps a split view of two half-width blocks. These components repeat to display an article, images and other related content — with content editors selecting the right component as they create articles for publication.

In this article, I’m going to demonstrate an approach to this kind of editorial design, which builds on a few techniques some of which are discussed in the following articles:

In addition to this being a nice way to name sections of your layout, this technique exposes a whole bunch of interesting things about Grid Layout which you may find useful in creating your own layout patterns. It also demonstrates more of the promise of subgrid (a part of the upcoming Level 2 of the grid specification and being implemented in Firefox).

Naming Things In CSS Grid Layout

When using CSS Grid Layout, you can name lines and areas. Both of these things can make working with Grid — especially complex grids — more straightforward. Defining naming conventions for things in your layout can be useful when working with your team; it is much easier to understand where anything placed with grid-area: content will end up than having something placed from column-line: 3 / 9.

When using the grid-template-areas approach, you give the items that you want to place on the grid a name by using the grid-area property and then placing them around the grid. In the following example, the item with grid-area: content goes into the grid area defined by the grid-template-areas property:

See the Pen [Layout With Named Area](https://codepen.io/rachelandrew/pen/zYOQBba) by Rachel Andrew.

See the Pen Layout With Named Area by Rachel Andrew.

This works well for components where you have one item to go into one area; however, if you want to place multiple things into the content area (one below the other), using grid-area is the wrong approach. Instead, you might define names for the column lines and place the item from the start to end line.

See the Pen [Layout With Named Columns](https://codepen.io/rachelandrew/pen/xxKNONQ) by Rachel Andrew.

See the Pen Layout With Named Columns by Rachel Andrew.

This isn’t as neat, however, when using the grid-area approach we have to know both the start and end line when placing an item using grid-column or grid-row — or do we?

Take a look at this next CodePen example. My items are placed using a single name or ident by using the grid-column property, even though some of the grid areas being targeted cross a number of columns:

See the Pen [Layout with Named Columns](https://codepen.io/rachelandrew/pen/mdbYEod) by Rachel Andrew.

See the Pen Layout with Named Columns by Rachel Andrew.

My aim here is to abstract away the complexity of the grid setup when actually using the grid. I can put a lot of work into creating the initial grid, but then place things without thinking too much about it as I populate my pages. I also want to make sure that we can repeat the components as often as we need to as we build up the article. What I have in mind is a content creator using a CMS, and creating blocks of content using the different patterns whilst knowing that they will be placed correctly one below the other on the overall grid.

In order to understand how I got to this point requires an understanding of a few things about CSS Grid Layout as well as named lines and areas.

We Can Name Lines

As you’ve already seen in my second example above, we can name lines on the grid that can be pretty much anything we like — other than the word span. The name is an ident rather than a string which is why it is not quoted.

However, you will see many examples where the naming conventions name-start and name-end are used that append -start onto the name of the start line and -end on the name of the end line. This is not purely convention and for the technique I am going to show you why we need to name our lines this way. So you should pick a name for the area you are describing, and then add the -start and -end suffixes — which need to match, of course!

We name our lines inside square brackets. Lines can (and often need to) have multiple names. In this case, space separates the names. When placing the items using line-based positioning, you can pick any name for the line to do the placement.

With our named lines in place, we could place our items using grid-column by specifying the start and end line name. This pattern is just the same as using line numbers, so the name before the slash is the start line and the name after is the end line.

See the Pen [Example using start and end lines](https://codepen.io/rachelandrew/pen/VwZOPgO) by Rachel Andrew.

See the Pen Example using start and end lines by Rachel Andrew.

This places the items but isn’t the neat single name per item that I used in the example. However, we now have everything in place due to the special way that Grid handles named areas and lines.

Line Names Give Us A Named Area

Assuming you have named your lines with -start and -end as I have, Grid will give you a named area of the main name you used. Therefore, in my case, I have areas named content, start-half, end-half, full and center. Each of these areas is a single row (as I don’t have named rows), however, it will span the column tracks from the -start to the -end line.

Named Areas Give Us A Named Line Of The Main Name Used

If we want to be able to place our items as if we have a column name, we also need to make use of the fact that when we create a grid area, we get a line name of the main name used; that is, the main name being the name with -start and -end removed. This line name resolves to the start or end of the area depending on whether we are targeting grid-column-start or grid-column-end.

So, we have an area named content, because we have column lines named content-start and content-end. The area named content also gives us the ability to use grid-column-start: content which will resolve to the start line of that content area, while grid-column-end: content will resolve to the end line of the content area.

This, therefore, means that we can place an item into the content area by using the following:

.content {
    grid-column: content / content;
}

Next, we can now tidy up this technique further due to the fact that if you use a named line for grid-column-start and omit the end line (rather than spanning one track as would be the case if you used line numbers), grid copies the name over to the end line. Therefore, grid-column: content is exactly the same as grid-column: content / content;

This is then all we need to be able to place items using grid-column with a simple, single name. This behavior is all exactly as specified and not some kind of “hack”. It demonstrates the depth of thinking that went into the creation of the Grid Layout specification, and the amount of careful work that has gone into making it so straightforward to lay items out in our designs.

Giving This Technique Superpowers With Subgrid

I think this technique is a nice one that enables a very straightforward way of declaring where elements should be placed on the grid. However, if we add subgrid support to the mix, it becomes very powerful indeed.

Currently, subgrid is being implemented in Firefox, and so these next examples require Firefox Nightly to run. You can download Nightly here.

The subgrid value of grid-template-columns and grid-template-rows means that sizing created on a parent grid can be opted into by an item which is a child of the grid (assuming it is also using grid layout) by having display: grid applied.

Note: You can read more about the features of subgrid in my articles here on Smashing Magazine “CSS Grid Level 2: Here Comes Subgrid” and “Digging Into The Display Property: Grids All The Way Down”.

Line Names From The Parent Are Passed Into Subgrids

In addition to the track sizing information being passed into the child grid, any line names set on the parent will be passed in. This means that we can use our “column names” within subgridded components, making this solution very useful in a world where subgrid exists. An item placed in content — even if nested down inside subgrids — will line up with one placed as a direct child of the main grid.

In this next example, I have nested two elements directly inside the div with a class of full-2. I have also placed a ul inside .content. If we look at the items inside full-2, in order to place these on the parent grid, we need to make the selector full-2 a grid with display: grid then use the grid-template-columns property with a value of subgrid.

This causes the grid on .full-2 to use the tracks defined on the parent grid, and have access to the named lines defined there. As this is a full-width item, this really will behave just like the parent grid in terms of placing our items. We can then use any of the names we defined for the different columns to place the items. In this case, I have set both child elements to grid-column: center and they display one after the other in that center area.

.full-2 {
  grid-row: 4;
  grid-column: full;
  display: grid;
  row-gap: 10px;
  grid-template-columns: subgrid;
}

.full-2 > div {
  background-color: rgb(124,222,220);
  grid-column: center;
}

A set of boxes, one with other boxes nested instead

The nested elements line up with the grid on the parent (Large preview)

If we take a look at our nested ul inside .content, we will need to create a subgrid on the selector .content just as with the last example; when we do this, the ul falls into the first track of the subgrid. If we want to lay out the listen items on the subgrid, we need to do two things: cause the ul to take up the same area as its parent by placing it with grid-column: content, and then making it a grid which is a subgrid.

Having done this the list items will lay out using auto-placement into the column tracks of the subgrid:

.content {
  grid-row: 1;
  grid-column: content;
  display: grid;
  grid-template-columns: subgrid;
}

.content ul {
  grid-column: content;
  display: grid;
  row-gap: 10px;
  grid-template-columns: subgrid;
}

A set of boxes, the nested boxes falling into the tracks of the grid

With auto-placement the items fall into the tracks of the parent (Large preview)

Once you have your grid, you can use the names from the parent in exactly the same way as before.

.content li:nth-child(1) {
  grid-column: center;
}

.content li:nth-child(2) {
  grid-column: start-half;
}

.content li:nth-child(3) {
  grid-column: end-half;
}

.content li:nth-child(4) {
  grid-column: content;
}

Screenshot of various boxes, which line up in columns

The completed subgrid layout (Large preview)

If you have Firefox Nightly, you can see the full demo in this CodePen example:

See the Pen [Naming Column and Subgrid](https://codepen.io/rachelandrew/pen/OJLYRRb) by Rachel Andrew.

See the Pen Naming Column and Subgrid by Rachel Andrew.

You can keep “nesting’ subgrids into your markup structure like this, and each time the line names will be passed through. This is a feature that I think will be particularly useful.

When you create a subgrid, the line numbers correspond to the lines of the subgrid and not the parent grid. Therefore, if you do want to ensure that elements in the subgrid line up with the parent grid, then using line names or named areas (as shown in this example) will make that straightforward and logical.

Wrapping Up

You now know how to use this technique for your main grid, and hopefully, it won’t take too long before we start seeing support for subgrid in all browsers. It’ll enable techniques such as this one and make it incredibly powerful for us to use.

Smashing Editorial
(il)

Source: Smashing Magazine, Editorial Design Patterns With CSS Grid And Named Columns

Collective #554

dreamt up by webguru in Uncategorized | Comments Off on Collective #554



C554_sara

Sara Soueidan on Applied Accessibility

In this SmashingConf session — a series of macro case studies from real client projects — Sara shares some frustrations, many lessons learned, and a lot of practical tips and tricks for building accessible front-end foundations that you can take and apply in your own projects right away.

Watch it


C537_divi

Our Sponsor

The Ultimate WordPress Page Builder

You’ve never built a WordPress website like this before. Divi is more than just a WordPress theme, it’s a completely new website building platform that replaces the standard WordPress post editor with a vastly superior visual editor.

Try it






C554_19

Inertia.js

Inertia.js lets you quickly build modern single-page React, Vue and Svelte apps using classic server-side routing and controllers.

Check it out












C554_fbm

fBM

Inigo Quilez tackles a very complex, beautiful topic: Fractional Brownian Motion. It’s one of the most popular constructs for procedural modeling of nature.

Read it


C554_Icons

Animated Icons

Add user delight to your site with this free pack of 166 animated icons in JSON (Lottie), GIF, and After Effects formats.

Get it



Collective #554 was written by Pedro Botelho and published on Codrops.


Source: Codrops, Collective #554

Inspired Design Decisions: Bea Feitler, An Unstoppable Creative Force

dreamt up by webguru in Uncategorized | Comments Off on Inspired Design Decisions: Bea Feitler, An Unstoppable Creative Force

Inspired Design Decisions: Bea Feitler, An Unstoppable Creative Force

Inspired Design Decisions: Bea Feitler, An Unstoppable Creative Force

Andrew Clarke



Even if you didn’t study graphic design at art school, you might know a few famous names. With over a century of commercial art direction, there are plenty more names to discover. People who have done astonishing work which can encourage and inspire us to think about the web more creatively.

Discovering people with incredible talent has been one of the most rewarding aspects of studying art direction. Learning about one designer often leads me to another, and when I find someone who’s work I admire, I want to understand not just what they made, but why they made it.

Previously On “Inspired Design Decisions”

  1. Inspired Design Decisions: Avaunt Magazine
  2. Inspired Design Decisions: Pressing Matters
  3. Inspired Design Decisions: Ernest Journal
  4. Inspired Design Decisions: Alexey Brodovitch

After learning about Alexey Brodovitch’s influential work on Harper’s Bazaar until the 1950s, I wanted to know the impact his legacy had on the magazine. This led me to Bea Feitler and her creative partner Ruth Ansel who directed Harper’s Bazaar throughout the 1960s.

Feitler has been described as “the pioneering female art director you’ve never heard of.” I’ve never heard her mentioned at a design conference or seen her referenced in an article about web design.

But, Feitler’s confident and energetic designs are only part of what makes her life and work fascinating. Even more important was how her work reflected changes in society in America during the 1960s and the choices she made to influence it.

Only one exhibition has been staged about her work and one retrospective book published. “O Design de Bea Feitler,” written by her nephew, was published in her native Brazil in 2012. It took me months to track down a copy, but eventually, I found one. It’s the most expensive book I’ve bought.

Feitler has as much to teach people who design for the web as she did the magazine designers who followed her. I hope that in some small way, I can help people fall in love with Bea Feitler’s work the way I did.

Inspired By Bea Feitler

Portrait of Bea Feitler by Bob Richardson, during the 1960s.

Portrait of Bea Feitler by Bob Richardson, during the 1960s. (Large preview)

Bea Feitler was born in Rio de Janeiro in 1938. After working on album covers, book jackets, magazines, and poster designs, she left Brazil and moved to Manhattan. In 1961 — and still only 25 years old — she became an art assistant, then one of the youngest and first female co-art directors at Harper’s Bazaar alongside Ruth Ansel.

Just like Alexey Brodovitch — who’d stepped down from Harper’s Bazaar before her move to the United States — Feitler’s collaborations with artists and photographers helped define her work. At Harper’s Bazaar, Richard Avedon’s photograph of model Jean Shrimpton in her famous pink space helmet, then Annie Leibovitz’s naked John Lennon on the cover of Rolling Stone.

Although Feitler never met Brodovitch, it’s fascinating to see how she respected then developed his legacy. Feitler understood that magazine pages should be deliberately and individually constructed, yet at the same time should be connected to one another to form a harmonious rhythm.

A selection of magazine covers with art direction by Bea Feitler. From left: Harper’s Bazaar, MS., Rolling Stone, and Vanity Fair. (Large preview)

A magazine should flow. It should have rhythm. You can’t look at one page alone, you have to visualize what comes before and after. Good editorial design is all about creating a harmonic flow.
— Bea Feitler

Feitler combined Brodovitch’s mastery of the double-page spread with her choices of bold colors which were inspired by pop artists Jasper Johns, Roy Lichtenstein, and Andy Warhol, as well as street fashion and youth culture.

She wasn’t afraid to experiment with color or to break with conventions, twice placing lurid green text onto a neon pink background, first for a Harper’s Bazaar cover in April 1965 and later for feminist magazine Ms. in December 1972.

Harper’s Bazaar, February 1967. Art direction by Bea Feitler. (Large preview)

At the Harper’s Bazaar studio she shared with Ruth Ansel, a continually changing collage filled their inspiration wall; something I wish I had space for in my tiny studio. Feitler wasn’t afraid to mix media, and when she felt that one of her most iconic spreads wasn’t working, she combined one of Avedon’s most well-known photographs with a panel from a comic book she’d bought from a newsstand in the street below.

Harper’s Bazaar, August 1966. Photography by Hiro. Art direction by Ruth Ansel and Bea Feitler. Their confident choices of color and strong shapes have inspired much of my recent work. (Large preview)

Feitler’s designs influenced and reflected the changes in American society in the 1960s. The magazines she art directed had a fast-paced, almost cinematic quality which perfectly suited the culture of the time but is also relevant to our work online today. Feitler believed that good editorial design is about creating a harmonious flow. This is as relevant to designing engaging user experiences and customer journeys as it is magazine pages.

Some of my favourite Feitler designs have neither color nor images, like this typographic spread from Harper’s Bazaar. (Large preview)

Even though some people continue to recite the mantra that the web isn’t print, there’s a lot we can learn from Feitler’s work. Her designs can help us improve not only editorial design online but e-commerce websites and digital product designs too.

Feitler said that a book was “50/50 image to text.” On the web, we need to allow for interactive features and video too. Understanding how to successfully combine these components to create a consistent, engaging experience is a fundamental skill which every digital designer should develop.

As a mentor and teacher, Feitler shared many principles with Alexey Brodovitch. She encouraged her students to develop their own direction, and many themselves became prominent art directors. Feitler was demanding and accepted nothing less than the very highest standards of design excellence from everybody.

Hold on to your passions and dig deep while trusting your instincts. Step outside of what is expected. Embrace accidents, and know that eventually you will discover the perfect solution to a creative dilemma and be very joyous while doing it.
— Ruth Ansel

Sadly, Bea Feitler died from cancer in 1982 aged just 44. I believe she has as much to teach those of us who design for the web as she did the magazine art directors who followed her. I hope her life and work will influence us to have courage in our convictions and make our own brave and confident choices.

Beauty Blast Off

Harper’s Bazaar, April 1965. Model: Jean Shrimpton. Photographer: Richard Avedon.Harper’s Bazaar’s hadn’t had a guest editor before, but for its April 1965 edition, long-time collaborator Richard Avedon edited and photographed the entire issue.

Inside, Avedon photographed Donyale Luna — the first black woman to be featured on the cover of a mainstream fashion magazine — and Paul McCartney wearing a spacesuit borrowed from NASA. For the cover, Avedon chose an image of contemporary supermodel Jean Shrimpton wearing a space helmet which had been made by one of New York’s most famous milliners.

Avedon later recalled that at 11 PM — after their deadline had passed — the photograph he’d shot for the cover wasn’t working. So, Feitler cut the shape of a helmet from pink Day-Glo paper and placed it over Avedon’s photograph. No focus groups, no research, no audience testing, just a gutsy and intuitive design decision.

The result was a cover which went on to win the New York Art Director’s Club medal and was placed at number fifteen in the American Society of Magazine Editor’s 2005 list of Top 40 Magazine Covers.

5050 Image To Text

Agneta Darin. Spread from Harper’s Bazaar, August 1966. Photography by Hiro. Art direction by Bea Feitler and Ruth Ansel

Agneta Darin. Spread from Harper’s Bazaar, August 1966. Photography by Hiro. Art direction by Bea Feitler and Ruth Ansel. (Large preview)

This design uses a CSS background-image gradient and the picture element

This design uses a CSS background-image gradient and the picture element. (Large preview)

To implement my first Feitler-inspired design, my aim is to use the most minimal set of structural elements; a header plus main and aside elements for content. My header contains the split image of an iconic Volkswagen Beetle and a headline which includes an inline SVG Volkswagen logo. As this headline contains no text, I use an ARIA label to describe it. This will help people who use assistive technologies:

<header>
  <h1 aria-labelledby="Volkswagen logo">
    <svg>…</svg>
  </h1>
  <picture>…</picture>
</header>

<main>…</main>
<aside>…</aside>

For smaller screens, I need only foundation styles as the normal flow, handles my single column layout. First, I add a linear gradient behind the header image. Gradients are incredibly flexible, but despite their usefulness they’re surprisingly under-used:

header {
padding: 1rem 2vw;
background-image: linear-gradient(
to right,
#444 0%,
#444 50%,
#fff 50%,
#fff 100%);
text-align: center; }

My gradient starts on the left with a dark grey and ends on the right with white. Without color stops, the result would be a smooth gradient between those colors, but I want a hard line in the center of my header. To achieve this effect, I place two color stops at the same 50% position. To change the direction of my gradient, I needn’t adjust those percentages. I can simply change the gradient direction from to right to to left.

Left: My gradient starts on the left. Right: I change the direction without altering my percentage color stops.

Left: My gradient starts on the left. Right: I change the direction without altering my percentage color stops. (Large preview)

When you use images to add drama, make sure their effect is dramatic on all screen sizes. Shrinking a landscape image to fit a portrait orientation decreases its visual weight and impact.

When you use images to add drama, make sure their effect is dramatic on all screen sizes. Shrinking a landscape image to fit a portrait orientation decreases its visual weight and impact. (Large preview)

It’s important to maintain a consistent balance of visual weight while adapting designs to several size screens. I don’t want my header image so tall it pushes my running text off the first screen, so I set a maximum height of 75vh or three quarters the height of a small screen:

header img {
max-height: 75vh; }

To complete my small screen design, I establish the header as a positioning context. Then, I absolutely position the Volkswagen emblem and ensure its width will adapt to the screen by using a viewport width unit of 5vw:

header {
position: relative; }
h1 {
position: absolute;
top: 1rem;
left: 1rem;
width: 5vw; }

My portrait orientation image fits well into tall screens, but I need a wider format image for screens which are wider than they are tall. Orientation is a fabulous, but seldom used media query which tests the orientation of a viewport. This media query can be used in stylesheets as an alternative to more conventional width queries. It can also be applied to the source of a picture element. This query swaps my portrait image for a landscape alternative whenever width exceeds height, whether on a small phone or desktop size display:

<picture>
<source srcset="landscape.png"
media="(orientation: landscape)">
<img src="portrait.png" alt="Volkswagen Beetle">
</picture>

For my alternative landscape design, I use Grid to place the header, main, and aside elements. There are several options for placing these elements — including columns and rows, and template areas — but I’ve chosen to use grid-template-columns to define a symmetrical two-column grid on the body. I apply the linear gradient again and set its minimum height to the match the full viewport:

@media screen and (orientation: landscape) {
body {
display: grid;
grid-template-columns: [main] 1fr [aside] 1fr;
min-height: 100vh;
background-image: linear-gradient(
to right,
#444 0%,
#444 50%,
#fff 50%,
#fff 100%); }
}

In landscape orientation, my header fills the entire width of the screen. As I no longer need the linear gradient background image on this element, I can simply remove it:

header {
grid-column: 1 / -1;
background-image: none; }

Now, because this grid is so simple, I place my main and aside elements onto the grid using named lines:

main {
grid-column: main; }
aside {
grid-column: aside; }

The end result is a design which adapts its layout depending on whether a browser or device screen is in landscape or portrait orientation.

Comic Book Art

Comic Book ArtBea Feitler regularly combined photographs with illustrations, and comic book art appears in work throughout her career.

For Harper’s Bazaar, she placed one of Avedon’s photographs of Jean Shrimpton wearing a spacesuit onto a comic book background. Later, she commissioned legendary comic artist Marie Severin to create this cover for Ms. Magazine in 1973.

Emphasize Scale

The Foot and the Ferrari.' Spread from Harper’s Bazaar, March 1967. Photography by Bill Silano. Art direction by Bea Feitler and Ruth Ansel.

‘The Foot and the Ferrari.’ Spread from Harper’s Bazaar, March 1967. Photography by Bill Silano. Art direction by Bea Feitler and Ruth Ansel. (Large preview)

This design, inspired by 'The Foot and the Ferrari.' uses a CSS background-image gradient and the object-fit property.

This design, inspired by ‘The Foot and the Ferrari.’ uses a CSS background-image gradient and the object-fit property. (Large preview)

The Volkswagen Beetle was a small car with a big personality. I want my next design to have a character to match. The large screen design uses an enormous picture of the Beetle’s wheel to emphasize the smallness of that little car. But, before I get to large screens, I want to make sure I maintain a similar contrast in scale on small screens.

Three structural elements make up the markup I need to implement this design; a header for the large wheel picture, a figure which contain the smaller image of the car, and a main for my running text. As the header has no meaning for anyone who uses a screen reader, I choose to hide it by using an aria-hidden attribute:

<header aria-hidden="true">
<img src="header.png" alt="">
</header>

<figure>
<img src="figure.png" alt="Volkswagen Beetle">
</figure>

<main>…</main>

Foundation styles and normal flow take care of most aspects of my small screen design, but that doesn’t mean I can ignore what makes it the overall concept distinctive; the contrast between the large wheel and the small Volkswagen. To ensure my header always occupies one-third of the viewport height with identical whitespace between it and my content, I use viewport height units for both height and margin:

header {
margin-bottom: 33vh;
height: 33vh; }

This wheel is easily distorted, giving the Beetle an unintentional flat tyre. Right: Using object-fit restores the roundness of my wheel.

This wheel is easily distorted, giving the Beetle an unintentional flat tyre. Right: Using object-fit restores the roundness of my wheel. (Large preview)

One problem I often encounter when developing flexible layouts is the unintentional resizing of images. With a fixed height on my header and 100% width on its image, the giant wheel can distort. Fortunately, there’s a way to preserve its aspect ratio using the object-fit property. There are four possible options, plus none:

  1. contain
    Preserves an image’s aspect ratio while fitting inside a parent’s content box.
  2. cover
    Preserves an image’s aspect ratio but this time fills the whole box. When this happens, parts of the image outside the content box will be hidden.
  3. fill
    An image will be distorted so its width and height match its parent.
  4. scale-down
    Similar to contain, reduces the size of an image or video to fit inside its parent.

Left–right: contain, cover, fill, and scale-down. The object-position property often goes hand in hand with object-fit. It allows precise positioning of an element within its parent’s content box.

Left–right: contain, cover, fill, and scale-down. The object-position property often goes hand in hand with object-fit. It allows precise positioning of an element within its parent’s content box. (Large preview)

I want my large wheel to fill the header completely without altering its aspect ratio. I’m also not concerned some parts of the image will be clipped, which makes cover the right choice for object-fit:

header img {
object-fit: cover;
object-position: center bottom;
width: 100%;
height: 100%; }

Now the wheel image is in position, I provide scale by contrasting its large size with a small image of the whole car. I restrict the Beetle’s maximum size to half the viewport width and centre it horizontally using its margins:

figure {
margin: 0 auto;
max-width: 50vw; }

This design uses a solid grey background to represent the road, so I add a background color and move the figure down by 10px, so the Beetle’s wheels sit firmly on the tarmac:

main {
padding: 2rem;
background-color: #f0f0f1; }

figure {
transform: translateY(10px); }

Bigger screens provide an opportunity to make a big impression, and for this design, I want the header image to occupy half the width and the full height of a large screen. I apply the same 6+4 compound grid I’ve used for many designs in this series. It has eight columns to which I add three rows. I give the middle and bottom rows a fixed height and allow the first row to occupy all remaining vertical space:

@media screen and (min-width : 64em) {
body {
display: grid;
grid-template-columns: 2fr 1fr 1fr 2fr 2fr 1fr 1fr 2fr;
grid-template-rows: 1fr 155px 155px;
grid-column-gap: 2vw; }
}

I want the body to always fill the full viewport height, so I apply a minimum height of 100vh and use a linear gradient to create the illusion of a road:

body {
min-height: 100vh;
background-image: linear-gradient(
to top,
#f0f0f1 0%,
#f0f0f1 155px,
#fff 155px,
#fff 100%); }

Using line numbers, I place the header on the grid, so it occupies half the columns and all the rows. The alignment of the small figure places it at the end of its grid module. Then, the main forms a single narrow column of running text:

header {
grid-column: 5 / -1;
grid-row: 1 / 4;
margin-bottom: 0;
height: auto;
background-color: #444; }

figure {
grid-column: 1 / 4;
grid-row: 2;
align-self: end;
max-width: auto; }

main {
grid-column: 4;
grid-row: 1 / 3;
align-self: center;
background-color: transparent; }

In this alternative design, I preserve the difference in scale between both pictures across fluid screen sizes using CSS Grid.

In this alternative design, I preserve the difference in scale between both pictures across fluid screen sizes using CSS Grid. (Large preview)

Knowing how scale influences someone’s understanding of a story is essential to telling it well. Sheer size is rarely enough on its own, so to make a significant impact, largeness must be relative to the size of other elements.

Bea Feitler understood scale and used it well. She often contrasted large foreground elements with smaller ones in the background to create designs which contained incredible depth. We can now follow in her footsteps by using scale to add impact to product and websites designs.

Confident Color Choices

Bea Feitler’s confident choice of colors was one of the hallmarks of her work, and it attracted me immediately. For my next Feitler-inspired design, I contrast a deep red with a vibrant yellow and reverse those colors on both sides of the design.

Left: Spread from Harper’s Bazaar, August 1966. Photography by Hiro. Art direction by Ruth Ansel and Bea Feitler. Right: This design uses CSS Grid and Flexbox.

Left: Spread from Harper’s Bazaar, August 1966. Photography by Hiro. Art direction by Ruth Ansel and Bea Feitler. Right: This design uses CSS Grid and Flexbox. (Large preview)

While this page is big on color, it is also small on markup. I need just two structural elements; a header and main. Inside both are a figure and a division:

<header>
<figure>…</figure>
</header> <main> <figure>…</figure>
</main>

Background and text colors are the starting point for implementing this design. I can leave everything else to the normal flow:

body {
background-color: #ba0e37;
color: #f8d72e; }

main {
background-color: #f8d72e;
color: #272732; }

I change the layout across screen sizes while maintaining a constistent look and feel.

I change the layout across screen sizes while maintaining a constistent look and feel. (Large preview)

For medium-size screens, I want the figures and divisions inside my header and main to occupy half the height and width of any viewport, so I apply a symmetrical two-column grid and a minimum height:

@media screen and (min-width : 48em) {
header, main {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 50vh; }
}

I place the header’s figure in the second column and the division in the first. Because this is the opposite of the content order, I need to assign both to the same row to avoid one column dropping below the other:

header figure {
grid-column: 2;

header div {
grid-column: 1;
grid-row: 1; }

The main element’s figure and division follow the content order, so I needn’t specify a grid-row for them:

main figure {
grid-column: 1;
align-self: end; }
main div {
grid-column: 2; }

I want to fill screens with color from edge to edge. For larger screens, I apply asymmetrical two-column grid which extends the full height of my body:

@media screen and (min-width : 64em) {
body {
display: grid;
grid-template-columns: 1fr 1fr;
min-height: 100vh; }
}

In this large-screen design, the figure and division in my header and main stack vertically instead of horizontally. I change the display property from grid to flex and set the direction to column. But, the visual order of the main is opposite to its content order, so I change its direction from column to column-reverse:

header, main {
display: flex;
flex-direction: column; }

main {
flex-direction: column-reverse; }

Then, to improve the readability of my running text, I use multi-column layout and specify a column width of 18em. A browser will generate as many columns of that width as will fit inside its parent element:

main div {
column-width: 18em;
column-gap: 2vw; }

Large blocks of solid color can be tiring for the eye, so I want to break them up by adding a playful, repeating background image pattern to the body using SVG:

body {
background-image: url("data:image/svg+xml"); }

Within the SVG, I specify both the fill color and set a low fill opacity for a subtle effect:

fill='#f8d72e'
fill-opacity='0.1'

I apply the same SVG image to the yellow background of my main, this time changing its fill color to white and increasing the fill-opacity:

main {
background-image: url("data:image/svg+xml"); }

fill='#fff'
fill-opacity='0.2'

Pattern and texture play a big part in many of Bea Feitler’s iconic magazine spreads, and yet they’ve fallen out of favor on the web. Next, I’ll show you how to use CSS and SVG patterns which will add depth to your designs.

Pattern And Texture Adds Depth

Left: Spread from Vanity Fair. Right: This design uses a CSS blend modes, clip-path, and SVG patterns.

Left: Spread from Vanity Fair. Right: This design uses a CSS blend modes, clip-path, and SVG patterns. (Large preview)

In this next Feitler-inspired design, I want to convey the curvaceousness of the Volkswagen Beetle by using circles. I need minimal HTML to implement this shapely design, just three elements; a header, main and aside:

<header aria-hidden="true">
<picture>…</picture>
</header>

<aside>
</aside> <main> <h1 aria-labelledby="Volkswagen logo"> <svg>…</svg> </h1> <p>…</p> </main>

I don’t want the header announced by screen readers, so I add an aria-hidden attribute with a value of true. I do want screen readers to describe my top-level heading, so I add an aria-labelledby attribute to that.

Half-tone style dots add texture to this page, and it’s easy to implement patterns like this using multiple background gradients, and combinations of background-size and background-position:

body {
background-color: #ba0e37;
color: #fff;
background-image:
radial-gradient(rgba(255,255,255,.25) 15%, transparent 16%),
radial-gradient(rgba(255,255,255,.25) 15%, transparent 16%);
background-size: 6vw 6w;
background-position: 0 0, 3vw 3vw; }

I’ll break this style into three steps:

  1. Two radial gradients, separated by a comma. Each gradient includes two color steps, the first at 15%, and the second at 16% which form the dots.
  2. By using viewport width units to size the resulting pattern, I keep the dot size proportionate to the page width.
  3. Position the first radial gradient to the top left of the viewport (0 0), and the second using viewport width units which are half the background sizes.

Four linear and radial gradient background image patterns.

Four linear and radial gradient background image patterns. (Large preview)

Lea Verou has been busy compiling a gallery of useful patterns which she developed using linear and radial gradients. As clever as Lea’s gallery is, there’s something about convoluted gradients being used to produce image-like patterns which bother me.

SVG patterns from Hero Patterns by Steve Schoger.

SVG patterns from Hero Patterns by Steve Schoger. (Large preview)

SVG patterns seem much more appropriate. They’re just as lightweight and are far more flexible. Add SVG to a background image using a URL, and if you’re concerned about HTTP requests, embed an SVG into a stylesheet as a data:image:

body {
background-image: url("data:image/svg+xml"); }

The aside in this design includes two divisions which each contain pictures of the Beetle’s fabulous front. I clip those divisions into circles to compliment its curves:

aside div {
-webkit-clip-path: circle();
clip-path: circle(); }

(Large preview)

By making the pictures’ backgrounds fully transparent, I can change the color of their parent divisions whenever I need to. I add slightly transparent background colors which allow hints of the dot pattern to show through:

aside div:first-child {
background-color: rgba(57,135,106,.9); }

aside div:last-child {
background-color: rgba(248,215,46,.9); }

With so much color and texture in this design, my layout needs to be simple, so I apply a two-column asymmetrical grid where the narrowest column can never shrink below 260px:

@media screen and (min-width : 64em) {
body {
display: grid;
grid-template-columns: 4fr minmax(260px, 1fr); }
}

To improve the accessibility and readability of my paragraphs of running text against the red pattern, I add a subtle drop shadow in a color which matches my background:

p {
filter: drop-shadow(0 0 5px #ba0e37); }

By reducing the opacity of my header using a CSS filter, the patterned background shows through.

By reducing the opacity of my header using a CSS filter, the patterned background shows through. (Large preview)

In the past, filtering a picture to apply a blur, color change, or drop shadow, required adding destructive effects in an image editor, but today, many of those same filters are available in CSS. You can apply filters to other HTML elements too.

Applying a CSS filter is straightforward. First, declare the filter-function and then a value in parentheses. To reduce an element’s opacity to 25% using a filter — instead of the opacity property — I use the opacity filter:

.ihatetimvandamme {
filter: opacity(.25); }

Those values differ with each filter. Some filters use degrees, accept use pixels, percentages, or their equivalent decimal. For example, .25 is equal to 25%, and 1 is the equivalent of 100%.

There are ten stock CSS filters to choose from: blur, brightness, contrast, drop-shadow, greyscale, hue-rotate, invert, opacity, saturate, and sepia. You can also use the URL function to use a custom filter from SVG.

I want to remove all color from my header and reduce its opacity to 80%. I can combine any number of filters by separating them with a space. It’s important to remember that a browser will apply filters in the order they’re specified, so for my header, color will be removed before opacity is altered:

header {
filter: grayscale(1) opacity(.8); }

When I need a smooth shift between CSS filters and values, I can add a transition between states, perhaps by increasing the opacity of my header for an :hover pseudo-class:

header {
filter: grayscale(1) opacity(.8);
transition: filter 1s linear; }

header:hover {
filter: grayscale(1) opacity(1); }

I can use CSS to develop a more elaborate animation between filters by first defining my keyframes, setting filter values at any percentage between 0 and 100% of the animation’s duration:

@keyframes beetle {
0% {
filter: grayscale(1) opacity(.8) blur(5px); }
50% {
filter: grayscale(1) opacity(1) blur(0); }
100% {
filter: grayscale(1) opacity(.8) blur(5px); }
}

I then assign this animation to my header, using the animation-name plus values for animation-duration, animation-delay, and other optional settings:

header:hover {
animation-name: beetle;
animation-delay: 0s;
animation-direction: alternate;
animation-duration: 1s;
animation-fill-mode: forwards;
animation-iteration-count: 1;
animation-timing-function: linear; }

Una Kravets recreated Instagram filter effects using CSS filters and blend-modes for her CSSgram library. Building on Una’s work, developer Indrashish Ghosh made cssFilters, a tool for granular control over those Instagram-style effects, applying them to an uploaded image, and generating CSS values. Tools like Indrashish’s make it as easy to use CSS filters as any image editor.

A reaction to overly ornamental designs, flat design has been the dominant aesthetic for almost a decade. As gradients, patterns, shadows, and three-dimensional skeuomorphism fell out of fashion, designers embraced solid colors, square corners, and sharp edges.

Anti-skeuomorphism no doubt helped designers focus on feature design and usability without the distraction of what some might still see as flourishes. But, reducing both product and website designs to a bare minimum has had unfortunate repercussions. With little to differentiate their designs, products and websites have adopted a regrettable uniformity which makes it difficult to distinguish between them.

While I’m not advocating a return to the worst excesses of skeuomorphism, I hope product and website designers will realize the value of a more vibrant approach to design; one which appreciates how design can distinguish a brand from its competition. A method which uses gradients, patterns, shadows appropriately to tell stories and provide greater affordance. This will make products and websites not only easier to use but more enjoyable too.

Develop With SVG Filters

Left: Spread from Harper’s Bazaar. Right: This design uses CSS Flexbox and Grid, and SVG filters.

Left: Spread from Harper’s Bazaar. Right: This design uses CSS Flexbox and Grid, and SVG filters. (Large preview)

For this final inspired design, I need just two structural elements; a header which contains six brightly colored Beetles, and a main for my text:

<header>
</header> <main>…</main>

Normal flow takes care of most of this design for small screens, but that doesn’t mean there’s nothing to do. I would lose the impact of those colorful cars if I were to shrink them all to fit a small screen. I also don’t want people to scroll past all six before they see my content, so my solution is to line them up horizontally in a scrolling panel.

Flexbox is the obvious choice for arranging those images, but the default left-right order would mean showing the back of the final car, instead of the front of the first. This is easily solved by changing the flex-direction from the default row to row-reverse:

header {
display: flex;
direction: row-reverse;
max-width: 100%;
overflow-x: scroll; }

I want all these cars to appear at the same size, so I use the flex-grow property and a value of 1. As I want to show the front of each car to indicate there’s more to see outside the viewport, I set the flex-basis value to 80%;

header div {
flex-grow: 1;
flex-grow: 0;
flex-basis: 80%;
/* flex: 1 0 80%; */  }

On medium-size screens, there’s space for a more elaborate layout for my collection of cars. For this design, I arrange my Beetles on an 8×12 modular grid, where each module is a 16:9 aspect ratio rectangle. The black Beetle furthest away from the viewer occupies a single module, and the cars appear progressively larger until the red Beetle in the foreground occupies the largest spacial zone.

Left: On small screens, I arrange my cars in a horizontally scrolling panel. Right: For medium screens, I place my Beetles on a modular grid. (Large preview)

To implement this modular grid, I apply Grid to my header element, followed by eight repeating evenly sized columns, and twelve rows which adapt to the minimum height of their content. By aligning the items to the end, rather than the start, of each row, the result looks more realistic:

@media screen and (min-width : 48em) {
header {
display: grid;
grid-template-columns: repeat(8, 1fr);
grid-template-rows: repeat(12, min-content);
grid-row-gap: 10px;
align-items: end; }
}

Left: An 8×12 modular grid for medium screens. Right: I change the layout and proportions on large screens by switching to a 16×12 grid. (Large preview)

My next task is to place each Beetle onto the grid. I use a combination of child (>) and nth-child selectors to place each element using line numbers:

header > :nth-child(1) {
grid-column: 3 / -1;
grid-row: 10 / -1; }

header > :nth-of-type(2) {
grid-column: 3 / 7;
grid-row: 7 / 9; }

header > :nth-of-type(3) {
grid-column: 1 / 4;
grid-row: 5 / 7; }

header > :nth-of-type(4) {
grid-column: 2 / 4;
grid-row: 3; }

header > :nth-of-type(5) {
grid-column: 6 / 8;
grid-row: 2; }

header > :nth-of-type(6) {
grid-column: 3;
grid-row: 1; }

A design like this cries out for typographic details. Padding on the main element adds space around my running text, so to add interest to my type, I set column widths of 24em, and a browser will automatically create the right number of columns to fit the viewport:

p {
column-width: 24em;
column-gap: 2vw; }

To add extra interest to my type, I combine a first-of-type pseudo-class selector with a first-line pseudo-element to transform that first line into uppercase letters:

p:first-of-type::first-line {
text-transform: uppercase; }

To implement my design for larger screens, I double the number of columns from eight to sixteen and reposition my images to the new line numbers:

@media screen and (min-width : 64em) {
header {
grid-template-columns: repeat(16, 1fr); }

header > :nth-child(1) {
grid-column: 8 / 15;
grid-row: 9 / 13; }

header > :nth-of-type(2) {
grid-column: 6 / 11;
grid-row: 5 / 8; }

header > :nth-of-type(3) {
grid-column: 1 / 5;
grid-row: 4 / 6; }

header > :nth-of-type(4) {
grid-column: 4 / 6;
grid-row: 3; }

header > :nth-of-type(5) {
grid-column: 11;
grid-row: 2; }

header > :nth-of-type(6) {
grid-column: 5;
grid-row: 1; }
}

Compared to today’s Beetle — which weighs almost 3000lbs — the Volkswagen Type 1 was a lightweight and speedy little car for its time. I’d like to create the impression these cars are speeding past the viewer by adding motion blur. Blurring an element using a CSS filter is straightforward:

header > div {
filter: blur(5px); }

This filter allows me to blur an element by any amount using several length values, including pixels which seem to me to be the most appropriate unit. But, CSS filters only allow me to blur an element using the same amount horizontally and vertically, much like an image editor’s Gaussian blur. To add realistic motion to my design, I need to swap CSS for an SVG filter.

Left: A uniform CSS blur filter with equal horizontal and vertical values. Right: Two gaussian blur values in SVG create a more realistic motion blur. (Large preview)

I cover just a small amount of detail about SVG filters in this issue, but SVG expert Sara Soueidan has written about them extensively. Start with Sara’s SVG Filters 101 tutorial.

While its ten stock filters are a relatively recent addition to CSS, their history goes way back to their SVG origins. Filters in SVG offer far greater flexibility with six more filters available and incredible customization possibilities. Whereas CSS blur allows just one value for both horizontal and vertical axes (X/Y,) in SVG I can use two values; one for the X-axis, the other for Y.

In SVG, every filter has its own identity, so to blur to an HTML element, reference its ID using the URL value in the filter property from a stylesheet:

.blur {
filter: url(#blur); }

Filters have their own element in SVG, it’s the filter element. Even though a filter won’t be visible in a browser, giving SVG a height of 0 will ensure it takes up no space:

<svg height="0">
<filter id="blur">…</filter>
</svg>

Each SVG filter primitive has its own name which is prefixed by fe, an abbreviation of “filter effect.” Unsurprisingly, the name for a blur is feGaussianBlur. The amount of blur is applied as a stdDeviation using either one uniform value or two separate values for horizontal and vertical. To reproduce the previous uniform 5px Gaussian blur in SVG, I add one value:

<filter id="blur">
<feGaussianBlur in="SourceGraphic"
stdDeviation="5"/>
</filter>

I’m looking for a more realistic motion effect where the image is blurred on just the horizontal axis. I apply blur to only the X-axis, leaving the Y-axis at zero:

<filter id="blur">
<feGaussianBlur in="SourceGraphic"
stdDeviation="15, 0"/>
</filter>

Now my car is speeding across the viewport, but when you look more closely. the result isn’t altogether realistic. That’s because the edges of my blurred elements are clipped by the bounding box. This is the rectangle which surrounds every element.

Left: The bounding box clips the blurred edges. Right: Increasing the filter region shows the whole blurred image. (Large preview)

To make the entire filter effect visible, I need to increase the size of my filter region using x, y, width, and height values. I use negative values of -10% on both horizontal and vertical axes, then increase the width and height to 120% which allows more visible space for my images’ blurred edges:

<filter id="blur"
x="-10%" y="-10%"
width="120%" height="120%">
…
</filter>

When you watch cars speeding past, or you look out of a moving train window, objects closest to you appear to move faster than those further away. To make my design seem more realistic, I need a different set of blur values for objects in the foreground, middle ground, and background.

Foreground elements like the closet red Beetle need the highest amount of horizontal blur. I give this filter an identity of blur-foreground:

<filter id="blur-foreground"
x="-10%" y="-10%"
width="120%" height="120%">
<feGaussianBlur in="SourceGraphic" stdDeviation="15,0"/>
</filter>

Then, Beetles in the middle ground receive a slightly lower stdDeviation of 10:

<filter id="blur-medium"
x="-10%" y="-10%"
width="120%" height="120%">
<feGaussianBlur in="SourceGraphic" stdDeviation="10,0"/>
</filter>

Finally, objects in the background receive the least blurring. I give this filter an identity of blur-background so I can apply it in my stylesheet:

<filter id="blur-background"
x="-10%" y="-10%"
width="120%" height="120%">
<feGaussianBlur in="SourceGraphic" stdDeviation="5,0"/>
</filter>

With all my filters specified, in my stylesheet I apply them to Beetles in the foreground, middle ground, and background:

<img src="car-red.png" class="blur-foreground">
<img src="car-green.png" class="blur-medium">
<img src="car-cyan.png" class="blur-medium">
<img src="car-magenta.png" class="blur-medium">
<img src="car-yellow.png" class="blur-background">
<img src="car-black.png" class="blur-background">

.blur-foreground { filter: url(#blur-foreground); }
.blur-medium { filter: url(#blur-medium); }
.blur-background { filter: url(#blur-background); }

My set of six colorful Beetles are now racing across the viewport and my final Feitler-inspired design is a winner too.

NB: Smashing members have access to a beautifully designed PDF of Andy’s Inspired Design Decisions magazine and full code examples from this article.

  1. Inspired Design Decisions: Avaunt Magazine
  2. Inspired Design Decisions: Pressing Matters
  3. Inspired Design Decisions: Ernest Journal
  4. Inspired Design Decisions: Alexey Brodovitch
Smashing Editorial
(vf, ra, yk, il)

Source: Smashing Magazine, Inspired Design Decisions: Bea Feitler, An Unstoppable Creative Force

Text-To-Speech And Back Again With AWS (Part 2)

dreamt up by webguru in Uncategorized | Comments Off on Text-To-Speech And Back Again With AWS (Part 2)

Text-To-Speech And Back Again With AWS (Part 2)

Text-To-Speech And Back Again With AWS (Part 2)

Philip Kiely



This is the second half of a series on transforming content between text and speech on AWS. In part one, we used Amazon Polly to narrate blog posts and embedded the content in a website using an audio tag. In this article, we will use speech-to-text to draft transcripts of podcasts and interviews for publication. Finally, we will evaluate the overall accuracy of these format-transformation technologies by running a few samples through round-trip transcriptions.

Speech-To-Text Project

In 2012, Patrick McKenzie (a.k.a. patio11, of Kalzumeus and Stripe) and Ramit Sethi (of I Will Teach You To Be Rich) sat down and recorded two hour-long podcasts. As I am a fan of both of their work, I probably would have listened to the podcasts, but I definitely wouldn’t have listened to them several times each. The transcripts, on the other hand, I can reread and reference at my leisure. I also freely recommend the series when talking to people about freelancing, knowing that I am giving them a resource that takes a quarter the time to read that it takes to listen to. Even though the content of the podcasts and transcripts are exactly the same, the combination is 10× as useful as the podcast alone.

In the first transcript, McKenzie says that he paid 75 dollars and waited a couple of days to have the podcast transcribed by a professional service. His other option was to transcribe it himself. When I worked for my college’s newspaper, I frequently transcribed interviews. Over time, I got more practiced at the skill and improved from taking four minutes of transcribing per minute of audio to three minutes per minute. While I imagine that a professional with specialized equipment and a faster typing speed could drop below two minutes per minute, as an amateur transcriber McKenzie likely saved himself five or six hours of work by paying for the service.

Seven years later, it seems like he should have another option: an automated transcription with Amazon Web Services. As we’ll see, the transcription would require significantly more editing before it would be publication-ready, but automated transcription has two killer features compared to hiring a professional: he would have gotten the transcription back in real time for about a dollar. In this article, I’ll explain how you can use Speech-to-Text on AWS to easily make your content multi-format and ideas for using Amazon Transcribe in more complex applications.

Amazon provides a console to experiment with Transcribe. To access the console, log on to your AWS account and search “Transcribe” in the services search field. The console exposes the full power of Transcribe, and if you’re only planning on transcribing a few pieces of content per week then using the console is a solid long-term option. The transcription console gives you two options: streaming audio and uploading a file.

Amazon Transcribe Console Real-Time Transcription Tab

You can launch live transcriptions in the real-time transcription tab. (Large preview)

The “real-time transcription” tab offers the ability to speak into the microphone and have a transcription generated in real time. Speaking deliberately, and with my computer’s onboard microphone, I was able to transcribe the sentence “Smashing Magazine publishes technical content for developers worldwide” on the first try. However, when I tried to transcribe the previous paragraph at a more conversational speed and articulation, there were numerous errors.

“Amazon provides a consul to experiment with transcribe access. The console log onto a ws account and search transcribed in the services search field, The consul exposes the full power of transcribed. And if you only planning on transcribing a few pieces of content a week than using the consul is a solid long term option. The transcription Council gives you two options streaming audio and uploaded a file.”

In addition to simply missing some words, Transcribe has issues with homophones and punctuation. In the first sentence, it transcribed “console” as “consul.” This homophone error can only be corrected by evaluating each transcribed word in the context of the sentence and adjusting according to the algorithm’s best guess. The first sentence also runs into the second, which throws off the grammatical structure and meaning of the entire rest of the paragraph. Beyond contextual clues, Amazon Transcribe seems to use pauses to determine punctuation. That said, I am using a built-in microphone, transcribing in real time, and to be honest I don’t have the clearest speaking voice. Let’s see if we can find improvements by mitigating each of these factors.

I used a Blue Yeti, a midrange all-purpose recording microphone, to stream audio into the console. As you can see in the image below, improved audio quality did not significantly improve transcription quality. I hypothesize that while a poor quality audio input would further degrade the text’s accuracy, improvement past the threshold of a built-in microphone or cheap webcam does not provide the quality transcription that we are looking for.

Results of using a good microphone

Improving microphone quality does not materially improve transcription quality. (Large preview)

Using the same microphone, I recorded the same paragraph as an .mp3 file and uploaded it for transcription. To do the same, navigate to the “Transcription Jobs” panel and click the orange button with the text “Create Job.” This will bring you to a form where you can configure the transcription job.

Transcription job form top half

A transcription job requires a title, language, input source, and file format. (Large preview)

The job name is arbitrary, just choose something that will be meaningful to you when you review the completed jobs. You can select from about a dozen languages, with English and Spanish available in regional variants. The transcription service draws its input from S3, so you’ll need to upload your audio file to the storage service before you can run the job. You can upload the file in one of four supported formats: .mp3, .mp4, .wav, and .flac.

Transcription job form bottom half

A transcription job offers data location and audio identification options. (Large preview)

If you want to keep the output data in a permanent location, change “Data location” to “Customer specified” and enter the name of an S3 bucket that you can write to. Finally, you can choose between two identification options. Channel identification tags input with the channel that it came from in the audio file, while “Speaker identification” attempts to recognize distinct voices in the audio. If you are transcribing a multi-person podcast or interview, Speaker identification is a useful feature, but it is not applicable to this simple test.

Inspecting the output, unfortunately, reveals that the transcription is no more accurate than the real-time console transcription. However, running a transcription job does provide more data. In addition to the transcription text, the job outputs JSON with each word, its confidence score, and alternate words considered, if any. If you want to write your own natural language processing code to try to improve the readability of the output, this data will give you what you need to get started.

Finally, I had a friend who hosts a local radio show narrate the same paragraph for live transcription. Despite his steady pace and clear enunciation, the resulting text was no more accurate than any of my live transcription attempts. While a professional narrator may be able to achieve even more specific pronunciation, the technology is really only useful if it is widely usable.

Unfortunately, it seems that the transcription quality is too low to fully automate our proposed use case. Depending on your typing speed, running audio through Amazon Transcribe and then editing by hand may be faster than simple manual transcription, but it is not a turnkey solution for speech-to-text that compares to what exists for text-to-speech. For specific domains, you can define Custom Vocabularies to improve transcription accuracy, but out of the box, the service is insufficiently advanced.

As with most of its services, AWS offers an API for using Transcribe. Unless you have a large number of files to transcribe or you need to transcribe audio in response to events, I would recommend using the console and save yourself the time of setting up programmatic access.

To use Transcribe from the AWS CLI, you’ll need a JSON file and a terminal command.

aws transcribe start-transcription-job 
     --region YOUR_REGION_HERE 
     --cli-input-json YOUR_FILE_PATH.json

At YOUR_FILE_PATH.json, you’ll need a .json file with four pieces of information. As above, you can set any meaningful string as the TranscriptionJobName and any supported language as the LanguageCode. The CLI supports the same four media file formats and still reads the media file from S3.

{
    "TranscriptionJobName": "request ID", 
    "LanguageCode": "en-US", 
    "MediaFormat": "mp3", 
    "Media": {
        "MediaFileUri": "https://YOUR_S3_BUCKET/YOUR_MEDIA_FILE.mp3"
    }
}

This kind of access is also available through a Python SDK. Amazon recommends Transcribe for voice analytics, search and compliance, advertising, and closed-captioning media. In each of these cases, the transcribed text is an input to another system like Amazon Comprehend rather than the final output. Thus, as a developer, it is important to design your system and limit its use cases to tolerate the range of errors that Transcribe will feed into your application.

Note: For more on using Amazon Transcribe and other services programmatically, check out Amazon’s getting started guide.

Round Trip Accuracy

While the live performance of Amazon Transcribe was somewhat disappointing, we can investigate the theoretical maximum accuracy of the system by transcribing something that was read by Amazon Polly. The two services should be using compatible pronunciation libraries and speech cadences, so text input into Amazon Polly should survive the round trip more or less intact. Of course, we will stick with the same test paragraph.

Lo and behold, this is the only strategy that has made the transcription noticeably better:

“Amazon provides a console to experiment with transcribe. To access the console, log onto your AWS account and search transcribing the service’s search field. The console exposes the full power of transcribe, and if you’re only planning on transcribing a few pieces of content per week than using the console is a solid long term option. The Transcription council gives you two options. Streaming audio and uploading a file.”

Stubborn errors persist (“council” versus “console” comes in at 70% confidence) but overall the text is a few edits away from useable. However, most of us don’t speak like synthesized robots, so this quality is unavailable to us at the time of writing.

Conclusion

While the quality of output speech and text are noticeably lesser than that of a person, these services cost so little that they are a strong alternative for many applications. Text-to-speech, at 4 dollars per million characters (16 dollars per million for the superior neural voices), can narrate articles in seconds for pennies. Speech-to-text, at .04 cents per second, can transcribe podcasts in minutes for about a dollar. Of course, prices may change over time, but historically as technologies like these improve, they tend to become less expensive and more effective.

Because of the low cost, you can experiment with these technologies for things like improving your personal productivity. When biking or driving to work, it is impossible to type notes or an outline a project, however, speaking and automatically transcribing a stream-of-consciousness narration would get a lot of planning done. Journalists frequently transcribe long interviews, a process which AWS can automate by tagging the voices of people speaking in a recording. On the other side of the writing process, having a steady, robotic voice read your work back to you can help you identify errors and awkward phrasing.

These technologies already have a number of use cases, but that will only expand over time as the technologies improve. While text-to-speech is reaching near-perfect accuracy in pronunciation, especially when assisted by pronunciation alphabets and tags, the synthesized voice still doesn’t sound fully natural. Speech-to-text systems are pretty good at transcribing clear speech but still struggle with punctuation, homophones, and even moderately quick speech. Once the technologies overcome these challenges, I anticipate that most applications will have a use for at least one of them.

Smashing Editorial
(dm, yk, il)

Source: Smashing Magazine, Text-To-Speech And Back Again With AWS (Part 2)

How To Ensure Your Design System Helps To Achieve The Purpose Of Your Product

dreamt up by webguru in Uncategorized | Comments Off on How To Ensure Your Design System Helps To Achieve The Purpose Of Your Product

How To Ensure Your Design System Helps To Achieve The Purpose Of Your Product

How To Ensure Your Design System Helps To Achieve The Purpose Of Your Product

Nick Babich



(This is a sponsored post.) Design systems help product teams to approach design with a system in mind. But not all design systems are equally effective. Some design system help product teams create coherent experience; others produce confusing designs.

The effectiveness of a design system can be measured by how well it works to help achieve the purpose of the product. In this article, we’ll try to find the qualities that make a design system good for your product development.

Do You Clearly Understand Why You Need A Design System?

All too often, product teams attempt to create a solution for a problem they don’t have. And when it comes to creating a design system, some teams attempt to create a system just because other teams are doing it.

Product And Company Maturity

Companies have different levels of design maturity. Some companies have a product with thousands of users, while others are just beginning to implement their product.

Creating a design system from scratch is a time-consuming activity. Small fast-moving teams likely don’t need a design system because it would slow them down. A three-to-five–person startup that is trying to find a product-market fit would probably spend a significant amount of time creating a system. And if resources are being spent on building a design system, they aren’t being spent on building the product. Until the company establishes a clear direction with its product, investing time in creating a design system risks producing a lot of waste.

A design system should come from the need to increase efficiency at scale. And it happens only when a team has real problems with the efficiency that prevent it from moving quickly. Let your team hit scale first and reach a point where inefficiencies such as in the technical and design departments become significant factors in design decisions.

Interface Audit And Technology Stack

Many companies tend to build a design system on top of the current interface, but this approach is not very good for many reasons. Imagine that your company has been building a product for a long time without a system; it’s likely that the product has some level of inconsistency in design.

That’s why if you plan to introduce a design system, start with an audit: Explore existing interactions, and collect all of the UI elements in your product. Collect all elements that make up the interface, and file them for review. The reviews should help you to understand the reason for inconsistency and the changes you’ll need to introduce in the design process in order to avoid such problems in the future.

Does The Design System Set A Clear Direction For Designers And Developers?

A design system is valuable only if the people who are working on the product adopt it. Shared understanding plays a vital role in adoption of the system.

Before starting to design a product, it’s essential to align teams around a clear set of shared goals. Build a vision, and ensure that everyone is looking in the same direction. A design system should give teams a guided way to build solutions for their product problems.

Mapping Out User’s Needs, Goals, And Motivations

One of the first things we need to do when starting to work on a product is to understand who our users are and what are their goals, needs, and motivations. This information should be the foundation of the design system you want to create.

Tools like user-journey mapping and the Jobs to be Done framework will help you to understand how people interact with your product. The product team should keep this information in mind when working on the design system.

Express The Purpose Of The Product

The purpose is the core of the product, and it should inform design and development decisions. The purpose of a product should be expressed in one sentence. For instance, if we were designing a meditation app for quick relaxation, our goal would be to help people who use our app to relax. If we expressed this purpose in a single sentence, it would be something like, “Help people relax in no time.”

Note that the purpose should be natural, not forced; otherwise, the team won’t believe in it.

Establish Clear Design Principles

Solid design principles are the foundation of any well-functioning system. They should capture the essence of what good design means for the company and provide practical recommendations for product teams on how to achieve it.

Design principles should be created on the principles and values of the product. Design Principles of the Lightning Design System. (Large preview)

Below are just a few guidelines for design principles.

Design Principles Should Be Authentic And Genuine

Many of us hear principles like “simple and useful”. But qualities like these should be a given. Knowing that your product should be simple and useful is not going to be helpful in guiding your design decisions. Imagine that a new member joins your team, and you need to share the three guiding principles that are most important when designing a product. You might say something like, “We like simple things — strive to create simple things.” This doesn’t say much to the person. It’s hard to imagine that anyone would intentionally create a complex and useless product.

That’s why principles should offer practical guidance on how to solve a design problem within the context of the particular product. One of the design principles of Medium, a popular blogging platform, is “Direction over choice.” Thanks to this principle, instead of designing a text editor with endless visual styles, Medium’s design team decided to limit the number of visual styles. In doing so, they make the writer focus on what’s really important: the content they are producing.

Medium text editor. (Large preview)
Design Principles Should Be Memorable

Ask the people in your company what your design principles are. If no one can remember them, chances are they are not working.

Design Principles Should Provide Practical Examples

Even the best principles can be interpreted in different ways. Nothing makes a principle clearer that being paired with a real-life example, showing how it can be applied in context.

Tip: Sometimes you need to provide counter-examples to help people understand what not to do.

How Effective Is The Design Language Of The Interface?

A design language emerges as a team works on a product. The design language of the interface has a significant impact on how users interact with the product. If a product created with a design system is confusing and doesn’t help users achieve their goals, then the design system is not effective.

How Design Patterns Are Executed And Applied

A pattern is a reusable solution that can be applied to solve a design problem. Design patterns are shaped by the core idea of how a product works, and they form the foundation of the language that the team uses to communicate with users.

There are two types of patterns: functional and perceptual.

Functional Patterns

Functional patterns are the tangible building blocks of an interface. Buttons, icons, text fields and so on all come together to form what we call a product.

Many factors influence the choice of design patterns, and most of them come from the domain that the product belongs to and from its core functionality. Let’s take a finance product as an example. A finance product might need to prioritize multitasking and quick scanning (which require greater information density). In Bloomberg’s interface, shown below, density is achieved through tight spacing, compact controls, and good typography choices.

Bloomberg terminal has a dense design, fitting large amounts of information on the screen. Image: Wikipedia. (Large preview)
Perceptual Patterns

In his book _The Timeless Way of Building_, Christopher Alexander asks why some places feel so great to be in, while others feel dull and lifeless. According to him, the way places and buildings make us feel is the result of specific patterns: perceptual patterns.

Perceptual patterns focus on what users feel. Colors, typography, iconography, shapes, and animation come together to form the identity of a product. Without perceptual patterns, you wouldn’t sense much difference between products in the same domain.

The aesthetics and voice and tone in a product should capture the personality and ethos we want to convey through the interface:

  • How do we want our product to be perceived?
  • Is our product serious or playful?
  • Should it be utilitarian or emotional?

MailChimp’s Voice and Tone. Image source. (Large preview)

It’s also important to understand that perception is influenced not only by individual elements (text, colors, typefaces, white space, etc.), but also by the relationships between those elements. In other words, it’s not enough to use colors and fonts consistently; we should also be aware of the “just right” combinations that make a product feel a certain way.

Tip: When working on a perceptual pattern, you can use the technique of moodboarding. Collect all elements with relevant visual styles, and define their core visual brand elements. Moodboards are an excellent tool to explore different visual themes. To make one, you can use a digital tool like Pinterest or assemble printed pages on a large board.

Measure Your Progress

Implementing a design system is a process. And it’s crucial to ensure along the way that the system is helpful. No matter how good you are at predicting things, in many cases, it will be hard to predict how a particular change will affect the user experience. That’s why it’s important to define metrics and to track them along the way. After every release, measure how your product performs. Measure the qualitative and quantitative results, and make sure your metrics are going in the right direction.

How Effective Are The Practices Of The Team?

How Fast Does The Internal Design Team Work?

Can the people working on the product ship changes more quickly?

An effective design system allows a business to meet its goals faster and at a lower cost. A design system should reduce implementation decisions, because team members would have all elements of a product ready for use, along with information on how to use them. As the process of building products accelerates, designers will gain time, which they can invest in other areas, such as user research.

Here are a few areas to monitor:

  • Efficiency
    Measure how fast new patterns are integrated and how fast changes to existing patterns are introduced. If designers often have to introduce a new component to solve a problem, that could be a strong sign that the design system is not flexible.
  • Consistency
    How hard is to create consistent experiences across different platforms.

When it comes to design efficiency, investment in tools and technology is essential. A good toolbox will help to eliminate manual operations from your design process. Adobe XD offers two excellent features that can improve design efficiency: components and shared assets panel.

Using XD, you can create a master component to define a reusable UI element, such as a button. Create instances of any component in your UI, and customize them. The components are designed to resize responsively, so you can take any instance and adjust the size of the component, and XD will automatically manage the placement and scaling of the elements within the component for you.

You can use the Assets panel to curate a collection of reusable elements that you want to make available to other designers on your team. To enable others to use the visual styles and components you’ve defined, invite them to the document using “Share” → “Invite to Edit”. The great news is that everyone will leverage the latest assets; whenever the design is updated, team members who have been invited to the collection will be notified about the changes. Team members will be able to update at their own discretion.

How Easily Can Developers Code The UI?

It’s well known that developers and designers must work hand in hand. And when it comes to communication between designers and developers, design specifications play a key role. The most important aspect of the design specification is clarity: If developers don’t understand the specification, they might implement something different from the original idea. A good design specification reduces false interpretation of design decisions.

With Adobe XD, creating an unambiguous specification is a relatively simple process. You can use “Share” → “Share for Development” to publish your design system on the web. The resource will contain information about color values, style attributes, and downloadable assets.

Image source. (Large preview)

How Good Are The Naming Conventions?

Does the design system allow team members to communicate more efficiently? Language is fundamental to collaboration. Every element in a design system should have a name that is known and that makes sense to the people on your team. Proper naming conventions are especially important for products that will scale — as the number of patterns in a library increases, good naming conventions can help team members quickly find what they’re looking for.

Here are a few tips on naming elements:

  • The distinguishing aspect of a design system’s language is its stickiness. Similar to any other language, we need to use the language if it is to survive. It needs to be a part of our daily routine.
  • Naming an element can be hard when the team hasn’t fully understood its purpose. If you have a hard time finding the right name, chances are that something isn’t quite right. Maybe an element’s purpose is unclear.
  • Name components from the user’s perspective. Speak to users and potential users of the product, and name components according to how their refer to them. This will help engineers to think from the user’s perspective and to always have users in mind.
  • Test your language with users. This ensures that the modules you’ve defined are aligned with your user’s potential behaviors and mental models.

How Easy Is It To Maintain The System?

A design systems is not a static tool, but rather a living organism in your company. It should grow and evolve together with your product. The time required to keep the system up to date plays a key role in its success or failure. If keeping the design system updated becomes difficult, it will quickly become outdated.

Here are two important moments to consider:

  • Depending on the size of a company, a design system could be either static or dynamic. It’s always better to have a dynamic design system, one that will be updated in real time with the product. Also, a static design system would not fit a company that has large-scale products, because the time required to introduce changes would be significant.
  • A design system should have a roadmap and backlog. As with any other product, creating a design system is an iterative process, constantly ongoing.

Does The Design System Extend Creative Directions?

Creative experimentation is an integral part of the design process. Sometimes, effective design decisions are based on intuition. That’s why one of the main goals of a design system is to extend creative direction. A design system should encourage the people who work on the product to be creative and spontaneous.

Invite Everyone To Contribute To The System

Everyone in the company should be not only allowed but encouraged to contribute to the system. Give people enough freedom to contribute, yet make sure the system stays managed and curated.

Tip: Follow a process of peer-to-peer reviews. This will increase awareness of the design system.

Achieve A Balance Between A Sticky And Loose System

Some users of design systems fixate on perfect consistency. But perfect consistency doesn’t guarantee a great product. If the process you’re following is restrictive, you risk ending up with a generic design. That’s why it’s vital to find a balance between consistency and creative expression in the design.

When it comes to creative exploration, it’s always better to experiment on a small scale first. If some elements work well (such as a new style for a call-to-action button), then the design system should make it easy to integrate the changes into other parts of the interface.

Conclusion

A well-crafted design system serves as a North Star of your product development. A design system amplifies design-driven culture — it encourages people who work on the product to look beyond the building blocks and to think of the purpose of their design. The big picture that a design system imparts will lead to a better understanding of your users and, ultimately, a better user experience.

This article is part of the UX design series sponsored by Adobe. Adobe XD tool is made for a fast and fluid UX design process, as it lets you go from idea to prototype faster. Design, prototype and share — all in one app. You can check out more inspiring projects created with Adobe XD on Behance, and also sign up for the Adobe experience design newsletter to stay updated and informed on the latest trends and insights for UX/UI design.

Smashing Editorial
(ms, yk, il)

Source: Smashing Magazine, How To Ensure Your Design System Helps To Achieve The Purpose Of Your Product

SmashingConf Freiburg 2019: Videos And Photos

dreamt up by webguru in Uncategorized | Comments Off on SmashingConf Freiburg 2019: Videos And Photos

SmashingConf Freiburg 2019: Videos And Photos

SmashingConf Freiburg 2019: Videos And Photos

Rachel Andrew



We returned to our home in Freiburg for the 2019 SmashingConf, and brought all the SmashingConf fun with us. We’ve wrapped up the event in this post, including links to the video of all of the presentations, so you can relive what you enjoyed — or share in something of what you missed.

Smashing built in lego bricks

‘Smashing’ in Lego, built by our attendees. (Photo credit: Drew McLellan)

The Presentations

The main focus of the conference is the speakers and the presentations they bring. As with all of our 2019 events, some speakers opted to present without slides. In the tables below, I’ve linked to slides for those talks which had them, plus the video of each presentation. Enjoy two days worth of learning from the comfort of your own couch!

Day One

The Day One Collaborative Doc created by attendees is full of takeaways from the first day of the conference. Rémi Parmentier used our stage to launch his project “Can I Email…?”, a site which aims to do for HTML email what Can I Use does for web platform features.

Speaker Name Talk Title Video & Slides
Joe Leech Designing Powerful Users Experiences With Psychology Video, Slides
Anna Migas Effortless Performance Debugging Video
Uri Shaked and Benjamin Gruenbaum The Anatomy Of A Click Video, Slides
Val Head Designing With Motion Video, Slides
Rémi Parmentier Think Like An Email Geek Video, Slides
Benjamin Hersh Every Product Has A Voice Video

Two people on a sofa on stage talking

Vitaly interviews Anna Migas after her talk. (Photo credit: Drew McLellan)

Day Two

Check out the Day Two Collaborative Doc for more resources and thoughts from our attendees and speakers.

Our mystery speaker was Seb Lester. No-one managed to guess the theme mystery, although there was a suggestion it might be the panda that was sat on stage!

We then enjoyed talks covering a wide range of topics from our day two speakers. Our final speaker, Heather, also announced her new book, which she will be publishing through Smashing Books! Heather also wrote up a post in which she shares her thoughts on speaking at Smashing Conf and also answers lots of questions from the audience that she didn’t have time to during the Q&A session.

A woman presenting on stage

Heather Burns Was our final speaker of the day. (Photo credit: Drew McLellan)
Speaker Name Talk Title Video & Slides
Robyn Larsen International Is The New Mobile First Video
Philip Walton Service Workers For The Rest Of Us Video
Guillaume Kurkdjian A Little Advice From An Illustrator And Animator Video
Sara Soueidan Applied Accessibility: Practical Tips For Building More Accessible Front-Ends Video, Slides
Heather Burns Building Privacy Conscious Products Video, Slides

A man and woman on stage, the woman behind a lectern

Sara Soueidan being introduced by Vitaly (Photo credit: Drew McLellan)

Workshops

Our workshops are a big part of each of our Smashing conferences. In Freiburg, workshops were held the day after the conference. This time round, we saw the following workshops:

Name Workshop Title
The Deque Team How To Translate Wireframes Into Accessible HTML and CSS
Sara Soueidan Accessible UI Patterns
Joe Leech Psychology For UX And Product Design
Vitaly Friedman Smart Responsive UX Design Patterns

Side Activities

A conference isn’t just about the talks and speakers. We want to make spaces where attendees and speakers can learn from each other and share experiences in a more informal setting. We want to offer something for everyone — from the party-goers to the fitness enthusiasts, and everyone in-between! So at lunchtime, we had lunch sessions: On Day 1, we saw the “Web We Want” panel discussion from Microsoft, and on Day 2, Deque ran a session in which attendees could grab a plate of lunch and settle down in a more cozy environment to take part.

Three women panelists

‘The Web We Want’ panel (Photo credit: Drew McLellan)

We had a great lounge area, with the talks live-streamed where some attendees spent time watching talks and building lego or doing jigsaw puzzles.

Overhead shot of people doing jigsaw puzzles and building lego

Doing puzzles in the lounge (Photo credit: Drew McLellan)

We enjoyed all of these things powered by excellent coffee from a barista stand, sponsored by our friends at Honeypot.

Morning Run

If you follow me on Twitter, you’ll know that I’m a keen runner, and it’s always nice to have some company on an early morning run. For a few conferences now, we’ve been organizing pre-conference runs — Freiburg was no exception. Runners joined me on both days for 5k along the river — we even avoided the rain.

Jam Session

The Jam Session this time round was hosted by Shopify. Attendees spent time socializing and hearing some lightning talks.

The Planetarium, Cable Car and Photo Walk

On the Sunday before the conference, some hardy souls took a trip up the Schauinsland Cable Car. It’s the longest loop cable car in Germany, and everyone had fun despite the weather being less than ideal for views from the top.

After Day 1, everyone was invited to enjoy a show at the Freiburg Planetarium before heading over to the after-conf party. Our party this year was held at Grünhof Freiburg and sponsored by Speedcurve. Speakers and attendees were able to enjoy time together in the garden there, as the weather had improved from the previous day!

After Day 2, many attendees enjoyed a history photo walk around beautiful Freiburg, learning more about the town and having the chance to take some photos.

Want To Join In The Fun?

We packed a lot into those few days! If you were there, we hope that you enjoyed it as much as we did. It was great to meet so many of you.

Conference attendees throwing balloons

Balloons! (Photo credit: Drew McLellan)

If you would like to be part of the SmashingConf fun next year, we have launched our full schedule of events for next year. You can join us in San Francisco, Freiburg, New York, or our new city of Austin! The conferences this year all sold out well in advance, so if there is an event you have your eye on, grab a ticket at early-bird pricing today!

https://platform.twitter.com/widgets.js

Smashing Editorial
(il)

Source: Smashing Magazine, SmashingConf Freiburg 2019: Videos And Photos

Beneath The Autumn Leaves (October 2019 Wallpapers Edition)

dreamt up by webguru in Uncategorized | Comments Off on Beneath The Autumn Leaves (October 2019 Wallpapers Edition)

Beneath The Autumn Leaves (October 2019 Wallpapers Edition)

Beneath The Autumn Leaves (October 2019 Wallpapers Edition)

Cosima Mielke



Misty mornings, pumpkins, leaves shining in bright red, yellow, and orange hues — these are just some of the things about October that inspired artists and designers to participate in this month’s wallpapers challenge.

The monthly challenge has been going on for more than nine years already, and each time anew, creatives from all across the globe submit their designs to it to cater for some variety on your desktop and mobile screens — and for a bit of fresh inspiration, of course.

In this collection, you’ll find their wallpaper designs for October 2019. They come in versions with and without a calendar so that you can continue to use your favorite even after the month has ended. Speaking of favorites: As a little extra goodie, we compiled some favorites from past wallpapers editions at the end of this post. A big thank-you to everyone who shared their designs with us this time around. Happy October!

Please note that:

  • All images can be clicked on and lead to the preview of the wallpaper,
  • We respect and carefully consider the ideas and motivation behind each and every artist’s work. This is why we give all artists the full freedom to explore their creativity and express emotions and experience through their works. This is also why the themes of the wallpapers weren’t anyhow influenced by us but rather designed from scratch by the artists themselves.

Submit your wallpaper

We are always looking for designers and artists to be featured in our wallpapers posts. So if you’re feeling creative, please don’t hesitate to submit your design. We’d love to see what you’ll come up with for November. Join in! →

First Scarf And The Beach

“When I was little my parents always took me and my sister for a walk at the beach in Nieuwpoort, we didn’t really do those beach walks in the summer but always when the sky started to turn grey and the days became colder. My sister and I always took out our warmest scarfs and played in the sand while my parents walked behind us. I really loved those Saturday or Sunday mornings where we were all together. I think October (when it’s not raining) is the perfect month to go to the beach for ‘uitwaaien’ (to blow out), to walk in the wind and take a break and clear your head, relieve the stress or forget one’s problems.” — Designed by Gwen Bogaert from Belgium.

First Scarf And The Beach

Rain And Acorns

“Waiting at the bus stop when it’s raining in October can be a sad and wet experience. The bus is late, the dry spot is taken by other people and you’re just standing there in the rain with your hands in your pockets with nowhere to go. Acorns must have a hard time like that too! Waiting in the rain for the squirrels to come and pick them up.” — Designed by Casey Dulst from Belgium.

Rain And Acorns

Transitions

“To me, October is a transitional month. We gradually slide from summer to autumn. That’s why I chose to use a lot of gradients. I also wanted to work with simple shapes, because I think of October as the ‘back to nature/back to basics month’.” — Designed by Jelle Denturck from Belgium.

Transitions

Autumn Is In The Air

“October reminds me of autumn, the season where you see fall leaves, squirrels, the weather that’s changing. Ever walked into the woods when it’s autumn? You can hear the magical sound of the wind blowing away the leaves. The woods are the most beautiful at fall, everything starts to color into yellow, orange, and brown. And you can meet some nice squirrels at the corner of a tree.” — Designed by Delphine Wylin from Belgium.

Autumn Is In The Air

The Return

Designed by Ricardo Gimenes from Sweden.

The Return

Sleepy Hedgehog

“Hedgehogs usually start to hibernate around October. This little hedgehog is celebrating Halloween on his own terms, while he is asleep.” — Designed by Aaron Harinck from Belgium.

Sleepy Hedgehog

The Month Of Tricks And Treats

“The fiery pumpkins blaze in the dark. The bonfires, the songs, the dancing around and the sumptuous feast. There is so much to look forward to this month.” — Designed by Mobile App Development from India.

The Month Of Tricks And Treats

Turtles In Space

“Finished September, with October comes the month of routines. This year we share it with turtles that explore space.” — Designed by Veronica Valenzuela from Spain.

Turtles In Space

Halloween House Call

“Halloween brings a nighttime of fun for all the family. With trick-or-treating round the neighborhood, it’s a pastime families love to take part in nationwide. We wanted to celebrate this event by coming up with a design concept that would pay homage to the most iconic Halloween fruit of them all, the mighty Pumpkin! What better way to look forward to this spooktacular night than with a geometric art pumpkin calendar. Enjoy your night, whatever you have planned!” — Designed by Ever Increasing Circles from the United Kingdom.

Halloween House Call

Create More

“The colors of the sun inspired me.” — Designed by Hitesh Puri from India.

Create More

Sober October

“Every year when October begins, my family and I light up the fireplace for the first time. This time of the year the leaves start falling and it starts to become cold outside which makes it even cosier.” — Designed by Jasper Vermeulen from Belgium.

Sober October

Brexit

“October 2019 will always be remembered as Brexit-month so I wanted to create a wallpaper that’s inspired by Brexit. At the same time I wanted to stay away from the classic Brexit/Europe colours. I came up with a pop-up window to imply that maybe, before really exiting the EU, the UK should reconsider what they are doing. ‘Is it ok to take this huge decision while people are screaming for another referendum’ is only one of the questions I want the British government to ask themselves.” — Designed by Nand Rogge from Belgium.

Brexit

Month Of Gratitude

“As autumn advances, the leaves descend in great gratitude, they return to Earth to rise again. Under the shedding tree the students and teachers learn, for a teacher sheds her years so that the students can grow.” — Designed by Mindster from India.

Month Of Gratitude

Disarmament Week

“According to research, 44 million Americans own firearms. The last week of October is Disarmament Week, so we are inspired by states like Liechtenstein, who abolished army and don’t use weapons. This monthly calendar is dedicated to all those who follow this trend. If the whole world was like Liechtenstein, we would be happier and cheerful. So, let’s all stand together against guns and bombs and establish a world without ammunition.” — Designed by PopArt Studio from Serbia.

Disarmament Week

Apples

“Apples are known all throughout the world yet barely anyone knows about Apple Day. For this reason I decided to put Apple Day in an extra spotlight and create a calendar about it. I hope others may enjoy apples as much as I do.” — Designed by Miguel De Pelsmaeker from Belgium.

Apples

Wandering In Woods

“The icy mountains keeping the body frozen, yet the mind wandering over the expansive woods.” — Designed by Sweans Technologies from London.

Wandering In Woods

Oktoberfest

“When I think about October, I immediately say ‘Oktoberfest’, partly for the obvious October part, but mostly for the ‘fest’ one. As we all know, Oktoberfest is a German traditional celebration dedicated to beer, that annually gathers friends from everywhere around the world, all having in common the passion for good beer (in large quantities), traditional food and the fun factor. And what can be more entertaining than having fun with your friends while drinking beer in an authentic German scenario?” — Designed by Loredana Codau (@loricacucrizanteme on Instagram) from Romania.

Oktoberfest

Oldies But Goodies

Hidden in our wallpapers archives, we rediscovered some nearly-forgotten treasures from past editions. May we present… (Please note that these designs don’t come with a calendar.)

Shades Of Gold

“We are about to experience the magical imagery of nature, with all the yellows, ochers, oranges, and reds coming our way this fall. With all the subtle sunrises and the burning sunsets before us, we feel so joyful that we are going to shout it out to the world from the top of the mountains.” — Designed by PopArt Studio from Serbia.

Shades Of Gold

Flying Home For Halloween

“You can only fully master the sky wearing an aviator hat and goggles. Like this little bat, flying home to celebrate Halloween with his family and friends.” — Designed by Franke Margrete from the Netherlands.

Flying Home For Halloween

Hanlu

“The term ‘Hanlu’ literally translates as ‘Cold Dew.’ The cold dew brings brisk mornings and evenings. Eventually the briskness will turn cold, as winter is coming soon. And chrysanthemum is the iconic flower of Cold Dew.” — Designed by Hong, ZI-Qing from Taiwan.

Hanlu

Strange October Journey

“October makes the leaves fall to cover the land with lovely auburn colors and brings out all types of weird with them.” — Designed by Mi Ni Studio from Serbia.

Strange October Journey

Fallen Woods

Designed by Dan Ioanitescu from Canada.

Desktop Wallpaper - October 2012

Autumn Gate

“The days are colder, but the colors are warmer, and with every step we go further, new earthly architecture reveals itself, making the best of winters’ dawn.” — Designed by Ana Masnikosa from Belgrade, Serbia.

Autumn Gate

Discovering The Universe!

“Autumn is the best moment for discovering the universe. I am looking for a new galaxy or maybe… a UFO!” — Designed by Verónica Valenzuela from Spain.

Discovering The Universe!

All The Things

“During our recent rebrand, everyone in our team got their very own icon, each one has been custom illustrated by a lovely man called Paul, who wears glasses. The icons have all been chosen to represent something personal to each individual as well as all the other usual suspects you’d expect from an iconset.” — Designed by Engage Interactive from the United Kingdom.

All the things

Exploration

“In my travels to Selinsgrove, PA this past month, I had another opportunity to appreciate the beauty that surrounded me: trees, mountains, streams, rivers and fauna. This exploration was the inspiration for this piece encouraging others to explore new places and cherish the experience of being outdoors.” — Designed by Gabrielle Gorney from the United States.

Exploration

Dreaming

“The moment when you just walk and your imagination fills up your mind with thoughts.” — Designed by Gal Shir from Israel.

Dreaming

Say “Bye” To Summer

“And hello to Autumn! The Summer heat and high season is over. It’s time to pack our backpacks and head for the mountains — there are many treasures waiting to be discovered!” Designed by Agnes Sobon from Poland.

Desktop Wallpaper - October 2012

Haunted House

Designed by Mad Fish Digital from the United States.

Trick Or Treat

Mushrooms

“Autumn is the mushroom season. Be vigilant. Do not abuse.” Designed by Cheloveche.ru from Russia.

Free Desktop Wallpaper - October 2011

Save Water, Drink Rain

Designed by Marika Smirnova from Russia.

Smashing Wallpaper - october 11

Autumn Colors

“I love the autumn colors and making pictures, this is a collage of bits and pieces of various autumn photos from previous seasons. Enjoy!” — Designed by Agnes Swart from the Netherlands.

Autumn colors

A Time For Reflection

“‘We’re all equal before a wave.’ (Laird Hamilton)” — Designed by Shawna Armstrong from the United States.

A Time for Reflection

Join In Next Month!

Thank you to all designers for their participation. Join in next month!

Source: Smashing Magazine, Beneath The Autumn Leaves (October 2019 Wallpapers Edition)

SmashingConf 2020 &ndash; San Francisco, Freiburg, New York And Austin

dreamt up by webguru in Uncategorized | Comments Off on SmashingConf 2020 &ndash; San Francisco, Freiburg, New York And Austin

SmashingConf 2020 &ndash; San Francisco, Freiburg, New York And Austin

SmashingConf 2020 &ndash; San Francisco, Freiburg, New York And Austin

Rachel Andrew



We’ve been running SmashingConf since 2012, when we held our very first conference in Freiburg, Germany. Since then, we’ve continued to experiment and improve on our conference experience. Our aim is that you enjoy your time with us, but also return to work with new insights and knowledge. Each time we hope to leave you with practical takeaways that will help you in your own work and want to share with your team.

What is a SmashingConf like? It’s hard to explain until you have been there, however ,this video compilation from Toronto might just give you an idea!

https://player.vimeo.com/api/player.js

Experimenting With Presentation Formats

Back in 2018, we began to experiment with the live-coding format. While not every presentation at SmashingConf was live-coded, many presenters brought a live element to their talk. Some speakers opted to present without slides completely, and these interactive sessions have been incredibly popular with audiences. Being able to watch an expert doing their work, seeing the tools they use and the choices they make in real time, brought many subjects to life.

“I love the fact that this talk format also kind of rid me of the expectation that it needed to be flawless.”

Sara Soueidan

Many of our speakers enjoyed the chance to try something different on stage; some have gone so far as to decide to make live-coding part of how they present in the future.

“I didn’t expect this, but I’m now seriously considering this format as a way I do talks at other conferences.”

Dan Mall

Not every talk fits a live-coding format, of course. Throughout 2019, we feel that we’ve found a great balance of practical live-coded (or live-designed) sessions, more traditional presentations with slides, and some which have mixed the two approaches. SmashingConf audiences are a mixture of designers and developers, of visual thinkers and those who learn best from seeing a lot of code.

As Dan Mall noted in his write-up of his live-coded talk:

“A few designers felt validated in their processes by seeing mine […]

“A few developers said design felt less intimidating now, both to understand as well as to try.”

In mixing up the formats as well as the subjects being discussed, we hope to bring parts of the industry to life — even for those who don’t normally work in that area.

Vitaly interviewing Val Head on stage at Smashing Conf Freiburg 2019

Talks are usually followed by an interview. (Photo credit: Drew McLellan)

In addition to playing with the format of presentations, we encourage audiences to engage with the speakers and each other. Talks are followed by an interview on stage — with the emcee posing questions asked by the audience. We publish a live Google Doc, so everyone can share their thoughts and ideas with the speakers as well as each other. Most of our speakers will attend the entire event, and enjoy the chance to chat with attendees. We believe everyone has useful knowledge to share — whether on stage or from the comfort of your seat!

Looking Forward To 2020

SmashingConf has always taken a holistic approach to the web. We believe that we all do better work when we work together and understand something of the roles of other team members. In 2020, we hope to build on the successes of 2019 by continuing to bring you some of the best live sessions — mixed with case studies, opportunities for networking, and surfacing some topics that are sometimes forgotten when focusing on design and development! We’ll cover topics such as HTML email, internationalization and localization, how to provide more accurate estimates, privacy, security, refactoring, debugging and the way designers and developers think as they work through their tasks and challenges.

We’re currently working hard on curating the line-up for all of the events next year. So, the big question is… where will you join us?

San Francisco, Freiburg, New York Or Austin!

The Smashing Cat will soon be on its way to Austin for the first time. We’re really excited about heading to Texas and about our events in cities we already know and love. Over the next few months, we’ll be announcing speakers and schedules for all of the events, but early-bird tickets are already available for San Francisco, Austin, and Freiburg 2020.

This year’s events have all been sold out well in advance of the conference dates, so mark the following dates in your calendars, have a chat with your boss, and work out where you will be heading to spend a fun and educational few days with the Smashing crew!

San Francisco, USA

Smashing San FranciscoSmashingConf SF will be taking place on April 21–22 where we’ll be bringing back two full days packed with front-end, UX and all that jazz! Live sessions on performance, accessibility, security, interface design, debugging and fancy CSS/JS techniques — and a few surprises along the way, of course! 🎸

Austin, USA

Smashing AustinSmashingConf Austin will be taking place in the wonderful ZACH Theatre on June 9–10, 2020. Tacos, cats, and a friendly community — see ya in Austin, I reckon? 🌮

Freiburg, Germany

Smashing FreiburgWe will be returning to our hometown for SmashingConf Freiburg on the 7-8 September 2020. We pour our hearts into creating friendly, inclusive events that are focused on real-world problems and solutions. Our focus is on front-end and UX, but we cover all things web — be it UI design or machine learning. The Freiburg edition is, of course, no exception!

New York, USA

Join us for SmashingConf NYC on the 20-21 October 2020. This event is always a popular one, so watch out for tickets going on sale very soon!

Smashing Editorial
(ra, vf, il)

Source: Smashing Magazine, SmashingConf 2020 &ndash; San Francisco, Freiburg, New York And Austin