Posts tagged design

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

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

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

Download full screenshot

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

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

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

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

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

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 Mid-Century Posters & Retro Shapes 3 Preview

Haven't done one of these in years but this free drop (week of 10/23/23) from Creative Market is pretty great. Mid-Century Posters & Retro Shapes 3 by LEROY Design.

Grainy Gradients | CSS-Tricks

Browse through Dribbble or Behance, and you’ll find designers using a simple technique to add texture to an image: noise. Adding noise makes otherwise solid...

Love this grainy gradient effect. I never have figured out how to do it in Photoshop but maybe CSS and SVGs are more my speed.

Text for Proofing Fonts | Fonts by Hoefler&Co.

A farewell to The Quick Brown Fox....

I’m finishing up a font with some extremely finicky kerning so this list of words with awkward letter combinations from the Hoefler&Co. blog is fantastic. There’s even a Github repo with PDFs.

Fontjoy - Generate font pairings in one click

Fontjoy helps designers choose the best font combinations. Mix and match different fonts for the perfect pairing....

This a great tool for testing out font pairings and exploring new fonts. Plus, the machine learning details are super interesting.

Blobmaker - Make organic SVG shapes for your next design

Make organic SVG shapes for your next design. Modify the complexity, contrast, and color, to generate unique SVG blobs every time....

This is a very cool tool for generating organic looking SVG shapes and I wish I’d known about it before making the blobs for this site from scratch like a sucker.

Modal vs Page: A Decision Making Framework

Have you ever wondered if your design should just be on a page instead of in a modal overlay? Here’s a framework to help you decide....

I’ve implemented so many modals over the years but never really stopped to think about why. This when to use a modal flowchart is pretty interesting.

Start Your Brand Boarding with This Free PSD Template

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

These free Stipple Shading Photoshop Brushes are an awesome freebie from Spoon Graphics. I really love this effect but it’s always seemed so hard to do.