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.

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

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!

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.

Sketching

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.