Browse: Home   /   The fine folks at An Event Apart   /   Page 10

“Slow Design for an Anxious World” by Jeffrey Zeldman – An Event Apart video

“Slow Design for an Anxious World” by Jeffrey Zeldman – An Event Apart video

Most web pages are too fast or too slow. In 2018, An Event Apart cofounder Jeffrey Zeldman taught us how to create designs that work faster for our customers who are in a hurry to get things done. Now, in this 60-minute video recorded live at An Event Apart DC 2019, Zeldman shows us how to create designs that deliberately slow down our visitors, helping them understand more of what our organization is communicating, and make better decisions as a result.

Turn browsers into readers. Learn to make layouts that coax your visitor to sit back, relax, and actually absorb the content your team works so hard to create. Improve UX significantly without spending a lot or chasing the tail lights of the latest whiz-bang tech. Whether you build interactive experiences or craft editorial pages, you’ll learn how to ease your customers into the experience and build the kind of engagement you thought the web had lost forever.

Enjoy all the presentations in An Event Apart’s video library! There are over 60 hours of great talks for you to enjoy and learn from—all absolutely free! For more insightful presentations by the industry’s best and brightest, come to An Event Apart—three days of design, code, and content for web and product designers. And for free regular updates on all things web, design, and developer-y, subscribe to our mailing list.

Articles, Links, and Tools From An Event San Francisco 2019

Articles, Links, and Tools From An Event San Francisco 2019

Networking Tips

Jeffrey Zeldman, “Slow Design for an Anxious World”

Learn how to create designs that deliberately slow your visitors down, helping them understand more and make better decisions.

Margot Bloomstein, “Designing for Trust in an Uncertain World”

Consumers and citizens alike turn inward for the truth. By designing for empowerment, the smartest organizations meet them there.

<!–

Sarah Parmenter, “Designing for Personalities”

–>

Eric Meyer, “Generation Style”

A spotlight on generated content that shows how it can be a generator of creativity as well as a powerful, practical tool for everyday use.

Rachel Andrew, “Now You See It: Understanding Display”

Understanding the interaction between layout methods will enable you to easily create fallbacks for older browsers, and knowing how the various formatting contexts behave unlocks margin collapsing and the behavior of items inside grid or flex layout.

Historical

Normal Flow (Block and Inline Layout)

Display Level 3

Box Generation

Writing Modes

Lists

Flexbox

CSS Grid and subgrid

Testing

Jen Simmons, “Designing Intrinsic Layouts”

Jen walks you through the thinking process of creating accessible & reusable page and component layouts.

<!–

Cyd Harrell, “Making Research Count”

–>

Una Kravets, “Extending CSS With SVG and Houdini”

If you’ve ever wanted to customize CSS itself to do something new, you won’t want to miss this talk.

<!–

Mina Markham, “The Mythology of Design Systems”

–>

Sara Soueidan, “SVG Filters: The Crash Course”

Why SVG Filters are awesome, how they work, and examples of powerful effects you can create with them.

More resources that I used to learn SVG Filters and find inspiration from:

Val Head, “Making Motion Inclusive”

How to apply web accessibility guidelines to modern web animation, when and how to implement reduced motion, and approaches to building up animated interactions for a solid standards base.

<!–

Brad Frost, “The Technical Side of Design Systems”

–>

Jeremy Keith, “Going Offline”

All the knowledge and code you’ll need to free your website from the tyranny of a network connection.

Books

Sites

Progressive Web Apps

Laura Martini, “Talking Back: Conversation Design for VUIs”

Find out whether conversation design is right for your product, and how you can adapt your existing design and development processes to this new medium.

Indi Young, “Paying Better Attention to the Problem”

Methods for approaching user research with empathy, and techniques to explore problems and bring creative solutions.

Research Theater

Trying to Correct the Course of Digital Design & Technology

Gift Giving Guide

Derek Featherstone, “Inclusive, by Design”

Case studies of accessibility and inclusion on the web and with apps.

Gerry McGovern, “The Customer-Obsessed Professional”

Become more agile by increasing the amount of customer feedback you receive, and developing faster methods to make changes to your code, content, or design.

Join us in 2020 and save big; our holiday gift to you!

Join us in 2020 and save big; our holiday gift to you!

It’s the holiday season, so we’ve decided to have a little celebration. From Friday, December 13 through the last day of 2019, you’ll be able to use a special discount code that will take $200 off any two- or three-day pass to any of our 2020 events.

So what is that code? Keep an eye out on Twitter, Facebook, and our mailing list on Friday, December 13, to get this special discount.

Don’t miss our experts from around the world talking about subjects that are important to you and your career, when they gather in 2020 in Washington DC, Seattle, Boston, Minneapolis, Orlando, or San Francisco, and don’t miss this chance to save big!

Happy, happy holidays from our team to yours… we look forward to seeing you in 2020.

Articles, Links, and Tools From An Event Apart Denver 2019

Articles, Links, and Tools From An Event Apart Denver 2019

Jeffrey Zeldman, “Slow Design for an Anxious World”

Learn how to create designs that deliberately slow your visitors down, helping them understand more and make better decisions.

Jason Pamental, “Dynamic Typographic Systems and Variable Fonts: Scalable, Fast, and Fabulous”

Using variable fonts in layouts that work across screen dimensions, accessibility needs, design requirements, and even network speeds.

  • Web Typography News — A weekly newsletter I publish with tips and resources about web typography.
  • Using variable fonts right: the latest word on the code — The most up-to-date techniques, specs, and support for implementing variable fonts.
  • Faux Foundery — Fascinating variable font solution to missing greek glyphs in web fonts.
  • Recursive variable font — No, a font called Recursive. And it’s variable. By Stephen Nixon for Google Fonts. It’s lovely, and you should try it.
  • Intro to the Google Fonts APIv2 (beta) — I wrote a bit about the new API and provide a bunch of sample bits. Very early, very beta, very awesome: serve variable fonts from Google.
  • Resources for learning typography — I get asked a bit about where to go to start learning about typography, so I put together a collection of good books and resources to get you started.
  • Light mode and user preferences in the browser — This was inspired by a discussion with Marcy Sutton, Val Head, and others about how to design for light modes, while still allowing the user to express a preference which can then override the general OS preference. I think it’s a useful pattern for other kinds of user preferences like ‘prefers reduced motion’ as well.
  • Ad Hoc Blog — This is the first part of a redesign that I’ve been working on with Ad Hoc. Featuring two beautiful variable fonts and an entirely new design system that incorporates virtually all of the dynamic typographic techniques shown in this presentation.
  • Digging in to Dynamic Typography — I wrote about these techniques in detail in my newsletter a little while back. Lots of details and links to more demo code.
  • Mandy Michael’s fluid font weight demo — Mandy created a really great JS method for using JS with a CSS custom property to scale font weight based on viewport size. Will definitely be looking at adding this to future projects!
  • Google’s ‘Progressive Font Enrichment’ proof-of-concept demo — This is the first exploration of what we’re working on in the W3C Web Fonts Working Group—which will lead to some truly revolutionary changes in how we serve fonts on the web.
  • IBM Plex Sans Variable — Brand new! IBM has just released a 2-axis (width and weight) variable version of Plex Sans.
  • Remix of Jeffrey Zeldman’s Poynter Institute demo news typography — This is my remix of Jeffrey Zeldman’s news typography demo that he created for the Poynter Institute, adding in a whole bunch of responsive typography and variable fonts.
  • Typetura.js — Scott Kellum and Sal Hernandez’ fluid typesetting tool. Really interesting, and able to scale more than just type. Well worth a look!
  • Textblock.io from Glyphic — Another Javascript tool for typesetting blocks of text from Theo Rosendorf and Glyphic.
  • Dark Mode in CSS — Great run-down on different techniques for dealing with day/night modes on the web.
  • MDN Variable Fonts Guide — I guide I wrote on the MDN site covering the basics of implementing variable fonts.
  • Variable Font Demos on CodePen — A collection of demos I’ve created on CodePen for you to play with!
  • Variable Font resources on my site — Lots of links, articles, books, talks and whatnot
  • Essay explaining variable fonts as a concept — Good for less techy and more designy/brandy folks as well.
  • Firefox (font tools!!!) — Explore the new fonts tab in the Firefox Dev Tools that will show you everything available in a given font (normal or variable, but let’s all agree that the variable ones are way cooler)
  • Avenir Next — It’s an earlier beta, but still an interesting experiment. Hoping a fuller release will be out by the end of the year.
  • Wentin’s Font Playground — Wentin is a designer/developer at Adobe, and she has pioneered some truly unique and compelling UI ideas for working with variable fonts. Really amazing stuff.
  • Cera Pro by Typemates — (Variable font is a beta, but you should ask them about it and tell ’em I sent ya)
  • Wakamai Fondue (What Can My Font Do… get it?) — Simple drag-and-drop web interface to discover all the features available in a given font file.
  • Axis Praxis — The original variable fonts playground.
  • V-Fonts.com — Nick Sherman’s variable fonts catalog site
  • Roslindale by DJR — David Jonathan Ross’ design is what forms the primary typography for the talk and for my own site.
  • FF Meta from Monotype — This is a fantastic typeface, and it was a real treat to design the demo page for it’s introduction.
  • Amstelvar by Type Network — One of the first variable fonts, and still one of the most compelling ones to showcase the breadth of possibilities.
  • W3C Github CSS Fonts Level 4 (variable fonts and other bits) — Read up on the features and issues, provide feedback, and help shape the direction of the web
  • State of Georgia Board of Workers Compensation — One of the first two sites launched with a typographic system like I’m showing here, using Source Serif Variable (where supported) and static web fonts where they aren’t. Fantastic dev implementation done by Lullabot.
  • State of Georgia ADA Coordinator’s Office — One of the first two sites launched with a typographic system like I’m showing here, using Source Serif Variable (where supported) and static web fonts where they aren’t. Fantastic dev implementation done by Lullabot.

Trent Walton, “Third-Party Software and the Fate of the Web”

What can we do as web builders to help create a more sustainable and balanced web? How can we effectively contribute to a cross-discipline discussion about third-parties?

Eric Meyer, “Generation Style”

A spotlight on generated content that shows how it can be a generator of creativity as well as a powerful, practical tool for everyday use.

Rachel Andrew, “Making Things Better: Redefining the Technical Possibilities of CSS”

By understanding the new medium of web design we can start to imagine the future, and even help to shape it. The code examples can be found in this CodePen Collection.

Flexbox

Sizing

Logical Properties and Values

Scroll Snap

Subgrid (Grid Level 2)

Paged Media

Multicol

Fragmentation

Regions

Exclusions

Jen Simmons, “Designing Intrinsic Layouts”

Jen walks you through the thinking process of creating accessible & reusable page and component layouts.

Josh Clark, “The New Design Material”

Refit familiar design and UX process to work with the grain of the algorithm, to help the machines solve real problems without creating new ones.

More on this topic from Josh

Context

Example applications

Robot designers: AI for design and code

Machine learning APIs and data sets

Mental models and opaque logic

Data gathering anti-patterns

Designing to counter misinformation, error and bias

Beth Dean, “Unsolved Problems”

What do plane crashes, nuclear meltdowns, prisons, urban planning, healthcare, and architecture have in common? They can all teach us how to prevent unintended consequences, and design thoughtfully for people and society.

Architecture

How design has influenced modern healthcare, and how buildings can play an active role in healing.

Designing for time as well as space.

Urban Planning

Inclusive design creates healthy, equitable, and safe communities.

Urban design improving quality of life.

The ripple effects of measuring the wrong things.

Industrial Design

Before there was Mike Monteiro, there was Victor.

Social Systems

What if the prison industrial complex were designed to put itself out of business?

Accessibility

Accidents

Anyone working on safety or security should read all of these books. To understand how designers make mistakes now, we have to look at all the ways we’ve made mistakes in the past.

How We Work

Most aviation accidents used to be caused by human error. Crew Resource Management was developed as a process for identifying and mitigating risk, and empowering flight crews to question authority.

Why do we pursue goals (that might kill us!) when we should change course?

What it sounds like to rationalize technology that kills.

Naive optimism continued.

Farai Madzima, “Working Together in Diverse Teams”

Underlying principles, practical recommendations, and ready-to-use tactics you can use to become more effective working in diverse teams.

Use

Read

Play

Listen

Luke Wroblewski, “Mobile Planet”

Through a data-informed, big-picture walk-through of our mobile planet, Luke will dig into how people use computing devices today and how the design of our products needs to adapt to this reality.

Device Numbers

Device Usage

Performance

App Data

Churn/Retention

Push Notifications

Onboarding

Digital Transitions

<!–

Mina Markham, “Full-Featured Art Direction for the Web”

Dan Mall, “Putting the ‘Design’ in Design Systems”

Kate O’Neill, “The Design of Meaning for the Future of Humanity”

–>

Sarah Drasner, “Animation on the Bleeding Edge”

As a community, we talk about how to animate on the web in terms of what’s possible—but where is animation heading?

Val Head, “Making Motion Inclusive”

How to apply web accessibility guidelines to modern web animation, when and how to implement reduced motion, and approaches to building up animated interactions for a solid standards base.

Gerry McGovern, “The Customer-Obsessed Professional”

Become more agile by increasing the amount of customer feedback you receive, and developing faster methods to make changes to your code, content, or design.

“Digital Marketing Strategies for the Busy ‘Web Master’” by Sarah Parmenter—An Event Apart video

“Digital Marketing Strategies for the Busy ‘Web Master’” by Sarah Parmenter—An Event Apart video

Nowadays, the job of the multi-faceted web designer is to not only know the latest techniques for building in Grid, but also know how to get that work seen amongst the saturated world of digital marketing. In this hour-long talk from An Event Apart Orlando 2018, Sarah Parmenter discusses the idea of quarterly website design reviews with a “design once use everywhere” mantra, and digs into the ever changing world of Instagram algorithms, Facebook marketing, and topical social media takeaways for immediate implementation.

Sarah Parmenter owns You Know Who, a small British design studio now in its second decade. She specializes in iOS User Interface design; regularly contributes to various online and printed media; and speaks at related conferences all over the world. Sarah’s straight-talking nature and no-fuss approach to projects have landed her many great contracts over the years, with various well known brands in the UK and abroad.

Enjoy all the videos in An Event Apart’s library! There are over 60 hours of them—all absolutely free! For more insightful presentations by the industry’s best and brightest, come to An Event Apart—three days of design, code, and content for web, UX, and interaction designers. And for free regular updates on all things web, design, and developer-y, subscribe to our mailing list.

“The New Design Material” by Josh Clark—An Event Apart video

“The New Design Material” by Josh Clark—An Event Apart video

Just as mobile defined the last decade of digital products, machine learning is set to define the next. Learn to use machine-generated content, insight, and interaction as design material in your everyday work. Refit familiar design and UX process to work with the grain of the algorithm, to help the machines solve real problems without creating new ones. In this lively hour-long talk from An Event Apart 2018, Josh Clark explores the technologies and practical techniques that you can use today—like right now—not only to make existing products better but to imagine surprising new services. The challenges and opportunities of machine learning are plenty; learn to handle this powerful new design material with care and respect.

Josh Clark is an interaction designer specializing in connected devices, mobile experiences, and responsive design. He is founder of Big Medium, a design agency whose clients include TechCrunch, Time Inc, eBay, O’Reilly Media, and many others. Josh wrote Tapworthy: Designing Great iPhone Apps (O’Reilly, 2010) and Designing for Touch (A Book Apart, 2015). He speaks around the world about what’s next for digital interfaces.

Enjoy all the videos in An Event Apart’s library! There are over 60 hours of them—all absolutely free! For more insightful presentations by the industry’s best and brightest, come to An Event Apart—three days of design, code, and content for web, UX, and interaction designers. And for free regular updates on all things web, design, and developer-y, subscribe to our mailing list.

“Leveling Up Your Design Communication” by Aarron Walter—An Event Apart video

“Leveling Up Your Design Communication” by Aarron Walter—An Event Apart video

Within design teams, we do our best work when we create a culture of feedback shaped by our creative space and our design review process. Beyond the design tribe, our work thrives when it’s communicated in language that aligns to the goals of the business and invites participation early and often. In this hour-long talk from An Event Apart 2018, Aarron Walter shares the experiences of real design teams at Apple, Spotify, and other organizations to show how to improve the communication of design both inside your team and with key outside stakeholders. You’ll see how to run effective design reviews and retrospectives which will help you create a culture of feedback that produces better work, helps designers sharpen their skills, and communicates the value of design by making it more transparent and inviting.

Aarron Walter is Vice President of Design Education at InVision, where he draws upon 15 years of experience running product teams and teaching design to help companies enact design best practices. Aarron founded the UX practice at MailChimp and helped grow the product from a few thousand users to more than 10 million. His design guidance has helped the White House, the US Department of State, and dozens of major corporations, startups, and venture capitalist firms. He is also the author of the best selling book Designing for Emotion from A Book Apart.

Enjoy all the videos in An Event Apart’s library! There are over 60 hours of them—all absolutely free! For more insightful presentations by the industry’s best and brightest, come to An Event Apart—three days of design, code, and content for web, UX, and interaction designers. And for free regular updates on all things web, design, and developer-y, subscribe to our mailing list.

“Inclusive UX: Techniques for Everyone” by Derek Featherstone—An Event Apart video

“Inclusive UX: Techniques for Everyone” by Derek Featherstone—An Event Apart video

Designing and building your apps and sites in an accessible way is just how you work now—you have to try really hard to make things that don’t work with a keyboard. So, what’s next for you? In this hour-long talk from AEA Orlando 2018, Derek Featherstone tackles the tougher problems through design approaches and practical development techniques that you need to create accessible, modern web sites.

Derek Featherstone is Chief Experience Officer at Level Access, focused on ensuring that accessibility and inclusion are an integral part of creating outstanding customer experiences. He teaches teams accessibility concepts and skills, and leads hands-on workshops with teams of all sizes.

Enjoy all the videos in An Event Apart’s library! There are over 60 hours of them—all absolutely free! For more insightful presentations by the industry’s best and brightest, come to An Event Apart—three days of design, code, and content for web, UX, and interaction designers. And for free regular updates on all things web, design, and developer-y, subscribe to our mailing list.

“Name That Script!” by Trent Walton—An Event Apart video

“Name That Script!” by Trent Walton—An Event Apart video

How many scripts are loading on our web pages these days? How can we objectively measure the value of these (advertising, A/B testing, analytics, etc.) scripts—considering their impact on web performance, user experience, and business goals? In this hour-long talk from An Event Apart Orlando 2018, Trent Walton shares recent experiences with, and explores ways to evaluate and discuss the inclusion of, third-party scripts.

Trent Walton is founder and one-third of Paravel, a web design outfit located in Austin, TX, which counts Microsoft, Retail Me Not, Wired, The American Society of Cinematographers, Andreessen Horowitz, and Adobe among its clients. He’s been designing and building for the web since 2002, writing and speaking about what he learns along the way.

Enjoy all the videos in An Event Apart’s library! There are over 60 hours of them—all absolutely free! For more insightful presentations by the industry’s best and brightest, come to An Event Apart—three days of design, code, and content for web, UX, and interaction designers. And for free regular updates on all things web, design, and developer-y, subscribe to our mailing list.

Articles, Links, and Tools From An Event Apart Chicago 2019

Articles, Links, and Tools From An Event Apart Chicago 2019

Jeffrey Zeldman, “Slow Design for an Anxious World”

Learn how to create designs that deliberately slow your visitors down, helping them understand more and make better decisions.

Una Kravets, “Extending CSS With SVG and Houdini”

If you’ve ever wanted to customize CSS itself to do something new, you won’t want to miss this talk.

Jason Pamental, “Dynamic Typographic Systems and Variable Fonts: Scalable, Fast, and Fabulous”

Using variable fonts in layouts that work across screen dimensions, accessibility needs, design requirements, and even network speeds.

Eric Meyer, “Generation Style”

A spotlight on generated content that shows how it can be a generator of creativity as well as a powerful, practical tool for everyday use.

Rachel Andrew, “Making Things Better: Redefining the Technical Possibilities of CSS”

By understanding the new medium of web design we can start to imagine the future, and even help to shape it.

The code examples can be found in this CodePen Collection.

Flexbox

Sizing

Logical Properties and Values

Scroll Snap

Subgrid (Grid Level 2)

Paged Media

Multicol

Fragmentation

Regions

Exclusions

Jen Simmons, “Designing Intrinsic Layouts”

Jen walks you through the thinking process of creating accessible & reusable page and component layouts.

Cyd Harrell, “Making Research Count”

How to build a valuable research practice in any company by doing strong small research projects and involving the broader team.

Cheryl Platz, “New Solutions to Old Problems: Voice User Interface Design”

Gain a better understanding of when voice is an appropriate tool, and how to start adapting your design process for these new solutions.

Voice UI fundamentals (Cheryl Platz on Medium):

Guidelines

Advanced VUI topics (Cheryl Platz on Medium):

Books

Multimedia on advanced topics

Further food for thought

Scott Jehl, “Move Fast and Don’t Break Things”

As a site’s features and design evolves, its performance is often threatened for a number of reasons, making it hard to ensure fast, resilient access to services.

Jason Grigsby, “Web Forms: Now You See Them, Now You Don’t!”

See how to amaze and delight your users using new APIs and inputs to make your forms magical.

Web form best practices

Sign-up and login

Checkout and payment

Autofill

Patty Toland, “The Weight of the WWWorld is Up to Us”

How performance-related decisions (intentional or not) affect our users, tools to measure and assess the impacts of our choices, and techniques to improve web performance and accessibility for all.

Brad Frost, “The Technical Side of Design Systems”

At the heart of a successful design system is a collection of sturdy, robust front-end components that powers other applications’ user interfaces.

Jeremy Keith, “Going Offline”

All the knowledge and code you’ll need to free your website from the tyranny of the network connection.

Books

Sites

Progressive Web Apps

Marcy Sutton, “Emerging CSS Techniques and What They Mean for Accessibility”

A look at some of the newest and shiniest CSS techniques, weighing them against accessibility support and browser compatibility.

Val Head, “Making Motion Inclusive”

How to apply web accessibility guidelines to modern web animation, when and how to implement reduced motion, and approaches to building up animated interactions for a solid standards base.

Gerry McGovern, “The Customer-Obsessed Professional”

Become more agile by increasing the amount of customer feedback you receive, and developing faster methods to make changes to your code, content, or design.