I’ve finished gathering survey responses for the redesign of Sequential Philly, the comic artists’ community I started here in Philadelphia. It’s amazing how much not going in blind helps with focus. Who knew? (Literally everyone.) But here I am with a new Figma setup and a growing component library, tackling each page bit by bit.
I found myself hyper-focusing on the Shops page. It lists comic shops in the area, and only needs three main parts: the store name, the address, and the hours. The original page looks like this:
Note the old logo on the top left. That was thrown together years ago when I needed one, and has needed a rework ever since. Also note the very faint search bar on the top right that’s difficult to see, and the faint text on the page itself.
Two links to the social feeds sit at the bottom of the page. SP no longer has a Facebook, and I thought other variations might look better here. I’m also on the fence about this color scheme.
I started to switch up the style of the items, based on a style sheet I’d whipped up. This page is one of the less impactful ones, so I wanted to work out any styling issues here. Beyond simplifying the logo - and to be honest, it currently reminds me of a real estate logo and I don’t know if that’s a good thing - I wanted to use the negative space on the page in a more visually pleasing manner. The top left is the first attempt at this, followed by top right, and then bottom left. After trying to settle on a specific shade of aqua, I had a little fun with a very 1970s muted scheme I pulled off Coolors on the bottom right, but it fails hard on accessibility, so it’s out.
What I like: the stronger bottom navigation, the hierarchy growth (although it still needs work), and the negative space.
Perhaps the fact that this isn’t a big client project is what’s allowing me to futz around so much. I’m fine with futzing. It’s how I’ve learned programs in the past, and it’ll be how I eventually rebuild this site in Webflow. I am decidedly pro-futz.
…But yes, I should probably get a move on.