{"id":71411,"date":"2019-10-04T04:19:30","date_gmt":"2019-10-04T11:19:30","guid":{"rendered":"http:\/\/www.taterboy.com\/blog\/2019\/10\/inspired-design-decisions-bea-feitler-an-unstoppable-creative-force\/"},"modified":"2019-10-04T04:19:30","modified_gmt":"2019-10-04T11:19:30","slug":"inspired-design-decisions-bea-feitler-an-unstoppable-creative-force","status":"publish","type":"post","link":"https:\/\/www.taterboy.com\/blog\/2019\/10\/inspired-design-decisions-bea-feitler-an-unstoppable-creative-force\/","title":{"rendered":"Inspired Design Decisions: Bea Feitler, An Unstoppable Creative Force"},"content":{"rendered":"<link rel=\"canonical\" href=\"https:\/\/www.smashingmagazine.com\/2019\/10\/inspired-design-decisions-bea-feitler\/\"><title>Inspired Design Decisions: Bea Feitler, An Unstoppable Creative Force<\/title><\/p>\n<article>\n<header>\n<h1>Inspired Design Decisions: Bea Feitler, An Unstoppable Creative Force<\/h1>\n<address>Andrew Clarke<\/address>\n<p>                  <time datetime=\"2019-10-03T14:30:59+02:00\">2019-10-03T14:30:59+02:00<\/time><time datetime=\"2019-10-04T11:08:44+00:00\">2019-10-04T11:08:44+00:00<\/time><\/header>\n<p>Even if you didn\u2019t study graphic design at art school, you might know a few famous names. With over a century of commercial art direction, there are plenty more names to discover. People who have done astonishing work which can encourage and inspire us to think about the web more creatively.<\/p>\n<p>Discovering people with incredible talent has been one of the most rewarding aspects of studying art direction. Learning about one designer often leads me to another, and when I find someone who\u2019s work I admire, I want to understand not just what they made, but why they made it.<\/p>\n<h4>Previously On \u201cInspired Design Decisions\u201d<\/h4>\n<ol>\n<li><a href=\"https:\/\/www.smashingmagazine.com\/2019\/06\/inspired-design-decisions-avaunt-magazine\/\">Inspired Design Decisions: Avaunt Magazine<\/a><\/li>\n<li><a href=\"https:\/\/www.smashingmagazine.com\/2019\/07\/inspired-design-decisions-pressing-matters\/\">Inspired Design Decisions: Pressing Matters<\/a><\/li>\n<li><a href=\"https:\/\/www.smashingmagazine.com\/2019\/08\/inspired-design-decisions-ernest-journal\">Inspired Design Decisions: Ernest Journal<\/a><\/li>\n<li><a href=\"https:\/\/www.smashingmagazine.com\/2019\/09\/inspired-design-decisions-alexey-brodovitch\/\">Inspired Design Decisions: Alexey Brodovitch<\/a><\/li>\n<\/ol>\n<p>After learning about <a href=\"https:\/\/en.wikipedia.org\/wiki\/Alexey_Brodovitch\">Alexey Brodovitch<\/a>\u2019s influential work on Harper\u2019s Bazaar until the 1950s, I wanted to know the impact his legacy had on the magazine. This led me to <a href=\"https:\/\/en.wikipedia.org\/wiki\/Bea_Feitler\">Bea Feitler<\/a> and her creative partner <a href=\"https:\/\/en.wikipedia.org\/wiki\/Ruth_Ansel\">Ruth Ansel<\/a> who directed Harper\u2019s Bazaar throughout the 1960s.<\/p>\n<p>Feitler has been described as \u201cthe pioneering female art director you\u2019ve never heard of.\u201d I\u2019ve never heard her mentioned at a design conference or seen her referenced in an article about web design.<\/p>\n<p>But, Feitler\u2019s confident and energetic designs are only part of what makes her life and work fascinating. Even more important was how her work reflected changes in society in America during the 1960s and the choices she made to influence it.<\/p>\n<p>Only one exhibition has been staged about her work and one retrospective book published. \u201c<a href=\"https:\/\/stuffandnonsense.co.uk\/blog\/book-review-o-design-de-bea-feitler\">O Design de Bea Feitler<\/a>,\u201d written by her nephew, was published in her native Brazil in 2012. It took me months to track down a copy, but eventually, I found one. It\u2019s the most expensive book I\u2019ve bought.<\/p>\n<p>Feitler has as much to teach people who design for the web as she did the magazine designers who followed her. I hope that in some small way, I can help people fall in love with Bea Feitler\u2019s work the way I did.<\/p>\n<div data-component=\"FeaturePanel\" data-audience=\"non-subscriber\" data-remove=\"true\"><\/div>\n<h3>Inspired By Bea Feitler<\/h3>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/fa7e352e-52e2-44e0-9eb1-5c5ddbd6ec89\/issue-5-01-inspired-design-decisions-bea-feitler.jpg?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/issue-5-01-inspired-design-decisions-bea-feitler.jpg 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/fa7e352e-52e2-44e0-9eb1-5c5ddbd6ec89\/issue-5-01-inspired-design-decisions-bea-feitler.jpg 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/fa7e352e-52e2-44e0-9eb1-5c5ddbd6ec89\/issue-5-01-inspired-design-decisions-bea-feitler.jpg 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/fa7e352e-52e2-44e0-9eb1-5c5ddbd6ec89\/issue-5-01-inspired-design-decisions-bea-feitler.jpg 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/fa7e352e-52e2-44e0-9eb1-5c5ddbd6ec89\/issue-5-01-inspired-design-decisions-bea-feitler.jpg 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/issue-5-01-inspired-design-decisions-bea-feitler.jpg?w=900\" sizes=\"100vw\" alt=\"Portrait of Bea Feitler by Bob Richardson, during the 1960s.\"><\/a><figcaption>\n      Portrait of Bea Feitler by Bob Richardson, during the 1960s. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/fa7e352e-52e2-44e0-9eb1-5c5ddbd6ec89\/issue-5-01-inspired-design-decisions-bea-feitler.jpg\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Bea Feitler was born in Rio de Janeiro in 1938. After working on album covers, book jackets, magazines, and poster designs, she left Brazil and moved to Manhattan. In 1961 \u2014 and still only 25 years old \u2014 she became an art assistant, then one of the youngest and first female co-art directors at Harper\u2019s Bazaar alongside Ruth Ansel.<\/p>\n<p>Just like Alexey Brodovitch \u2014 who\u2019d stepped down from Harper\u2019s Bazaar before her move to the United States \u2014 Feitler\u2019s collaborations with artists and photographers helped define her work. At Harper\u2019s Bazaar, Richard Avedon\u2019s photograph of model Jean Shrimpton in her famous pink space helmet, then Annie Leibovitz\u2019s naked John Lennon on the cover of Rolling Stone.<\/p>\n<p>Although Feitler never met Brodovitch, it\u2019s fascinating to see how she respected then developed his legacy. Feitler understood that magazine pages should be deliberately and individually constructed, yet at the same time should be connected to one another to form a harmonious rhythm.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/1f78a17e-77b3-46f8-8368-a4a90b427783\/issue-5-02-inspired-design-decisions-bea-feitler.jpg?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/issue-5-02-inspired-design-decisions-bea-feitler.jpg 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/1f78a17e-77b3-46f8-8368-a4a90b427783\/issue-5-02-inspired-design-decisions-bea-feitler.jpg 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/1f78a17e-77b3-46f8-8368-a4a90b427783\/issue-5-02-inspired-design-decisions-bea-feitler.jpg 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/1f78a17e-77b3-46f8-8368-a4a90b427783\/issue-5-02-inspired-design-decisions-bea-feitler.jpg 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/1f78a17e-77b3-46f8-8368-a4a90b427783\/issue-5-02-inspired-design-decisions-bea-feitler.jpg 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/issue-5-02-inspired-design-decisions-bea-feitler.jpg?w=900\" sizes=\"100vw\" alt=\"\"><\/a><figcaption>\n      A selection of magazine covers with art direction by Bea Feitler. From left: Harper\u2019s Bazaar, MS., Rolling Stone, and Vanity Fair. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/1f78a17e-77b3-46f8-8368-a4a90b427783\/issue-5-02-inspired-design-decisions-bea-feitler.jpg\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<blockquote>\n<p>A magazine should flow. It should have rhythm. You can\u2019t look at one page alone, you have to visualize what comes before and after. Good editorial design is all about creating a harmonic flow.<br \/>\n\u2014 Bea Feitler<\/p>\n<\/blockquote>\n<p>Feitler combined Brodovitch\u2019s mastery of the double-page spread with her choices of bold colors which were inspired by pop artists Jasper Johns, Roy Lichtenstein, and Andy Warhol, as well as street fashion and youth culture.<\/p>\n<p>She wasn\u2019t afraid to experiment with color or to break with conventions, twice placing lurid green text onto a neon pink background, first for a Harper\u2019s Bazaar cover in April 1965 and later for feminist magazine Ms. in December 1972.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/bb682d1e-0fb3-4ec7-a27b-a4ab061e22e1\/issue-5-03-inspired-design-decisions-bea-feitler.jpg?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/issue-5-03-inspired-design-decisions-bea-feitler.jpg 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/bb682d1e-0fb3-4ec7-a27b-a4ab061e22e1\/issue-5-03-inspired-design-decisions-bea-feitler.jpg 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/bb682d1e-0fb3-4ec7-a27b-a4ab061e22e1\/issue-5-03-inspired-design-decisions-bea-feitler.jpg 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/bb682d1e-0fb3-4ec7-a27b-a4ab061e22e1\/issue-5-03-inspired-design-decisions-bea-feitler.jpg 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/bb682d1e-0fb3-4ec7-a27b-a4ab061e22e1\/issue-5-03-inspired-design-decisions-bea-feitler.jpg 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/issue-5-03-inspired-design-decisions-bea-feitler.jpg?w=900\" sizes=\"100vw\" alt=\"\"><\/a><figcaption>\n      Harper\u2019s Bazaar, February 1967. Art direction by Bea Feitler. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/bb682d1e-0fb3-4ec7-a27b-a4ab061e22e1\/issue-5-03-inspired-design-decisions-bea-feitler.jpg\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>At the Harper\u2019s Bazaar studio she shared with Ruth Ansel, a continually changing collage filled their inspiration wall; something I wish I had space for in my tiny studio. Feitler wasn\u2019t afraid to mix media, and when she felt that one of her most iconic spreads wasn\u2019t working, she combined one of Avedon\u2019s most well-known photographs with a panel from a comic book she\u2019d bought from a newsstand in the street below.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/8197d3db-5f10-47a7-9547-f81348789987\/issue-5-04-inspired-design-decisions-bea-feitler.jpg?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/issue-5-04-inspired-design-decisions-bea-feitler.jpg 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/8197d3db-5f10-47a7-9547-f81348789987\/issue-5-04-inspired-design-decisions-bea-feitler.jpg 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/8197d3db-5f10-47a7-9547-f81348789987\/issue-5-04-inspired-design-decisions-bea-feitler.jpg 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/8197d3db-5f10-47a7-9547-f81348789987\/issue-5-04-inspired-design-decisions-bea-feitler.jpg 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/8197d3db-5f10-47a7-9547-f81348789987\/issue-5-04-inspired-design-decisions-bea-feitler.jpg 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/issue-5-04-inspired-design-decisions-bea-feitler.jpg?w=900\" sizes=\"100vw\" alt=\"\"><\/a><figcaption>\n      Harper\u2019s Bazaar, August 1966. Photography by Hiro. Art direction by Ruth Ansel and Bea Feitler. Their confident choices of color and strong shapes have inspired much of my recent work. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/8197d3db-5f10-47a7-9547-f81348789987\/issue-5-04-inspired-design-decisions-bea-feitler.jpg\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Feitler\u2019s designs influenced and reflected the changes in American society in the 1960s. The magazines she art directed had a fast-paced, almost cinematic quality which perfectly suited the culture of the time but is also relevant to our work online today. Feitler believed that good editorial design is about creating a harmonious flow. This is as relevant to designing engaging user experiences and customer journeys as it is magazine pages.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9a91fb34-d394-4af2-8ab2-64d413de94f1\/issue-5-05-inspired-design-decisions-bea-feitler.jpg?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/issue-5-05-inspired-design-decisions-bea-feitler.jpg 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9a91fb34-d394-4af2-8ab2-64d413de94f1\/issue-5-05-inspired-design-decisions-bea-feitler.jpg 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9a91fb34-d394-4af2-8ab2-64d413de94f1\/issue-5-05-inspired-design-decisions-bea-feitler.jpg 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9a91fb34-d394-4af2-8ab2-64d413de94f1\/issue-5-05-inspired-design-decisions-bea-feitler.jpg 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9a91fb34-d394-4af2-8ab2-64d413de94f1\/issue-5-05-inspired-design-decisions-bea-feitler.jpg 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/issue-5-05-inspired-design-decisions-bea-feitler.jpg?w=900\" sizes=\"100vw\" alt=\"\"><\/a><figcaption>\n      Some of my favourite Feitler designs have neither color nor images, like this typographic spread from Harper\u2019s Bazaar. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/9a91fb34-d394-4af2-8ab2-64d413de94f1\/issue-5-05-inspired-design-decisions-bea-feitler.jpg\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Even though some people continue to recite the mantra that the web isn\u2019t print, there\u2019s a lot we can learn from Feitler\u2019s work. Her designs can help us improve not only editorial design online but e-commerce websites and digital product designs too.<\/p>\n<p>Feitler said that a book was \u201c50\/50 image to text.\u201d On the web, we need to allow for interactive features and video too. Understanding how to successfully combine these components to create a consistent, engaging experience is a fundamental skill which every digital designer should develop.<\/p>\n<p>As a mentor and teacher, Feitler shared many principles with Alexey Brodovitch. She encouraged her students to develop their own direction, and many themselves became prominent art directors. Feitler was demanding and accepted nothing less than the very highest standards of design excellence from everybody.<\/p>\n<blockquote>\n<p>Hold on to your passions and dig deep while trusting your instincts. Step outside of what is expected. Embrace accidents, and know that eventually you will discover the perfect solution to a creative dilemma and be very joyous while doing it.<br \/>\n\u2014 Ruth Ansel<\/p>\n<\/blockquote>\n<p>Sadly, Bea Feitler died from cancer in 1982 aged just 44. I believe she has as much to teach those of us who design for the web as she did the magazine art directors who followed her. I hope her life and work will influence us to have courage in our convictions and make our own brave and confident choices.<\/p>\n<blockquote>\n<h5>Beauty Blast Off<\/h5>\n<p><a href=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/issue-5-06-inspired-design-decisions-bea-feitler.jpg\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/issue-5-06-inspired-design-decisions-bea-feitler.jpg?w=300\"  alt=\"Harper\u2019s Bazaar, April 1965. Model: Jean Shrimpton. Photographer: Richard Avedon.\"><\/a>Harper\u2019s Bazaar\u2019s hadn\u2019t had a guest editor before, but for its April 1965 edition, long-time collaborator Richard Avedon edited and photographed the entire issue.<\/p>\n<p>Inside, Avedon photographed Donyale Luna \u2014 the first black woman to be featured on the cover of a mainstream fashion magazine \u2014 and Paul McCartney wearing a spacesuit borrowed from NASA. For the cover, Avedon chose an image of contemporary supermodel Jean Shrimpton wearing a space helmet which had been made by one of New York\u2019s most famous milliners.<\/p>\n<p>Avedon later recalled that at 11 PM \u2014 after their deadline had passed \u2014 the photograph he\u2019d shot for the cover wasn\u2019t working.  So, Feitler cut the shape of a helmet from pink Day-Glo paper and placed it over Avedon\u2019s photograph. No focus groups, no research, no audience testing, just a gutsy and intuitive design decision.<\/p>\n<p>The result was a cover which went on to win the New York Art Director&#8217;s Club medal and was placed at number fifteen in the American Society of Magazine Editor\u2019s 2005 list of Top 40 Magazine Covers.<\/p>\n<\/blockquote>\n<h3><sup>50<\/sup>?<sub>50<\/sub> Image To Text<\/h3>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/52b43b25-dfbe-4695-8004-6bf16887813e\/issue-5-07-inspired-design-decisions-bea-feitler.jpg?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/issue-5-07-inspired-design-decisions-bea-feitler.jpg 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/52b43b25-dfbe-4695-8004-6bf16887813e\/issue-5-07-inspired-design-decisions-bea-feitler.jpg 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/52b43b25-dfbe-4695-8004-6bf16887813e\/issue-5-07-inspired-design-decisions-bea-feitler.jpg 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/52b43b25-dfbe-4695-8004-6bf16887813e\/issue-5-07-inspired-design-decisions-bea-feitler.jpg 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/52b43b25-dfbe-4695-8004-6bf16887813e\/issue-5-07-inspired-design-decisions-bea-feitler.jpg 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/issue-5-07-inspired-design-decisions-bea-feitler.jpg?w=900\" sizes=\"100vw\" alt=\"Agneta Darin. Spread from Harper\u2019s Bazaar, August 1966. Photography by Hiro. Art direction by Bea Feitler and Ruth Ansel\"><\/a><figcaption>\n      Agneta Darin. Spread from Harper\u2019s Bazaar, August 1966. Photography by Hiro. Art direction by Bea Feitler and Ruth Ansel. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/52b43b25-dfbe-4695-8004-6bf16887813e\/issue-5-07-inspired-design-decisions-bea-feitler.jpg\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/b6667b07-044b-4dba-9ad2-b8e9894b82b1\/issue-5-08-inspired-design-decisions-bea-feitler.png?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/issue-5-08-inspired-design-decisions-bea-feitler.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/b6667b07-044b-4dba-9ad2-b8e9894b82b1\/issue-5-08-inspired-design-decisions-bea-feitler.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/b6667b07-044b-4dba-9ad2-b8e9894b82b1\/issue-5-08-inspired-design-decisions-bea-feitler.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/b6667b07-044b-4dba-9ad2-b8e9894b82b1\/issue-5-08-inspired-design-decisions-bea-feitler.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/b6667b07-044b-4dba-9ad2-b8e9894b82b1\/issue-5-08-inspired-design-decisions-bea-feitler.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/issue-5-08-inspired-design-decisions-bea-feitler.png?w=900\" sizes=\"100vw\" alt=\"This design uses a CSS background-image gradient and the picture element\"><\/a><figcaption>\n      This design uses a CSS background-image gradient and the picture element. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/b6667b07-044b-4dba-9ad2-b8e9894b82b1\/issue-5-08-inspired-design-decisions-bea-feitler.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>To implement my first Feitler-inspired design, my aim is to use the most minimal set of structural elements; a <code>header<\/code> plus <code>main<\/code> and <code>aside<\/code> elements for content. My header contains the split image of an iconic Volkswagen Beetle and a headline which includes an inline SVG Volkswagen logo. As this headline contains no text, I use an ARIA label to describe it. This will help people who use assistive technologies:<\/p>\n<pre><code><header>\n  <h1 aria-labelledby=\"Volkswagen logo\">\n    <svg>\u2026<\/svg>\n  <\/h1>\n  <picture>\u2026<\/picture>\n<\/header>\n\n<main>\u2026<\/main>\n<aside>\u2026<\/aside>\n<\/code><\/pre>\n<p>For smaller screens, I need only foundation styles as the normal flow, handles my single column layout. First, I add a linear gradient behind the header image. Gradients are incredibly flexible, but despite their usefulness they\u2019re surprisingly under-used:<\/p>\n<pre><code>header {\npadding: 1rem 2vw;\nbackground-image: linear-gradient(\nto right,\n#444 0%,\n#444 50%,\n#fff 50%,\n#fff 100%);\ntext-align: center; }\n<\/code><\/pre>\n<p>My gradient starts on the left with a dark grey and ends on the right with white. Without color stops, the result would be a smooth gradient between those colors, but I want a hard line in the center of my header. To achieve this effect, I place two color stops at the same <code>50%<\/code> position. To change the direction of my gradient, I needn\u2019t adjust those percentages. I can simply change the gradient direction from <code>to right<\/code> to <code>to left<\/code>.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/e3194894-3ea0-4d12-82f3-4aecffd3f790\/issue-5-09-inspired-design-decisions-bea-feitler.png?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/issue-5-09-inspired-design-decisions-bea-feitler.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/e3194894-3ea0-4d12-82f3-4aecffd3f790\/issue-5-09-inspired-design-decisions-bea-feitler.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/e3194894-3ea0-4d12-82f3-4aecffd3f790\/issue-5-09-inspired-design-decisions-bea-feitler.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/e3194894-3ea0-4d12-82f3-4aecffd3f790\/issue-5-09-inspired-design-decisions-bea-feitler.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/e3194894-3ea0-4d12-82f3-4aecffd3f790\/issue-5-09-inspired-design-decisions-bea-feitler.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/issue-5-09-inspired-design-decisions-bea-feitler.png?w=900\" sizes=\"100vw\" alt=\"Left: My gradient starts on the left. Right: I change the direction without altering my percentage color stops.\"><\/a><figcaption>\n      Left: My gradient starts on the left. Right: I change the direction without altering my percentage color stops. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/e3194894-3ea0-4d12-82f3-4aecffd3f790\/issue-5-09-inspired-design-decisions-bea-feitler.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/4636cac4-5a9e-4095-b6d7-812b1a5e8ea7\/issue-5-10-inspired-design-decisions-bea-feitler.png?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/issue-5-10-inspired-design-decisions-bea-feitler.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/4636cac4-5a9e-4095-b6d7-812b1a5e8ea7\/issue-5-10-inspired-design-decisions-bea-feitler.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/4636cac4-5a9e-4095-b6d7-812b1a5e8ea7\/issue-5-10-inspired-design-decisions-bea-feitler.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/4636cac4-5a9e-4095-b6d7-812b1a5e8ea7\/issue-5-10-inspired-design-decisions-bea-feitler.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/4636cac4-5a9e-4095-b6d7-812b1a5e8ea7\/issue-5-10-inspired-design-decisions-bea-feitler.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/issue-5-10-inspired-design-decisions-bea-feitler.png?w=900\" sizes=\"100vw\" alt=\"When you use images to add drama, make sure their effect is dramatic on all screen sizes. Shrinking a landscape image to fit a portrait orientation decreases its visual weight and impact.\"><\/a><figcaption>\n      When you use images to add drama, make sure their effect is dramatic on all screen sizes. Shrinking a landscape image to fit a portrait orientation decreases its visual weight and impact. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/4636cac4-5a9e-4095-b6d7-812b1a5e8ea7\/issue-5-10-inspired-design-decisions-bea-feitler.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>It\u2019s important to maintain a consistent balance of visual weight while adapting designs to several size screens. I don\u2019t want my header image so tall it pushes my running text off the first screen, so I set a maximum height of <code>75vh<\/code> or three quarters the height of a small screen:<\/p>\n<pre><code>header img {\nmax-height: 75vh; }\n<\/code><\/pre>\n<p>To complete my small screen design, I establish the <code>header<\/code> as a positioning context. Then, I absolutely position the Volkswagen emblem and ensure its width will adapt to the screen by using a viewport width unit of <code>5vw<\/code>:<\/p>\n<pre><code>header {\nposition: relative; }\nh1 {\nposition: absolute;\ntop: 1rem;\nleft: 1rem;\nwidth: 5vw; }\n<\/code><\/pre>\n<p>My portrait orientation image fits well into tall screens, but I need a wider format image for screens which are wider than they are tall. Orientation is a fabulous, but seldom used media query which tests the orientation of a viewport. This media query can be used in stylesheets as an alternative to more conventional width queries. It can also be applied to the <code>source<\/code> of a <code>picture<\/code> element. This query swaps my portrait image for a landscape alternative whenever width exceeds height, whether on a small phone or desktop size display:<\/p>\n<pre><code><picture>\n<source srcset=\"landscape.png\"\nmedia=\"(orientation: landscape)\">\n<img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/portrait.png?w=900\" alt=\"Volkswagen Beetle\">\n<\/picture>\n<\/code><\/pre>\n<p>For my alternative landscape design, I use Grid to place the <code>header<\/code>, <code>main<\/code>, and <code>aside<\/code> elements. There are several options for placing these elements \u2014 including columns and rows, and template areas \u2014 but I\u2019ve chosen to use <code>grid-template-columns<\/code> to define a symmetrical two-column grid on the <code>body<\/code>. I apply the linear gradient again and set its minimum height to the match the full viewport:<\/p>\n<pre><code>@media screen and (orientation: landscape) {\nbody {\ndisplay: grid;\ngrid-template-columns: [main] 1fr [aside] 1fr;\nmin-height: 100vh;\nbackground-image: linear-gradient(\nto right,\n#444 0%,\n#444 50%,\n#fff 50%,\n#fff 100%); }\n}\n<\/code><\/pre>\n<p>In landscape orientation, my <code>header<\/code> fills the entire width of the screen. As I no longer need the linear gradient background image on this element, I can simply remove it:<\/p>\n<pre><code>header {\ngrid-column: 1 \/ -1;\nbackground-image: none; }\n<\/code><\/pre>\n<p>Now, because this grid is so simple, I place my <code>main<\/code> and <code>aside<\/code> elements onto the grid using named lines:<\/p>\n<pre><code>main {\ngrid-column: main; }\naside {\ngrid-column: aside; }\n<\/code><\/pre>\n<p>The end result is a design which adapts its layout depending on whether a browser or device screen is in landscape or portrait orientation.<\/p>\n<blockquote>\n<h5>Comic Book Art<\/h5>\n<p><a href=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/issue-5-11-inspired-design-decisions-bea-feitler.png\"><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/issue-5-11-inspired-design-decisions-bea-feitler.png?w=300\"  alt=\"Comic Book Art\"><\/a>Bea Feitler regularly combined photographs with illustrations, and comic book art appears in work throughout her career.<\/p>\n<p>For Harper\u2019s Bazaar, she placed one of Avedon\u2019s photographs of Jean Shrimpton wearing a spacesuit onto a comic book background. Later, she commissioned legendary comic artist Marie Severin to create this cover for Ms. Magazine in 1973.<\/p>\n<\/blockquote>\n<h4>Emphasize Scale<\/h4>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/7019356d-912e-4c02-a215-986c82f08a63\/issue-5-12-inspired-design-decisions-bea-feitler.jpg?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/issue-5-12-inspired-design-decisions-bea-feitler.jpg 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/7019356d-912e-4c02-a215-986c82f08a63\/issue-5-12-inspired-design-decisions-bea-feitler.jpg 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/7019356d-912e-4c02-a215-986c82f08a63\/issue-5-12-inspired-design-decisions-bea-feitler.jpg 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/7019356d-912e-4c02-a215-986c82f08a63\/issue-5-12-inspired-design-decisions-bea-feitler.jpg 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/7019356d-912e-4c02-a215-986c82f08a63\/issue-5-12-inspired-design-decisions-bea-feitler.jpg 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/issue-5-12-inspired-design-decisions-bea-feitler.jpg?w=900\" sizes=\"100vw\" alt=\"The Foot and the Ferrari.' Spread from Harper\u2019s Bazaar, March 1967. Photography by Bill Silano. Art direction by Bea Feitler and Ruth Ansel.\"><\/a><figcaption>\n      &#8216;The Foot and the Ferrari.&#8217; Spread from Harper\u2019s Bazaar, March 1967. Photography by Bill Silano. Art direction by Bea Feitler and Ruth Ansel. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/7019356d-912e-4c02-a215-986c82f08a63\/issue-5-12-inspired-design-decisions-bea-feitler.jpg\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/287e4d6d-9d06-4be7-a56a-ea757ae387af\/issue-5-13-inspired-design-decisions-bea-feitler.png?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/issue-5-13-inspired-design-decisions-bea-feitler.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/287e4d6d-9d06-4be7-a56a-ea757ae387af\/issue-5-13-inspired-design-decisions-bea-feitler.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/287e4d6d-9d06-4be7-a56a-ea757ae387af\/issue-5-13-inspired-design-decisions-bea-feitler.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/287e4d6d-9d06-4be7-a56a-ea757ae387af\/issue-5-13-inspired-design-decisions-bea-feitler.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/287e4d6d-9d06-4be7-a56a-ea757ae387af\/issue-5-13-inspired-design-decisions-bea-feitler.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/issue-5-13-inspired-design-decisions-bea-feitler.png?w=900\" sizes=\"100vw\" alt=\"This design, inspired by 'The Foot and the Ferrari.' uses a CSS background-image gradient and the object-fit property.\"><\/a><figcaption>\n      This design, inspired by &#8216;The Foot and the Ferrari.&#8217; uses a CSS background-image gradient and the object-fit property. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/287e4d6d-9d06-4be7-a56a-ea757ae387af\/issue-5-13-inspired-design-decisions-bea-feitler.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>The Volkswagen Beetle was a small car with a big personality. I want my next design to have a character to match. The large screen design uses an enormous picture of the Beetle\u2019s wheel to emphasize the smallness of that little car. But, before I get to large screens, I want to make sure I maintain a similar contrast in scale on small screens.<\/p>\n<p>Three structural elements make up the markup I need to implement this design; a <code>header<\/code> for the large wheel picture, a <code>figure<\/code> which contain the smaller image of the car, and a main for my running text. As the <code>header<\/code> has no meaning for anyone who uses a screen reader, I choose to hide it by using an <code>aria-hidden<\/code> attribute:<\/p>\n<pre><code><header aria-hidden=\"true\">\n<img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/header.png?w=900\" alt=\"\">\n<\/header>\n\n<figure>\n<img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/figure.png?w=900\" alt=\"Volkswagen Beetle\">\n<\/figure>\n\n<main>\u2026<\/main>\n<\/code><\/pre>\n<p>Foundation styles and normal flow take care of most aspects of my small screen design, but that doesn\u2019t mean I can ignore what makes it the overall concept distinctive; the contrast between the large wheel and the small Volkswagen. To ensure my <code>header<\/code> always occupies one-third of the viewport height with identical whitespace between it and my content, I use viewport height units for both height and margin:<\/p>\n<pre><code>header {\nmargin-bottom: 33vh;\nheight: 33vh; }\n<\/code><\/pre>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/d852ef34-76c0-48be-a2ff-c949d25f15cf\/issue-5-14-inspired-design-decisions-bea-feitler.png?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/issue-5-14-inspired-design-decisions-bea-feitler.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/d852ef34-76c0-48be-a2ff-c949d25f15cf\/issue-5-14-inspired-design-decisions-bea-feitler.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/d852ef34-76c0-48be-a2ff-c949d25f15cf\/issue-5-14-inspired-design-decisions-bea-feitler.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/d852ef34-76c0-48be-a2ff-c949d25f15cf\/issue-5-14-inspired-design-decisions-bea-feitler.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/d852ef34-76c0-48be-a2ff-c949d25f15cf\/issue-5-14-inspired-design-decisions-bea-feitler.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/issue-5-14-inspired-design-decisions-bea-feitler.png?w=900\" sizes=\"100vw\" alt=\"This wheel is easily distorted, giving the Beetle an unintentional flat tyre. Right: Using object-fit restores the roundness of my wheel.\"><\/a><figcaption>\n      This wheel is easily distorted, giving the Beetle an unintentional flat tyre. Right: Using object-fit restores the roundness of my wheel. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/d852ef34-76c0-48be-a2ff-c949d25f15cf\/issue-5-14-inspired-design-decisions-bea-feitler.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>One problem I often encounter when developing flexible layouts is the unintentional resizing of images. With a fixed height on my <code>header<\/code> and <code>100%<\/code> width on its image, the giant wheel can distort. Fortunately, there\u2019s a way to preserve its aspect ratio using the <code>object-fit<\/code> property. There are four possible options, plus <code>none<\/code>:<\/p>\n<ol>\n<li><code>contain<\/code><br \/>\nPreserves an image\u2019s aspect ratio while fitting inside a parent\u2019s content box.<\/li>\n<li><code>cover<\/code><br \/>\nPreserves an image\u2019s aspect ratio but this time fills the whole box. When this happens, parts of the image outside the content box will be hidden.<\/li>\n<li><code>fill<\/code><br \/>\nAn image will be distorted so its width and height match its parent.<\/li>\n<li><code>scale-down<\/code><br \/>\nSimilar to contain, reduces the size of an image or video to fit inside its parent.<\/li>\n<\/ol>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/c1cce778-b540-451b-83ef-08902209efbb\/issue-5-15-inspired-design-decisions-bea-feitler.png?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/issue-5-15-inspired-design-decisions-bea-feitler.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/c1cce778-b540-451b-83ef-08902209efbb\/issue-5-15-inspired-design-decisions-bea-feitler.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/c1cce778-b540-451b-83ef-08902209efbb\/issue-5-15-inspired-design-decisions-bea-feitler.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/c1cce778-b540-451b-83ef-08902209efbb\/issue-5-15-inspired-design-decisions-bea-feitler.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/c1cce778-b540-451b-83ef-08902209efbb\/issue-5-15-inspired-design-decisions-bea-feitler.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/issue-5-15-inspired-design-decisions-bea-feitler.png?w=900\" sizes=\"100vw\" alt=\"Left\u2013right: contain, cover, fill, and scale-down. The object-position property often goes hand in hand with object-fit. It allows precise positioning of an element within its parent\u2019s content box.\"><\/a><figcaption>\n      Left\u2013right: contain, cover, fill, and scale-down. The object-position property often goes hand in hand with object-fit. It allows precise positioning of an element within its parent\u2019s content box. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/c1cce778-b540-451b-83ef-08902209efbb\/issue-5-15-inspired-design-decisions-bea-feitler.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>I want my large wheel to fill the header completely without altering its aspect ratio. I\u2019m also not concerned some parts of the image will be clipped, which makes <code>cover<\/code> the right choice for <code>object-fit<\/code>:<\/p>\n<pre><code>header img {\nobject-fit: cover;\nobject-position: center bottom;\nwidth: 100%;\nheight: 100%; }\n<\/code><\/pre>\n<p>Now the wheel image is in position, I provide scale by contrasting its large size with a small image of the whole car. I restrict the Beetle\u2019s maximum size to half the viewport width and centre it horizontally using its margins:<\/p>\n<pre><code>figure {\nmargin: 0 auto;\nmax-width: 50vw; }\n<\/code><\/pre>\n<p>This design uses a solid grey background to represent the road, so I add a background color and move the <code>figure<\/code> down by <code>10px<\/code>, so the Beetle\u2019s wheels sit firmly on the tarmac:<\/p>\n<pre><code>main {\npadding: 2rem;\nbackground-color: #f0f0f1; }\n\nfigure {\ntransform: translateY(10px); }\n<\/code><\/pre>\n<p>Bigger screens provide an opportunity to make a big impression, and for this design, I want the <code>header<\/code> image to occupy half the width and the full height of a large screen. I apply the same 6+4 compound grid I\u2019ve used for many designs in this series. It has eight columns to which I add three rows. I give the middle and bottom rows a fixed height and allow the first row to occupy all remaining vertical space:<\/p>\n<pre><code>@media screen and (min-width : 64em) {\nbody {\ndisplay: grid;\ngrid-template-columns: 2fr 1fr 1fr 2fr 2fr 1fr 1fr 2fr;\ngrid-template-rows: 1fr 155px 155px;\ngrid-column-gap: 2vw; }\n}\n<\/code><\/pre>\n<p>I want the <code>body<\/code> to always fill the full viewport height, so I apply a minimum height of <code>100vh<\/code> and use a linear gradient to create the illusion of a road:<\/p>\n<pre><code>body {\nmin-height: 100vh;\nbackground-image: linear-gradient(\nto top,\n#f0f0f1 0%,\n#f0f0f1 155px,\n#fff 155px,\n#fff 100%); }\n<\/code><\/pre>\n<p>Using line numbers, I place the <code>header<\/code> on the grid, so it occupies half the columns and all the rows. The alignment of the small <code>figure<\/code> places it at the end of its grid module. Then, the <code>main<\/code> forms a single narrow column of running text:<\/p>\n<pre><code>header {\ngrid-column: 5 \/ -1;\ngrid-row: 1 \/ 4;\nmargin-bottom: 0;\nheight: auto;\nbackground-color: #444; }\n\nfigure {\ngrid-column: 1 \/ 4;\ngrid-row: 2;\nalign-self: end;\nmax-width: auto; }\n\nmain {\ngrid-column: 4;\ngrid-row: 1 \/ 3;\nalign-self: center;\nbackground-color: transparent; }\n<\/code><\/pre>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/1b12ba16-071b-4a78-94b1-46e68008cf87\/issue-5-16-inspired-design-decisions-bea-feitler.png?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/issue-5-16-inspired-design-decisions-bea-feitler.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/1b12ba16-071b-4a78-94b1-46e68008cf87\/issue-5-16-inspired-design-decisions-bea-feitler.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/1b12ba16-071b-4a78-94b1-46e68008cf87\/issue-5-16-inspired-design-decisions-bea-feitler.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/1b12ba16-071b-4a78-94b1-46e68008cf87\/issue-5-16-inspired-design-decisions-bea-feitler.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/1b12ba16-071b-4a78-94b1-46e68008cf87\/issue-5-16-inspired-design-decisions-bea-feitler.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/issue-5-16-inspired-design-decisions-bea-feitler.png?w=900\" sizes=\"100vw\" alt=\"In this alternative design, I preserve the difference in scale between both pictures across fluid screen sizes using CSS Grid.\"><\/a><figcaption>\n      In this alternative design, I preserve the difference in scale between both pictures across fluid screen sizes using CSS Grid. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/1b12ba16-071b-4a78-94b1-46e68008cf87\/issue-5-16-inspired-design-decisions-bea-feitler.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>Knowing how scale influences someone\u2019s understanding of a story is essential to telling it well. Sheer size is rarely enough on its own, so to make a significant impact, largeness must be relative to the size of other elements.<\/p>\n<p>Bea Feitler understood scale and used it well. She often contrasted large foreground elements with smaller ones in the background to create designs which contained incredible depth. We can now follow in her footsteps by using scale to add impact to product and websites designs.<\/p>\n<div><\/div>\n<h4>Confident Color Choices<\/h4>\n<p>Bea Feitler\u2019s confident choice of colors was one of the hallmarks of her work, and it attracted me immediately. For my next Feitler-inspired design, I contrast a deep red with a vibrant yellow and reverse those colors on both sides of the design.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/95422bba-f293-4325-80d9-ac58731a95de\/issue-5-19-inspired-design-decisions-bea-feitler.png?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/issue-5-19-inspired-design-decisions-bea-feitler.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/95422bba-f293-4325-80d9-ac58731a95de\/issue-5-19-inspired-design-decisions-bea-feitler.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/95422bba-f293-4325-80d9-ac58731a95de\/issue-5-19-inspired-design-decisions-bea-feitler.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/95422bba-f293-4325-80d9-ac58731a95de\/issue-5-19-inspired-design-decisions-bea-feitler.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/95422bba-f293-4325-80d9-ac58731a95de\/issue-5-19-inspired-design-decisions-bea-feitler.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/issue-5-19-inspired-design-decisions-bea-feitler.png?w=900\" sizes=\"100vw\" alt=\"Left: Spread from Harper\u2019s Bazaar, August 1966. Photography by Hiro. Art direction by Ruth Ansel and Bea Feitler. Right: This design uses CSS Grid and Flexbox.\"><\/a><figcaption>\n      Left: Spread from Harper\u2019s Bazaar, August 1966. Photography by Hiro. Art direction by Ruth Ansel and Bea Feitler. Right: This design uses CSS Grid and Flexbox. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/95422bba-f293-4325-80d9-ac58731a95de\/issue-5-19-inspired-design-decisions-bea-feitler.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>While this page is big on color, it is also small on markup. I need just two structural elements; a <code>header<\/code> and <code>main<\/code>. Inside both are a <code>figure<\/code> and a division:<\/p>\n<pre><code><header>\n<figure>\u2026<\/figure>\n<div>\u2026<\/div>\n<\/header>\n\n<main>\n<figure>\u2026<\/figure>\n<div>\u2026<\/div>\n<\/main>\n<\/code><\/pre>\n<p>Background and text colors are the starting point for implementing this design. I can leave everything else to the normal flow:<\/p>\n<pre><code>body {\nbackground-color: #ba0e37;\ncolor: #f8d72e; }\n\nmain {\nbackground-color: #f8d72e;\ncolor: #272732; }\n<\/code><\/pre>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/1ce6ac95-1427-4fb9-b01e-da70a934be0c\/issue-5-21-inspired-design-decisions-bea-feitler.png?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/issue-5-21-inspired-design-decisions-bea-feitler.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/1ce6ac95-1427-4fb9-b01e-da70a934be0c\/issue-5-21-inspired-design-decisions-bea-feitler.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/1ce6ac95-1427-4fb9-b01e-da70a934be0c\/issue-5-21-inspired-design-decisions-bea-feitler.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/1ce6ac95-1427-4fb9-b01e-da70a934be0c\/issue-5-21-inspired-design-decisions-bea-feitler.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/1ce6ac95-1427-4fb9-b01e-da70a934be0c\/issue-5-21-inspired-design-decisions-bea-feitler.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/issue-5-21-inspired-design-decisions-bea-feitler.png?w=900\" sizes=\"100vw\" alt=\"I change the layout across screen sizes while maintaining a constistent look and feel.\"><\/a><figcaption>\n      I change the layout across screen sizes while maintaining a constistent look and feel. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/1ce6ac95-1427-4fb9-b01e-da70a934be0c\/issue-5-21-inspired-design-decisions-bea-feitler.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>For medium-size screens, I want the figures and divisions inside my <code>header<\/code> and <code>main<\/code> to occupy half the height and width of any viewport, so I apply a symmetrical two-column grid and a minimum height:<\/p>\n<pre><code>@media screen and (min-width : 48em) {\nheader, main {\ndisplay: grid;\ngrid-template-columns: 1fr 1fr;\nmin-height: 50vh; }\n}\n<\/code><\/pre>\n<p>I place the header\u2019s <code>figure<\/code> in the second column and the division in the first. Because this is the opposite of the content order, I need to assign both to the same row to avoid one column dropping below the other:<\/p>\n<pre><code>header figure {\ngrid-column: 2;\n\nheader div {\ngrid-column: 1;\ngrid-row: 1; }\n<\/code><\/pre>\n<p>The main element\u2019s <code>figure<\/code> and division follow the content order, so I needn\u2019t specify a <code>grid-row<\/code> for them:<\/p>\n<pre><code>main figure {\ngrid-column: 1;\nalign-self: end; }\nmain div {\ngrid-column: 2; }\n<\/code><\/pre>\n<p>I want to fill screens with color from edge to edge. For larger screens, I apply asymmetrical two-column grid which extends the full height of my <code>body<\/code>:<\/p>\n<pre><code>@media screen and (min-width : 64em) {\nbody {\ndisplay: grid;\ngrid-template-columns: 1fr 1fr;\nmin-height: 100vh; }\n}\n<\/code><\/pre>\n<p>In this large-screen design, the <code>figure<\/code> and division in my <code>header<\/code> and <code>main<\/code> stack vertically instead of horizontally. I change the <code>display<\/code> property from <code>grid<\/code> to <code>flex<\/code> and set the direction to <code>column<\/code>. But, the visual order of the <code>main<\/code> is opposite to its content order, so I change its direction from column to column-reverse:<\/p>\n<pre><code>header, main {\ndisplay: flex;\nflex-direction: column; }\n\nmain {\nflex-direction: column-reverse; }\n<\/code><\/pre>\n<p>Then, to improve the readability of my running text, I use multi-column layout and specify a column width of <code>18em<\/code>. A browser will generate as many columns of that width as will fit inside its parent element:<\/p>\n<pre><code>main div {\ncolumn-width: 18em;\ncolumn-gap: 2vw; }\n<\/code><\/pre>\n<p>Large blocks of solid color can be tiring for the eye, so I want to break them up by adding a playful, repeating background image pattern to the <code>body<\/code> using SVG:<\/p>\n<pre><code>body {\nbackground-image: url(\"data:image\/svg+xml\"); }\n<\/code><\/pre>\n<p>Within the SVG, I specify both the fill color and set a low fill opacity for a subtle effect:<\/p>\n<pre><code>fill='#f8d72e'\nfill-opacity='0.1'\n<\/code><\/pre>\n<p>I apply the same SVG image to the yellow background of my <code>main<\/code>, this time changing its fill color to white and increasing the <code>fill-opacity<\/code>:<\/p>\n<pre><code>main {\nbackground-image: url(\"data:image\/svg+xml\"); }\n\nfill='#fff'\nfill-opacity='0.2'\n<\/code><\/pre>\n<p>Pattern and texture play a big part in many of Bea Feitler\u2019s iconic magazine spreads, and yet they\u2019ve fallen out of favor on the web. Next, I\u2019ll show you how to use CSS and SVG patterns which will add depth to your designs.<\/p>\n<h4>Pattern And Texture Adds Depth<\/h4>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/d6359cad-7738-46ba-9154-46919dd0e96e\/issue-5-23-inspired-design-decisions-bea-feitler.png?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/issue-5-23-inspired-design-decisions-bea-feitler.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/d6359cad-7738-46ba-9154-46919dd0e96e\/issue-5-23-inspired-design-decisions-bea-feitler.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/d6359cad-7738-46ba-9154-46919dd0e96e\/issue-5-23-inspired-design-decisions-bea-feitler.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/d6359cad-7738-46ba-9154-46919dd0e96e\/issue-5-23-inspired-design-decisions-bea-feitler.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/d6359cad-7738-46ba-9154-46919dd0e96e\/issue-5-23-inspired-design-decisions-bea-feitler.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/issue-5-23-inspired-design-decisions-bea-feitler.png?w=900\" sizes=\"100vw\" alt=\"Left: Spread from Vanity Fair. Right: This design uses a CSS blend modes, clip-path, and SVG patterns.\"><\/a><figcaption>\n      Left: Spread from Vanity Fair. Right: This design uses a CSS blend modes, clip-path, and SVG patterns. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/d6359cad-7738-46ba-9154-46919dd0e96e\/issue-5-23-inspired-design-decisions-bea-feitler.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>In this next Feitler-inspired design, I want to convey the curvaceousness of the Volkswagen Beetle by using circles. I need minimal HTML to implement this shapely design, just three elements; a <code>header<\/code>, <code>main<\/code> and <code>aside<\/code>:<\/p>\n<pre><code><header aria-hidden=\"true\">\n<picture>\u2026<\/picture>\n<\/header>\n\n<aside>\n<div><img><\/div>\n<div><img><\/div>\n<\/aside>\n\n<main>\n<h1 aria-labelledby=\"Volkswagen logo\">\n<svg>\u2026<\/svg>\n<\/h1>\n<p>\u2026<\/p>\n<\/main>\n<\/code><\/pre>\n<p>I don\u2019t want the <code>header<\/code> announced by screen readers, so I add an <code>aria-hidden<\/code> attribute with a value of <code>true<\/code>. I do want screen readers to describe my top-level heading, so I add an <code>aria-labelledby<\/code> attribute to that.<\/p>\n<p>Half-tone style dots add texture to this page, and it\u2019s easy to implement patterns like this using multiple background gradients, and combinations of <code>background-size<\/code> and <code>background-position<\/code>:<\/p>\n<pre><code>body {\nbackground-color: #ba0e37;\ncolor: #fff;\nbackground-image:\nradial-gradient(rgba(255,255,255,.25) 15%, transparent 16%),\nradial-gradient(rgba(255,255,255,.25) 15%, transparent 16%);\nbackground-size: 6vw 6w;\nbackground-position: 0 0, 3vw 3vw; }\n<\/code><\/pre>\n<p>I\u2019ll break this style into three steps:<\/p>\n<ol>\n<li>Two radial gradients, separated by a comma. Each gradient includes two color steps, the first at <code>15%<\/code>, and the second at <code>16%<\/code> which form the dots.<\/li>\n<li>By using viewport width units to size the resulting pattern, I keep the dot size proportionate to the page width.<\/li>\n<li>Position the first radial gradient to the top left of the viewport (<code>0 0<\/code>), and the second using viewport width units which are half the background sizes.<\/li>\n<\/ol>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/64fdecf1-e4f7-43ed-8f59-4da19b11fb54\/issue-5-25-inspired-design-decisions-bea-feitler.png?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/issue-5-25-inspired-design-decisions-bea-feitler.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/64fdecf1-e4f7-43ed-8f59-4da19b11fb54\/issue-5-25-inspired-design-decisions-bea-feitler.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/64fdecf1-e4f7-43ed-8f59-4da19b11fb54\/issue-5-25-inspired-design-decisions-bea-feitler.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/64fdecf1-e4f7-43ed-8f59-4da19b11fb54\/issue-5-25-inspired-design-decisions-bea-feitler.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/64fdecf1-e4f7-43ed-8f59-4da19b11fb54\/issue-5-25-inspired-design-decisions-bea-feitler.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/issue-5-25-inspired-design-decisions-bea-feitler.png?w=900\" sizes=\"100vw\" alt=\"Four linear and radial gradient background image patterns.\"><\/a><figcaption>\n      Four linear and radial gradient background image patterns. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/64fdecf1-e4f7-43ed-8f59-4da19b11fb54\/issue-5-25-inspired-design-decisions-bea-feitler.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p><a href=\"http:\/\/lea.verou.me\/\">Lea Verou<\/a> has been busy compiling a gallery of useful <a href=\"https:\/\/leaverou.github.io\/css3patterns\/\">patterns<\/a> which she developed using linear and radial gradients. As clever as Lea\u2019s gallery is, there\u2019s something about convoluted gradients being used to produce image-like patterns which bother me.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/7ab2ea52-2f74-47b1-b684-334a2b882a6d\/issue-5-26-inspired-design-decisions-bea-feitler.png?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/issue-5-26-inspired-design-decisions-bea-feitler.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/7ab2ea52-2f74-47b1-b684-334a2b882a6d\/issue-5-26-inspired-design-decisions-bea-feitler.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/7ab2ea52-2f74-47b1-b684-334a2b882a6d\/issue-5-26-inspired-design-decisions-bea-feitler.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/7ab2ea52-2f74-47b1-b684-334a2b882a6d\/issue-5-26-inspired-design-decisions-bea-feitler.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/7ab2ea52-2f74-47b1-b684-334a2b882a6d\/issue-5-26-inspired-design-decisions-bea-feitler.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/issue-5-26-inspired-design-decisions-bea-feitler.png?w=900\" sizes=\"100vw\" alt=\"SVG patterns from Hero Patterns by Steve Schoger.\"><\/a><figcaption>\n      SVG patterns from <a href=\"https:\/\/www.heropatterns.com\/\">Hero Patterns<\/a> by Steve Schoger. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/7ab2ea52-2f74-47b1-b684-334a2b882a6d\/issue-5-26-inspired-design-decisions-bea-feitler.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>SVG patterns seem much more appropriate. They\u2019re just as lightweight and are far more flexible. Add SVG to a background image using a URL, and if you\u2019re concerned about HTTP requests, embed an SVG into a stylesheet as a <code>data:image<\/code>:<\/p>\n<pre><code>body {\nbackground-image: url(\"data:image\/svg+xml\"); }\n<\/code><\/pre>\n<p>The <code>aside<\/code> in this design includes two divisions which each contain pictures of the Beetle\u2019s fabulous front. I clip those divisions into circles to compliment its curves:<\/p>\n<pre><code>aside div {\n-webkit-clip-path: circle();\nclip-path: circle(); }\n<\/code><\/pre>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/fbf71743-b4ab-4180-afed-6537557b7c0e\/issue-5-27-inspired-design-decisions-bea-feitler.png?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/issue-5-27-inspired-design-decisions-bea-feitler.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/fbf71743-b4ab-4180-afed-6537557b7c0e\/issue-5-27-inspired-design-decisions-bea-feitler.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/fbf71743-b4ab-4180-afed-6537557b7c0e\/issue-5-27-inspired-design-decisions-bea-feitler.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/fbf71743-b4ab-4180-afed-6537557b7c0e\/issue-5-27-inspired-design-decisions-bea-feitler.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/fbf71743-b4ab-4180-afed-6537557b7c0e\/issue-5-27-inspired-design-decisions-bea-feitler.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/issue-5-27-inspired-design-decisions-bea-feitler.png?w=900\" sizes=\"100vw\" alt=\"\"><\/a><figcaption>\n      (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/fbf71743-b4ab-4180-afed-6537557b7c0e\/issue-5-27-inspired-design-decisions-bea-feitler.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>By making the pictures\u2019 backgrounds fully transparent, I can change the color of their parent divisions whenever I need to. I add slightly transparent background colors which allow hints of the dot pattern to show through:<\/p>\n<pre><code>aside div:first-child {\nbackground-color: rgba(57,135,106,.9); }\n\naside div:last-child {\nbackground-color: rgba(248,215,46,.9); }\n<\/code><\/pre>\n<p>With so much color and texture in this design, my layout needs to be simple, so I apply a two-column asymmetrical grid where the narrowest column can never shrink below 260px:<\/p>\n<pre><code>@media screen and (min-width : 64em) {\nbody {\ndisplay: grid;\ngrid-template-columns: 4fr minmax(260px, 1fr); }\n}\n<\/code><\/pre>\n<p>To improve the accessibility and readability of my paragraphs of running text against the red pattern, I add a subtle drop shadow in a color which matches my background:<\/p>\n<pre><code>p {\nfilter: drop-shadow(0 0 5px #ba0e37); }\n<\/code><\/pre>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/1736f49c-801a-4d3c-bfc7-63712d834040\/issue-5-28-inspired-design-decisions-bea-feitler.png?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/issue-5-28-inspired-design-decisions-bea-feitler.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/1736f49c-801a-4d3c-bfc7-63712d834040\/issue-5-28-inspired-design-decisions-bea-feitler.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/1736f49c-801a-4d3c-bfc7-63712d834040\/issue-5-28-inspired-design-decisions-bea-feitler.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/1736f49c-801a-4d3c-bfc7-63712d834040\/issue-5-28-inspired-design-decisions-bea-feitler.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/1736f49c-801a-4d3c-bfc7-63712d834040\/issue-5-28-inspired-design-decisions-bea-feitler.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/issue-5-28-inspired-design-decisions-bea-feitler.png?w=900\" sizes=\"100vw\" alt=\"By reducing the opacity of my header using a CSS filter, the patterned background shows through.\"><\/a><figcaption>\n      By reducing the opacity of my header using a CSS filter, the patterned background shows through. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/1736f49c-801a-4d3c-bfc7-63712d834040\/issue-5-28-inspired-design-decisions-bea-feitler.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>In the past, filtering a picture to apply a blur, color change, or drop shadow, required adding destructive effects in an image editor, but today, many of those same filters are available in CSS. You can apply filters to other HTML elements too.<\/p>\n<p>Applying a CSS filter is straightforward. First, declare the filter-function and then a value in parentheses. To reduce an element\u2019s opacity to <code>25%<\/code> using a filter \u2014 instead of the <code>opacity<\/code> property \u2014 I use the <code>opacity<\/code> filter:<\/p>\n<pre><code>.ihatetimvandamme {\nfilter: opacity(.25); }\n<\/code><\/pre>\n<p>Those values differ with each filter. Some filters use degrees, accept use pixels, percentages, or their equivalent decimal. For example, <code>.25<\/code> is equal to <code>25%<\/code>, and <code>1<\/code> is the equivalent of <code>100%<\/code>.<\/p>\n<p>There are ten stock CSS filters to choose from: <code>blur<\/code>, <code>brightness<\/code>, <code>contrast<\/code>, <code>drop-shadow<\/code>, <code>greyscale<\/code>, <code>hue-rotate<\/code>, <code>invert<\/code>, <code>opacity<\/code>, <code>saturate<\/code>, and <code>sepia<\/code>. You can also use the URL function to use a custom filter from SVG.<\/p>\n<p>I want to remove all color from my <code>header<\/code> and reduce its <code>opacity<\/code> to <code>80%<\/code>. I can combine any number of filters by separating them with a space. It\u2019s important to remember that a browser will apply filters in the order they\u2019re specified, so for my <code>header<\/code>, color will be removed before <code>opacity<\/code> is altered:<\/p>\n<pre><code>header {\nfilter: grayscale(1) opacity(.8); }\n<\/code><\/pre>\n<p>When I need a smooth shift between CSS filters and values, I can add a transition between states, perhaps by increasing the <code>opacity<\/code> of my <code>header<\/code> for an <code>:hover<\/code> pseudo-class:<\/p>\n<pre><code>header {\nfilter: grayscale(1) opacity(.8);\ntransition: filter 1s linear; }\n\nheader:hover {\nfilter: grayscale(1) opacity(1); }\n<\/code><\/pre>\n<p>I can use CSS to develop a more elaborate animation between filters by first defining my keyframes, setting filter values at any percentage between <code>0<\/code> and <code>100%<\/code> of the animation\u2019s duration:<\/p>\n<pre><code>@keyframes beetle {\n0% {\nfilter: grayscale(1) opacity(.8) blur(5px); }\n50% {\nfilter: grayscale(1) opacity(1) blur(0); }\n100% {\nfilter: grayscale(1) opacity(.8) blur(5px); }\n}\n<\/code><\/pre>\n<p>I then assign this animation to my <code>header<\/code>, using the <code>animation-name<\/code> plus values for <code>animation-duration<\/code>, <code>animation-delay<\/code>, and other optional settings:<\/p>\n<pre><code>header:hover {\nanimation-name: beetle;\nanimation-delay: 0s;\nanimation-direction: alternate;\nanimation-duration: 1s;\nanimation-fill-mode: forwards;\nanimation-iteration-count: 1;\nanimation-timing-function: linear; }\n<\/code><\/pre>\n<p><a href=\"https:\/\/una.im\/\">Una Kravets<\/a> recreated Instagram filter effects using CSS filters and blend-modes for her <a href=\"https:\/\/una.im\/CSSgram\">CSSgram<\/a> library. Building on Una\u2019s work, developer Indrashish Ghosh made <a href=\"https:\/\/cssfilters.cox\/\">cssFilters<\/a>, a tool for granular control over those Instagram-style effects, applying them to an uploaded image, and generating CSS values. Tools like Indrashish\u2019s make it as easy to use CSS filters as any image editor.<\/p>\n<p>A reaction to overly ornamental designs, flat design has been the dominant aesthetic for almost a decade. As gradients, patterns, shadows, and three-dimensional skeuomorphism fell out of fashion, designers embraced solid colors, square corners, and sharp edges.<\/p>\n<p>Anti-skeuomorphism no doubt helped designers focus on feature design and usability without the distraction of what some might still see as flourishes. But, reducing both product and website designs to a bare minimum has had unfortunate repercussions. With little to differentiate their designs, products and websites have adopted a regrettable uniformity which makes it difficult to distinguish between them.<\/p>\n<p>While I\u2019m not advocating a return to the worst excesses of skeuomorphism, I hope product and website designers will realize the value of a more vibrant approach to design; one which appreciates how design can distinguish a brand from its competition. A method which uses gradients, patterns, shadows appropriately to tell stories and provide greater affordance. This will make products and websites not only easier to use but more enjoyable too.<\/p>\n<div><\/div>\n<h4>Develop With SVG Filters<\/h4>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/d6225984-c66b-4a34-9cc9-0586b7b970f7\/issue-5-31-inspired-design-decisions-bea-feitler.png?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/issue-5-31-inspired-design-decisions-bea-feitler.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/d6225984-c66b-4a34-9cc9-0586b7b970f7\/issue-5-31-inspired-design-decisions-bea-feitler.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/d6225984-c66b-4a34-9cc9-0586b7b970f7\/issue-5-31-inspired-design-decisions-bea-feitler.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/d6225984-c66b-4a34-9cc9-0586b7b970f7\/issue-5-31-inspired-design-decisions-bea-feitler.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/d6225984-c66b-4a34-9cc9-0586b7b970f7\/issue-5-31-inspired-design-decisions-bea-feitler.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/issue-5-31-inspired-design-decisions-bea-feitler.png?w=900\" sizes=\"100vw\" alt=\"Left: Spread from Harper\u2019s Bazaar. Right: This design uses CSS Flexbox and Grid, and SVG filters.\"><\/a><figcaption>\n      Left: Spread from Harper\u2019s Bazaar. Right: This design uses CSS Flexbox and Grid, and SVG filters. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/d6225984-c66b-4a34-9cc9-0586b7b970f7\/issue-5-31-inspired-design-decisions-bea-feitler.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>For this final inspired design, I need just two structural elements; a <code>header<\/code> which contains six brightly colored Beetles, and a <code>main<\/code> for my text:<\/p>\n<pre><code><header>\n<div><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/car-red.png?w=900\" alt=\"\"><\/div>\n<div><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/car-green.png?w=900\" alt=\"\"><\/div>\n<div><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/car-cyan.png?w=900\" alt=\"\"><\/div>\n<div><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/car-magenta.png?w=900\" alt=\"\"><\/div>\n<div><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/car-yellow.png?w=900\" alt=\"\"><\/div>\n<div><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/car-black.png?w=900\" alt=\"\"><\/div>\n<\/header>\n\n<main>\u2026<\/main>\n<\/code><\/pre>\n<p>Normal flow takes care of most of this design for small screens, but that doesn\u2019t mean there\u2019s nothing to do. I would lose the impact of those colorful cars if I were to shrink them all to fit a small screen. I also don\u2019t want people to scroll past all six before they see my content, so my solution is to line them up horizontally in a scrolling panel.<\/p>\n<p>Flexbox is the obvious choice for arranging those images, but the default left-right order would mean showing the back of the final car, instead of the front of the first. This is easily solved by changing the <code>flex-direction<\/code> from the default <code>row<\/code> to <code>row-reverse<\/code>:<\/p>\n<pre><code>header {\ndisplay: flex;\ndirection: row-reverse;\nmax-width: 100%;\noverflow-x: scroll; }\n<\/code><\/pre>\n<p>I want all these cars to appear at the same size, so I use the <code>flex-grow<\/code> property and a value of <code>1<\/code>. As I want to show the front of each car to indicate there\u2019s more to see outside the viewport, I set the <code>flex-basis<\/code> value to <code>80%<\/code>;<\/p>\n<pre><code>header div {\nflex-grow: 1;\nflex-grow: 0;\nflex-basis: 80%;\n\/* flex: 1 0 80%; *\/  }\n<\/code><\/pre>\n<p>On medium-size screens, there\u2019s space for a more elaborate layout for my collection of cars. For this design, I arrange my Beetles on an 8&#215;12 modular grid, where each module is a 16:9 aspect ratio rectangle. The black Beetle furthest away from the viewer occupies a single module, and the cars appear progressively larger until the red Beetle in the foreground occupies the largest spacial zone.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/32b4b650-a493-401f-9a43-1cc5779ab6e5\/issue-5-33-inspired-design-decisions-bea-feitler.png?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/issue-5-33-inspired-design-decisions-bea-feitler.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/32b4b650-a493-401f-9a43-1cc5779ab6e5\/issue-5-33-inspired-design-decisions-bea-feitler.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/32b4b650-a493-401f-9a43-1cc5779ab6e5\/issue-5-33-inspired-design-decisions-bea-feitler.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/32b4b650-a493-401f-9a43-1cc5779ab6e5\/issue-5-33-inspired-design-decisions-bea-feitler.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/32b4b650-a493-401f-9a43-1cc5779ab6e5\/issue-5-33-inspired-design-decisions-bea-feitler.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/issue-5-33-inspired-design-decisions-bea-feitler.png?w=900\" sizes=\"100vw\" alt=\"\"><\/a><figcaption>\n      Left: On small screens, I arrange my cars in a horizontally scrolling panel. Right: For medium screens, I place my Beetles on a modular grid. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/32b4b650-a493-401f-9a43-1cc5779ab6e5\/issue-5-33-inspired-design-decisions-bea-feitler.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>To implement this modular grid, I apply Grid to my header element, followed by eight repeating evenly sized columns, and twelve rows which adapt to the minimum height of their content. By aligning the items to the <code>end<\/code>, rather than the <code>start<\/code>, of each row, the result looks more realistic:<\/p>\n<pre><code>@media screen and (min-width : 48em) {\nheader {\ndisplay: grid;\ngrid-template-columns: repeat(8, 1fr);\ngrid-template-rows: repeat(12, min-content);\ngrid-row-gap: 10px;\nalign-items: end; }\n}\n<\/code><\/pre>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/96be4c14-77bb-4d93-832e-6486797576bb\/issue-5-35-inspired-design-decisions-bea-feitler.png?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/issue-5-35-inspired-design-decisions-bea-feitler.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/96be4c14-77bb-4d93-832e-6486797576bb\/issue-5-35-inspired-design-decisions-bea-feitler.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/96be4c14-77bb-4d93-832e-6486797576bb\/issue-5-35-inspired-design-decisions-bea-feitler.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/96be4c14-77bb-4d93-832e-6486797576bb\/issue-5-35-inspired-design-decisions-bea-feitler.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/96be4c14-77bb-4d93-832e-6486797576bb\/issue-5-35-inspired-design-decisions-bea-feitler.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/issue-5-35-inspired-design-decisions-bea-feitler.png?w=900\" sizes=\"100vw\" alt=\"\"><\/a><figcaption>\n      Left: An 8&#215;12 modular grid for medium screens. Right: I change the layout and proportions on large screens by switching to a 16&#215;12 grid. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/96be4c14-77bb-4d93-832e-6486797576bb\/issue-5-35-inspired-design-decisions-bea-feitler.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>My next task is to place each Beetle onto the grid. I use a combination of child (<code>><\/code>) and <code>nth-child<\/code> selectors to place each element using line numbers:<\/p>\n<pre><code>header > :nth-child(1) {\ngrid-column: 3 \/ -1;\ngrid-row: 10 \/ -1; }\n\nheader > :nth-of-type(2) {\ngrid-column: 3 \/ 7;\ngrid-row: 7 \/ 9; }\n\nheader > :nth-of-type(3) {\ngrid-column: 1 \/ 4;\ngrid-row: 5 \/ 7; }\n\nheader > :nth-of-type(4) {\ngrid-column: 2 \/ 4;\ngrid-row: 3; }\n\nheader > :nth-of-type(5) {\ngrid-column: 6 \/ 8;\ngrid-row: 2; }\n\nheader > :nth-of-type(6) {\ngrid-column: 3;\ngrid-row: 1; }\n<\/code><\/pre>\n<p>A design like this cries out for typographic details. Padding on the main element adds space around my running text, so to add interest to my type, I set column widths of <code>24em<\/code>, and a browser will automatically create the right number of columns to fit the viewport:<\/p>\n<pre><code>p {\ncolumn-width: 24em;\ncolumn-gap: 2vw; }\n<\/code><\/pre>\n<p>To add extra interest to my type, I combine a <code>first-of-type<\/code> pseudo-class selector with a <code>first-line<\/code> pseudo-element to transform that first line into uppercase letters:<\/p>\n<pre><code>p:first-of-type::first-line {\ntext-transform: uppercase; }\n<\/code><\/pre>\n<p>To implement my design for larger screens, I double the number of columns from eight to sixteen and reposition my images to the new line numbers:<\/p>\n<pre><code>@media screen and (min-width : 64em) {\nheader {\ngrid-template-columns: repeat(16, 1fr); }\n\nheader > :nth-child(1) {\ngrid-column: 8 \/ 15;\ngrid-row: 9 \/ 13; }\n\nheader > :nth-of-type(2) {\ngrid-column: 6 \/ 11;\ngrid-row: 5 \/ 8; }\n\nheader > :nth-of-type(3) {\ngrid-column: 1 \/ 5;\ngrid-row: 4 \/ 6; }\n\nheader > :nth-of-type(4) {\ngrid-column: 4 \/ 6;\ngrid-row: 3; }\n\nheader > :nth-of-type(5) {\ngrid-column: 11;\ngrid-row: 2; }\n\nheader > :nth-of-type(6) {\ngrid-column: 5;\ngrid-row: 1; }\n}\n<\/code><\/pre>\n<p>Compared to today\u2019s Beetle \u2014 which weighs almost 3000lbs \u2014 the Volkswagen Type 1 was a lightweight and speedy little car for its time. I\u2019d like to create the impression these cars are speeding past the viewer by adding motion blur. Blurring an element using a CSS filter is straightforward:<\/p>\n<pre><code>header > div {\nfilter: blur(5px); }\n<\/code><\/pre>\n<p>This filter allows me to blur an element by any amount using several length values, including pixels which seem to me to be the most appropriate unit. But, CSS filters only allow me to blur an element using the same amount horizontally and vertically, much like an image editor\u2019s Gaussian blur. To add realistic motion to my design, I need to swap CSS for an SVG filter.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/fe4c80ce-c840-430a-a9d2-4e1de621c22b\/issue-5-37-inspired-design-decisions-bea-feitler.png?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/issue-5-37-inspired-design-decisions-bea-feitler.png 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/fe4c80ce-c840-430a-a9d2-4e1de621c22b\/issue-5-37-inspired-design-decisions-bea-feitler.png 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/fe4c80ce-c840-430a-a9d2-4e1de621c22b\/issue-5-37-inspired-design-decisions-bea-feitler.png 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/fe4c80ce-c840-430a-a9d2-4e1de621c22b\/issue-5-37-inspired-design-decisions-bea-feitler.png 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/fe4c80ce-c840-430a-a9d2-4e1de621c22b\/issue-5-37-inspired-design-decisions-bea-feitler.png 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/issue-5-37-inspired-design-decisions-bea-feitler.png?w=900\" sizes=\"100vw\" alt=\"\"><\/a><figcaption>\n      Left: A uniform CSS blur filter with equal horizontal and vertical values. Right: Two gaussian blur values in SVG create a more realistic motion blur. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/fe4c80ce-c840-430a-a9d2-4e1de621c22b\/issue-5-37-inspired-design-decisions-bea-feitler.png\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>I cover just a small amount of detail about SVG filters in this issue, but SVG expert Sara Soueidan has written about them extensively. Start with Sara\u2019s <a href=\"https:\/\/tympanus.net\/codrops\/2019\/01\/15\/svg-filters-101\">SVG Filters 101<\/a> tutorial.<\/p>\n<p>While its ten stock filters are a relatively recent addition to CSS, their history goes way back to their  SVG origins. Filters in SVG offer far greater flexibility with six more filters available and incredible customization possibilities. Whereas CSS <code>blur<\/code> allows just one value for both horizontal and vertical axes (X\/Y,) in SVG I can use two values; one for the X-axis, the other for Y.<\/p>\n<p>In SVG, every filter has its own identity, so to blur to an HTML element, reference its ID using the URL value in the filter property from a stylesheet:<\/p>\n<pre><code>.blur {\nfilter: url(#blur); }\n<\/code><\/pre>\n<p>Filters have their own element in SVG, it\u2019s the <code>filter<\/code> element. Even though a filter won\u2019t be visible in a browser, giving SVG a height of <code>0<\/code> will ensure it takes up no space:<\/p>\n<pre><code><svg height=\"0\">\n<filter id=\"blur\">\u2026<\/filter>\n<\/svg>\n<\/code><\/pre>\n<p>Each SVG filter primitive has its own name which is prefixed by fe, an abbreviation of \u201cfilter effect.\u201d Unsurprisingly, the name for a blur is <code>feGaussianBlur<\/code>. The amount of blur is applied as a <code>stdDeviation<\/code> using either one uniform value or two separate values for horizontal and vertical. To reproduce the previous uniform <code>5px<\/code> Gaussian blur in SVG, I add one value:<\/p>\n<pre><code><filter id=\"blur\">\n<feGaussianBlur in=\"SourceGraphic\"\nstdDeviation=\"5\"\/>\n<\/filter>\n<\/code><\/pre>\n<p>I\u2019m looking for a more realistic motion effect where the image is blurred on just the horizontal axis. I apply blur to only the X-axis, leaving the Y-axis at zero:<\/p>\n<pre><code><filter id=\"blur\">\n<feGaussianBlur in=\"SourceGraphic\"\nstdDeviation=\"15, 0\"\/>\n<\/filter>\n<\/code><\/pre>\n<p>Now my car is speeding across the viewport, but when you look more closely. the result isn\u2019t altogether realistic. That\u2019s because the edges of my blurred elements are clipped by the bounding box. This is the rectangle which surrounds every element.<\/p>\n<figure><a href=\"https:\/\/i0.wp.com\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/6642e008-12c7-43d8-b178-586dbcc1f076\/issue-5-39-inspired-design-decisions-bea-feitler.jpg?ssl=1\"><\/p>\n<p>    <img data-recalc-dims=\"1\" decoding=\"async\" srcset=\"http:\/\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/issue-5-39-inspired-design-decisions-bea-feitler.jpg 400w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_800\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/6642e008-12c7-43d8-b178-586dbcc1f076\/issue-5-39-inspired-design-decisions-bea-feitler.jpg 800w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1200\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/6642e008-12c7-43d8-b178-586dbcc1f076\/issue-5-39-inspired-design-decisions-bea-feitler.jpg 1200w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_1600\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/6642e008-12c7-43d8-b178-586dbcc1f076\/issue-5-39-inspired-design-decisions-bea-feitler.jpg 1600w,\n\t\t\t        https:\/\/res.cloudinary.com\/indysigner\/image\/fetch\/f_auto,q_auto\/w_2000\/https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/6642e008-12c7-43d8-b178-586dbcc1f076\/issue-5-39-inspired-design-decisions-bea-feitler.jpg 2000w\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/issue-5-39-inspired-design-decisions-bea-feitler.jpg?w=900\" sizes=\"100vw\" alt=\"\"><\/a><figcaption>\n      Left: The bounding box clips the blurred edges. Right: Increasing the filter region shows the whole blurred image. (<a href=\"https:\/\/cloud.netlifyusercontent.com\/assets\/344dbf88-fdf9-42bb-adb4-46f01eedd629\/6642e008-12c7-43d8-b178-586dbcc1f076\/issue-5-39-inspired-design-decisions-bea-feitler.jpg\">Large preview<\/a>)<br \/>\n    <\/figcaption><\/figure>\n<p>To make the entire filter effect visible, I need to increase the size of my filter region using <code>x<\/code>, <code>y<\/code>, <code>width<\/code>, and <code>height<\/code> values. I use negative values of <code>-10%<\/code> on both horizontal and vertical axes, then increase the <code>width<\/code> and <code>height<\/code> to <code>120%<\/code> which allows more visible space for my images\u2019 blurred edges:<\/p>\n<pre><code><filter id=\"blur\"\nx=\"-10%\" y=\"-10%\"\nwidth=\"120%\" height=\"120%\">\n\u2026\n<\/filter>\n<\/code><\/pre>\n<p>When you watch cars speeding past, or you look out of a moving train window, objects closest to you appear to move faster than those further away. To make my design seem more realistic, I need a different set of blur values for objects in the foreground, middle ground, and background.<\/p>\n<p>Foreground elements like the closet red Beetle need the highest amount of horizontal blur. I give this filter an identity of <code>blur-foreground<\/code>:<\/p>\n<pre><code><filter id=\"blur-foreground\"\nx=\"-10%\" y=\"-10%\"\nwidth=\"120%\" height=\"120%\">\n<feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"15,0\"\/>\n<\/filter>\n<\/code><\/pre>\n<p>Then, Beetles in the middle ground receive a slightly lower <code>stdDeviation<\/code> of <code>10<\/code>:<\/p>\n<pre><code><filter id=\"blur-medium\"\nx=\"-10%\" y=\"-10%\"\nwidth=\"120%\" height=\"120%\">\n<feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"10,0\"\/>\n<\/filter>\n<\/code><\/pre>\n<p>Finally, objects in the background receive the least blurring. I give this filter an identity of <code>blur-background<\/code> so I can apply it in my stylesheet:<\/p>\n<pre><code><filter id=\"blur-background\"\nx=\"-10%\" y=\"-10%\"\nwidth=\"120%\" height=\"120%\">\n<feGaussianBlur in=\"SourceGraphic\" stdDeviation=\"5,0\"\/>\n<\/filter>\n<\/code><\/pre>\n<p>With all my filters specified, in my stylesheet I apply them to Beetles in the foreground, middle ground, and background:<\/p>\n<pre><code><img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/car-red.png?w=900\" class=\"blur-foreground\">\n<img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/car-green.png?w=900\" class=\"blur-medium\">\n<img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/car-cyan.png?w=900\" class=\"blur-medium\">\n<img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/car-magenta.png?w=900\" class=\"blur-medium\">\n<img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/car-yellow.png?w=900\" class=\"blur-background\">\n<img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/car-black.png?w=900\" class=\"blur-background\">\n\n.blur-foreground { filter: url(#blur-foreground); }\n.blur-medium { filter: url(#blur-medium); }\n.blur-background { filter: url(#blur-background); }\n<\/code><\/pre>\n<p>My set of six colorful Beetles are now racing across the viewport and my final Feitler-inspired design is a winner too.<\/p>\n<p><strong>NB<\/strong>: <em>Smashing members have access to a beautifully designed PDF of Andy\u2019s Inspired Design Decisions magazine and full code examples from this article.<\/em><\/p>\n<h4>Related Reading<\/h4>\n<ol>\n<li><a href=\"https:\/\/www.smashingmagazine.com\/2019\/06\/inspired-design-decisions-avaunt-magazine\/\">Inspired Design Decisions: Avaunt Magazine<\/a><\/li>\n<li><a href=\"https:\/\/www.smashingmagazine.com\/2019\/07\/inspired-design-decisions-pressing-matters\/\">Inspired Design Decisions: Pressing Matters<\/a><\/li>\n<li><a href=\"https:\/\/www.smashingmagazine.com\/2019\/08\/inspired-design-decisions-ernest-journal\">Inspired Design Decisions: Ernest Journal<\/a><\/li>\n<li><a href=\"https:\/\/www.smashingmagazine.com\/2019\/09\/inspired-design-decisions-alexey-brodovitch\/\">Inspired Design Decisions: Alexey Brodovitch<\/a><\/li>\n<\/ol>\n<div>\n  <img data-recalc-dims=\"1\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/logo-red-3.png?w=900\" alt=\"Smashing Editorial\"><span>(vf, ra, yk, il)<\/span>\n<\/div>\n<\/article>\n<p class=\"wpematico_credit\"><small>Powered by <a href=\"http:\/\/www.wpematico.com\" target=\"_blank\">WPeMatico<\/a><\/small><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Inspired Design Decisions: Bea Feitler, An Unstoppable Creative Force Inspired Design Decisions: Bea Feitler, An Unstoppable Creative Force Andrew Clarke 2019-10-03T14:30:59+02:002019-10-04T11:08:44+00:00 Even if you didn\u2019t study graphic design at art school, you might know a few famous names. With over a century of commercial art direction, there are plenty more names to discover. People who&#8230;<a class=\"moretag\" href=\"https:\/\/www.taterboy.com\/blog\/2019\/10\/inspired-design-decisions-bea-feitler-an-unstoppable-creative-force\/\"> Read the full article&#8230;<\/a><\/p>\n","protected":false},"author":4,"featured_media":71412,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[371],"tags":[],"class_list":["post-71411","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-user-experience"],"aioseo_notices":[],"aioseo_head":"\n\t\t<!-- All in One SEO 5.0.0.1 - aioseo.com -->\n\t<meta name=\"description\" content=\"Inspired Design Decisions: Bea Feitler, An Unstoppable Creative ForceInspired Design Decisions: Bea Feitler, An Unstoppable Creative Force Andrew Clarke 2019-10-03T14:30:59+02:002019-10-04T11:08:44+00:00Even if you didn\u2019t study graphic design at art school, you might know a few famous names. With over a century of commercial art direction, there are plenty more names to discover. People who have done\" \/>\n\t<meta name=\"robots\" content=\"max-image-preview:large\" \/>\n\t<meta name=\"author\" content=\"Guest Contribution\"\/>\n\t<meta name=\"keywords\" content=\"user experience\" \/>\n\t<link rel=\"canonical\" href=\"https:\/\/www.taterboy.com\/blog\/2019\/10\/inspired-design-decisions-bea-feitler-an-unstoppable-creative-force\/\" \/>\n\t<meta name=\"generator\" content=\"All in One SEO (AIOSEO) 5.0.0.1\" \/>\n\t\t<meta property=\"og:locale\" content=\"en_US\" \/>\n\t\t<meta property=\"og:site_name\" content=\"Design for Immersive Technologies | User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)\" \/>\n\t\t<meta property=\"og:type\" content=\"article\" \/>\n\t\t<meta property=\"og:title\" content=\"Inspired Design Decisions: Bea Feitler, An Unstoppable Creative Force | Design for Immersive Technologies\" \/>\n\t\t<meta property=\"og:description\" content=\"Inspired Design Decisions: Bea Feitler, An Unstoppable Creative ForceInspired Design Decisions: Bea Feitler, An Unstoppable Creative Force Andrew Clarke 2019-10-03T14:30:59+02:002019-10-04T11:08:44+00:00Even if you didn\u2019t study graphic design at art school, you might know a few famous names. With over a century of commercial art direction, there are plenty more names to discover. People who have done\" \/>\n\t\t<meta property=\"og:url\" content=\"https:\/\/www.taterboy.com\/blog\/2019\/10\/inspired-design-decisions-bea-feitler-an-unstoppable-creative-force\/\" \/>\n\t\t<meta property=\"article:published_time\" content=\"2019-10-04T11:19:30+00:00\" \/>\n\t\t<meta property=\"article:modified_time\" content=\"2019-10-04T11:19:30+00:00\" \/>\n\t\t<meta name=\"twitter:card\" content=\"summary\" \/>\n\t\t<meta name=\"twitter:title\" content=\"Inspired Design Decisions: Bea Feitler, An Unstoppable Creative Force | Design for Immersive Technologies\" \/>\n\t\t<meta name=\"twitter:description\" content=\"Inspired Design Decisions: Bea Feitler, An Unstoppable Creative ForceInspired Design Decisions: Bea Feitler, An Unstoppable Creative Force Andrew Clarke 2019-10-03T14:30:59+02:002019-10-04T11:08:44+00:00Even if you didn\u2019t study graphic design at art school, you might know a few famous names. With over a century of commercial art direction, there are plenty more names to discover. People who have done\" \/>\n\t\t<script type=\"application\/ld+json\" class=\"aioseo-schema\">\n\t\t\t{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/inspired-design-decisions-bea-feitler-an-unstoppable-creative-force\\\/#article\",\"name\":\"Inspired Design Decisions: Bea Feitler, An Unstoppable Creative Force | Design for Immersive Technologies\",\"headline\":\"Inspired Design Decisions: Bea Feitler, An Unstoppable Creative Force\",\"author\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"publisher\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/www.taterboy.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/issue-5-01-inspired-design-decisions-bea-feitler.jpg?fit=400%2C301&ssl=1\",\"width\":400,\"height\":301},\"datePublished\":\"2019-10-04T04:19:30-07:00\",\"dateModified\":\"2019-10-04T04:19:30-07:00\",\"inLanguage\":\"en-US\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/inspired-design-decisions-bea-feitler-an-unstoppable-creative-force\\\/#webpage\"},\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/inspired-design-decisions-bea-feitler-an-unstoppable-creative-force\\\/#webpage\"},\"articleSection\":\"User Experience\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/inspired-design-decisions-bea-feitler-an-unstoppable-creative-force\\\/#breadcrumblist\",\"itemListElement\":[{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog#listItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.taterboy.com\\\/blog\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"name\":\"User Experience\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"position\":2,\"name\":\"User Experience\",\"item\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/\",\"nextItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/inspired-design-decisions-bea-feitler-an-unstoppable-creative-force\\\/#listItem\",\"name\":\"Inspired Design Decisions: Bea Feitler, An Unstoppable Creative Force\"},\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog#listItem\",\"name\":\"Home\"}},{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/inspired-design-decisions-bea-feitler-an-unstoppable-creative-force\\\/#listItem\",\"position\":3,\"name\":\"Inspired Design Decisions: Bea Feitler, An Unstoppable Creative Force\",\"previousItem\":{\"@type\":\"ListItem\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/category\\\/user-experience\\\/#listItem\",\"name\":\"User Experience\"}}]},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\",\"name\":\"Design for Immersive Technologies\",\"description\":\"User Experience for Games, Virtual Reality (VR) and Augmented\\\/Mixed Reality (AR\\\/MR)\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/\",\"name\":\"Guest Contribution\",\"image\":{\"@type\":\"ImageObject\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/inspired-design-decisions-bea-feitler-an-unstoppable-creative-force\\\/#authorImage\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/d2aad73eb0f48c67b141e9fc978a0e498969791ed623346e361d02d19775b0bb?s=96&d=mm&r=g\",\"width\":96,\"height\":96,\"caption\":\"Guest Contribution\"}},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/inspired-design-decisions-bea-feitler-an-unstoppable-creative-force\\\/#webpage\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/inspired-design-decisions-bea-feitler-an-unstoppable-creative-force\\\/\",\"name\":\"Inspired Design Decisions: Bea Feitler, An Unstoppable Creative Force | Design for Immersive Technologies\",\"description\":\"Inspired Design Decisions: Bea Feitler, An Unstoppable Creative ForceInspired Design Decisions: Bea Feitler, An Unstoppable Creative Force Andrew Clarke 2019-10-03T14:30:59+02:002019-10-04T11:08:44+00:00Even if you didn\\u2019t study graphic design at art school, you might know a few famous names. With over a century of commercial art direction, there are plenty more names to discover. People who have done\",\"inLanguage\":\"en-US\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#website\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/inspired-design-decisions-bea-feitler-an-unstoppable-creative-force\\\/#breadcrumblist\"},\"author\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"creator\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/author\\\/guestcontribution\\\/#author\"},\"image\":{\"@type\":\"ImageObject\",\"url\":\"https:\\\/\\\/i0.wp.com\\\/www.taterboy.com\\\/blog\\\/wp-content\\\/uploads\\\/2019\\\/10\\\/issue-5-01-inspired-design-decisions-bea-feitler.jpg?fit=400%2C301&ssl=1\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/inspired-design-decisions-bea-feitler-an-unstoppable-creative-force\\\/#mainImage\",\"width\":400,\"height\":301},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/2019\\\/10\\\/inspired-design-decisions-bea-feitler-an-unstoppable-creative-force\\\/#mainImage\"},\"datePublished\":\"2019-10-04T04:19:30-07:00\",\"dateModified\":\"2019-10-04T04:19:30-07:00\"},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/\",\"name\":\"Design for Immersive Technologies\",\"description\":\"User Experience for Games, Virtual Reality (VR) and Augmented\\\/Mixed Reality (AR\\\/MR)\",\"inLanguage\":\"en-US\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.taterboy.com\\\/blog\\\/#organization\"}}]}\n\t\t<\/script>\n\t\t<!-- All in One SEO -->\n\n","aioseo_head_json":{"title":"Inspired Design Decisions: Bea Feitler, An Unstoppable Creative Force | Design for Immersive Technologies","description":"Inspired Design Decisions: Bea Feitler, An Unstoppable Creative ForceInspired Design Decisions: Bea Feitler, An Unstoppable Creative Force Andrew Clarke 2019-10-03T14:30:59+02:002019-10-04T11:08:44+00:00Even if you didn\u2019t study graphic design at art school, you might know a few famous names. With over a century of commercial art direction, there are plenty more names to discover. People who have done","canonical_url":"https:\/\/www.taterboy.com\/blog\/2019\/10\/inspired-design-decisions-bea-feitler-an-unstoppable-creative-force\/","robots":"max-image-preview:large","keywords":"user experience","webmasterTools":{"miscellaneous":""},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/inspired-design-decisions-bea-feitler-an-unstoppable-creative-force\/#article","name":"Inspired Design Decisions: Bea Feitler, An Unstoppable Creative Force | Design for Immersive Technologies","headline":"Inspired Design Decisions: Bea Feitler, An Unstoppable Creative Force","author":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"publisher":{"@id":"https:\/\/www.taterboy.com\/blog\/#organization"},"image":{"@type":"ImageObject","url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/issue-5-01-inspired-design-decisions-bea-feitler.jpg?fit=400%2C301&ssl=1","width":400,"height":301},"datePublished":"2019-10-04T04:19:30-07:00","dateModified":"2019-10-04T04:19:30-07:00","inLanguage":"en-US","mainEntityOfPage":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/inspired-design-decisions-bea-feitler-an-unstoppable-creative-force\/#webpage"},"isPartOf":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/inspired-design-decisions-bea-feitler-an-unstoppable-creative-force\/#webpage"},"articleSection":"User Experience"},{"@type":"BreadcrumbList","@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/inspired-design-decisions-bea-feitler-an-unstoppable-creative-force\/#breadcrumblist","itemListElement":[{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog#listItem","position":1,"name":"Home","item":"https:\/\/www.taterboy.com\/blog","nextItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","name":"User Experience"}},{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","position":2,"name":"User Experience","item":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/","nextItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/inspired-design-decisions-bea-feitler-an-unstoppable-creative-force\/#listItem","name":"Inspired Design Decisions: Bea Feitler, An Unstoppable Creative Force"},"previousItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog#listItem","name":"Home"}},{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/inspired-design-decisions-bea-feitler-an-unstoppable-creative-force\/#listItem","position":3,"name":"Inspired Design Decisions: Bea Feitler, An Unstoppable Creative Force","previousItem":{"@type":"ListItem","@id":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/#listItem","name":"User Experience"}}]},{"@type":"Organization","@id":"https:\/\/www.taterboy.com\/blog\/#organization","name":"Design for Immersive Technologies","description":"User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","url":"https:\/\/www.taterboy.com\/blog\/"},{"@type":"Person","@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author","url":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/","name":"Guest Contribution","image":{"@type":"ImageObject","@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/inspired-design-decisions-bea-feitler-an-unstoppable-creative-force\/#authorImage","url":"https:\/\/secure.gravatar.com\/avatar\/d2aad73eb0f48c67b141e9fc978a0e498969791ed623346e361d02d19775b0bb?s=96&d=mm&r=g","width":96,"height":96,"caption":"Guest Contribution"}},{"@type":"WebPage","@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/inspired-design-decisions-bea-feitler-an-unstoppable-creative-force\/#webpage","url":"https:\/\/www.taterboy.com\/blog\/2019\/10\/inspired-design-decisions-bea-feitler-an-unstoppable-creative-force\/","name":"Inspired Design Decisions: Bea Feitler, An Unstoppable Creative Force | Design for Immersive Technologies","description":"Inspired Design Decisions: Bea Feitler, An Unstoppable Creative ForceInspired Design Decisions: Bea Feitler, An Unstoppable Creative Force Andrew Clarke 2019-10-03T14:30:59+02:002019-10-04T11:08:44+00:00Even if you didn\u2019t study graphic design at art school, you might know a few famous names. With over a century of commercial art direction, there are plenty more names to discover. People who have done","inLanguage":"en-US","isPartOf":{"@id":"https:\/\/www.taterboy.com\/blog\/#website"},"breadcrumb":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/inspired-design-decisions-bea-feitler-an-unstoppable-creative-force\/#breadcrumblist"},"author":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"creator":{"@id":"https:\/\/www.taterboy.com\/blog\/author\/guestcontribution\/#author"},"image":{"@type":"ImageObject","url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/issue-5-01-inspired-design-decisions-bea-feitler.jpg?fit=400%2C301&ssl=1","@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/inspired-design-decisions-bea-feitler-an-unstoppable-creative-force\/#mainImage","width":400,"height":301},"primaryImageOfPage":{"@id":"https:\/\/www.taterboy.com\/blog\/2019\/10\/inspired-design-decisions-bea-feitler-an-unstoppable-creative-force\/#mainImage"},"datePublished":"2019-10-04T04:19:30-07:00","dateModified":"2019-10-04T04:19:30-07:00"},{"@type":"WebSite","@id":"https:\/\/www.taterboy.com\/blog\/#website","url":"https:\/\/www.taterboy.com\/blog\/","name":"Design for Immersive Technologies","description":"User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","inLanguage":"en-US","publisher":{"@id":"https:\/\/www.taterboy.com\/blog\/#organization"}}]},"og:locale":"en_US","og:site_name":"Design for Immersive Technologies | User Experience for Games, Virtual Reality (VR) and Augmented\/Mixed Reality (AR\/MR)","og:type":"article","og:title":"Inspired Design Decisions: Bea Feitler, An Unstoppable Creative Force | Design for Immersive Technologies","og:description":"Inspired Design Decisions: Bea Feitler, An Unstoppable Creative ForceInspired Design Decisions: Bea Feitler, An Unstoppable Creative Force Andrew Clarke 2019-10-03T14:30:59+02:002019-10-04T11:08:44+00:00Even if you didn\u2019t study graphic design at art school, you might know a few famous names. With over a century of commercial art direction, there are plenty more names to discover. People who have done","og:url":"https:\/\/www.taterboy.com\/blog\/2019\/10\/inspired-design-decisions-bea-feitler-an-unstoppable-creative-force\/","article:published_time":"2019-10-04T11:19:30+00:00","article:modified_time":"2019-10-04T11:19:30+00:00","twitter:card":"summary","twitter:title":"Inspired Design Decisions: Bea Feitler, An Unstoppable Creative Force | Design for Immersive Technologies","twitter:description":"Inspired Design Decisions: Bea Feitler, An Unstoppable Creative ForceInspired Design Decisions: Bea Feitler, An Unstoppable Creative Force Andrew Clarke 2019-10-03T14:30:59+02:002019-10-04T11:08:44+00:00Even if you didn\u2019t study graphic design at art school, you might know a few famous names. With over a century of commercial art direction, there are plenty more names to discover. People who have done"},"aioseo_meta_data":{"post_id":"71411","title":null,"description":null,"keywords":null,"keyphrases":null,"canonical_url":null,"og_title":null,"og_description":null,"og_object_type":"default","og_image_type":"default","og_image_custom_url":null,"og_image_custom_fields":null,"og_custom_image_width":null,"og_custom_image_height":null,"og_video":null,"og_custom_url":null,"og_article_section":null,"og_article_tags":null,"twitter_use_og":false,"twitter_card":"default","twitter_image_type":"default","twitter_image_custom_url":null,"twitter_image_custom_fields":null,"twitter_title":null,"twitter_description":null,"schema_type":null,"schema_type_options":null,"pillar_content":false,"robots_default":true,"robots_noindex":false,"robots_noarchive":false,"robots_nosnippet":false,"robots_nofollow":false,"robots_noimageindex":false,"robots_noodp":false,"robots_notranslate":false,"robots_max_snippet":null,"robots_max_videopreview":null,"robots_max_imagepreview":"large","priority":null,"frequency":null,"location":null,"local_seo":null,"created":"2021-02-07 17:25:59","updated":"2026-09-02 05:51:16","focus_keyword":null,"additional_keywords":null,"truseo_locale":null,"primary_term":null,"og_image_url":null,"og_image_width":null,"og_image_height":null,"twitter_image_url":null,"schema":{"blockGraphs":[],"customGraphs":[],"default":{"data":{"Article":[],"Course":[],"Dataset":[],"FAQPage":[],"Movie":[],"Person":[],"Product":[],"ProductReview":[],"Car":[],"Recipe":[],"Service":[],"SoftwareApplication":[],"WebPage":[]},"graphName":"Article","isEnabled":true},"graphs":[]},"limit_modified_date":false,"ai":null,"breadcrumb_settings":null,"seo_analyzer_scan_date":null},"aioseo_breadcrumb":"<div class=\"aioseo-breadcrumbs\"><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.taterboy.com\/blog\" title=\"Home\">Home<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\t<a href=\"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/\" title=\"User Experience\">User Experience<\/a>\n\t\t<\/span><span class=\"aioseo-breadcrumb-separator\">&raquo;<\/span><span class=\"aioseo-breadcrumb\">\n\t\t\tInspired Design Decisions: Bea Feitler, An Unstoppable Creative Force\n\t\t<\/span><\/div>","aioseo_breadcrumb_json":[{"label":"Home","link":"https:\/\/www.taterboy.com\/blog"},{"label":"User Experience","link":"https:\/\/www.taterboy.com\/blog\/category\/user-experience\/"},{"label":"Inspired Design Decisions: Bea Feitler, An Unstoppable Creative Force","link":"https:\/\/www.taterboy.com\/blog\/2019\/10\/inspired-design-decisions-bea-feitler-an-unstoppable-creative-force\/"}],"jetpack_publicize_connections":[],"jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p8wzr5-izN","jetpack_featured_media_url":"https:\/\/i0.wp.com\/www.taterboy.com\/blog\/wp-content\/uploads\/2019\/10\/issue-5-01-inspired-design-decisions-bea-feitler.jpg?fit=400%2C301&ssl=1","_links":{"self":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts\/71411","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/comments?post=71411"}],"version-history":[{"count":0,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/posts\/71411\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/media\/71412"}],"wp:attachment":[{"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/media?parent=71411"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/categories?post=71411"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.taterboy.com\/blog\/wp-json\/wp\/v2\/tags?post=71411"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}