<![CDATA[All that Malarkey]]> https://stuffandnonsense.co.uk Sun, 28 Jun 2020 00:00:00 +0100 en-us © Copyright 2020 3600 <![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.

]]>
<![CDATA[A memo to product and website designers]]> https://stuffandnonsense.co.uk/blog/a-memo-to-product-and-website-designers https://stuffandnonsense.co.uk/blog/a-memo-to-product-and-website-designers Mon, 13 May 2019 00:00:00 +0100 With modern CSS properties including Grid, Flexbox, Multi-column, and Shapes, designers have countless opportunities to make diverse, and engaging designs. Sadly, many of us haven’t had the memo which gives us permission to make more interesting work, so I decided to write that memo. Feel free to modify the message for your company or organisation and of course, circulate it to the designers on your team.

]]>

Memo to designers

Team


For years we’ve told each other the web isn’t print. We’ve told ourselves the things we admire in other design media cannot—and sometimes should not—be used online. We needn’t think that anymore and I’m writing to tell you about five design techniques from other media we can accomplish on the web today. These will make the web more interesting to work on and for people who use what we make.

Aligning elements to flowlines

In print media, it’s common to see elements aligned along their bottom edges. For example, we often see captions aligned to the bottom of an image instead of its top.

A more interesting design aligning elements to the bottom. (Examples from Art Direction for the Web by Andy Clarke.)

In the past, aligning elements to anything other than the top of their boxes was difficult to accomplish, but today we can align items easily to the bottom, center, or top using just a single CSS Grid or Flexbox style. There’s also no reason why captions need to stay underneath images as with a couple of lines of CSS we can place them above, left, or to the right of a picture.

Bespoke and diverse grid layouts

Frameworks including Bootstrap made layout easy and their off-the-shelf grids were useful when implementing responsive designs because their twelve columns are divisible by four, three, and two. Sadly, using the same grid time and time again meant our designs were often barely distinguishable from one another.

A diverse range of layouts are now easy to implement. (Examples from Art Direction for the Web by Andy Clarke.)

Today, modern CSS properties including CSS Grid and Flexbox make it just as easy to implement a diverse range of layouts including column, compound, and modular grids. Designing our own grids will help make our products and websites more distinctive.

First-lines and initial letters

Just like in the offline world, attention to typographic details makes a big difference. Drop and initial caps can be both decorative and useful in that they mark where someone should start reading. Initial caps sit on the baseline and drop caps fall below it.

Left: Emphasising the first-line of this first paragraph. Right: Study manuscripts from centuries ago and you’ll find that one of the most distinctive aspects of their design was the use of large capitals. (Examples from Art Direction for the Web by Andy Clarke.)

On magazine and newspaper pages, you’ll often find the first word or line in the first paragraph emphasised in some way. Sometimes set in bold, other times uppercase. Drop caps, initial caps, and first-line treatments are rarely seen on the web but are easy to accomplish using CSS.

Irregular shapes

One of the complaints levelled at website design over the years has been that it’s boxy and rectangular. This was true, to an extent. However, boxy layouts needn’t now be the norm. Organic shapes add movement, which draws people to them and helps to connect an audience with a story.

Top: A simple polygon clips this photograph to form an arrow which points to the content. Bottom: Clipping paths can turn images into unusual shapes like the coastline of Australia. (Examples from Art Direction for the Web by Andy Clarke.)

Thankfully, we don’t need to struggle with hacks any more, because CSS clip-path and Shapes make using irregular shapes more accessible for the web.

Wrapping text around shapes

One aspect of print design we wished was more easily achievable on the web was wrapping text around irregularly shaped images. For years developers dreamt up elaborate hacks using presentational HTML in a series of attempts at emulating print layouts. Thankfully, we don’t need to struggle with hacks any more.

Above: Text wrapped around a shape can make a design appear more polished. (Examples from Art Direction for the Web by Andy Clarke.)

CSS properties like clip-path and shape-outside give us countless opportunities to use art direction to capture someone’s attention and then keep them engaged.

Sources of inspiration

Of course, there are more than those five ways to make designs which are engaging and interesting. Finding those ways is your job as a designer, but here are five places you can look for inspiration:

  1. Editorial design
  2. Graphic design
  3. Magazines
  4. Posters
  5. Literally everywhere other than the web

What do do next

  1. Experiment with new and unexpected design ideas. Use your imagination without limiting yourself to making designs you’ve been told in the past were difficult to implement or inappropriate for the web.
  2. Share what you make without feeling self-conscious that what you produce has value. You never know, often the simplest idea can start you and others down an unexpected path.
  3. Write about what you make—preferably on your own blog—and describe what you were trying to achieve, the inspiration you found, and the steps you took along the way.

Modern web technologies have opened the door to opportunities to be creative, not for creativity’s sake but to help us express our point of view and that of our companies and customers. They help us to convey important messages more clearly through design and tell more interesting and engaging stories. Through clever use of these technologies, we can make designs which are distinctive, opinionated, and stand apart from framework-based designs and generic templates. It’s important to remember that these technologies cannot do this alone and we also need creative thinking to bring ideas to life.

Now’s the time to start thinking differently about how we design for the web. Today’s the day we’ll all look back on a turning point in the history of our medium.


Sincerely


____________________


My new book, Art Direction for the Web is available now in beautiful hardcover and digital formats from Smashing Magazine. Buy the book and stream the video course.

]]>
<![CDATA[Fair’s fair (use)]]> https://stuffandnonsense.co.uk/blog/fairs-fair-use https://stuffandnonsense.co.uk/blog/fairs-fair-use Fri, 26 Apr 2019 00:00:00 +0100 One message I wanted to put across when writing my new book was that there are already examples of art direction on the web, in products and on websites. I wanted to showcase some examples in a series of case studies.

]]> While I was designing the book, I decided that integrating elements from those examples into the design of my case studies would convey their spirit better than using screen captures of a full web page. I aimed to tell the story of why art direction improved the design more effectively, and I think I succeeded in using this approach.

Art direction for the web case study using ProPublica. I used elements from the website and blended them with the design of the page to better describe the intent.

Examples of art direction for the web are hard to find. One of the examples I used was the Bond Conference which I’d seen used elsewhere and I liked for how its illustrations integrate with the background, text colours, and layout. Bond felt like a good fit with my approach of expressing the spirit of the website through the design of the page in my book.

Left: Case study page. The way I placed the description of the website between the two images was intended to describe the fluid nature of its design. Right top: Bond Conference website (near top.) Right bottom: Bond Conference website (near bottom.)

I was very complimentary when I described the Bond Conference website:

To get the most from your illustration investment, they should be an integral part of any design and not an afterthought. This is some- thing which the designers of the Bond conference website understood very well. Their website illustrations weren’t merely placed on a plain canvas; their smooth shapes and the limited palette inspired the colour and position of typographic elements across their pages. Their page layouts are reminiscent of the cover of a classic fashion magazine, and the typography is equally stylish. However, what matters most is that their designers had a clear vision for the Bond brand and executed it throughout every aspect of their design.

I included a link to the Bond Conference website which itself links to illustrator Lisa Tegtmeier. I also contacted Backerkit, who ran the Bond Conference, via their contact form and asked for information about who designed the conference website. I didn’t receive a reply. Now I’ve been made aware that a better credit and a clarification might be needed.

Art direction for the web case study using ProPublica. I used elements from the website and blended them with the design of the page to better describe the intent.

I and the Smashing editorial team consider using elements from the Bond Conference website in the context of explaining how well-integrated illustrations can help art direction to be Fair Use. If you’re not familiar with Fair Use (in the USA,) Wikipedia defines it like this:

Fair use in the law of the United States permits limited use of copyrighted material without having to first acquire permission from the copyright holder. Fair use is one of the limitations to copyright intended to balance the interests of copyright holders with the public interest in the wider distribution and use of creative works by allowing as a defence to copyright infringement claims certain limited uses that might otherwise be considered infringement.

Examples of fair use in United States copyright law include commentary, search engines, criticism, parody, news reporting, research, and scholarship.

“Commentary,” (constructive) “criticism,” “reporting,” and “scholarship” are all fair descriptions of how I included the Bond Conference assets.

I designed dozens of original examples to illustrate my book.

At the start of the book I wrote, “I’ve tried hard to find the copyright owner for every photograph used in this book. If I missed you, let me know, and I’ll be happy to add missing credits to a future edition.”

Under Fair Use, there’s no requirement to obtain permission to use material like this in this way. In future, I’ll be more cautious.

In books, we don’t typically list everyone who worked on an example—a font designer, photographer, web designer etc. Aside from as a professional courtesy, there’s no requirement to include a credit either. However in hindsight it would have been polite for me to name illustrator Lisa Tegtmeier in the copy.

Working with illustrators is one of my great passions, and I love to work with, and encourage young and talented artists like Natalie Smith whom I commissioned to illustrate all my Hardboiled book covers. Lisa Tegtmeier does fabulous work and she deserves every success. I regret not naming her when I wrote about the Bond Conference website. Because I do everything I can to support artists, I’m sorry I didn’t do that.

Next time I include inspiring examples of work in my books, I’ll add more detailed credits to the appendix, in the same way I do for footnotes, because it’s important to let readers know about the people behind the work. Credit where credit’s due. I can’t say fairer than that.


My thanks to Rachel Andrew and Vitaly Friedman for reviewing this post.

]]>
<![CDATA[A quick shot of gradient text and text-shadow]]> https://stuffandnonsense.co.uk/blog/a-quick-shot-of-gradient-text-and-text-shadow https://stuffandnonsense.co.uk/blog/a-quick-shot-of-gradient-text-and-text-shadow Tue, 23 Apr 2019 00:00:00 +0100 While I was researching typefaces for a new project, I came across Dalton Maag’s case study for Universal TV. The type is beautiful, of course, but it was their graphics which got my attention.

]]> Universal TV by Dalton Maag
Universal TV by Dalton Maag

I haven’t seen much in the way of gradients or shadows lately. Flatness still seems de rigueur, but there’s something about type effects like this which makes me happy, so I spent some time reproducing it in CSS. There’s no need to go wild with gradients, even a small shift in background colours can make a big difference:

body {
background-color: #fa691a;
background-image: linear-gradient(135deg,
#fa691a 0%,
#d72263 50%); }

For the first iteration, I chose a solid colour—midway between those two background colours—for my text:

h1 {
color: #e0354d; }

Unless there’s only a single, point light-source, there’s always more than one shadow cast, harder primary shadows and softer secondary shadows. Fortunately, CSS allows for a comma-separated list of multiple box and text shadows. I used five shadows and RGBA colour values to enable a little of the background colour to show through. This helped to create the three-dimensional effect which lifts the text off the background:

h1 {
text-shadow:
-1px -1px 0 rgba(255,255,255,.5),
1px 1px 0 rgba(0,0,0,.25),
3px 3px 3px rgba(0,0,0,.25),
10px 10px 20px rgba(0,0,0,.5),
20px 40px 40px rgba(0,0,0,.5); }

The result was acceptable, but I wanted to use gradient colours in my text. This required mixing a gradient with two vendor prefixed properties, -webkit-background-clip and -webkit-text-fill-color:

h1 {
background-image: linear-gradient(135deg,
#fa691a 0%,
#d72263 50%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
text-shadow: ‹values›; }

NB:-webkit-text-fill-color is a non-standard property and not on its way to becoming part of any standard. MDN recommends “Do not use it on production sites facing the Web: it will not work for every user.” But don’t let that stop you using it. It’s currently supported by Android Browser, Chrome, Edge, Firefox, Opera, and Safari on both iOS and OSX, all using the -webkit- prefix.

By making my text-fill-color transparent, colour from my shadows showed through, ruining the effect, so I moved those shadows to a pseudo element with content that’s derived from a data- attribute in my HTML:

‹h1 data-text="Art direction for the web"›
Art direction for the web‹/h1›

h1 {
position: relative;
background-image: linear-gradient(‹values›);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent; }

h1:before {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
z-index: -1;
text-shadow: ‹values›; }
Gradient text and text-shadow
Gradient text and text-shadow

With gradient colours in my text, the result was much closer to what I was aiming for, but the semi-transparent black shadows felt a little cold. To solve the problem, I split my shadows across two pseudo elements. The first included the three primary shadows which create the three dimensional effect:

h1:before {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
z-index: -1;
text-shadow: -1px -1px 0 rgba(255,255,255,.5),
1px 1px 0 rgba(0,0,0,.25),
3px 3px 3px rgba(0,0,0,.25); }

The second adds two secondary shadows. For the softest shadow, I replaced the black RGBA colour with a darker version of my background colour and blended it with the page background using a mix-blend-mode value of multiply:

h1:after {
content: attr(data-text);
position: absolute;
top: 0;
left: 0;
z-index: -2;
text-shadow: 10px 10px 20px rgba(0,0,0,.5),
20px 40px 40px #a51d50;
mix-blend-mode: multiply; }

I made a Pen so you can see the code in use and experiment with it yourself:


See the Pen A quick shot of gradient text and text-shadow


I hope we’ll see an end to the flat fad this year and a return to deeper designs which include more gradients and shadows. I know I’ll be using them more, even if it’s just to buck the trend.


Mandy Michael is the queen of text effects and has compiled quite a collection of Pens.

]]>
<![CDATA[Art Direction For The Web Using CSS Shapes: Article on Smashing Magazine]]> https://stuffandnonsense.co.uk/blog/art-direction-for-the-web-using-css-shapes-article-on-smashing-magazine https://stuffandnonsense.co.uk/blog/art-direction-for-the-web-using-css-shapes-article-on-smashing-magazine Thu, 11 Apr 2019 00:00:00 +0100 Last year, Rachel Andrew wrote an article that took a new look at CSS Shapes in which she reintroduced readers to the basics of using CSS Shapes. In a new tutorial for Smashing Magazine, I expand on the topic of Art Direction for the Web with CSS Shapes to create exciting and inspired new design ideas.

]]> For anyone keen to understand how to use properties like shape-outside, shape-margin, and shape-image-threshold, Rachel’s is the ideal primer. I’ve seen many examples of using the properties, but very few go beyond Basic Shapes, including circle(), ellipse(), inset(). Even examples using polygon() shapes rarely go far beyond them. Considering the creative opportunities CSS Shapes offer, this is disappointing. But, I’m sure that with a little inspiration and imagination, we can make more distinctive and engaging designs. So in this article, I show you how to use CSS Shapes to create five different types of layout. They are:

  1. V-shapes
  2. Z-patterns
  3. Curves
  4. Diagonals
  5. Rotated shapes
Art Direction for the Web with CSS Shapes
Art Direction for the Web with CSS Shapes. Download the examples.

I hope this tutorial will inspire web designers to create designs which are distinctive and engaging. It’s also for front-end developers who want to learn how to implement those designs using the most efficient HTML and CSS.

Read Art Direction for the Web with CSS Shapes on Smashing Magazine now. You can download the examples from this article too.

]]>
<![CDATA[My new Inspired Design Decisions series of articles and webinars for Smashing Members]]> https://stuffandnonsense.co.uk/blog/my-new-inspired-design-decisions-series-of-articles-and-webinars-for-smashing-members https://stuffandnonsense.co.uk/blog/my-new-inspired-design-decisions-series-of-articles-and-webinars-for-smashing-members Tue, 09 Apr 2019 00:00:00 +0100 I’ve written plenty of times before about how important it can be to look offline for inspiration to improve the things we make online. Last year, a few friends and I met in London for an inspiring visit to the Photographers Gallery.

]]> No trip to The Smoke is complete without a stop at Magma, and I bought several new magazines. As I explained my inspiration addition, my friend Al Power suggested I write about why I find magazine design inspiring and how they influences my work.

That conversation sparked the idea for an article and webinar series on making inspired design decisions. Every month, I’ll choose a publication, discuss what makes its design distinctive, and how we might apply that distinctiveness to do better work for the web. As an enthusiastic user of HTML and CSS, I’ll also explain how to implement new ideas using the latest technologies; CSS Grid, Flexbox, and Shapes.

Inspired Design Decisions
Inspired Design Decisions

In the first edition of Inspired Design Decisions, I “Say hello to skinny columns,” a technique which adds one extra narrow column to an otherwise conventional column grid. I explain how to design with, then implement skinny columns using meaningful markup and efficient CSS. I also explain how to design using modular grids to fill your designs with energy.

Inspired Design Decisions
Inspired Design Decisions

Throughout this year, Inspired Design Decisions will:

  • Examine an influential designer or piece of work
  • Teach the principles which make it exceptional
  • Apply those principles to design for the web
  • Describe the code someone would need to implement it
Inspired Design Decisions
Inspired Design Decisions

Each month, there will be:

  • A beautifully art-directed article (HTML/CSS and PDF)
  • Full code examples
  • A one hour webinar

The first Inspired Design Decisions webinar will be held on Smashing TV today (9th April 2019). There will be a 45 minute talk, plus 30 minutes of Q&A. Save your seat here.


I’d like to say thanks again to Al Power for the inspiration, and to Smashing Magazine for making this Inspired Design Decisions series possible.

]]>
<![CDATA[A Smashing Art Direction For The Web webinar to celebrate the launch of my new book]]> https://stuffandnonsense.co.uk/blog/a-smashing-art-direction-for-the-web-webinar-to-celebrate-the-launch-of-my-new-book https://stuffandnonsense.co.uk/blog/a-smashing-art-direction-for-the-web-webinar-to-celebrate-the-launch-of-my-new-book Thu, 28 Mar 2019 00:00:00 +0000 To help celebrate the launch of Art Direction For The Web, Smashing TV’s Bruce, Scott and I spent an hour talking about my new book. The video from that conversation is now on the YouTube.

]]> .embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
]]>
<![CDATA[Over a year in the making, Art Direction for the Web will be available tomorrow]]> https://stuffandnonsense.co.uk/blog/over-a-year-in-the-making-art-direction-for-the-web-will-be-available-tomorrow https://stuffandnonsense.co.uk/blog/over-a-year-in-the-making-art-direction-for-the-web-will-be-available-tomorrow Mon, 25 Mar 2019 00:00:00 +0000 As I mentioned on Friday, it’s taken much, much longer to produce, and is itself much, much longer than I’d planned, but my fourth book, Art Direction for the Web, will be published tomorrow. Here’s a little more about what you’ll find in the book’s almost 350 pages.

]]> Art Direction for the Web contents pages
Above—Art Direction for the Web contents pages. © Andy Clarke.

Art direction has been part of advertising and print design for over 100 years, but on the web art direction is rare and there have been few meaningful conversations about it. This might be because we’ve been fixated on designing digital products. It may be because we’ve been preoccupied with making websites responsive. It might simply be that many designers and developers were never taught about art direction. In this book I explain art direction, what it means, why it matters, and who can do it.

Explaining art direction
Part 1: Explaining art direction. © Andy Clarke.

Explaining art direction

Art direction doesn’t only happen within the walls of an advertising agency, or for pages of a glossy magazine. It happens every day on the web when you consider how someone will feel when they read your content, buy something in your store, or sign up for your product.

  • 1. What art direction means
  • 2. One hundred years of art direction
  • 3. Art-directing experiences
  • 4. Art direction and creative teams
Designing for art direction
Part 2: Designing for art direction. © Andy Clarke.

Designing for art direction

Grids too are fundamental to someone’s understanding of a story, and you can use them for more than merely aligning content to the edges of columns. Typography can be expressive as well as readable. Images can have an enormous impact on how people perceive our designs. You needn’t have been to art school to learn and apply the principles I teach you. They’re something which everyone can use.

  • 5. Principles of design
  • 6. Directing grids
  • 7. Directing type
  • 8. Directing pictures
Developing for art direction
Part 3: Developing for art direction. © Andy Clarke.

Developing for art direction

What good is art direction for the web if we don’t have the layout or other technologies we need to get the results we’re aiming for? Guess what? We do. Whether you make websites for a business, charity, government, or news outlet and you want to tell stories more effectively, you now have everything you need to make great art direction for the web.

  • 9. Developing layouts with CSS Grid
  • 10. Developing components with Flexbox
  • 11. Developing typography
  • 12. Developing with images
Wheel Man companion website
Above—Wheel Man companion website. © Andy Clarke.

The big day

Art Direction for the Web will be published tomorrow, Tuesday 26th March, from Smashing Magazine. eBook and PDF versions will downloadable tomorrow with the beautifully printed hardbound edition shipping three weeks later.

I’m hosting a free Art Direction for the Web webinar on Smashing TV tomorrow too, where I’ll discuss many of the topics from the book and answer questions from people attending. I hope I’ll see you then.

]]>
<![CDATA[To celebrate the launch of my new book, I’m offering big discounts on my Art Direction for the Web video course]]> https://stuffandnonsense.co.uk/blog/big-discounts-on-my-art-direction-for-the-web-video-course https://stuffandnonsense.co.uk/blog/big-discounts-on-my-art-direction-for-the-web-video-course Mon, 25 Mar 2019 00:00:00 +0000 This Art Direction for the Web video course is for web designers and developers who want to understand art direction and how to make digital products and websites better.

]]>

If you haven’t bought the video course yet, it’s heavily discounted this week to coincide with the launch of the book. Use the discount codes:

  • aceofspades for 50% off (limited to 10 downloads)
  • bomber for 25% off (limited to 50 downloads)
  • ironfist for 15% off

What you’ll learn

1 Introduction 3:24
2 Understanding Art Direction 9:18
3 Brand Values and Art Direction 6:48
4 Deciding Your Design Principles 7:16
5 Creating Audience Personas and User Stories 8:07
6 Designing a Customer Journey 7:58
7 Deciding How You Want People to Feel 7:07
8 Creating a Narrative 6:38
9 Conclusion 1:53
10 Bloopers 1:13

What you’ll recieve

  • Video course (9 episodes, 1hr)
  • PDF worksheets
  • 30+ highly original, responsive HTML/CSS examples

I strongly recommend this course for anyone interested in Art Direction for the web. Andy explains the process at his core and all the fundamentals. The course is engaging and perfectly presented. I look forward to buy his book to dive deeper into these topics!

The feedback on this course has been very positive. If you’ve been sitting on the fence about buying it, now would be a good time to get off and get my Art Direction for the Web video course.

]]>
<![CDATA[Did you buy my Art Direction for the Web video course on Vimeo?]]> https://stuffandnonsense.co.uk/blog/did-you-buy-my-art-direction-for-the-web-video-course-on-vimeo https://stuffandnonsense.co.uk/blog/did-you-buy-my-art-direction-for-the-web-video-course-on-vimeo Fri, 22 Mar 2019 00:00:00 +0000 Did you buy my Art Direction for the Web video course on Vimeo? If you did, you’re entitled to free copies of the ePub, Amazon Kindle, and PDF versions of my new Art Direction for the Web book.

]]> Vimeo doesn’t give out information about who bought the video course—something I wish I’d known when I set up my video store there—so unfortunately I’ve no names or email addresses to send the digital files to.

If you bought the video course on Vimeo, please send a copy of your receipt along with your name and email address to go.ape@stuffandnonsense.co.uk and I’ll send you a link to download those files.

If you haven’t bought the Art Direction for the Web video course yet, it’s heavily discounted this week to coincide with the launch of the book. Use the discount codes:

  • aceofspades for 50% off (limited to 10 downloads)
  • bomber for 25% off (limited to 50 downloads)
  • ironfist for 15% off
]]>
<![CDATA[The story behind Art Direction for the Web]]> https://stuffandnonsense.co.uk/blog/the-story-behind-art-direction-for-the-web https://stuffandnonsense.co.uk/blog/the-story-behind-art-direction-for-the-web Fri, 22 Mar 2019 00:00:00 +0000 It’s taken much, much longer to produce, and is itself much, much longer than I’d planned, but my fourth book, Art Direction for the Web, will, at last, be published on on Tuesday 26th March by my friends at Smashing Magazine. Here’s the story behind how it happened.

]]> After the release of Hardboiled Web Design Fifth Anniversary Edition in late 2015, I planned to write a series of three Hardboiled Web Design Shots. I intended these to be short books, around 100–120 pages each, which I wanted to publish in 2016. I even commissioned Natalie Smith to illustrate the covers. Well, those books didn’t happen as I’d planned, but seeing Art Direction for the Web now, I’m happy they didn’t.

Art Direction for the Web Front cover concepts
Top—Final production artwork for the back and front cover of Art Direction for the Web. Bottom—I explored several front cover design options.

Art direction has been part of advertising and print design for over 100 years, but on the web art direction is rare and there have been few meaningful conversations about it. This might be because we’ve been fixated on designing digital products. It may be because we’ve been preoccupied with making websites responsive. It might just be that many designers and developers were never taught about art direction. In his 2001 book Taking Your Talent to the Web Jeffrey Zeldman wrote:

On the web, art direction is rare, partly because much of the work is about guiding users rather than telegraphing concepts, but also because few design schools teach art direction.

That’s the reason why I wanted to write Art Direction for the Web; to teach people what art direction means, why it matters and who can do it.

Art Direction for the Web contents pages
Above—Art Direction for the Web contents pages. © Andy Clarke.

When I started writing in January ’18, my plan was still to write a short book. But as I outlined the topics I wanted to write about, it quickly became apparent this book couldn’t be squeezed into 100 pages. There are twelve chapters across three parts in the book:

Explaining art direction
Part 1: Explaining art direction. © Andy Clarke.

Explaining art direction

  • 1. What art direction means
  • 2. One hundred years of art direction
  • 3. Art-directing experiences
  • 4. Art direction and creative teams
Designing for art direction
Part 2: Designing for art direction. © Andy Clarke.

Designing for art direction

  • 5. Principles of design
  • 6. Directing grids
  • 7. Directing type
  • 8. Directing pictures
Developing for art direction
Part 3: Developing for art direction. © Andy Clarke.

Developing for art direction

  • 9. Developing layouts with CSS Grid
  • 10. Developing components with Flexbox
  • 11. Developing typography
  • 12. Developing with images

Plus a foreword by Trent Walton, and suggestions for further reading.

Get acquainted with Wheel Man

To help me describe how to art-direct designs for products and websites, I designed Wheel Man—an app for booking a fast car and a getaway driver—plus a companion website. The process of creating the dozens of brand new Wheel Man examples, then developing, and testing them itself took over three months.

Wheel Man companion website
Above—Wheel Man companion website. © Andy Clarke.

I’m obsessive when it comes to the examples I design for my books. I consider every detail as if it were a client project, right down to what’s written in each example. This being a Hardboiled Web Design book, I needed a strong theme, so the examples in Art Direction for the Web are all related to famous British criminals, their robberies, and the London gangland they inhabited.

British criminals, robberies, and London gangland
Above—British criminals, robberies, and London gangland. © Andy Clarke.

Another theme is getaways, so for several weeks, Sue researched how to get away, including assuming a new identity, buying a fake passport, destroying evidence, and hiding out. Her research was so thorough she became anxious about her search history.

Editing

A successful book needs great editing as much as good content. Owen Gregory has now worked with me on three book projects and knows my process and writing style well. He worked on three rounds of editing:

  1. First draft
  2. Second round before typesetting
  3. Third round proofreading

Rachel Andrew is a brilliant technical editor and the only person I wanted to review my code. She not only considered my technical writing but also made significant contributions to the CSS Grid and Flexbox chapters concerning accessibility.

Design and typesetting

When Smashing Magazine began typesetting Art Direction for the Web in late 2018, they realised that the design of this book was more complicated than anything they’d published before. While certain aspects of its design needed to complement the foundation styles used in every Smashing book, a book about art direction required special attention.

With that in mind, over the 2018 Christmas holiday, I devised a new grid system for the book. This grid combined Smashing’s standard typographic layout with a modular grid where modules could be joined to form larger spacial zones. This method for creating compound grids is one I discuss in detail in the book itself.

Armed with this new compound grid and scamps to illustrate how to use it, Smashing turned to one of the best book designers and typesetters I know—my son Alex—to produce the finished book. Alex worked on the book’s 350 pages with incredible attention to detail.

Almost every evening for two months, Alex and I used Appear.in to video chat, share his screen, and work through every aspect of the layout. I enjoyed every single minute working with him.

Book production

Once Alex had passed his InDesign files to Smashing Magazine, they took care of CMYK conversions, final print production, and making digital versions. To maintain as much of the printed book design as possible, they hand-coded these versions as XHTML and converted them to ePub and Amazon Kindle formats using their own suite of command line tools.

Of course, the best way to experience Art Direction for the Web is by getting your hands on a printed copy. Smashing Magazine has been raising its production values consistently, and my new book will be hardbound, with a ribbon place marker which matches the red colour used throughout the book. I think the quality of Art Direction for the Web will eclipse all my previous books and I cannot wait to see it in print.

Art Direction for the Web
The best way to experience Art Direction for the Web is a printed copy. © Andy Clarke.

Acknowledgements

I know it’s a cliche, but although my name is on the cover, this book was an incredible team effort. Owen Gregory is the best editor in the business. Rachel Andrew is a brilliant technical editor and the only person I wanted to review my code. My design hero Trent Walton wrote the foreword. Smashing Magazine’s Markus Seyfferth handled print production and Cosima Mielke brilliantly translated the print design into an eBook. Dr Alex Clarke typeset the book and made me the proudest dad, and none of it would’ve been possible without my wife, Sue. She famously threatened to hunt down and kill the next person who asked me to write a book, but without her smart thinking and encouragement, this one wouldn’t have been written.

The pay-off

Art Direction for the Web will be published on Tuesday 26th March from Smashing Magazine. eBook and PDF versions will downloadable on the day with the beautifully printed hardbound edition shipping three weeks later.

I’m also hosting a free Art Direction for the Web webinar on Smashing TV on Tuesday 26th March where I’ll discuss many of the topics from the book and answer questions from people attending. I hope I’ll see you then.

]]>