Nerd Alert 127: The magic word is nerd


RC: For an Inclusive Culture, Try Working Less.

Julia: The Stanford Open Policing Project released data on millions of state patrol stops – explore the data and review their findings..

Gabe: Here is an excellent curated list of all resources relating to Sass and SCSS, including frameworks, style guides and animations. (s/o to Aleszu for the link idea).

Kay: The case for why you need to think about author-focused design (instead of the typical reader-focused design).

Ben: The most interesting part of this list of 9 ways to end your stories is that they’re not just applicable to journalism. Good writing is good writing.

Inndy: This is what happens when you teach an AI to name guinea pigs.


Our projects, manifest

Who’s behind the awesome INN tech team? We’re introducing a new series of blog posts for you to get to know us better. Our first post is about Ben Keith, our News Apps Developer.


Stay in the know

June 27: Last day to submit paper to Visualizar17: Migrations

June 27: Last day to apply for an Open News Ticket+Travel Scholarship

June 27: Curso de Realidad Virtual para Web (Online)

June 29: Google Amp, APIs and Tagging: Future Proofing Content @ the Trib (Austin, TX)

June 30: Last day to apply to be an Internet Freedom Festival Fellow

June 30: Last day to apply to Lenfest Institute’s Entrepreneur in Residence program and Local News and Information Innovation grants


The Lens published a story tracking how many school lights work in New Orleans.
The Texas Tribune looked at which Texas bills passed and which failed.

The Knight Foundation has announced support for 20 projects aimed at increasing trust in the news and improving the spread of accurate information. Read more about the projects here.


We love you back

Please consider supporting this newsletter with a donation to INN.

Or, if you'd rather contribute content over cash, be a guest contributor! Read more about that here and shoot us an email at if you're interested. We'd love to hear from you.

Thanks much!


Good jobs with good people

NPR is hiring a Technology Manager, Web Developer, and Mobile Developer.

The University of Maryland is looking for a Lecturer on News Interaction Design and Development.

Vox is looking for a Front-End Engineer (Audience Development) and Senior Designer.

If you're looking for general jobs in nonprofit news, check out the main INN newsletter and sign up here to get it in your inbox every Tuesday. Two INN newsletters are better than one!


Gather ye rosebuds

READ: The Future is Not College But Compassion ❤️

LISTEN: Roxane Gay on Fresh Air ?

EAT: Miso Glazed Tofu ??

DRINK: Shiso Fine (Do-lang, Do-lang, Do-lang) ?

WATCH: How to do 12 different accents ?

And now, for my next trick...

Email is a Sacred Space: Designing for Newsletters at SNDCLT 2017

In April I had the chance to attend Unite + Rebel, the Society for News Design’s annual conference in Charlotte, North Carolina. Here’s a take-away from one of the workshops I attended.

Newsletters are an increasingly effective way to distribute your content and build a brand – so what should you keep in mind when designing and writing for newsletters? Quartz’s Priya Ganapati offers some best practices to build your audience and make your newsletter effective.

Don’t resort to clickbait

Newsletters are not about the clicks. Your main goal is to build a relationship with your audience ー and that comes before circulating your content. Ganapati stressed that email is a sacred space. People use email for personal reasons, like communicating with family and friends. It’s important to not litter that space with clickbait.

You should also consider where you want your newsletter to be consumed. The Quartz Daily Brief is an effective newsletter because it can be consumed entirely inside the inbox. Readers have the option to visit articles, but they can also receive all the relevant information from just reading the newsletter itself. It’s quick and easy consumption.

Lenny Letter is another example of a newsletter that lives inside the inbox. The format is simple but effective. Readers can read one article entirely within the newsletter.

Establish a template for your readers and stick with it

Newsletters are habit-forming. Structure your newsletter so that your audience will expect to see the same sections in their inbox.

Ann Friedman’s newsletter is a great example of this – it’s the same format every week. You want subscribers to get used to a pattern. In Friedman’s case, she has sections dedicated to her writing, curated links, GIFs and more. She’s even managed to monetize members-only sections in her newsletter that require a paid subscription.

Prioritize mobile and simplicity in your design

Newsletters should not have too many images because there is always the risk of visuals not loading. This is especially important because newsletters tend to be consumed through mobile devices.

Visuals should be chosen carefully to complement the surrounding content, but they shouldn’t act as the content itself. Text should be legible, and the overall layout should be simple enough to work within the constraints of the email format.

According to these principles, Thrillist’s newsletter is arguably a poorly designed newsletter. There’s no content that lives within the email itself, and readers have to click links that take them outside the inbox. Images take up too much real estate, are slow to load, and make the newsletter feel like clickbait.

With a gross open rate of 70 percent, New York Times newsletters are notoriously effective – and this NYT Cooking letter is a great example of how to use images appropriately. The template consists of only two parts: a short essay, which sometimes includes a recipe that lives inside the inbox, and a handful of curated recipes. Images complement the surrounding content but are not necessary to gain value from the newsletter.

What makes a signup page effective?

The first barrier to building a newsletter audience is collecting emails. Below are some best practices for structuring your signup page.

Less is more

Fewer fields lead to higher subscription rates. If you want more demographic information, consider making that an option for the subscriber but not a necessity.

Quartz asks for the subscriber’s demographic information only after the subscriber has provided their email address. Ganapati said there’s a 50 percent drop off from people who sign up for the newsletter to readers who continue to put in their demographic information. While that loss is substantial, it’s still better than losing potential subscribers by overwhelming them with too many form fields. Getting the email address is the first priority.

Offer content previews

Newsletters are about cultivating a specific audience and building a special relationship. You don’t necessarily want everyone to sign up for it. Offering a sample newsletter on a landing page could be a potential way to entice more subscribers and screen out people that wouldn’t be interested in subscribing.

The New York Times provides a sample for almost every newsletter they have, which gives the subscriber a preview of what they’re getting into. You could also provide a link to an archive.

Keep the readers’ needs in mind

The key to writing and designing for newsletters is to prioritize the needs of the reader. Focusing solely on circulating your branded content will only make your newsletter seem like clickbait. The best newsletters use curated content to create a specific user experience that aligns with the brand.

Designing with these principles will ensure that your newsletter breaks through the noise and engages and builds your audience.

Design Your Stories with Transparency: The Trust Project at SNDCLT 2017

Last week I had the chance to attend Unite + Rebel, the Society for News Design’s annual conference in Charlotte, North Carolina. It was a wonderful opportunity to engage in conversations about design’s role in journalism and innovations in visual storytelling. Here’s a take-away from one of the workshops I attended.

What is design’s role in building the public’s trust in news? That was the primary question raised by Sally Lehrman of The Trust Project, an organization dedicated to deciphering technology’s role in ensuring trustworthy journalism reaches the public.

Structuring the News Page with Integrity

We know that journalism is distinct from other kinds of information on the web. Signalling that stories are produced with a commitment to transparency and integrity is crucial to building a relationship of trust.

Above is a live prototype from The Trust Project’s design workshop that demonstrates one way newsrooms could potentially integrate transparency within the article page. The prototype shows how you can integrate information like named/un-named sources, corrections, and citations in an easily accessible manner within the story.

One Size Doesn’t Fit All

News consumers are not a monolith. To rebuild trust in the news, one must also engage different types of users. Lehrman identified four categories of news readers:

  1. The Avid reader actively curates personally relevant news and spreads it on social media, believing that being uninformed is dangerous.
  2. The Engaged reader believes that news should be an equal opportunity offender: If no news offends you, it isn’t doing its job. These readers seek out quality local news.
  3. The Opportunistic reader thinks that most news is trying to sell a viewpoint or agenda. This reader consumes news in a much more passive manner – scrolling through Facebook, listening to the TV during lunch breaks – as opposed to the Avid or Engaged.
  4. The Angry and Disappointed reader feels disconnected and disappointed with news media and has the least trust in the news.

What Do Readers Want?

After researching different types of news consumers, Lehrman summarized what readers seek from the media.

  • Transparency: To build a trustworthy relationship with your readership, you need to share some information about your organization itself. Readers need to understand your positioning and agenda – they want to know why you publish the stories you do.
  • Reliable Reporters: Readers need to have confidence in the person telling the story, and they want to know about a reporter’s history, expertise, and biases.
  • Variety of Perspectives: While the general public frequently gravitate toward stories that reinforce their own worldviews, readers recognize that stories with multiple perspectives are more trustworthy. It’s important for readers to know why the story is relevant to them and to understand how their communities are affected.
  • Credible Sources: Readers check for the source of information to verify if a story is authentic. They want to know where the information is coming from and why those sources were chosen.
  • Participation: Readers want to be included in the process and make their opinions heard.

Trust Indicators

With these needs in mind, what can news organizations provide? Lehrman identified eight actionable trust indicators. These were defined through the Trust Project’s collaborative workshops with over seventy news organizations and around one hundred and fifty people.

  • Best Practices: Provide resources like an ethics policy behind your organization and word choice explanations. An example might be explaining why your organization uses the word “migrant” over “immigrant.”
  • Author Expertise/ID: Provide details about the reporter, share background information about their expertise, and acknowledge any biases they have. Let readers know who the author is and show them information about other projects the author has produced. A simple way to do this is having the byline be linked to an author and story archive.
  • Label Story Type: Clearly identify different types of content to distinguish reports from opinion.
  • Citations and References: Give readers access to the sources and facts. Include the reasoning behind why they were chosen.
  • Methodology: Readers want to know how the story was created and what editorial choices were made. Tell the story behind the story.
  • Location/Local: News can have a greater impact on communities if readers know which stories are local to them.
  • Diverse Voices: Prioritize diverse viewpoints, and pay attention of which voices are included or missing from the story. Include viewpoints from multiple political or ideological perspectives, and make a point to include perspectives from women, people of color, and other underrepresented groups.
  • Actionable Feedback: Foster participation after publication by creating a space for dialogue for the reader to contribute to the story. Let readers reach out to the story’s producers and share their opinion. An example could be a Slack channel letting readers chat directly with editors and authors.

The Trust Mark

Providing these indicators on the story page is a challenge – how can we make this information easily accessible to the reader but not be overwhelming? One possible solution is placing a “Trust Mark” on the story page. The mark would signal that the story was produced with quality and transparency. Readers would be able to click on the mark to see the different trust indicators.

Questions, Questions, and More Questions

The end of the workshop was opened to the audience for suggestions, reactions, and ideas. Some of the topics raised included:

How effective is the trust mark? If people already don’t trust the news, will a trust mark do anything to change their opinion? Fake news sites are implementing increasingly sophisticated designs on their homepages, making the distinction between real news and fake news even harder. What’s to prevent them from creating their own badge of legitimacy?

How do we increase news literacy? Building a relationship with your readers requires that people read more and develop skills for discernment. How can we educate the public on these skills?

And the big question...

How do we spread real news? Publishers frequently focus on producing news rather than circulating it. It can be a challenge to encourage real news to spread across the ideological bubbles perpetuated by social media, but The Trust Project is providing actionable solutions to help newsrooms foster deeper audience engagement and highlight the competency, ethics and dependability of their work.

Nerd Alert 112: La La Labs


What we're reading this week

Ben: Today’s link is a very long post, and it opens with an anecdote about how a comic author was almost driven to suicide by people who objected to his words, but it’s worth a read. “Empowerment” emphasizes identifying ways that people have agency and can change things, rather than telling them that everything is hopeless and run by a flawless conspiracy.

Gabe: Side projects give interviewees a chance to talk about their passions, how they work, and how they manage their time. What are questions you should be thinking of when you talk about your side project?

 Julia: This interactive graphic looks at gender equality and dialogue in 2016’s highest grossing films. And here’s a look at how it was made.

 Kay: Listen up, video journalists! Make sure to check out this app reviewed by Poynter. It gives you more control over the camera in your phone and lets you monitor your audio with headphones while filming.

 RC: A huge step forward for collaborative editing in WordPress: Google Docs integration is now available on and via Jetpack.

 Inndy: Who’s a good dog?


Are you shining just for me?


This week the team got together in person for an INN staff meeting in LA. It was a great way to set goals for the future, collaborate on Largo, do some team building, and plan for INN Day. It was an incredibly productive week. Go team!


Work we admire by our journalism peers


OpenNews recently introduced their field guide to open source in the newsroom. The guidebook walks you through the entire open-sourcing process, from getting your first release to handing off your project. If you’re interested in contributing, check out this guide.


Stay in the know

Sunshine Week starts this Sunday across the country, spanning from San Francisco to Minneapolis. Check out all of the panels, workshops, and events about the latest development in freedom of information resources.

MuckRock will be hosting two free events in Boston on all things FOIA-related.


Good jobs with good people

INN is hiring a Grant Officer & Writer and a Director of  INN Labs.

The Center for Public Integrity is hiring a News Application Developer/Data Journalist.

The Marshall Project is hiring for a Multimedia Editor, an Immigration Reporter, a Membership Manager and Communications and Development Associate.

The Lens is looking for an Environment Reporter.

Mother Jones is hiring for a Facilities Manager, a Managing/Production editor and for a Mother Jones Documentary Film Residency.

ProPublica has a bunch of job openings for their new Illinois office.

NPR Visuals is hiring a Summer Intern.

VTDigger is hiring a Chief Innovation Officer and a Social Media / Community Editor.

The Better Government Association (BGA) seeks a Development Assistant, a Board Liaison & Development Associate, and has Internships available.

Reveal is hiring an Investigations Editor.

The Sunlight Foundation is hiring an Operations Manager.

Mississippi Today is hiring a Product/Web Designer and Developer.

Chicago Public Media is hiring a Developer.

The Tor Project is seeking a Communications Director.

Vox Media’s Storytelling Studio is looking for a Front-End Designer.

If you're looking for general jobs in nonprofit news, check out the main INN newsletter and sign up here to get it in your inbox every Tuesday. Two INN newsletters are better than one!


We love you back

Please consider supporting this newsletter with a donation to INN.

Or, if you'd rather contribute content over cash, be a guest contributor! Read more about that here and shoot us an email at if you're interested. We'd love to hear from you.

Thanks much!


Gather ye rosebuds

LISTEN: It’s been 11 years since we started taking the hobbits to Isengard.

EAT: Laksa in 30 minutes.

DRINK: Kombucha cocktails. Best drunk before yoga.

READ: 3 ways to fix a broken news industry.

Shake it.

The Ghost of Print Still Haunts Us: Analyzing 7 Different News Homepages

My morning ritual involves visiting my daily rotation of websites, including The Atlantic, Vulture and Buzzfeed. How are these homepages designed to make their stories more easily accessible and appealing?

This is a question that’s been on my mind recently. The INN tech team has been working hard on planning Largo 2 to make it a more powerful WordPress framework. One area that we’re working on is how to make Largo’s default theme more customizable to different newsrooms’ needs.

I’ve started looking at various mainstream news homepages to brainstorm possibilities for Largo’s new default theme. Specifically, I’ve analyzed the homepages for The New York Times, The Washington Post, Vice, Eater, Vox, Vanity Fair, and New York Times Magazine. Here is what I’ve discovered.

Old Print vs Modern Blogs

After creating wireframe mockups of these 7 websites, I found that I was able to separate them into two groups: the traditional websites (Washington Post and New York Times) and the modern ones (Vice, Eater, Vox, Vanity Fair, and NYT Mag).

The Ghost of Print

Unsurprisingly, the Washington Post and New York Times are very similar in layout design.

These sites are the web versions of what you would find in front of your doorstep (in 1996). Compared to modern news sites, there is much more content on these homepages, and most of it is stuffed “above the fold.” A reader can take a glance at the homepage, briefly read all the headlines and then click on stories that interest them.  

The goal is to give the reader a summary of what’s going on that day.

The disadvantage to this layout is that the homepage can feel cluttered and overwhelming, given that there’s so many stories competing for your attention.

Modern and Edgy

On the other hand, the modern news sites functioned like blogs.


These layouts are much more focused; there are a lot less stories and content “above the fold.” Rather, certain featured stories are given space to draw attention to themselves.

Unlike the older, traditional layouts, these websites are designed to get readers to click on the latest content. The reader does not get a comprehensive view of the day’s stories that the New York Times  and Washington Post provide.

With this dichotomy in mind, let’s get into the specifics.

Layout Differences

The goal of these traditional news sites is to include as much content as possible above the fold, so they range between 4-column to 6-column layouts.

Whereas the modern sites tend to have only 2 to 3 columns.

Design Choices

The traditional websites are quite conservative in their design choices. Color schemes tend to be grays, blacks, and whites (the Ghost of Print coming up again) and main navigation bars are simple.

Red is used sparingly

The modern websites take a lot more design risks. For example, Eater has their main nav under their featured stories, something that I haven’t seen anywhere else.

Vox places headers over images and frequently uses their signature yellow.

Featured Stories

On traditional homepages, featured stories are highlighted in very subtle ways. On the Washington Post, the header size is what draws your eyes to the feature.

Font-size is 30px, to be exact.

Whereas in modern news sites, featured stories are emphasized through size and white space.

Special shoutout to New York Times Mag, which always has visually dramatic feature stories that make my heart swoon.


Analyzing these different approaches to layout design will continually be helpful to us as we start to brainstorm the architecture of Largo’s new default theme. We want Largo 2 to have powerful design and customization capabilities to make your news website look just as polished as these 7 homepages.

Stay tuned for future blogposts on repeating UI patterns, widgets, and much more!

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!


February Book Club Selection: The Journalist and the Murderer

the-journalist-and-the-murderer-1Our February News Nerd Book Club selection is The Journalist and the Murderer by Janet Malcolm.

From the description on Amazon:

A seminal work and examination of the psychopathology of journalism. Using a strange and unprecedented lawsuit as her larger-than-life example — the lawsuit of Jeffrey MacDonald, a convicted murderer, against Joe McGinniss, the author of Fatal Vision, a book about the crime — she delves into the always uneasy, sometimes tragic relationship that exists between journalist and subject. In Malcolm's view, neither journalist nor subject can avoid the moral impasse that is built into the journalistic situation. When the text first appeared, as a two-part article in The New Yorker, its thesis seemed so radical and its irony so pitiless that journalists across the country reacted as if stung.

The referenced New Yorker article can be found here.

We'll be meeting via Zoom video call at 1 pm ET on Wednesday, February 15.

Here's the call link or you can join by phone at (408) 638-0968, meeting ID: 260 181 890.

Hope to see you in a few weeks!

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.


Nerd Alert 100: Happy 100th Nerd Alert!


What we're pondering this week.

  Adam: This week the American Press Institute published some helpful guidance on producing longform stories. Among the topics they cover: how to choose which stories deserve special treatment, how to involve your community in the story process before, during and after publication and more.

  Ben: Do you look at links in your emails before you click them? From Yahoo, how to detect a phishing email. I found one in my inbox this morning.

  Gabe: Asana has a detailed rebranding story that features sky gradients, unicorns and Predator's aiming laser of death.

  Julia: An Advent calendar filled with data journalism tools, brought to you by Journocode.

  RC: If you’re looking for something lighthearted and uplifting to read on a Friday afternoon, then Brace yourself: the most disruptive phase of globalization is just beginning is probably not it.

  Inndy: Wah! Wah! ??


Our projects, manifest

Adam joined 10 other contributors in D.C. for a special OpenNews code convening. They worked on building the first draft of a guidebook for open-source newsroom code. They’ll hand over the draft to a team of remote editors and eventually publish it through Github. Stay tuned!


Work we admire by our journalism peers

Congressional Research Service reports are an effective way to receive unbiased information on political issues. Back in October, Daniel Schuman of Demand Progress wrote about the importance of making these reports publicly available. So far has published 8,299 CRS reports. You can support their work here.


Good jobs with good people

ProPublica is launching an Illinois unit and will be looking for investigative journalists.

NPR is looking for a Training Manager.

Mother Jones is looking for a Web Developer.

INN is hiring a Support and Community Lead.

If you're looking for general jobs in nonprofit news, the main INN newsletter had over 18 job openings this week. Check it out and sign up here if you'd like to get that in your inbox every week. Two INN newsletters are better than one!


Gather ye rosebuds

LISTEN: Schubert: Piano Trio in E-flat major, Op. 100.

WATCH: This corgi puppy's 100 happiest moments.

EAT: 100 ways to use beer in food and drinks.

DRINK: The Diamondback – a 100 proof cocktail.

Keep it ?

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.