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

Learning From Those Who Really Know

If I have to summarize my apprenticeship in one phrase, I would say that I spent three very productive months learning from a team of programmers who were not only incredibly talented, but also very giving.

I learned a ton really fast and that would not have been possible without a supportive team determined to help. INN's senior director of product and technology, Adam Schweigert, has written a post on apprenticeships. The INN tech team stays true to Adam’s vision. I have paired up with colleagues numerous times and have never had to worry about getting help.

In terms of projects, I spent most of my apprenticeship working on One-liner, a prototype funded by the Knight Foundation. One-liner is a web-based application that will deliver a single line of code responsible for loading specified third-party analytics services. Here’s a detailed description of what One-liner aims to do.

I researched third-party analytics services like Google Analytics, Facebook Pixels (Custom audience tool), Chartbeat etc. and studied their privacy implications, performance and prices. The idea is to provide information and suggest which services are best fits with the organization. We reached out to organizations to verify our research and also designed a survey to gather more information to be able to make suggestions.

We then created user flows, storyboards and mockups to prepare for the next step of building an app. We decided to build the app using Django as the web application framework and JavaScript for the front-end.

I benefitted from being part of the entire project from start to finish. I learned about what the entire process is for executing a web application like this is. Plus, I learned Django and worked with a great team!

But my learning was not just limited to picking up technical skills. I learned to be disciplined with my work schedule to enable working with a remote team. I learned how to communicate using Slack, Screenhero and other tools to make up for not having as much face time. I learned to manage time differences as most of my team was based out of different parts of the United States.

In addition to all this, I really enjoyed conducting the monthly book club and enjoyed an invigorating conversation about what the Internet is doing to our cognitive capabilities.

All in all, it was three great months, a ton of learning and fun!

Welcome Our Summer Apprentice: Gabriel Hongsdusit!

Gabriel HongsdusitWe're excited to welcome Gabriel Hongsdusit to the INN Nerds team as our summer apprentice!

Before joining INN as a summer apprentice, Gabe worked as a graphic designer for Center for the Art of Performance at UCLA. His design sensibilities come from a background in print and he's excited about learning to translate those skills to online platforms.

Gabe recently graduated from UCLA with a bachelor's in Linguistics and Mandarin Chinese. During his time there, he was involved with OutWrite Newsmagazine, America's first collegiate LGBT/Queer periodical, and led as Editor-in-Chief from 2014-2015. Through OutWrite, he fell in love with journalism, editorial illustration, and community engagement.

He starts with us in mid-June and will be working on an upcoming revamp of our style guide, contributing to Largo and helping our members and clients with various upcoming projects.

Welcome to the team, Gabe!

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.

Welcome Our Spring Apprentice: Sinduja Rangarajan

Sinduja Rangarajan

We're really excited to welcome Sinduja Rangarajan to the team as our spring apprentice.

Before joining INN, Sinduja was the 2015 Google Journalism Fellow at Reveal, where she reported, cleaned and analyzed data for investigative stories.

She has a bachelor’s degree in computer science from the University of Mumbai and is a recent graduate from the University of Southern California’s Annenberg School of communication and journalism where she is majoring in digital journalism.

At Annenberg, she worked as the multimedia editor at Intersections South LA and led their web development efforts on the Watts revisited project. Her work at Annenberg earned her a LA Press Club award and the Bryce Nelson award for distinguished journalism.

She’s originally from Mumbai and misses the crowded streets, ample public transportation and the street food there.

Welcome, Sinduja!

Five Takeaways From My News Apps Apprenticeship

My apprenticeship ends this week, after nine great months with INN. In that time I worked on seven website redesigns, many INN members' sites, contributed to Largo releases and worked on some of INN’s plugins, namely Link Roundups.

Screen Shot 2016-01-15 at 11.26.50 AM

I gained invaluable knowledge from my coworkers in pair sessions and improved my own self-learning. With the weekly INN Nerd Alert newsletter my coworkers shared great articles and I learned more about their interests. Each month the News Nerd Book Club exposed me to great ideas and discussions about newsrooms, audiences and web development. Plus every day working on INN member's sites I was exposed to terrific journalism and learned about the publishing needs of content creators.

(If the flexibility of remote work and all this sounds exciting to you, consider applying for one of INN's open positions)

Some important things I've gained:

Always be learning

One of INN's core values and one of mine as well. I've learned better habits and developed more informed opinions around publishing, design, development and business.

Documentation is more important than code

Frameworks, libraries and development techniques are all fleeting. Good documentation is timeless. Be kind to the soul who inherits your code — it could very well be you.

Responsive grids have made too many websites look alike

Web designers have gotten too good at following the rules.

Today a drive down Content Websites Blvd. is like passing through a bland subdivision: similar grid patterns, similar gardens of social media buttons and similar pairings of colors and fonts. Most of these websites aren’t bad, but most aren’t memorable.

Some of my favorite work was with INN members InvestigateWest, Midwest Energy News and New Mexico In-Depth, whose website redesigns called for a mix of unique and common design patterns to create usable, memorable sites.

Less is more*

In code. In design. In words. Often.

*Never in regards to tacos, documentation or testing.

Kindness, patience, and humor

In every job I aim to bring kindness, patience and humor. Being remote, it’s important to extend these things to yourself, in addition to coworkers and clients.

Thanks y'all and farewell

It's been a pleasure working with the INN Nerds and INN's members! I start a new position with TIME, Inc. and Fansided near Phoenix after the long weekend. You'll still see me in the #00-open-tech channel of INN's Slack org and @dryanmedia on Twitter.

ezgif.com-optimize
Deez Nerds helped me take flight, gonna miss 'em! See y'all round the friendly skies of the Internet.

INN Product and Tech Summer Apprentice Applications Now Open!

The INN Product and Technology Team is looking for one (or more) apprentices to join our team for the summer of 2016.

Unlike many other news/tech internships (why "apprenticeships" anyway?):

  • You'll get paid. We're committed to paying all of our apprentices a fair, living wage.
  • You won't do work no one else wants to do. Instead, you'll work closely alongside our regular team members on real projects for our members and clients.
  • You will learn a lot and make meaningful contributions. Some of your work will be determined by our needs at the time, but we also want to hear (and value) your ideas, help you build stuff, develop your skills and leave with projects ready to impress future employers.

Sound good? Read on.

About Us

As a team, INN works to advance new business and editorial models for public service journalism. The tech team supports many startups and small nonprofits that have limited technology resources. We also serve as a central tech community and knowledge hub for well-established newsrooms. We focus primarily on problems that we are uniquely suited to tackle at a network level, for example:

  • We host and support about 50 member websites using an open source WordPress-powered platform/framework we've built and maintain - http://largoproject.org
  • We build open source tools to support members' editorial work and presentation needs with the goal of making their work look as great as any of the largest for-profit newsrooms
  • We provide general technology consulting, training and develop resources to help increase the overall level of tech knowledge and ability across the network
  • We value diversity, work in the open, have a lot of fun and try to do everything we can to give back to the journalism/tech community (Read more about our team values)

You can learn more about us, who we are and how we work here on our team blog, our team docs and check out our projects on github.

About You

The requirements and responsibilities for our apprenticeships are flexible, but here are some skills/technologies/attributes that would be helpful to have:

  • Some familiarity/experience with user-centered design and standards-driven web development (HTML/CSS, JavaScript, one or more server-side languages such as PHP, Python or Ruby)
  • Able to work independently (particularly important for remote candidates) and communicate effectively with other team members and (where applicable) with member organizations and clients directly
  • Some experience with version control systems (mostly GitHub)
  • Experience making stuff with WordPress (particularly theme design/development)
  • Willingness to write about your work, create/improve documentation and contribute to the team blog
  • Ideas for what you'd like to learn/make/accomplish during your time with us

If you don't meet all of these requirements but still think you'd be a good fit for our team don't hesitate to apply. Generally we are looking for someone driven to make things better and you don't necessarily have to know all the things yet (we certainly don't).

The Details

Typically for our apprenticeships we prefer a 6 month commitment but the specifics around work schedule, number of hours/week and length are flexible.

Persons of color, women and members of other under-represented groups in journalism, media and technology are strongly encouraged to apply.

This is a paid (hourly) position (typically $15/hr).

We are a distributed team and this is a remote position. Previous experience working remotely would be helpful but we'll do whatever we can to help and support your transition if this is your first remote job. The team currently has members in Columbus (OH), Chicago, Champaign (IL), Kansas City and Phoenix.

INN is an equal opportunity employer and we are committed to creating a workplace where diversity is valued. In addition to federal law requirements, INN complies with applicable state and local laws governing nondiscrimination in employment in every location in which the company has facilities.

To Apply

Please read this post on our application/interview process and then send the following to adam@inn.org by February 15:

  • A brief resume/CV/portfolio
  • A cover letter (an email is fine) including the following:
    1. Why you're excited about joining us for the summer
    2. A few projects you're particular proud of (links to projects, your github repo, etc.) with a brief explanation of the role you played in each
    3. What you hope to learn/accomplish in your time with us

Apprenticeship Reflections

I make these reflections as my apprenticeship with INN ends. Over the past weeks, I have learned the many things one should learn in my position: good team communication, project management, and additions of new tech skills to my repertoire. And as if this summer did not bear fruits aplenty, from my teammates I have also learned about workplace flexibility and compassion.

Working remotely pushes me to be hyper-aware of communication. Without a doubt, there are many things that are more easily communicated in person, but if only I could share a glimpse of some of our Hipchat gif-sharing and taco-longing sessions, you would understand my preference for chat communication. Unlike real-time talking, chatting allows me to think through my ideas – particularly important for solving technical problems – and have a casual conversation with my colleague friends. This was my first experience of nearly 100 percent chat communication with a team, and I cannot overestimate how much it enhances team communication.

The on-point communication we practice amongst the INN Nerds team we also use with our clients. Working on two or three client project at once pushed me to take good notes and schedule project-specific blocks of time to be on top of communication for each project. With these practices, our team is able to work through blockers and move projects along.

And speaking of projects, I had the pleasure of working on superb data projects and learn a few new tech tricks this summer. For one, while I had used Python and worked with data science libraries such as sklearn and numpy, I was able to learn how to use Django to help create the New Mexico In Depth Capital Dilemma project. The Nerds team has also started a handful of other data projects with other INN members, and I am eager to see how these develop in the upcoming months. Finally, in the process of developing data projects, I learned about the importance of creating documentation and style guides, a practice many other tech teams should follow.

Certainly the things I will remember best about my apprenticeship will be the feelings of inclusion and flexibility fostered within the Nerds team. Working remotely made me more respectful of others' time and work-life balance. The INN Nerds team is a testament that remote work is feasible and that allowing an individual to find her highest-performing place of work is humane and optimal. I learned that it's acceptable and recommended to take time during the day to go out to lunch, an appointment, or go for a run. I’ve come to believe that the eight-hour workday is a vestige of times past, and that INN is a good example for nonprofits that may be interested in using telecommuting to attract the best people and decrease costs. For my part, working with the Nerds team made me reflect on compassionate workplace practices, something I hope to continue discussing and promoting in future work.

Please stay in touch through Twitter @DataDanaL and email danalitovsky@gmail.com.

An Apprenticeship Assessed

It’s been an exciting ten months working alongside the Nerds at INN. I’ve learned a lot since I started and had the opportunity to work on a lot of exciting projects in the process.

In particular, I built out two WordPress plugins designed to interface with Google’s tools for publishers. The first, DoubleClick for WordPress, serves DoubleClick for Publisher ads without dealing with the underlying ad codes. I later added built in targeting, making it easier for a small organization to sell and manage inventory without dealing with code.

The second, an Analytic Bridge for WordPress, connects with Google Analytics to pull and cache metric data for use. It’s currently used to run the popular posts widget on member site Nonprofit Quarterly.

I also did some early work integrating unit tests into our development process and built another WordPress plugin to serve quizzes in post sidebars. More recently, I rewrote a significant amount of our Link Roundups plugin (formerly known as Argo Links) to get it ready to submit to the WordPress plugin directory.

Between these projects I spent some time learning the nuts and bolts of Largo and work on a number of bug fixes and new features for the most recent releases. I also worked on a handful of help desk tickets and consulting related projects as the team got busier.

In the process I learned an invaluable amount about WordPress best practices, especially when creating plugins and building extendable themes. I also learned a significant amount about Google’s APIs, which offer an incredible amount of functionality, but not without a lot of time investment.

When I started my apprenticeship or daily scrum hangout consisted of only myself, Adam and Ryan. There’s at least eight faces in our morning meeting now, an incredible indication of how quickly the team I’m leaving today has grown.

As I start a full-time job building healthcare software for Epic Systems in July, I have every bit of confidence this team will continue the fantastic work happening now and deliver some truly powerful tools to non-profit newsrooms of all kinds.

I won’t be joining those morning scrum meetings anymore, but hope to still contribute a pull request or two from now and then. You can follow me on twitter @willhaynes, or send me an email at haynes24@gmail.com. I’m always happy to talk.