<![CDATA[All that Malarkey]]> https://stuffandnonsense.co.uk Sat, 22 Feb 2020 09:00:00 +0000 en-us © Copyright 2020 3600 <![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.

]]>
<![CDATA[Book review: ‘O Design de Bea Feitler’]]> https://stuffandnonsense.co.uk/blog/book-review-o-design-de-bea-feitler https://stuffandnonsense.co.uk/blog/book-review-o-design-de-bea-feitler Thu, 21 Feb 2019 00:00:00 +0000 I didn’t study graphic arts when I was at art school in the ’80s, but I’ve been doing a lot of catching up recently. A few years ago, I became incredibly bored with what was passing for creative design on the web at the time, and so I started to look elsewhere for inspiration for my work.

]]> While I was working on some editorial design projects with Mark Porter, I became interested in magazine art direction, and in particular how just a handful of art directors changed the way we look at editorial magazine design.

I collected, read about, and studied magazine design. I spent way too much money and time in Kinokuniya while I was living in Sydney and then in Magma in London and Manchester since I moved back. I don’t have a room in my house to turn into a library, but I do have a bookcase which is now bulging with design inspiration.

Chock full of design inspiration: Parts 1, 2, 3, and 4.

If you’re looking for a book on editorial and magazine design, you can find books on Alexey Brodovitch fairly easily. Kerry William Purcell’s retrospective covers his most iconic work. Although volumes of ‘The Graphic Language of Neville Brody’ have been out of print since the ’90s, you can still pick up good quality secondhand examples on eBay.

Bea Feitler

One person whose work I’ve found incredibly inspiring was Bea Feitler although sadly her name’s less well known that other designers of her period. She’s been called “The Pioneering Female Art Director You’ve Never Heard Of.” I’ve never heard her name mentioned at a design conference or seen her referenced in an article about web design. That’s something I plan to change, and I’m going to write about her work, what we can learn from it, and how it can influence web design throughout this year.

Born in Rio de Janeiro in 1938, Feitler’s Jewish family had escaped from Nazi Germany. She studied at the Parsons School of Design in Manhattan and at only 25 years old she became an art assistant, then one of the youngest—and the first female co-art directors—at Harper’s Bazaar magazine. There, she worked with photographers including Richard Avedon, David Bailey, and Annie Leibovitz, and in 1965 she cast Donyale Luna, the first black model featured on the cover of a mainstream fashion magazine.

Until relatively recently, I’d only seen examples of Feitler’s work online, because the only book about her, ‘O Design de Bea Feitler’ was published in her native Brazil in 2012. Getting hold of a copy has been incredibly difficult, but now I have one. If you can find a copy for sale somewhere, you should get one too.


O Design de Bea Feitler

‘O Design de Bea Feitler’ was written by her nephew Bruno Feitler and published in her native Brazil in 2012. When I was hunting for a copy, none were available on either Amazon, eBay, or even online bookstores in Brazil.

It took me a few months to track down a copy, but eventually, I found one. Even without postage from Brazil, at £110 it’s still the most expensive book I’ve ever bought. I waited almost two months for it to arrive—the book spent time in Belize and Miami on its way to me—so was it worth the money or the wait?

Deciding that took me a couple of days because I didn’t dare open it because I was afraid of being disappointed. Finally, I did open it, and here it is.

O Design de Bea Feitler by Bruno Feitler.

This is a beautifully designed book, inside and out. The hardcover feels really solid, and the wrap-around photograph of Feitler and gold foil lettering makes a quality first impression. Sue jokes that I don’t concentrate long enough to read books, so I like to look at pictures. This is good, because ‘O Design de Bea Feitler’ is I’ve been using Google Translate, and its OCR does a reasonable job helping me understand what’s written.


You can look at Bea Feitler’s work across three periods; in Brazil before Harper’s Bazaar, during Harper’s Bazaar, and after Harper’s Bazaar at publications like Ms. and Rolling Stone. This book has some fascinating examples from each of those periods. I’ve been looking for examples of Feitler’s work for over a year, and in this book, there are plenty of pieces I hadn’t seen before.

Bea Feitler designs for Alvin Ailey American Dance Theatre.

The book starts with a short biography and a brief look at Feitler’s early work for Rio de Janeiro’s Senhor magazine. Senhor—which means “Sir” in English—was a Brazilian culture magazine which ran to 59 issues up until 1964. It was known for creative design and especially its covers which were produced by well-known artists in Brazil at the time.

I hadn’t associated Feitler’s work with Paul Rand before picking up this book, but there’s a real connection in how both create a dialogue between illustration and typography. For example, there’s this 1940 cover by Rand for Direction magazine and Feitler’s poster for Studio G. We see Feitler develop these dialogues throughout her career.

Left: Direction magazine by Paul Rand. Right: Studio G by Bea Feitler.

I was also surprised by these typographic invitations and posters as I hadn’t seen them before.

Typographic invitations and posters by Bea Feitler.

Bea Feitler’s most well-known for her partnership with Ruth Ansel as the co-art director at Harper’s Bazaar magazine. Ansel’s another art director whose work is rarely seen in print. In fact, the only collection of her work I can find is this tiny Hall of Femmes Ruth Ansel retrospective which was published in 2010. Luckily, this little book’s still available to buy for around 120 Swedish Krona. If you’re interested in art direction and editorial design, you should definitely get a copy while you can.

I’d previously seen more of Feitler’s work for Harper’s Bazaar than anything else, and as an admirer of Alexey Brodovitch, I already knew of the connection between their work. The Bazaar section of this book starts with a few iconic Brodovitch spreads. What quickly becomes apparent is how Feitler clearly followed in the Brodovitch tradition early on–like this example from 1967 shows—but she and Ruth Ansel soon made it their own.

Harper’s Bazaar by Ruth Ansel and Bea Feitler.

The Bazaar section of this book is filled with gorgeous examples of Ansel and Feitler’s work, especially their collaborations with photographers like Richard Avedon and Annie Leibovitz (who once very kindly made me a cup of tea.) I’ve seen plenty of these examples before in the Hall of Femmes Ruth Ansel retrospective, but what I hadn’t seen—and I love—are her purely typographic spreads. I imagine that I’m going to spend hours pouring over these layouts and working out how to adapt them for my work on the web.

Typographic designs for Harper’s Bazaar by Bea Feitler.

You should find plenty of inspiration for web design layouts in Feitler’s work for Harper’s Bazaar, and now we have tools to implement those designs. If you’re wondering where to find ideas for using Grid, clip-path, and Shapes, initial letter or Multi-column layout, and viewport-based units, this is a fabulous place to look.

Inspiring designs for today’s web by Bea Feitler.

Feitler left Harper’s Bazaar in 1972 and her next two years at Ms. magazine, followed by her freelance projects and six years at Rolling Stone, showed her bold, colourful style develop even further.

You can clearly see Bea Feitler’s influence on art directors like Neville Brody.

Bea Feitler sadly died from cancer in 1982 before her redesign of Vanity Fair magazine was published. She was only 44.


Bea Feitler is someone more people show know about. There’s so much we can learn from her and the work she made. In 2017 the first exhibition of Bea Feitler’s work, ‘New Picture. The Work of Bea Feitler,’ took place in Berlin and Oslo. I would love to see that exhibition travel elsewhere in Europe in the future.

I’m searching for original copies of Feitler’s work for my collection, and until then, at least I have this book. Snap one up if you’re lucky enough to find a copy of ‘O Design de Bea Feitler.’

]]>
<![CDATA[Yours truly on the Elastic Brand podcast]]> https://stuffandnonsense.co.uk/blog/yours-truly-on-the-elastic-brand-podcast https://stuffandnonsense.co.uk/blog/yours-truly-on-the-elastic-brand-podcast Mon, 18 Feb 2019 00:00:00 +0000 I love talking to Liz Elcoate, so jumped at the chance of appearing on episode five of her new Elastic Brand podcast. We could waffle for hours—and often do—but this week we largely avoided talking about brioche buns and weeing in hotel kettles and stuck to the subjects of art direction and brand. Elastic Brand is a nice new addition to my list of weekly podcasts and I highly recommend giving it a listen.

]]>
<![CDATA[Designing your website like it’s 2018]]> https://stuffandnonsense.co.uk/blog/designing-your-website-like-its-2018 https://stuffandnonsense.co.uk/blog/designing-your-website-like-its-2018 Sun, 23 Dec 2018 00:02:00 +0000 It’s 20 years to the day since my wife, and I started Stuff & Nonsense, our little studio and my outlet for creative ideas on the web. Over on 24ways, it’s also my fourteenth article, this time how to Design your site like it’s 1998. It’s a tongue-in-cheek look back at how we developed websites when I started my company, complete with not so old favourites like font elements, frames, layout tables, and spacer gifs.

]]> Designing your website like it’s 2018
Planes, Trains, and Automobiles: My design for 24ways 2018.

I can imagine many people reading that article and thinking “This is terrible advice because we don’t develop websites like this in 2018.” That’s true. So, to bring things up to date, I want to explain how I now develop websites in 2018.


Meaningful markup

In 1998, I hadn’t learned the importance and value of meaningful markup. Like others at the time, I was using a visual editor; first Microsoft FrontPage 98, then (Macromedia) Dreamweaver a few years later. Today, we might scoff at using tools like these to write HTML but are more than happy to use frameworks like Bootstrap. I often ask myself, “Are frameworks really that different to visual tools like FrontPage?” I say “no” because they both sacrifice semantics for ease and speed in development. That’s why I insist on hand-written HTML and have banned frameworks from my projects.

I didn’t think that way in 1998 and my markup then was entirely used for presentation. Because I wanted to control how my design was displayed as much as possible, I used frames on almost every website, often to the extent of nesting multiple sets of frames in what were known at the time as Letterbox frame sets:

<frameset rows="50,*">
<frame name="navigation">
<frameset cols="25%,*">
<frame name="sidebar">
<frame name="content">
</frameset>
</frameset>

Letterbox framesets were a common way to deal with multiple screen sizes. In a letterbox, the central frameset had a fixed height and width, while the frames on the top, right, bottom, and left expanded to fill any remaining space.

Of course, this being pre-CSS, I developed every one of my pixel perfect layouts using a complicated nest of <table> elements, plus tiny transparent “shims” or “spacer” images:

<table width="800" align="center">
<table>[…]</table>
<table>
<table>
<table>[…]</table>
</table>
</table>
<table>[…]</table>
<table>[…]</table>
</table>

Today, things couldn’t be more different. Since 2014, we’ve had HTML5 elements including <header>, <article>, <main>, <aside>, and <footer> to improve semantics and accessibility. We also have the CSS properties and selectors we couldn’t have imagined in 1998 which should remove almost all presentational aspects from HTML. In place of inappropriate tables, I now write meaningful, minimal markup:

<body>
<header>[…]</header>
<main>[…]</main>
<div class="h-card">[…]</div>
<div class="h-card">[…]</div>
<footer>[…]</footer>
</body>

One of the biggest changes in how I write HTML today is that instead of starting from the visual layout, I now start with markup by using the most appropriate elements which describe my content. Often, this minimal markup is all that’s needed for small screen designs. I only add further elements when they’re absolutely necessary for implementing a more elaborate design on larger screens. Whereas once I validated every page only after I’d completed it, today I validate and preview my designs on small screens before I move onto larger ones.


Powerful CSS

Because my markup is largely free from presentational attributes and elements, I use every CSS property and selector I can to keep it that way. Whereas developers often prefer to simplify specificity by adding object-orientated class attributes to almost every element, I use attributes as they were intended, to style elements without using additional class attributes. For example, instead of writing:

.main__img--left {…}

I use an attribute selector which applies styles to an image where img-l is found somewhere in the file name:

[src*="img-l"] {…}

I take a forward-thinking approach to all the CSS I write and mostly choose to work on projects where I needn’t look back to the limitations of older browsers. Today, every one of my projects involves using:

  • Web fonts, OpenType features, and flexible typography
  • CSS Grid for overall page layout
  • Flexbox for developing flexible components
  • CSS Shapes to enable text to flow around polygons
  • Multiple backgrounds, background sizing, and CSS gradients
  • SVG for scalable graphics

CSS Custom Properties

After a few years using first LESS, then Sass, I’ve now abandoned all CSS pre and post processors and use only CSS Custom Properties (variables.) Like variables in LESS or Sass, CSS Custom Properties mean I don’t have to repeat colour, font, or size values multiple times in a stylesheet. My stylesheets start by defining variables for text, including a modular typographic scale:

:root {
--font-family: 'Merriweather', serif;
--font-size-large: 1.424rem;
--font-size-medium: 1rem;
--font-size: .889rem;
--font-size-small: .79rem;
--lineheight-text: 1.6; }

Followed by my colour values:

--color-background: #fbf6fb;
--color-border: #c9e9f2;
--color-text-default: #2b2b2b;
--color-text-link: #245eab;

Then finally my spacing and other utilities:

--grid-gap: 2vw;
--max-width: 80rem;
--spacing-small: .5rem;
--spacing: .75rem;
--spacing-medium: 1rem;
--spacing-large: 1.5rem;

Unlike a preprocessor variable though, CSS Custom Properties use the cascade, can be modified by media queries and other state changes, and can also be manipulated by—I prefer native—Javascript.


Styling typography

Needing to repeat the value of the face and size attributes on every element on all pages on my websites seems ridiculous now:

<font face="Arial" size="4"><b>Steve Martin</b></font>

<font face="Arial" size="2">An American actor, comedian, writer, producer, and musician.</font>

Today, I have access to countless fonts, many of them free:

<link href="https://fonts.googleapis.com/css?family=Merriweather+Sans:300,700|Merriweather:300,700" rel="stylesheet">

I can also utilise many font’s OpenType features in CSS to control cap styles, ligatures, and numerals:

font-variant-caps: titling-caps;
font-variant-ligatures: common-ligatures;
font-variant-numeric: oldstyle-nums;

Although control over typography isn’t perfect yet, the difference between what I could typeset in 1998 and what’s possible now is enormous.


Styling backgrounds

For a long time, adding colour gradients to a design involved making narrow images and repeating them horizontally across the background of an elements. After years of waiting for the specification to stabilise, today applying either linear or radial gradients using only CSS is easy. Whereas layering background images used to require extra, nested elements, I now frequently make use of multiple background images on a single element:

html {
background-color: var(--color-background);
background: url(img/body-bg.png), linear-gradient(rgb(115,200,224) 0%, rgb(254,247,251) 50%, rgb(254,247,251) 100%);
background-position: 0 240px, 0 0;
background-repeat: no-repeat, repeat-x; }

CSS layout

Thanks largely to people like Rachel Andrew, not only are tables no longer used for layout, but neither are the floats which replaced them. Grid has simplified the implementation of even the most complex compound grid down to just a few lines of CSS:

body {
display: grid;
grid-template-columns: 3fr 1fr 2fr 2fr 1fr 3fr;
grid-column-gap: var(--grid-gap); }

Flexbox has made it easy to develop flexible components:

header {
display: flex; }

header > h1,
header > nav {
flex: 1; }

I now use Flexbox for countless elements, often combining it with Generated Content to add detail to my designs without additional, presentational markup:

.cta {
display: flex;
align-items: center;
justify-content: center; }

.cta:before,
.cta:after {
content: "";
display: block;
height: 1px;
flex: 1;
border-top: var(--border-width) solid var(--color-border); }

In 1998, the way I implemented colourful list-style markers was a now hilarious combination of table cells, a circular graphic, and a spacer:

<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td width="10"><img src="li.gif" border="0" width="8" height="8"></td>
<td><img src="spacer.gif" width="10" height="1"></td>
<td>Directed by John Hughes</td>
</tr>
</table>

Today, I regularly use Generated Content to add details to my designs without needing to resort to such presentational HTML hacks:

main li:before {
content: '\25CF';
margin-right: var(--spacing-small);
color: var(--color-border); }

CSS Shapes

For a long time I was frustrated not be able to flow text around irregular shapes including polygons. Then, in 2013, Sara Soueidan wrote an article about CSS Shapes which really excited me, and since then they’ve become a major part of my editorial style:

@media screen and (min-width : 64em) {
[src*="main-img"] {
float: left;
shape-outside: polygon(…);
shape-margin: 40px; }
}

Shapes are one of those beautiful properties which have no real impact on browsers which haven’t yet supported them as because they require an element to be floated, older browsers merely ignore the shape without affecting the layout of a page.

Sara’s also been a strong advocate for and educator on SVG over the past few years and today, I implement almost graphic element using scalable vector graphics:

<header>
<h1 title="Planes, Trains and Automobiles">
<svg xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 587 48">[…]</svg>
</h1>
</header>

Multi-column layout

Although it’s implementation in browsers isn’t yet perfect—even after over ten years of me using it—I still use Multi-column layout regularly to create columns in my running text:

aside {
column-width: 16em;
column-gap: var(--grid-gap);
column-rule: var(--border-width) solid var(--color-border); }

Multi-column layout is just one more example of how I now use CSS for a reason it was designed, to remove presentation information from HTML and keeping that markup accessible, fast, and flexible.


Now, I think it’s apparent that I’m an HTML and CSS enthusiast. For twenty years, using them has been an opportunity for me to learn techniques and tools. Understanding how to use HTML and CSS—for bad and good—has made me a better designer, but as I wrote in my article for this year’s 24ways:

It’s dangerous to believe with absolute certainty that the frameworks and tools we increasingly rely on today—tools like Bootstrap, Bower, and Brunch, Grunt, Gulp, Node, Require, React, and Sass—will be any more relevant in the future than font elements, frames, layout tables, and spacer images are today.

The biggest lesson I’ve learned over the past two decades is that techniques and tools come and go with increasing regularity, but the importance of learning how to develop meaningful markup and use CSS appropriately will be as important twenty years from now as it today.


Happy Christmas everyone.

]]>
<![CDATA[Designing your website like it’s 1998, for 24ways]]> https://stuffandnonsense.co.uk/blog/designing-your-website-like-it-s-1998-for-24ways https://stuffandnonsense.co.uk/blog/designing-your-website-like-it-s-1998-for-24ways Sun, 23 Dec 2018 00:01:00 +0000 Over on 24ways, my fourteenth contribution in as many years is a tongue-in-cheek look back at how we developed websites when I started my company in 1998. In ‘Designing your website like it’s 1998’ I explain how I would’ve developed a design for ‘Planes, Trains and Automobiles,’ one of my favourite Christmas films.

]]>

I have no prediction for what the web will be like twenty years from now. However, I want to believe we’ll build on what we’ve learned during these past two decades about the importance of accessibility, flexibility, and usability, and that the mistakes we made while infatuated by technologies won’t be repeated.

]]>
<![CDATA[Up to 50% off my Art Direction for the Web video course this cyber weekend]]> https://stuffandnonsense.co.uk/blog/up-to-50-off-my-art-direction-for-the-web-video-course-this-cyber-weekend https://stuffandnonsense.co.uk/blog/up-to-50-off-my-art-direction-for-the-web-video-course-this-cyber-weekend Thu, 22 Nov 2018 00:00:00 +0000 Yes, yes, I know. It’s the week you’re bombarded with discounts on everything from electric toothbrushes to vacuum cleaner bags, but somehow never the things you want. Well, that’s about to change my friends because this weekend only, I’m offering you up to 50% off my Art Direction for the Web video course on Vimeo.

]]>
  • Art Direction for the Web: 9 episodes, 58m duration
  • eBook (ePub, PDF) Available in December
  • PDF worksheets
  • 30+ highly original, responsive HTML/CSS examples
  • Available this cyber weekend only, starting right now!

    • Get 50% off using the discount code “overkill.” Be quick, as there are only 10 of this offer available.
    • Get 25% off using the code “ironfist.” There are only 50 of this discount available, so don’t miss out.

    (Normal price $149 / £115 / €130.)

    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

    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 start Art Direction for the Web.

    ]]>
    <![CDATA[Redesigning your product and website for dark mode]]> https://stuffandnonsense.co.uk/blog/redesigning-your-product-and-website-for-dark-mode https://stuffandnonsense.co.uk/blog/redesigning-your-product-and-website-for-dark-mode Fri, 02 Nov 2018 00:00:00 +0000 If, on the off chance:

    You’ll have noticed that I’ve implemented a brand new dark mode version of my website.

    ]]> Implementing dark mode is easy, but designing for it is less so. Here are some things you should consider when designing a dark mode version of your product or website to ensure you maintain accessibility and readability, and a consistent feel for your brand between Light and Dark.

    Art direction and website design
    Stuff & Nonsense homepage (left) and in dark mode (right.)

    Like plenty of other people, I’ve used darker themes in my text editors for years because I find them easier on the eye when working for long periods. I was excited to try MacOS Mojave’s new dark mode feature when it launched last month.

    Dark mode is definitely a feature designed first for native apps and Apple have done a fabulous job of updating built-in apps like Mail, iTunes, and Reminders with their recommended AppKit dark mode colours. Many third-party developers of apps like Fantastical, iA Writer, and Sketch have also been quick to update and some have chosen their own palette of dark colours.

    Art direction and website design
    Left: Apple Mail, iTunes, and Reminders in dark mode. Right: Fantastical and iA Writer.

    There’s no one true dark colour

    Apple has their own set of dark mode colours in AppKit. The colours in their palette are darker for backgrounds and lighter for foreground elements including toolbars. Using a feature called ‘Desktop Tinting,’ the look of Apple’s dark mode colours also changes depending on which Accent colour you choose in System Preferences.

    Pick any colour other than Graphite and colours are tinted by your desktop picture. As Apple says, this is to “help windows blend more harmoniously with their surrounding content.” If you’re not one for harmony, the only way to disable Desktop Tinting is to choose Graphite as your accent colour.

    Implementing dark mode on products and websites

    Implementing a dark mode version is an obvious choice for native apps, but the case for dark products and especially websites is less clear. If you choose to do it, there’s a Level 5 Media Query now making its way through the standards process which detects whether someone has set their operating system to either light or dark mode:

    @media (prefers-color-scheme: dark) {
    /* dark mode styles */ }

    There are three values to choose from:

    • no-preference: Someone hasn’t expressed a preference. Obviously.
    • light: Someone has selected a light theme
    • dark: Someone has selected a dark theme

    prefers-color-scheme is part of a suite of preference media query options including prefers-contrast, prefers-reduced-motion, and prefers-reduced-transparency.

    NB: As I write this in November 2018, prefers-color-scheme has been implemented only in Safari Technology Preview 68, but is part of the standards process and not a proprietary property. You can use it today and when Apple updates mainstream Safari, and Chrome and Firefox implement prefers-color-scheme in the future, people using those browsers will also see your dark mode designs.

    CSS Custom Properties

    Custom Properties are ideal for working with prefers-color-scheme as they make switching modes with just a few lines of CSS possible. First, I defined my colour values for all non-dark modes (including browsers and operating systems which don’t support prefers-color-scheme:

    :root {
    --color-background: #ffffff;
    --color-border: #cacfd5;
    --color-text-default: #0b1016;
    --color-base: #f4f5f6;
    --color-accent: #ba0d37; }

    I then defined a set of alternative colours for dark mode:

    @media (prefers-color-scheme: dark) {
    :root {
    --color-background: #38444c;
    --color-border: #697278;
    --color-text-default: #f0f2f3;
    --color-base: #293238;
    --color-accent: #ec1a62; }
    }

    Of course, you might make changes for dark mode on your product or website which extend beyond simply changing colours. As prefers-color-scheme is a property of a media query, you could change any and all aspects of your design if you wanted to. Frankly, I doubt you’d want to change its layout, but you should consider altering typography styles to ensure you maintain readability. (More about that in just a minute.)


    Designing for dark mode

    Your choice of dark mode colours will depend on three criteria:

    • Complimenting the look of other dark mode apps and your OS
    • Ensuring accessibility and readability
    • Maintaining your visual identity between light and dark modes

    After all, your product or website design should reflect your brand no matter which mode someone prefers.

    Choosing colours

    Deciding on the colours you use for dark mode involves more than simply inverting them, making white backgrounds black, and black text white. Pure white text on full black backgrounds makes reading long passages of text tiring for the eye.

    Art direction and website design
    Left: This highest contrast colour palette meets none of my three criteria. It doesn’t compliment the look of other dark mode apps, isn’t easily readable, and doesn’t feel right for the Stuff & Nonsense brand. Right: Apple’s AppKit dark mode colours suit the operating system, but not the Stuff & Nonsense brand.

    Apple chose “dark lines to create visual separations between views” in both light and dark modes. You may choose to follow their lead, or you might use lighter lines if they fit better with your visual identity.

    If you absolutely must go back to black, consider reducing contrast by softening one or both colours and using a slightly off-white for running text and/or a dark grey background instead.

    Art direction and website design
    Above: These lower contrast colour palettes offer better readability while remaining complimentary to the the look of other dark mode apps. However, they still don’t feel right for the Stuff & Nonsense brand.

    Maintaining your visual identity between light and dark modes is as important as complimenting the look of other dark mode apps. When you want your brand to be connected across light and dark designs, choose darker shades from the same palette of neutral colours for both. (My technique using multiple background fills and blending modes in Sketch can be especially useful for this.)

    Somehow, none of the previous palettes suits Stuff & Nonsense, so my dark mode design uses a blue/green grey (#38444c) for the background. I created this colour by multiplying one grey from my gorilla illustration.

    Art direction and website design
    Above: My final choice of dark mode colours for Stuff & Nonsense. So my logo, buttons, and drop caps still pop, I blended my red accent colour (#ba0e37) with itself using a screen blending mode to create a brighter new red (#ff0e46).

    Colour contrast and accessibility

    You should always consider accessibility and ensuring sufficient colour contrast while designing. This is especially important when lowering contrast to improve readability and I find Lea Verou’s contrast ratio calculator invaluable. Checking colour contrast while you’re designing will often save potential problems caused by considering accessibility only later on in your process.

    Typography

    Designing for dark mode shouldn’t stop with choosing darker colours. You should also consider altering typography styles to maintain readability for people who use dark mode. Light text against dark backgrounds appears higher in contrast than when the same colours are used in reverse, so to make your dark mode designs easier to read you’ll need to add more white/dark space to your text.

    If your fonts offer a lighter weight, using that for your dark mode design will open up the letterforms and make them appear further apart:

    p {
    font-family: var(--font-family); }
    
    @media (prefers-color-scheme: dark) {
    p {
    font-family: var(--font-family-light); }
    }

    Increasing leading in paragraphs of running text will also improve legibility. For example, if text in your light design has a line-height of 1.5, increase that to 1.7 for your dark mode design:

    p {
    line-height: 1.5; }
    
    @media (prefers-color-scheme: dark) {
    p {
    line-height: 1.7; }
    }

    Another simple, but effective way to make your text more readable against dark backgrounds is to increase the space between words (tracking). You won’t want to go too far, just a tiny amount of extra space can make a huge difference:

    @media (prefers-color-scheme: dark) {
    p {
    word-spacing: .05em; }
    }

    More dark mode considerations

    Implementing alternative colours and typography for a dark mode design is a straightforward process, but even so my implementation for Stuff & Nonsense isn’t perfect, yet. I have no idea why I embedded drop shadows into my portfolio images instead of using a CSS filter, but over the next week I’ll remove those bitmap shadows and replace them with:

    .mechagodzilla img {
    filter: drop-shadow(0 2px 4px #969696); }
    
    @media (prefers-color-scheme: dark) {
    .mechagodzilla img {
    filter: drop-shadow(0 2px 4px #0b0b0b); }
    }
    Art direction and website design
    Stuff & Nonsense homepage in dark mode

    For the very few people using Safari Technology Preview 68 on MacOS Mojave 10.14 today, spending time on a dark mode design might seem like a luxury—and it was—however I expect prefers-color-scheme to come to other browsers, and especially to iOS soon, so maybe it will be a worthwhile investment.


    Further reading

    1. Apple Human Interface Guidelines dark mode
    2. Paul Miller: Using dark mode in CSS with MacOS Mojave
    3. Bug Mozilla to add support for CSS prefers-color-scheme
    4. Can I Use prefers-
    5. Media Queries Level 5 (prefers-color-scheme)
    6. Safari Technology Preview Adds dark mode CSS
    ]]>
    <![CDATA[When to use display:contents to improve semantics in your HTML]]> https://stuffandnonsense.co.uk/blog/when-to-use-display-contents-to-improve-semantics-in-your-html https://stuffandnonsense.co.uk/blog/when-to-use-display-contents-to-improve-semantics-in-your-html Sun, 14 Oct 2018 00:00:00 +0100 Working with CSS Grid is a lot of fun, as well as making distinctive and original layouts easier and with less code. However, using Grid does occasionally come at a cost and that is semantic markup. Fortunately, there’s a new CSS display property which—when used thoughtfully—can overcome the problem of ‘flattened HTML.’

    ]]> What’s flattened HTML?

    CSS Trickster Chris Coyier first brought up the problem of flattening our HTML for CSS Grids two years ago, but what does “flattening” mean? I’ll give you an example.

    To make Grid work, you turn an element into a grid container by applying display:grid or display:inline-grid. Most likely, this grid container will be the <body> or another structural element such a division, <header>, <main>, or <footer>. With display:grid applied, all direct children of grid containers become grid items and you can then position them on a grid using areas, line numbers, or names.

    Plenty of Grid examples use a simple markup structured like this:

    <body> <!-- Grid container -->
    <header>…</header> <!-- Grid item -->
    <main>…</main> <!-- Grid item -->
    <footer>…</footer> <!-- Grid item -->
    </body>

    This flat CSS structure—where all the grid items are siblings of each other— is what Chris meant by flattened HTML. Flatness might not be a problem for a simple markup structure like that, but there are plenty of occasions where—with the current absence of sub-grids—flattening your HTML to work with CSS Grid would be detrimental to the semantics of your markup. Here’s a straightforward example of a <figure> <img> with its <figcaption> from Art Direction for the Web.

    Art Direction for the Web example
    One of the examples from my new book, Art Direction for the Web which will be be published by Smashing Magazine in a few weeks.

    This design includes a large suitcase image and some accompanying text about needing a “go bag” to get away after a robbery. When I first made this example I applied display:grid to the <body> and flattened my markup so I could position the <picture> and <p>:

    <body> <!-- Grid container -->
    <picture>…</picture> <!-- Grid item -->
    <p>…</p> <!-- Grid item -->
    </body>

    There’s a semantic relationship between the picture and text which has been lost by flattening my markup. A far better solution would be to bind them both together using a <figure>:

    <body> <!-- Grid container -->
    <figure> <!-- Grid item -->
    <picture>
    <source srcset="" media="(min-width: 64em)">
    <img src="" alt="">
    </picture>
    <figcaption>…</figcaption>
    </figure>
    </body>

    However, while I’ve now made my markup more meaningful, I lost the ability to position the <picture> and <figcaption> using CSS Grid, because by being inside a <figure> neither are direct descendents of the <body> which defines my grid.

    display:contents

    There’s a new CSS display:contents; property which—when used thoughtfully—can overcome the problem.

    For this design I don’t need to style my <figure>, I don’t need to add any backgrounds or borders, I only need to style its <picture> and <figcaption>. By applying display:contents; to my <figure>, I effectively remove it from the DOM for styling purposes and so its child elements take its place:

    figure {
    display: contents; }
    picture { /* Grid styles }
    img { /* Grid styles }

    Instead of needing to flatten my markup using to enable the positioning of the picture and text, I can now use a more appropriate element and get the same visual results.


    In another example from ‘Art Direction for the Web,’ my goal was to create a distinctive headline, “Dial K for Murder,” using as little HTML as possible:

    Art Direction for the Web example
    Another of my examples from Art Direction for the Web which will be be published by Smashing Magazine in a few weeks.

    There’s really not a lot to my markup, just the <body>, a <header> which contains a large image, an <h1> headline, and my <main> content. To give me the three elements I need for that distinctive headline, I wrapped each element in a <span>:

    <body> <!-- Grid container -->
    
    <header>…</header>
    
    <h1>
    <span>Dial</span>
    <span>K</span>
    <span>for Murder</span>
    </h1>
    
    <main>…</main>
    
    </body>

    CSS Grid is perfect to achieve this distinctive look and the <body> was the ideal place to apply it:

    body {
    display: grid;
    grid-template-columns: 4fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 100px 14em auto auto;
    grid-gap: var(--grid-gap);
    align-items: start; }
    Art Direction for the Web example
    Highlighting the grid lines in this design from Art Direction for the Web.
    Next, I positioned the <header> and <main> onto that grid:
    [role="banner"] {
    grid-column: 1 / 2;
    grid-row: 1;
    min-height: 100vh; }
    
    [role="banner"] img {
    object-fit: cover; }

    That just left the headline, and as wanted to style it and not its contents, I added display: contents; to the h1:

    h1 {
    display: contents;
    font-size: 4.188em;
    line-height: 1;
    margin: 0; }

    Then placed those span elements on the grid:

    h1 span:nth-of-type(1) {
    grid-column: 2;
    grid-row: 2;
    writing-mode: vertical-lr;
    justify-self: end; }
    
    h1 span:nth-of-type(2) {
    grid-column: 3 / 5;
    grid-row: 2;
    padding: 12px 0;
    border: 18px solid #ba0d37;
    font-size: 14vmax;
    text-align: center;
    color: #ba0d37; }
    
    h1 span:nth-of-type(3) {
    grid-column: 3 / -1;
    grid-row: 3 / 4; }

    It’s worth noting that although display: contents; effectively removed my h1 from the DOM for styling purposes, any properties which inherit such as font sizes and styles are still inherited.


    Using display:contents; means I can make the fullest use of CSS Grid without compromising the semantics of my markup. However, it’s not not all roses.

    Currently, Edge hasn’t implemented display:contents; yet and every other browser implementation except Firefox includes a bug which renders any content inside display:contents; inaccessible, so you’ll need to bear that fact in mind for the time being.

    Until that accessibility bug is fixed, I’m being a cautious about using display:contents;. That said, bugs are temporary and browsers are updated all the time, so I won’t need to be cautious for long.

    Further reading

    1. Chris Coyier: Will we be flattening our HTML for CSS Grids?
    2. Chris Coyier: Get Ready for display: contents;
    3. Rachel Andrew: Vanishing boxes with display contents
    ]]>
    <![CDATA[Designing for Equfund]]> https://stuffandnonsense.co.uk/blog/designing-for-equfund https://stuffandnonsense.co.uk/blog/designing-for-equfund Thu, 11 Oct 2018 00:00:00 +0100 For the past few weeks, I’ve been working with Equfund, refreshing their visual identity, redesigning their website, and developing a consistent brand experience for customers across different channels and touch-points.

    ]]> Equfund website redesign
    To visualise the role Equfund plays in helping people stay in their communities, for their new website I commissioned a series of illustrations from artist Vic Bell.

    I’ve written an Equfund case study for my portfolio. It covers how I introduced a brighter colour palette and a fresh new typeface, plus how I commissioned Vic Bell—the talented artist who made our very own Errol the gorilla—to create a series of playful illustrations to visualise the role Equfund plays in helping people stay in their communities.

    Equfund website information panels
    Information panels using characters from Vic Bell’s illustrations. There’s few things more creatively satisfying than watching an illustrator bring your ideas to life.

    One of the aspects of the design I’m most pleased with is how the 6&4 overlapping compound grid I chose allow for so much flexibility, while providing a solid foundation for the various layouts. If you haven’t experimented using overlapping or stacked compound grids, they’re incredibly useful and that’s why I devoted so much of my new book to explaining how to use them.

    In a nutshell, 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.

    6&4 overlapping compound grid
    Left: Start with a six even columns. Right: Overlay a second, four-column grid.

    In this design for Equfund, six columns overlay four to create interesting ways to align and size content. A 6&4 compound grid, famously used as the basis for Karl Gerstner’s work on Capital magazine in the 1960s. This grid makes an incredible variety of compositions possible. You might use widths from one or the other. Or you could combine widths from both to form columns which don’t conform to either. You can use these new widths to inform the sizes of images and text.

    Equfund layouts based on a 6&4 overlapping compound grid
    Six layout variations I used for the Equfund website design, all based on a 6&4 overlapping compound grid.

    When it came to developing this website using CSS Grid, I needed a simple way to refer to each layout. As Equfund are based near Liverpool, I cheekily named each layout after a famous Liverpool FC manager or player: Beardsley, Clemence, Dalglish, Hanson, Hughes, Keegan, Rush, and Shankley.

    View source on the Equfund website and you’ll find class attribute values like class="beardsley". This isn’t the first time I’ve devised a naming system like this. For Stuff & Nonsense, my layouts are named after famous Japanese monsters like Godzilla and Mechagodzilla. It’s a silly thing to do, but you know what, it works.


    A few years ago, I began to specialise in helping businesses, charities, and NGOs to develop consistent brand experiences for customers across different channels and touch-points. Working with Equfund was incredibly gratifying and I’m looking forward to next year and developing their brand assets and website further.

    Read the case study and go to the Equfund website.

    ]]> Could you or your team benefit from knowing how to use art direction to improve your product or website? My in-house training and workshops can help.

    Improve your product or website

    ]]>
    <![CDATA[Chock full of design inspiration (the fourth and final part)]]> https://stuffandnonsense.co.uk/blog/chock-full-of-design-inspiration-the-fourth-and-final-part https://stuffandnonsense.co.uk/blog/chock-full-of-design-inspiration-the-fourth-and-final-part Sat, 06 Oct 2018 00:00:00 +0100 For the past few weeks, I’ve been writing about the books on my studio bookcase, why I bought them and how they inspire me. (Catch up on parts one, two, and three.) Here’s the fourth and final part.

    ]]> My studio bookcase
    My studio bookcase is chock-full of design inspiration. I hope you enjoyed reading about everything on it.
    Mid-Century Ads

    Jim Heimann and Steven Heller

    Mid-Century Ads

    I’m glad my bookcase is tall enough to fit this big coffee table anthology of advertising from the ’50s and ’60s. Between these two volumes, there are 700 pages of ads, all from the USA, and many of them from brands and products you won’t go shopping for today. The style of ads evolves between the ’50s and ’60s and both are very different from advertising today, especially their illustrations. It’s also fascinating to see so many typefaces not used often today.

    Buy on Amazon

    Now, some people will look at advertising from the ’50s and ’60s and criticise how advertisers sold cigarettes and portrayed women. Even though attitudes have changed, you’d be wrong to apply today’s morals to yesterday and then dismiss advertising from those periods out of hand. After-all, you don’t know where you’re going unless you know where you’ve been.
    D$AD14

    D&AD14

    D&AD (Design & Art Direction) is an advertising and design association famous for its Pencil awards, and we joined a few years ago. We certainly never made the most of our membership, but I’ve always enjoyed perusing work in their annuals. At £75, the most recent edition of this big book is’t cheap, but you can pick up older copies for £35 and don’t need to be a member to buy them.

    Buy

    The Advertising Concept Book: Think Now, Design Later

    Pete Barry

    The Advertising Concept Book: Think Now, Design Later

    “Think Now, Design Later” is fantastic advice and this is a fabulous book for anyone who wants to think more clearly about creative strategy, creating campaigns, generating ideas, and how to sell them. It’s a practical book with projects to work through and will help anyone who’s interested in art direction as well as advertising and design,

    Buy on Amazon

    Ogilvy on Advertising

    David Ogilvy

    Ogilvy on Advertising

    David Ogilvy was a legend in the advertising world, having started with nothing and growing his agency—Ogilvy & Mather—to become one of the biggest advertising agencies in the world. Ogilvy wrote ‘on Advertising’ in 1983 and as he is still recognised as one of advertising’s best copywriters, the emphasis he puts on the importance of copy isn’t surprising. Of course, the world has changed since Ogilvy’s time and I can think of quite a few people who will be upset by him saying “The customer is not a moron. She’s your wife.” Still, outdated ideas or not, Ogilvy on Advertising is still a fascinating read, whether you’re interested in advertising or not.

    Buy on Amazon

    The Ten Principles Behind Great Customer Experiences

    Matt Watkinson

    The Ten Principles Behind Great Customer Experiences

    I need to confess, I haven’t started reading this book, as it was leant to me by a client who thought I might find it interesting.

    Buy on Amazon

    The Coaching Manual

    Julie Starr

    The Coaching Manual

    While I was working in Australia, I attended a couple of leadership and coaching courses. Honestly, I have no interest in leading, but I do really enjoy helping people develop their design careers. I suppose one of the benefits of age is collecting experiences and after running a business and working as a designer for over 20 years, I have plenty of that. I needed help with how to structure coaching sessions though and this covers the skills I need to be a more effective coach. I also think this book will benefit anyone who works in a team, whether you coach people or not.

    Buy on Amazon

    Hegarty on Advertising: Turning Intelligence into Magic

    John Hegarty

    Hegarty on Advertising: Turning Intelligence into Magic

    While Ogilvy’s ideas on advertising might be less relevant today, Sir John Hegarty’s still are. Hegarty is the founder of advertising agency Bartle Bogle Hegarty (BBH) and some of his work includes campaigns for Levis—including the famous and ground-breaking launderette ads—, “Vorsprung Durch Technik” for Audi, and the “Cream Of Manchester” for Boddingtons. Interviewed in June this year, Hegarty wrote that, “Data is great at giving you information, giving you knowledge; but it doesn’t give you understanding and that is its great failing. What we need is greater creativity and what we’re doing today is reducing the power of creativity. Marketing, I believe, is suffering because of that; you’re not getting imaginative ideas that capture people’s imagination.” I could not agree with Hegarty more.

    Buy on Amazon

    Copywriting: Successful Writing for Design, Advertising and Marketing

    Mark Shaw

    Copywriting: Successful Writing for Design, Advertising and Marketing

    Ask me what anyone new to design should prioritise learning and my first answer will always be to improve your writing. It really doesn’t matter whether you write for advertising, marketing, or micro-copy in products, good writing skills are essential, and this book will help you to develop them.

    Buy on Amazon

    Mentoring Manual

    Julie Starr

    The Mentoring Manual

    I bought this Mentoring Manual—written by the author of ‘The Coaching Manual’—to help me as I develop my designers mentoring program. I’ve been mentoring several designers over the past few months and while much of the process comes quite naturally to me, I wanted to know about how to structure a mentoring program and make sure my mentees get the most from it. From the feedback I’ve received had so far, this little book has already helped a lot.

    Buy on Amazon

    On Writing Well, 30th Anniversary Edition

    William Zinsser

    On Writing Well, 30th Anniversary Edition

    You’ve probably spotted it already, this section of my bookcase is where I keep my books on writing. This updated edition of the classic ‘On Writing Well’ well deserves its place. In fact, I doubt I would’ve been able to write four books without it.

    Buy on Amazon

    Pitching Ideas: Make People Fall in Love with your Ideas

    Jeroen van Geel

    Pitching Ideas: Make People Fall in Love with your Ideas

    I have another ‘Hardboiled Web Design’ Shot planned for next year and this time I’ll be writing about about how to sell creative ideas. The content of this new book will be drawn from my experiences working in creative services for 25 years and I will be interviewing graphic, print, UX, and web designers to understand how they approach the process of presenting ideas to their bosses, clients, and other stakeholders. I bought ‘Pitching Ideas’ as part of my research but have only skimmed it up until now.

    Buy on Amazon

    Seducing Strangers

    Joshua Weltman

    Seducing Strangers

    Josh Weltman is an advertising consultant and he created campaigns for clients including BMW, Doritos, Microsoft, and Whole Foods. However, that’s not what made his name familiar, to me at least. Weltman was co-producer of Mad Men, alongside Matthew Weiner, and he no doubt played an enormous role in directing Don Draper’s famous pitches. If you’re like me and want to learn how to sell like Don, this could be just the book.

    Buy on Amazon

    The Elements of Style

    William Strunk Jr. and E. B. White

    The Elements of Style

    There are two books on writing that absolutely everyone should own. One is William Zinsser’ ‘On Writing Well,’ the other is this, Strunk and White’s The Elements of Style. I’ve lost track of how many copies of this book I’ve bought and then given away to clients and colleagues. If you’re short of present ideas for this coming Christmas, order a dozen copies and give them away, making sure you keep one copy for yourself.

    Buy on Amazon


    That’s it, the end of this series on the books on my studio bookcase. I shipped many of these books to Australia and back and I bought many more while I was out there. In fact, books were the heaviest and costliest things to transport. I was surprised that—despite the company recommending a book for staff to read each quarter—the entire Ansarada office had just one small, token shelving unit in reception and there was nowhere for designers to keep any books.

    So I bought a bookcase to display my collection but I was soon surprised that none of the product or marketing designers picked up a book, let alone added something new to the shelves. Several times, I bought multiple copies of books and magazines and gave them away as I thought they might inspire Ansarada designers to think more creatively about the things they were making. Sadly, no one seemed interested and it quickly became obvious that inspiration in book form was far less important to other people than it is for me.

    I found that very sad as I still love buying, collecting, and reading physical books. Having a bookcase close to my desk encourages me to pick up books regularly, for inspiration as well as information. Somehow, digital editions and websites don’t inspire me in the same way. Books can be beautiful objects and easily begin transforming a bland office space into an inspiring one. I simply cannot imagine a creative space without books and I hope this series on my collection has inspired you to buy more.

    ]]> Could you or your team benefit from knowing how to use art direction to improve your product or website? My in-house training and workshops can help.

    Improve your product or website

    ]]>
    <![CDATA[Chock full of design inspiration (part 3)]]> https://stuffandnonsense.co.uk/blog/chock-full-of-design-inspiration-part-3 https://stuffandnonsense.co.uk/blog/chock-full-of-design-inspiration-part-3 Sun, 30 Sep 2018 00:00:00 +0100 For the past couple of weeks, I’ve been writing about the books on my studio bookcase, why I bought them and how they inspire me. (Catch up on parts one and two.) Here’s part three.

    ]]> My studio bookcase
    My studio bookcase is chock-full of design inspiration.
    The Anatomy of Type: A Graphic Guide to 100 Typefaces

    Stephen Coles

    The Anatomy of Type: A Graphic Guide to 100 Typefaces

    A foreword by Erik Spiekermann begins what turns out to be a wonderful visual guide for learning typographic terminologies by studying 100 typefaces. It will help you learn the differences, for example, between Humanist, Rational, and Transitional serifs; Grotesque, and Neo-grotesque sans. My copy’s signed by Stephen Coles and was a gift from the nice people at Adobe Typekit. If you’re at all interested in type design, this book should be top of your to-buy list.

    Buy on Amazon

    New Vintage Type: Classic Fonts for the Digital Age

    Steven Heller and Gail Anderson

    New Vintage Type: Classic Fonts for the Digital Age

    A few years ago, I went through a phase of buying books on type and typography. Some were practical, others were for inspiration. New Vintage Type is definitely one for inspiration and there’s plenty of it from across the history of typography. Although I don’t refer to this book often, I do enjoy browsing it once in a while and it definitely deserves its place on my bookcase.

    Buy on Amazon

    Create Impact with Type, Image, and Color

    Carolyn Knight and Jessica Glaser

    Create Impact with Type, Image, and Color

    Bookshops are full of design books like this and honestly, there’s very little to distinguish this one from hundreds of others. If you’re new to design, you may get something from it, but I imagine it’ll lose its place to something more worthy before too long.

    Buy on Amazon

    CSS Secrets: Better Solutions to Everyday Web Design Problems

    Lea Verou

    CSS Secrets: Better Solutions to Everyday Web Design Problems

    OK, now we get to it. A few years ago, my bookcase was packed with books on web development in general, CSS in particular. Now, there’s only one book on CSS on there and it’s the only one which deserves its place. I’ll go further, this is the best book to buy on CSS at the moment. It’s not for beginners but if you already know how to use CSS you’ll find an incredible amount to learn because it’s packed with practical advice and examples. I’ll go further, this isn’t just the best book on CSS today, it’s the best book ever written about CSS.

    Buy on Amazon

    The Non-Designer’s Type Book

    Robin Williams

    The Non-Designer’s Type Book

    Another typography primer, this one covering how to use type rather than design with it. The sections on legibility are especially good. All-in-all, a useful little type book.

    Buy on Amazon

    Pens are My Friends

    Jon Burgerman

    Pens are My Friends

    Pens Are My Friends is Jon Burgerman’s retrospective of his work until 2017, including his illustrations, murals, sketchbooks, and toys. It even includes doodles on a sick bag. It’s a superb book about an artist who really knows how to have fun with his craft, but that’s not the only reason I held onto it for so long. Incredibly, in 2017, Jon agreed to create his own mod-on-a-scooter illustration for my website and then included it in this book.

    Buy on Amazon

    The scooter illustration Jon Burgerman made for me back in 2007.
    Sagmeister: Made You Look

    Stefan Sagmeister

    Sagmeister: Made You Look

    Sagmeister is a designer’s designer and if you like his work (which I do more-often-than-not) you’ll love the insights into it and the man himself in this beautiful monogram which covers twenty years. If you don’t, you’ll still find his process and thinking inspiring and if you’re shopping for design books, this one should be at the top of your list.

    Buy on Amazon

    Web Typography

    Richard Rutter

    Web Typography

    If Lea Verou’s CSS Secrets is the only CSS book you should buy, Richard Rutter’s Web Typography is the definitive book on typography for the web. Years in planning, preparation, and writing, and edited by my go-to editor Owen Gregory, Web Typography covers Setting Type to be Read, typographic details—including hierarchy and scale, ligatures, and rhythm,—and Choosing and Using Fonts. It’s the book on web typography. It’s stunning, an instant classic. Just buy it, today.

    Buy from Richard

    Susan Kare Icons

    Susan Kare

    Susan Kare Icons

    Susan Kare is an artist and designer who worked with Steve Jobs on designing the original Macintosh operating system icons. This little book was a birthday present from my friend David and I love it all the more for that.

    Buy

    Twenty-Two Tips on Typography

    Enric Jardí

    Twenty-Two Tips on Typography

    Another, this time tiny, primer of typography which covers how to choose and combine typefaces, and how to set them. The 22 tips include; avoid using bold serifs, don’t make lines too long or too short, and avoid script fonts.

    Buy on Amazon

    8 Faces Collected

    Elliot Jay Stocks

    8 Faces Collected

    Elliot Jay Stocks has been publishing magazines alongside his creative work for years and 8 Faces is perhaps his most interesting work. Originally a series of eight magazines, with interviews with eight designers per issue, the premise of 8 Faces answers the question, “if you could only use eight typefaces for the rest of your career, which would they be?” Elliot collected all eight original issues into one beautifully bound book last year, but if you want a copy, you’ll probably be out of luck as his Kickstarter print run has already sold out.

    8 Faces website

    8 Faces 1–8

    8 Faces 1–8

    Of course, I also bought the collected edition, even though I religiously collected all the original eight 8 Faces as they were published.


    That’s the end of the third section of my bookcase, again chock-full of design inspiration. This bookcase is still bulging, so next week, I’ll write about what’s in the final section and why these books and magazines inspire me.

    ]]> Could you or your team benefit from knowing how to use art direction to improve your product or website? My in-house training and workshops can help.

    Improve your product or website

    ]]>
    <![CDATA[Art Direction for the Web video course available now on Skillshare and Vimeo]]> https://stuffandnonsense.co.uk/blog/art-direction-for-the-web-video-course-available-now-on-skillshare-and-vimeo https://stuffandnonsense.co.uk/blog/art-direction-for-the-web-video-course-available-now-on-skillshare-and-vimeo Sun, 23 Sep 2018 00:00:00 +0100 Over the past few weeks, I’ve been working hard on a new ‘Art Direction for the Web’ video course to accompany my new book and I’m pleased to announce it’s now available to buy on Vimeo and watch on Skillshare.

    ]]>

    In this video course, I teach you how art direction can connect customers with product and website designs and keep people engaged. I show you how art direction can improve someone’s experience and maintain brand values and design principles by connecting marketing and products.

    What this course covers

    You’ll learn about art direction; what it means, why it matters, who can do it, and—most importantly—how it applies to the web. There are ten videos in this hour-long course:

    1. Introduction/overview
    2. Understanding art direction
    3. Brand values and art direction
    4. Deciding your design principles
    5. Audience personas and user stories
    6. Designing a customer journey
    7. Deciding how you want people to feel
    8. Art-directing experiences
    9. Conclusion and next steps
    10. (Bloopers)

    Who will learn from this course?

    Learn how art direction can improve digital products and websites, connect customers with product and website designs, and maintain brand values and design principles.

    • Product and website designers
    • UX designers
    • Web developers

    Stream the course on Vimeo

    I’m relatively new to selling video courses online and as I’m already familiar with Vimeo, their OnDemand service seemed like a good first choice. You can stream my course anytime on any device.

    Why buy this course direct from me?

    As you might imagine, I earn a little more from each sale by cutting out a middle man. That helps me spend more time making more courses and allows me the opportunity to give them even better content, higher production values and covers the cost of professional editing. As a bonus, when you buy this course direct from me, I will send you:

    • Free Art Direction for the Web eBook Available 25/10/18
    • 30+ highly original, responsive HTML/CSS examples
    • PDF worksheets
      • (Email me a copy of your Vimeo receipt and I will send you a link to download your files.)

        (Early-bird offer only £75 / $99 available until 01/10-18.)

        Skillshare

        Skillshare is a popular video training service and my Art Direction for the Web video course is available to watch there. It’s already been chosen by Skillshare as a “Staff Pick.” If you have a subscription:

        If you don’t, sign up using this link and I earn a little more for the referral: Sign up for Skillshare


        Reviews

        I wanted this series of Art Direction for the Web video courses to be entertaining and informative. I was lucky to be introduced to a talented young filmmaker, James Capdevilla, who succeeded in making these videos reflect my personality and enthusiasm for art direction on the web. There’s even a blooper reel which shows I rarely get things right first time:

        If you’ve watched this course on Skillshare or Vimeo and enjoyed it, please take a few minutes to leave a review.


        I’m very pleased with this first video course on Art Direction for the Web and I hope you like it too.

        ]]> Could you or your team benefit from knowing how to use art direction to improve your product or website? My in-house training and workshops can help.

        Improve your product or website

        ]]> <![CDATA[Chock-full of design inspiration (part 2)]]> https://stuffandnonsense.co.uk/blog/chock-full-of-design-inspiration-part-2 https://stuffandnonsense.co.uk/blog/chock-full-of-design-inspiration-part-2 Sun, 23 Sep 2018 00:00:00 +0100 After I posted a photograph of my updated shelves on Twitter, several people asked about the books I’ve collected. Last week I started writing about them (catch up on part one) and here’s part two.

        ]]> My studio bookcase
        My studio bookcase is chock-full of design inspiration.
        Color Chart: Reinventing Color, 1950 to Today

        Ann Temkin

        Color Chart: Reinventing Color, 1950 to Today

        You don’t need to go to London for an amazing art exhibition and our local galleries in Liverpool and Manchester often have interesting shows. Around this time in 2008, Sue and I stumbled into ‘Color Chart: Reinventing Color, 1950 to Today’ in Liverpool and were blown away by it. Damien Hirst has always been a favourite, but we were amazed by Scottish artist Jim Lambie. Lambie’s known for his installation work, particularly using stripes of coloured tape on gallery floors, making every piece temporary and unique. (See below)

        Buy on Amazon

        Jim Lambie installation
        Jim Lambie installation. (Photo credit: The Tatler)
        The Art Directors’ Handbook of Professional Magazine Design

        Horst Moser

        The Art Directors’ Handbook of Professional Magazine Design

        When you’re short on inspiration or you want to learn about grid design and layout techniques, print magazines are a fabulous place to start looking and learning. If you’re at all interested in art direction and magazine design this is good primer on typography including captions, headline and standfirst combinations, and initial letters. The rest of the book is divided into designs for themes like fashion, food and drink, and travel.

        Buy on Amazon

        Information Made Beautiful Infographic Design

        Sendpoints

        Information Made Beautiful, Infographic Design

        Art direction’s about using design to convey information in ways which connect with people, and data visualisation and graphic design are often part of that. I started studying data visualisation in a lot of detail while in Australia, bought several books, and started experimenting with my own projects to help me learn.

        Buy on Amazon

        The Modern Magazine: Visual Journalism in the Digital Era

        Jeremy Leslie

        The Modern Magazine: Visual Journalism in the Digital Era

        This book includes more inspiration than instruction, but it does include some good advice on designing systems which allow for creativity and flexibility while maintaining a consistent brand, look and feel.

        Buy on Amazon

        Making and Breaking the Grid

        Timothy Samara

        Making and Breaking the Grid

        I first bought a copy of this book ten years ago and the latest edition last year. Both versions have influenced my understanding of layout which in turn influenced my writing in Art Direction for the Web. It covers page anatomy—which is relevant to the web and print—using grids to design systems, and how to use those systems with designs being based on them becoming formulaic.

        Buy on Amazon

        Layout Essentials: 100 Design Principles for Using Grids

        Beth Tondreau

        Layout Essentials: 100 Design Principles for Using Grids

        If you’re looking for a packed primer on layout, this would be a great choice. As with all my books on grid design, this one deals primarily with print, but almost all the principles are just as valuable if you design for the web. In fact, I think the print-based principles are far more valuable than the book’s section on ‘Website Basics’ which uses a very uninspiring 2008 design for the New York Times.

        Buy on Amazon

        The Designer and the Grid

        Lucienne Roberts and Julia Thrift

        The Designer and the Grid

        This book is difficult to follow, which is odd, but it does contain a mildly interesting history of grid design. Most of the examples are dated, especially the section on digital design which shows AOL mobile portal on a series of Nokia 3110s. While not a bad book, there are plenty of better ones, so this might not last much longer on my bookcase.

        Buy on Amazon

        Modern Dog: 20 Years of Poster Art

        Mike Strassburger and Robynne Raye

        Modern Dog: 20 Years of Poster Art

        I know very little about Modern Dog Design, except they’re based in Seattle and I didn’t know that when I picked this up at a bookshop in the Metreon, San Francisco, in June 2008. It includes 20 years of Modern Dog’s poster work, and my only complaint is I wish that some examples had been reproduced larger.

        Buy on Amazon

        Art Direction Explained, At Last!

        Steven Heller and Veronique Vienne

        Art Direction Explained, At Last!

        Curiously, there are very few books which explain the fundamentals of art direction, which is one of the reasons I wrote my own. This book is divided into two sections; one driven by the authors, the other from art directors who share their experience. Their focus is mainly on editorial art direction—that suits me fine—and there’s plenty to apply to the web with a little imagination.

        Buy on Amazon

        IdN Extra 07: Infographics—Designing Data

        IdN Extra 07

        Infographics—Designing Data

        Not a book, but issue 7 of IdN Extra magazine which is devoted to infographics and designing data. I bought five copies in my favourite magazine store in Sydney and gave the rest to the designers I was working with for inspiration.

        Buy

        Numbers in Graphic Design

        Roger Fawcett-Tang

        Numbers in Graphic Design

        Numbers are an important part of websites and products, but they rarely get much attention and it seems to me that most web designers are content with Bootstrap-esque styling. Fawcett-Tang did a good job balancing numbers in documents, graphics, infographics, and the physical world. He also included inspirational examples from, among others, Stefan Sagmeister.

        Buy on Amazon

        Super Graphic: A Visual Guide to the Comic Book Universe

        Tim Leong

        Super Graphic: A Visual Guide to the Comic Book Universe

        Think about The Hulk. Every wondered what percentage his purple pants are to his green skin? Want a chart of which characters in The Walking Dead were killed by a human or a zombie? Or, how long comic characters stayed dead? This book on data visualisation uses comic book data as source and inspiration. It’s brilliantly done and every comic-loving designer should own a copy. Leong followed this up last year with Star Wars Super Graphic: A Visual Guide to a Galaxy Far, Far Away, which is now on my wish list.

        Buy on Amazon

        Inside spread from Super Graphic: A Visual Guide to the Comic Book Universe
        ‘Super Graphic: A Visual Guide to the Comic Book Universe’ by Tim Leong
        Basics Design: Layout

        Gavin Ambrose and Paul Harris

        Basics Design: Layout

        This little book was the first I bought to learn more about designing layout and while there are now much better books available—in particular Making and Breaking the Grid—somehow I still kept it around.

        Buy on Amazon

        Hall of Femmes Ruth Ansel

        Hall of Femmes

        Ruth Ansel

        While I was researching the work of Harper’s Bazaar art director Bea Feitler, I came across this little book about her long-time collaborator and fellow art director Ruth Ansel. It’s published by Swedish cooperative Hall of Femmes, which “aims to highlight the work of women in creative industries through books and events.” It covers Ansel’s most important creative work and my only complaint is that the book is only 72 pages and I wish it were bigger and longer.

        Buy

        Thoughts on Design

        Paul Rand and Michael Bierut

        Thoughts on Design

        Speaking of small reprints about the work of one of the most influential designers, this 2014 reprint of Paul Rand’s 1947 essay. I would love to find a good 1960s or ’70s copy and would pay handsomely for it.

        Buy on Amazon

        Ugly Is Only Skin-Deep

        Dominik Imseng

        Ugly Is Only Skin-Deep: The Story of the Ads That Changed the World

        Doyle Dane Bernbach’s advertising for the Volkswagen Beetle in the ’60s is considered to be the campaign which changed the advertising industry, in no little part due to Bill Bernbach establishing creative teams of art directors and copywriters who worked together. This book tells the story of that campaign, how it developed, and how it’s influenced designers ever since.

        Buy on Amazon


        That’s the end of the second section of my bookcase, once again chock-full of design inspiration. This bookcase is still bulging, so next week, I’ll write about what’s in the next sections and how these books and magazines inspire me.

        ]]> My Art Direction for the Web video course is now available. Over the hour, I teach how art direction can improve someone’s experience and maintain brand values and design principles by connecting marketing and products.

        Learn about Art Direction for the Web

        ]]>
        <![CDATA[Chock-full of design inspiration (part 1)]]> https://stuffandnonsense.co.uk/blog/chock-full-of-design-inspiration-part-1 https://stuffandnonsense.co.uk/blog/chock-full-of-design-inspiration-part-1 Mon, 17 Sep 2018 00:00:00 +0100 Our shipment arrived home from Australia last week, and I had the chance to choose which of my design books and magazines to keep in my studio. After I posted a photograph of my updated shelves on Twitter, several people asked about the books I’ve collected, so over the next few weeks, I’m going to write about them.

        ]]>
        My studio bookcase is chock-full of design inspiration

        Magazines

        I daren’t count how much money I’ve spent in magazine shops like Magma in London and Manchester, and online over the past few years. Magazines have undergone a renaissance recently and when you’re short on inspiration or you want to learn about grid design and layout techniques, print magazines are a fabulous place to start looking and learning.

        I buy as varied a selection as I can and rarely collect more than one or two issues, unless a magazine finds a new art direction or has a major redesign. I choose magazines with plenty of interesting design elements, but if a magazine includes only a few pieces of inspiration, I’ll admit I’m not above snapping photographs of them with my phone before putting it back on the shelf.

        The Gentlewoman, Racquet, Record Culture, and Uppercase were recent purchases, and if you asked me to recommend three magazines to start your own collection, I’d tell you about:

        Eye magazine

        Eye magazine

        Eye magazine is “The world’s most beautiful and collectable graphic design journal” and you should start with #96, “Anatomy of a Magazine” which is part one of a two-part special on designing a magazine experience. One of the best reasons to put your hand in your pocket for this issue is a feature on Tom Wolsey’s art direction of Town magazine.

        Eye magazine website

        BranD magazine

        BranD magazine

        As you might have already guessed, BranD magazine focusses on brand design. You’ll find plenty of inspiration in every issue, but issue #32 from 2017 is a favourite of mine as it focusses on editing and making creative magazines, something which is just as appropriate online as in print.

        BranD magazine website

        Lagom magazine

        Lagom magazine

        I have to admit to being skeptical that Elliot and Samantha Jay Stocks would be able to maintain the quality of Lagom after the first few issues, but they’ve improved the magazine with every issue. Now with an updated design, Lagom shows off Elliot’s skills as an editorial designer, is full of design inspiration, and contains some fabulous articles.

        Lagom magazine website


        Books

        It seems to me that with one or two notable exceptions like those published by Smashing Magazine, books on website design and development have got shorter and shorter, to the extent that there are very few big books published on those subjects anymore. Fortunately, people are still publishing books on design and after I gave away most of my web books, I replaced them with books on art direction and design fundamentals and inspiration.

        The Art of Mondo

        The Art of Mondo

        I’m an avid collector of Mondo and have some incredible King Kong and Planet of the Apes posters in my collection. Mondo posters sell out incredibly quickly, but fortunately there’s now a thick book which catalogues their work.

        Buy on Amazon

        1974 Canadian Broadcasting Corporation Graphic Standards Manual Revival

        1974 Canadian Broadcasting Corporation Graphic Standards Manual Revival

        Conversations about design systems and pattern libraries has increased interest in the design manuals produced by big companies and organisations in the past. This revival of the 1974 Canadian Broadcasting Corporation Graphic Standards Manual started as a Kickstarter project and raised CA$51,921. This reproduction was a limited edition so you won’t pick up a copy easily.

        Original Kickstarter

        British Rail Corporate Identity Manual

        British Rail Corporate Identity Manual

        In much the same vein, this reproduction of the British Rail Corporate Identity Manual is much more widely available. I ordered mine online. It didn’t arrive on time.

        Buy

        1975 NASA Graphics Standards Manual

        1975 NASA Graphics Standards Manual

        This 1975 reproduction of the NASA Graphics Standards Manual covers the design of everything from a business card to the branding on a booster rocket.

        Buy

        Designing Obama

        Scott Thomas

        Designing Obama

        I wanted to buy a printed copy of Scott Thomas’ Designing Obama when he launched it on Kickstarter in 2009. Sadly, the cost of shipping internationally was prohibitive at the time and I made do with the iPad app. A couple of years ago, I emailed Scott and he kindly sent me one of his few remaining copies. It was worth the wait.

        Original Kickstarter

        1973 Official Symbol of The American Revolution

        1973 Official Symbol of The American Revolution

        This little book is a reproduction of the usage guidelines for the 1973 Official Symbol of The American Revolution. It’s short and sharp and can teach you a lot about how brand elements need to adapt to different applications.

        Buy

        1970 New York City Transit Authority Graphics Standards Manual

        1970 New York City Transit Authority Graphics Standards Manual

        This compact reproduction of the 1970 New York City Transit Authority Graphics Standards Manual is also readily available and contains perhaps the most complete explanation of how to use Helvetica that I have ever seen.

        Buy

        Draplin Design Co.: Pretty Much Everything

        Aaron Draplin

        Draplin Design Co.: Pretty Much Everything

        Aaron Draplin is a personal idol of mine. I spoke with him on my podcast while he was preparing this book about petty much everything he’s ever done, and I know the love he put into it. If there’s one modern day graphic design book you should own, this is it.

        Buy on Amazon

        The Process is the Inspiration

        House Industries

        The Process is the Inspiration

        I’m also a big fan of House Industries and their work. This anthology is not only beautifully designed, it’s an incredible object in itself and just holding proves to me that a digital edition can never come close to the experience of a printed book.

        Buy on Amazon

        This is the section of my bookcase I devoted to art direction and the work of some of the most influential art directors of the past 90 years.

        Alexey Brodovitch

        Kerry William Purcell

        Alexey Brodovitch

        Alexey Brodovitch art directed Harper’s Bazaar magazine from 1934–1958. Brodovitch was more than an art director; he was an artist and a skilful photographer who taught, among others, Diane Arbus and Richard Avedon. It’s evident that it was Brodovitch’s knowledge of photography that gave his work its classic feel. He instinctively knew how to combine photographs with written content, often turning text into shapes that contrasted with or mirrored the forms in his photography.

        Brodovitch’s art direction for the Harper’s Bazaar fashion magazine has influenced designers ever since and I find his layout sketches most informative because I often learn more about how someone thinks by looking at their work-in-progress rather than I do a finished result.

        Buy on Amazon

        The Graphic Language of Neville Brody

        Jon Wozencroft

        The Graphic Language of Neville Brody

        In the mid-1980s, I was obsessed with music, so it was hard not to know about The Face magazine. I knew there was something special about it, although at the time I didn’t know who Neville Brody was or what an art director did. It was only in the past few years that I became obsessed by Brody’s work and over the coming months I’m going to speak and write about how his work inspires me by sharing some of my favourite designs and explaining how the might apply to the web.

        Buy on Amazon

        The Story of The Face: The Magazine that Changed Culture

        Paul Gorman

        The Story of The Face: The Magazine that Changed Culture

        The Face was a culture, fashion, and music magazine published in Britain until 2004 and Brody worked as its art director until 1986. Like punk, The Face had a rebellious attitude to the establishment, and much of Brody’s work was experimental.

        He once described The Face as “a living laboratory where [he] could experiment and have it published.” His golden rule was to question everything.

        Buy on Amazon

        Various Face magazines from the 1980s

        Various Face magazines from the 1980s

        While books on influential art directors who worked decades ago are sometimes the only way to see their work, there’s nothing better than finding original examples. I bought various copies of the Face magazine from the 1980s a couple of years ago and I look at them almost every week to remember how design can change people’s perceptions and reflect our culture.


        That’s the end of the first section of my bookcase, chock-full of design inspiration from books and magazines. This bookcase is bulging, so over the next few weeks, I’ll write about what’s in the other three sections and how these books and magazines inspire me.

        ]]> Could you or your team benefit from knowing how to use art direction to improve your product or website? My in-house training and workshops can help.

        Improve your product or website

        ]]>
        <![CDATA[Art Direction for the Web video course. Available soon.]]> https://stuffandnonsense.co.uk/blog/art-direction-for-the-web-video-course-available-soon https://stuffandnonsense.co.uk/blog/art-direction-for-the-web-video-course-available-soon Wed, 12 Sep 2018 00:00:00 +0100 Over the past few weeks, I’ve been working hard on a new Art Direction for the Web video course to accompany my new book. Today, I wanted to share a preview and the first episode of nine in the course.

        ]]>

        I wanted this series of Art Direction for the Web video courses to be entertaining and informative. I was lucky to be introduced to a talented young filmmaker, James Capdevila, who succeeded in making these videos reflect my personality and enthusiasm for art direction on the web.


        Over the next few months, I’m working on four, hour-long Art Direction for the Web video courses, including:

        1. Art Direction for the Web (this course)
        2. Art direction and layout
        3. Art direction and typography
        4. Art direction and images

        Art Direction for the Web video course

        This first hour-long Art Direction for the Web video course includes advice on:

        1. Introduction/overview
        2. Understanding art direction
        3. Brand values and art direction
        4. Deciding your design principles
        5. Audience personas and user stories
        6. Designing a customer journey
        7. Deciding how you want people to feel
        8. Art-directing experiences
        9. Conclusion and next steps

        This first Art Direction for the Web video course will be available soon via Skillshare and other platforms or to buy directly from me. My Art Direction for the Web book will be published by Smashing Magazine in October and pre-orders will open soon.

        I’m very pleased with this first video course on Art Direction for the Web and I hope you like it too.

        ]]> Could you or your team benefit from knowing how to use art direction to improve your product or website? My in-house training and workshops can help.

        Improve your product or website

        ]]>
        <![CDATA[Art Direction for the Web: Taking the lede]]> https://stuffandnonsense.co.uk/blog/art-direction-for-the-web-taking-the-lede https://stuffandnonsense.co.uk/blog/art-direction-for-the-web-taking-the-lede Tue, 11 Sep 2018 00:00:00 +0100 Last week I wrote about designing standfirst paragraphs, because they’re something which website designers frequently overlook. I said “don’t confuse a standfirst with a ’lead’ (or lede) paragraph” and several people asked me to clarify the difference.

        ]]>

        You can read more about this topic in my upcoming book, Art Direction for the Web, published in October 2018 by Smashing Magazine. Sign up for updates and a discount code.


        Trivia: Why “lede” not “lead?” It’s often suggested that lede is journalism jargon from the days of the newsroom when old-schools typesetters needed a way to distinguish between the “lead” (rhymes with bead) of a story and the hot metal “lead” (rhymes with bread) they used to set type. But after researching dozens of journalism books, Howard Owens decided this explanation is “romanticism and nostalgia.” My fondness for nostalgia or not, I still prefer to spell “lede”. Maybe I”m just an incurable romantic?


        What’s a lede?

        A lede sets the scene or tone for an article or provides a summary or a punchy fact designed to encourage people to read on. There are several styles of lede:

        1. Summary lede
        2. Blind lede
        3. Creative lede
        4. Punch lede
        5. Scenic lede
        6. Story lede
        Art Direction for the Web
        Summary lede, below

        1) Summary lede

        First, a reminder of the headline and standfirst from my previous article:

        Hatton Garden (Un)Safe Deposit Company

        Could your Grandad and his pensioner pals pull off the biggest robbery in British history?

        A standfirst sells content to a reader by capturing their imagination. Although a lede has a different role, it should still engage enough to encourage people to read on and shouldn’t include bare facts, like this:

        A robbery took place at the Hatton Garden Safe Deposit Company.

        Or,

        In April 2015, four men robbed a London safety deposit company.

        Sometimes referred to as a ’hard news’ lede, a summary lede encapsulates an article’s most important information into one or two interesting sentences and between 20 and 30 words. It uses as few words as possible and focusses on a story’s five W’s of; “who,” “what,” “when,” and “where.” I’m going to write a lede for my story about the famous Hatton Garden Safe Deposit robbery:

        Q: Who’s the story article about? Who was involved?
        A: Four old-aged career criminals, lead by Brian Reader.

        Q: What happened?
        A: Reader and his ageing accomplices drilled into the vault of a safety deposit company and stole £200 million in jewellery in the biggest robbery in British history.
        Q: When did it happen?
        A: Over Easter weekend, April 2015.
        Q: Where did it happen?
        A: Hatton Garden, London.
        Q: Why it happened?
        A:This gang of diamond wheezers wanted to pull off one last job.

        You can sometimes leave the “how” for an article’s running text, so my summary lede might read:

        Four old-school villains (who) pulled off the biggest robbery in British history (what) in April 2015 (when) when they drove away with £200 million in stolen jewellery from London safety deposit boxes (where).

        27 words including the story’s “who,” “what,” “when,” and “where.”

        Art Direction for the Web
        Blind lede, below

        2) Blind lede

        A blind lede leaves out certain details which might reduce its effectiveness, perhaps by adding an unnecessary complication which might confuse a reader. Start with some interesting facts which encourage people to read on:

        Four villains, three holes, and £200 million in stolen jewellery. How old-school career criminals pulled of Britain’s biggest robbery in 2015.

        Or this lede, which includes two paragraphs:

        By drilling three holes through solid concrete, four old-school villains robbed the Hatton Garden Safe Deposit Company.

        These career criminals drove away with £200 million in stolen jewellery in what became Britain’s biggest robbery in 2015.

        Art Direction for the Web
        Creative lede, below

        3) Creative lede

        When your article doesn’t include a standfirst, a creatively written lede can fulfil a similar role. Remember though, a lede should be part of an article, and not stand apart from it:

        Not even 50cm of solid concrete could stop these four old-school villains. With a second-hand drill and a rented ram, they drilled their way to £200 million in stolen jewellery in what became Britain’s biggest robbery.

        The “nut”

        When you write a creative lede, you might not get the opportunity to tell a reader some of the most important facts, or make an important point, in a story. If you leave those until either the second or third paragraph in your running text, that becomes the “nut,” short for “nutshell:”

        Not even 50cm of solid concrete could stop these pensioner crooks!

        In 2015, four old-school villains—all in their sixties and seventies—pulled off Britain’s biggest robbery by drilling their way to £200 million in stolen jewellery.

        First-person lede

        I’ve always been fascinated by crimes which are cleverly carried out and have a fondness for old rogues and villains. By speaking directly to the reader, sharing a personal experience, and making myself part of the story, I can make this creative lede more engaging:

        If Hollywood movies are anything to go by, I’m not the only person with a fondness for old-school villains and their exploits. I may not have the stones to pull off the biggest robbery in British history, but I do secretly admire the men who did.

        Art Direction for the Web
        Punch lede or zinger, below

        4) Punch lede

        Sometimes referred to as a “zinger,” a punch lede grabs a reader’s attention by including something startling, like the fact that each of the Hatton Garden robbers was all in their sixties and seventies:

        Even with their combined age of 273, these four villains weren’t past it. They pulled off Britain’s biggest robbery.

        Art Direction for the Web
        Scenic lede, below

        5) Scenic lede

        A scenic or anecdotal lede describes a scene surrounding an event to draw a reader into a story.

        The streets of London were deserted, the offices empty. Vault doors were locked, and alarms were set. While the jewellers of Hatton Garden spent Easter at home with their families, deep underground, four men had planned to rob them.

        Art Direction for the Web
        Story or narrative lede, below

        6) Story lede

        Similar to a scenic lede, a story lede introduces the main participants and sets them in the context of a narrative. It doesn’t try to summarise an article, but instead makes readers want to find out what happens next:

        “I have an idea.” Brian Reader said, taking a sip from his pint. “How about we come out of retirement for one last job?” His three old friends looked at him in disbelief. Brian smiled. “It’s not for the money, it’s for the glory.”


        Six lede writing tips

        Whatever you’re writing; from an entry on your company blog or a news story, to documentation or help text for a product or service, your lede should give readers a clear understanding of your content, tell them what to expect, and encouraging them to do that. When you’re writing a lede:

        Do:

        1. Keep a lede short
        2. Name names and include SEO keywords
        3. Use an active voice

        Don’t:

        1. Include anything irrelevant (bury the lede)
        2. Make puns
        3. Set false expectations

        Designing a lede

        Remember that unlike a standfirst, ledes should be part of the running text in an article, not separate from it. Depending on the style of your product, publication, or website, a lede needn’t look different from other paragraphs of running text.

        Art Direction for the Web
        A lede needn’t look different from other paragraphs of running text.

        However, the may be times when you’ll want to make a lede visually distinctive, perhaps by using a heavier weighted version of your typeface, or by adding a Drop or Initial (versal) cap. You can use these caps for more than indicating a lede paragraph: they can add personality to it too.

        Art Direction for the Web
        Art Direction for the Web, available October 2018.

        Lede paragraphs can be equally important for improving the usability of a product as they are in editorial design.

        Art Direction for the Web
        In this example from WheelMan, the app I designed for Art Direction for the Web, this lede paragraph introduces content on this help page (left:) “Scheduling a gateway is a simple as choosing a location for your heist, when you need to get away, and where you need to get to. Art Direction for the Web, available October 2018.

        They’re just as important on mobile and they are on desktop.

        Art Direction for the Web
        In this example from WheelMan’s companion website, the lede leads readers into a story about notorious London gangland leaders, Reggie and Ronnie Kray. Art Direction for the Web, available October 2018.
        Art Direction for the Web
        Again from the WheelMan’s companion website, this lede summarises the story of Amy Johnson, the first woman to fly solo from the UK to Australia. Art Direction for the Web, available October 2018.

        Don’t bury the lede

        There’s no doubt that when written well, a lede paragraph can set the scene or tone for an article, provide a summary, or a punchy fact which encourages people to read on, and that matters as much on mobile or desktop, product or website. Achieving all that requires both creative thought and inspiration. I hope I’ve encouraged you to think more creatively about lede paragraphs and inspired you to consider them more often.

        ]]> Were you inspired by this post? Imagine how my mentoring programme could help you to become a better designer.

        Develop your skills as a designer

        ]]>
        <![CDATA[Batificity]]> https://stuffandnonsense.co.uk/blog/batificity https://stuffandnonsense.co.uk/blog/batificity Sun, 09 Sep 2018 00:00:00 +0100 Specificity Wars, you’re going to love Mandy Michae’s Batificity.]]> I always enjoy seeing people—like my dear friend Mandy Michael—explain complex topics in fun and imaginative ways. If you liked my Specificity Wars, you’re going to love Mandy’s Batificity.

        ]]>
        <![CDATA[Art Direction for the Web: Designing standfirst paragraphs]]> https://stuffandnonsense.co.uk/blog/art-direction-for-the-web-designing-standfirst-paragraphs https://stuffandnonsense.co.uk/blog/art-direction-for-the-web-designing-standfirst-paragraphs Fri, 07 Sep 2018 00:00:00 +0100 Designers frequently overlook a few design elements if they remember them at all. Recently, I’ve noticed that the styles of typographic details like bylines, citations, dates and times are more often than not pulled from frameworks and pattern libraries and receive very little original thought.

        ]]> Other typographic elements suffer from the same lack of consideration, and this is not only a missed opportunity to be creative, but to take a moment to consider how they can:

        • Bring a design together
        • Connect an audience with a brand
        • Help to tell a story

        As my clients became increasingly concerned with presenting their content in more original ways, I took a close look at designers in other media and applied what I learned to my work for the web. Over the next few weeks, I’ll share my inspiration and show you how to create inspired designs from the most basic elements. In this, the first article in this series, I’ll teach you about standfirst paragraphs.


        You can read more about this topic in my upcoming book, Art Direction for the Web, published in October 2018 by Smashing Magazine. Sign up for updates and a discount code.


        What’s a standfirst?

        In newspapers and magazines, online and in print, a standfirst is the ‘first’ few lines of an article and should be designed to ‘stand’ out.

        Art Direction for the Web
        Common standfirst styles in online newspapers and magazines.

        You might also see standfirst paragraphs referred to as “decks,” “kickers” because they kick readers into the content, “riders,” “summaries” as they often summarise the content of an article, or—my personal favourite—“the sell” because one of its jobs is selling content to a reader.

        Don’t confuse a standfirst with a ‘lead‘ (or lede) paragraph though, as a standfirst should stand apart as well as stand out. It should be separate from running text in an article, unlike a lead which is part of it. If you’re looking for a dictionary definition of “standfirst,” Collins offers:

        “An introductory paragraph in an article, printed in larger or bolder type or in capitals, which summarises the article.”

        Source

        While a standfirst paragraph is often “larger, bolder,” or “in capitals,” that’s not necessarily how it always looks. There’s no rule book to dictate its size or style, or even its position. That’s something important to bear in mind when you’re designing layouts for many different devices or screen sizes. The design of a standfirst should help it do its job and should:

        • Be designed to catch someone’s eye
        • Encourage people to read on
        • Give people an idea of what an article contains
        • Improve understanding and share-ability

        Headlines capture attention, and a standfirst captures the imagination

        Capturing someone’s attention is also the job of a headline, but a standfirst needs to go further. A standfirst shouldn’t merely repeat what’s in a headline. As “the sell,” its content should capture a reader’s imagination and make them want to read what follows. For example, a headline about Britain’s biggest robbery might read:

        Hatton Garden (Un)Safe Deposit Company

        It’s common for a standfirst paragraph to be either two, three, or four lines long at most and be brief, containing between 20–50 words. An effective standfirst to follow that headline might say:

        How four old-school London villains pulled off the biggest heist in British history and drove away with £200 million in stolen jewellery from London safety deposit boxes.

        A standfirst paragraph might also include a question which is designed to engage the reader?

        How did four old-school London villains pull off the biggest heist in British history, and drive away with £200 million in stolen jewellery?

        Selling is as much an art as copywriting or design, so consider the content of a standfirst carefully. As its job is to sell content, and not all customers are the same, a standfirst paragraph might change to appeal to specific audiences. The tone of this standfirst is intended to attract a younger audience:

        Could your Grandad pull off the biggest robbery in British history and get away with £200 million?

        Whereas, if the style of a publication is designed to appeal to older readers, that paragraph might read:

        How did four career criminals, all in their sixties and seventies, manage to execute the biggest robbery in British history and steal £200 million in jewellery and other valuables?

        Remember, the job of a standfirst is to capture a reader’s imagination and to sell an article’s content, so its looks matter as much as what it says.

        Designing a standfirst

        Collins suggests that a standfirst paragraph can be “larger, bolder,” or “in capitals,” and while you’ll often find those common styles used, they’re not the only way to catch someone’s eye, encourage people to read on and improve their understanding.

        When I’m designing a standfirst paragraph, I keep several things in mind:

        • Its position and style should be distinct from running text
        • How it looks can be determined by the style of a publication
        • Sometimes the article’s subject influences its look

        There’s an argument that in markup, a standfirst needn’t be a paragraph at all. You should use the most semantically appropriate element including a blockquote or even a lower level headline.

        In Art Direction for the Web, to help me describe some of the ways you can style a standfirst, I designed Wheel Man. It’s an app for booking a fast car and a getaway driver, plus a companion website which is chock full of advice on how to get away after a robbery, plus stories about famous getaway drivers. One driver is a former model, and TV stunt driver Georgia Durante who wrote a book about her life as a “model turned mafia wife.”


        Inspired standfirst designs

        Art Direction for the Web
        Art Direction for the Web, available October 2018.

        1) Span multiple columns

        It’s common to see a standfirst span multiple columns of running text and positioned between an article headline and content. When you’re following that convention, it’s essential a standfirst paragraph be typographically distinct from both a headline and body copy, perhaps by increasing its size or contrast using a heavier or lighter weight.

        Art Direction for the Web

        2) Above a headline

        Laws are meant to be broken. To make sure you catch someone’s eye, place a standfirst above, instead of below, a headline. You might also add extra interest by limiting its width to span fewer columns.

        Art Direction for the Web

        3) Underlines add emphasis

        Give a standfirst greater emphasis by adding thick underlines. When the default text-decoration:underline isn’t strong enough, several experimental CSS properties offer greater control over underline styles. These include, text-decoration-color, text-decoration-skip, and text-decoration-style.

        Browser implementation of these properties is patchy, so you might use a more reliable background-image technique. This technique uses CSS gradients to create underlines. You can also add background images for a unique underline.

        Art Direction for the Web

        4) Borders add structure

        If you’re looking for something stronger, combine thick underlines with even thicker borders. Keep those border widths in proportion to your underlines and your typeface. For example, a bottom border might be two, three, or four times the width of your underlines.

        Art Direction for the Web
        Art Direction for the Web, available October 2018.

        5) Borders define space

        Add a thick border to the left of a standfirst to define its position and prevent it from drifting into space. Out-denting this standfirst by the combined border and padding width also means its content align with columns of running text below.

        Art Direction for the Web

        6) Borders stand out

        When you position a standfirst close to columns of running text, it needs to look different enough for readers to see the distinction between it and regular paragraphs. As well as increasing the size and weight of standfirst text, add heavy borders to the top and bottom.

        Art Direction for the Web

        7) Floating a standfirst

        When a standfirst looks sufficiently different from running text, you can place it close to an article. Float a standfirst into the space created by a wide left margin. Aligning its content to the right helps to indicate where someone should start reading.

        Art Direction for the Web

        8) Oversized margins

        To bring an abstract feel to this layout, add an oversized margin to the left of a floated standfirst. This limits its width, forming a column which pulls the eye towards the content. The image at the top of this column provides a focal point.

        Art Direction for the Web
        Art Direction for the Web, available October 2018.

        9) Drop and initial caps

        Drop and initial caps can be both decorative and useful in that they mark where someone should start reading your text. What’s the difference between them? Initial caps sit on the baseline and drop caps fall below it. You can use initial caps for more than simply indicating the start of running text: they can add personality to a standfirst too.

        Art Direction for the Web

        10) Style the first line

        On magazine and newspaper pages, you’ll often find the first word, three or five words, or even a phrase in the first paragraph emphasised in some way. Sometimes set in bold, other times uppercase. You can also use pseudo-class selectors to apply that treatment to the first line of a standfirst, no matter how long or short that is.

        Art Direction for the Web

        11) Deconstructed text

        How a standfirst paragraph is often determined by the overall style of a publication, but it can sometimes by influenced by an article’s subject. This offers a fabulous opportunity to be creative, perhaps by deconstructing its content and rotating each line to turn a standfirst into a strong visual element.

        Art Direction for the Web

        12) Exaggerated leading

        A standfirst should look sufficiently different, but that needn’t mean text must be larger than nearby running text. Instead, use exaggerated leading which is much looser than other text in the article and a deeper margin below it to separate them further.

        Art Direction for the Web
        Art Direction for the Web, available October 2018.

        12) Exaggerated leading

        Exaggerated leading can be particularly effective when turning a standfirst into a signature design element. This large, centred paragraph balances the visual weight of a full-height image opposite and its lightweight style makes it look even more distinctive.

        Art Direction for the Web

        14) Standfirst in a banner

        An article about a real-life getaway driver deserves a high-impact design. Placing a high-contrast standfirst over an image which fills the screen creates a feature which demands attention and gets a reader’s adrenaline flowing, ready for what comes next.

        Art Direction for the Web

        15) Curious rotation

        A standfirst should also make readers curious and this design becomes hugely more interesting when I turn this centre-aligned standfirst on its side. The loose leading and uppercase style also turn this paragraph into a strong visual element.


        Stand and deliver

        There’s no doubt that when written well, a standfirst can connect readers with your content. Its design can also help people understand what‘s coming next, and offers us an opportunity to connect them the brand of a magazine, product, or website. Achieving all that requires both creative thought and inspiration. I hope I’ve encouraged you to think more creatively about the design of your standfirst paragraphs and inspired you to consider them more often.

        ]]> Were you inspired by this post? Imagine how my mentoring programme could help you to become a better designer.

        Develop your skills as a designer

        ]]>
        <![CDATA[Using multiple :not() selectors ]]> https://stuffandnonsense.co.uk/blog/using-multiple-not-selectors https://stuffandnonsense.co.uk/blog/using-multiple-not-selectors Thu, 30 Aug 2018 00:00:00 +0100 Here’s a quick entry about something I learned just this week about :not() pseudo-class selectors and how to combine them.

        ]]> I’m working on a client’s website and wanted to apply a fancy animated underline style to (almost) every link:

        a {
        /* animated underline styles */ }

        That selector applies those styles to every link on the page, but there are certain types of links where I don’t want an animated underline applied:

        /* Links which look look buttons */
        a.btn {
        /* no animated underline styles */ }
        
        /* Links where an ellipsis shows there’s more to read */
        [title*="Read more"] {
        /* no animated underline styles */ }
        
        /* Links in superscript (eg: to footnotes) */
        [href*="footnote"] {
        /* no animated underline styles */ }

        I could add a class attribute to every link where I want an animated underline:

        <a class="animated">[…]</a>

        This would be incredibly wasteful and would bind my markup to presentation. I could add a class attribute to the select few links where I don’t want a animated underlines:

        <a class="not-animated">[…]</a>

        I’m a strong advocate of using class attributes for the exceptions, not the rules, but again I’d prefer not to use an attribute in HTML just for binding it to a style. I could also override my fancy underline styles with defaults where I don’t want them to animate:

        a {
        /* animated underline styles */ }
        
        a.btn,
        a[href*="footnote"]
        a[title*="Read more"] {
        /* animated underline styles */ }

        This is the best solution so far, but still means I have to write two sets of styles; one for the animated underlines and another set to override them. While this isn’t the worst crime against CSS, it’s still wasteful, especially when I can use :not() pseudo-class selectors instead.


        For years, I styled navigation by adding margins, padding, and separators between links:

        <nav>
        <a>Ace Of Spades</a>
        <a>Bomber</a>
        <a>Dead Men Tell No Tales</a>
        <a>No Class</a>
        </nav>
        
        nav a {
        margin-right: 1em;
        padding-right: 1em;
        border-right: 1px solid #ccc; }

        But what options do I have to not apply those styles to the last link in the navigation? I could, and often did, apply a class attribute to that final link:

        <nav>
        <a>Ace Of Spades</a>
        <a>Bomber</a>
        <a>Dead Men Tell No Tales</a>
        <a class="last">No Class</a>
        </nav>
        
        nav a.last {
        margin-right: 0;
        padding-right: 0;
        border-right-width: 0; }

        No Class

        When I stopped using presentational class attributes, I started using pseudo-classes, including :last-child and sometimes :last-of-type:

        nav a:last-child {
        margin-right: 0;
        padding-right: 0;
        border-right-width: 0; }

        This allowed me to remove the presentational class attribute, but it still meant writing two sets of styles:

        nav a {
        /* styles */ }
        
        nav a:last-child {
        /* override styles */ }

        Then I discovered the CSS Level 3 :not() pseudo-class selector and to answer the obvious question before it’s asked, this selector is supported in every current major desktop and mobile browser including IE11.

        Stay Clean

        :not() pseudo-class selectors allow me to ditch both presentational class attributes and override styles, meaning my markup and CSS can stay clean. They’re technically what’s known as a negation pseudo-class and, according to CSS Tricks:

        :not matches an element that’s not represented by the argument.

        This means that styles will be applied to selected elements except ones we specify they should ‘not.’ Mozilla’s explanation of :not() pseudo-class selectors starts with selecting every type of element which isn’t a paragraph, although that’s not something you’ll probably ever need to do:

        :not(p) {
        color: blue; }

        Some more practical uses might be:

        /* Links which look look buttons */
        a:not(.btn]) {
        /* styles */ }
        
        /* Inputs except checkboxes */
        input:not([type="checkbox"]) {
        /* styles */ }

        And, to go back to one of my navigation links:

        /* Links to footnotes */
        a:not([href*="footnote"]) {
        /* styles */ }

        Bad magic

        It’s easy to apply the same styles to multiple selectors, just by separating them with a comma:

        .btn,
        [href*="footnote"],
        [title*="Read more"] {
        /* styles */ }

        You can be forgiven for thinking, as I did, that the same syntax would apply to :not() selectors, but we’d be wrong:

        /* This won’t work */
        a:not(.btn),
        a:not([href*="footnote"]),
        a:not([title*="Read more"]) {
        /* styles */ }
        
        /* Neither will this */
        a:not(.btn, [href*="footnote"], [title*="Read more"]) {
        /* styles */ }

        The answer to applying my animated underline styles to all links except those which look like buttons, links to footnotes, and to read more is to chain multiple :not selectors together:

        a:not(.btn):not([href*="footnote"]):not([title="Read more"]) {
        /* styles */ }

        Ace of Spades

        :not() pseudo-class selectors are an excellent tool for keeping both your markup and CSS clean and they’re only going to Brazil get better. The newest CSS Selectors Level 4 working draft includes plans to allow comma separated lists of selectors inside the :not() pseudo-class. This means that instead of writing:

        a:not(.btn):not([href*="footnote"]):not([title="Read more"]) {
        /* styles */ }

        We’ll be able to write a shorter selector:

        a:not(.btn, [href*="footnote"], [title*="Read more"]) {
        /* styles */ }

        This simplified selector is already supported in Safari on MacOS and iOS and a little encouragement to other browser vendors would certainly not be Overkill.

        ]]>
        <![CDATA[Trigger man]]> https://stuffandnonsense.co.uk/blog/trigger-man https://stuffandnonsense.co.uk/blog/trigger-man Wed, 29 Aug 2018 00:00:00 +0100 Maybe, calling my open source web designer and developer contract a “Killer” wasn’t such a smart idea?

        ]]> Search for “contract killer” and it shouldn’t take you too long to track down my contract. Last time I checked, results for that page include the title “Contract Killer open source contract — Stuff & Nonsense” and depending, on the search engine you use, a description includes me, designing, speaking, and writing, the things I’m known for.
        Search queries

        What I hope I’m not infamous for is, you know, ‘actual’ killing. That doesn’t stop me getting requests to rub someone out. Just this week, two emails dropped into my inbox. They were both short, to the point:

        Two emails I received last week

        This isn’t the first time someone’s been in touch like this. A couple of years ago, our phone rang and a magazine journalist asked my incredulous wife if I was available to interview about my life as a contract killer. She’d found me on Google too, and wouldn’t take “no” for an answer, even after it was explained that if I did have a sideline in handing out one-way tickets, the last place I would promote my services was online.

        • Reporter: “Can I speak to Andy please?”
        • Sue: “May I ask who’s calling and what it’s about?”
        • Reporter: “It’s Jane. I’d like to interview him about his life as a contract killer.”
        • Sue: “My husband’s not a contract killer!”
        • Reporter: “Isn’t he? But I found his name on Google.”
        • Sue: “I think what Google says is, he wrote a ‘killer contract!’”

        I rolled my eyes and we laughed about how dumb this person must be to confuse our business with the business of taking someone out, but we weren’t laughing a few weeks later when two envelopes dropped on our doormat.

        Identifiable information removed

        Inside each envelope was a letter, asking me to murder two women and one woman’s children.

        Identifiable information removed. (Full size image)

        The first letter read:

        Hallo

        My name is Sahra [redacted] and I want you to kill a old lady for me. She lives in Sydney Australia. Her name is Gretal Silvia [redacted] also goes by the name of Gretal Silvia [redacted]. She was born 1938 September [redacted] and lives in Sydney Australia. I want her dead. Turn page.

        Identifiable information removed. (Full size image)

        The second note was even more chilling:

        Hallo

        My name is Sahra [redacted] and this is a Contract Killing company and the contract killing I want also is to also kill Patricia [redacted] and Milly and Molly that were 2 girls in Texas Austin. I want you to kill both Milly and Molly (turn page). I want 2 girls 2 die Milly and Molly in Austin Texas. You will find them by Molly in Austin Texas. Molly is known there. The name Molly is known there and you to kill Milly and Molly. Milly that hangs around Molly. Milly is Midred that hangs around Molly Mildred that hangs around Molly and if not there no more I don’t know but I also want you to kill Patricia and I think she she might be be Polish but she was in Sweden Stockholm when she was young. Please find there names and kill them. Thank you!!!!!

        I don’t know what your postman usually delivers, but letters asking to me kill someone aren’t something I receive every day. It’s also not every day I have to explain over the phone to a puzzled policeman that I wrote a killer contract and was now receiving contract killing requests.

        A few hours later, and an equally cautious constable took a statement and both letters and we didn’t hear from our cutthroat correspondent again.

        Every so often, I wonder about my mystery letter writer and if she got the help she needed. Not to kill Gretal Silvia [redacted], Patricia, Milly, and Molly, (I hope they’re living long and happy lives) but because anyone who writes letters like these clearly needs help of a different kind.

        I’m also curious what might’ve happened if those letters had been sent to someone more familiar with firearms and less concerned with CSS. And that thought really is a killer.

        ]]>
        <![CDATA[A new take on creating colour palettes with Sketch]]> https://stuffandnonsense.co.uk/blog/a-new-take-on-creating-colour-palettes-with-sketch https://stuffandnonsense.co.uk/blog/a-new-take-on-creating-colour-palettes-with-sketch Mon, 06 Aug 2018 00:00:00 +0100 One of my earliest blog entries, all the way back in May 2004, was about a favourite technique for creating colour palettes. It was a technique which I’d used for years, even then. Now I have a new take on creating colour palettes, it’s time to revisit that topic.

        ]]> From my original article
        1. Start by making a white Fireworks canvas and then add a 250 x 50px black rectangle to the base layer.
        2. Create two 50 x 50px squares and fill them with a colour, sampled from a logo graphic or photograph. Place these squares over the black and white bases.
        3. Duplicate these squares and adjust the opacity of each square (usually 100%, 75%, 50%, 25% and 10%) to allow progressively more of the base colour to show through.
        4. This creates ten tints from a single colour and is easy to replicate for further base colours.
        Creating colour palettes Creating colour palettes
        Original technique left–right

        Multiple background fills in Sketch

        I used Macromedia Fireworks in 2004 (and for years after,) then—because it’s hard to teach an old dog new tricks—I used Sketch in exactly the same way until recently.

        Sketch now simplifies my process because, unlike Fireworks, it enables me to add multiple background fills to any element. This means I no longer need the black and white base layers and can use single square per tint.

        Using Sketch to add multiple background fills
        Using Sketch to add multiple background fills

        Improving my technique using blending modes

        My favourite technique has served me very well for years, but I did learn along the way that essentially adding black and white to my colours would often make them appear a little flat.

        Recently, I’ve been experimenting with a new technique using multiple background and blending modes—specifically Multiply and Screen—in Sketch and I have to say, I like the results a lot better. Here’s how my improved technique works to create a series of gradually darker tones from a single colour:

        1. Create a shape and add a background colour fill
        2. Duplicate that shape and add another background fill using the same colour as before, this time setting the blending mode to Multiply
        3. Repeat by adding another ‘multiplied’ background to each new duplicated shape to build a series of connected colours
        Using Sketch to add multiple background fills
        Using Multiply with multiple background fills

        To create a series of lighter colours, switch the blending mode from Multiply to Screen.

        Using Sketch to add multiple background fills
        Using Screen with multiple background fills

        Comparing colour palettes

        I find the colours I create using blending modes are richer than those using my original technique.

        Comparing colour palettes
        Top row: My original technique. Bottom row: Using blending modes to create colour palettes.

        There you have it; a quick but useful update to creating colour palettes. Have some fun with it and a happy Monday.

        ]]>