<![CDATA[Blogging and All that Malarkey]]> https://stuffandnonsense.co.uk Sat, 16 Oct 2021 00:00:00 +0100 en-us © Copyright 2021 3600 <![CDATA[Text substitutions and aText]]> https://stuffandnonsense.co.uk/blog/text-substitutions-and-atext https://stuffandnonsense.co.uk/blog/text-substitutions-and-atext Sat, 16 Oct 2021 00:00:00 +0100 Dan Cederholm has been designing a stylish interrobang (‽) for his next new typeface and tweeted that he needs to learn how to type one. John Gruber replied with his suggestion using text replacement in MacOS. I use a similar solution using aText to make typing these unusual characters easier.

]]> You’ll find MacOS includes text substitutions in System Prefs > Keyboard > Text and any shortcuts you make will be synched across your devices via iCloud. Personally, I’ve always found Apple’s system too limiting and have been using various text expanders for a while.

After TextExpander moved to a subscription model, I tried aText by developer Trần Kỳ Nam because buying aText costs the same as one month using TextExpander and aText has very similar functionality.

The trigger key

I use an otherwise never used key to trigger text substitutions. It’s the section key (§) at the left of the number row on a Mac keyboard. That’s a handy place for my trigger key to be as it’s easy to reach with my left hand’s pinky finger. I type § before every code or text substitution shorthand.

Two uses for substitutions

I have two uses for text substitutions; general typing where I need quick access to symbols which otherwise require multiple key presses, and shortcuts for HTML entities when I’m writing code. My symbols substitutions include the interrobang which Dan’s designing, a cross and tick, a star, and even a shrug:

Trigger Result
§apple
§bang
§cmd
§cross
§heart
§phone ☎ 01745 851 848
§return
§shrug ¯\_(ツ)_/¯
§spade
§star
§tick

When I’m writing code, I like to include HTML entities for punctuation and special characters including an ampersand (&), currency symbols, dashes, fractions, and punctuation:

Name Trigger Entity
Ampersand & §& &#38;
Bracket left < §< &#60;
Bracket right > §> &#62;
Dollar $ §$ &#36;
Em dash – §— &#8211;
En dash – §– &#8211;
Ellipsis … §… &#8230;
Quote left ‘ §‘ &#8216;
Quote right ’ §’ &#8217;
Double quote left “ §“ &#8220;
Double quote right ” §” &#8221;
Comm @ §@ &#64;
Percentage % §% &#37;
Pound £ §£ &#163;
Euro € §€ &#8364;
Fraction ¼ §25 &#188;
Fraction ⅓ §33 &#8531;
Fraction ½ §50 &#189;
Fraction ⅔ §66 &#8532;
Fraction ¾ §75 &#190;
Pipe | §pipe &#124;
Registered ® §reg &#174;
Trademark ™ §tm &#8482;

After so many years of typing, my fingers naturally remember the keystrokes for these dashes, punctuation, and symbols. But, I don’t know their HTML entity codes without looking them up, so using text substitutions makes my coding work much simpler.

There are several text substitution tools available. aText is simple and effective and syncs across Macs via iCloud, but I wish there was a version for iOS. TextExpander does have an iOS version but I wish I didn’t have to pay for it on subscription. Apple’s system text substitutions do sync across Macs and iOS, but for now I’ll be sticking with aText as I don’t need synching to my iPad or iPhone.

]]>
<![CDATA[My go bag 2021]]> https://stuffandnonsense.co.uk/blog/my-go-bag-2021 https://stuffandnonsense.co.uk/blog/my-go-bag-2021 Sun, 03 Oct 2021 00:00:00 +0100 When I started travelling regularly to Switzerland for work, I put together my go bag of accessories. What’s in the bag has changed over past few years, so here’s an update on what I’m packing.

]]> As before, 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

The XD Design Bobby Original Anti-Theft laptop backpack I bought last time didn’t age well and the vinyl at the base frayed horribly. Rather than shell out for the Peak Design backpack I’d promised myself, this time I went for a RiutBag backpack which I’ve been very pleased with. It’s comfortable to carry, roomy, and has plenty of protection for my gear. I also bought their set of two zipped cable bags for £15.00.


Connectivity

I’m still buying Anker cables and am trying as hard as I can to standardise everything on USB-C.

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

The Anker cable I bought for my previous go bag to charge my iPhone directly from my laptop hasn’t failed me yet. Seriously, Anker make the best cables around.

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

I still only use Micro USB to charge my vape, but this 3-in-1 cable comes in handy for Lightning and USB-C too. Honestly, I hate Micro USB connectors. I can’t count how many devices I’ve had to discard because their Micro USB connector failed. When I buy my next vape mod, I want that to use 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 USB-C hub

The Anker 7-in-1 Premium USB-C hub I carry in my go bag is still the one I bought when I bought my first USB-C powered MacBook Pro. That version is no longer available, but Anker have replaced it with a nicer, more rounded version which is also more powerful at 100W power delivery.


Portable power

Anker 60W 2-port USB-C charger

I wrote last time that I don’t mind no name brands as long as they do their job. Well, the third-party USB-C power adapter/charger I bought didn’t do its job. It blew itself up and blew fuses across the whole hotel, so now I carry an Anker 60W charger which is light, small, and has two USB-C ports.

Anker Power Bank, PowerCore+ 26800 PD 45W

When I upgraded to my most recent MacBook Pro, I wanted a power bank which is powerful to fully recharge the laptop at least once. My previous Anker power bank was fine for phones but not my laptop, so I replaced it with a more powerful 45W version. This thing is heavy and pricey, but worth the cost and weight. It even came with a 60w charger which I use to charge my iPads at home.


Various items

What else is in my bag? The usual suspects:

Apple M1 MacBook Pro 13" (2020)

I upgraded my 2019 MacBook Pro 13" after only one year. Not because there was a problem with its often troublesome butterfly mechanism keyboard, but because I wanted extra battery life and performance. Boy was this laptop worth the upgrade. The new Magic keyboard is better to type on and the battery life is astonishing. Performance is also better, even though my 2019 laptop had 32Gb RAM and this has only 16Gb. Will I upgrade again to whatever M1X or M2 comes next? Probably, as I now work predominantly on my laptop.

Apple iPhone 12 Pro Max

My phone upgrades have been much more frequent in recent years as I’ve paid for my phones on Apple’s upgrade programme. I went from a XS Max to an 11 Pro Max, to a 12 Pro Max. My phone is beautifully blue and I matched it with Apple’s leather case. Sadly, I couldn’t use the upgrade programme during the pandemic, so instead bought my 12 Pro Max outright. Seeing what they’ve changed for the new 13 Pro Max, I won’t be updating my phone again this year.

Apple AirPods with wireless charging case (2019)

My 2019 AirPods are still going strong and battery life seems not to have deteriorated. That’s probably why I haven’t been tempted to update to a pair of AirPods Pro.

Bowers & Wilkins PX5 wireless on-ear headphones

I bought a pair of Bowers & Wilkins P5 wired headphones before spending a couple of years in Australia. While I was there, I upgraded them to the wireless version which is still in my go bag. Those headphones aren’t available now, but B&W have replaced them with a PX5 version. At £180, they’re much cheaper than Apple’s AirPods Max and they sound great. They even come in blue to match my iPhone.


Two and bit years on from my last go bag, the bag has changed and although most of the items I carried then would still be working today, almost all of them have been replaced and upgraded. I still recommend carrying duplicates of cables and chargers, buying Apple for the big ticket items and Anker for almost everything else.

]]>
<![CDATA[10 books you should add to your web design inspiration collection]]> https://stuffandnonsense.co.uk/blog/10-books-you-should-add-to-your-web-design-inspiration-collection https://stuffandnonsense.co.uk/blog/10-books-you-should-add-to-your-web-design-inspiration-collection Sun, 29 Aug 2021 00:00:00 +0100 To help get web design out of its rut, I’ve been encouraging people to look outside the web to all areas of design for inspiration. There’s so much we can learn from books about editorial, graphic, and print design and I’ve been sharing books from my collection. Here are the top 10 books you should add to your web design inspiration collection.

]]> 10) Steinweiss: The Inventor of the Modern Album Cover

Steinweiss: The Inventor of the Modern Album Cover“Steinweiss: The Inventor of the Modern Album Cover” by Alex Steinweiss is a 420 page book which deserves a place on your design inspiration bookcase. You might not think that album cover artwork can teach us much about web design. But, the colour and texture in Steinweiss’ work can influence us to bring more depth to designs for the web. Most of all, his work is full or creativity and personality. The web could certainly used more of them.


Read my review


9) Massin

Massin by Laetitia Wolff(Robert) Massin—he enigmatically stopped using his first name in 1950s—was a French art director, book and graphic designer who caught my attention because of his stark black and white imagery and expressive typography. This monograph of his work by Laetitia Wolff—which was published in 2007—definitely deserves a space in any web design inspiration collection.


Read my review


8) Richard Hollis Designs for the Whitechapel

Richard Hollis Designs for the WhitechapelRichard Hollis is a British designer and teacher, and author of several books on graphic design. Throughout his long career, Hollis has built an enviable and substantial body of creative work and has educated younger designers through his writing. “Richard Hollis Designs for the Whitechapel” by Christopher Wilson is a fascinating exploration of Hollis’ work for the Whitechapel Gallery between 1969 and 1985.


Read my review


7) Wim Crouwel—Modernist

Wim Crouwel - Modernist by Frederike HuygenWim Crouwel was a Dutch graphic designer and typographer. He also designed several typefaces including New Alphabet. If you’re a fan of Joy Division, you might recognise that from the cover of their Substance compilation album. “Wim Crouwel—Modernist” is a monograph of Crouwel’s work by design historian Frederike Huygen. It covers Crouwel’s design of exhibition designs in the 1950s, his graphic design work for the Stedelijk Museum until 1985, and the typefaces he designed.


Read my review


6) David King: Designer, Activist, Visual Historian

David King: Designer, Activist, Visual HistorianAs well as building his own incredible catalogue of work, David King built one of the largest collections of Soviet-era designs—with over 250,000 items—which is now owned by Tate gallery. “David King: Designer, Activist, Visual Historian” by Rick Poynor is a very decent and recent hardcover compendium of work from across David King’s career.


Read my review


5) Pintori

Pintori by Marta Sironi“Pintori” by Marta Sironi and published by Moleskine catalogs the astonishing career of Italian designer Giovanni Pintori. Pintori became one of the most influential European graphic designers of the 20th century and he became known for the distinctive style he crafted into Olivetti’s design language for over 30 years.


Read my review


4) Alexey Brodovitch

Twenty-Five Years at the Twenty-Five Years at the Public, A Love Story by Paula ScherAlexey 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.


3) O Design de Bea Feitler

O Design de Bea FeitlerBea Feitler been called “The Pioneering Female Art Director You’ve Never Heard Of” and is definitely someone more people show know about. 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. There’s so much we can learn from her and the work she made. (Copies of O Design de Bea Feitler are very, very difficult to find. If you’re aching to get hold of one as much as I was, I have one copy for sale for £750.) Read my review.


2) Twenty-Five Years at the Public (Paula Scher)

Twenty-Five Years at the Twenty-Five Years at the Public, A Love Story by Paula ScherPaula Scher has been responsible for many high-profile design projects from the reimagined Microsoft Windows logo which launched with Windows 8, The Museum of Modern Art (MoMA) design system, The Metropolitan Opera, and—perhaps most interestingly—the Public Theater. “Twenty-Five Years at the Public, A Love Story by Paula Scher” catalogs her incredible body of work for The Public Theater.


Read my review


1) The Intelligent Lifestyle Magazine

The Intelligent Lifestyle Magazine“The Intelligent Lifestyle Magazine” by Francesco Franchi is published by Gestalten. Franchi is absolutely my favourite designer working today in any medium and his book has been an incredibly valuable source of inspiration for me. This book is my number one choice and definitely deserves a place in your inspiration collection.


Read my review



I earn a small amount when you use these affiliate links.

]]>
<![CDATA[A book for your inspiration collection: The Intelligent Lifestyle Magazine]]> https://stuffandnonsense.co.uk/blog/a-book-for-your-inspiration-collection-the-intelligent-lifestyle-magazine https://stuffandnonsense.co.uk/blog/a-book-for-your-inspiration-collection-the-intelligent-lifestyle-magazine Sun, 29 Aug 2021 00:00:00 +0100 There’s so much we can learn from books about editorial, graphic, and print design to help us get web design out of its rut. So, I’m sharing my collection and recommend this book about the influential design of The Intelligent Lifestyle Magazine (IL.)

]]> Intelligent Lifestyle Magazine

Many of the books in my inspiration collection focus on art directors and designers from decades ago and it isn’t often I add a book about a contemporary designer. Last year my friend Scott sent me a surprise gift, a book about The Intelligent Lifestyle Magazine. What was even more surprising was how quickly I fell in love with the book and the work of Francesco Franchi it covers.

Francesco Franchi was born not in 1932 or 1952, but in 1982. He studied Industrial Design at Politecnico di Milano (Polytechnic University of Milan) where his thesis focused on newspaper design. In 2008, Franchi became art director at IL and his designs have been celebrated widely, winning European Design Awards and D&AD Awards. Franchi is absolutely my favourite designer working today in any medium.

Francesco Franchi’s work for Intelligent Lifestyle Magazine
Francesco Franchi’s work for Intelligent Lifestyle Magazine

I immediately fell in love with Franchi’s compelling visual storytelling. His confident combination of infographics, illustration, and typography all come together to form a consistent but, at the same time, varied look. Above all, I was drawn to his incredible attention to detail where every element appears to have been considered.

Francesco Franchi’s work for Intelligent Lifestyle Magazine
Francesco Franchi’s work for Intelligent Lifestyle Magazine’s Rane section

Franchi’s work for Intelligent Lifestyle Magazine is simply stunning, but what excited me most of all when reading this book were his designs for Rane, a section of IL which has a different feel to the rest of the magazine. Rane’s colour palette of off-black, off-white, and red, plus its striking sans-serif headlines, makes some of the most impressive editorial designs I’ve ever seen.

Seeing Rane made me excited about redesigning my own website and its not difficult to see how Franchi’s designs inspired mine. From my condensed, tall, and tightly spaced headlines (set in Dharma Gothic by Dharma Type’s Ryoichi Tsunekawa) to my cheeky swinging navigation which I’m not ashamed to say was inspired by Rane’s own sidebar.

Francesco Franchi’s work for Intelligent Lifestyle Magazine
Francesco Franchi’s work for Intelligent Lifestyle Magazine’s Rane section

I often hear people repeat the mantra that the web isn’t print, but one of the most enjoyable parts of my redesign process was experimenting with how to bring the inspiration I found in Rane to life online and how what I’d learned could be applied to the web. Franchi said:

“The importance of graphic identity, and even more, of visual storytelling, is not decreasing. To the contrary, managing to reconstruct a consistent reading structure that gets the reader involved without excluding opportunities to customize, socialize, break up stories and put them back together is one of the major challenges facing the new designers.”

(You can follow Francesco Franchi on Instagram and Twitter.)

Buy the book

The Intelligent Lifestyle Magazine“The Intelligent Lifestyle Magazine” by Francesco Franchi himself with Christian Rocca is published by Gestalten. Their book has been an incredibly valuable source of inspiration for me. If you haven’t bought a design book this week—and even if you have—this book definitely deserves a place in your inspiration collection.


I earn a small amount when you use this affiliate link.

]]>
<![CDATA[One Footer in the Grave Episode 4: Wrapped in disappointment]]> https://stuffandnonsense.co.uk/blog/one-footer-in-the-grave-episode-4 https://stuffandnonsense.co.uk/blog/one-footer-in-the-grave-episode-4 Mon, 16 Aug 2021 00:00:00 +0100 After Paul Boag and Marcus Lillington retired their Boagworld podcast, the pair, Jon Hicks and I decided to record a new show. We’re not just experienced podcast wafflers, we’re all “of a certain age,” so we called the new show One Footer in the Grave.

]]> Unlike the podcasts we’ve made in the past, One Footer in the Grave is four friends, talking about whatever’s on our minds. There’s no set topic. Sometimes, that might be a sensible, serious topic. But, more often than not, we make each other laugh. I hope we make listeners laugh too.

“With one foot in the door of their retirement home for senior web designers, Paul Boag, Andy Clarke, Jon Hicks, and Marcus Lillington get together once a month to distract each other from everyday life and work.”

The show’s funny and frivolous and being best friends, we have a genuinely unique chemistry and hope to entertain you if you work on the web and even if you don’t.

We’ve just released episode four, “Wrapped in disappointment” where I moan about the sad fact that sweet peanuts aren’t what they used to be. We discuss what we add to peanut butter—banana, jam, Marmite, or even mayonnaise—to make deliciously nutty combinations. We talk about electric cycling and why the classic ’70s Chopper would make the perfect electric bike today. Finally, the chaps reveal which celebrity autographs they collected for my challenge last month.

It really sounds like we’re getting comfortable with the new format and if you haven’t listened to One Footer in the Grave yet, this episode might be a great place to start.

]]>
<![CDATA[Thoughts on YesCymru]]> https://stuffandnonsense.co.uk/blog/thoughts-on-yescymru https://stuffandnonsense.co.uk/blog/thoughts-on-yescymru Wed, 04 Aug 2021 00:00:00 +0100 I’ve been a paying member of YesCymru for the past year, because I believe that Wales would have a better future as an independent nation. At the very least, people who live in Wales deserve a vote on independence. I have thoughts about the YesCymru message and how they can make a better case for independence.

]]> Although the political party Plaid Cymru has branded itself as “The Party of Wales,” Welsh Labour has been in control of the Senedd Cymru (Welsh Parliament) since devolution in 1998. But, if you’ve visited Wales, you probably spotted YesCymru’s distinctive branding on red and white stickers. Until recently, there were several of these stuck to road signs in and around our village in North Wales.

YesCymru is a grassroots movement—not a political party—who campaign for Welsh independence. They’ve seen growth in membership and support since forming in 2014 and now have over 18,000 paying members. There’s a strong case for independence. But, YesCymru could make that case more emphatically and there’s something off with their messaging.

In Wales, nationalists are still in the minority at around 28 percent. But with clearer messaging about the benefits of independence and a better strategy for promoting those benefits, YesCymru could play a much greater role in turning that minority into a majority.

The YesCymru website could do a much better job of stating the benefits of independence and the benefits of membership. (But, I’ll save my thoughts on that for a follow-up post.)

The YesCymru Twitter account regularly criticises the failures of the UK government. This will please people who are already convinced about the benefits of independence, but will do little to convince unionists or reassure undecided voters. Many of these people fear what they’re told would be the negative impact of “leaving” the UK. The independence movement can make convincing arguments against anything alleged by unionists. But, in any independence campaign, these could easily be lost the same way as arguments against remaining in the European Union were during the Brexit campaign.

YesCymru needs to change the conversation from the negative connotations of “leaving” the UK to positive aspirations and hopes for a better future after independence. YesCymru doesn’t need to criticise the UK government, in fact it should ignore it entirely and regard it as irrelevant to the future of Wales. Their message should be that Wales can and will be a better place after independence. And proof of that can be seen in how Wales has done many things better than other UK nations since devotion.

Our children have had free school breakfasts since 2004. They haven’t endured SATS since 2005 and schools haven’t been ranked in league tables since 2001. Means-tested student grants have been reintroduced. Our over-60s pay nothing for bus travel and no one in Wales has paid prescription charges on medicines since 2007. During the recent pandemic, Wales succeeded in having the lowest rates of COVID infections in the UK.

Wales is a small country. It’s smaller than the state of New Jersey, but is still larger than Slovenia which is an independent country in the European Union.

Around three million people live in Wales, more than Estonia, Latvia, and Lithuania which are also independent members of the EU.

Wales has a GDP per head of population which is higher than Spain. In fact, Wales would rank 66th in the world, ahead of Bulgaria, Belarus, Costa Rica, Serbia, and Uruguay.

The average wage in Wales is higher than all Baltic members of the European Union, Finland, and New Zealand.

The message from YesCymru and the wider independence movement in Wales should be one that inspires people to believe that Wales can have a better future as an independent nation. It should make people want to be part of that future. Not by saying “we want to ‘leave’,” but by saying “we want to ‘grow’.” We want to be a better, fairer, more prosperous country. And we can be.

Andy Clarke

]]>
<![CDATA[A book for your inspiration collection: Alex Steinweiss]]> https://stuffandnonsense.co.uk/blog/a-book-for-your-inspiration-collection-alex-steinweiss https://stuffandnonsense.co.uk/blog/a-book-for-your-inspiration-collection-alex-steinweiss Mon, 02 Aug 2021 00:00:00 +0100 There’s so much we can learn from books about editorial, graphic, and print design to help us get web design out of its rut. So, I’m sharing my collection and recommend this book about the work of Alex Steinweiss, the inventor of the modern album cover.

]]> Alex Steinweiss

When I started collecting books for inspiration, I was most interested in page layout design. This lead me to discover influential art directors and editorial designers which was a great fit for the work I was going. More recently, I began seeking out graphic designers as I didn’t study graphic design at art school and have never considered myself to be a graphic designer. One person who’s work I discovered was early album cover designer Alex Steinweiss.

Steinweiss grew up in Brooklyn and studied at the Parsons School of Design in New York City’s Lower Manhattan. After graduating from Parsons, Steinweiss worked for poster designer Joseph Binder. (Sadly, books about Binder are out of print and cost several hundred pounds for a copy if you can find one.) When Steinweiss started designing, LP vinyl albums were sold in plain paper packaging. In 1938, Steinweiss joined Columbia Records as art director and began designing album artwork, a job he continued until 1973, making over 2,500 unique covers.

Work by Alex Steinweiss
Work by Alex Steinweiss

“When I was a kid, I was already thinking of designing covers for music. It was in my soul. I loved music, and I wanted to spread the beauty of music and make sure that people got a good slice of it. ”

Most of Steinweiss’ designs were drawn, but in later years he also incorporated collage and photography. He also introduced his own distinctive handwriting font, known as the Steinweiss scrawl. This typeface, and others Steinweiss used in his work, were integrated perfectly into his striking designs.

Work by Alex Steinweiss
Work by Alex Steinweiss

Alex Steinweiss died in 2011 at the age of 94. You might not think that his album cover artwork can teach us much about web design. But, the colour and texture in his work can influence us to bring more depth to designs for the web. Most of all, his work is full or creativity and personality. The web could certainly used more of them.

Buy the book

Steinweiss: The Inventor of the Modern Album Cover“Steinweiss: The Inventor of the Modern Album Cover” by Alex Steinweiss is a 420 page book which deserves a place on your design inspiration bookcase. If you haven’t bought a design book this week—and even if you have— you’ll really enjoy this one.


I earn a small amount when you use this affiliate link.

]]>
<![CDATA[A book for your inspiration collection: Richard Hollis]]> https://stuffandnonsense.co.uk/blog/a-book-for-your-inspiration-collection-richard-hollis https://stuffandnonsense.co.uk/blog/a-book-for-your-inspiration-collection-richard-hollis Sun, 25 Jul 2021 00:00:00 +0100 To help get web design out of its rut, I think people should look outside the web to all areas of design for inspiration. There’s so much we can learn from books about editorial, graphic, and print design. So, I’m sharing my collection and recommend this book about the work of British designer Richard Hollis.

]]> Richard Hollis

Born in London in 1934, Richard Hollis is a British designer and teacher, and author of several books on graphic design. Throughout his long career, Hollis has built an enviable and substantial body of creative work and has educated younger designers through his writing.

I need to confess that shamefully I only discovered Hollis and his work a few months ago, while learning about David King. Hollis was credited by King and many other designers of the time as influential, but it’s only in the past twenty years that his work has received more widespread attention with the book about his designs for the Whitechapel Gallery and an exhibition in 2012.

Work by Richard Hollis
Various work by Richard Hollis for the Whitechapel Gallery

Hollis was influenced by the modernist Swiss style but his work hasn’t been defined by it and in many ways feels very British. Alongside his teaching at London College of Printing and Chelsea School of Art in the early 1960s, Hollis produced work which reflected his interests and outlook. He made work for CND—which I was a member of in the 1980s—New Society magazine, and Pluto Press, a left-wing publisher. For Hollis, content and message are more important than a designer’s distinctive style. He said:

“ The ideal situation is where you sit with the client and design with them. If anything is emphasised, it’s what they want to emphasise. So often you’re left with no guidance as to what to give prominence to. I much prefer collaborative effort to doing what I want to do. It’s diametrically opposite to being an artist. Artists are free to put things into any form they like, which may or may not be comprehensible in the way they hope. For me, working with the person whose message it is is the most comfortable.”

But that approach didn’t mean designers should be subservient to their clients. When asked about clients who say “Move that type a little to the left… now let’s see it in green…’ Hollis replied, “I’d tell them to fuck off.”

Work by Richard Hollis
Various work by Richard Hollis for the Whitechapel Gallery

As well as his design work for clients, Hollis wrote two influential books on graphic design: About Graphic Design and Swiss Graphic Design: The Origins and Growth of an International Style. It’s his work for the Whitechapel Gallery between 1969 and 1985 for which Hollis is most well known. I hope that I can make more people aware of Richard Hollis by sharing my fascination for him and his work.

Buy the book

Richard Hollis Designs for the Whitechapel“Richard Hollis Designs for the Whitechapel” by Christopher Wilson is a fascinating exploration of Hollis’ work for the Whitechapel Gallery between 1969 and 1985. If you haven’t bought a design book this week—and even if you have—this book deserves a place in your inspiration collection.


I earn a small amount when you use this affiliate link.

]]>
<![CDATA[Quick typography tips №1]]> https://stuffandnonsense.co.uk/blog/quick-typography-tips-1 https://stuffandnonsense.co.uk/blog/quick-typography-tips-1 Sun, 25 Jul 2021 00:00:00 +0100 Here’s a quick design tip for improving the readability and style of long passages of running text.

]]> When I see more than one paragraph of text online, they’re almost always set using a space between the paragraphs. Look at your favourite news website and you’ll see what I mean.

Passage of running text with paragraph spacing

But, in other media, text is often set with no space between paragraphs and designers use other techniques to signal the start of new paragraphs.

Removing space between paragraphs creates solid blocks of text which better define the structure of a page. But, with that space removed, when a paragraph’s last line is as long as the measure (line length), it makes spotting the start of the next paragraph difficult.

Passage of running text with paragraph spacing removed

In print media, adding an indentation to the first-line of a new paragraph is a common technique. But there are other ways to improve the readability of long sections of running text.

Recently, I spotted an example of Richard Hollis’ work where the British designer had used alternating weights to signal the start of new paragraphs. Using alternating weights helps make long passages more readable while also adding visual interest to a design.

Passage of running text with alternating weights

This alternating weight technique is simple to apply using CSS pseudo-class selectors and even/odd keywords:

.columns p {
margin-bottom: 0;
font-weight: 400; /* regular weight */ }

.columns p:nth-of-type(odd) {
font-weight: 700; /* heavier weight */ }

:nth-of-type is a structural pseudo-class selector which selects elements based on their position in the source order of a document starting at the top.

On reversed-out or dark theme designs, I might choose a similar technique by alternating the text colour of adjacent paragraphs:

.columns p {
margin-bottom: 0;
font-weight: 400;
color: #fff; /* white */ }

.columns p:nth-of-type(odd) {
color: #1c7ca6; /* blue */ }
Passage of running text with alternating colour text

I hadn’t considered this approach as I mostly use first-line indentation when setting passages of running text. But, I will be slipping into my next editorial design project if I can.

]]>
<![CDATA[A book for your inspiration collection: David King]]> https://stuffandnonsense.co.uk/blog/a-book-for-your-inspiration-collection-david-king https://stuffandnonsense.co.uk/blog/a-book-for-your-inspiration-collection-david-king Tue, 13 Jul 2021 00:00:00 +0100 I’m sharing my design books collection to help encourage designers to drag web design out from its rut. I recommend this book about the work of British designer and design historian David King.

]]> David King

David King studied typography at London School of Printing in the 1950s where one of his teachers was another politically aware designers Richard Hollis. After graduating, King worked for advertising agencies before working as an assistant at Queen magazine under Tom Wolsey. In 1965, King moved to The Sunday Times newspaper and a decade later started his freelance career. His work included album and book covers, and—perhaps most famously—City Limits magazine.

Work by David King
David King work for the Anti Nazi League

Another one of King’s teachers at London School of Printing was Robin Fior who influenced him to use a similar paste-up method to Russian constructivist artists. King combined his knowledge of Russian constructivism and political art with his talent to create a graphic style which defined the look of British leftwing politics in the ’70s and ’80s. His work which campaigned against fascism and racism became highly influential.

I grew up in the ’70s and ’80s, surrounded by the turmoil of British politics. I supported the Anti-Nazi League, the Campaign for Nuclear Disarmament, and the Anti-Apartheid Movement. I saw King’s work everywhere, even though I didn’t know his name. King said:

“If anyone had told me that there would still be inequality, racism, kings, queens and religious maniacs stalking the planet I would have considered them crazy.”

As well as building his own incredible catalogue of work, King built one of the largest collections of Soviet-era designs—with over 250,000 items—which is now owned by Tate gallery.

I’ve never heard David King’s name mentioned at a web design conference which surprises me considering how much his work could teach designers about motivating and persuading people into action.

Work by David King
David King work for left-wing magazine City Limits

Buy the book

David King: Designer, Activist, Visual Historian“David King: Designer, Activist, Visual Historian” by Rick Poynor is a very decent and recent hardcover compendium of work from across David King’s career. If you haven’t bought a design book this week—and even if you have—this book deserves a place in your inspiration collection.


I earn a small amount when you use this affiliate link.

]]>
<![CDATA[New relative colour functions in CSS]]> https://stuffandnonsense.co.uk/blog/new-relative-colour-functions-in-css https://stuffandnonsense.co.uk/blog/new-relative-colour-functions-in-css Thu, 08 Jul 2021 00:00:00 +0100 Safari Technology Preview is my every day browser. When the latest version dropped, a feature in the release notes interested me. It was experimental support for three new relative colour CSS values. So, I tried what’s possible now.

]]> NB: If you want to try these relative colour values, you’ll first need to enable them in the Develop > Experimental Features menu in Safari Technology Preview Release 127 (or later.)

CSS colour modifiers

First up, CSS colour modifiers and a very quick primer on the RGB and HSL colour spaces I use in these examples. The RGB colour model comprises three colours: R (Red,) G (Green,) and B (Blue.) To define a colour, we assign a value between 0 and 255:

--color-brand: rgb(165,35,55);

The HSL colour model comprises three values: Hue, Saturation, and Lightness. Hue is the angle on the colour wheel and ranges from 0 to 360. Saturation is expressed as a percentage and ranges from 0 (grey) to 100% (full colour.) Lightness is also expressed as a percentage; 0% is darkest, 100% is lightest:

--color-brand: hsl(350,65,40);

Got that? Now, I can use CSS colour modifiers to adjust any of those values. In RGB, I could swap any of the three values for any other value. Or I can leave some as they are. If I need less red in my red brand colour, I can replace its original R value:

.element {
background-color: rgb(from var(--color-brand) 120 g b); }
Original colour
Reduced red value
Reference image
If you’re using a browser which has implemented relative colour functions in CSS, this is what you’ll see. (Image)

I can also swap any of the three HSL values. If I need to change the brand colour from red to blue—as I’ve done for the dark mode theme on my website—I can adjust the hue degree on the colour wheel from 350 degrees to 200:

.element {
background-color: hsl(from var(--color-brand) 200 s l); }
Original colour
Adjusted hue degree
Reference image
If you’re using a browser which has implemented relative colour functions in CSS, this is what you’ll see. (Image)

I quite often make subtle changes to a brand colour when implementing a dark mode theme by adjusting its lightness. Now, I can do this in CSS:

.element {
background-color: hsl(from var(--color-brand) h s 45%); }
Original colour
Adjusted lightness percentage
Reference image
If you’re using a browser which has implemented relative colour functions in CSS, this is what you’ll see. (Image)

At this stage, it’s important to point out that I can define my origin colour using any values I like (HEX, RGB, HSL, etc.) and they don’t need to be the same colour model as my background-color values. I can also make these adjustments using calc(). For example, instead of specifying a new absolute value for HSL Lightness, I can simply specify by how much I want it to change:

.element {
background-color: hsl(from var(--color-brand) h s calc(l + 10%)); }
Original colour
Adjusted lightness using calc()
Reference image
If you’re using a browser which has implemented relative colour functions in CSS, this is what you’ll see. (Image)

You won’t be surprised to know that these relative colour values aren’t widely supported (yet,) so I would quarantine these styles and provide an alternative for other browsers:

@supports not (background-color: hsl(from black h s l)) {
.element {
background-color: var(--color-brand); }
}

@supports (background-color: hsl(from black h s l)) {
.element {
background-color: hsl(from var(--color-brand) h s 45%); }
}

Mixing CSS colours

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’ve used for years and involves placing various opacities of a colour over either black or white to create tints. Now I can achieve the same results with CSS and the new color-mix value.

With my alternative CSS principle, I keep colour variations to a minimum, so if I need to create darker or lighter variants of my brand colour, I can mix it with black or white using the color-mix function:

.brand__light {
background-color: color-mix(in hsl, var(--color-brand) 75%, white); }

.brand__dark {
background-color: color-mix(in hsl, var(--color-brand) 75%, black); }
Original colour
Brand colour 75%, white
Reference image
If you’re using a browser which has implemented relative colour functions in CSS, this is what you’ll see. (Image)

Using this method, I can mix any two colours with different percentages of each, as if I am mixing paint:

.brand__mix {
background-color: color-mix(in hsl, var(--color-brand) 15%, #efcb20 50%); }
Original colour
Brand colour 75%, black
Reference image
If you’re using a browser which has implemented relative colour functions in CSS, this is what you’ll see. (Image)

As I’m using a CSS Custom Property for my brand colour, any time I change that custom property, all my styles based on it will be updated automatically. Again, I would quarantine these styles and provide an alternative for other browsers:

@supports not (background-color: color-mix(in hsl, white, black)) {
.element {
background-color: var(--color-brand); }
}

@supports (background-color: color-mix(in hsl, white, black)) {
.element {
background-color: color-mix(in hsl, var(--color-brand) 15%, #efcb20 50%); }
}

CSS color-contrast

Perhaps the most interesting of these three relative colour functions is a browser’s ability to choose from two colour options (for example black or white) to deliver the best contrast between foreground and background colours. This is a challenge I ran into recently when implementing risk warnings for my main client’s new product. Text in these warnings needs to stand out from several background colours ranging from red, through amber, to green. The CSS color-contrast function now makes this much simpler:

First, I define a background colour, then the browser automatically compares that colour with my foreground colour options and chooses the one with the best contrast:

.element {
background-color: var(--color-warning);
color: color-contrast(var(--color-warning) vs white, black); }
Original colour
Browser adjusted colour
Reference image
If you’re using a browser which has implemented relative colour functions in CSS, this is what you’ll see. (Image)

One more time, I quarantine these styles and provide an alternative for other browsers:

@supports not (color: color-contrast(grey vs white, black) {
.element {
background-color: white;
border-color: var(--color-warning);
color: black); }
}

@supports (color: color-contrast(grey vs white, black) {
.element {
background-color: var(--color-warning);
color: color-contrast(var(--color-warning) vs white, black); }
}

Animations, transitions, and scripts

These new relative colour CSS values might not be widely supported yet, but I already know they’ll make my CSS implementations simpler in the future. As they use vanilla CSS—and don’t rely on a pre-processor—they also offer easier ways to add interactions as they’re all animatable, can be transitioned, or even scripted.

There’s more to all these relative colour values than I’ve described, but still very little available online to describe or demonstrate them. So, dig into the proposed specification and show me what you come up with.

References:

]]>
<![CDATA[Design systems don’t kill creativity. But that wasn’t the question.]]> https://stuffandnonsense.co.uk/blog/design-systems-dont-kill-creativity-but-that-wasnt-the-question https://stuffandnonsense.co.uk/blog/design-systems-dont-kill-creativity-but-that-wasnt-the-question Tue, 06 Jul 2021 00:00:00 +0100 Justin Stahl tweeted, “It’s been tough to recruit product designers with great visual design and an eye for detail. Did we atomic-design-system and product-manager-skills a generation out of having them?” It’s a fair question.

]]> Justin isn’t looking for an artist. He needs people who have a solid understanding of layout and type. Design systems aren’t incompatible with that knowledge or the skills to implement them. As the person who popularised Atomic Web Design, you’d expect Brad Frost to have an opinion on this, and he did:

“Just a friendly reminder that atomic design and design systems, in general, are not at all incompatible with great visual design and detailed execution.”

Brad and designers like Dan Mall—another person with creative talent and an understanding of design systems—proved this time and time again with their work. Design systems themselves can be full of “beautiful details and intricate craftsmanship”, and can help scale and spread those attributes across products and teams.

So what might be the problem Justin’s facing recruiting product designers with great visual design and an eye for detail? And is he right in blaming design systems for what he sees as lacking in design recruits? These are questions that prompt more questions.

Do—what we now call—product designers typically know how to choose and combine typefaces and use them? Do they understand the fundamentals of typography, hierarchy, leading, and the measure, to name a few? Do they know about layout design, including ratios and other aspects of grid design? Do they understand colour theory and how to create accessible and appealing colour palettes? Fundamentally, do product designers have the ability and knowledge to create as well as they can solve users’ problems? And do they even want to?


While interviewing candidates for a product design position recently, I found that not everyone who designs products sees themselves as a visual designer. I spoke to many candidates dedicated to user research, customer journeys, system design, and user testing.

For these people, design systems are tools for delivering consistency and scalability. Their building blocks make implementing a design more straightforward and less error-prone. This reliability is important for product companies whose aims are to reduce complexity, increase efficiency, and, most importantly, reduce risk. They also form a bridge between design and engineering teams who are responsible for developing and maintaining them. In some companies, a design system can turn visual designers into assembly-line workers to whom typography and layout fundamentals were never taught.

Many of the product designers I know do not have a background in graphic design. Many of the students I’ve met weren’t taught aspects of visual design important to a product at university. At Manchester Metropolitan University—where I’ve taught most regularly—many students were interested more in user experience rather than the visual aspects of digital design. Many have gone on to successful careers as user-experience designers without learning the fundamentals of typography and layout. Digital design education often focuses on processes, technologies, and tools, but students are left to learn design fundamentals independently, and many choose not to.

Although my friend Chris Murphy and others are working hard to address this by teaching those fundamentals, I suspect the issue isn’t uncommon. If students need to educate themselves, we need to provide creative examples and better resources for learning design fundamentals.


But, the issue Justin raised is more nuanced than simply expecting product designers to need to know, or want to know, colour theory, typography, or layout design. In Justin’s original tweet and throughout my response, I’ve used the term “product designer” as if it’s a clearly defined term with an even clearer set of responsibilities. The reality is very different.

While interviewing candidates recently, some people referred to product design mainly in terms of user research, customer journeys, system design, and user testing. Other candidates had a broader definition which included the aspects of design that Justin is looking for. Finding candidates with solid user-experience design skills and visual design talent is difficult, so the solution must be a collaboration between people who possess a broad range of complementary skills and are keen to work together.

“Did we atomic-design-system and product-manager-skills a generation out of having them?”

I don’t think we did. Atomic design methodologies, design systems, and product management are just tools. They didn’t create the problem that Justin—or anyone else who recruits designers—faces.

What did is our failure to properly educate product designers who want to learn “great visual design and an eye for detail.” Then we conflated user-experience and visual design skills by calling the role “product design” and expect to find them both in one individual.

]]>
<![CDATA[A book for your inspiration collection: Paula Scher]]> https://stuffandnonsense.co.uk/blog/a-book-for-your-inspiration-collection-paula-scher https://stuffandnonsense.co.uk/blog/a-book-for-your-inspiration-collection-paula-scher Fri, 25 Jun 2021 00:00:00 +0100 To help get web design out of its rut, I think people should look outside the web to all areas of design for inspiration. So, I’m sharing my collection and recommend this book about the work of American graphic designer Paula Scher.

]]> Paula Scher

Paula Scher studied art in Pennsylvania in the late 1960s and after her first job in childrens’ book publishing as a layout artist, Scher worked on album cover designs for Atlantic Records before opening her own studio in 1984. In 1991, she began consulting for Pentagram in New York and became a partner.

Scher has been responsible for many high-profile design projects from the reimagined Microsoft Windows logo which launched with Windows 8, The Museum of Modern Art (MoMA) design system, The Metropolitan Opera, and—perhaps most interestingly—the Public Theater.

Work by Paula Scher
Paula Scher posters for the Public Theater

Pentagram began working with the Public Theater in 1994 and have updated its visual identity several times. Some of Scher’s most iconic work—and what first drew me to her—was her posters. These confident compositions combine all-caps woodcut-style letterforms with street art type in simple but striking colour palettes. These posters sometimes feel chaotic but are always beautifully constructed. Although she never copied the obvious style of Russian constructivism, her work is definitely inspired by it. Now 72, Scher’s career has lasted over fifty years. She said:

“The idea of retirement seems to imply that you stop doing what you always did. Why would you do that? I don’t get that.”

And:

“Stefan Sagmeister says that nobody innovates past forty-five, but I think he’s wrong. I want to keep doing it.”

Work by Paula Scher
Paula Scher posters for the Public Theater

I find her work fascinating as well as inspiring and I hope she doesn’t retire any time soon.

Update

After posting this, Simon Minter on Twitter let me know about a video of Paula Scher’s talk at the Beyond Tellerrand conference in 2017. It’s a wonderful talk with plenty of anecdotes and experience to share. I highly recommend you stop what you’re doing and spend 45 minutes listening to her.

Buy the book

Twenty-Five Years at the Twenty-Five Years at the Public, A Love Story by Paula ScherTwenty-Five Years at the Public, A Love Story by Paula Scher herself catalogs her incredible body of work for The Public Theater. If you haven’t bought a design book this week—and even if you have—this book deserves a place in your inspiration collection.


I earn a small amount when you use this affiliate link.

]]>
<![CDATA[Time to update your theme-color meta tag for Safari]]> https://stuffandnonsense.co.uk/blog/time-to-update-your-theme-color-meta-tag-for-safari https://stuffandnonsense.co.uk/blog/time-to-update-your-theme-color-meta-tag-for-safari Wed, 23 Jun 2021 00:00:00 +0100 There’s been a meta tag for specifying a theme-color for UI elements on websites for a while. If you’ve used it, now’s time to change that element along with the upcoming version of Safari.

]]> The theme-color meta element specifies a CSS colour which browsers can use to customise their interfaces. For example, I specify our brand red for the Stuff & Nonsense website.

<meta name="theme-color" content="#a62339">
Stuff & Nonsense website (light mode) in Safari 15.

Until now, this meta tag hasn’t been very useful as it’s only been used by Chrome on sites which can be installed as progressive web apps. That’s changing with the new Safari 15—now available as a Technology Preview—which will ship with Monterey later this year.

Safari 15 uses theme-color to change the colour of its tab bar background and over-scroll area to make them blend better with a web page. Safari 15 on iOS also changes its status bar colour to match. This helps the toolbar to fade into the background, giving a more edge-to-edge experience.

In the past, Safari hasn’t allowed media attribute to specify theme-color meta tags for dark and light modes, but that’s changed with Safari 15. So I’ve updated my website’s meta tag with two colours:


<!-- Dark mode theme: blue -->
<meta name="theme-color"
media="(prefers-color-scheme: dark)"
content="#0e4359">

<!-- Light mode theme or no preference: red -->
<meta name="theme-color" content="#a62339">

This makes a big difference, because without these media attributes, the red toolbar feels more out of place with the dark mode blue page background than the system UI colour.

Stuff & Nonsense website (dark mode) with red toolbar.
Stuff & Nonsense website (dark mode) after specifying media attributes for theme-color.

Safari users can turn off coloured toolbars with “Preferences > Advanced > Never Use Background color in toolbar” but I suspect most people will leave the default turned on. So, if you want to control what people see rather than have Safari choose a colour for them, now’s the time to update your theme-color meta tag for Safari.

]]>
<![CDATA[A book for your inspiration collection: Giovanni Pintori]]> https://stuffandnonsense.co.uk/blog/a-book-for-your-inspiration-collection-giovanni-pintori https://stuffandnonsense.co.uk/blog/a-book-for-your-inspiration-collection-giovanni-pintori Mon, 07 Jun 2021 00:00:00 +0100 I’m sharing my design books collection to help encourage designers to drag web design out from its rut. I recommend this book about the work of Italian designer Giovanni Pintori.

]]> Giovanni Pintori

Giovanni Pintori was born in Sardinia in 1912 and became one of the most influential European graphic designers of the 20th century. He became known for the distinctive style he crafted into Olivetti’s design language for over 30 years.

During his career at Olivetti, Pintori designed the company’s advertising, brochures, and even their annual calendars. Pintori’s aesthetic style was bold and confident. He used bright colours from minimal colour palettes and combined them with shapes to fill his designs with energy. About his designs for Olivetti, Pintori said:

“I do not attempt to speak on behalf of the machines. Instead, I have tried to make them speak for themselves, through the graphic presentation of their elements, their operations and their use.”

But Pintori’s work wasn’t just playful, it was thoughtful. His choice of shapes wasn’t abstract. Shapes suggested the benefits of using a product rather than describe its features literally. Pintori didn’t just illustrate products, he brought them to life through his designs by suggesting how they might be used and what they could do to enhance people’s lives and work.

Work by Giovanni Pintori

Pintori defined Olivetti’s image far beyond his time at the company, and he continued to work on projects with them after leaving in 1967. He established his own studio in Milan, where he worked as a freelance designer, before retiring and dedicating himself to painting.

Work by Giovanni Pintori

I’ve never heard Pintori’s name mentioned at a web design conference. This is surprising considering how his work could influence designers in bringing products to life online.

Buy the book

Pintori by Marta SironiGiovanni Pintori died in Milan in 1999, and there’s a book, Pintori by Marta Sironi and published by Moleskine which catalogs his astonishing career. It deserves its space on my bookcase, and yours.


I earn a small amount when you use this affiliate link.

]]>
<![CDATA[A book for your inspiration collection: Wim Crouwel]]> https://stuffandnonsense.co.uk/blog/a-book-for-your-inspiration-collection-wim-crouwel https://stuffandnonsense.co.uk/blog/a-book-for-your-inspiration-collection-wim-crouwel Mon, 07 Jun 2021 00:00:00 +0100 To help get web design out of its rut, I think people should broaden their knowledge of all areas of design. So, I’m sharing my collection and recommend this book about the work of Dutch designer Wim Crouwel.

]]> Wim Crouwel

Wim Crouwel was a Dutch graphic designer and typographer. He also designed several typefaces including New Alphabet. If you’re a fan of Joy Division, you might recognise that from the cover of their Substance compilation album. On type, Crouwel said:

“A (type)face shouldn’t have a meaning in itself, the meaning should be in the content of the text.”

Crouwel was influenced by the Swiss-inspired international style, especially the work of Karl Gerstner. I became interested in his work because of the innovative and often unexpected ways he used grids, especially in his brochures and posters for the Stedelijk museum in Amsterdam.

Work by Wim Crouwel

Crouwel and his design studio worked with Stedelijk for over twenty years and built a varied body of incredible work which combined type with strong graphic shapes. Although influenced by the modernist style, Crouwel’s work never feels constrained by it. Even today, much of his work seems experimental and futuristic.

Work by Wim Crouwel

I’ve never seen Crouwel’s name in an article about web design or mentioned at a design conference. This is disappointing, particularly as much of Crouwel’s work combined the emotional and practical aspects of design which are so important for the web.

Buy the book

Wim Crouwel - Modernist by Frederike HuygenCrouwel died in 2019. Wim Crouwel—Modernist is a monograph of his work by the Dutch art and design historian Frederike Huygen—which was published in 2015—covers his design of exhibition designs in the 1950s, his graphic design work for the Stedelijk Museum until 1985, and the typefaces he designed. It deserves its space on my bookcase, and yours.

]]>
<![CDATA[A book for your inspiration collection: Robert Massin]]> https://stuffandnonsense.co.uk/blog/a-book-for-your-inspiration-collection-robert-massin https://stuffandnonsense.co.uk/blog/a-book-for-your-inspiration-collection-robert-massin Fri, 04 Jun 2021 00:00:00 +0100 My bookcase holds my growing collection of books about editorial and graphic design and studying them has completely changed how I approach design. To help get web design out of its rut, I think people should broaden their knowledge of these areas of design. So, I’m sharing my collection as it grows.

]]> Massin

(Robert) Massin—he enigmatically stopped using his first name in 1950s—was a French art director, book and graphic designer who caught my attention because of his stark black and white imagery and expressive typography.

Massin’s typography is interesting, not because of exotic typefaces, but because of the ways he used seemingly ordinary typefaces and arranged type in unusual ways. About typefaces, Massin said:

“There are no ugly typefaces, you just have to know how to use them.”

Like all great typography, Massin’s type designs tell stories, like this famous work for Eugène Ionesco’s The Bald Soprano in 1965. For Ionesco’s book, Massin’s goal was to, as Laetitia Wolff described, create “the dynamism of the theatre within the static confines of the book.” His typesetting made the words reflect the personality of the characters and what they were saying.

The Bald Soprano. Work by Massin
The Bald Soprano. Work by Massin

Compared to other masters of type like Herb Lubalin and Herbert Matter, there’s a subversive, almost anarchic feel to Massin’s designs. In many ways they remind me of Sniffin’ Glue and other punk zines from a decade later.

The Bald Soprano. Work by Massin
The Bald Soprano. Work by Massin

Massin was self-taught and developed his style throughout his career in book covers and interiors. Massin’s work is less well-known than Max Huber, Herb Lubalin, or Herbert Matter. I’ve never seen his name in an article about web design or mentioned at a design conference.

Buy the book

Massin by Laetitia WolffMassin died sadly in 2020. This monograph of his work by Laetitia Wolff—which was published in 2007—definitely deserves a space on my bookcase, and yours.

Buy on Amazon.co.uk


I earn a small amount when you use this affiliate link.

]]>
<![CDATA[Contract Killer reloaded. An update to my contract template]]> https://stuffandnonsense.co.uk/blog/contract-killer-reloaded-an-update-to-my-contract-template https://stuffandnonsense.co.uk/blog/contract-killer-reloaded-an-update-to-my-contract-template Sun, 23 May 2021 00:00:00 +0100 When I first shared my Contract Killer in 2008, I had no idea it would become so popular and be used by so many people. Even after thirteen years, it’s still the most visited page on my website.

]]> I’ve used Contract Killer for years, but recently I updated the contract to better reflect the work I’m doing now. I’ve simplified the language to make it even clearer what’s expected by both parties to a contract.

Some of the technical details have been updated too to reflect how we work today. There’s a new sentence on sharing files via Dropbox, Google Drive, or Github, and another on communication by phone, Slack, or Zoom. Given the broad compatibility between browsers, I removed Internet Explorer 11 from the list of tested browsers and replaced it with Edge.

Having been asked recently about image formats and licenses, I’ve clarified the sections on how clients should supply graphic files and images. There’s also an update to the Intellectual property rights section which makes it explicit that clients must guarantee to have licences to use images which are owned by photographers or have been purchased from stock libraries.

Contract Killer is now a paid-for template

Contract Killer still uses the same clear language it always has. And it’s still customisable to suit your business and clients.

The biggest change to Contract Killer is that it’s now a paid-for template. Contract Killer has been free for thirteen years and I thought for a long time about charging for the contract. Students can still use the contract for free, but otherwise Contract Killer now costs £9.99.

I made a new landing page for the new Contract Killer. Of course, I can’t stop anyone using the older version, but if you want the update, I think £9.99 is a fair price to pay.


Plus applicable local taxes. Includes HTML/Markdown/PDF/formats.

]]>
<![CDATA[The Peacock]]> https://stuffandnonsense.co.uk/blog/the-peacock https://stuffandnonsense.co.uk/blog/the-peacock Sun, 23 May 2021 00:00:00 +0100 Sue gets up earlier than I do. Every morning she leaves me in bed, walks down the stairs and towards our kitchen, and opens curtains along the way without thinking. That morning, a beautiful bright blue and green peacock stared back at her through our dining room window.

]]> We encourage wildlife to visit. But, even though we live in the country, we’ve never seen a peacock parade around our garden. We scattered a little birdseed, and a few nuts and this one stayed with us most of the day. The following day, our surprise visitor was back, and the next, and then the next.

Our visting peacock
Our visiting peacock has taken over my Instagram feed.

Now the peacock visits us on most sunny days. He’s smart as well as handsome and knows that we keep bird food in our shed. He’s friendly and now eats peanuts from our hands. He’s less concerned about visitors than they are about him. He likes to perform, often strutting around our lawn with his tail feathers raised which is a magical sight. He likes to spend his afternoons on our kitchen roof and sometimes peers in at us through our giant skylight. When the sun goes down, he disappears into nearby fields, and we can hear him crow until it gets dark.

There’s talk in the village that this peacock comes from a nearby farm where he was raised from an egg. But honestly, we don’t know where he came from. Peacocks roam, so maybe one day he’ll wander into someone else’s garden—like he wandered into ours—and stay with them for a while before moving on again.

Maybe he’ll stay with us for a while. We hope so. Having this magnificent bird visit us has made the last month very special.

]]>
<![CDATA[A quick note about AirTag key-rings]]> https://stuffandnonsense.co.uk/blog/a-quick-note-about-airtag-key-rings https://stuffandnonsense.co.uk/blog/a-quick-note-about-airtag-key-rings Fri, 14 May 2021 00:00:00 +0100 I bought a four-pack of Apple’s new AirTags, two for me and one each for the family. To make them more useful, I needed ways to attach them to my keys and backpack. I think AirTags themselves are reasonably priced, but Apple’s own-brand accessories definitely aren’t.

]]> Let’s forget about the Hermès keyring at £299 and their £399 luggage tag, Apple’s own loops will set you back up to £39, more than doubling the cost of an individual AirTag. So, instead of setting my money on fire, I searched eBay and bought some cheap, no-name, AirTag key-rings. They cost me less that £5 each.

Not having felt Apple’s key-rings, I can’t vouch for the fact they’re better made than these cheap alternatives. Frankly, I don’t really care. My keyring isn’t something where I need premium leather. Scraping on my keys every day is going to scuff it up anyway. Hanging from a zip inside my backpack, premium quality in’t a benefit there either. So, if you bought AirTags, I heartily recommend looking up a no-name alternative to attach one to your keys.

AirTag keyrings
Left:Alex’s AirTag keyring. Right: My no-name Chinese AirTag keyring bought on eBay.

My son has become quite the leather craftsman. The day before my no-names arrived, Alex made me a keyring. He made one in yellow for my wife’s AirTag too. I’m not sure whether he’ll make make more and sell them on his Etsy store. If you’d be interested in him making one (or more) for you, let me know.

]]>
<![CDATA[Layout Love: Take the guesswork out of layout by using ratios]]> https://stuffandnonsense.co.uk/blog/take-the-guesswork-out-of-layout-by-using-ratios https://stuffandnonsense.co.uk/blog/take-the-guesswork-out-of-layout-by-using-ratios Tue, 11 May 2021 00:00:00 +0100 One of my biggest problems with grids included with frameworks is that they offer little or no help in deciding proportional relationships between elements. Ratios can be an enormous help in determining these relationships, but they’re rarely written about in relation to web design. I want to change that.

]]> The 12-column mental model

There’s nothing fundamentally wrong with the type of grid included with Bootstrap, Tailwind, or countless other tools, including layout helpers. But they offer little or no help in deciding the width of or proportional relationship between elements. These grids are little more than guides for aligning content.

Take this simple example of a three-column layout where a wider column contains the main content, a narrower column includes supporting information, and an image fits between them. But, how many grid columns should be devoted to each area?

Three layouts based on a framework grid
The type of grid included with Bootstrap, Tailwind, or countless other tools offer little help in deciding the width of elements

Should the supplementary content occupy two, three, or four columns? What, if any, should the relationship be between this and the main content? If the supplementary content occupies three columns, how many columns should the main content occupy? A framework grid can’t answer these questions, but ratios can.

Wolfgang von Wersin’s orthogons

Most people will have heard of the golden (Auron) ratio of 1:1.618, but in 1956, Czech-born designer Wolfgang von Wersin wrote about several other ratios. In his book, von Wersin described twelve dynamic rectangles, which he called “orthogons.” These orthogons each have their mathematical ratio:

  1. Quadrat (1:1) is an even or square ratio
  2. Hemidiagon has a ratio of 1:1.118
  3. Trion 1:1.154
  4. Quadriagon 1:1.207
  5. Biauron 1:1.236
  6. Penton 1:1.376
  7. Diagon 1:1.414
  8. Bipenton 1:1.46
  9. Hemiolion 1:1.5
  10. Auron (or the golden) 1:1.618
  11. Sixton (or Hecton) 1:1.732
  12. Doppelquadrat (Halves) is a a rational ratio of 1:2

Although von Wersin wrote about these ratios over 60 years ago, they can still help inform design decisions today. Let’s go back to that three-column example. Using a diagon ratio of 1:1.414, the narrowest text column (A) is the base unit. The width of the image (B) is the base unit multiplied by 1.414. Finally, the widest text column (C) is the width of the image multiplied by 1.414.

Comparing a framework and ratio-based layout
Left: Arbitrary choice of column widths from a framework grid. Right: Connectedness from using a diagon ratio.

Switching to a different ratio changes the relationship between elements. With a lower biauron ratio of 1:1.236, the supplementary content is wider. But with a higher doppelquadrat ratio of 1:2, the supplementary content is narrower, and the main content is much wider.

Comparing a framework and ratio-based layout
Three columns. Left: Lower biauron ratio. Right: Higher doppelquadrat ratio.

Using ratios helps us connect the size of elements within a design. The ratio you choose will depend on content and the feeling you want from a design. Lower ratios produce subtle size differences and help lay out academic or editorial content. Higher ratios have greater differences. They add drama to a composition which makes them useful for designs with a strong purpose.

A quadrat, even, or square ratio (1:1) feels harmonious and unchallenging. It’s hardly surprising that people have used it on countless website designs. A biauron ratio (1:1.236) produces subtle size differences. The auron or golden ratio (1:1.618) is likely the best-known ratio. It’s balanced but more distinctive than an even ratio.

Comparing three ratios
Three columns. Left: Quadrat, even, or square ratio. Middle: Biauron ratio. Right: Auron or golden ratio.

The diagon ratio (1:1.414) increases variety in column widths. Using a sixton or hecton ratio (1:1.732) adds drama to a composition, and a doppelquadrat ratio (1:2) increases that drama even more.

Comparing three more ratios
Three columns. Left: Diagon ratio. Middle: Sixton or hecton ratio. Right: Doppelquadrat ratio.

5 columns with several ratios

The differences between these ratios becomes even more apparent when increasing the number of columns from three to five. In a grid based on a biauron ratio, column widths increase subtly and there’s much less of a difference between the narrowest and widest columns. Those differences increase more steeply when the grid is based on a diagon ratio. With a doppelquadrat ratio, there’s a dramatic difference between the two extremes.

Comparing three five-column grids
Five columns. Left: Biauron ratio. Middle: Diagon ratio. Right: Doppelquadrat ratio.

Layout Love includes three and five-column layout modules which are based on five of these ratios:

  1. Biauron 1:1.236
  2. Diagon 1:1.414
  3. Auron 1:1.618
  4. Sixton 1:1.732
  5. Doppelquadrat 1:2

For each grid, the width of the first column is a 1fr base unit. The second column multiplies that base unit by the chosen ratio. The third multiples the second by the ratio again, and so on. For example, for a three column layout based on a biauron ratio of 1:1.236, the column widths are 1fr, 1.236fr, and 1.262fr. These are easily translated into fractional units for CSS Grid:

.grid-biauron-3 {
grid-template-columns:
[a1] 1fr
[a2] 1.236fr /* 1fr x 1.236 */
[a3] 1.262fr /* 1.236 x 1.236 */
[a4]; }

To suit my content and design, I can reorder columns—by moving any column into another position in the centre, on the left or right—while still maintaining the connections between them. This offers incredible flexibility and countless possibilities for developing distinctive layouts.

Reordering grid columns
Reordering columns offers incredible flexibility and countless possibilities.

Layout Love modules

When making Layout Love, I developed sets of layout modules for three and five-column grids. There are fifteen modules based on three columns and sixty with five columns. I gave each module the name of a European city and prefixed them with the ratio and number of columns. I named the line numbers in each ratio grid to make switching between ratios much easier.

Layout Love modules
Fifteen fully-responsive three-column HTML/CSS Grid modules and forty-eight five-column layout modules.

Layout Love

All these ratio-based grids and more are available in my Layout Love ratios set to make prototyping and site development work simpler. Layout Love is intentionally un-opinionated and only contains the HTML and CSS Grid you need to implement these ratio-based grids.

You can use Layout Love’s HTML and CSS for any personal or commercial design project. This set is just £2.99 and all five compound, modular, and ratio sets together are £9.99 which could save you many hours or work.

]]>
<![CDATA[Layout Love. How and why I built it]]> https://stuffandnonsense.co.uk/blog/layout-love-how-and-why-i-built-it https://stuffandnonsense.co.uk/blog/layout-love-how-and-why-i-built-it Fri, 07 May 2021 00:00:00 +0100 I’m not a framework user. I’ve never once used Bootstrap and I didn’t use 960gs or Blueprint before that. I can understand the benefits of using a framework or off-the-shelf templates, but they weren’t ever for me. Still, I wanted a simple set of layout modules I could call on for design projects, so I developed my own. I call them Layout Love.

]]> I’m sure frameworks are fine, but whenever I’ve looked at the grids they suggest using, I’ve always been underwhelmed. Twelve even columns, maybe sixteen at a pinch. That’s your lot.

I wanted a simple set of layout modules based on compound, modular, and ratio-based grids because these all help develop layouts which are far more visually interesting than I can get from twelve columns. I wanted them to be design agnostic, easy to use, and free from the bloatware which comes along with a framework.

So, I started to design and develop several sets of layout modules. I called them Layout Love, and rather than keep them to myself, I’m offering them to everyone to use which I hope will encourage people to make layouts which are more interesting. I made five sets:

Layout Love grid layout sets
Layout Love offbeat grid layouts to make web projects more interesting

These sets are each priced at £2.99 and you can buy all five for just £9.99.

Developing Layout Love

I developed my Layout Love templates using only minimal HTML and modern CSS (Grid.) I also made them intentionally un-opinionated and so they’re easy to drop into any project, as they only contains the HTML and CSS Grid you need to implement the layouts.

Layout Love compound layouts
Layout Love compound layouts

Compound layouts

For the three compound grid sets, there are twelve layout modules and three full-page layouts in each. I gave each module the name of a European city, but these can be easily changed to any naming convention:

<div class="grid-athens">
<div class="a1-b4">…</div>
<div class="a5-a6">…</div>
</div>

<div class="grid-berlin">
<div class="a1-b3">…</div>
<div class="b3-b4">…</div>
<div class="a5-a6">…</div>
</div>

Those child elements can either be styled using :nth-child selectors from their parent, or by using their class attribute values. I defined the grid using CSS Custom properties which includes line names and numbers:

:root {
--grid-4-5: \
[a1] 6fr   [a2] 1fr   [b2] 4fr
[a3] 3fr   [b3] 3fr   [a4] 4fr
[b4] 1fr   [a5] 6fr   [a6];
--grid-column-gap: 2vw;
--grid-row-gap: 5vh; }

These values are applied at large viewport widths when a class attribute contains the word ‘grid” is at the beginning of its value:

@media (min-width: 64em) {
[class^="grid"] {
display: grid;
grid-template-columns: var(--grid-4-5);
gap: var(--grid-row-gap) var(--grid-column-gap); }
}

I have two approaches to layout development—descendent-based and class-based—and both have advantages. When using a class-based approach, I refer to those named lines in class selectors:

.a1-b4 {
grid-column: a1 / b4; }

.a5-a6 {
grid-column: a5 / a6; }

When I use a descendent-based approach, I give a city-based name to the grid container and then place child elements using descendent pseudo-selectors:

.grid-athens > :nth-child(1) {
grid-column: a1 / b4; }

.grid-athens > :nth-child(2) {
grid-column: a5 / a6; }

I use the same approach for all my compound grid layouts.

Layout Love modular grid layouts
Layout Love modular grid layouts

Modular layouts

My approach to modular grids is a little different. Grid modules are individual units—most commonly rectangles or squares—which repeat horizontally and vertically. The Layout Love modular set includes grids based on four, five, and six columns. Each grid container has a modular class attribute value and a data- attribute containing the number of columns:

<div class="modular" data-layout="modular-four-columns">
<div>…</div>
<div>…</div>
<div>…</div>
<div>…</div>
…
</div>

I use both class and data- attributes. First, I specify the number of columns and gaps for each grid as scoped CSS Custom Properties. These properties will be used in calculations later:

[data-layout="modular-four-columns"] {
--modular-width: 95vw;
--modular-columns: repeat(4, 1fr);
--modular-column-count: 4;
--modular-gap-count: 3;
--modular-gap: 2vw; }

I then apply grid properties to grid containers with the word “modular” somewhere in their class attribute values:

[class*="modular"] {
display: grid;
grid-template-columns: var(--modular-columns);
grid-auto-rows: var(--modular-row-height);
gap: var(--modular-gap); }

You might have noticed I haven’t yet defined a value for that --modular-row-height custom property. The most commonly used method for setting an element’s aspect ratio uses a pseudo-element/padding hack which I wanted to avoid. So instead, I use calc to calculate that row height based on the width of the grid container and the number of columns and gaps it contains:

[data-layout*="modular"] {
--modular-row-height:
calc( (var(--modular-width) - (var(--modular-gap-count)
* var(--modular-gap)) ) / var(--modular-column-count) ); }

Just like the sets of compound grids, the modular set includes over a dozen layout modules, each named after a European capital city.

Layout Love ratio-based layouts
Layout Love ratio-based layouts

Ratio-based layouts

One of the biggest issues with how frameworks work with grids is that they offer no help in deciding on the proportional relationships between elements. Ratios can be an enormous help in determining these relationships, but they’re rarely spoken about in relation to web design. I’d like to change that.

Most people will have heard of the golden/Auron ratio of 1:1.618, but there are several other ratios which are used to create what Czech designer Wolfgang von Wersin called “dynamic rectangles.” Layout Love includes these five ratios:

  • Biauron 1:1.236
  • Diagon 1:1.414
  • Auron 1:1.618
  • Sixton 1:1.732
  • Doppelquadrat 1:2

Layout Love includes three and five-column layout modules based on these ratios. I apply ratio-based grid properties to grid containers for each ratio. The first column has a 1fr width, the second multiplies that by the ratio, third multiples that by the ratio again, and so on:

.grid-biauron-3 {
grid-template-columns:
[a1] 1fr
[a2] 1.236fr /* 1fr x 1.236 */
[a3] 1.262fr /* 1.236 x 1.236 */
[a4]; }

I use the same type of calculation with the other four ratios to develop fifteen three-column and forty-eight five-column layout modules. Each is named after a European capital city, making them easy to drop into any development project:

<div class="grid-biauron-3 grid-athens">
<div>…</div>
<div>…</div>
</div>

.grid-biauron-3.grid-athens > :nth-child(1) {
grid-column: a1 / a3; }

.grid-biauron-3.grid-athens > :nth-child(2) {
grid-column: a3 / a4; }
Layout Love grid layout sets
Layout Love offbeat grid layouts to make web projects more interesting

Choosing the right grid

Choosing to use either a compound, modular, or ratio-based grid will depend on content, the type of product or website being designed, and the feeling you wish to evoke. I’ve used every set on recent design projects and they’ve all helped me design more interesting layouts. They’ve also saved me many hours of development work and I hope they can do the same for you.


Explore and buy the Layout Love templates

]]>
<![CDATA[The Alternative CSS principle]]> https://stuffandnonsense.co.uk/blog/the-alternative-css-principle https://stuffandnonsense.co.uk/blog/the-alternative-css-principle Fri, 07 May 2021 00:00:00 +0100 Let’s face it, unless you develop a complex product—and even if you do—you probably don’t need half the humungous hunk of CSS you bung at a browser. In fact, it’s possible you only need one default and one alternative style for every element.

]]> Most of the CSS frameworks I’ve seen include multiple options for styling elements. My own boilerplate—the file I use when starting most projects—includes multiple styles and many value options. Six text sizes from x-small to x-large, six possible spacing values, and multiple transition durations. It also includes several figure configurations, image styles, and tables.

If I don’t need any of these styles, I should delete them to help performance. If I do need this many options, I really should be rethinking my design and how I implement it.

Two typefaces, two colours, two weights, with two line-heights could/should be all I need. Two background colours, two border colours, two widths, two radii should be enough. One blockquote, one figure, one image, one table, plus one alternative for each. Most designs need only need one default and one alternative style for every element.


This approach to CSS starts with a simpler set of Custom Properties, starting with default and alternative values:

:root {
--font-family-default: 'Merriweather', serif;
--font-family-alt: 'Merriweather Sans', sans-serif;

--font-color-default: #b1a18;
--font-color-alt: #f5f5f3;

--font-link-default: #a62339;
--font-link-alt: #a62339;

--font-weight-default: 400;
--font-weight-alt: 700;
}

The same principle applies to background and border colours, and radii, and widths.

I set out my default styles in the main part of my stylesheet plus one alternative style for each element. I use a simple .alt class and combine selectors. I add that class to element selectors to style alternative headlines:

h1 {
color: var(--font-color-default); }

h1.alt {
color: var(--font-color-alt); }

I change the alignment of blockquote citations the same way:

blockquote.alt cite {
text-align: right;
/* Text styles */
}

When a default style is applied using an ID or class selector, I add the alt class by stringing those two selectors together:

.lede.alt {
color: var(--font-color-alt); }

This alternative approach simplifies my design, reduces the number of styles I need, and offers a simpler approach when writing HTML. I needn’t think of a dozen descriptive class attribute vales, I only need to write alt. I can apply alt to multiple elements in HTML and then let CSS classes do the work:

<h1 class="alt">…</h2>
<h3 class="alt">…</h3>
<blockquote class="alt">…</blockquote>
<table class="alt">…</table>
<p class="lede alt">…</p>

My boilerplate still includes multiple style options for when I need them—for example styles for larger lede and standfirst paragraphs, and several list styles—but I keep these to as few as possible.

I’ve used this alternative approach to CSS. It works, and I’ve reached the conclusion that I need just a fraction of the styles I used to include in my boilerplate and websites. Reducing the amount of CSS I write isn’t just good for performance, it’s good for design too. It helps to clarify thinking about what makes a good default style and what an alternative needs to achieve.

If you like the look of this approach, I’ve made my current CSS boilerplate into a Gist.

]]>
<![CDATA[We’re looking for a product designer to join Nozomi Networks]]> https://stuffandnonsense.co.uk/blog/looking-for-a-product-designer-to-join-nozomi-networks https://stuffandnonsense.co.uk/blog/looking-for-a-product-designer-to-join-nozomi-networks Thu, 29 Apr 2021 00:00:00 +0100 For 35 weeks every year—three weeks per month—I work with Nozomi Networks guiding the creative direction and experience design of their cyber security products. The team is growing, so we’re looking for a product designer to join us.

]]> Nozomi Networks is based in Mendrisio in southern Switzerland, just over the border from Italy. The office is close to Milan and only a stones throw from Como. They make products which large companies us to manage their cyber security.

This might sound deadly dull—which is partly what I first thought— and not at all what you may expect me to enjoy working on. But, what’s great about working with Nozomi Networks is their keenness to explore every creative possibility to bring their data and a customer’s experience of it to life

The people there are great too. They’re a diverse group, friendly and smart, and I enjoy working with them a lot. They’ve been incredibly supportive of everyone in the team throughout the pandemic and I couldn’t recommend them highly enough.

My role at Nozomi Networks is Director of Product Design and I guide their products’ creative direction and experience design. With new products being developed, we’re looking for an experienced product UI/UX designer to join the team. For now there’ll just be two of us in design, so there’s plenty of scope to grow along with the company.

We’re looking for someone based in Europe as the position can be fully remote, but with occasional travel to Switzerland. Or, you may want to relocate to the Mendrisio area and be based in the office there. The job advert says you’ll need to:

  • Have a good understanding of user-centred design
  • Be able to show evidence of critical thinking
  • Be familiar with design tools including Figma, Invision, or Sketch
  • Have a working knowledge of modern HTML, CSS, and SVG
  • (Having a working knowledge of vanilla Javascript is an advantage)
  • Have experience developing and working with design systems

This last point is important because it’s now time for us to establish a Nozomi Networks design system and you will have an important role in shaping it.

Take a look at the job advert. If you want to talk about any aspect of the role, get in touch with me. My Twitter DMs are open (@malarkey) or you can email me at andy.clarke[at]nozominetworks[dot]com.

]]>
<![CDATA[Layout Love: Modular grids for visually appealing layouts]]> https://stuffandnonsense.co.uk/blog/modular-grids-for-visually-appealing-layouts https://stuffandnonsense.co.uk/blog/modular-grids-for-visually-appealing-layouts Wed, 28 Apr 2021 00:00:00 +0100 As I’ve said plenty of times before, a well-chosen grid can do much, much more than align content. Our choice of grid can influence how we approach a design and it can change how we think about layout. That’s especially true of modular grids.

]]> First, a quick explanation. There are several components to a grid: columns, fields, flowlines, gutters, margins, modules, and spacial zones. Grid modules are individual units—most commonly rectangles or squares—which repeat horizontally and vertically. Modules can be any size: based on your content, the aspect ratios of images, and even advertising sizes. We don’t hear as much about modular grids for web design as we do column-based grids. I’d like to change that.

Modular grid for website design
Clockwise from top-left: Modular grids with four, five, and six columns, with three or four rows. A spacial zone comprised of six grid modules.

In CSS Grid, spacial zones are called grid-template-areas. Whatever you choose to call them, they’re adjacent modules bound together to form larger areas.


Tip: I wrote about compound grids in more detail in my book “Art Direction for the Web.” Buy the e-book for £12.99.


At first glance, modular grids might seem complicated. However, they’re easy to work with. Modular grids are excellent for bringing order to large amounts of varied content and you can also use them to create visually appealing layouts when there’s very little content. They’re also fabulous for making diverse designs with plenty of drama and energy and can be especially useful for laying out portfolio or product pages.

For these examples, I start with a modular grid comprised of three columns and rows. Each module is a landscape orientation rectangle, but could also be portrait orientation or a square.

This simple modular grid is ideal for making a bold statement, perhaps on a home or landing page, or a product page on an e-commerce website. In this arrangement, the large image in a 2x3 spacial zone adds immediate impact and is complemented by a solid column of running text which fills the height of this layout.

Modular grid for website design
Left: Four-column modular grid with landscape orientation rectangles. Right: A bold statement made with a 2x3 spacial zone containing a large image.

A modular grid offers a huge variety of potential layout options. In this next arrangement, two larger spacial zones—one landscape, the other portrait—offer space for larger images and have been placed alongside a series of smaller images and text blocks of the same size. Not every module in a modular grid needs to be filled with content and here, empty modules add breathing space inside this energetic arrangement.

Modular grid for website design
This arrangement—based on a three-column modular grid—would suit a set of portfolio items or product images.

A carefully considered modular grid can add rhythm to a layout. I might place images and text vertically to emphasise my columns and use each column for a discrete piece of content.

Modular grid for website design
Three sizes of images and text adds rhythm to this arrangement of elements on my modular grid.

Angles can help you make a layout look less structured and feel more organic. I may opt for square spacial zones and mirror them along a diagonal axis.

Modular grid for website design
Although these modules are symmetrical across a diagonal axis, if you folded this layout along the red line, the two halves wouldn’t align.

For a more structured feel, I might repeat a pattern of single modules across the width of my layout. The even sizes and deliberate placement of elements in this arrangement create a sense of order.

Modular grid for website design
Even size spaces for images and text and a repeating pattern of modules creates a sense of order.

Or, for an altogether different feel, I may arrange an equal amount of horizontal and vertical spacial zones, and single modules, leaving two opposite modules empty to draw the eye across a page.

Modular grid for website design
Not every module in a modular grid needs to be filled. An empty space can be just as important as one filled with content.

Choosing different quantities of columns and rows for a modular grid can have a huge impact on the feeling created by a design. Three and four columns have a less formal feel and are better suited to longer passages of running text. Adding columns and rows makes a design feel increasingly formal and might be better suited to arranging more content.

Modular grid for website design
Left: Elements arranged on a 5x3 modular grid. Right: Those same elements arranged on a 6x4 modular grid.

When I increase the quantity of columns and rows in a modular grid they become smaller and quickens the speed of reading. Varying the amount of modules across several pages allows me to change the pace of someone’s experience across a complete design.

Modular grid for website design
Left: Elements arranged differently on this 5x3 modular grid. Right: Modular grids can be used to create any number of visually appealing layouts.

My choice of how many columns and rows to include in a modular grid will depend on several factors, including the amount and type of content, the feelings I want a layout to evoke, and the speed of the experience I want to create.

Modular grid for website design
Left: Elements arranged differently on this 5x3 modular grid. Right: Modular grids are excellent for bringing order to large amounts of varied content.

Layout Love

All these modular grids and more are available in my Layout Love modular grid set to make prototyping and site development work simpler. You can use Layout Love’s HTML and CSS for any personal or commercial design project. This set is just £2.99 and all five compound, modular, and ratio sets together are £9.99 which could save you many hours or work.

]]>
<![CDATA[A slippery slope towards Tailwind?]]> https://stuffandnonsense.co.uk/blog/a-slippery-slope-towards-tailwind https://stuffandnonsense.co.uk/blog/a-slippery-slope-towards-tailwind Wed, 21 Apr 2021 00:00:00 +0100 Sam Sycamore tweeted a utility class for breaking an element out of its container to fill the full width of a page. It prompted me to think about how and when to use utility classes.

]]> Sam’s full-width utility does only one thing. It breaks an element out of its container to fill the width of a page.

.full-width {
position: relative;
right: 50%;
left: 50%;
margin-right: -50vw;
margin-left: -50vw;
width: 100vw;
max-width: 100vw; }

I include a few helper classes in my own stylesheets, for example to centre-align text:

.align--center {
text-align: center; }

And for exceptions to other margin styles. And for floating images right or left. And for screen-reader only content. And, I use these helpers as infrequently as I possibly can.

CSS-in-HTML

Conversations about CSS-in-JS are often polarised and Tailwind’s CSS-in-HTML is just as divisive. For me, the concept of utility-first makes sense on one level and I can see how it might appeal to people who work on products packed plenty of components.

The idea of tying HTML and styling so closely together—even if we choose elements for their semantics and visual data is only present in attributes—is something I’m uncomfortable with. I’ve written HTML and CSS for a long time and spent years influencing people to keep markup free from presentational information.

So where does this leave me and my helpers? And aren’t these classes just a slippery slope towards Tailwind?

I think the answer is in the degree to which I use these utility classes. They’re fine when used infrequently. They’re OK to use for adding exceptions to already specified styles—like when I need that alternative text alignment or extra margin between elements. But utility-first? I still maintain that’s contrary to the way meaningful markup and CSS for presentation should remain separate. And it’s going to take a very strong argument to change my mind.


Layout Love

Using modern CSS Grid, I developed four sets of reusable layout components to make prototyping and site development work simpler. I call these Layout Love and rather than keeping them to myself, I’m offering them for everyone to use. You can use Layout Love’s HTML and CSS for any personal or commercial design project. Each set is just £2.99 and all four together are £9.99 which could save you many hours or work.

]]>
<![CDATA[Layout Love: How a 3+4 compound grid can improve on 12-columns]]> https://stuffandnonsense.co.uk/blog/how-a-3-4-compound-grid-can-improve-on-12-columns https://stuffandnonsense.co.uk/blog/how-a-3-4-compound-grid-can-improve-on-12-columns Mon, 19 Apr 2021 00:00:00 +0100 Compound grids offer exciting and often unconventional layout possibilities. Most importantly, they also encourage us to think differently about the choices we make when we’re designing layouts. If you’re familiar with the grid made ubiquitous by Bootstrap, a 3+4 compound grid is a great place to start learning about compound grids.

]]> First, a quick recap. A compound grid is two or more overlapping or stacked grids of any type—column, modular, symmetrical, and asymmetrical—on one page. They can occupy separate areas or overlap.

Two symmetrical grids
Left: A symmetrical grid with three columns. Right: Another symmetrical even-ratio grid with four columns.

A 3+4 compound is made from overlapping one 3-column and one 4-column grid. Both grids should be the same width and the gutters between their columns identical. It’s the interplay of multiple grids which makes a compound layout more interesting than one grid used in isolation.

Two symmetrical grids
Left: Column pattern created by overlapping two grids. Right: Stacking the two grids.

With two grids in this compound, I might choose to use columns from either one to give a design a different personality. A symmetrical 3-column grid has an editorial feel but retains a certain informality. A symmetrical 4-column grid packs running text into tighter blocks. This gives a design a more serious tone.

Different column widths create different personalities
Left: A more informal feeling comes from using wider columns. Right:A narrower measure demands smaller text which adds to the authoritative feel of these tighter text blocks.

Carefully choosing columns from either of these grids can create interesting layouts. In a 3-column designs, I might devote two columns to my main content and one to supplementary content or an associated article. This hierarchy can be emphasised further by adding a large headline and a standfirst paragraph which span both columns.

Different column widths create different personalities
Left: Two columns devoted to main content and one to supplementary content. Right:The formality of a 4-column design can be softened by an oversized headline.

The formality of a 4-column design can be softened by an oversized headline which again spans the width of my main content. Images placed in the running text also make this design’s column structure more obvious.

But—with so many interesting layout options possible—why are the designs we see based on them so often uninspiring? I think the fault lies not with the grids themselves, but in the unimaginative ways they’re used.

Cliche use of twelve columns
That websites using either three or four columns in a 12-column grid look similar has, in itself, become a cliche.

Overlapping 3-column and 4-column grids to create a compound is one way to start creating interesting layouts. This overlap creates six columns with three different widths and has a rhythmic pattern of 3|1|2|2|1|3. It’s this type of rhythmic pattern which helps shift our thinking away from over-used layout patterns influenced by an even twelve columns.

I might combine column widths together to form a layout structure which has three wider columns of different widths. I can reorder and split them to add variety to my layouts while maintaining connectedness across all the pages in my design.

Compound grid layout permutations
Clockwise from top-left: The 3|1|2|2|1|3 rhythmic pattern of 3+4 compound grid columns. Three wider columns of different widths. Those same columns rearranged. Splitting columns creates an asymmetrical layout.

I can utilise those very narrow columns in several ways, perhaps by offsetting a headline to draw a reader into the page. I might also add a skinny column’s width to that of another column and use it to increase the size of an image. This helps form a tighter connection between my content and the image associated with it.

By widening the measure of my running text to include both the narrow columns in this grid, I can use their widths to inform by how much I should indent this this image and pull quote. This placement connects these elements to my running text without interrupting a reader’s flow.

Narrow column indentation
Left: Using a narrow column to offset a headline and adding a skinny column’s width to another column. Right: A narrow column can also inform the amount of indentation needed for images and pullquotes.

I can also use narrow columns to add precise amounts of whitespace. This unused space can visually separate either two topics or my main content from supplementary information. This can be especially effective when that supplementary information includes a very different set of elements.

Precise amounts of whitespace
Precise amounts of whitespace to separate areas of content.

Techniques like this are just as applicable to a transactional website as they are for editorial. In this e-commerce page, I placed the main content and image into wider columns. The narrower supplementary content is separated by one column of whitespace to emphasise the hierarchy of content on the page. A large image connects the two content areas. This technique can also add energy to a product’s promotional pages. The main content and can lead to any number of potential creative layouts.

Hierarchy of an e-commerce page
Left: Layout emphasises the hierarchy of an e-commerce page. Right: The same techniques can add energy and interest to a promotional page.

To break the rigid structure often associated with grid-based designs, I might use CSS Shapes to add a more organic feel by flowing my headline text around parts of a large image.


Can the layouts I’ve demonstrated be accomplished using a Bootstrap-style 12-column grid? Yes, they can, because twelve columns are divisible by both three and four.

Accomplished using a Bootstrap-style 12-column grid and 3+4 compound grid
Left: Accomplished using a Bootstrap-style 12-column grid. Right: The same result by starting with a 3+4 compound grid.

But, would starting with twelve columns have forced the break from conventional thinking? Would a 12-column grid have helped me to avoid those all too common layout patterns? No, I don’t think it would. And that’s one reason why a 3+4 compound grid can improve on 12-columns.


Layout Love

Using modern CSS Grid, I developed five sets of reusable layout components to make prototyping and site development work simpler. I call these Layout Love and rather than keeping them to myself, I’m offering them for everyone to use. You can use Layout Love’s HTML and CSS for any personal or commercial design project. Each set is just £2.99 and all five together are £9.99 which could save you many hours or work.

]]>
<![CDATA[Layout Love: Get started quickly with a 4+5 compound grid]]> https://stuffandnonsense.co.uk/blog/get-started-quickly-with-a-4-5-compound-grid https://stuffandnonsense.co.uk/blog/get-started-quickly-with-a-4-5-compound-grid Tue, 13 Apr 2021 00:00:00 +0100 I’ve said over and over again that a well-chosen grid can do much, much more than align content. The choice of grid can influence how we approach a design, it can change how we think.

]]> Working with CSS Grid has completely changed the way I think about structuring my layouts. In the past, I thought only in terms of structural columns. I might create a layout with two columns, for example one wider column for my main content, and a narrower column for supplementary content.

Clockwise from top-left: Progressively sub-dividing two structural columns to form boxes for my content.

Then, I would sub-divide each area, adding inner columns and rows. It was an approach very similar to how I’d used tables for layout. In fact, all I’d really done was replace table cells with divs. This two-dimensional approach to layout suits most frameworks’ default 12-column grids very well.

That websites with 12 or 16 column grids look so similar has become a cliche. It’s true that Bootstrap-style frameworks have led to countless identical designs, but not because they contain 12 or 16 columns, but because their even-ratios and symmetry has so strongly influenced our approach to layout on the web.

Think of each column as a beat. When you drum the cadence of 12 evenly-sized columns with your fingers, the rhythm is monotonous.

Compound grids encourage a different type of thinking about layouts. 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 this interplay of two grids which makes a compound layout more interesting than one grid used in isolation.

Tip: I wrote about compound grids in much more detail in my book Art Direction for the Web. Buy the e-book for £12.99.

When using a 4+5 compound of two grids—4-columns and 5-columns—I might use columns from either. A 4-column grid is a simplification of twelve columns and should feel very familiar. The proportions of a 5-column grid might seem foreign as they’re less often seen online.

I might use column widths from the 4-column grid (B) (left) or the 5-column grid (A) (right.)

For simplicity in these diagrams, I colour-coded these grid modules and name their CSS Grid line numbers as “Ax” (for the 5-column grid) and “Bx” (for the 4-column grid.)

Overlapping four and five columns

By overlapping 4-column and 5-column grids, I form a compound grid which comprises eight columns with four different widths. This grid has a rhythmic pattern of 6|1|4|3|3|4|1|6 which is far more interesting that the 12-column rhythm. This rhythm can be expressed using fractional units in CSS Grid:

[class*="grid"] {
grid-template-columns: 6fr 1fr 4fr 3fr 3fr 4fr 1fr 6fr; }

Instead of limiting my thinking to columns, I’ve lately been developing sets of grid modules, each one based on different combinations of widths, but with a relationship between them all because they’re based on the same grid. This can be a fabulous way to become familiar with using a new grid and experimenting with grid modules has completely changed my approach to layout.

Creating sets of grid modules is a fabulous way to become familiar with using any new grid.

For example, using a 4+5 compound grid, I developed modules of two, three, or four columns. Then I add greeked content and placeholder images to demonstrate the possibilities of using them better. The result is a set of twelve connected modules.

Greeked content and placeholder images demonstrate the possibilities of using these compound grid modules.

Developing compound grid modules

I have two approaches to layout development—descendent-based and class-based—and both have advantages. I start by defining the eight columns in this compound grid by applying styles to any element where “grid” is at the beginning of the class value. I also give the grid lines a named value so I can refer to them later:

@media (min-width: 64em) {
[class^="grid"] {
display: grid;
grid-template-columns: [a1] 6fr [a2] 1fr [b2] 4fr [a3] 3fr [b3] 3fr [a4] 4fr [b4] 1fr [a5] 6fr [a6];
grid-column-gap: 2vw;
grid-row-gap: 5vh; }
}

When using a class-based approach, I refer to those named lines in class values to place elements onto my grid:

<div class="grid">
<div class="a1-b4">…</div>
<div class="a5-a6">…</div>
</div>

.a1-b4 {
grid-column: a1 / b4; }

.a5-a6 {
grid-column: a5 / a6; }

When using a descendent-based approach, I give a unique name to the grid container and in this set my names come from capital cities. Then, I place child elements using descendent pseudo-selectors:

<div class="grid-athens">
<div>…</div>
<div>…</div>
</div>

.grid-athens > :nth-child(1) {
grid-column: a1 / b4; }

.grid-athens > :nth-child(2) {
grid-column: a5 / a6; }
Combinations of reusable layout components on three example pages.

I can use any combination of these modules to create page layouts which have a far more interesting rhythm than is possible from twelve even columns.

For a 4+5 compound grid, I developed these modules into a set of reusable layout components and they have made my recent prototyping and site development work much simpler. I’ve also developed sets for a 3+4 compound grid, 4+6 compound grid, and a set for modular grid layouts. I’ll write more about those next week.


I call my sets of layout modules “Layout Love” and rather than keeping them to myself, I’m offering them for anyone to use. There are four sets available to buy from my new Layout Love page for only £2.99 per set:

4+5 compound grid set
4+5 compound grid set

4+5 compound grid: Contains twelve modules and three full-page templates, all based on a 4+5 compound of four-column and five-column grids. Buy set for £2.99

4+6 compound grid set
4+6 compound grid set

4+6 compound grid: Contains twelve modules and three full-page templates, all based on a 4+6 compound of four-column and six-column grids. Buy set for £2.99

3+4 compound grid set
3+4 compound grid set

3+4 compound grid: Contains twelve modules and three full-page templates, all based on a 3+4 compound of three-column and four-column grids. Buy set for £2.99

Modular grid set
Modular grid set

Modular grids: Contains fifteen modular grid components based on a four-column, five-column, and six-column grids. Buy set for £2.99


You can also buy all four for £9.99. You can use Layout Love for any personal or commercial design project which could save you many hours or work.

]]>
<![CDATA[A quick note about using filters to change link colours]]> https://stuffandnonsense.co.uk/blog/a-quick-note-about-using-filters-to-change-link-colours https://stuffandnonsense.co.uk/blog/a-quick-note-about-using-filters-to-change-link-colours Sun, 04 Apr 2021 00:00:00 +0100 For as long as I can remember, I’ve been specifying different colours for hyperlinks and their :hover pseudo-classes. Recently, I’ve been experimenting with CSS filters and found they make development much easier.

]]> This is the way I’ve specified link colours for so long:

a {
color: var(--color-text-link); /* #fa6e34 */ }

a:hover {
color: var(--color-text-link-hover); /* #e04606 */ }

Instead of specifying two different colours for hyperlinks and their :hover pseudo-classes, I can use CSS filters including brightness(), hue-rotate(), opacity(), and saturate(). To emulate that darker :hover colour, I might reduce the brightness of a link to 90%:

a:hover {
filter: brightness(90%); }

Or, to brighten a link colour on :hover, I might increase its brightness to 110%:

a:hover {
filter: brightness(110%); }

To change a link colour on :hover to one on the opposite side of the colour wheel—in my case from orange to blue—I can rotate its hue:

a:hover {
filter: hue-rotate(180deg); }

And, to reduce the intensity of previously visited links, I can adjust their saturation using a filter:

a:visited {
filter: saturate(75%); }

I can even add a subtle transition to add depth to the effect. So, my new styles for hyperlinks and pseudo-classes might look like this:

a {
color: var(--color-text-link); /* #fa6e34 */
transition: filter 250ms; }

a:visited {
filter: saturate(75%); }

a:hover {
filter: brightness(110%); }

As I only need to adjust the link colour when a design changes, this approach seems much more flexible than specifying two or more link colours in my stylesheets.

]]>
<![CDATA[Thrilled to work on Worrysome]]> https://stuffandnonsense.co.uk/blog/thrilled-to-work-on-worrysome https://stuffandnonsense.co.uk/blog/thrilled-to-work-on-worrysome Thu, 01 Apr 2021 00:00:00 +0100 Although I don’t get to do it as often as I’d like, I enjoy working with startups. So, I was thrilled to be asked to work on a website design for Worrysome, a new business which aims to take the worry out of worrying.

]]> Worrysome home page
Worrysome is a groundbreaking service with a team of expert worriers who will lift the weight of worrying from your shoulders.

Worrysome has a unique proposition and business model. Everyone knows that worrying doesn’t stop bad things from happening. So, instead of worrying about climate change, dieting, getting old, or job security, pay someone else to worry for you.

For just £2.99 per month per worry, they worry about everything from ageing to the rise of artificial intelligence, from climate change to crime, and from Brexit to being perfect. You receive a Worrysome certificate to print and hang on your wall, letting you know you can stop worrying and get on with your life.

Typeface choices

As a start-up, Worrysome has no brand guidelines or visual identity, so I spent time with Rolf Spolia—Worrysome’s Head of Marketing—to discuss the company’s ideas for their brand values. Rolf and Lila Proofs—their Head of Product—wanted an approachable, friendly design. I chose two typefaces for their design. “Obviously” by OH no Type Co.’s James Edmondson for headlines and body copy. “Shelby” by Laura Worthington as my accent typeface and for the Worrysome logotype. While these fonts are currently served via Adobe Typekit, there are plans to self-host them as the site develops.

Colour palette

I opted for a muted pastel palette of colours for this design. Starting with the blue used on the home page, I calculated a set of split complementary colours and use them across the Worrysome website.

Worrysome colour palette
I usually worry about using pastel colours, but they work very well in this Worrysome design.

Illustrations and SVG

I based the Worrysome design around illustrations—which can be themed to match the website’s colour palette—and commissioned Italian Australian illustrator Flori Alsop. Just as I’d done with the vector illustrations for Stuff & Nonsense, I took the SVG files Flori delivered, optimised them using Jake Archibald’s SVGOMG! online tool, then added class attributes to individual paths.

Worrysome SVG illustrations
Jake Archibald’s SVGOMG! takes the worry out of optimising SVG files.

This enables me to adjust the colour of their fills to match the different theme colours:

<svg>
<path class="illustration-col-theme">…</path>
</svg>

[data-theme="theme-blue"] .illustration-col-theme {
fill: rgb(154, 180, 190); }

[data-theme="theme-brown"] .illustration-col-theme {
fill: rgb(191, 174, 155); }

[data-theme="theme-green"] .illustration-col-theme {
fill: rgb(164, 195, 187); }

[data-theme="theme-pink"] .illustration-col-theme {
fill: rgb(191, 136, 147); }

Layout grids

As this project came hot on the heels of my design for Stuff & Nonsense, my familiarity with a 4+5 compound grid tempted me to use it again. I needn’t have worried the two designs would look too similar as this grid is flexible and offers countless layout variations.

Worrysome various page designs
I needn’t worry about layout. The 4+5 compound grid offers countless layout variations.

There’s the familiar asymmetrical two-column layout on the home page, two even columns from the four-column grid on the team page, and the much more elaborate modular grid for the worrying topics.

They worry, so you don’t have to

Paying someone to worry for you may seem like a strange concept. But while we were designing and developing their new website, one of their team worried about Getting fat for me and it worked. Of course, I didn’t lose any weight, but I wasn’t worried about eating burgers, donuts, or ice cream for the entire month. Taking worries like that off my shoulders is well worth the £2.99 per month they’re asking.

And if you believe that, you really are an April fool.

]]>
<![CDATA[Extra life for my Game Boy]]> https://stuffandnonsense.co.uk/blog/extra-life-for-my-game-boy https://stuffandnonsense.co.uk/blog/extra-life-for-my-game-boy Mon, 29 Mar 2021 00:00:00 +0100 Rooting around in boxes in our storage unit, I came across the Nintendo Game Boy I bought new in 1990. The plastic covering the green LCD was missing, but it was otherwise intact. The box even contained a few game cartridges. I popped it in my pocket and took it home.

]]> With four fresh AA batteries in the back, I flipped the on-switch and “ping,” that familiar start-up chime. Even after 30-plus years, the little box of gaming magic still worked.

I played Super Mario Land and Tetris for a couple of days and then decided the Game Boy deserved a new lease of life. Most obvious was the yellowing of its grey plastic shell, worn buttons, and that missing LCD cover.

New screen covers are available for just a few pounds. There are replacement buttons and rubbers, and plenty of third-party replacement shells in different colours. I plumped for a grey shell and purple buttons because I wanted my Game Boy to look as original as possible.

Cosmetic upgrades

Swapping the old case for a new one is easy as the new case I bought even came with cheap tri-wing and cross-wing screwdrivers. Inside the Game Boy are a front and back circuit board, plus a small board for the speaker amplifier, and the LCD screen. The rubbers behind the buttons hadn’t perished, so didn’t need replacing.

I unscrewed the boards and screen from the original shell and moved them to the new one. After screwing the Game Boy back and front together, I stuck the tougher new glass LCD screen cover to the front, reinstalled the batteries and “ping,” my original Game Boy looked and played like new.

Installing a new screen

The original Game Boy green LCD wasn’t backlit and often suffered from blurring. After a few weeks of playing with the green screen, I decided to upgrade to a much brighter backlit IPS screen. Fitting the new screen wasn’t complicated. I opened the Game Boy case, removed the screen and boards, then cut away a couple of the screw posts to make room for the new screen.

This replacement screen is a major upgrade from the original. It’s bright, clear, and has the option to change the base colour from green. I like playing with a white background which looks sharp and matches the case.

Now to play some more games. I had a half-dozen original game cartridges and plenty of games are available to buy secondhand on eBay. If you’re less fussy about where your games come from, sites like Emulator Games also have ROMs to download.

Adding SD card storage

To load new games, I bought an EZ Flash Junior SD card adapter which looks like a Nintendo Gamepak but includes a holder for an SD card and firmware to run game ROMS. I fitted it with 16Gb card which cost less than £5 from Amazon and which can hold as many games as I’ll ever want to play.

I’ve played my Game Boy almost every day since I revamped it and the only gripe I had was that the bright new IPS screen chomped through batteries faster than Donkey Kong chomps bananas.

Upgrading to a USB C rechargeable battery

On Friday I ordered a CleanJuice XL USB C battery pack from Retrosix. I installed it on Saturday along with a new battery cover which has a hole for the USB C charging cable. Installing this rechargeable battery involved only removing the bottom battery contact springs and slotting in the battery and its board. Now I can play my Game Boy for over a day and don’t need to spend a small fortune on batteries again.

What it all cost

So far, revamping my old Game Boy has cost about the same as I paid for the original. I could’ve bought a refurbished console with the same upgrades from eBay or Retosix but this would’ve cost over £200 and I wouldn’t have had the satisfaction of upgrading it myself. Here’s what I bought to revamp my Game Boy:

The experience of pounding those plastic buttons is so much nicer than playing games on a phone. If you’ve got an old Game Boy (Advance, Color, DMG, or Pocket) lying around and you love a bit of casual gaming like I do, I thoroughly recommend revamping it and getting your thumbs busy again.

]]>
<![CDATA[Ekster MagSafe wallet review]]> https://stuffandnonsense.co.uk/blog/ekster-magsafe-wallet-review https://stuffandnonsense.co.uk/blog/ekster-magsafe-wallet-review Mon, 08 Mar 2021 09:00:00 +0000 Ekster sent me their iPhone 12 MagSafe wallet for review. The short version? I like it. But, I probably wouldn’t buy it.

]]>

I upgraded to a blue iPhone 12 Pro Max last year and added one of Apple’s (not quite the same) blue leather case. Both are compatible with their re-purposed MagSafe connector for charging and accessories. One of these accessories is a slim wallet which attaches to the back of their MagSafe cases.

Ekster MagSafe wallet (Photo: Ekster)

Not being able to see Apple’s MagSafe wallet in person, I haven’t an opinion about it except its price. Which, at £59.00 puts it outside my impulse buy range. Other manufacturers have also released MagSafe compatible wallets including one from Moft which, unlike Apple’s, has an integrated stand.

The Ekster MagSafe wallet doesn’t have a stand, but does claim to have room for three cards or “some cash.” I normally carry two cards and a couple of notes and they don’t stretch the case at all. If I had to squeeze in more cards, that wouldn’t be a problem, but I’d have to spend my cash first. There’s not room for both. The Ekster wallet also has a thumb slot on the back which is designed to help slide out the back card. Even with just two cards, I’ve never slid a card out successfully using this slot.

Ekster MagSafe wallet, front and back (Photo: Ekster)

Ekster’s doesn’t come in colours like Apple’s wallet (I would’ve chosen their California Poppy yellow) so the wallet I received is in black. This doesn’t look as good against my blue case as it might next to a black one.

The texture of their “Premium American hide” on this case certainly feels different from the leather on my Apple phone case. It’s harder, stiffer, and less textured. It doesn’t feel bad, just different, more like a good quality vinyl than quality leather.

Some reviews of Apple’s MagSafe wallet criticised the strength of its magnets. But, I have no complaints about magnets in Ekster’s wallet. It snaps to the back of my iPhone with a satisfying snap and, once it’s attached, there’s very little wiggle. The wallet has never slipped off accidentally in or out of my pocket, which is impressive considering the size of my iPhone 12 Pro Max.

What I like

Ekster’s magnets are strong and they attach with a satisfying snap. The case hasn’t slipped off accidentally once.

It adds very little bulk in my hand or my pocket. It’s flat and doesn’t make the phone feel unstable when laid on my desk.

It carries what I currently need on a daily basis. When I’m able to travel again and need to carry more cards or collect receipts, I’ll likely go back to using my bulkier Bellroy wallet.

What could be better

Maybe it just the laws of physics, but the case must be removed when sitting on my Qi charging pad.

I would like to see a selection of colours to either complement or contrast with the colour of my case.

The texture feels more like vinyl than leather. It certainly feels different from my Apple leather case.

Conclusion

At $33 on-sale (£23,) this Ekster MagSafe wallet is good value at less than half the price of Apple’s MagSafe wallet. If you can live without a choice of colours like Apple’s or a stand like Moft’s, it’s a great alternative. That’s if you like to stick a few cards to the back of your phone. Me? I actually prefer a reassuringly bulkier wallet because I like to know with a tap that it’s in my pocket. Which is why I probably wouldn’t buy this or any other MagSafe wallet.


Ekster MagSafe wallet

]]>
<![CDATA[A quick note about SVG foreignObject]]> https://stuffandnonsense.co.uk/blog/a-quick-note-about-svg-foreignobject https://stuffandnonsense.co.uk/blog/a-quick-note-about-svg-foreignobject Mon, 08 Mar 2021 00:00:00 +0000 When I was developing the SVG panel for principles on the Stuff & Nonsense about page, I ran into a problem which could only be fixed using <foreignObject>.

]]>
Stuff & Nonsense about page SVG panel

This panel includes eight of the things “we believe…,” in speech bubbles. Each bubble is a separate SVG element nested inside a container SVG. To avoid repeating identical code eight times to create the bubbles, I define the bubble shape as a symbol once and then I reference it multiple times:

<svg>
<symbol id="principles-bubble">
<path>…</path>
</symbol>

<svg>
<use xlink:href="#principles-bubble"></use>
…
</svg>
</svg>

A bubble includes an SVG <text> element for “WE BELIEVE…,”, but the trouble came when I needed to include wrapping text. Text in SVG doesn’t wrap like HTML text. Using <tspan> elements makes sense for separating lines in headlines, but is too restrictive for text in these bubbles. I don’t want to specify where line-breaks occur, I want text to flow and wrap naturally. A little research led to the <foreignObject> element.

The <foreignObject> element allows elements from other XML namespaces like HTML to be included within SVG:

<svg>
<text>WE BELIEVE…</text>
<foreignObject>
<p>in only working on projects where our experience adds value.</p>
</foreignObject>
</svg>

I include a paragraph, but a foreignObject can just as easily include any other HTML element and even groups of elements. Like other elements in SVG, I can size a foreignObject using width and height attributes, and position it using x y coordinates. I can apply a fill or stroke, add a filter or mask, and even clip its shape.

<svg xmlns:xhtml="http://www.w3.org/1999/xhtml">
<use xlink:href="#principles-bubble"></use>
<text x="20" y="50">WE BELIEVE…</text>
<foreignObject x="20" y="65" width="210" height="100">
<p>in long-term creative partnerships…</p>
</foreignObject>
</svg>

With foreignObject, my principles text wraps inside each bubble. Exactly like I want it too.


If you like this post, why not buy an Art Direction for the Web e-book for £12.99?

]]>
<![CDATA[Stuffed with layout options: Using a 4+5 compound grid]]> https://stuffandnonsense.co.uk/blog/using-a-4-5-compound-grid https://stuffandnonsense.co.uk/blog/using-a-4-5-compound-grid Sun, 07 Mar 2021 00:00:00 +0000 A generation of product and website designers has grown up with 12 or 16 column grids from Bootstrap-style frameworks. In those frameworks, columns are used mostly for aligning content. In my new design for Stuff & Nonsense, I wanted to go beyond that and use a compound grid to influence the entire design.

]]>
New Stuff & Nonsense home page showing four columns and five columns stacked into a 4+5 compound grid

When you use grids imaginatively, they do much, much more than align content. A grid brings cohesion to a composition. It helps people understand the stories you’re telling by suggesting hierarchies. Grids inform people what to read first, then next, and how much attention to give it. They define the position of valuable information or a call to action. A thoughtfully chosen grid leads to a wealth of possibilities and any number of exciting designs.

Compound grids

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. The interplay of two grids makes a compound layout more interesting than one grid in isolation. Compound grids offer enormous flexibility, but people rarely speak about them. After spending time experimenting with different numbers of columns, I settled on a compound grid where four columns overlap five columns. I might use widths from one or the other.


Tip: I wrote about compound grids in much more detail in my book Art Direction for the Web. Buy the e-book for £12.99.

I might use column widths from the 4-column grid (left) or the 5-column grid (right)

Or I could combine widths from both to form columns that don’t conform to either. Seeing how the two grids interact makes this much clearer.

Left: How the two grids overlap. Right: The unusual column formation created by overlapping the two grids.

Overlapping a 4-column grid and 5-column grid results in eight columns with four different widths. This grid has a rhythmic pattern of 6|1|4|3|3|4|1|6, which when expressed using fractional units in CSS Grid is:

[class*="grid"] {
grid-template-columns: 6fr 1fr 4fr 3fr 3fr 4fr 1fr 6fr; }

Part of the joy of designing using a compound grid like this is seeing how the unusual arrangement of columns can result in more unusual layouts than anything achievable using a 12 or 16 column framework grid.

These layouts are based on the same 4+5 compound grid.

Clockwise from top-left:

  1. 1. A full-height image might occupy half the width. Two columns of copy are perfect for when the viewport becomes wide enough. Between them, an empty column adds whitespace to the composition.
  2. 2. Those same elements rearranged, placing the full-height image in the centre. The two outer columns might contain two different stories.
  3. 3. This composition gives a long-form article an editorial feel. Offsetting the image draws your eye down into the story.
  4. 4. Adding a column of reversed-out copy emphasises the distinction between two content types. CSS Grid makes implementing complex layouts more straightforward than ever before.

Home page composition

To add drama to the Stuff & Nonsense home page, I dedicated the largest amount of space to the SVG hero panel I described last week. Separated by one of my thinnest columns is a single column of copy.

This composition avoids the conventional full-width header seen on countless framework-based websites.

My compound grid also defines widths within the SVG hero panel, including the relationship between Fast Eddie and the headline text beside him. It also determines the width of the Stuff & Nonsense logo and the size of the circle device.

I often work in black and white and use cursive typefaces while experimenting with ideas for layout compositions.

Compound grids are adaptable, and at this stage of my design process, I begin to think about how I might rearrange elements on my grid at several standard screen widths.

Left: Rearranging elements on the compound grid for medium-width screens. Right: A single-column scrolling layout for the narrowest screens.

With the compound grid still visible, it’s easy to see how this grid enforces its structure on the elements while not appearing rigid.

Top of the Stuff & Nonsense home page with its SVG hero panel, all elements influenced by the compound grid.

I used the same compound grid columns to inform proportions in the second section of the Stuff & Nonsense home page. Here, I reserved a tall space—made up of two columns of different widths— for an image. Using two differently-sized columns of whitespace adds to this composition’s unusual feel.

The layout of this section is based on the same 4+5 compound grid.

The vertical nature of this section’s layout helps emphasise the tall stack of boxes that Fast Eddie has delivered.

But it has an altogether different feel to other parts of this page and the website overall.

Compound and modular grids

A module is a rectangular or square unit of any size. Modules repeat horizontally and vertically to form a modular grid. They’re easy to work with, so it surprises me that so few web designers use modular grids. Modular grids are excellent for bringing order to large amounts of varied content, and you can also use them to create visually appealing layouts even when there’s very little content.

The layout of my home page’s client portfolio section is based on the same 4+5 compound grid with added modular grid components.

Left: A compound grid with modular grid components in my home page client portfolio section. Right: The fully rendered design.

Arranging elements differently gives a very different feel to the page describing my books. This variety of pages helps to keep my design feeling fresh. By using the same compound grid, I achieve a sense of connectedness across all my pages.

Left: Compound grid with modular grid components on my books page. Right: The fully rendered design.

I’m still amazed at how varied layout possibilities from a compound grid can be, especially when combined with grid modules. This became even clearer to me while I was designing the various compositions across my design portfolio pages.

Although each of my portfolio entries looks and feels differently, they’re all based on the same modular 4+5 compound grid. However, this time, the compositions use columns from the 5-column grid. Grids with five columns aren’t commonly used on the web.

5-column grid with modular grid components on pages from my design portfolio.

I based my design portfolio pages—Animal Search, Buskers Bern, Compass Financial, Greenpeace, So Foot, SunLife, and WWF— on the same 5-columns with modular grid components.

5-column grid with modular grid components on the Animal Search design portfolio page.

Although each of the pages are different from each other—and my other pages—the 5-column component in my compound grid helps connect them with the rest of my website.


I wrote about more about compound grids in my book Art Direction for the Web. If you like this post, why not buy the e-book for £12.99?

]]>
<![CDATA[Stuffed with SVG. Combining SVG graphics with text]]> https://stuffandnonsense.co.uk/blog/combining-svg-graphics-with-text https://stuffandnonsense.co.uk/blog/combining-svg-graphics-with-text Wed, 03 Mar 2021 12:00:00 +0000 Given that SVG makes it possible to create cool compositions of images and text, I’m surprised I rarely see designers and developers using it for more than just icons.

]]> This new Stuff & Nonsense website is jam-packed with SVG, from the Fast Eddie illustrations to key headlines and data visualisations. Learning about developing with SVG was one of the best parts of implementing this new design. I want to explain a few things I learned.

Hero panel from the Stuff & Nonsense home page

Let’s start with this hero panel from the Stuff & Nonsense home page. There are five parts to this panel:

  1. 1. A big gorilla. (His name’s Fast Eddie)
  2. 2. Eddie’s bunch of bananas
  3. 3. One loose banana
  4. 4. A large headline, “Our designs deliver”
  5. 5. The “We know our stuff and we’re fun to work with” tagline

These elements are stacked on the z-axis:

  1. Back: Bunch of bananas
  2. Middle: Headline and tagline
  3. Front: Eddie and the loose banana

Aligning text and placing it in combination with the graphic elements precisely are key to making this design work. In the distant past, I would’ve shoved all these elements into a single bitmap image. There are plenty of ways to develop this design using HTML text, CSS, and SVG. But it could be tricky to keep those elements in their correct positions and maintain their proportions within a flexible layout. Using SVG for the entire panel is a much more sensible choice, so I need to:

  1. Make optimised SVG graphics
  2. Add SVG <text> elements
  3. Nest SVGs and position each element
  4. Add class attribute and CSS styles
  5. Consider accessibility

Make optimised SVG graphics

Markus Freise sketched Fast Eddie and his bananas using Adobe Fresco. Then, he produced the finished artwork in Illustrator and exported it to SVG. Brilliant though the artwork looked, the way Illustrator exports SVG is famously flabby. Dozens of paths contained hundreds of points which all contributed to the overall file size.

I took Markus’ Illustrator SVGs and deleted every colour-filled path, leaving just his hand-drawn outlines. To reduce the overall file size, I added eight new filled paths behind those outlines with as few points and curves as possible.

(Watch out: I’ve intentionally simplified the code in these examples by including attributes only if they’re relevant.)

<svg>
<!-- Fast Eddie -->
<path> … </path> <!-- Gorilla hair -->
<path> … </path> <!-- Gorilla skin -->
<path> … </path> <!-- Gorilla face -->
<path> … </path> <!-- Gorilla eyes -->
<path> … </path> <!-- Box dark -->
<path> … </path> <!-- Box light -->
<path> … </path> <!-- Banana dark -->
<path> … </path> <!-- Banana light -->
<path> … </path> <!-- All outlines -->
</svg>

<!-- Banana -->
<svg>
<path> … </path> <!-- Banana darkest -->
<path> … </path> <!-- Banana dark -->
<path> … </path> <!-- Banana light -->
<path> … </path> <!-- Outlines -->
</svg>

I exported new SVGs from Sketch with these simpler paths, then optimised the new files using using Jake Archibald’s SVGOMG! online tool. These files are now a fraction of Illustrator’ original file size.

Simpler paths in Sketch. Left: Original. Right: Optimised

Add SVG <text> elements

In the past, I often converted text to outlines before exporting it to SVG. This presents obvious accessibility concerns, and changing the text meant replacing an SVG file. By setting text in SVG using the <text> element, my text has better accessibility, can be changed more easily, and is searchable and selectable. SVG text also makes it possible to:

  • Use any webfont and style it using CSS
  • Fill text with any flat colour, gradient, or pattern
  • Apply strokes to create outlines
  • Add masks or filters; including blurs and shadows

You can add as many text elements as you need, but my next panel needs only two:

<svg>
<text>Our designs deliver</text>
<text>We know our stuff and we’re fun to work with</text>
</svg>

Only content inside SVG text elements is rendered by browsers, and they ignore anything outside them. SVG text elements won’t wrap like HTML text. HTML has its span element and SVG includes a similar element which is useful for separating text into smaller elements so they can be styled uniquely. To break my headline across three lines, I divide it into three <tspan< elements, one per line:

<svg>
<text>
<tspan>Our </tspan>
<tspan>designs </tspan>
<tspan>deliver </tspan>
</text>
</svg>

By splitting my headline into multiple elements, I’m able to position each line. SVG uses a coordinates system where the origin is at the top left of a viewport (0,0). A positive value on the x-axis places an element horizontally from the left, while a positive value on the y-axis places it vertically from the top.

  • x is the horizontal starting point for the text baseline;
  • y is the vertical starting point for the text baseline;
  • dx shifts text horizontally from a previous element;
  • dy shifts text vertically from an earlier element.

(Sara Soueidan has a much more thorough explanation of the viewport coordinate system.)

I use both x and y values on my tspan elements to place each one and allow space before the first element for the bunch of bananas. Because one unit equals one pixel, I needn’t specify the unit type:

<svg>
<text>
<tspan x="155" y="215">Our </tspan>
<tspan x="10" y="395">designs </tspan>
<tspan x="10" y="575">deliver </tspan>
</text>
</svg>

tspan elements are useful for precise positioning and individual styling, but they’re not without accessibility concerns. Assistive technology pronounce tspan elements as individual words and even spell them when a tspan wraps a single letter. For example, a screen reader will pronounce this series of tspan elements:

<tspan>S</tspan>
<tspan>t</tspan>
<tspan>u</tspan>
<tspan>f</tspan>
<tspan>f</tspan>

As “S”, “t”, “u”, “f”, “f”.

Sketch illustration showing guides

Nest SVGs to position each element

In SVG, the <g> element allows paths and other elements to share common properties, including fill and stroke. But whereas it’s possible to position child elements using x and y coordinate values, it’s impossible to position the g element itself.

While developing my panel, I learned it’s possible to overcome this limitation by splitting it into separate SVGs, one for each of the major elements; banana bunch (back,) headline and tagline (middle,) Fast Eddie (front,) and the loose banana (front.) By nesting these within a container SVG element,I can use their x and y coordinate values to place them precisely where I need them within my composition.

<svg>

<!-- Banana bunch -->
<svg width="150" height="95" x="50" y="130">
</svg>

<!-- Headline and tagline -->
<svg x="0" y="0">
</svg>

<!-- Fast Eddie -->
<svg x="120" y="15">
</svg>

<!-- Loose banana -->
<svg width="150" height="95" x="250" y="500">
</svg>

</svg>

(Yet again, Sara Soueidan has written a much more comprehensive explanation of mimicking relative positioning inside an SVG with nested SVGs.)

Like HTML source order, SVG elements are stacked back to front in the order they’re written. The same is also true of nested SVGs, so the banana bunch is lower down the z-index order, allowing the headline and tagline to overlap it. Fast Eddie comes next and is placed in front of my text, followed by that loose banana.

Colour grading Fast Eddie

Add class attribute and CSS styles

This new design includes a theme with a light background, a dark theme with a blue background, plus an Easter egg theme with an orange background. I use CSS to change the fill colours to match each theme. I use CSS, so first add class attributes to every element. There are three colours for Fast Eddie and two for the box he’s delivering. His bananas and outlines are the same colours on all themes:

<svg>
<!-- Fast Eddie -->
<path class="ill-col-1"> … </path> <!-- Gorilla hair -->
<path class="ill-col-2"> … </path> <!-- Gorilla skin -->
<path class="ill-col-3"> … </path> <!-- Gorilla face -->
<path class="eyes"> … </path> <!-- Gorilla eyes -->
<path class="ill-col-4"> … </path> <!-- Box dark -->
<path class="box-lght"> … </path> <!-- Box light -->
<path class="ban-dk"> … </path> <!-- Banana dark -->
<path class="ban-lght"> … </path> <!-- Banana light -->
<path class="outlines"> … </path> <!-- All outlines -->
</svg>

<!-- Headline and tagline -->
#60;svg>
<text class="ill-t-brand" >Our designs deliver</text>
<text class="ill-t-fill">We know our stuff…</text>
</svg>

First, I change the headline and tagline fill colours to fit each theme. Then, I adapt colours in the Fast Eddie illustration to subtly blend them with each theme’s background. I use CSS Custom Properties to define these colours and make changing them between themes easier:

.ill-t-brand { fill: var(--color-brand); }
.ill-t-fill { fill: var(--color-text); }

.ill-col-1 { fill: var(--ill-col-1); }
.ill-col-2 { fill: var(--ill-col-2); }
.ill-col-3 { fill: var(--ill-col-3); }

Using the prefers-color-scheme media query then allows me to specify a set of custom property values for each theme:

:root {
--ill-t-brand: #a62339;
--ill-t-fill: #1b1a18;
--ill-col-1: #272d30;
--ill-col-2: #565656;
--ill-col-3: #bfbfbf; }

@media (prefers-color-scheme: dark) {
:root {
--ill-t-brand: #1b7ca6;
--ill-t-fill: #fff;
--ill-col-1: #1d303a;
--ill-col-2: #485764;
--ill-col-3: #889aaa; }
}
Highlighting ARIA in dev tools

Consider accessibility

SVG images which contain text outlines can be made more accessible by using alternative text and ARIA properties. So, when linking to an external SVG file, I should add alternative text as I should with any non-decorative image:

<img src="header.svg"
alt="Our design delivers">

SVG text is accessible and selectable when embedded in HTML, and the best way to help people who use assistive technology is to add an ARIA role and a descriptive label. Screen readers will treat the SVG as a single element and read the label description aloud. If I wanted to refer to this panel as an image, I would specify the img role:

<svg role="img" aria-label="Our designs deliver">
…
</svg>

Adding a title element helps assistive technology to understand the difference between several blocks of SVG and this title will be displayed as a tooltip by most browsers:

<svg>
<title>Our designs deliver</title>
</svg>

I need a more comprehensive approach for my panel’s more complex combination of graphical and text elements. First, I add a heading ARIA role to the container SVG, plus a heading level of "1" as this represents the top-level heading on this page:

<svg role="heading" aria-level="1">
…
</svg>

Then I add a title element to the nested SVG, which contains my headline and tagline and add aria-labelledby to help assistive technology understand the difference between several blocks of SVG:

<svg aria-labelledby="headline-title">
<title id="headline-title">Our designs deliver. We know our stuff…</title>
</svg>

For Fast Eddie and the two decorative banana graphics, I add a presentation role plus short descriptions of each image:

<svg role="presentation">
<desc>Fast Eddie is the Stuff & Nonsense gorilla mascot</desc>
</svg>

<svg role="presentation">
<desc>A bunch of bananas</desc>
</svg>

<svg role="presentation">
<desc>A loose banana on the floor</desc>
</svg>

Accessibility and performance matter as much as style in this design. I tried to pay close attention to accessibility. While I haven’t (yet) tested its accessibility with people and assistive technologies, I plan to do just that over the next few weeks.

Heather Migliorisi wrote a more thorough explanation of SVG accessibility on CSS Tricks.

I used a similar approach on the Stuff & Nonsense blog page

Wrapping up

Learning about developing with SVG was one of the most enjoyable parts of implementing this new design. Given how SVG makes it possible to create accessible, flexible, and high-performance compositions like my home page panel, I’m surprised I rarely see designers and developers doing that more often. I hope posts like this might spur you on to use SVG in more creative ways.

]]>
<![CDATA[Yours truly on the Being Freelance podcast]]> https://stuffandnonsense.co.uk/blog/yours-truly-on-the-being-freelance-podcast https://stuffandnonsense.co.uk/blog/yours-truly-on-the-being-freelance-podcast Sat, 27 Feb 2021 00:00:00 +0000 Late last year, I sat down for an hour with Steve Folland to talk about “blagging and learning” on the Being Freelance podcast. The episode’s now available and, to be honest, it’s the best podcast interview I’ve done for a long while.

]]> Here’s my favourite quote from the episode:

“The world does not owe you a living. You don’t have the right to the perfect job, the real world is not like that. You make the most of your own opportunities and you work hard to do it. You need to put the work in and you need to be adaptable. If you are in control of your own destiny, instead of working for a company, and you do it right, I think it can be a really great way of being independent, making a living and doing something which you enjoy.”

It’s a cracking episode. Even if I do say so myself. Which I do.

]]>
<![CDATA[His name is Fast Eddie. And the new Stuff & Nonsense website design]]> https://stuffandnonsense.co.uk/blog/his-name-is-fast-eddie https://stuffandnonsense.co.uk/blog/his-name-is-fast-eddie Thu, 25 Feb 2021 00:00:00 +0000 I’ve been tempted to redesign the Stuff & Nonsense website since we moved back from Australia, but you know, there’s always something else to do.

]]>

Also, I didn’t want to make a half-hearted attempt at a refresh. Instead, I wanted a new design to reflect all the things I’ve learned over the past couple of years and where I am now as a designer. Plus, I didn’t have an idea.

Over the Christmas break, an idea for a new design came to mind and I started to sketch rough layouts and experiment by implementing them in Grid. What really made the design feel right to me was the 4+5 compound grid I’d chosen. It not only allowed for dozens of layout modules, but also looked distinctive and interesting. Those experiments lead to the design you see today. I’ll talk more about the compound grid and how I implemented it in a future post.

New Stuff & Nonsense home page (light version)

Attracting the right clients

I’m now working as Director of Product Design for Nozomi Networks three weeks per month. In the one or two weeks off between sprints, I’m available to work on projects I think are interesting. These should be commissions where I can add value and at the same time enjoy creating something I can be proud of.

The new website is tailored to helping me find the right clients and projects for the time I have available. I know not everyone will like it, but I hope those who do will better understand what I can offer, then get in touch.

Typeface choices

Choosing the right typeface is a fine balance between flexibility, performance, and style. I quickly fell in love with the personality of Dharma Gothic by Dharma Type’s Ryoichi Tsunekawa. Dharma Gothic might’ve been inspired by 1800s-style wood type, but it has a certain contemporary feel and seems friendlier than condensed alternatives like Champion Gothic or Tungsten Narrow.

Although Dharma Gothic is available from Adobe’s font library and Typekit, for performance reasons I decided to buy a license for the four web fonts I use and am hosting them on my own server.

For body copy, I settled on Merriweather which I downloaded from Google Fonts and also host on my server. The total payload of these font files is 265Kb. That might seem expensive, but as typography is such an important aspect of this design, these fonts are worth their weight.

The new logo

It’s been over ten years since Jon Hicks turned Kevin Cornell’s sketches for a car badge-based design into a Stuff & Nonsense logo. This time, I wanted to evolve that logo mark by enlarging its wings, reshaping the badge, and making the “SN” inside it clearer. My Illustrator skills aren’t up to much, so I asked the one and only Veerle Pieters to turn my Sketch concepts into the finished new logo.

Colour grading

The default colour of that Stuff & Nonsense badge is the same red we’ve used for years. But when it came to the dark colour theme, I wanted to do something different by making the badge colour blue.

For this new design, I chose two palettes with a very limited set of colours. One shade of red, black, and white for the light theme, and two shades of blue for the dark version.

New Stuff & Nonsense home page (dark version)

I laboured for far too long to find the two shades of yellow for the banana skins which litter the site, because I needed them to work well with both the blue and red themes. If you can find it, there’s also an orange theme Easter egg version of the design.

New Stuff & Nonsense home page (Easter egg version)

I’ll talk more about my colour choices and how I implemented them in a future post but needless to say, using CSS Custom properties make switching between colour palettes simpler than ever before.

Colour grading Fast Eddie

It isn’t just backgrounds, buttons, and text which change for each theme. Each Fast Eddie illustration also subtly changes colour to blend better into light, dark, and Easter egg versions. Each of the stories in my portfolio also include a new colour palette which matches the client’s brand.

Buskers Bern portfolio story

And of course, Fast Eddie

If you stay clear of the generic style so popular with tech companies, illustrations can add real personality to a website. I also love working with illustrators, and couldn’t be happier about working with Markus Freise.

Markus Freise’s original sketches

Markus took my ideas, added plenty of his own including the COVID-safe, fist-bumping, pair of gorillas on the about page, and the Kong-style, banana holding gorilla on the contact page. I asked for very few changes to Markus’s initial sketches.

As a tribute to Motorhead’s classic line-up guitarist, this new gorilla is called Fast Eddie (Clarke.) The small gorilla on the about page is of course called Philthy Phil.

SVG (almost) everything

This new website is laden with SVG, from the obvious Fast Eddie illustrations to key headlines and data visualisations. Learning more about developing creative, high-performance SVG files has been one of the most enjoyable parts of implementing the new design.

For Fast Eddie, I took the Illustrator SVGs Markus delivered and deleted all the colour-filled paths, leaving just his hand-drawn outlines. Using Sketch, I added new filled paths using as few points and curves as possible to reduce the overall file size. From there, I optimised the resulting files using Jake Archibald’s SVGOMG! online tool, then opened them in my text editor (Nova) and added class attributes to each path which allows for the subtle changes in colour.

New Stuff & Nonsense about page (dark version)

This process to took time, but the result is some highly optimised, low weight, high performance SVGs. Including Fast Eddie, his bananas, and both blocks of text, the header section of the home page weighs only 80kb.

SVG text

I’ve really enjoyed learning about how to combine SVG text elements with graphical components. This layering of elements is important because it adds extra depth to the design.

The key headlines are set using SVG text elements and the Dharma Gothic typeface. Unlike HTML/CSS text, SVG text scales fluidly and positions can be very precisely controlled. I’m very surprised I don’t see more designers and developers setting text in SVG and I will definitely being doing it more often.

With several different element types inside my SVGs—paths, primitives, and text—I needed a way to change their positions without exporting new versions every time I changed the design. Before this project, I hadn’t learned that it’s possible to nest SVGs. Doing this allowed me to put every element exactly where I wanted it, and change positions without leaving Nova. I’ll talk more about how I used SVG text in a future post.

Different page layouts

Spending time experimenting with my compound grid encourages me to design several, very different page layouts for this new website. There’s a very different look at feel to my biography page, a simpler layout on the contact page, and I had plenty of fun bring the information on my speaking and workshop pages to life.

New Stuff & Nonsense speaking page (dark version)

Over the past few years I’ve become fascinated by data visualisation and the speaking page in particular allowed me plenty of scope to play with both visualisation design and how to implement them using SVG.

Accessibility and performance

Accessibility and performance matter as much as style in this design. I paid close attention to accessibility and while I haven’t (yet) tested its accessibility with people and assistive technologies, I plan to do just that over the next few weeks.

With so many visual elements in this design, I also wanted its performance to be better than ever. Along with optimising my images and serving them from my Cloudinary CDN, I optimised SVGs aggressively.

I also took advice from Harry Roberts on structuring the content order of my pages’ HTML head portion. To give the illusion of even faster pages, I now use Instant.page to preload pages when someone hovers over a link.

The home page now has a Lighthouse score of 96/100 on mobile and 100% on desktop. I couldn’t be happier about that.

Thanks to everyone who helped with the new site

This was a team effort, but there’s really only me on the design, so I called on some of friends to help out where my experience is lacking.


Paul Boag reviewed content, helping me focus messaging on what appeals to potential clients. Markus Freise created Fast Eddie and was a pleasure to collaborate with on the new illustrations. Steven Grant was a shoulder to lean on when deploying the website to GitHub and Digital Ocean. Sush Kelly wrote the Javascript and implemented the swing-out menu. Veerle Pieters polished my design and finessed the new Stuff & Nonsense logo mark. Harry Roberts—in person and with his excellent video course—helped me improve performance. Dave Smyth helped get the website running locally and resolve some sticky Statamic issues.


I really hope you enjoy the new Stuff & Nonsense design. If you haven’t been there yet, start exploring from the home page.

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

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

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

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


Shop the magazines

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


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

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

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

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


Shop the magazines

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


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

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

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

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


Shop the magazines

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


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

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

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

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


Shop the magazines

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


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

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

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

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


Shop the magazines

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


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

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

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

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


Shop the magazines

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


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

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

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

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


Shop the magazines

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


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

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

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

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


Shop the magazines

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


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

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

#27 Inspired by Saul Bass

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

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

#28 Inspired by Ken Garland

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

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

#29 Inspired by Saul Bass

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

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

#30 Inspired by Otl Aicher

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

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

#31 Inspired by Ken Garland

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

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

#32 Inspired by Armin Hofmann

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

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

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

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

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

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

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

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

Different numbers of columns and a variety of proportional relationships.

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

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

Layout components named after Japanese kaiju monsters

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


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

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

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

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

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


Shop the magazines

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


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

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

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

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


Shop the magazines

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


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

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

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

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


Shop the magazines

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


Shop the magazines
]]>