Illustrating and Animating for the New Largo Project Site


Have you noticed something different about the Largo Project site? We redesigned it to make it more engaging and helpful to users.

This was also an opportunity for me to create a set of product illustrations and icons that would liven up the user interface. Here’s my process for creating those product illustrations.

Style Mapping

Illustration conveys information; what did I want to convey about the Largo Project? Given my experience working with the tech team, I wanted my illustrations to feel:

  • Friendly
  • Approachable
  • Hand-crafted

I brainstormed a few different styles and talked with our lead designer Julia.

After sketching and playing around with various ideas, I came up with these approaches.

Style exploration

We agreed that the “Abstract Matisse” style was fun, original and visually interesting. However, I was concerned that it required too much interpretation from the viewer. I also didn't want the illustrations to overshadow the copy surrounding it.

With that in mind, I decided to explore a more literal route.

Simple vector illustrations are the go-to for websites nowadays; just check the front page of Dribble. They convey information effectively and look good, but also tend to be devoid of any personality. I knew that this style would be a straightforward way to get the job done, but I also wanted to challenge myself.

My goal: to find an effective medium that incorporates the fun, loose style of “Abstract Matisse” but doesn't require too much interpretation. Here’s what I came up with:

The style was abstract enough to be visually interesting but literal enough that you wouldn’t need to guess what it represents. And with that style in mind, I created the following illustrations.



Animation can be that extra pop that brings standard illustrations to life. While creating various icons for the Largo site, I found an opportunity to incorporate animation to make the user interface more dynamic. It’s an added effort that reflects how the Largo framework is crafted with care.

I tinkered with CSS to display the animation on hover states, as seen below:

I didn’t want to incorporate animation into every illustration; that would feel too noisy and chaotic. Instead, I decided to add a subtle animation to our Support Page that would function as a nice surprise.

If you hover over the cat, she'll start wagging her tail!

Animated GIFS like these look complex but are actually quite simple.  A GIF is really just a series of still frames being played in a loop.

For this particular GIF, I only had to make 8 different frames to create the full animation. With each frame I made a slight modification to her tail. Here are the different frames.

I put the different frames together in Photoshop, added some background visual elements and ta-dah!

You can check out all of the illustrations, icons, and GIFS in action on the Largo homepage and support page. Thanks for reading!


Apartment Buildings & Cowboy Boots

Happy New Year!

Back in fall I created spot illustrations to liven up the “Resources and Guides” section for our re-design of Rivard Report. Here is my process for creating them.

The Purpose

I had to create two graphics that:

  • Represented the stories of Where I Live and Apartment Guide, respectively
  • Were visually cohesive
  • Fell in line with Rivard Report’s color scheme

I started by reading stories from both columns to get an idea of what the illustrations needed to convey.

Where I Live is a column of stories written by San Antonio locals about the places they live in. It is about the symbolic power of home. The column celebrates the quirky side of the city, focusing on the special relationship that people have with their houses and neighborhoods.

The Apartment Guide is a compendium to modern apartment buildings around San Antonio. It informs readers of buildings and complexes that reflect a metropolitan lifestyle, so the illustration needed to have an “urban” feel.


I had an idea of what the two sections were about; it was now time to start sketching!

I wanted to illustrate San Antonio’s urban landscape for the Apartment Guide illustration. I played around with drawing the city’s landmarks, but later decided that the idea felt too cliched and obvious.

Instead, I took inspiration from the guide itself.


The various apartment buildings highlighted in the guide all had fabulous architectural elements. I played around with those elements and came up with this starting sketch.

While I was researching the city’s landmarks, I came across San Antonio’s North Star Mall boots; the landmark felt quintessentially Texan and representative of the city. With cowboy boots in mind, I created this starting sketch for Where I Live.


Illustrator Magic

Now that the sketches were finalized, I recreated the images in Adobe Illustrator. This process required time and patience; the building shapes and spacing between objects had to be mathematically precise. Illustrator’s Pathfinder and Align functions were necessary in creating this.

Creating vector shapes is the boring and tedious part, but the results are oh-so worth it.



Color Scheme

The basic shapes were all created; now comes the fun part!


Color brings the illustration to life. I based the color palette on Rivard Report’s branding, which features a blue and orange that would contrast well and play off each other. One illustration would be mostly orange; the other mostly blue.



Additionally, I strategically placed small pops of blue and orange to create visual points of interest. This added to the richness of the illustration.


Texture and Gradients

At this point, the graphics were nearly completed; the only thing that remained was to add textures and shadows to further create depth and complexity.



I relied on this helpful guide to add texture to my illustrations.

All Together Now

Woo hoo! After staring at a computer screen for hours, the illustrations were finally complete. Here are GIFS summarizing the process.



And here are the illustrations in action on the Rivard Report homepage.


Buildings, Buildings, and More Buildings

As part of re-designing Mississippi Today, we were commissioned to come up with a new web banner for their site. Inspired by INN’s commitment to documentation and transparency, here is my creative process for creating that web banner.

The Original Web Banner


This was the original banner that they were using, which had areas that could be improved upon. The problems that I saw were:

  • The logo and the photo weren’t integrated. The separation between the two design elements was jarring.
  • The photo itself didn’t feel appropriate. Most of the photo space was taken up by dark tree branches, and the lighting of the State Capitol at night had a spookiness that didn’t make sense.

So I had to find a solution – something that incorporated the logo, looked modern, and felt representative of the stories that Mississippi Today reports. Here is how I went about that process.



It started with the basics: pencil, paper, and good ol’ Google Images. Here I tried to get a feel for the subject and develop a familiarity with the visual elements. I asked myself:

  • What qualities of the State Capitol building make it look like the State Capitol building? In this case, it would be architectural elements: windows, pillars, engravings, statues.
  • What’s working? This is a question I always go back to. In my experience, attempting to recreate what I envision in my head never works. I find it better to let the process lead me; the little mistakes and blunders along the way tend to lead to better ideas.
Messy but quirky

I wasn’t sure if the client wanted to go with an illustrated web banner so I did a quick freehand sketch. The proportions and lines weren’t drawn precisely but it has a breezy quality that gives it whimsy.

Banner #1 - A Starting Point



  • The logo is integrated with the banner and doesn't feel jarring.
  • The banner features the state capitol building (both old and new).


  • The dome of the building is hidden, so it isn’t specifically recognizable as the Mississippi State Capitol.
  • The illustrations and proportions aren’t precise.


The clients liked the illustrations! Woo Hoo! However, they’d like them to look more like the Missippi State Capitol. Which means...

Back to Sketching


Illustration is pain - especially when you’re drawing a building! You really just have to power through it. This time, I spent more time on making lines straight and getting the proportions right.


I don’t have formal architectural skills in drawing buildings, so most of the sketches still retained a looser, abstract quality to them.

One of the problems I encountered while designing the first banner and continued to deal with was finding a good white space balance. Given the proportions of the Mississippi State Capitol, I had to:

  • Crop the State Capitol Building while finding a way to keep it recognizable.
  • Find a way to fill up all that white space.


This time I got an idea - what if I used the various architectural elements as visual motifs? That would be a way to fill up that pesky white space. Back to more sketching.


Banner #2



  • It's overall more colorful, graphic and richly textured than the first banner.
  • The line work is more precise.
  • The colors are fun.


  • The design elements feel crowded; a lot is going on.
  • Theres's less emphasis on the logo because of all the visual noise.
  • I don’t like how the elements are cropped!

Screen Shot 2016-08-24 at 1.34.17 PM

The interplay of the architectural elements somehow gets lost in the process of cropping.


The clients wanted something more in line with the first banner illustration, which puts the logo in the foreground and the illustration in the background. They also like the looser brush style of the original illustration. Back to the (literal) drawing board!

More Sketching

I used a brush pen to outline my first illustration of the State Capitol building, so I knew to go back on that style for my next illustration. By this time, I was much more familiar with drawing the Mississippi State Capitol, which made drawing all those pesky windows and columns (slightly) less painful.


The final result has the "looser" quality of the first illustration but the precise proportions and line work of the second illustration. I added some color and the American and State flags to make sure that it was recognizable as the Mississippi State Capitol.

I was happy with the results. The style was reminiscent of Jean Jullien, a fantastic illustrator who juxtaposes bold brushwork with pops of color.

Now it was time to put this bad boy in a web banner!

Banner #3 - Is this "The One"?



  • The new illustration is more similar in style to the original illustration, but done with more precision.
  • The illustration doesn’t draw attention away from the logo.
  • There's enough white balance so that it doesn’t feel crowded nor too sparse.


  • Lines are precise but it overall lacks the free spirit of the original illustration.

The Verdict

The clients actually wanted to go back to the original illustration of Banner #1. Which happens! There’s something about the original illustration that’s charming and quirky, and it gets lost in the other two banners.

It's about enjoying the process as much as the results.

Here are the different explorations of the banner:


And here is the final illustrated banner in action:



My first illustration commission was a fabulous experience; I pushed myself to explore new styles and learned a lot in the process. I also improved my skills at drawing buildings - I'm totally adding "Professional State Capitol Drawer" to my LinkedIn profile.