Posts tagged design

January Roundup

Coding, Fonts, and Design

This section features affiliate links, meaning I’ll earn a small commission (at no cost to you) if you decide to click through and make a purchase.

I had to set up a cookie consent management platform this month and it was a big “Google really is getting worse” moment for me. Maybe I’m romanticizing the results of a few years ago, but I swear the first two pages of a search like this used to be full of articles comparing the costs and features of major providers. Today, I found one neutral source (Top 12 Consent Management Platforms (CMP)) but it’s mostly ads and fake posts by the companies surprisingly ranking themselves number one.

The information shortage probably isn’t helped by the fact that a lot of platforms are tightlipped about pricing and really want you to do sales call. I eventually went with CookieYes because I appreciated their transparency and so far so good. It was easy to set up with Google Tag Manager. Integrating with Segment required a little more work but this repo saved me. 


My sister asked me to help her find a font she saw in an Instagram ad that could best be described as thick or blobby cursive. Although I couldn't find an exact match, I recommended a few from the search: Klangfarbe by Mysterylab Designs, Blank’s Script by Billy Argel (also available free for personal use), and Guava by Meg Burk.

Klangfarbe font posterThe New Start font posterGuava font poster


Tried a couple new tools that I’m pretty happy with:

  • After using Material UI for years at work, I decided to give Mantine a try on a personal project and my only real complaint was their color generator. Luckily, Shadowlord exists for generating different tints and shades.
  • I don’t know how it took me so long to find an extension to take full page screenshots instead of doing it manually. Now I’m using the Chrome extension GoFullPage and it’s made my life so much easier.

Looking forward to these free online events in February:

Books

Finished Technically Wrong: Sexist Apps, Biased Algorithms, and Other Threats of Toxic Tech by Sara Wachter-Boettcher at the end of December. It’s a little jarring to run across the line “I don’t know what the United States will look like by the time you read this book, and in fact I’m anxious it will look even bleaker than I can yet imagine” in a book about inequity and homogeneity in tech published in 2017. Things definitely are bleaker today, with companies like Facebook taking a vocal stand against diversity, but I think that makes this book a more interesting what could have been. Also the chapter on the illusion of the meritocracy hits really hard.

Reading Technically Wrong, I was reminded of a book I’d previously read, Weapons of Math Destruction: How Big Data Increases Inequality and Threatens Democracy by Cathy O'Neil, so it wasn’t surprising to see it referenced midway through. Weapons of Math Destruction examines how algorithms can exacerbate inequality by reinforcing the biases of their creators. With AI (or what we call AI right now), the risks of delegating decisions around school, work, health insurance, etc. to unaccountable black boxes seem even more obvious.

Podcasts

Speaking of tech’s rightward lurch, as a big fan of Ed Zitron’s Where’s Your Ed At newsletter, I started listening to Better Offline when it premiered last year but, it feels appropriate that I’m posting about it at a time when the industry deserves even more anger. At this moment, it’s especially cathartic to hear that you’re not imagining what he calls the “rot economy”, products getting worse (thanks Prabhakar Raghavan), bubbles preparing to pop (thanks OpenAI), and a general malaise engulfing the industry. 

System Crash is a new podcast by Paris Marx from Tech Won’t Save Us and Brian Merchant, author of Blood in the Machine (which I just got from the library). The format may evolve over time, but for now it’s a good weekly wrap-up discussing events in tech from a skeptical perspective. 

And for something completely different, 99% Invisible’s episode on the history of the typeface Fraktur is an interesting listen. I usually post positive font content so this is a bit of a departure. 

Videos

He deserves worse as an out and proud fascist trying to destroy America but I still enjoy YouTubers realizing that Elon Musk is a fraud and a poser who lies about everything including his video game prowess. A lot of good content out there but my entry point was Elon Musk Fraud Gamer Situation is Pathetic by penguinz0.


This was reposted from my newsletter on Beehiiv. To get next month's by email, sign up below.


Best 2024 Campaign Website Design

One thing I like to do when national politics have me spiraling into a panic (or, shockingly, when they have me feeling optimistic) is volunteer with Tech for Campaigns. If you have experience in engineering/product/design/etc. and want to help build websites or run email marketing for smaller campaigns, it's a great way to connect with talented, like-minded people and feel like you're actually helping.

As part of that, I've seen a lot of campaign websites this cycle. Sometimes the candidates recommend designs they like. Sometimes I'm out looking for inspiration. Since the content on these sites is generally very similar, it's interesting to see the different design approaches.

So, in no particular order, here's my partisan, totally subjective, and very non-exhaustive list of the best political website designs from 2024.

Elissa Slotkin for Michigan website screenshot

Elissa Slotkin for Michigan

Download full screenshot

This one is my favorite. Love the color palette, the background textures, and (most of all) the triangular decorative elements.

Lisa Blunt Rochester for U.S. Senate website screenshot

Lisa Blunt Rochester for U.S. Senate

Download full screenshot

Nice use of background photos. The transitions in the issues and latest updates sections are worth visiting the site to check out.

Bryon Best For Congress website screenshot

Bryon Best For Congress

Download full screenshot

A different approach to background photos that creates a very cool overflow effect.

Haley Stevens for Congress website screenshot

Haley Stevens for Congress

Download full screenshot

The colors here pop and they've managed to create a really eye-catching layout just using overlapping rectangles.

Madeleine Dean for Congress website screenshot

Madeleine Dean for Congress

Download full screenshot

A little more muted but everything about this site is so clean. The opaque design flourishes are subtle but keep things from feeling boring.

Josh Harder for Congress website screenshot

Josh Harder for Congress

Download full screenshot

Mostly included for the timeline on the Josh's Story page but the homepage layout is good too.

Tanya for Congress TX 27 website screenshot

Tanya for Congress TX 27

Download full screenshot

A lot to like here! The Texas flag as a book logo for a teacher, the ribbon/bookmark motif, and the angled backgrounds complementing both. It all flows together really nicely.

Sydney Kamlager – For Congress District 37 website screenshot

Sydney Kamlager – For Congress District 37

Download full screenshot

Another example of an angled background pairing well with a logo.

My sister went to the Culinary Institute of America and I've watched every episode of Top Chef and yet somehow I'm just hearing about the big type wall they have there? And it looks amazing and has a name like Gastrotypographicalassemblage?! Very disappointed with the people and television shows in my life.
Creative Market - Explore the World's Marketplace for Design
Advertisement
Creative Market - Explore the World's Marketplace for Design
Advertisement

Start Your Brand Boarding with This Free PSD Template

Brand board for laurenashpole.com

A few months ago, I started trying to do a little design cleanup on this site and it prompted me to finally do something I probably should’ve done way back at the beginning: create a brand board. Even though it’s a little late in the game, it still turned out to be a pretty useful task. It helped weed out some patterns and colors that didn’t quite mesh with the rest of the site. It inspired some new approaches. I’ve also started doing a stripped down version for creating promo assets for my fonts.

I started out with the free template from Nesha Woolery’s great post How to create a brand board but made some changes based on my own quirks and preferences. I found it easier to use Smart Objects for patterns, wanted a more widely available font for labels, didn’t need an extra section for alternative logos, etc. Since that original template was so useful as a starting point for me, I thought I should pay it forward and offer up my version for download.

The file is available as a PSD created with Adobe Photoshop CC 2018 and you can take a look at the layout below.

Download it here.Brand Board Template