shannon makes things

Here is a snippet of a project I am working on – redesigning the navigation scheme for Canine to Five (it’s for fun, they only pay me to hang out with the dogs). 

The current navigation for Canine to Five’s mobile website features a hamburger toggle and side drawer with way too many categories and multiple submenus. Not including the “home” button, there are ten – one of which is a “select” location indicator. Why this matters, I’m not sure. If a client is interested in making a daycare or boarding reservation, the location selection should be available as a choice in the form. However, choosing your location will filter blog posts to include your “home” daycare’s Dog of the Day and associated pool of Flickr photos. 

I decided to turn it into a button at the top right wherein clicking it will allow you to change your location and access a Google menu for easier navigation. I narrowed the overall menu selection down to the six most crucial and presented it as two designs for now – one with a springboard and the other a hamburger toggle (it’s in its “X” as in “expanded” state in picture two). The toggle, as expected, pushes the content down but there’s no reason why it can’t overlay instead. Ideally, I would like to generate two or three more alternative navigation ideas.

I stuck to the color scheme and love of Century Gothic already alive and well at Canine to Five but added a few icons, serif fonts, and Helvetica for readability in the body text. I really like how these are turning out and I’m excited to post more and link the interactions from one screen to the next. 

I’m in the process of creating my personal website/portfolio and figured I might as well share some of the helpful links and cool stuff I’ve come across while getting my shit together.

Emoji CSS  - I feel like this is the easiest way to feature emojis on your site without wanting to light yourself on 🔥.

AND if you’d like to pop a social media icon onto your page W3C has an overview of the Font Awesome Brand Icons. If you’re extra here is a list of the associated HEX color codes.

Typing animation using CSS and a smidge of JS - If you haven’t picked up a copy of Lea Verou’s amazing CSS Secrets you are missing out. I snagged the code and plopped it onto my site as an indirect “call to action” animation.

I can’t handle how much fun this color scheme generator is. I’ve hit my spacebar like 23985354724 times.

I didn’t know about the site Little Big Details until I started reading Microinteractions by Dan Saffer. It’s good at highlighting all of the microinteractions I miss on the reg.