Tag: Meet

inclusive-components-product-image-landscapea
03 Dec

Meet “Inclusive Components”: Accessible, Bulletproof Front-End Patterns

by TBSCategories: News

Meet “Inclusive Components”: Accessible, Bulletproof Front-End Patterns

Meet “Inclusive Components”: Accessible, Bulletproof Front-End Patterns

Vitaly Friedman

Front-end accessibility is still somewhat mysterious these days. How do we build accessible buttons and dropdowns? What about keyboard-friendly tooltips, tabs and notifications? Or inclusive accordions, sliders, data tables and modals? Let’s figure it out together. Meet Inclusive Components, our new handbook for building fully accessible digital products. Download a free sample PDF (1.1 MB).

Meet Inclusive Components, our new book for building accessible, inclusive interfaces. Written by one-and-only <a href='http://www.heydonworks.com/'>Heydon Pickering</a>.”> </a> </figure> <div class=

Print + eBook

$ 39.00

Quality hardcover. Free worldwide shipping. 100 days money-back-guarantee.

eBook

$ 18.00

DRM-free, of course. ePUB, Kindle, PDF.
Included with Smashing Membership.

About The Book

At its heart, Inclusive Components is a detailed, practical handbook for building fully accessible interfaces. The book examines 12 common interface patterns — accordions, tables, modals, notifications, tabs, toggles, and everything in-between — through the lens of inclusion. The result is accessible and robust components we author, plug in, and use daily.

For years, Heydon Pickering, a seasoned front-end developer with a focus on accessibility, has been writing about accessible solutions. We’ve teamed up with Heydon to produce a book with common challenges and solutions that he’s been refining over all these years.

For each component, the in-depth explorations are meticulously illustrated and all solutions are available as bulletproof code snippets, applicable to your work right away. Bonus: you’ll learn how to build your own accessible components with inclusive design in mind — all in a single book. Jump to table of contents ↓

332 pages. Quality hardcover with a stitched binding and ribbon page marker. The eBook is available as PDF, ePUB, Amazon Kindle. Written and designed by Heydon. Download a sample PDF (1.1 MB).

The cover of Inclusive Components, a new book by Heydon Pickering.
The inner spreads of Inclusive Components.

Print + eBook

$ 39.00

Quality hardcover. Free worldwide shipping. 100 days money-back-guarantee.

eBook

$ 18.00

DRM-free, of course. ePUB, Kindle, PDF.
Included with Smashing Membership.

Table Of Contents

Each chapter tackles a single component, addressing how different and vulnerable people might read and interact with it, and how they can be better accommodated. Download a sample PDF (1.1 MB).

Inclusive Components, a peek inside.
A peek inside of Inclusive Components. A photo by Drew McMellan. See more photos. (Large preview)

About The Author

Heydon Pickering

Heydon Pickering (@heydonworks) has worked with The Paciello Group, The BBC, Smashing Magazine, and Bulb Energy as a designer, engineer, writer, editor, and illustrator. He was shortlisted for Designer Of The Year in The Net Awards.

Heydon previously wrote Inclusive Design Patterns which sold over 10,000 copies. Proceeds from this title were donated to the ACLU and The Democratic Socialists Of America, to help these organizations fight fascism and create a more inclusive society.

Here’s what Heydon shared when asked why he decided to write this book:

“A few years back, I was getting bored with web design. Then responsive design came along, presenting me with fresh challenges. It made my life and my job interesting again. Then I discovered the world of web accessibility, and my enthusiasm was once again renewed. Some people seem to think I do web accessibility because I feel morally obliged, or that I would feel guilty if I didn’t.

While I believe strongly that all sorts of people should be able to access the web, I’m also grateful for the web accessibility challenges I’ve encountered, and covered in this book, for stimulating me, and giving my work new depth.

I have written this book because I want you to know how fun it can be to make your interfaces more accessible, as well as how accomplished you can feel for having done so. Thank you for reading this, and hopefully the book as well.”

Testimonials

Artem Sapegin“Inclusive Components is a very deep and thorough explanation of development of accessible components with real world examples. Heydon Pickering shows several alternative approaches and explains pros and cons of each. It’s also a pleasure to read!”

— Artem Sapegin, front-end developer, Wayfair

Sarah Federman“Inclusive Components is chock-full of practical and comprehensive advice on building accessible UI. It’s my go-to resource after the official WCAG and ARIA documentation. I’ve found it extremely helpful when building our design system!”

— Sarah Federman, senior front-end developer

Andy Bell“What Heydon achieves with his work on Inclusive Components is a pragmatic, friendly and approachable set of guides that help you to generate not just accessible components, but also resilient and progressive starting-points that will help you to build better websites and web apps in general. I often describe this work as crucial learning material for this exact reason.”

— Andy Bell, independent designer & developer

A preview of the book, with examples ranging from accordions to toggles, tables, notifications, dialogs etc. Download a sample PDF (1.1 MB). Large preview.

Why This Book Might Be For You

The devil is in the detail and often the things you do with good intentions can impose accessibility barriers unknowingly. Inclusive Components is for every front-end developer who wants to learn how to detect and address potential accessibility issues in their work. The book will teach you:

  1. How to use <button> elements, how to apply styles to your toggle buttons, and how to label them.
  2. How to create managed lists that allow users to create and delete content — in an inclusive way.
  3. How to address and resolve accessibility issues with navigation menus and submenus (aka “dropdowns”).
  4. How to create accessible and keyboard-friendly tooltips and toggletips.
  5. How to create a “dark mode” theme that’s both accessible and maintainable long-term.
  6. How to build an accessible content slider to prevent harm for motion-sensitive people.
  7. How to create inclusive notifications with live regions to communicate with your users through visual and aural channels simultaneously.
  8. How to create data tables that are semantically correct, responsive, and sortable.
  9. How to build accessible dialogs and modal dialogs with performance and inclusive design in mind.
  10. How to create and group inclusive cards (e.g. for teasers).

Technical Details

Community Matters ❤️

With Inclusive Components, we’ve tried to create a very focused handbook with applicable, long-living solutions and strategies to create accessible and inclusive interfaces.

Our hope is that with Heydon’s book, you will be able to make better design and coding decisions as you build your interfaces. Perhaps it will even become one of those reference books you’ll reach to every time you need to build one of those common UI components.

Producing a book takes quite a bit of time, and we couldn’t pull it off without the support of our wonderful community. A huge shout-out to Smashing Members for their ongoing support in our adventures. As a result, the eBook is and always will be free for Smashing Members. Plus, Members get a friendly discount when purchasing their printed copy.

Stay smashing, and thank you for your ongoing support, everyone!

The cover of Inclusive Components, a new book by Heydon Pickering.

Print + eBook

$ 39.00

Quality hardcover. Free worldwide shipping. 100 days money-back-guarantee.

eBook

$ 18.00

DRM-free, of course. ePUB, Kindle, PDF.
Included with Smashing Membership.

More Smashing Books

Promoting best practices and providing you with practical tips to master your daily coding and design challenges has always been (and will be) at the core of everything we do at Smashing. In the past few years, we were very lucky to have worked together with some talented, caring people from the web community to publish their wealth of experience as books that stand the test of time. Alla, Adam and Andy are some of these people. Have you checked out their books already?

Design Systems

Design Systems

A practical guide to creating design languages for digital products.

Add to cart $ 39

Form Design Patterns

Form Design Patterns

A practical guide to designing and coding simple and inclusive forms.

Add to cart $ 39

Art Direction for the Web

Art Direction for the Web

A guide for breaking out of generic web experiences prevailing today.

Add to cart $ 39

Smashing Editorial (il, cm)


Articles on Smashing Magazine — For Web Designers And Developers

inclusive-components-product-image-landscapea
07 Nov

Meet “Inclusive Components”, A New Printed Book By Heydon Pickering

by TBSCategories: News

Meet “Inclusive Components”, A New Printed Book By Heydon Pickering

Meet “Inclusive Components”, A New Printed Book By Heydon Pickering

Vitaly Friedman

The web is full of interfaces that leave people out. Of course, it’s not designers’ malicious intent or developers’ lack of empathy that bring us there. It’s just really difficult to foresee a wide range of situations in which our users might find themselves in. We need to build robust and reliable solutions in a world that’s inherently chaotic and unpredictable. Where do we even start?

Because we often build and deploy under tough deadlines, we tend to break accessibility without even noticing it. Our products become slower, clunkier and more painful to use — often simply unbearable for keyboard- and screen reader users, and as such fragile and vulnerable for legal disputes. Let’s fix it.

Meet Inclusive Components, our new handbook for building fully accessible websites and apps.

Meet Inclusive Components, our new book for building accessible, inclusive interfaces. Written by one-and-only <a href='http://www.heydonworks.com/'>Heydon Pickering</a>.”> </a><figcaption>Because accessibility matters. We’ve teamed up with one-and-only <a href=Heydon Pickering to create a handbook for building accessible, inclusive interfaces. The eBook is finished, and it’s being printed this very moment.

About The Book

At its heart, Inclusive Components is a detailed, practical handbook for building fully accessible interfaces. The book examines 12 common interface patterns — accordions, tables, modals, notifications, tabs, toggles, and everything in-between — through the lens of inclusion. The result is accessible and robust components we author, plug in, and use daily.

For years, Heydon Pickering, a seasoned front-end developer with a focus on accessibility, has been writing about accessible solutions. We’ve teamed up with Heydon to produce a book with common challenges and solutions that he’s been refining over all these years.

For each component, the in-depth explorations are meticulously illustrated and all solutions are available as bulletproof code snippets, applicable to your work right away. Bonus: you’ll learn how to build your own accessible components with inclusive design in mind — all in a single book. Jump to table of contents.

332 pages. eBook already available as PDF, ePUB, Amazon Kindle. Printed book will be shipped early December. Written and designed by Heydon. Download a sample PDF (1.1 MB).

The cover of Inclusive Components, a new book by Heydon Pickering.
The inner spreads of Inclusive Components.

Print + eBook

$ 29.00 $ 39.00

Quality hardcover. Free shipping worldwide, starting from early December.

eBook

$ 15.00 $ 18.00

DRM-free, of course. ePUB, Kindle, PDF.
Included with Smashing Membership.

Table Of Contents

Each chapter tackles a single component, addressing how different and vulnerable people might read and interact with it, and how they can be better accommodated. Download a sample PDF (1.1 MB).

A preview of the book, with examples ranging from accordions to toggles, tables, notifications, dialogs etc. Download a sample PDF (1.1 MB). Large preview.

About The Author

Heydon Pickering

Heydon Pickering (@heydonworks) has worked with The Paciello Group, The BBC, Smashing Magazine, and Bulb Energy as a designer, engineer, writer, editor, and illustrator. He was shortlisted for Designer Of The Year in The Net Awards.

Heydon previously wrote Inclusive Design Patterns which sold over 10,000 copies. Proceeds from this title were donated to the ACLU and The Democratic Socialists Of America, to help these organizations fight fascism and create a more inclusive society.

Testimonials

Artem Sapegin“Inclusive Components is a very deep and thorough explanation of development of accessible components with real world examples. Heydon Pickering shows several alternative approaches and explains pros and cons of each. It’s also a pleasure to read!”

— Artem Sapegin, front-end developer, Wayfair

Sarah Federman“Inclusive Components is chock-full of practical and comprehensive advice on building accessible UI. It’s my go-to resource after the official WCAG and ARIA documentation. I’ve found it extremely helpful when building our design system!”

— Sarah Federman, senior front-end developer, Adobe

Andy Bell“What Heydon achieves with his work on Inclusive Components is a pragmatic, friendly and approachable set of guides that help you to generate not just accessible components, but also resilient and progressive starting-points that will help you to build better websites and web apps in general. I often describe this work as crucial learning material for this exact reason.”

— Andy Bell, independent designer & developer

Why This Book Might Be For You

The devil is in the detail and often the things you do with good intentions can impose accessibility barriers unknowingly. Inclusive Components is for every front-end developer who wants to learn how to detect and address potential accessibility issues in their work. The book will teach you:

  1. How to use <button> elements, how to apply styles to your toggle buttons, and how to label them.
  2. How to create managed lists that allow users to create and delete content — in an inclusive way.
  3. How to address and resolve accessibility issues with navigation menus and submenus (aka “dropdowns”).
  4. How to create accessible and keyboard-friendly tooltips and toggletips.
  5. How to create a “dark mode” theme that’s both accessible and maintainable long-term.
  6. How to build an accessible content slider to prevent harm for motion-sensitive people.
  7. How to create inclusive notifications with live regions to communicate with your users through visual and aural channels simultaneously.
  8. How to create data tables that are semantically correct, responsive, and sortable.
  9. How to build accessible dialogs and modal dialogs with performance and inclusive design in mind.
  10. How to create and group inclusive cards (e.g. for teasers).

Technical Details

Community Matters ❤️

With Inclusive Components, we’ve tried to create a very focused handbook with applicable, long-living solutions and strategies to create accessible and inclusive interfaces.

Our hope is that with Heydon’s book, you will be able to make better design and coding decisions as you build your interfaces. Perhaps it will even become one of those reference books you’ll reach to every time you need to build one of those common UI components.

Producing a book takes quite a bit of time, and we couldn’t pull it off without the support of our wonderful community. A huge shout-out to Smashing Members for their ongoing support in our adventures. As a result, the eBook is and always will be free for Smashing Members. Plus, Members get a friendly discount when purchasing their printed copy.

Stay smashing, and thank you for your ongoing support, everyone!

The cover of Inclusive Components, a new book by Heydon Pickering.

Print + eBook

$ 29.00 $ 39.00

Quality hardcover. Free shipping worldwide, starting from early December.

eBook

$ 15.00 $ 18.00

DRM-free, of course. ePUB, Kindle, PDF.
Included with Smashing Membership.


Articles on Smashing Magazine — For Web Designers And Developers

smashingmag-print-preview-chapter
24 Jul

Created To Make You Think: Meet Our New Printed Magazine

by TBSCategories: News

Created To Make You Think: Meet Our New Printed Magazine

Created To Make You Think: Meet Our New Printed Magazine

Vitaly Friedman

For a long time, we wanted to create a printed magazine that hasn’t existed before. Not a magazine about fleeting design trends or ever-changing frameworks, but topics that would make us all think, and that would remain useful as time passes. A printed magazine exploring topics that often get lost in the myriad of blog posts out there.

About the Magazine

With Smashing Magazine Print, we want to provide a space for topics that perhaps have more longevity than what we usually cover online — without running short on practical and actionable insights, of course. One theme per issue, with handy, digestible 60–80 pages of high-quality print, containing a handful of curated and unpublished articles.

Approachable, friendly and inclusive. Written by and for the community, with a focus on real-world insights and the challenges that we all have to tackle together — for people just like you, who design and build the web. It took us more time than expected, but we are done now, and shipping worldwide. Download a free PDF preview (3 MB) and get your copy now.

The cover of Smashing Magazine Print.
The cover of Smashing Magazine Print.

Print

$  17.50 $  24.95Get Smashing Print

Printed magazine + PDF, ePUB, Kindle.
Free airmail shipping worldwide.

Print + Membership

$  9 / mo.Become a Smasher

Printed magazine for free + DRM-free eBooks, webinars and other fancy things.

All Smashing Members ($ 5 per month) get the eBook for free, and Smashers ($ 9 plan) also get a free printed copy shipped to the doorsteps. For additional copies, a discount of $ 10 applies.

About the Issue

We kick off with an issue exploring topics very close to our hearts — ethics, privacy and security, because these issues reach into all our lives, from our personal use of the web through to the advanced applications we develop. We take a closer look at the current state of tracking, advertising, GDPR and privacy law, data protection and addictive interfaces. We explore how we all can integrate privacy-driven decisions into our workflows by default, abandoning dark patterns for good along the way.

Connecting the dots, an illustration for the table of contents of the Smashing Magazine Print, with chapters connected with dots.
The table of contents of the shiny new printed magazine. Peek inside! (PDF).

The web is wonderfully diverse and unpredictable because of the wonderfully diverse people who shape it. While we often see people as lifeless dots in our analytics stats, every single dot is an actual person, and so every single dot matters. We deserve to be respected and valued, and that holds true for how companies treat our data and privacy, too. In times when humility and kindness have become rarities, we need to find a way to make the web a calmer, more respectful place that treats data and privacy seriously?

That’s what we wanted to explore. So, we got to work. We’ve teamed up with Veerle Pieters for the design and illustrations, and Rachel has been working with the authors to bring valuable insights to the magazine. Rather than asking the authors to write on very specific topics, Rachel asked them to contribute to a collection of thinking on the subjects of ethics, privacy and security.

Table of Contents

What follows is a collection of articles that sit very well together, yet tackle different aspects of the issues at hand. You might not agree with all of them, but we hope they will make you think.

  1. Editor’s Note
    by Rachel Andrew
  2. Towards Ethics By Default, One Step at a Time
    by Vitaly Friedman
  3. Designing For Addiction
    by Trine Falbe
  4. It’s Not About You
    by Heather Burns and Morten Rand-Hendriksen
  5. This One Weird Trick Tells Us Everything About You
    by Laura Kalbag
  6. Quieting Disquiet
    by Stuart Langridge
  7. Advertising Is Not The Problem
    by Cennydd Bowles

Along with the themed articles, we have included some little insights into our Smashing Family, pieces about our books, conferences and membership. You might not know it, but Smashing Magazine is brought to you by a tiny team of people who care. We care about the values we stand behind, and about the people who read the magazine, who join as members, and who come to conferences. We care a lot about the web. We hope that shines through in everything we do.

60 pages. High-quality print. Free worldwide airmail shipping from Germany, late July. Written by and for the community. Download a free PDF preview (3 MB).

The cover of Smashing Magazine Print

Print

$  17.50 $  24.95Get Smashing Print

Printed magazine + PDF, ePUB, Kindle.
Free airmail shipping worldwide.

Print + Membership

$  9 / mo.Become a Smasher

Printed magazine for free + DRM-free eBooks, webinars and other fancy things.

Community Matters ❤️

The printed magazine wouldn’t exist without our dear Smashing community, and that’s why it is and always will be free to Smashing Members.

  • If you haven’t heard of the Membership yet, no worries: you are awesome just the way you are, and you can join our wonderful community any time. We can’t wait to see you!
  • If you are a Supporter ($ 3 plan), please don’t forget to sign in for your discount to be applied automatically.
  • If you are a Member ($ 5 plan), please sign in and download the digital version on the product page. Obviously, you also get a discount on the printed copy.
  • If you’re a Smasher ($ 9 plan), please sign in and save your shipping address, and we’ll ship the book to your doorsteps right away. Also, feel free to download the digital version on the product page.
The cover of Smashing Magazine Print
Our brand-new printed magazine is free for Smashing Members (eBook with the $ 5 plan, Print + eBook with $ 9 plan). You can cancel any time, you know.

Admittedly, publishing a printed magazine in a time when everything has gone digital is quite a gamble for us. But you never know for sure until you try — and fail or succeed.

We don’t know how the magazine will take shape in the future, but we already can’t wait to hear your feedback. We’re very excited, and we hope you’ll be, too —at least when you hold the very first issue of the printed magazine in your hands.

Stay smashing, and thank you for your ongoing support, everyone!

Smashing Editorial (vf, al, il)


Articles on Smashing Magazine — For Web Designers And Developers

02-art-direction-for-the-web
25 Apr

It’s Here! Meet “Art Direction For The Web,” A New Smashing Book

by TBSCategories: News

It’s Here! Meet “Art Direction For The Web,” A New Smashing Book

It’s Here! Meet “Art Direction For The Web,” A New Smashing Book

Vitaly Friedman

In contrast to the world of print design, our creative process has often been constrained by what is possible with our limited tools. It also has been made more difficult by the unique challenges of designing for the web, such as ensuring that our sites cater well to a diverse range of devices and browsers.

Now, the web isn’t print of course, and we can’t take concepts from sturdy print and apply them blindly to the fluid web. However, we can study the once uncharted territory of layout, type treatment and composition that print designers have skillfully and meticulously conquered, and explore which lessons from print we could bring to our web experiences today.

We can do that by looking at our work through the lens of art direction, a strategy for achieving more compelling, enchanting and engaging experiences. With the advent of front-end technologies such as Flexbox, CSS Grid and Shapes, our creative shackles can come off. It’s time to explore what it actually means.

Download a sample: PDF, ePUB, Amazon Kindle.

The new Smashing book, ‘Art Direction for the Web’ written by Andy Clarke

eBook

$ 19Get the eBook

PDF, ePUB, Kindle.
Free for Smashing Members.

Hardcover

$ 39Get Print + eBook

Printed, quality hardcover.
Free airmail worldwide shipping.

About The Book

Art Direction For The Web exists because we wanted to explore how we could break out of soulless, generic experiences on the web. It isn’t a book about trends, nor is it a book about design patterns or “ready-to-use”-solutions for your work. No, it’s about original compositions, unexpected layouts and critical design thinking. It’s about how to use technical possibilities we have today to their fullest extent to create something that stands out.

Our new book explores how we can apply lessons learned from print design to the fluid and unpredictable web. That's a book that will make you think, explore and bypass boundaries and conventions.
Our new book explores how we can apply lessons learned from print design to the fluid and unpredictable web. That’s a book that will make you think, explore and bypass boundaries and conventions. (Image credit: Marc Thiele) (Large preview)

It’s a book for designers and front-end developers; a book that’s supposed to make you think, explore and bypass boundaries and conventions, to try out something new — while keeping accessibility and usability a priority.

To achieve this, the book applies the concept of art direction — a staple of print design for over a hundred years — to examine a new approach to designing for the web starting from the story you want to tell with your design and building to a finished product that perfectly suits your brand.

Of course, the eBook is free of charge for Smashing Members, and Members save off the regular price, too.

Written by Andy Clarke. Reviewed by Rachel Andrew. Foreword by Trent Walton. Published in April 2019.

Download a sample: PDF, ePUB, Amazon Kindle.

Technical Details

  • 344 pages, 14 × 21 cm (5.5 × 8.25 inches)
    ISBN: 978-3-945749-76-0 (print)
  • Quality print hardcover with stitched binding and a ribbon page marker.
  • Free worldwide airmail shipping from Germany.
  • You can check your book delivery times.
  • The eBook is available in PDF, ePUB, Amazon Kindle.
  • Shipping now as printed, quality hardcover and eBook.

Table Of Contents

The possibilities of art direction on the web go far beyond responsive images. The book explores how to create art-directed experiences with modern front-end techniques.

Table of contents showing 12 insightful chapters
The book includes 12 chapters, covering type treatment, composition, layout and grid — and most pages are art directed as well. (Image credit: Marc Thiele) (Large preview)

In his book, Andy shows the importance and effectiveness of designs which reinforce the message of their content, how to use design elements to effectively convey a message and evoke emotion, and how to use the very latest web technologies to make beautifully art directed websites a reality. It goes beyond the theory to teach you techniques which you can use every day and will change the way you approach design for the web.

The book is illustrated with examples of classic art direction from adverts and magazines from innovative art directors like Alexey Brodovitch, Bea Feitler, and Neville Brody. It also features modern examples of art direction on the web from sites like ProPublica, as well as an evocative fictitious brand which demonstrates the principles being taught.

Art Direction for the Web front cover

eBook

$ 19Get the eBook

PDF, ePUB, Kindle.
Free for Smashing Members.

Hardcover

$ 39Get Print + eBook

Printed, quality hardcover.
Free airmail worldwide shipping.

Part 1, “Explaining Art Direction”

Art Direction for the Web begins by introducing the concept of art direction, its history, and how it is as relevant to modern web design as it ever been in other media. In Part 1, “Explaining Art Direction”, Andy shows you how to start thinking about all aspects of your design through the lens of art direction.

You will learn how design can evoke emotion, influence our subconscious perception of what we are reading, and leave a lasting impression on us. You will also learn the history of art direction, beginning with the earliest examples as a central component of magazine design and showing how the core philosophies of art direction persist through an incredible range of visual styles and ensure that the design always feels appropriate to the content.

A sneak peek into Chapter 5 in which Andy Clarke explains angles and diagonals among other principles of design
We can’t control the shape of users’ browsers, but the principles of symmetry and asymmetry are relevant for every screen size. Chapter 5 includes dives deep into principles of great design. (Image credit: Marc Thiele) (Large preview)

As art direction is often about ensuring the visual design fits the narrative of your content, this section will also give you the practical skills to identify the stories behind your projects, even when they appear hard to uncover.

Finally, this part will teach you that art direction is a process that we can all be involved with, no matter our role in our projects. Strong brand values communicated through codified principles ensure that everyone on your team speaks with the same voice to reinforce your brand’s messaging through art direction.

Part 2, “Designing For Art Direction”

In Part 2, “Designing For Art Direction,” covers how to use design elements and layout to achieve visual effects which complement your content. You will learn principles of design such as balance, symmetry, contrast and scale to help you understand the design fundamentals from which art direction is based. You will also learn how to create interesting and unique layouts using advanced grid systems with uneven columns, compound and stacked grids, and modular grids.

A peak of Chapter 7 which goes into detail regarding space and type
It’s important to understand the impact negative space can make. Chapter 7 focusses on white space, typographic scale, and creative uses of type. (Image credit: Marc Thiele) (Large preview)

This book also covers how to use typography creatively to craft the voice with which your brand will speak. In addition to a study on how to create readable and attractive body text, this section also explores how to be truly expressive with type to make beautiful headings, stand-firsts, drop-caps, quotes, and numerals.

You will also learn how to make full of use of images in your designs — even while the dimensions of the page change — to create impactful designs that lead the eye into your content and keep your readers engaged.

Part 3, “Developing For Art Direction”

The final part of Art Direction for the Web, “Developing For Art Direction,” teaches you the latest web design tools to unshackle your creativity and help you start applying what you have learned to your own projects.

You will learn how to use CSS Grid to create interesting responsive layouts and how Flexbox can be used to design elements which wrap, scale and deform to fit their containers.

Images have an enormous impact on how our customers perceive our designs. Chapter 8 covers grids and how you can use them for more than merely aligning content to the edges of columns.
Images have an enormous impact on how our customers perceive our designs. Chapter 8 covers grids and how you can use them for more than merely aligning content to the edges of columns. (Image credit: Marc Thiele) (Large preview)

This third part will also explore how to use CSS columns, transforms, and CSS Grid to create beautiful typography. You will also learn how viewport units, background-size, object-position, and CSS shapes can create engaging images that are tailored for every device or window width.

Throughout the book, Andy has showcased how art direction can be applied to any design project, whether you are designing for a magazine, a store front, or a digital product.

Testimonials

“On the web, art direction has been a dream deferred. “The medium wasn’t meant for that,’ we said. We told ourselves screens and browsers are too unreliable, pages too shape-shifty, production schedules too merciless to let us give our readers and users the kind of thoughtful art directional experiences they crave. But no longer. Andy Clarke’s “Art Direction for the Web” should usher in a new age of creative web design.”

— Jeffrey Zeldman, Creative Director at Automattic

The new Smashing book, ‘Art Direction for the Web’ written by Andy Clarke
(Image credit: Marc Thiele) (Large preview)

“Andy shows how art direction can elevate your website to a new level through a positive experience, and how to execute these design principles and techniques into your designs. This book is filled with tons of well-explained practical examples using the most up-to-date CSS technologies. It’ll spin your brain towards more creative thinking and give your pages a soul.”

— Veerle Pieters, Belgian graphic/web designer

About The Author

Andy Clarke is a well-known designer, design consultant, and mentor. With his wonderful wife, Sue, Andy founded Stuff & Nonsense in 1998. They’ve helped companies around the world to improve their designs by providing consulting and design expertise.

The back cover of the book
Back cover (Image credit: Marc Thiele) (Large preview)

Andy has written several popular books on website design and development, including Hardboiled Web Design: Fifth Anniversary Edition, Hardboiled Web Design, and Transcending CSS: The Fine Art Of Web Design. He’s a popular speaker and gives talks about art direction and design-related topics all over the world.

Why This Book Is For You

The book goes beyond teaching how to use the new technologies on the web. It delves deeply into how the craft of art direction could be applied to every project we work on.

  1. Perfect for designers and front-end developers who want to challenge themselves and break out of the box,
  2. Show how to use art direction for digital products without being slowed down by its intricacies,
  3. Features examples of classic art direction from adverts and magazines from innovative art directors like Alexey Brodovitch, Bea Feitler, and Neville Brody.
  4. Shows how to use type, composition, images and grids to create compelling responsive designs,
  5. Illustrates how to create impact, stand out, be memorable and improve conversions,
  6. Explains how to maintain brand values and design principles by connecting touch points across marketing, product design, and websites.
  7. Packed with practical examples using CSS Grid, CSS Shapes and good ol’ Flexbox,
  8. Explains how to integrate art direction into your workflow without massive cost and time overhead.

Art direction matters to the stories we tell and the products we create, and with Art Direction for the Web, Andy shows that the only remaining limit to our creativity on the web is our own imagination.

Download a sample: PDF, ePUB, Amazon Kindle.

The new Smashing book, ‘Art Direction for the Web’ written by Andy Clarke

eBook

$ 19Get the eBook

PDF, ePUB, Kindle.
Free for Smashing Members.

Hardcover

$ 39Get Print + eBook

Printed, quality hardcover.
Free airmail worldwide shipping.

Happy Reading, Everyone!

We hope you love the book as much as we do. Of course it’s art-directed, and it took us months to arrange the composition for every single page. We kindly thank Natalie Smith for wonderful illustrations, Alex Clarke and Markus Seyfferth for typesetting, Rachel Andrew for technical editing, Andy Clarke for his art direction and patience, and Owen Gregory for impeccable editing.

We can’t wait to hear your stories of how the book will you design experiences that stand out. Even if after reading this book, you’ll create something that will stand the test of a few years, that’s an aim that the book was worth writing for. Happy reading, everyone!

Smashing Editorial (vf, il, ms, cm, ac)


Articles on Smashing Magazine — For Web Designers And Developers

art-direction-for-the-web-table-of-contents-large
26 Mar

Meet “Art Direction For The Web,” A New Smashing Book By Andy Clarke

by TBSCategories: News

Meet “Art Direction For The Web,” A New Smashing Book By Andy Clarke

Meet “Art Direction For The Web,” A New Smashing Book By Andy Clarke

Bruce Lawson

A page on the Web isn’t like a printed page. Many of us learned that the hard way when we abandoned fixed-width layouts and embraced the web’s inherent flexibility and responsiveness. Read the excerpt chapter.

Modern web technologies like CSS Grid, Flexbox and Shapes have made it possible for us to implement print’s often distinctive designs, and the web’s now full of tutorials on how to use them. But the most important question is not “how” we can use art direction techniques to improve our designs for the web, but instead “when” and “why”.

A hardcover book laying on a wooden floor, called “Art Direction for the Web”

eBook

$ 14.90 $ 19Get the eBook

PDF, ePUB, Kindle.
Free for Smashing Members.

Hardcover

$ 29 $ 39Get the Print (incl. eBook)

Printed, quality hardcover.
Shipping starts mid-April.

This is the reason why Andy Clarke wrote his new book Art Direction for the Web. This is a book about why art direction matters and how you can art-direct compelling and effective experiences across devices and platforms.

Andy explores the work of some of the most influential art directors, luminaries like Alexey Brodovitch, Bea Feitler, and Neville Brody. He doesn’t encourage us to merely mimic work from a previous era and medium, but to understand their thinking and learn how to apply that knowledge to art direction for the web.

Andy writes,

“You needn’t have been to art school to learn and apply the principles I teach you. Just like art direction itself, they’re something which everyone — no matter what your background and current area of expertise — can use every day to improve the effectiveness of a product or website’s design.”

Andy’s goal is to teach people about the importance of art direction for the web and explain how art direction can help people tell stories by using design. That way, products and websites will connect with audiences and also manage to keep them engaged. After a thorough investigation of the methodology of art direction, Andy teaches how to accomplish it by embracing the web using modern CSS.

Art Direction for the Web will help you make your sites more effective at communicating, persuading, and selling. If you develop products, this book will make them more compelling and more enjoyable to use. Read the excerpt chapter →

A hardcover book laying open on a light blue background, with two pages open that are showing the table of contents

Table Of Contents

Part 1: Explaining Art Direction

  • What Art Direction Means
    Ask what art direction means to developers, and they might answer: using the <picture> element or sizes attribute in HTML for responsive images; presenting alternative crops, orientations, or sizes at various screen sizes. But there’s more to it.
  • One Hundred Years Of Art Direction
    Bradley, Brodovitch, Brody, and Feitler — together, their names sound like a Mad Men-era advertising agency. In this chapter, we’ll take a look at their iconic works, from the 1930’s to the 1980’s.
  • Art-Directing Experiences
    Whether we write fact or fiction, sell or make products, the way to engage people, create desire, make them happy, and encourage them to stay that way, is by creating narratives. So what do we need to consider when doing so?
  • Art Direction And Creative Teams
    Let’s take a look at how we can embrace collaboration and form teams who follow strategies built around common goals.
A hardcover book laying open on a light blue background, with two pages open that are showing some artwork examples from the 1930s, by Alexey Brodovitch

Part 2: Designing For Art Direction

  • Principles Of Design
    Are the principles which have guided design in other media for generations relevant to the world of digital products and websites? Of course! In this chapter, we’ll explore the principles of symmetry, asymmetry, ratios, and scale.
  • Directing Grids
    Grids have a long and varied history in design, from the earliest books, through movements like constructivism right up to the present-day popularity of grids in frameworks like Bootstrap and material design. This chapter explains grid anatomy and terminology and how to use modular and compound grids.
  • Directing Type
    White space, typographic scale, and creative uses of type are the focus in this chapter.
  • Directing Pictures
    Images and how we display them have an enormous impact on how people perceive our designs, whether that be on a commercial or editorial website, or inside a product. In this chapter, you’ll learn how to position and arrange images to direct the eye.
A hardcover book laying open on a light blue background, with two pages open that are showing some artwork examples of Bond conference and Medium Memberships

Part 3: Developing For Art Direction

  • Developing Layouts With CSS Grids
    CSS Grid plus thoughtful, art-directed content offers us the best chance yet of making websites which are better at communicating with our audiences. In this chapter, Andy explains properties and techniques which are most appropriate for art direction.
  • Developing Components With Flexbox
    While Grid is ideal for implementing art-directed layouts, Flexbox is often better suited to developing molecules and organisms such as navigation links, images, captions, search inputs, and buttons. This chapter explores how to make use of it.
  • Developing Typography
    From multi-column layout and arranging type with writing modes to text orientation and decorative typography, this chapter dives deep into the code side of type.
  • Developing With Images
    How do you fit your art-directed images to a user’s viewport? And what do CSS shapes and paths have in store for your design? Let’s find out in this final chapter.
A hardcover book laying open on a light blue background, with two pages open that are showing some artwork examples of Bond conference and Medium Memberships

Smashing TV Webinars

To accompany this book, Andy is also giving a series of webinars on Smashing TV. Webinars are free with Smashing Membership, which costs a couple of cups of coffee a month (cancel anytime).

Andy Clarke is running a webinar on Art Direction.

About The Author

Andy Clarke is a well-known designer, design consultant, and mentor. He has been called plenty of things since he started working on the web. His ego likes terms such as “Ambassador for CSS,” “industry prophet,” and “inspiring,” but he’s most proud that Jeffrey Zeldman once called him a “triple-talented bastard.”

With his wife, Sue, Andy founded Stuff & Nonsense in 1998. They’ve helped companies around the world to improve their designs by providing consulting and design expertise.

Andy’s written several popular books on website design and development, including Hardboiled Web Design: Fifth Anniversary Edition, Hardboiled Web Design, and Transcending CSS: The Fine Art Of Web Design. He’s a popular speaker and gives talks about art direction and design-related topics all over the world.

Testimonials

It has been our goal to make the book as inspiring, practical, and useful as possible, and we feel honored to have already received such positive reviews.

“With ‘Art Direction for the Web,’ Andy provides a framework for harnessing the web’s potential. With historical context and real-life examples, Andy inspires each of us to be more purposeful about the choices we make. And true to form, he follows up all that inspiration with demos and the practical knowledge needed to see our ideas manifest online.”

— Trent Walton, co-founder of Paravel Inc.

Why This Book Is For You

The content of this book is based on Andy’s twenty years’ experience of working with clients, plus the expertise of the art directors and designers he interviewed. You’ll learn:

  1. What art direction means, why it matters, and who can do it.
  2. How to make art direction work for digital products and websites.
  3. How to improve conversions and bring your customers’ journeys to life.
  4. How to maintain brand values and design principles by connecting touch points across marketing, product design, and websites.
  5. How to use art direction priciples such as layout, typography, proportions, ratio, and grids in a more imaginative way to communicate what you’re trying to do much better.
  6. How to implement your designs on any platform with the latest HTML and CSS.
  7. …Plus, we’ll explore outstanding designs from 100 years of media and print publishing for some extra art direction inspiration.
A hardcover book laying on a wooden floor, called “Art Direction for the Web”
Andy’s new book explores 100 years of art direction and how we can use this knowledge and the newest web technologies to create better digital products.

eBook

$ 14.90 $ 19Get the eBook

PDF, ePUB, Kindle. Free for Smashing Members.

Hardcover

$ 29 $ 39Get the Print (incl. eBook)

Printed, quality hardcover.
Shipping starts mid-April.

Technical Details

  • 344 pages, 14 × 21 cm (5.5 × 8.25 inches)
  • ISBN: 978-3-945749-76-0 (print)
  • Quality hardcover with stitched binding and a ribbon page marker.
  • The eBook is available in PDF, ePUB, and Amazon Kindle.
  • Free worldwide airmail shipping from Germany. Starting mid-April. (See delivery times.)
  • Available as printed, quality hardcover and eBook.

Smashing Editorial (cm, bl, il)


Articles on Smashing Magazine — For Web Designers And Developers

form-design-patterns-wooden-800_oxm2w5
10 Oct

Meet “Form Design Patterns,” Our New Book On Accessible Web Forms — Now Shipping!

by TBSCategories: News

Meet “Form Design Patterns,” Our New Book On Accessible Web Forms — Now Shipping!

Meet “Form Design Patterns,” Our New Book On Accessible Web Forms — Now Shipping!

Markus Seyfferth

Forms. It’s no coincidence that the word rhymes with “yawns” — web forms are dull to code and even duller for your visitors to fill in. But without forms, the web would just be a library. They let us comment, collect, book, buy, share, and a host of other verbs. And mostly they enable us to do these things in an awkward, opaque, confusing, odd, frustrating, alarming, or alienating way. Forms are such an important part of the web, but we design them poorly all the time. When they’re not over-engineered they’re usually not engineered at all.

With the new Form Design Patterns book we want to tackle this problem. By going through common real-world problems step by step, you’ll learn how to design simple, robust, lightweight, responsive, accessible, progressively enhanced, interoperable and intuitive forms that let users get stuff done no matter what. And by the end of the book you’ll have a close-to exhaustive list of components delivered as a design system that you can use immediately in your own projects. (Jump to table of contents.)

Form Design Patterns, our new book on accessible and well-designed web forms.

eBook

$ 10 $ 19Get the eBook

PDF, ePUB, Kindle. Free for Smashing Members.

Hardcover

$ 29 $ 39Get the Print (incl. eBook)

Printed, quality hardcover. Free airmail shipping worldwide.

Table Of Contents

Each chapter revolves around a specific problem — after all, that’s how we solve problems in real life. But don’t be concerned, many of the styles, components and patterns born out of each chapter are reusable and applicable well beyond the specifics and you’ll see examples of this as we move through the book.

Download the PDF excerpt for free (0.7 MB) to get a feeling what the book is like inside.

  1. A Registration Form
    We’ll start looking at the foundational qualities of a well-designed form and how to think about them. By applying something called a question protocol, we’ll look at how to reduce friction without even touching the interface. Then we’ll look at some crucial patterns, including validation, that we’ll want to use for every form.
  2. A Checkout Form
    We’ll consider checkout flows and look at several input types and how they affect the user experience on mobile and desktop browsers, all the while looking at ways to help both first-time and returning customers order quickly and simply.
  3. A Flight Booking Form
    We’ll dive into the world of progressively enhanced, custom form components using ARIA. We’ll do this by exploring the best way to let users select destinations, pick dates, add passengers, and choose seats. We’ll analyze native form controls, and look at breaking away from convention when it becomes necessary.
  4. A Login Form
    We’ll look at the ubiquitous login form. Despite its simple appearance, there’s a bunch of usability failures that so many sites suffer from.
  5. An Inbox
    We’ll design ways to manage email in bulk, our first look at administrative interfaces. As such, this comes with its own set of challenges and patterns, including a responsive ARIA-described action menu, multiple selection, and same-page messaging.
  6. A Search Form
    We’ll create a responsive search form that is readily available to users on all pages, and we’ll also consider the importance of the search mechanism that powers it.
  7. A Filter Form
    Users often need to filter a large set of unwieldy search results. Without a well-designed filter, users are bound to give up. Filters pose a number of interesting and unique design problems that may force us to challenge best practice to give users a better experience.
  8. An Upload Form
    Many services, like photo sharing, messaging, and many back-office applications, let users upload images and documents. We’ll study the file input and how we can use it to upload multiple files at once. Then we’ll look at the intricacies of a drag-and-drop, Ajax-enhanced interface that is inclusive of keyboard and screen reader users.
  9. An Expense Form
    We’ll investigate the special problem of needing to create and add lots of expenses (or anything else) into a system. This is really an excuse to cover the add another pattern, which is often useful in administrative interfaces.
  10. A Really Long and Complicated Form
    Some forms are very long and take hours to complete. We’ll look at some of the patterns we can use to make long forms easier to manage.

About The Author

Adam SilverAdam Silver is an interaction designer with over 15 years experience working on the web for a range of companies including Tesco, BBC, Just Eat, Financial Times, the Department for Work and Pensions and others.

He’s particularly interested in inclusive design and design systems and writes about this on his blog and popular design publications such as A List Apart. This isn’t his first book either: he previously wrote Maintainable CSS, a book about crafting maintainable UIs with CSS.

Technical Details

  • 384 pages, 14 × 21 cm (5.5 × 8.25 inches),
  • ISBN: 978-3-945749-73-9 (print),
  • Quality hardcover with stitched binding and a ribbon page marker,
  • The eBook is available in PDF, EPUB, and Amazon Kindle.
  • Free worldwide airmail shipping from Germany. Delivery times.
  • Available as printed, quality hardcover and eBook.

Testimonials

It has been our goal to make the book as practical and useful as possible. We’ve been honored to receive very positive reviews from people making websites on small and large scale.

  • “I have been writing forms in HTML for over 20 years. This book captures the essence of what it is to embrace standards, progressively enhance and deliver simple, accessible forms. By formalising design patterns we can all use and implement, developers and designers can focus on their website and product. I wish this was available 20 years ago!”
    — Paul Duncan, Design Technologists and Accessibility Teacher
  • “Forms. It’s no coincidence that the word rhymes with “yawns” – forms are dull to code and even duller for your visitors to fill in. So make them work better for everyone, using the concrete tips, code and microcopy in this book. And take away your own yawns, as Adam Silver has done all the research and coding for you.”
    — Bruce Lawson, Web standards Advocate
  • “Form Design Patterns is setting out common sense and inclusive solutions for forms both simple and potentially complex. It’s your companion as you strive to create a simpler and easier interactive web.”
    — Heydon Pickering, UX and accessibility consultant

Why This Book Is For You

This book is a practical guide for anyone who needs to design, prototype and build all sorts of forms for digital services, products and websites. You’ll learn:

  1. Available native form elements and their powers, limitations and constraints.
  2. When and how to create accessible custom form components that can give users a better experience in comparison to their native equivalents.
  3. How to significantly reduce friction in forms with careful use of language, flow and order.
  4. Ways (and ways not) to help users fix form errors easily.
  5. How to deal with complex interfaces that let users upload files and add multiple items of any sort.
  6. Ways to let users search and filter a large set of results according to their own mental model.
  7. How to help customers fill out especially long and complex forms that may take weeks to fill out.
The inner pages of Form Design Patterns, wrapped inside a yellow hardcover book that lies on a light blue table. The pages shown are covering how to choose the right copy for Login buttons, and also cover the infamous Username and Password Doesn’t Match Problem
Form Design Patterns is a practical guide for anyone who needs to design, prototype and build all sorts of forms for digital services, products and websites. (View large image)

eBook

$ 10 $ 19Get the eBook

PDF, ePUB, Kindle. Free for Smashing Members.

Hardcover

$ 29 $ 39Get the Print (incl. eBook)

Printed, quality hardcover. Free airmail shipping worldwide.

We can’t wait to hear your thoughts about the book! Happy reading, and we hope that you’ll find the book as useful as we do. Just have a cup of coffee (or tea) ready before you start reading, of course. Stay smashing and… meow!

Smashing Editorial (bl, hp)


Articles on Smashing Magazine — For Web Designers And Developers

smashing-book-6-wooden-floor-800
14 Jun

Meet Smashing Book 6: New Frontiers In Web Design

by TBSCategories: News

Meet Smashing Book 6: New Frontiers In Web Design

Meet Smashing Book 6: New Frontiers In Web Design

Vitaly Friedman

It is about time to finally make sense of all the front-end and UX madness, isn’t it? Meet Smashing Book 6 with everything from design systems to accessible single-page apps, CSS Custom Properties, Grid, Service Workers, performance patterns, AR/VR, conversational UIs & responsive art direction. And you can add your name into the book, too. About the book ↓.

Smashing Book 6 is dedicated to the challenges and headaches that we are facing today, and how to resolve them. No chit-chat, no theory: only practical, useful advice applicable to your work right away.

Smashing Book 6

Book

$ 29 $ 39Print + eBook

Printed, quality hardcover. Free airmail shipping worldwide. Sep 2018.

eBook

$ 14.90 $ 19Get the eBook

PDF, ePUB, Kindle. First chapters are already available.

About The Book

With so much happening in front-end and UX these days, it’s getting really hard to stay afloat, isn’t it? New technologies and techniques appear almost daily, and so navigating through it all in regular projects is daunting and time-consuming. Frankly, we just don’t have time to afford betting on a wrong strategy. That’s why we created Smashing Book 6, our shiny new book that explores uncharted territories and seeks to establish a map for the brave new front-end world.

You know the drill: the book isn’t about tools; it’s about workflow, strategy and shortcuts to getting things done well. Respected members of the community explore how to build accessible single-page apps with React or Angular, how to use CSS Grid Layout, CSS Custom Properties and service workers as well as how to load assets on the web in times of HTTP/2 and bloated third-party scripts.

We’ll also examine how to make design systems work in real-life, how to design and build conversational interfaces, AR/VR, building for chatbots and watches and how to bring responsive art-direction back to the web.

Print shipping in late September 2018. Hardcover + eBook. 432 pages. Written by Laura Elizabeth, Marcy Sutton, Rachel Andrew, Mike Riethmueller, Harry Roberts, Lyza D. Gardner, Yoav Weiss, Adrian Zumbrunnen, Greg Nudelman, Ada Rose Cannon and Vitaly Friedman. Pre-order the book today.

A look inside the book

Book

$ 29 $ 39Print + eBook

Printed, quality hardcover. Free airmail shipping worldwide. Sep 2018.

eBook

$ 14.90 $ 19Get the eBook

PDF, ePUB, Kindle. First chapters are already available.

Why This Book Is For You

We worked hard to design the book in a way that it doesn’t become outdated quickly. That’s why it’s more focused on strategy rather than tooling. It’s about how we do things, but not necessarily the tools we all use to get there.

Table of Contents

The book contains 11 chapters, with topics ranging from design to front-end. Only practical advice, applicable to your work right away.

  • Making design systems work in real-life
    by Laura Elizabeth
  • Accessibility in times of single-page applications
    by Marcy Sutton
  • Production-ready CSS Grid layouts
    by Rachel Andrew
  • Strategic guide to CSS Custom Properties
    by Mike Riethmueller
  • Taming performance bottlenecks
    by Harry Roberts
  • Building an advanced service worker
    by Lyza Gardner
  • Loading assets on the web
    by Yoav Weiss
  • Conversation interface design patterns
    by Adrian Zumbrunnen
  • Building chatbots and designing for watches
    by Greg Nudelman
  • Cross Reality and the web (AR/VR)
    by Ada Rose Cannon
  • Bringing personality back to the web
    by Vitaly Friedman
laura elizabeth marcy sutton rachel andrew mike riethmuller harry roberts lyza d gardner yoav weiss adrian zumbrunnen greg nudelman ada rose edwards vitaly friedman

From left to right: Laura Elizabeth, Marcy Sutton, Rachel Andrew, Mike Riethmuller, Harry Roberts, Lyza Gardner, Yoav Weiss, Adrian Zumbrunnen, Greg Nudelman, Ada Rose Edwards, and yours truly.

Book

$ 29 $ 39Print + eBook

Printed, quality hardcover. Free airmail shipping worldwide. Sep 2018.

eBook

$ 14.90 $ 19Get the eBook

PDF, ePUB, Kindle. First chapters are already available.

Download the Sample Chapter

To sneak a peek inside the book, you can download Vitaly’s chapter on bringing personality back to the web (PDF, ca. 18MB). Enjoy!

Goodie: New Frontiers In Web Design Wallpaper

To celebrate the pre-release of the book , Chiara Aliotta designed a set of mobile and desktop wallpapers for you to indulge in. Feel free to download it (ZIP, ca. 1.4MB).

New Frontiers In Web Design Wallpaper
Get ready for the new frontiers in web design with Chiara’s beautiful wallpaper.

About The Designer

Chiara AliottaThe cover was designed by the fantastic Chiara Aliotta. Chiara is an Italian award-winning designer with many years of experience as an art director and brand consultant. She founded the design studio Until Sunday and has directed the overall artistic look and feel of different tech companies and not-for-profit organizations around the world. We’re very happy that she gave Smashing Book 6 that special, magical touch.

Add Your Name To The Book

We kindly appreciate your support, and so as always, we invite you to add your name to the printed book: a double-page spread is reserved for the first 1.000 people. Space is limited, so please don’t wait too long!

Add your name to the book
A double-page spread is reserved for the first 1.000 readers. Add your name to the printed book.

Book

$ 29 $ 39Print + eBook

Printed, quality hardcover. Free airmail shipping worldwide. Sep 2018.

eBook

$ 14.90 $ 19Get the eBook

PDF, ePUB, Kindle. First chapters are already available.

Smashing Editorial (cm)


Articles on Smashing Magazine — For Web Designers And Developers

smashingconf-new-york-cat_wumlpv
29 May

New Treasures In Front-End And UX — Meet SmashingConf NYC 2018

by TBSCategories: News

New Treasures In Front-End And UX — Meet SmashingConf NYC 2018

New Treasures In Front-End And UX — Meet SmashingConf NYC 2018

Vitaly Friedman

With so much happening around the web, what is important and what should you pay attention to? SmashingConf NYC 2018 will explore how new web technologies, findings and emerging front-end/UX techniques can make us all better designers and developers. Early Bird tickets are now live →

On Oct 23–24 2018, we’ll dive deep into everything from Progressive Web Apps, Vue.js, Webpack, performance patterns, and CSS tricks all the way to accessibility, eCommerce UX, DesignOps, and strategies for better planning and estimates. With Sara Soueidan, Dan Mall, Lea Verou, Jason Grigsby, and many others speakers and workshops.

The night before the conference we’ll be hosting a FailNight, a warm-up party with a twist. The sessions will highlight the stories nobody likes to talk about but which are invaluable to get better and smarter at what you do: stories about how we all failed at one point or another — be it at a small or big scale. Sounds like fun? Well, it will be.

Speakers & Workshops

One track, two conference days, 15 speakers, and just 400 available seats. With highly practical talks featuring techniques and strategies that you can apply to your work right away. Here’s what you should expect:

Dan Mall and Sara Soueidan are some of the wonderful speakers we are glad to be having in New York
  • Design Workflow and Process
    Dan Mall — SuperFriendly
  • CSS Tricks and Techniques
    Lea Verou — MIT
  • Design In The Era Of AI & Machine Learning
    Josh Clark — Big Medium
  • Web Font Loading Optimization
    Monica Dinculescu — Google
  • Productivity, Pushing Ideas Forward
    Paul Boag
  • Serverless and Vue.js
    Sarah Drasner — Microsoft
  • Progressive Web Apps
    Jason Grigsby — Cloud Four
  • Refactoring and UI Improvements With CSS
    Sara Soueidan
  • Setting Up Webpack
    Sean Thomas Larkin — Webpack Core Team
  • Graphic Design Workflow
    Chiara Aliotta — UntilSunday
  • Web Performance Best Practices
    Patrick Hamann — Fastly
  • … plus Tim Kadlec (Perfomance Audit), Laurence Penney (Variable Fonts), Michael Flarup (Icon Design), and, of course, the Mystery Speaker.

Conference Ticket

$ 549 Get Your Ticket

Two days of mind-blowing talks
Check all speakers →

Conf + Workshop Tickets

Save $ 100 Conf + Workshop

Three days full of learning
Check all workshops →

Workshops At SmashingConf New York

Our workshops give you the opportunity to spend an entire day on the topic of your choice. SVG? Vue.js? Performance? Whatever it might be that sparks your interest, we’ve got you covered. A ticket for the full-day workshop is $ 499, and if you combine it with a conference ticket, you’ll save $ 100 on the regular workshop price. Seats are limited.

Workshops on Monday, October 22nd

Dan Mall on Design Workflow For A Multi-Device World
Dan MallIn this workshop, Dan will share insights into his tools and techniques for integrating design thinking into your product development process. You’ll learn how to craft powerful design approaches through collaborative brainstorming techniques, and how to involve your entire team in the design process. Read more…

Josh Clark on Design For What’s Next
Josh ClarkSpend a day exploring the web’s emerging interactions and how you can put them to work today. Your guide is designer Josh Clark, author of Designing for Touch and ambassador of the near future. As you move into newer design tools — speech, bots, physical interfaces, artificial intelligence, and more — you’ll learn the tools and techniques for prototyping and launching these new interfaces and get answers to foundational questions for all your projects. Read more…

Sarah Drasner on Intro To Vue.js
Sarah DrasnerVue.js brings together the best features of the Javascript framework landscape elegantly. If you’re interested in writing maintainable, clean code in an exciting and expressive manner, you should consider joining this class. Read more…

Vitaly Friedman on Dirty Little Tricks From The Dark Corners Of eCommerce
Vitaly FriedmanIn this workshop, we will use real-life examples as a case study and examine refinements of the interface on spot. The goal is to set up a very clear roadmap on how we can do the right things in the right order to improve conversion and customer experience. That means removing distractions, minimizing friction and avoiding disruptions and dead ends caused by the interface. Read more…

Workshops on Thursday, October 25th

Lea Verou on WORKSHOP TITLE PLACEHOLDER SOMETHING WITH CSS SECRETS
Lea VerouTHIS IS A PLACEHOLDER TEXT, YOU DON’T REALLY WANT TO US THIS IN YOUR FINAL VERSION 🙂 I REPEAT THIS IS A PLACEHOLDER TEXT, YOU DON’T REALLY WANT TO US THIS IN YOUR FINAL VERSION 🙂 Read more…

Paul Boag on How To Convince Clients And Colleagues The Right Way
Paul BoagThis full-day workshop offers practical guidance on the most critical skills you need in your career; the ability to persuade. Persuade colleagues and clients to take a risk, to step out of their comfort zones and embrace change. Read more…

Sara Soueidan on The CSS & SVG Power Combo
Sara SoueidanThe workshop with the strongest punch of creativity. The CSS & SVG Power Combo is where you will learn about the latest, cutting-edge CSS and SVG techniques to create creative crisp and beautiful interfaces. We will also be looking at any existing browser inconsistencies as well as performance considerations to keep in mind. And there will be lots of exercises and practical examples that can be taken and directly applied in real life projects. Read more…

Tim Kadlec on Building Performant Websites
Tim KadlecPerformance is a critical consideration for online experiences. We don’t stand still on the web. We click links, we expand menus, we move from page to page — we are constantly having our experiences shaped by how quickly each of these interactions takes place. Read more…

Conference Ticket

$ 549 Get Your Ticket

Two days of mind-blowing talks
Check all speakers →

Conf + Workshop Tickets

Save $ 100 Conf + Workshop

Three days full of learning
Check all workshops →

Location

New York City is buzzing with energy and excitement — the perfect backdrop for SmashingConf. Just like in past years, we will welcome you at the New World Stages, an old movie theater renovated into one of the top off-Broadway houses, just off the Times Square district. Workshops will take place at the Microsoft Technology Center right in the heart of Times Square, close to transportation and lots of food and entertainment options.

SmashingConf at the New World Stages
The cats are taking over! We’re heading back to the New World Stages, a renowned performing arts complex in the heart of New York’s theater district. (Image credit: Marc Thiele)

Why This Conference Could Be For You

Each SmashingConf is an intimate, familiar experience. A gathering of new and old friends, good conversations, and lots of sharing and learning. At SmashingConf New York you will learn how to:

  1. Drastically improve the accessibility and overall experience of your components and interfaces,
  2. How to scale up your web app with serverless functions & Vue.js (and safe hosting costs),
  3. How to make a website more performant, resiliant, and accessible,
  4. How to convince your bosses and clients to give their approval,
  5. How to take full advantage of Progressive Web App technology,
  6. How to Avoid the typical pitfalls of the handover process,
  7. What to consicer when using AI in your products,
  8. How to load web fonts fast by default,
  9. … and a lot more.

Download “Convince Your Boss” PDF

Think your boss needs a little more persuasion? We’ve prepared a neat Convince Your Boss PDF that you can use to tip the scales in your favor to send you to the event.

Conference Ticket

$ 549 Get Your Ticket

Two days of mind-blowing talks
Check all speakers →

Conf + Workshop Tickets

Save $ 100 Conf + Workshop

Three days full of learning
Check all workshops →

See You In New York!

We’d love you to join us on this exciting adventure. Let’s spend some memorable days together to explore the hidden corners of front-end — and hunt for some new treasures, too, of course. See you there!

Smashing Editorial (cm)


Articles on Smashing Magazine — For Web Designers And Developers

smashingconf-toronto-logo-opt
03 May

A Conference Without Slides: Meet SmashingConf Toronto 2018 (June 26-27)

by TBSCategories: News

A Conference Without Slides: Meet SmashingConf Toronto 2018 (June 26-27)

A Conference Without Slides: Meet SmashingConf Toronto 2018 (June 26-27)

Vitaly Friedman

What would be the best way to learn and improve your skills? By looking designers and developers over their shoulder! At SmashingConf Toronto taking place on June 26–27, we will exactly do that. All talks will be live coding and design sessions on stage, showing how speakers such as Dan Mall, Lea Verou, Rachel Andrew, and Sara Soueidan design und build stuff — including pattern libraries setup, design workflows and shortcuts, debugging, naming conventions, and everything in between. To the tickets →

Smashingconf Toronto 2018
What if there was a web conference without… slides? Meet SmashingConf Toronto 2018 with live sessions exploring how experts think, design, build and debug.

The night before the conference we’ll be hosting a FailNight, a warm-up party with a twist — every single session will be highlighting how we all failed on a small or big scale. Because, well, it’s mistakes that help us get better and smarter, right?

Speakers

One track, two conference days (June 26–27), 16 speakers, and just 500 available seats. We’ll cover everything from efficient design workflow and getting started with Vue.js to improving eCommerce UX and production-ready CSS Grid Layouts. Also on our list: performance audits, data visualization, multi-cultural designs, and other fields that may come up in your day-to-day work.

Here’s what you should be expecting:

Dan Mall and Lea Verou are two of the speakers at SmashingConf Toronto
That’s quite a speakers line-up, with topics ranging from live CSS/JavaScript coding to live lettering.

Conference Tickets

C$ 699Get Your Ticket

Two days of great speakers and networking
Check all speakers →

Conf + Workshop Tickets

Save C$ 100 Conf + Workshop

Three days full of learning and networking
Check all workshops →

Workshops At SmashingConf Toronto

On the two days before and after the conference, you have the chance to dive deep into a topic of your choice. Tickets for the full-day workshops cost C$ 599. If you combine it with a conference ticket, you’ll save C$ 100 on the regular workshop price. Seats are limited.

Workshops on Monday, June 25th

Sara Soueidan on The CSS & SVG Power Combo
Sara SoueidanThe workshop with the strongest punch of creativity. The CSS & SVG Power Combo is where you will learn about the latest, cutting-edge CSS and SVG techniques to create creative crisp and beautiful interfaces. We will also be looking at any existing browser inconsistencies as well as performance considerations to keep in mind. And there will be lots of exercises and practical examples that can be taken and directly applied in real life projects.Read more…

Sarah Drasner on Intro To Vue.js
Sarah DrasnerVue.js brings together the best features of the Javascript framework landscape elegantly. If you’re interested in writing maintainable, clean code in an exciting and expressive manner, you should consider joining this class. Read more…

Tim Kadlec on Demystifying Front-End Security
Tim KadlecWhen users come to your site, they trust you to provide them with a good experience. They expect a site that loads quickly, that works in their browser, and that is well designed. And though they may not vocalize it, they certainly expect that the experience will be safe: that any information they provide will not be stolen or used in ways they did not expect. Read more…

Aaron Draplin on Behind The Scenes With The DDC
Aaron DraplinGo behind the scenes with the DDC and learn about Aaron’s process for creating marks, logos and more. Each student will attack a logo on their own with guidance from Aaron. Could be something you are currently working on, or have always wanted to make. Read more…

Dan Mall on Design Workflow For A Multi-Device World
Dan MallIn this workshop, Dan will share insights into his tools and techniques for integrating design thinking into your product development process. You’ll learn how to craft powerful design approaches through collaborative brainstorming techniques and how to involve your entire team in the design process. Read more…

Vitaly Friedman on Smart Responsive UX Design Patterns
Vitaly FriedmanIn this workshop, Vitaly Friedman, co-founder of Smashing Magazine, will cover practical techniques, clever tricks and useful strategies you need to be aware of when working on responsive websites. From responsive modules to clever navigation patterns and web form design techniques; the workshop will provide you with everything you need to know today to start designing better responsive experiences tomorrow. Read more…

Workshops on Thursday, June 28th

Eva-Lotta Lamm on Sketching With Confidence, Clarity And Imagination
Eva-Lotta LammBeing able to sketch is like speaking an additional language that enables you to structure and express your thoughts and ideas more clearly, quickly and in an engaging way. For anyone working in UX, design, marketing and product development in general, sketching is a valuable technique to feel comfortable with. Read more…

Nadieh Bremer on Creative Data Visualization Techniques
Nadieh BremerWith so many tools available to visualize your data, it’s easy to get stuck in thinking about chart types, always just going for that bar or line chart, without truly thinking about effectiveness. In this workshop, Nadieh will teach you how you can take a more creative and practical approach to the design of data visualization. Read more…

Rachel Andrew on Advanced CSS Layouts With Flexbox And CSS Grid
This workshop is designed for designers and developers who already have a good working knowledge of HTML and CSS. We will cover a range of CSS methods for achieving layout, from those you are safe to use right now even if you need to support older version of Internet Explorer through to things that while still classed as experimental, are likely to ship in browsers in the coming months. Read more…

Joe Leech on Psychology For UX And Product Design
Joe LeechThis workshop will provide you with a practical, hands-on way to understand how the human brain works and apply that knowledge to User Experience and product design. Learn the psychological principles behind how our brain makes sense of the world and apply that to product and user interface design. Read more…

Seb Lee-Delisle on Javascript Graphics And Animation
Seb Lee-DelisleIn this workshop, Seb will demonstrate a variety of beautiful visual effects using JavaScript and HTML5 canvas. You will learn animation and graphics techniques that you can use to add a sense of dynamism to your projects. Read more…

Vitaly Friedman on New Front-End Adventures In Responsive Design
Vitaly FriedmanWith HTTP/2, Service Workers, Responsive Images, Flexbox, CSS Grid, SVG, WAI-ARIA roles and Font Loading API now available in browsers, we all are still trying to figure out just the right strategy for designing and building responsive websites efficiently. We want to use all of these technologies and smart processes like atomic design, but how can we use them efficiently, and how do we achieve it within a reasonable amount of time? Read more…

Conference Tickets

C$ 699Get Your Ticket

Two days of great speakers and networking
Check all speakers →

Conf + Workshop Tickets

Save C$ 100 Conf + Workshop

Three days full of learning and networking
Check all workshops →

Location

Maybe you’ve already wondered why our friend the Smashing Cat has dressed up as a movie director for SmashingConf Toronto? Well, that’s because our conference venue will be the TIFF Bell Lightbox. Located within the center of Toronto, it is one of the most iconic cinemas in the world and also the location where the Toronto Film Festival takes place. We’re thrilled to be hosted there!

TIFF Bell Lightbox, our venue in Toronto
The TIFF Bell Lightbox, usually a cinema, is the perfect place for thrillers and happy endings as the web writes them.

Why This Conference Could Be For You

SmashingConfs are a friendly and intimate experience. It’s like meeting good friends and making new ones. Friends who share their stories, ideas, and, of course, their best tips and tricks. At SmashingConf Toronto you will learn how to:

  1. Make full advantage of CSS Variables,
  2. Create fluid animation effects with Vue,
  3. Detect and resolve accessibility issues,
  4. Structure components in a pattern library when using CSS Grid,
  5. Build a stable, usable online experience,
  6. Design for cross-cultural audiences,
  7. Create effective and beautiful data visualization from scratch,
  8. Transform your designs with psychology,
  9. Help your design advance with proper etiquette,
  10. Sketch with pen and paper,
  11. … and a lot more.

Download “Convience Your Boss” PDF

We know that sometimes companies encourage their staff to attend a different conference each year. Well, we say; once you’ve found a conference you love, why stray…

Think your boss needs a little more persuasion? We’ve prepared a neat Convince Your Boss PDF that you can use to tip the scales in your favor to send you to the event.

Diversity and Inclusivity

We care about diversity and inclusivity at our events. SmashingConf’s are a safe, friendly place. We don’t tolerate any disrespect or misbehavior. We also provide student and diversity tickets.

Conference Tickets

C$ 699Get Your Ticket

Two days of great speakers and networking
Check all speakers →

Conf + Workshop Tickets

Save C$ 100 Conf + Workshop

Three days full of learning and networking
Check all workshops →

See You In Toronto!

We’d love to meet you in Toronto and spend two memorable days full of web goodness, lots of learning, and friendly people with you. An experience you won’t forget so soon. Promised.

Smashing Editorial (cm)


Articles on Smashing Magazine — For Web Designers And Developers

Newer postsOlder posts