<![CDATA[All that Malarkey]]> https://stuffandnonsense.co.uk Sat, 03 Oct 2020 00:00:00 +0100 en-us © Copyright 2020 3600 <![CDATA[52 weeks of Inspired Design Decisions #40 — David King]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-40-david-king https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-40-david-king Sat, 03 Oct 2020 00:00:00 +0100 Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week 40 and my design this week was again inspired by David King.

David King was a British writer, designer and historian of graphic design. He devoted his career to uncovering and chronicling the art of the Soviet and the Constructivist periods, developing posters and graphics for many political groups.

]]> My David King inspired design
My design this week was again inspired by David King.

If you like this project, say thank-you with a $10 one-off donation or shop the magazines.


Shop the magazines

While articles about how to use CSS Grid and Flexbox are common, when and why to use them is hardly ever discussed. Very few people are taught design fundamentals or see inspiring examples to learn from. Through this unique “Inspired design decisions” magazine series, Andy Clarke is changing that. Each magazine includes a high quality PDF, plus examples of HTML/CSS code for you to learn from and use in your projects. Only £3.99 per issue. If you’re not 100% happy with any magazine, you get a full refund and can even keep the files.


Shop the magazines
]]>
<![CDATA[52 weeks of Inspired Design Decisions #39 — Milton Glaser]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-39-milton-glaser https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-39-milton-glaser Mon, 28 Sep 2020 00:00:00 +0100 Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week 39 and my design this week was inspired by Milton Glaser.

Milton Glaser was born in 1929 in The Bronx, New York City and throughout his career, he personally designed and illustrated more than 400 posters including a famous psychedelic poster of Bob Dylan.

]]> My Milton Glaser inspired design
My design this week was inspired by Milton Glaser.

If you like this project, say thank-you with a $10 one-off donation or shop the magazines.


Shop the magazines

While articles about how to use CSS Grid and Flexbox are common, when and why to use them is hardly ever discussed. Very few people are taught design fundamentals or see inspiring examples to learn from. Through this unique “Inspired design decisions” magazine series, Andy Clarke is changing that. Each magazine includes a high quality PDF, plus examples of HTML/CSS code for you to learn from and use in your projects. Only £3.99 per issue. If you’re not 100% happy with any magazine, you get a full refund and can even keep the files.


Shop the magazines
]]>
<![CDATA[52 weeks of Inspired Design Decisions #38 — Saul Bass]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-38-saul-bass https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-38-saul-bass Mon, 21 Sep 2020 00:00:00 +0100 Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week 38 and my design this week was again inspired by Saul Bass.

In a career which spanned over 40 years, Saul Bass not only designed some of America’s most iconic logos, but also designed title sequences and film posters for some of Hollywood’s best filmmakers, including Alfred Hitchcock, Stanley Kubrick, and Martin Scorsese. For Hitchcock, Bass created innovative title sequences for films including North by Northwest, Psycho, and Vertigo. The opening sequence of Mad Men—one of my favourite TV shows—pays homage to Bass who died in 1996 aged 75.

]]> My Saul Bass inspired design
My design this week was again inspired by Saul Bass.

If you like this project, say thank-you with a $10 one-off donation or shop the magazines.


Shop the magazines

While articles about how to use CSS Grid and Flexbox are common, when and why to use them is hardly ever discussed. Very few people are taught design fundamentals or see inspiring examples to learn from. Through this unique “Inspired design decisions” magazine series, Andy Clarke is changing that. Each magazine includes a high quality PDF, plus examples of HTML/CSS code for you to learn from and use in your projects. Only £3.99 per issue. If you’re not 100% happy with any magazine, you get a full refund and can even keep the files.


Shop the magazines
]]>
<![CDATA[52 weeks of Inspired Design Decisions #37 — Paula Scher]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-37-paula-scher https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-37-paula-scher Mon, 14 Sep 2020 00:00:00 +0100 Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week 37 and my design this week was again inspired by Paula Scher.

Paula Scher is an American graphic designer, painter and educator and the first female principal at design firm Pentagram. She is well-known for her distinctive typographic style.

]]> My Paula Scher inspired design
My design this week was again inspired by Paula Scher.

If you like this project, say thank-you with a $10 one-off donation or shop the magazines.


Shop the magazines

While articles about how to use CSS Grid and Flexbox are common, when and why to use them is hardly ever discussed. Very few people are taught design fundamentals or see inspiring examples to learn from. Through this unique “Inspired design decisions” magazine series, Andy Clarke is changing that. Each magazine includes a high quality PDF, plus examples of HTML/CSS code for you to learn from and use in your projects. Only £3.99 per issue. If you’re not 100% happy with any magazine, you get a full refund and can even keep the files.


Shop the magazines
]]>
<![CDATA[52 weeks of Inspired Design Decisions #36 — David King]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-36-david-king https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-36-david-king Mon, 07 Sep 2020 00:00:00 +0100 Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week 36 and my design this week was inspired by David King.

David King was a British writer, designer and historian of graphic design. He devoted his career to uncovering and chronicling the art of the Soviet and the Constructivist periods, developing posters and graphics for many political groups.

]]> My David King inspired design
My design this week was inspired by David King.

If you like this project, say thank-you with a $10 one-off donation or shop the magazines.


Shop the magazines

While articles about how to use CSS Grid and Flexbox are common, when and why to use them is hardly ever discussed. Very few people are taught design fundamentals or see inspiring examples to learn from. Through this unique “Inspired design decisions” magazine series, Andy Clarke is changing that. Each magazine includes a high quality PDF, plus examples of HTML/CSS code for you to learn from and use in your projects. Only £3.99 per issue. If you’re not 100% happy with any magazine, you get a full refund and can even keep the files.


Shop the magazines
]]>
<![CDATA[52 weeks of Inspired Design Decisions #35 — Paula Scher]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-35-paula-scher https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-35-paula-scher Mon, 24 Aug 2020 11:00:00 +0100 Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week 35 and my design this week was inspired by Paula Scher.

Paula Scher is an American graphic designer, painter and educator and the first female principal at design firm Pentagram. She is well-known for her distinctive typographic style.

]]> My Paula Scher inspired design
My design this week was inspired by Paula Scher.

If you like this project, say thank-you with a $10 one-off donation or shop the magazines.


Shop the magazines

While articles about how to use CSS Grid and Flexbox are common, when and why to use them is hardly ever discussed. Very few people are taught design fundamentals or see inspiring examples to learn from. Through this unique “Inspired design decisions” magazine series, Andy Clarke is changing that. Each magazine includes a high quality PDF, plus examples of HTML/CSS code for you to learn from and use in your projects. Only £3.99 per issue. If you’re not 100% happy with any magazine, you get a full refund and can even keep the files.


Shop the magazines
]]>
<![CDATA[52 weeks of Inspired Design Decisions #34 — Max Bill]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-34-max-bill https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-34-max-bill Mon, 24 Aug 2020 10:00:00 +0100 Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week 34 and my design this week was again inspired by Max Bill.

Born in 1908, Max Bill was a Swiss artist, typeface and graphic designer, and industrial designer. He studied at the Bauhaus under Wassily Kandinsky and Paul Klee.

]]> My Max Bill inspired design
My design this week was inspired by Max Bill.

If you like this project, say thank-you with a $10 one-off donation or shop the magazines.


Shop the magazines

While articles about how to use CSS Grid and Flexbox are common, when and why to use them is hardly ever discussed. Very few people are taught design fundamentals or see inspiring examples to learn from. Through this unique “Inspired design decisions” magazine series, Andy Clarke is changing that. Each magazine includes a high quality PDF, plus examples of HTML/CSS code for you to learn from and use in your projects. Only £3.99 per issue. If you’re not 100% happy with any magazine, you get a full refund and can even keep the files.


Shop the magazines
]]>
<![CDATA[52 weeks of Inspired Design Decisions #33 — Tibor Kalman]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-33-tibor-kalman https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-33-tibor-kalman Mon, 17 Aug 2020 09:00:00 +0100 Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week 33 and my design this week was inspired by Tibor Kalman.

Tibor Kalman was a Hungarian American graphic designer best-known for his work as editor-in-chief of Colors magazine. In 1979, Kalman opened his own studio with the goal of challenging mundane design thinking and creating unpredictable work.

]]> My Tibor Kalman inspired design
My design this week was inspired by Tibor Kalman.

If you like this project, say thank-you with a $10 one-off donation or shop the magazines.


Shop the magazines

While articles about how to use CSS Grid and Flexbox are common, when and why to use them is hardly ever discussed. Very few people are taught design fundamentals or see inspiring examples to learn from. Through this unique “Inspired design decisions” magazine series, Andy Clarke is changing that. Each magazine includes a high quality PDF, plus examples of HTML/CSS code for you to learn from and use in your projects. Only £3.99 per issue. If you’re not 100% happy with any magazine, you get a full refund and can even keep the files.


Shop the magazines
]]>
<![CDATA[52 weeks of Inspired Design Decisions #27–32]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-27-32 https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-27-32 Mon, 10 Aug 2020 00:00:00 +0100 Since going on holiday during July, I’ve fallen behind with my commitment to designing 52 designs for a series of Inspired Design Decisions. Now II’m back in the studio and II’ve settled back into work, II’m making up for lost time. Here are six new designs, inspired by Otl Aicher,Saul Bass, Ken Garland, and Armin Hofmann.

]]> My Saul Bass inspired design
My design this week was inspired by Saul Bass.

#27 Inspired by Saul Bass

In a career which spanned over 40 years, Saul Bass not only designed some of America’s most iconic logos, but also designed title sequences and film posters for some of Hollywood’s best filmmakers, including Alfred Hitchcock, Stanley Kubrick, and Martin Scorsese. For Hitchcock, Bass created innovative title sequences for films including North by Northwest, Psycho, and Vertigo. The opening sequence of Mad Men—one of my favourite TV shows—pays homage to Bass who died in 1996 aged 75.

My Ken Garland inspired design
My design this week was inspired by Ken Garland.

#28 Inspired by Ken Garland

With his work on graphic design, logos, photos, and books spanning over sixty years, Ken Garland has made a significant contribution to graphic design since the mid-twentieth century. In 1964, Garland authored his book, First Things First Manifesto, which “which attempted to radicalize designers who were lazily serving the more dubious needs of consumerist culture. (1)”

My Saul Bass inspired design
My design this week was again inspired by Saul Bass.

#29 Inspired by Saul Bass

In a career which spanned over 40 years, Saul Bass not only designed some of America’s most iconic logos, but also designed title sequences and film posters for some of Hollywood’s best filmmakers, including Alfred Hitchcock, Stanley Kubrick, and Martin Scorsese. For Hitchcock, Bass created innovative title sequences for films including North by Northwest, Psycho, and Vertigo. The opening sequence of Mad Men—one of my favourite TV shows—pays homage to Bass who died in 1996 aged 75.

My Otl Aicher inspired design
My design this week was inspired by Otl Aicher.

#30 Inspired by Otl Aicher

After WW2, Otl Aicher studied sculpture at the Academy of Fine Arts Munich and in 1947, he opened his own studio in Ulm, Germany. In 1953, he co-founded the influential Ulm School of Design. Aicher worked on corporate branding for Braun and Lufthansa and he considered a pioneer of corporate design. For the 1972 Summer Olympics in Munich, Aicher created a set of pictograms meant to provide a visual interpretation of each sport. This influential signage helped athletes and visitors find their way around. Aicher died in 1991 and a Munich street is named after him.

My Ken Garlandinspired design
My design this week was inspired by Ken Garland.

#31 Inspired by Ken Garland

With his work on graphic design, logos, photos, and books spanning over sixty years, Ken Garland has made a significant contribution to graphic design since the mid-twentieth century. In 1964, Garland authored his book, First Things First Manifesto, which “which attempted to radicalize designers who were lazily serving the more dubious needs of consumerist culture. (1)”

My Armin Hofmann inspired design
My design this week was inspired by Armin Hofmann.

#32 Inspired by Armin Hofmann

Armin Hofmann is a Swiss graphic designer whose work is known for its abstract shapes and lines. Born in 1920 and now 99 years old, Hofmann first taught, then became head of the Basel School of Design. His work has been widely exhibited in major galleries, including the New York Museum of Modern Art. Throughout his long career, Armin Hofmann designed posters in the Swiss International Style, in particular for the Basel Stadt Theater. He valued visual communication above everything else in design, used techniques including photo-montage, experimental compositions, and primarily sans-serif typography.

]]>
<![CDATA[Naming layout components]]> https://stuffandnonsense.co.uk/blog/naming-layout-components https://stuffandnonsense.co.uk/blog/naming-layout-components Mon, 03 Aug 2020 00:00:00 +0100 I know some people swear by frameworks and I do understand why, although my work rarely needs them. I also appreciate why some people find the grids component in frameworks useful. But, to me, including a framework just for its grid has always seemed excessive. Particularly when there are other ways to develop reusable layout components which are far less generic, but no less flexible than a framework.

]]> The 12 equal-width units in most framework grids are popular because it’s easy to divide them into one, two, three, and four columns. But, I’ve always looked at them just as ways to vertically align content. They’re alignment tools, not design tools, which is one reason why so many framework-based designs look so similar. Instead, I start by designing a grid which better reflects not just my content, but the feeling I want to achieve from a layout.

There are an infinite number of potential arrangements and any number of columns. Which one you choose will depend on the feeling you’re aiming to create.

Take this example from a website I worked on recently. I chose a 3+4 compound grid which is a three-column grid overlapping a four-column grid. This creates six columns and a rhythmic pattern of 3|1|2|2|1|3.

A 3+4 compound grid
Left: 3 columns. Middle: 4 columns. Right: A 3+4 compound grid

To develop this grid using CSS Grid properties involves only turning that pattern into fr units.

Most designs include just a handful of layout compositions arranged on a chosen grid. These might include different numbers of columns and a variety of proportional relationships between them. For example, two symmetrical or asymmetrical columns, three columns of the same width, or three which are all different widths. Three columns where the widest is on the left, in the centre, or on the right*.

Different numbers of columns and a variety of proportional relationships.

There will be fewer or more of these compositions needed depending on the design. Because there are just a handful of these compositions in most designs, I give each one a name. I remember once noticing that the BBC named their component sizes after birds. The bigger the component, the bigger the bird. So a large component might be an “albatross” and a small component might be a “sparrow.” Naming conventions are hard to decide on and even harder to maintain.

It’s been a long time since I worried about semantics for my component names. Now, I name components for the project I’m working on. I chose famous French footballers for a French football magazine. I used Italian city names for a cyber security product because the developers all live in Italy. The components in my own website are all named after Japanese kaiju monsters; “godzilla,” “kong,” “mechagodzilla,” and “rodan.”

Layout components named after Japanese kaiju monsters

To be honest, it doesn’t matter what I name these components, as long as they’re unique and somewhat memorable, so I can say to a developer, “we’re using the godzilla layout for our footer.”


* There’s a good argument that instead of giving a reversed component its own name, it should have a -reverse suffix to its name. (Eg: godzilla-reverse.)

]]>
<![CDATA[52 weeks of Inspired Design Decisions #26 — Lester Beall]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-26-lester-beall https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-26-lester-beall Sun, 28 Jun 2020 00:00:00 +0100 Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week 26 and my design this week was inspired by Lester Beall.

Lester Beall was an American modernist graphic designer. Born in Kansas City, Missouri, Beall moved to Chicago to study and from there to New York. From his farm in Connecticut, he worked on covers and posters which often featured his distinctive use of photomontage.

]]> My Lester Beall inspired design
My design this week was inspired by Lester Beall.

If you like this project, say thank-you with a $10 one-off donation or shop the magazines.


Shop the magazines

While articles about how to use CSS Grid and Flexbox are common, when and why to use them is hardly ever discussed. Very few people are taught design fundamentals or see inspiring examples to learn from. Through this unique “Inspired design decisions” magazine series, Andy Clarke is changing that. Each magazine includes a high quality PDF, plus examples of HTML/CSS code for you to learn from and use in your projects. Only £3.99 per issue. If you’re not 100% happy with any magazine, you get a full refund and can even keep the files.


Shop the magazines
]]>
<![CDATA[52 weeks of Inspired Design Decisions #25 — Erik Nitsche]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-25-erik-nitsche https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-25-erik-nitsche Mon, 22 Jun 2020 00:00:00 +0100 Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week 25 and my design this week was inspired by Erik Nitsche.

Erik Nitsche was born in Lausanne, Switzerland in 1908 and was a pioneer in the design of books, reports, and other printed materials. In 1955, Nitsche began working as art director at engineering company General Dynamics where he designed a 420-page book on the company’s history entitled Dynamic America.

]]> My Erik Nitsche inspired design
My design this week was inspired by Erik Nitsche.

If you like this project, say thank-you with a $10 one-off donation or shop the magazines.


Shop the magazines

While articles about how to use CSS Grid and Flexbox are common, when and why to use them is hardly ever discussed. Very few people are taught design fundamentals or see inspiring examples to learn from. Through this unique “Inspired design decisions” magazine series, Andy Clarke is changing that. Each magazine includes a high quality PDF, plus examples of HTML/CSS code for you to learn from and use in your projects. Only £3.99 per issue. If you’re not 100% happy with any magazine, you get a full refund and can even keep the files.


Shop the magazines
]]>
<![CDATA[52 weeks of Inspired Design Decisions #24 — Dan Friedman]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-24-dan-friedman https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-24-dan-friedman Mon, 15 Jun 2020 00:00:00 +0100 Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week 24 and my design this week was inspired by Dan Friedman.

Friedman was an American graphic and furniture designer. He studied under Armin Hofmann at the Ulm School of Design and became a major contributor to the new wave typography movement. While working at Pentagram until 1984, Friedman designed letterheads, logos, and posters. Sadly, Friedman died of AIDS in 1995 in New York.

]]> My Dan Friedman inspired design
My design this week was inspired by Dan Friedman.

If you like this project, say thank-you with a $10 one-off donation or shop the magazines.


Shop the magazines

While articles about how to use CSS Grid and Flexbox are common, when and why to use them is hardly ever discussed. Very few people are taught design fundamentals or see inspiring examples to learn from. Through this unique “Inspired design decisions” magazine series, Andy Clarke is changing that. Each magazine includes a high quality PDF, plus examples of HTML/CSS code for you to learn from and use in your projects. Only £3.99 per issue. If you’re not 100% happy with any magazine, you get a full refund and can even keep the files.


Shop the magazines
]]>
<![CDATA[52 weeks of Inspired Design Decisions #23 — Herbert Matter]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-23-herbert-matter https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-23-herbert-matter Mon, 08 Jun 2020 00:00:00 +0100 Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week 23 and my design this week was inspired by Herbert Matter.

Matter was a Swiss-born American photographer and graphic designer known for his pioneering use of photo-montage in commercial art. His experimental work helped shape the vocabulary of 20th-century graphic design.

]]> My Emmett McBain inspired design
My design this week was inspired by Herbert Matter.

If you like this project, say thank-you with a $10 one-off donation or shop the magazines.


Shop the magazines

While articles about how to use CSS Grid and Flexbox are common, when and why to use them is hardly ever discussed. Very few people are taught design fundamentals or see inspiring examples to learn from. Through this unique “Inspired design decisions” magazine series, Andy Clarke is changing that. Each magazine includes a high quality PDF, plus examples of HTML/CSS code for you to learn from and use in your projects. Only £3.99 + VAT per issue and #1 is free.


Shop the magazines
]]>
<![CDATA[52 weeks of Inspired Design Decisions #22 — Emmett McBain]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-22-emmett-mcbain https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-22-emmett-mcbain Fri, 05 Jun 2020 00:00:00 +0100 Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week 22 and my design this week was inspired by Emmett McBain.

McBain was an African American Graphic Designer who’s work highlighted themes of the African American community and helped bring a positive image of African Americans to the mainstream. He designed impactful advertising, during the Civil Rights era and a series of iconic album covers throughout the sixties and seventies.

#blacklivesmatter

]]> My Emmett McBain inspired design
My design this week was inspired by Emmett McBain.

If you like this project, say thank-you with a $10 one-off donation or shop the magazines.


Shop the magazines

While articles about how to use CSS Grid and Flexbox are common, when and why to use them is hardly ever discussed. Very few people are taught design fundamentals or see inspiring examples to learn from. Through this unique “Inspired design decisions” magazine series, Andy Clarke is changing that. Each magazine includes a high quality PDF, plus examples of HTML/CSS code for you to learn from and use in your projects. Only £3.99 + VAT per issue and #1 is free.


Shop the magazines
]]>
<![CDATA[52 weeks of Inspired Design Decisions #21 — Alexey Brodovitch]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-21-alexey-brodovitch https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-21-alexey-brodovitch Mon, 25 May 2020 00:00:00 +0100 Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week 21 and my design this week was inspired by art director Alexey Brodovitch.

]]> My Alexey Brodovitch inspired design
My design this week was inspired by Alexey Brodovitch.

If you like this project, say thank-you with a $10 one-off donation or shop the magazines.


Shop the magazines

While articles about how to use CSS Grid and Flexbox are common, when and why to use them is hardly ever discussed. Very few people are taught design fundamentals or see inspiring examples to learn from. Through this unique “Inspired design decisions” magazine series, Andy Clarke is changing that. Each magazine includes a high quality PDF, plus examples of HTML/CSS code for you to learn from and use in your projects. Only £3.99 + VAT per issue and #1 is free.


Shop the magazines
]]>
<![CDATA[52 weeks of Inspired Design Decisions #20 — Neville Brody]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-20-neville-brody https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-20-neville-brody Mon, 18 May 2020 00:00:00 +0100 Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week twenty and my design this week was inspired by rebellious British designer Neville Brody.

]]> My Neville Brody inspired design
My design this week was inspired by Neville Brody.

If you like this project, say thank-you with a $10 one-off donation or shop the magazines.


Shop the magazines

While articles about how to use CSS Grid and Flexbox are common, when and why to use them is hardly ever discussed. Very few people are taught design fundamentals or see inspiring examples to learn from. Through this unique “Inspired design decisions” magazine series, Andy Clarke is changing that. Each magazine includes a high quality PDF, plus examples of HTML/CSS code for you to learn from and use in your projects. Only £3.99 + VAT per issue and #1 is free.


Shop the magazines
]]>
<![CDATA[52 weeks of Inspired Design Decisions #19 — Giovanni Pintori]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-19-giovanni-pintori https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-19-giovanni-pintori Mon, 04 May 2020 00:00:00 +0100 Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week nineteen and my design this week was again inspired by Italian graphic designer Giovanni Pintori.

]]> My Giovanni Pintori inspired design
My design this week was inspired by Giovanni Pintori

If you like this project, say thank-you with a $10 one-off donation or shop the magazines.


Shop the magazines

While articles about how to use CSS Grid and Flexbox are common, when and why to use them is hardly ever discussed. Very few people are taught design fundamentals or see inspiring examples to learn from. Through this unique “Inspired design decisions” magazine series, Andy Clarke is changing that. Each magazine includes a high quality PDF, plus examples of HTML/CSS code for you to learn from and use in your projects. Only £3.99 + VAT per issue and #1 is free.


Shop the magazines
]]>
<![CDATA[52 weeks of Inspired Design Decisions #18 — Giovanni Pintori]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-18-giovanni-pintori https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-18-giovanni-pintori Mon, 27 Apr 2020 00:00:00 +0100 Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week eighteen and my design this week was again inspired by Italian graphic designer Giovanni Pintori.

]]> My Giovanni Pintori inspired design
My design this week was inspired by Giovanni Pintori

If you like this project, say thank-you with a $10 one-off donation or shop the magazines.


Shop the magazines

While articles about how to use CSS Grid and Flexbox are common, when and why to use them is hardly ever discussed. Very few people are taught design fundamentals or see inspiring examples to learn from. Through this unique “Inspired design decisions” magazine series, Andy Clarke is changing that. Each magazine includes a high quality PDF, plus examples of HTML/CSS code for you to learn from and use in your projects. Only £3.99 + VAT per issue and #1 is free.


Shop the magazines
]]>
<![CDATA[Yours truly on Isolation Station]]> https://stuffandnonsense.co.uk/blog/yours-truly-on-isolation-station https://stuffandnonsense.co.uk/blog/yours-truly-on-isolation-station Mon, 27 Apr 2020 00:00:00 +0100 Dave Letorey has an Isolation Station project where he’s interviewing industry people about their favourite music in a Desert Island Discs style. Last Friday he asked me to join him to talk about some music which is important to me. It was a fun forty minutes.

]]> Here’s the ten songs I chose:

  1. High Voltage–AC/DC
  2. Back in Black–AC/DC
  3. Milkman of Human Kindness–Billy Bragg
  4. No Time To Die–Billie Eilish
  5. Wild West Hero–Electric Light Orchestra
  6. A New England–Kirsty MacColl
  7. Bat Out Of Hell–Meatloaf
  8. Overkill (Live)–Motorhead
  9. Save Me–Queen
  10. The Boys Are Back In Town–Thin Lizzy

Watch the full interview (and apologies for my poor video quality.)

]]>
<![CDATA[52 weeks of Inspired Design Decisions #17 — Bradbury Thompson]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-17-bradbury-thompson https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-17-bradbury-thompson Mon, 20 Apr 2020 00:00:00 +0100 Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week seventeen and my design this week was again inspired by Bradbury Thompson.

]]> My Bradbury Thompson inspired design
My design this week was inspired by Bradbury Thompson

If you like this project, say thank-you with a $10 one-off donation or shop the magazines.


Shop the magazines

While articles about how to use CSS Grid and Flexbox are common, when and why to use them is hardly ever discussed. Very few people are taught design fundamentals or see inspiring examples to learn from. Through this unique “Inspired design decisions” magazine series, Andy Clarke is changing that. Each magazine includes a high quality PDF, plus examples of HTML/CSS code for you to learn from and use in your projects. Only £3.99 + VAT per issue and #1 is free.


Shop the magazines
]]>
<![CDATA[52 weeks of Inspired Design Decisions #16 — Giovanni Pintori]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-16-giovanni-pintori https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-16-giovanni-pintori Sun, 19 Apr 2020 00:00:00 +0100 Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week sixteen and my design this week was inspired by Italian graphic designer Giovanni Pintori.

]]> My Giovanni Pintori inspired design
My design this week was inspired by Giovanni Pintori

If you like this project, say thank-you with a $10 one-off donation or support this project on Patreon from $4.99 per month.


Shop the magazines

While articles about how to use CSS Grid and Flexbox are common, when and why to use them is hardly ever discussed. Very few people are taught design fundamentals or see inspiring examples to learn from. Through this unique “Inspired design decisions” magazine series, Andy Clarke is changing that. Each magazine includes a high quality PDF, plus examples of HTML/CSS code for you to learn from and use in your projects. Only £3.99 + VAT per issue and #1 is free.


Shop the magazines
]]>
<![CDATA[52 weeks of Inspired Design Decisions #15 — Herb Lubalin]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-15-herb-lubalin https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-15-herb-lubalin Sun, 12 Apr 2020 00:00:00 +0100 Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week fifteen and my design this week was again inspired by Herb Lubalin.

]]> My Herb Lubalin inspired design
My design this week was inspired by Herb Lubalin

If you like this project, say thank-you with a $10 one-off donation or support this project on Patreon from $4.99 per month.


Shop the magazines

While articles about how to use CSS Grid and Flexbox are common, when and why to use them is hardly ever discussed. Very few people are taught design fundamentals or see inspiring examples to learn from. Through this unique “Inspired design decisions” magazine series, Andy Clarke is changing that. Each magazine includes a high quality PDF, plus examples of HTML/CSS code for you to learn from and use in your projects. Only £3.99 + VAT per issue and #1 is free.


Shop the magazines
]]>
<![CDATA[52 weeks of Inspired Design Decisions #14 — Max Huber]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-14-max-huber https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-14-max-huber Mon, 06 Apr 2020 00:00:00 +0100 Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week fourteen and my design this week was again inspired by Max Huber.

]]> My Max Huber inspired design
My design this week was inspired by Max Huber

If you like this project, say thank-you with a $10 one-off donation or support this project on Patreon from $4.99 per month.


Shop the magazines

While articles about how to use CSS Grid and Flexbox are common, when and why to use them is hardly ever discussed. Very few people are taught design fundamentals or see inspiring examples to learn from. Through this unique “Inspired design decisions” magazine series, Andy Clarke is changing that. Each magazine includes a high quality PDF, plus examples of HTML/CSS code for you to learn from and use in your projects. Only £3.99 + VAT per issue and #1 is free.


Shop the magazines
]]>
<![CDATA[52 weeks of Inspired Design Decisions #13 — David Carson]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-13-david-carson https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-13-david-carson Sun, 29 Mar 2020 00:00:00 +0000 Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week thirteen and my design this week was inspired by art director and graphic designer David Carson.

]]> My David Carson inspired design
My design this week was inspired by David Carson

If you like this project, say thank-you with a $10 one-off donation or support this project on Patreon from $4.99 per month.


Shop the magazines

While articles about how to use CSS Grid and Flexbox are common, when and why to use them is hardly ever discussed. Very few people are taught design fundamentals or see inspiring examples to learn from. Through this unique “Inspired design decisions” magazine series, Andy Clarke is changing that. Each magazine includes a high quality PDF, plus examples of HTML/CSS code for you to learn from and use in your projects. Only £3.99 + VAT per issue and #1 is free.


Shop the magazines
]]>
<![CDATA[Buy Inspired Design Decisions magazines]]> https://stuffandnonsense.co.uk/blog/buy-inspired-design-decisions-magazines https://stuffandnonsense.co.uk/blog/buy-inspired-design-decisions-magazines Sun, 29 Mar 2020 00:00:00 +0000 While articles about how to use CSS Grid and Flexbox are common, when and why to use them is hardly ever discussed. Very few people are taught design fundamentals or see inspiring examples to learn from. Through my series of “Inspired design decisions“ magazines, I plan to change that.

]]> Over the past year, I‘ve been writing a series of twelve “Inspired design decisions“ articles for Smashing Magazine. Every month, I choose an art director, designer, or publication, discuss what makes their design distinctive, and how we might learn lessons and make better work for the web. So far, these articles have been about:

  1. Avaunt Magazine
  2. Pressing Matters
  3. Ernest Journal
  4. Alexey Brodovitch
  5. Bea Feitler
  6. Neville Brody
  7. Otto Storch

I design a PDF magazine and develop HTML/CSS examples for each article. These are available for Smashing Members as part of their subscription. Now, you can buy them too.

Inspired design decisions
“Inspired design decisions“ magazines are now available to buy.

Each issue includes a high quality PDF, plus examples of HTML/CSS code for you to learn from and use in your projects. They’re only £3.99 + VAT per issue and #1 is free.


Latest issue: Herb Lubalin

In this eighth issue, I explain how Herb Lubalin—one of my favourite typographers—transformed my approach to typography on the web. In this issue, you’ll learn how to use pre-formatted text for precise formatting, and how to use SVG text, fills, and strokes for intricate typographic designs. You’ll also learn how to make SVG text accessible and how to optimise SVG for maximum performance.

]]>
<![CDATA[52 weeks of Inspired Design Decisions #12 — Armin Hofmann]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-12-armin-hofmann https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-12-armin-hofmann Sun, 22 Mar 2020 00:00:00 +0000 Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week twelve and my design this week was inspired by Swiss born graphic designer Armin Hoffman who is now 99 years old.

]]> My Armin Hoffman inspired design
This design was inspired by Armin Hoffman

If you like this project, say thank-you with a $10 one-off donation or support this project on Patreon from $4.99 per month.

  • Supporter Help support this ongoing project. $4.99 or more per month
  • Recommended Support this project and get access to my personal Dropbox folder of design experiments. $9.99 or more per month
  • Mentorship included Support this project, access to my personal Dropbox folder of design experiments, one hour 1-on-1 mentoring session per month, and digital versions of all my books. $99.99 or more per month. Limited to 10 people

I’m also looking for a corporate sponsor to enable me to spend time adding free-to-watch video tutorials to the project. If you’re interested in sponsoring, get in touch.

]]>
<![CDATA[52 weeks of Inspired Design Decisions #11 — Max Huber]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-11-max-huber https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-11-max-huber Sun, 15 Mar 2020 00:00:00 +0000 Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. My design this week was again inspired by Max Huber. Huber taught graphic design in the Swiss town of Lugano, which coincidentally is where I stay when I go to work in Switzerland. He died in Mendrisio—where my Swiss office is—in 1992.

]]> My Max Huber inspired design
This design was inspired by Max Huber

If you like this project, say thank-you with a $10 one-off donation or support this project on Patreon from $4.99 per month.

  • Supporter Help support this ongoing project. $4.99 or more per month
  • Recommended Support this project and get access to my personal Dropbox folder of design experiments. $9.99 or more per month
  • Mentorship included Support this project, access to my personal Dropbox folder of design experiments, one hour 1-on-1 mentoring session per month, and digital versions of all my books. $99.99 or more per month. Limited to 10 people

I’m also looking for a corporate sponsor to enable me to spend time adding free-to-watch video tutorials to the project. If you’re interested in sponsoring, get in touch.

]]>
<![CDATA[52 weeks of Inspired Design Decisions #10 — Ladislav Sutnar]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-10-ladislav-sutnar https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-10-ladislav-sutnar Mon, 09 Mar 2020 00:00:00 +0000 Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. This is week ten and my design this week was inspired by Czechoslovakian born graphic designer and typographer Ladislav Sutnar.

]]> My Ladislav Sutnar inspired design
This design was inspired by Ladislav Sutnar.

If you like this project, say thank-you with a $10 one-off donation or support this project on Patreon from $4.99 per month.

  • Supporter Help support this ongoing project. $4.99 or more per month
  • Recommended Support this project and get access to my personal Dropbox folder of design experiments. $9.99 or more per month
  • Mentorship included Support this project, access to my personal Dropbox folder of design experiments, one hour 1-on-1 mentoring session per month, and digital versions of all my books. $99.99 or more per month. Limited to 10 people

I’m also looking for a corporate sponsor to enable me to spend time adding free-to-watch video tutorials to the project. If you’re interested in sponsoring, get in touch.

]]>
<![CDATA[52 weeks of Inspired Design Decisions #9 — Herb Lubalin]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-9-herb-lubalin https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-9-herb-lubalin Sun, 01 Mar 2020 00:00:00 +0000 Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. My design this week was again inspired by graphic designer and typographer Herb Lubalin.

]]> My Herb Lubalin inspired design
This design was inspired by Herb Lubalin

If you like this project, say thank-you with a $10 one-off donation or support this project on Patreon from $4.99 per month.

  • Supporter Help support this ongoing project. $4.99 or more per month
  • Recommended Support this project and get access to my personal Dropbox folder of design experiments. $9.99 or more per month
  • Mentorship included Support this project, access to my personal Dropbox folder of design experiments, one hour 1-on-1 mentoring session per month, and digital versions of all my books. $99.99 or more per month. Limited to 10 people

I’m also looking for a corporate sponsor to enable me to spend time adding free-to-watch video tutorials to the project. If you’re interested in sponsoring, get in touch.

]]>
<![CDATA[52 weeks of Inspired Design Decisions #8 — Lester Beall]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-8-lester-beall https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-8-lester-beall Sat, 22 Feb 2020 09:00:00 +0000 Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. My design this week was inspired by American modernist graphic designer, Lester Beall.

]]> My Lester Beall inspired design
This design was inspired by Lester Beall

If you like this project, say thank-you with a $10 one-off donation or support this project on Patreon from $4.99 per month.

  • Supporter Help support this ongoing project. $4.99 or more per month
  • Recommended Support this project and get access to my personal Dropbox folder of design experiments. $9.99 or more per month
  • Mentorship included Support this project, access to my personal Dropbox folder of design experiments, one hour 1-on-1 mentoring session per month, and digital versions of all my books. $99.99 or more per month. Limited to 10 people

I’m also looking for a corporate sponsor to enable me to spend time adding free-to-watch video tutorials to the project. If you’re interested in sponsoring, get in touch.

]]>
<![CDATA[52 weeks of Inspired Design Decisions #7 — Max Huber]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-7-max-huber https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-7-max-huber Fri, 14 Feb 2020 00:00:00 +0000 Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. My design this week was inspired by Max Huber. Huber taught graphic design in the Swiss town of Lugano, which coincidentally is where I stay when I go to work in Switzerland. He died in Mendrisio—where my Swiss office is—in 1992.

]]> My Max Huber inspired design
This design was inspired by Max Huber

If you like this project, say thank-you with a $10 one-off donation or support this project on Patreon from $4.99 per month.

  • Supporter Help support this ongoing project. $4.99 or more per month
  • Recommended Support this project and get access to my personal Dropbox folder of design experiments. $9.99 or more per month
  • Mentorship included Support this project, access to my personal Dropbox folder of design experiments, one hour 1-on-1 mentoring session per month, and digital versions of all my books. $99.99 or more per month. Limited to 10 people

I’m also looking for a corporate sponsor to enable me to spend time adding free-to-watch video tutorials to the project. If you’re interested in sponsoring, get in touch.

]]>
<![CDATA[52 weeks of Inspired Design Decisions #6 — Alvin Lustig]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-6-alvin-lustig https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-6-alvin-lustig Sat, 08 Feb 2020 00:00:00 +0000 Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. My design this week was inspired by Alvin Lustig. Lustig’s work as a book, graphic, and typeface designer has been influential long after his death in 1955.

]]> My Alvin Lustig inspired design
This design was inspired by Alvin Lustig

If you like this project, say thank-you with a $10 one-off donation or support this project on Patreon from $4.99 per month.

  • Supporter Help support this ongoing project. $4.99 or more per month
  • Recommended Support this project and get access to my personal Dropbox folder of design experiments. $9.99 or more per month
  • Mentorship included Support this project, access to my personal Dropbox folder of design experiments, one hour 1-on-1 mentoring session per month, and digital versions of all my books. $99.99 or more per month. Limited to 10 people

I’m also looking for a corporate sponsor to enable me to spend time adding free-to-watch video tutorials to the project. If you’re interested in sponsoring, get in touch.

]]>
<![CDATA[52 weeks of Inspired Design Decisions #5 — Bradbury Thompson]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-5-bradbury-thompson https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-5-bradbury-thompson Sun, 02 Feb 2020 00:00:00 +0000 Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. My design this week was inspired by Bradbury Thompson. Although less well-known than many of his contemporaries, Bradbury Thompson has been called “one of the giants of 20th-century graphic design.”

]]> My Bradbury Thompson inspired design
This design was inspired by Bradbury Thompson

If you like this project, say thank-you with a $10 one-off donation or support this project on Patreon from $4.99 per month.

  • Supporter Help support this ongoing project. $4.99 or more per month
  • Recommended Support this project and get access to my personal Dropbox folder of design experiments. $9.99 or more per month
  • Mentorship included Support this project, access to my personal Dropbox folder of design experiments, one hour 1-on-1 mentoring session per month, and digital versions of all my books. $99.99 or more per month. Limited to 10 people

I’m also looking for a corporate sponsor to enable me to spend time adding free-to-watch video tutorials to the project. If you’re interested in sponsoring, get in touch.

]]>
<![CDATA[52 weeks of Inspired Design Decisions #4 — Alexey Brodovitch]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-4-alexey-brodovitch https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-4-alexey-brodovitch Sun, 26 Jan 2020 00:00:00 +0000 Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. My design this week was inspired by Alexey Brodovitch. You can read more about him and his work in my article for Smashing Magazine.

]]> My Alexey Brodovitch inspired design
This design was inspired by Alexey Brodovitch

If you like this project, say thank-you with a $10 one-off donation or support this project on Patreon from $4.99 per month.

  • Supporter Help support this ongoing project. $4.99 or more per month
  • Recommended Support this project and get access to my personal Dropbox folder of design experiments. $9.99 or more per month
  • Mentorship included Support this project, access to my personal Dropbox folder of design experiments, one hour 1-on-1 mentoring session per month, and digital versions of all my books. $99.99 or more per month. Limited to 10 people

I’m also looking for a corporate sponsor to enable me to spend time adding free-to-watch video tutorials to the project. If you’re interested in sponsoring, get in touch.

]]>
<![CDATA[52 weeks of Inspired Design Decisions #3 — Bea Feitler]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-3-bea-feitler https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-3-bea-feitler Sat, 18 Jan 2020 00:00:00 +0000 Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. My design this week was inspired by “the pioneering female art director you’ve never heard of,” Bea Feitler.

]]> My Bea Feitler inspired design
This design was inspired by Bea Feitler

If you like this project, say thank-you with a $10 one-off donation or support this project on Patreon from $4.99 per month.

  • Supporter Help support this ongoing project. $4.99 or more per month
  • Recommended Support this project and get access to my personal Dropbox folder of design experiments. $9.99 or more per month
  • Mentorship included Support this project, access to my personal Dropbox folder of design experiments, one hour 1-on-1 mentoring session per month, and digital versions of all my books. $99.99 or more per month. Limited to 10 people
I’m also looking for a corporate sponsor to enable me to spend time adding free-to-watch video tutorials to the project. If you’re interested in sponsoring, get in touch.

]]>
<![CDATA[52 weeks of Inspired Design Decisions #2 — Herb Lubalin]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-2-herb-lubalin https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions-2-herb-lubalin Sat, 11 Jan 2020 00:00:00 +0000 Throughout 2020, I’ve committed to designing 52 designs for a series of Inspired Design Decisions. My design this week was inspired by graphic designer and typographer Herb Lubalin.

]]> My Herb Lubalin inspired design
This design was inspired by Herb Lubalin

Say thank-you with a $10 one-off donation or support this project on Patreon from $4.99 per month.

]]>
<![CDATA[52 weeks of Inspired Design Decisions]]> https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions https://stuffandnonsense.co.uk/blog/52-weeks-of-inspired-design-decisions Fri, 03 Jan 2020 00:00:00 +0000 For the past six months, I’ve been designing, writing, and presenting a series of Inspired Design Decisions articles and webinars for Smashing Magazine. These have been brilliantly well received and I’m currently working on more content which will become a book which will be available later on this year. But I wanted a regular project to experiment with new designs.

]]> Last week, my buddy Dan Davies started Print to CSS. During 2020, Dan will publish a new CSS Grid layout inspired by print designs. It’s a fabulous idea and the perfect format for my regular project too.

A weekly series of 52 website designs by Andy Clarke, influenced by the most inspiring art directors and graphic designers of the twentieth century. Learn about the background to each design, the techniques and technologies used to implement it, and how it might inspire more compelling, creative design for the web.

My first design is up today, a layout which uses a simple CSS Grid together with CSS Shapes, and was inspired by art director Otto Storch. Although Storch was an influential member of the New York School of editorial and advertising designers, and was taught by Alexey Brodovitch, there’s been very little published about his work. I’d like to make more web designers familiar with Storch and his work.


Go to Inspired Design Decisions


If you like this project, say thank-you with a $10 one-off donation or support this project on Patreon from $4.99 per month.

  • Supporter Help support this ongoing project. $4.99 or more per month
  • Recommended Support this project and get access to my personal Dropbox folder of design experiments. $9.99 or more per month
  • Mentorship included Support this project, access to my personal Dropbox folder of design experiments, one hour 1-on-1 mentoring session per month, and digital versions of all my books. $99.99 or more per month. Limited to 10 people
I’m also looking for a corporate sponsor to enable me to spend time adding free-to-watch video tutorials to the project. If you’re interested in sponsoring, get in touch.

]]>
<![CDATA[Z’s Still Not Dead Baby, Z’s Still Not Dead]]> https://stuffandnonsense.co.uk/blog/zs-still-not-dead-baby-zs-still-not-dead https://stuffandnonsense.co.uk/blog/zs-still-not-dead-baby-zs-still-not-dead Tue, 10 Dec 2019 00:00:00 +0000 Back in 2005, my friend Drew started a Christmas advent calendar website and asked me if I’d write something for it. Of course, I agreed, and my first 24ways article was “Z’s not dead baby, Z’s not dead.” It was a short piece how z-index and positioning in CSS could “be used to create designs which ‘break out of the box.’ This year, I returned that topic in what will be my fifteenth and final article for 24ways.

]]>

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 colours, square corners, and sharp edges.

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

Still, all fashions fade eventually. I’m hopeful that with the styling tools we have today, we’ll move beyond flatness and add an extra dimension. Here are five CSS properties which will bring depth and richness to your designs.

In Z’s Still Not Dead Baby, Z’s Still Not Dead, I cover:

  • Transparency with alpha values
  • Opacity
  • Blend modes
  • CSS Grid
  • Z-index

While I’m not advocating a return to the worst excesses of skeuomorphism, I hope product and website designers will realise the value of a more vibrant approach to design; one which appreciates how design can distinguish a brand from its competition.

I made this design for the 1961 Austin Seven 850, the small car which helped define the swinging sixties.

Over the years, I’ve written about many different design and design related topics. My personal favourite is last year’s “Designing Your Site Like It’s 1998” but without doubt the one I’m most proud of is Contract Killer from 2008. My open-source killer contract has been used thousands of times and designers and developers. It’s perhaps the most important thing I’ve ever made.

  1. 2005: Z's not dead baby, Z's not dead
  2. 2006: A Message To You, Rudy - CSS Production Notes
  3. 2007: Underpants Over My Trousers
  4. 2008: Contract Killer
  5. 2009: Ignorance Is Bliss
  6. 2010: Circles of Confusion
  7. 2011: There’s No Formula for Great Designs
  8. 2012: Monkey Business
  9. 2013: The Command Position Principle
  10. 2014: Taglines and Truisms
  11. 2015: Blow Your Own Trumpet
  12. 2016: Designing Imaginative Style Guides
  13. 2017: Getting Hardboiled with CSS Custom Properties
  14. 2018: Designing Your Site Like It’s 1998
  15. 2019: Z’s Still Not Dead Baby, Z’s Still Not Dead

I’m incredibly grateful to Drew and his team of volunteers for inviting me to write for this incredible publication every year for the past fifteen years. I hope you enjoy this fifteenth and final 24ways article as much as I enjoyed writing it.

]]>
<![CDATA[Producing Transcending CSS Revisited]]> https://stuffandnonsense.co.uk/blog/producing-transcending-css-revisited https://stuffandnonsense.co.uk/blog/producing-transcending-css-revisited Tue, 03 Dec 2019 00:00:00 +0000 Earlier this year, New Riders gave me back the publishing rights to my first book, Transcending CSS: The Fine Art of Web Design. I’d originally intended to post a PDF of the original book online, but the terms of my contract meant that I couldn’t simply give away a copy of the book New Riders had produced. I needed a new plan.

]]> Transcending CSS Revisited
Left: 2006 cover. Right: A new cover for 2019.

Sitting with Alex and Sue outside a cafe in Windsor, we hatched a plan. We decided to make an online version of Transcending CSS which would be free for everyone to read. Then, we’d typeset the book into a new format and offer it as an ebook and PDF.

I didn’t intend to make this new book a second edition. In fact, I was keen to retain the original content, almost like a historical record of how we designed and developed websites in 2006. To highlight how things have changed between then and now, I decided to add a written commentary to the ebook and PDF.

Revisiting the content

The first step was to copy the content from the original. I didn’t have a PDF version of Transcending CSS, and the pirated copies I found online were impossible to copy from. Luckily, one of the translators of the original book had clean PDFs which they gave me.

Reading what I’d written in 2006 was painful. I hated my writing style, repetition, and vagueness. I started to rewrite every section, following the original outline, and the end result is a version of Transcending CSS where hardly a sentence is untouched. I changed spelling from American to British English, and switched to an active tense where I and telling you what I think.

I was thrilled when Rachel Andrew agreed to write a new foreword. I can’t think of a single person who’s done more for the web over the last fifteen years than Rachel.

300 new illustrations

Next came the examples and illustrations. I reinstated the full newspaper front pages, and retained the original screenshots of websites from 2006, including the CSS Zen Garden. But, I’d made my example designs and code overlays using Macromedia Fireworks and they were no longer fit for purpose. So I redesigned every example, keeping the Web 2.0 feel from the originals. Just like before, I included in-jokes and the names of my friends. At the end of the process, I’d made almost 300 new images for this edition.

Transcending CSS Revisited
Left: Transcending CSS Revisited. Right: Spread from the original book.

In the commentary, I write about how we can implement my designs today. This involved developing new HTML and CSS for at least half the examples. I had most fun replacing the original Advanced Layout CSS examples with CSS Grid Template Areas, and will publish those at some point soon.

Developing the online version

People have published books online before, and I followed the format of Brad Frost’s Atomic Web Design. I wanted my online version to use today’s transcending technologies including CSS Grid, Flexbox, Shapes, and SVG. I also wanted the book to load quickly and be a great reading experience on desktop and mobile.

Transcending CSS Revisited
Left: Original example. Center: Transcending CSS Revisited redesign Right: Transcending CSS Revisited HTML guide.

Typesetting and page layout

Sue transferred my newly edited text into InDesign and over a couple of months of evenings and weekends, we laid out the new book using InDesign. Although I’ve switched almost all of my print work over to Affinity Publisher, that app doesn’t (yet) have the ability to use GREP styles which automatically prevent orphans and widows. That’s an essential feature when typesetting hundreds of pages.

Bethany Andrew converted the HTML from the online version into XHTML and then into ePub for the ebook version. This, and the PDF, are hosted on SendOwl which also provides payment processing.

Transcending CSS Revisited
Left: Transcending CSS Revisited. Right: Spread from the original book.

Services and software used

  • Adobe InDesign
  • Grammerly
  • iA Writer
  • SendOwl
  • Sigil
  • Sketch

Producing Transcending CSS Revisited took far longer and involved much more work than I expected, but I’m pleased I took on the job. I hope that people will read it and appreciate how much has changed, but also how many challenges have stayed the same.

Free to read online

Transcending CSS Revisited is now free to read online, and if you’d like a beautiful PDF and ePub version, I’ve made a bundle available for only £9.99+VAT (£4.99 for students.)


Buy ebook from £4.99*
]]>
<![CDATA[Announcing Transcending CSS Revisited]]> https://stuffandnonsense.co.uk/blog/announcing-transcending-css-revisited https://stuffandnonsense.co.uk/blog/announcing-transcending-css-revisited Sun, 01 Dec 2019 00:00:00 +0000 I wrote my first book, Transcending CSS: The Fine Art of Web design, way back in 2006. It became a success and since then I’ve had countless people tell me it was influential in their careers. For example:

]]>

I would be hard-pressed to think of another book that has been as influential on my career as Transcending CSS. The semantically structured code I write every day contains the fingerprints that came from the inspiring examples in this work. I am still quick to embrace the “transcending spirit” to expand the creative possibilities of the sites I build.

Jeff Bridgforth

And:

The breakthroughs in Transcending CSS were pivotal in my early career. The skills I learned at the time put me well ahead of others in the field, and helped kickstart my career. I was able to do things most didn’t see as possible at the time, and now are commonplace.

Chris Lackey
Transcending CSS Revisited
Left: 2006 cover. Right: A new cover for 2019.

When I wrote the acknowledgements in 2006, I said:

Writing this book has been one of the hardest, but at the same time, the most rewarding challenges in my life.

I meant it when I said then writing Transcending CSS was one of my hardest challenges, but I haven’t explained why until today.

Although I’d maintained a positive public profile, the reality was that in 2006, my business and personal life were in tatters. My business partner in a company we’d founded together was doing his level best to undermine me personally and professionally. Two weeks after signing the contract to write Transcending CSS, I walked away from the business I’d co-founded.

At home, my seventeen-year-old marriage was struggling too. My behaviour and mental health were at their worst, so my wife and I separated for a few months. That was a terrible mistake and my biggest regret. It was also the worst time to start writing my first book.

Saying writing Transcending CSS was hard would be an understatement. I had no experience of writing anything longer than a blog post. When a promise of guidance didn’t materialise, the whole project looked like it would fail, adding to the fragility of my already poor mental health.

After moving home—and with only two months before my deadline—I started Transcending CSS from scratch with the help of my editor Karyn Johnson and support from my wife. During the day, Sue helped me structure my thoughts and organise the book’s content. Every evening for two months, Karyn and I worked for hours over video chat, editing the day’s content and planning the next day of writing. By a miracle, we finished the book only a week behind schedule.

Rereading Transcending CSS for the first time in almost fifteen years has been challenging too. This book brings back memories of a period I’d rather forget. But unlike in publishing, there are no second editions in life.

Transcending CSS Revisited
Left: Transcending CSS Revisited. Right: Spread from the original book.

Peachpit/New Riders have given me the publishing rights to Transcending CSS, so I felt it was time to revisit this book. Not to update its content or write a second edition, but to examine the approaches we took and the tools we used at the start of the web standards revolution in website design. The content of Transcending CSS Revisited is much the same as it was when published in 2006.

I’ve tightened up my writing, changed the spelling from US to British English, and made minor edits for this new format. I’ve checked every URL and replaced them with Wayback Machine URLs when needed.

It’s important to remember how we worked in the past so we can learn lessons for the future. For historical reasons, I’ve retained all original information and examples of code, even when they’re no longer relevant.

Transcending CSS Revisited is available to read online for free, with a new foreword by none other than Rachel Andrew. I have no hesitation in saying without Rachel, none of the CSS we now use today would’ve been possible.

In the ePub and PDF versions of Transcending CSS Revisited, I’ve also added a commentary where I explain what’s changed since the original Transcending CSS and how we should work today. An ePub and PDF bundle is also available to buy for only £9.99+VAT.


Buy ebook from £4.99*

* Student price. Regular price £9.99 plus VAT. Ebook includes ePub and PDF formats with an exclusive author’s commentary.


I hope you enjoy this version of Transcending CSS Revisited.

Transcending CSS Revisited
Left: Transcending CSS Revisited. Right: Spread from the original book.
Transcending CSS Revisited
Left: Transcending CSS Revisited. Right: Spread from the original book.
Transcending CSS Revisited
Left: Transcending CSS Revisited. Right: Spread from the original book.
Transcending CSS Revisited
Left: Original example. Center: Transcending CSS Revisited redesign: Transcending CSS Revisited HTML guide.
Transcending CSS Revisited
Left: Original example. Center: Transcending CSS Revisited redesign: Transcending CSS Revisited HTML guide.
Transcending CSS Revisited
Left: Transcending CSS Revisited. Right: Spread from the original book.
Transcending CSS Revisited
Left: Transcending CSS Revisited. Right: Spread from the original book.
Transcending CSS Revisited
Left: Transcending CSS Revisited. Right: Spread from the original book.
Transcending CSS Revisited
Left: Transcending CSS Revisited. Right: Spread from the original book.
Transcending CSS Revisited
Left: Transcending CSS Revisited. Right: Spread from the original book.
]]>
<![CDATA[Transcending CSS Revisited (those newspapers)]]> https://stuffandnonsense.co.uk/blog/transcending-css-revisited-those-newspapers https://stuffandnonsense.co.uk/blog/transcending-css-revisited-those-newspapers Sun, 01 Dec 2019 00:00:00 +0000 I wrote Transcending CSS: The Fine Art of Web design, way back in 2006. As I explained, writing my first book was a challenge, personally and professionally.

]]> In the third part of Transcending CSS, I discussed grid design and layout inspiration from magazines and newspapers. It’s a topic I returned to again and again.

A few weeks before publishing Transcending CSS, New Riders—my publisher at the time—were concerned about the small images of newspaper front pages I’d gathered from Newseum. They were worried about copyright, so asked me to remove the mastheads and photographs. This didn’t make much sense to me at the time, but I agreed. I retouched the newspapers and removed the mastheads. At the same time, I replaced the photographs with pictures of my friends.

I doubt anyone is concerned about thirteen year-old newspapers today, so for Transcending CSS Revisited I reinstated the original images.

Transcending CSS Revisited
Left: Original newspaper. Right: Andrew Krespanis and Douglas Bowman. Salman Rushdie became Jeffrey Zeldman.
Transcending CSS Revisited
Left: Original newspaper. Right: Jon Hicks on the cover of the Hindustan Times.
Transcending CSS Revisited
Left: Original newspaper. Right: Faruk Ateş, Andy Budd, Geert Leyseele, Veerle Pieters, PPK, and Simon Willison.
Transcending CSS Revisited
Left: Original newspaper. Right: Rachel Andrew and Drew McLellan. Cameron Adams and Dustin Diaz became “Naked Cameron Diaz.”

No one I included minded much, but James Edwards did ask a Ukrainian speaker to translate the copy around his photograph. He was reassured when he discovered the article wasn’t about anything criminal.

Transcending CSS Revisited
Left: Original newspaper. Right: James Edwards and Jeremy Keith on Ukraine’s Segodnya.

Transcending CSS Revisited is available to read online for free, with a new foreword by none other than Rachel Andrew. In the ePub and PDF versions of Transcending CSS Revisited, I’ve also added a commentary where I explain what’s changed since the original Transcending CSS and how we should work today. An ePub and PDF bundle is also available to buy for only £9.99+VAT.


Buy ebook from £4.99*

* Student price. Regular price £9.99 plus VAT. Ebook includes ePub and PDF formats with an exclusive author’s commentary.

]]>
<![CDATA[Let’s Code ♠ Shirts ♠ Rock!]]> https://stuffandnonsense.co.uk/blog/lets-code-shirts-rock https://stuffandnonsense.co.uk/blog/lets-code-shirts-rock Tue, 19 Nov 2019 11:00:00 +0000 I love rock music and I also love writing HTML and CSS code, so what better way to bring my two loves together than a set of shirt designs which celebrate both? Code ♠ Shirts ♠ Rock designs are inspired by classic rock band logos. Wear them at home or at work, to a gig, or your next tech conference. They’re ideal gifts for the code loving rocker, or rock loving coder you know. The shop is now open.

]]>

Code ♠ Shirts ♠ Rock tees

Code Shirts Rock t-shirt design

Come As You Are

Nevermind other tees, come as you are in this display shirt. It won’t smell like teen spirit, or even come in a heart shaped box, but it is available with a yellow motif on black, black motif on white, and white motif on heather. Comes in sizes XS–2XL.


Code Shirts Rock t-shirt design

Acid Drops

This is not a love song, it’s a div tee in a choice of colours; asphalt, red, and white. Don’t expect a metal box though, just a high quality shirt in sizes XS–2XL. Happy?


Code Shirts Rock t-shirt design

T-shirt of the Beast

Whether you’re running for the hills or running free, you’ll look killer in this font-family tee. Available in asphalt, beast black, or heather, and sizes XS–2XL, you’ll have piece of mind.


Code Shirts Rock t-shirt design

No Class

Live to win in this margin-top tee. You’ll look ace and feel like an overnight sensation. Choose from sizes XS–2XL, aftershock asphalt and bad magic black, with a solid white motif. Wearing this shirt, the world is yours.


Code Shirts Rock t-shirt design

No Class (variant)

Live to win in this margin-top ‘outline variant’ tee. You’ll look ace and feel like an overnight sensation. Choose from sizes XS–2XL, aftershock asphalt and bomber black, with a solid white motif. Wearing this shirt, the world is yours.


Code Shirts Rock t-shirt design

Pretty Vacant

Never mind the other tees, here’s the max-width. Whether you’re ready for holidays in the sun, or you’re staying home feeling pretty vacant, do it your way with classic black and white, or with punk pink, or gob green motifs. Available in sizes XS–2XL.


Code Shirts Rock t-shirt design

Anarchy in the U.K.

Never mind the other tees, here’s the gob green max-width. Whether you’re ready for holidays in the sun, or you’re staying home feeling pretty vacant, do it your way with classic black and white, or with punk pink, or gob green motifs. Available in sizes XS–2XL.


Code Shirts Rock t-shirt design

God Save the Queen

Never mind the other tees, here’s the punk pink max-width. Whether you’re ready for holidays in the sun, or you’re staying home feeling pretty vacant, do it your way with classic black and white, or with punk pink, or gob green motifs. Available in sizes XS–2XL.


Code Shirts Rock t-shirt design

Rust in Peace

The world needs a hero and it could be you wearing this metatag tee. Available in sizes XS–2XL—so far, so good—asphalt, black, and heather, with a white embossed-look motif. So who’s buying?


Code Shirts Rock t-shirt design

Supersonic

You’ll definitely, maybe, look like supersonic wearing this outline tee. Don’t look back in anger, choose wonderwall white, be here now black, or hello colours, and look like the rock ’n’ roll star you are. Available in sizes XS–2XL.


Code Shirts Rock t-shirt design

Supersonic (variant)

You’ll definitely, maybe, look like supersonic wearing this outline tee. Don’t look back in anger, choose wonderwall white, be here now black, or hello colours, and look like the rock ’n’ roll star you are. Available in sizes XS–2XL.


Code Shirts Rock t-shirt design

Love Bites

Ever fallen in love (with something you shouldn’t’ve?) What do you get? A high quality text-transform tee which will make everyone love you more. Choose from sizes XS–2XL and a set of colours.


Code Shirts Rock t-shirt design

Orgasm Addict

Ever fallen in love (with something you shouldn’t’ve?) What do you get? A high quality text-transform tee which will make everyone love you more. Choose from sizes XS–2XL and a set of colours.


Code Shirts Rock t-shirt design

Please Don’t Touch (limited to 50)

Live to win in this limited margin-top tee. You’ll look ace and feel like an overnight sensation. Choose from sizes XS–2XL, in bad magic black with a rock ‘n’ roll red motif. Wearing this shirt, the world is yours.


Every Code ♠ Shirts ♠ Rock design is printed on demand by Printful on a Bella + Canvas 3001 unisex short sleeve jersey shirt with a tear-away label. All items ship worldwide in an average of 5–20 days. The shop is open now.

]]>
<![CDATA[My top five rock albums of all time]]> https://stuffandnonsense.co.uk/blog/my-top-five-rock-albums-of-all-time https://stuffandnonsense.co.uk/blog/my-top-five-rock-albums-of-all-time Sun, 17 Nov 2019 00:00:00 +0000 To celebrate the launch of my Code ♠ Shirts ♠ Rock tees tomorrow, here are my top five rock albums of all time.

]]>

Listen on Apple Music

5: Iron Maiden: Iron Maiden

I saw Iron Maiden on their first headline tour on 17th June 1980. This tour line-up included Paul Di’Anno who sang lead vocals on their first two albums, Iron Maiden and Killers. I love the rawness of this first Iron Maiden album, Charlotte the Harlot, Phantom of the Opera, and of course, Running Free.


Listen on Apple Music

4: Thin Lizzy: Live and Dangerous

Live and Dangerous was Thin Lizzy’s first live album and still one of the greatest live albums. Thin Lizzy recorded Live and Dangerous in 1978, but I didn’t see them play live until their Renegade tour in 1981. It’s a double album so there’s plenty to rock out to between Phil Lynott’s banter with the crowd. Stand-out tracks include Emerald, Rosalie by Bob Seger, Don’t Believe a Word, and The Boys Are Back in Town.


Listen on Apple Music

3: Judas Priest: British Steel

I walked into De Montfort Hall, Leicester to see Judas Priest on their British Steel tour on 13th March 1980. They played tracks for what has become one of my favourite NWOBHM albums. There are several re-release and anniversary editions of British Steel, but nothing beats the original cut. Rapid Fire kicks things off, running seamlessly into Metal Gods, and then the classic Breaking the Law.


Listen on Apple Music

2: Motörhead: Ace of Spades

I saw Motörhead play live countless times and when my son was old enough to have his own ear drums damaged, we went to see them together. I first saw the classic line up of Lemmy, Fast Eddie and Philthy Phil at De Montfort Hall, Leicester on their Iron Fist tour on November 17th, 1980. At the end of the gig, Phil through his sticks into the crowd and I caught one. Ace of Spades is definitive early Motörhead. Stand-out tracks include Love Me Like a Reptile, and of course Ace of Spades.


Listen on Apple Music

1: AC/DC: If You Want Blood You've Got It (Live)

If You Want Blood You’ve Got It isn’t just my favourite AC/DC album or even my favourite live album. It’s my favourite album of all time. After Bon Scott’s death, I was worried AC/DC wouldn’t tour again, but on 20th October 1980 I saw them play at De Montfort Hall, Leicester, with their new vocalist Brian Johnson. Recorded in 1978, If You Want Blood You’ve Got It is the perfect memorial to Bon. There are no bad tracks, but three of my favourites are Hell Ain’t a Bad Place to Be, The Jack, and who can forget Whole Lotta Rosie.


Five notable mentions

  1. AC/DC: Back in Black
  2. Girlschool: Hit and Run
  3. Iron Maiden: The Number of the Beast
  4. Motorhead: Ace of Spades
  5. Rainbow: Down to Earth

Code ♠ Shirts ♠ Rock

Code ♠ Shirts ♠ Rock are classic rock and code inspired shirts. The site will launch Tuesday 19th at 2pm UK time.

]]>
<![CDATA[On Tuesday I’m launching Code ♠ Shirts ♠ Rock tees]]> https://stuffandnonsense.co.uk/blog/on-tuesday-launching-code-shirts-rock-tees https://stuffandnonsense.co.uk/blog/on-tuesday-launching-code-shirts-rock-tees Sun, 17 Nov 2019 00:00:00 +0000 I love rock music and during the 1980s I saw AC/DC on their Back In Black tour, Girlschool, Iron Maiden (before Bruce Dickinson,) Judas Priest, Saxon, Thin Lizzy, and of course Motorhead with their classic line up of Lemmy, Fast Eddie and Philthy Phil. Motorhead were always my favourite, and when my son was old enough to have his own ear drums damaged, we went to see them together.

]]>

I also love writing HTML and CSS code, so what better way to bring my two loves together than a set of shirt designs which celebrate both? Code ♠ Shirts ♠ Rock designs are inspired by classic rock band logos.

Code Shirts Rock t-shirt designs
© Copyright Stuff & Nonsense Ltd. 2019. Code ♠ Shirts ♠ Rock t-shirt designs.

They come in colours like Beast and Bomber Black, Gob Green, Rotten Red, and Wonderwall White. Wear them at home or at work, to a gig, or your next tech conference. They’re ideal gifts for the code loving rocker, or rock loving coder you know.

I had lots of fun designing these shirts while listening to some of my favourite rock albums. I hope you have fun wearing them too.

Let’s code, let’s rock.


Code ♠ Shirts ♠ Rock tees

Code Shirts Rock t-shirt design

Come As You Are

Nevermind other tees, come as you are in this display shirt. It won’t smell like teen spirit, or even come in a heart shaped box, but it is available with a yellow motif on black, black motif on white, and white motif on heather. Comes in sizes XS–2XL.


Code Shirts Rock t-shirt design

Acid Drops

This is not a love song, it’s a div tee in a choice of colours; asphalt, red, and white. Don’t expect a metal box though, just a high quality shirt in sizes XS–2XL. Happy?


Code Shirts Rock t-shirt design

T-shirt of the Beast

Whether you’re running for the hills or running free, you’ll look killer in this font-family tee. Available in asphalt, beast black, or heather, and sizes XS–2XL, you’ll have piece of mind.


Code Shirts Rock t-shirt design

No Class

Live to win in this margin-top tee. You’ll look ace and feel like an overnight sensation. Choose from sizes XS–2XL, aftershock asphalt and bad magic black, with a solid white motif. Wearing this shirt, the world is yours.


Code Shirts Rock t-shirt design

No Class (variant)

Live to win in this margin-top ‘outline variant’ tee. You’ll look ace and feel like an overnight sensation. Choose from sizes XS–2XL, aftershock asphalt and bomber black, with a solid white motif. Wearing this shirt, the world is yours.


Code Shirts Rock t-shirt design

Pretty Vacant

Never mind the other tees, here’s the max-width. Whether you’re ready for holidays in the sun, or you’re staying home feeling pretty vacant, do it your way with classic black and white, or with punk pink, or gob green motifs. Available in sizes XS–2XL.


Code Shirts Rock t-shirt design

Anarchy in the U.K.

Never mind the other tees, here’s the gob green max-width. Whether you’re ready for holidays in the sun, or you’re staying home feeling pretty vacant, do it your way with classic black and white, or with punk pink, or gob green motifs. Available in sizes XS–2XL.


Code Shirts Rock t-shirt design

God Save the Queen

Never mind the other tees, here’s the punk pink max-width. Whether you’re ready for holidays in the sun, or you’re staying home feeling pretty vacant, do it your way with classic black and white, or with punk pink, or gob green motifs. Available in sizes XS–2XL.


Code Shirts Rock t-shirt design

Rust in Peace

The world needs a hero and it could be you wearing this metatag tee. Available in sizes XS–2XL—so far, so good—asphalt, black, and heather, with a white embossed-look motif. So who’s buying?


Code Shirts Rock t-shirt design

Supersonic

You’ll definitely, maybe, look like supersonic wearing this outline tee. Don’t look back in anger, choose wonderwall white, be here now black, or hello colours, and look like the rock ’n’ roll star you are. Available in sizes XS–2XL.


Code Shirts Rock t-shirt design

Supersonic (variant)

You’ll definitely, maybe, look like supersonic wearing this outline tee. Don’t look back in anger, choose wonderwall white, be here now black, or hello colours, and look like the rock ’n’ roll star you are. Available in sizes XS–2XL.


Code Shirts Rock t-shirt design

Love Bites

Ever fallen in love (with something you shouldn’t’ve?) What do you get? A high quality text-transform tee which will make everyone love you more. Choose from sizes XS–2XL and a set of colours.


Code Shirts Rock t-shirt design

Orgasm Addict

Ever fallen in love (with something you shouldn’t’ve?) What do you get? A high quality text-transform tee which will make everyone love you more. Choose from sizes XS–2XL and a set of colours.


Code Shirts Rock t-shirt design

Please Don’t Touch (limited to 50)

Live to win in this limited margin-top tee. You’ll look ace and feel like an overnight sensation. Choose from sizes XS–2XL, in bad magic black with a rock ‘n’ roll red motif. Wearing this shirt, the world is yours.


Every Code ♠ Shirts ♠ Rock design is printed on demand by Printful on a Bella + Canvas 3001 unisex short sleeve jersey shirt with a tear-away label. All items ship worldwide in an average of 5–20 days. The shop will be open at 2pm (UK) on Tuesday 19th November.

]]>
<![CDATA[Smashing Printed Magazine]]> https://stuffandnonsense.co.uk/blog/smashing-printed-magazine https://stuffandnonsense.co.uk/blog/smashing-printed-magazine Thu, 25 Jul 2019 00:00:00 +0100 It always baffled me that with a name like Smashing Magazine, my friends at Smashing hadn’t published a, errr, magazine. Well, now they have.

]]> I knew about the Smashing Printed Magazine a few months ago because, following on from his incredible work on Art Direction for the Web, Smashing challenged my son Alex to work on design and typesetting for the printed magazine. You might think I’d be biased, but I’m also incredibly critical. Seeing this magazine’s design makes me incredibly proud.

This first issue is devoted to ethics, privacy, and security, with articles by Rachel Andrew, Cennydd Bowles, Heather Burns, Trine Falbe, Morten Rand-Hendriksen, Laura Kalbag, Stuart Langridge, and of course, Vitaly Friedman. It’s available now.

Download a free sample

]]>
<![CDATA[Inspired Design Decisions webinar: Ernest Journal]]> https://stuffandnonsense.co.uk/blog/inspired-design-decisions-webinar-ernest-journal https://stuffandnonsense.co.uk/blog/inspired-design-decisions-webinar-ernest-journal Thu, 11 Jul 2019 00:00:00 +0100 I’ve just finished my third (in my series of 12) Inspired Design Decisions webinars for Smashing Magazine. This month, I spoke about how to combine consistency with variety to create a consistent experience of a design across an entire product, publication, or website.

]]> Inspired Design Decisions Issue 3
Inspired Design Decisions Issue 3

I started the conversation with the story about the fact I’d burned out a few years ago, and how spending time studying art direction and editorial design had helped me rediscover my enthusiasm for design.

Magazines have become a real passion of mine, and in this week’s webinar, I focus on Ernest Journal, a small magazine which is none-the-less packed with design ideas.

Ernest Journal © Ernest Journal

I talk about how Bootstrap doesn’t create unimaginative designs. Lazy designers do. Why there’s no reason frameworks can’t be used to create layouts as engaging as Ernest Journal. I demonstrate examples of designs inspired by Ernest Journal and how to connect a variety of layouts into a design which feels like a unified whole and not a collection of separate pieces. Finally, I show how to use colour to better connect design elements with content and how to build a palette of inspiring colours.

Inspired Design Decisions Issue 3
Inspired Design Decisions Issue 3

If you missed today’s webinar, an article based on it will be published free on Smashing Magazine next month.


Speaking of Smashing Magazine, they’ve published the first two Inspired Design Decisions articles:

Next month, I’ll talk about how Alexey Brodovitch has inspired me to think of new ways to combine images and text within a layout. I hope I’ll see you then.

]]>
<![CDATA[CSS generated content and Google Chrome translate scores an own goal]]> https://stuffandnonsense.co.uk/blog/css-generated-content-and-google-chrome-translate-scores-an-own-goal https://stuffandnonsense.co.uk/blog/css-generated-content-and-google-chrome-translate-scores-an-own-goal Mon, 01 Jul 2019 00:00:00 +0100 While developing prototype designs for a French football magazine, I came across a strange bug when Chrome’s translate feature comes into contact with CSS generated content.

]]> One of my current projects involves redesigning the website for French football magazine SO FOOT’s website. Being an “I can’t design without content” kind of guy, that means using examples of articles from their current website which, of course, are in French.

Part of my brief is to bring the design of the website closer to that of their printed magazine, with its eclectic mix of typefaces and styles. I love that Mandy Michael has been experimenting with Text Effects, so much so that I included a couple of her examples in Art Direction for the Web.

The final result working in Safari
The final result I’m developing; three typefaces layered within a single element.

Mandy’s techniques often involve a small amount of presentational HTML, but not so much I’ll get a red card. To achieve the effect, I add add a data- attribute to my text, in this case a headline:

<h1 class="type-family-jakob" data-heading="France-Norvège">France-Norvège</h1>

To create this three-dimensional effect using multiple fonts, I need the value of that attribute so I can position it before and after the headline:

[class*="type-family"] {
position: relative; }

[class*="type-family"]:before,
[class*="type-family"]:after {
content: attr(data-heading);
position: absolute;
z-index: 1;
overflow: hidden;
left: 0;
top: 0;
font-size: inherit;
font-weight: normal; }

NB: You can also display content from attribute values, including alt, title, and in this case data-. Data attributes keep information hidden from everything including screen readers, but they remain accessible to CSS and addressable by scripts.

To complete the effect, I layer the headline and its two pseudo-elements. Each one uses a different font-family value:

.type-family-festivo {
font-family: 'FestivoLetters';
color: rgb(255,255,255); }

.type-family-festivo:before {
z-index: 1;
font-family: 'FestivoLettersPattern';
color: rgba(255,255,255,.5); }

.type-family-festivo:after {
z-index: 2;
font-family: 'FestivoLetters09';
color: rgb(255,255,255); }

The effect is exactly as I predicted using Safari, which is my day-to-day browser.

The final result working in Safari (again)
Safari screenshot of the final result; three typefaces layered within a single element.

So far, so good. Then, I checked my prototype in Google Chrome and let’s just say the result wasn’t what I had expected.

The final result not working in Google Chrome
Google Chrome screenshot; the page displays two languages, English and un peu de français.

After scratching my head for a while, I remembered that il était une fois, I’d told Google Chrome to always translate French into English.


The W3C states we should:

Always use a language attribute on the html tag to declare the default language of the text in the page. When the page contains content in another language, add a language attribute to an element surrounding that content.

https://www.w3.org/International/questions/qa-html-language-declarations

As I’m designing a website for a french audience, I’d added lang="fr" to the html element in my templates:

<html lang="fr">

Google Chrome translates the content of a page, but not content that’s generated by CSS, so in my design I was seeing the translated copy from my headline’s <h1> element, but the original French from content generated from its data- attribute.

I hadn’t come across this problem before, but found several ways to prevent it. Google’s Help Centre suggests adding a proprietary meta element with a content value of notranslate:

<meta name="google" content="notranslate" />

This will stop Google Chrome from translating any content in a document, which seems to me like the HTML equivalent of drop-kicking a supporter. Luckily, Google offers a better solution in the form of the notranslate class attribute which will also prevent Chrome translating content. You could apply that class to the whole document too:

<html lang="fr" class="notranslate">

But, it’s best to limit what shouldn’t be translated to when we use CSS generated content with visible flow content:

<h1 class="type-family-jakob notranslate" data-heading="France-Norvège">France-Norvège</h1>
The final result now working in Google Chrome
Google Chrome screenshot of the final result; three typefaces layered within a single element and a win.

Google Chrome: 0
CSS Generated Content: 1


What a result!


Update: Eric Eggert let me know that using data- attributes as a source for CSS generated content means the content of my headline will be read by screen readers three times; once for the headline text, once for the :before and another for the :after pseudo-elements. Switching from data- to an area-label attribute prevents that from happening while still achieving the same visual result:

<h1 class="type-family-jakob notranslate" aria-label="France-Norvège">France-Norvège</h1>

[class*="type-family"] {
position: relative; }

[class*="type-family"]:before,
[class*="type-family"]:after {
content: attr(aria-label);
position: absolute;
z-index: 1;
overflow: hidden;
left: 0;
top: 0;
font-size: inherit;
font-weight: normal; }
]]>
<![CDATA[Putting together my go bag]]> https://stuffandnonsense.co.uk/blog/putting-together-my-go-bag https://stuffandnonsense.co.uk/blog/putting-together-my-go-bag Fri, 21 Jun 2019 00:00:00 +0100 These days, most of my travel is to my biggest clients in France and Switzerland, but there’s also travel to speak at the occasional conference, and the odd business trip. Every time I travel, I take with me the same set of cables and chargers.

]]> Prepping for each trip means making sure I have everything I need while I’m away, and to make getting up and going easier, I decided to put together a go bag which contains duplicates of all my cables and chargers. I keep these in my go bag all the time and never get them mixed up with the ones I keep connected in my studio.

I know it’s a luxury to have two of every cable and charger, but knowing when I pick up my bag that it contains everything I need is both reassuring and a (small) time saver.

The bag

When I was choosing a backpack, I couldn’t justify to myself the cost of a Peak Design “Everyday Backpack” so plumped instead for the cheaper XD Design Bobby Original Anti-Theft laptop backpack. This has been a good backpack, but after using it everyday for almost two years, it’s starting to show its age as The outer material on corners and edges are now flaking off. When I’m next feeling flush, I’ll take the plunge and buy the Peak I always wanted.

Peak Design also make a Tech Pouch, but nice though it is, for the moment at least, I’ll carry on carrying my cables in a free pouch I picked up at UX Australia a couple of years ago. It may not be high class, but it does the job nicely.


Connectivity

I gave up buying replacement Apple cables years ago, as they’re expensive and far less durable than many third-party cables. I buy Anker cables almost exclusively and so far I’ve not needed to replace a single one. I have Anker USB-A–Lightning cables in my kitchen and studio. In my Subaru I have three longer Anker USB-A –Lightning cables (one for each of us) and two Anker 30w Dual USB fast chargers.

I went for Anker cables for my go bag too, and have a second set of:

Anker USB-C to Lightning cable (3ft/.9m)

For charging my iPhone directly from my laptop. Apple’s own 1m cable is £19, but I much prefer the feel and reliability of Anker’s nylon braided cable. I don’t ever find the missing 10cm inconvenient.

Anker PowerLine II 3-in-1 cable, Lightning/USB-C/Micro USB

I only use Micro USB to charge my vape, and although there are cheaper Micro USB-Cables available, this 3-in-1 cable comes in handy for Lightning and USB-C too.

AmazonBasics high-speed HDMI cable

Although I don’t use it often, it’s handy to carry an HDMI cable for connecting to hotel room TVs. This inexpensive cable from AmazonBasics is all that I need for connecting my laptop to a TV (via a USB-C Hub.)

Anker 7-in-1 Premium USB-C hub

There’s plenty of choice USB-C hubs, but I didn’t look much further than Anker. This 7-in-1 Premium USB-C hub offers 60w power delivery but I haven’t needed to pass through power yet. It has three USB-A ports, HDMI, plus SD and microSD card slots.


Portable power

QINUKER 87W USB-C power adapter/charger

It’s definitely an extravagance to carry a duplicate power charger for my laptop, but I can justify that by not spending around £80 on Apple’s 87w charger. Instead, I spent £35 on a cheaper Chinese alternative.

Sicotool magnetic USB-C adapter

I miss MagSafe more than anything on my latest laptop, so I bought a magnetic USB-C adapter which connects to the end of my charging cable. This means a leaving a small magnetic adapter permanently attached to my laptop, which is far from ideal, but I’m happy having the peace of mind I get from something close to MagSafe. There are several options available, but I chose this Sicotool adaptor as it has a right angle connector which keeps the cable flush with the side of my laptop.

Anker PowerCore 20100 ultra-high capacity power bank

For power on the go, I chose this power bank from Anker. It charges overnight and lasts me days topping up my phone and vape. At some point I’d like a power bank capable of charging my laptop, but for now this portable power bank is perfect.


Various items

What else is in my bag? The usual suspects:

Apple MacBook Pro 13" (2019)

I recently replaced my 2013 MacBook Pro with the 2019 model and I couldn’t be happier, especially as I had major concerns about the feel of its troublesome butterfly mechanism keyboard. Touch wood, the keyboard has been reliable and I’m enjoying the feel of it. I’m happy with its size and weight, and while the TouchBar hardly gets touched, I do enjoy using Touch ID. Best of all? The screen. It’s the best I’ve ever owned. I maxed out this 13" machine with 32Mb RAM and a 512Tb SSD drive.

UESWILL Smooth matte hard-shell case/cover

Fits snuggly around my 2019 13" MacBook Pro and protects it from scratches. Cheap at less than £15 on Amazon but the matte finish feels great in my hands and the quality seems comparable with cases which are much more expensive.

To keep my laptop looking smart, I fitted a UESWILL Smooth matte hard-shell case/cover. At less than £15, it’s considerably cheaper than the InCase cases sold in Apple stores and the matte finish feels very nice. I chose the black option for my space grey laptop.

Apple iPhone XS Max

Last year I upgraded my iPhone 6s to a space grey XS Max. It’s ridiculously big but I soon got used to the size and now I can’t imagine using a smaller phone. It’s price is ridiculous too, so I bought it on Apple’s upgrade programme where I can spread the cost over 18 months and upgrade every year if I want to. My reason for buying an iPhone XS rather than an XR was the 2x telephoto camera lens and I haven’t regretted that decision for a moment.

Apple AirPods with wireless charging case (2019)

I’m new to AirPods and only recently treated myself to a wireless charging pair.

iKNOWTECH Silicon AirPods Case

To keep the AirPods case protected—and to satisfy my obsession with black devices—I bought a iKNOWTECH Silicon AirPods Case for less than £6. Now, I’m less worried about dropping my AirPods and damaging the expensive wireless charging case.


When I was putting together this list of items for my go bag, I realised that although I spend as much as can afford on my hardware—laptop, phone, and earbuds—I usually save by buying much cheaper cables and cases. I don’t mind no name brands as long as they do their job, feel good, and aren’t emblazoned with branding which detracts from the look of my more expensive hardware.

]]>
<![CDATA[Inspired Design Decisions webinar: Pressing Matters]]> https://stuffandnonsense.co.uk/blog/inspired-design-decisions-webinar-pressing-matters https://stuffandnonsense.co.uk/blog/inspired-design-decisions-webinar-pressing-matters Mon, 20 May 2019 00:00:00 +0100 I’m looking forward to tomorrow afternoon (May 21st,) and sitting down with Smashing Magazine’s Vitaly Friedman for the second of my Inspired Design Decisions webinars, exclusive for Smashing members. This webinar is my deepest dive so far into the concept of compound grids and how to use them.

]]> Inspired Design Decisions
Inspired Design Decisions Issue 2

Grids have a long and varied history in design, from the earliest books, through movements like constructivism and the International Typographic Style, right up to the present-day popularity of grids in frameworks like Bootstrap and material design.

A compound grid is two or more grids of any type—column, modular, symmetrical, and asymmetrical—on one page. They can occupy separate areas or overlap. It’s the interplay of the two grids which makes this compound layout more interesting than a single grid.

Inspired Design Decisions
Inspired Design Decisions Issue 2

In this, the second webinar in this monthly series, I will teach you how to expand your repertoire of layouts by combining more than one grid into a compound grid. I explain why to design with, and how to develop with compound grids.

  • How combining grids increases design flexibility
  • The difference between layered and stacked compound grids
  • How to use 2 + 3 columns, 3 + 4, and 4 + 6 columns
Inspired Design Decisions
Inspired Design Decisions Issue 2

Over the hour-long webinar, I’ll also introduce you to the inspiring Pressing Matters magazine and Swiss artist and typographer Karl Gerstner with whom I share a strange connection.

Smashing members get access to:

  • The beautifully art-directed article (PDF)
  • Full code examples
  • A one hour webinar with slides

Save your seat on Smashing TV.

]]>