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

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.

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.

apartment-guide-inspiration

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.

rivard-report-where-i-live-sketch

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.

apartmentguide_colored-outline-grey-bkgd-01

where-i-live-rivard-report-outline-01

Color Scheme

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

rivard-report-colors

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.

apartmentguide_colored-no-shadows-01

where-i-live-rivard-report-behance-noshadow-01

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

rivard-report-illustration-color-pop

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.

apartmentguide_colored_final-01

where-i-live-rivard-report-final-01

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.

apartmentguide

rivard-report-gif-test

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

rivard-report-screenshot

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

MSToday-banner-final-L_1170x240-1170x240-1

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.

Sketching

MSTodaySketch-1

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.
MSToday-Sketch-Original
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

MT-Banner-1

Pros

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

Cons

  • 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.

Verdict

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

MSTodaySketch

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.

MSTodaySketch-2

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.

Playing-Around

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.

Motifs-Collage

Banner #2

MT-Banner-2-01

Pros

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

CONS

  • 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.

Verdict

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.

MSToday-Sketch-3

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"?

MT-Banner-3

Pros

  • 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.

Cons

  • 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:

mt-optimized

And here is the final illustrated banner in action:

mississippi-today-screenshot

Conclusion

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.

State Capitol Buildings & Google: Apprenticeship Thoughts

One of the many drafts of the Mississippi State Capitol
One of the many drafts of the Mississippi State Capitol

 

It’s been almost two months since I’ve started my design apprenticeship at INN; I’ve had a fabulous time working in a team with people that are hard-working, smart, and generous. It’s been a lot of fun.

Here are some of my takeaways so far.

Take small steps

Learning to code and work in a developer’s environment felt daunting and foreign. I spent most of my work as a designer in print - how was I going to make that transition to web?

Mastery of any skill takes time. It’s less about ingesting as much information as you can and more about picking up bits of knowledge everyday.

Google is a developer’s best friend

Running into problems with Largo and Vagrant has been frustrating and at times, stressful. But pairing up with team members on Screenhero has taught me the importance of knowing how to Google.

Good developers don’t have all the answers, but they know how to find them.

Don’t be afraid to ask for help

Working remotely has its perks. As a lifelong commuter to Los Angeles, I love having the free time that would otherwise be spent sitting in traffic. But I’ve discovered that one of the cons of remote work is the awkwardness of pinging someone for help.

Not being able to physically see if team members were busy made me feel like I was bothering other people when I pinged them for help on things like error messages. But everyone on the team has been spectacularly kind and patient. RC told me something that stuck with me: It’s better to ask for help when you’re stuck than sit on a problem for three hours.

Ask for help – your team will be glad to help you.

The Mississippi State Capitol has 43 windows

So far I’ve revamped INN’s branding assets, started work on our style guide project, designed some swag, and worked on re-designing Mississippi Today. I even had my first illustration commission: illustrating a new web banner for Mississippi Today.

That means a LOT of sketches of the MS  State Capitol building. Stay tuned for a post documenting my illustration process for this project.

Until then!

I-Have-Confidence

Week 3: Getting to know Our Members, Largo, and Better Productivity

This week I spent a lot of time on our member sites getting to know our members and the work they’re producing. There is a lot of fantastic journalism happening here!

Member Stories

I found the Sunlight Foundation asking readers to "Help us find political dark money in your state”. I found Mongabay reporting on illegally sourced lumber from Peru. I even found journalism directly influencing policy in PineTreeWatchdog’s piece on "State to reconsider hiding oil train data" - and that’s just 3 articles out of the hundreds of stories that our members are reporting on each week!

Largo

In addition to diving into our member sites, I’ve also been getting more acquainted with our Largo theme framework that’s powering a lot of these news sites.

As I explore how our members and community users are using Largo to build their news sites, I’m gaining a lot of insight and ideas for the future of Largo. You’ll likely see my name pop up a lot more in the Largo github repo in the coming weeks, but in the meantime if you have any ideas or feedback for Largo, I’d love hear them!

Working Remotely

Il_pomodoroI’ve been really enjoying the transition to remote work, but I also spent a lot of time reading about the pros and cons before I jumped in. The one thing I read over and over again about working remotely is the importance of planning your day with structure. While I’ve tried to keep a decent schedule for starting and ending the workday, I did find that I felt like I needed a little more structure. To help, I turned back to a strategy I had tried out a few months ago - the Pomodoro Technique.

The Pomodoro Technique has you break up tasks into 25-minute segments, and schedules short breaks in-between to give your brain a chance to rest and recharge. The idea here is that you can heighten your focus during your work times, and compile your distractions and the mental rest you need into a smaller window, resulting in much higher productivity. I’ve been trying this out for a few days and it’s really helped - even just in allowing me to better plan how long I’ll spend on each task. If you’ve never heard of the Pomodoro Technique, or have but haven’t tried it out yourself, I’d highly recommend it!

Week Two: VVV & Lots of Required Reading

I'm just about to wrap up my second week here at INN, and I'm continually reminded of the importance of writing documentation.

This week I spent a lot of time working with our Vagrant setup, or as my friends put it, "How are things going over there in the matrix?".

I've been testing out VVV, a Vagrant setup that allows you to build virtual machines designed for WordPress work. Getting up to speed with this, and determining how it can work with our existing workflow has involved reading a lot of reading tutorials from others, and writing our own instructions for our unique workflow.

I could not imagine doing this with out the great support and documentation of others - something that I'm trying to emulate as I write our own documentation for using VVV.

Aside from that, I've been reading more of our documentation, getting to know our members, and I'm excited to explore more of our Largo sites next week!

Document Everything: My First Week at INN

One week on the books and I can’t believe it’s Friday already!

Allow me to introduce myself. I’m RC, the new Lead Developer here at INN. It’s hard to imagine that just a month ago I was meeting Adam through the WordPress community and starting to learn about INN. It was easy to get excited about the work we’re doing, and as a friend put it, “working on news stuff is, in my opinion, fantastically interesting”.

Since then, I’ve spent a lot of time diving into documentation. Much to the delight of this new guy, it seems like everything we do has documentation, from setting up my computer to what meetings we hold each week. I come from the agency world where the goal is to get something done as quickly as possible and move onto the next thing (Hint: we didn’t write much documentation). Now being on the receiving end of needing documentation and having it available to me, I’m quickly gaining an appreciation for its place in our work.

So far, INN is everything I had hoped it would be and more. It was easy to get a sense of what it would be like before I started, because everything was documented and available to me on Github. What isn’t documented is how great, and helpful, and friendly everyone who works here is. I’m so happy to be a part of the team and I can’t wait to dive into some code and see what we can build together.

A Month Well-spent

In my first month as a spring apprentice, I have spent time going through INN’s huge and impressive member sites, paired up with master coders in the Nerds team, read documents about their WordPress theme Largo, started work on Knight funded prototype One-liner - all from the comfort of my home (and sometimes my pajamas!).

I have been learning a lot and this is a blog post to reflect on some of the things that I have been doing.

Working from home: Comfortable but distracting

The experience of working from home has been a completely new one to me. Sometimes, it feels like the best thing possible - hop off from the bed and get right into work. I love the fact that I start really early (7 am!) and working from home allows me to do that. Starting early also means I can run errands at times when the shops are empty, another nice perk of working remotely. But over the weeks, I have realized that comfort is a double-edged sword. Working from home can be distracting at times and even lonely. Thankfully my remote team is very open, supportive and communicative. I also learned that being aware of distractions helps me to consciously manage it. The team's remote-working tips and organized outlook on this helped a lot.

Documentation: Can’t have enough of it

I spent a lot of time this month reading tons of material about INN - ranging from understanding their member sites to setting up the Largo theme to deploying websites. I was amazed at how cleanly and thoroughly everything was documented. On reflecting, I have realized that documentation serves many purposes - it allows collaboration and makes a resource less and less dependent on any one person’s knowledge. Newsrooms need to document more.

Unique work at INN: Providing support in a rapidly changing world

The news landscape has been rapidly changing in the last decade. While the big newsrooms are beginning to adapt to these changes and exploring new forms of storytelling, the smaller newsroom still need support transitioning into the digital world and help with ideas on how to make revenue. I realized that supporting newsrooms with Largo and building news applications is a much-needed service for the industry.

Drawing upon infinite wisdom: Asking for help

As a junior coder, one of the biggest roadblocks to start programming is the setup itself. Every command will lead to errors and the whole process can be frustrating. Working with experienced programmers in the nerds team made that a piece of cake. I paired with my colleagues multiple times every week and got free classes on Javascript and WordPress development. Having a team who can help you when you are stuck is a great asset and I learned that I shouldn’t shy away from asking questions.

All those who wander are not lost: What's ahead

I’ve started work on the Knight-funded prototype One-liner and I'll spending a chunk of time researching and building a prototype along with the other nerds. I'm excited and counting on the support and appreciation that I have been lucky to have so far.

INN Member Website Review: October 2015

In the realm of nonprofit news, the websites of INN members represent the front end of our digital presence and impact. As the newest member of the Products and Technology team — aka the Nerds— I’m working to get acquainted with our members and a site review seemed a good way to start. It’s also a useful every so often to see what we’re collectively doing on the web as a benchmark for future progress.

My review this month of the 100+ INN Member websites shows a very healthy community. I found thousands of examples of insightful reporting, excellent storytelling, and engaging design. As with any sample of 100 websites there are bound to be things we might improve.

I’d like to suggest three priorities we could work on together over the next year:

  1. Responding to the Mobile Challenge
  2. Going Social
  3. What is good design?

Responding to the Mobile Challenge

In State of the News Media 2015, Pew Research Center reports that “39 of the top 50 digital news websites have more traffic...coming from mobile devices than from desktop computers.” Yet a significant number of nonprofit news sites that excel in every other way are not optimized for mobile.

Converting a non-responsive website to cross-device friendliness can be very challenging. The solution used to be providing a “mobile” version along with the “desktop” version of the site. But now with so many different types and sizes of devices and displays, the better practice is to publish a single site for all devices using the techniques of Responsive Web Design.

The speed with which mobile devices have become part of our daily lives is unprecedented in the history of technology. In 1995 there were 80 million mobile phones users worldwide. By 2014 the number of mobile phones reached 5.2 billion, including 2 billion smart phones. The number of smart phone users worldwide is projected to reach 4 billion by 2020.

The smart phone is changing the way people engage with media and each other. In a recent Zogby Analytics survey of millennials, 87 percent said “my smart phone never leaves my side.” 78 percent spend more than two hours a day using their smart phone and 68 percent prefer using their phone over a laptop or desktop computer.

But it’s not just younger demographics who are increasingly going mobile. Since 2008 time spent per day with digital media has more than doubled for all U.S. age groups. As highlighted by Mary Meeker in her Internet Trends 2015 report, almost all of this increase is from media consumption on smart phones.

The integration of smart phones with everyday life is rapidly changing the way people discover, consume, and share news. The urgency of addressing any mobile gap can’t be minimized.

Going Social

Social media have become increasingly important for discovery and sharing of content, with nearly half of digital news-consuming adults saying they use Facebook every week to get news about government and politics. But in some cases social media integration on news sites remains problematic, with bloated tracking scripts or missing Open Graph metadata needed for effective engagement.

I suspect many of us are concerned about the intrusiveness of the big social media players. It’s in their interest to make it easy to share our content on their platforms. This helps us reach new audiences and expand our news impact. But we also understand that their business model is predicated on harvesting as much personal information as possible about the people who visit our websites.

Many of the free widgets we embed on our sites make it easy for people to share our content, at the cost of exposing data about their interests and behavior. Social widgets can also slow website performance. The leading social media players and technologies keep changing. In this environment, developing best practices around social media is very challenging.

What is Good Design?

I’ve been a news professional for 28 years, and a web designer for the past 15. I think design without good content is wasted space. Good reporting on a flawed website can have great impact. But good design applied to great content can make a huge difference.

Ideas about what constitutes “good web design” have changed dramatically over the past decade, and will continue to evolve over the next. Fashions aside, we have learned fundamental lessons about what works for website users. We know people don’t like feeling lost or confused. They don’t enjoy struggling past obstacles to simply read a story.

Website designs can inflict many distractions on visitors in an effort to control their attention. Sometimes it’s important to get across (e.g.) the idea that our organization needs their support. But if we do this in a way that frustrates our users, we’re designing at cross purposes.

Each of us understands this from our own experience. We decide every moment whether to stay on a web page or direct our attention somewhere else. Something is always competing for our attention. As storytellers and designers, our job is to win that competition.

We can help our audiences by providing a distraction-free space to engage with our content. I like the phrase “radical clarity” as an aspiration for our websites, especially story pages. Mobile has forced us to rethink designs that present too much information for a small screen, and we need to carry that thinking over to larger displays as well.

Solving everything now

Building anything of enduring value almost always takes more time than you want it to. The corpus of INN Member websites represents a tremendous amount of work by their creators, and great value to their audiences. As a website builder I know that work is never done.

My hope is that a year from now we can repeat this review and see clear signs of progress, especially in the areas of mobile friendliness, social media optimization, and clarity of design. The INN Nerds will do what we can to help. And I'll be writing with more details and actions we can take to address these priorities in the coming weeks.

What You Don’t Know Can’t Hurt You…Unless You Don’t Ask

We were talking with a respected INN member during the Nerds’ open office hours last week. While asking a question about how to do something on his site, he said a couple of times that he doesn’t know much about website coding. But it struck me that he clearly does know a lot, he just didn’t know the answer to this particular question.

I have seen this behavior in many other people, and also in myself. When talking with people we believe know much more than us about a given topic, we sometimes minimize our knowledge up front.

I suspect we do this because we have learned from past experience that people sometimes use their status as experts to belittle us. This kind of behavior is common, especially in technical fields. Saying “I don’t know much” is a smart strategy if we suspect the expert will act like a jerk in response to our question. For many of us it's a defense reflex.

I can safely say that none of the INN Nerds will ever treat you this way. We welcome questions from all members and constituents from any level of technical knowledge, and it’s in our DNA to not act like jerks.

Not acting like a jerk is also hard-coded in the INN technology team manifesto, which outlines how and why we work. We hold ourselves accountable to this, and you should, too. Here are a few excerpts:

  • We’ll invest in education: creating curriculum and training for members, investing in our apprentices/students, and pursuing continuing education opportunities for ourselves.
  • We will be open to new tools and processes, resisting the stale comfort of “this is how we’ve always done it.”
  • We won't use snark or pedantry to exclude people from conversations.
  • We’ll never judge you or shame you for not knowing something.
  • We won’t feign surprise or jump into conversations with Well, actually...
  • In emergencies, we will send pie.

Because news technology is changing so rapidly, there are many reasons for each of us to feel we don’t know as much as we should. The pace of change is also precisely why we should ask many questions, even at the risk of exposing what we don’t know. Our guest during office hours did exactly that, and deserves to have his question (and his many other contributions as a professional) treated with respect. We will always do that.

When it comes to the web and digital technology, each of us is somewhere on the learning curve. The value of a community like the one we’ve got is that we can help each other gain the knowledge we need to improve and sustain our work. At a time like this, we should make extra efforts to communicate and collaborate.

So please use the Largo Help Desk for any site problems or requests, email us at nerds@inn.org for anything general, and sign up any time for open office hours. We’ll never shame you for not knowing something, and might even have some dumb questions ourselves.