Andy's logo

Headshot

Andy Stewart

Design + Technology

Hi, I'm Andy. I'm a designer working at the intersection of brand and technology to develop future-focused visual systems — often for screens, sometimes not. I'm currently the Digital Creative Director at Turnstyle, a small-yet-mighty creative studio in Seattle, where I help bring life to brands through strategic, thoughtful design.

Portfolio 2020

May 17

Today, I officially switched my domain over to the website you're seeing now. I'm posting this in memory of the previous version of my portfolio. It wasn't much, but I do really enjoy the op-art eyeball animation I managed to pull off with a simple SVG and GSAP. RIP, little buddy. You were here for a good time and, to be honest, a longer time than I intended.

Check it out
Creative Coding ·GSAP

Teague Website 2023

May 15

Last week, we relaunched the website for our friends over at Teague, one of the coolest design consultancies in the biz. This was an interesting project because it was more evolution then revolution. We launched a previous version of their site 4+ years ago. Rather than throwing that work out and starting over, We spent much of our time rethinking and reimaging our original designs to make them more streamlined, resilient, and flexible.

Check it out
Case Study ·Web Design

Squiggler App

May 6

This personal project began as conversation with a coworker about a tool we wish we had for a branding project. We wanted a way to generatively create SVG squiggles that we could manipulate across different axes like sharpness, flow, size, etc. Developing it required a lot of mind-bending research into the technical details of how SVG paths are drawn and the math behind sin waves, but the result is a simple and easy-to-use single-purpose app.

Check it out
Web App ·Development

AllStock Figma Plugin

May 6
Promo image for a Figma plugin that searches stock image sites like Unsplash, Pexels, and Pixabay.

I have always found it frustrating that if you want to look for a stock image without leaving Figma, you have to choose a plugin specific to a single stock image resource. AllStock is a one-stop shop for finding and using high-quality images inside of your Figma projects, allowing you to browse popular free libraries like Unsplash, Pexels, and Pixabay all at the same time. Built with Svelte, Tailwind, and Typescript.

Check it out
Figma ·Development

Carbon Direct Navigation

May 1

For the team modal on Carbon Direct's sites, we wanted to leverage the best parts of single- and multi-page app experiences. When a team member's card is clicked, we intercept the navigation, update the URL bar, and open a modal displaying their profile without reloading the page. When the modal is closed, the previous URL is restored and, because we never left the page, we're able to seamlessly return the user to the exact spot they left off.

Case Study ·Web Design

GLY Page Transitions

Apr 29

I've personally trended towards simpler, quicker page transitions recently, but the ones on GLY's site are one of the features that people comment on most. I think it's the quick pop of color you get as the page animates off combined with the fact that the entrance animations happen relatively quickly.

Check it out
Case Study ·Web Design

Get Some Ipsum Figma Plugin

Apr 23
Mobile screenshots of the GLY website

This is my first Figma plugin—a simple, flexible lorem ipsum generator. It smoothes out some of the issues I have with other, similar plugins. Specifically, it runs through a bunch of custom logic before outputting the result to make sure that you end up with ipsum that look more like proper sentences (insofar as a dead language can look like English).

Check it out
Figma ·Development

GLY Web Mobile

Apr 18
Mobile screenshots of the GLY website

There's always a handful of modules where the responsive design approach isn't immediately obvious. Take the 'Constructive Optimism' component for example—you have a circle centered inside a div that in turn has text centered inside of it. Part of what makes it visually interesting is having two sides of the circle cropped off the screen at all times. It took a bit of wrangling to make sure that we were always cropping either the top and bottom or left and right, depending on the screen size.

Check it out
Case Study ·Web Design