Francie Wilhelm: NSPA Designer of the Year Portfolio
During my first year on the staff for The Shield, I was not what anyone would call a designer. My print pages were copy-and-paste templates that barely passed the dollar bill test, the most basic of design tests. My most groundbreaking ideas were the inclusion of a cutout or a graphic headline. Writing stories was easy, but presenting them? That was my worst nightmare. So it made sense to me when my adviser gave me the role as one of the online managing editors for my second year on staff; print was not my forté, and I felt confident that I could contribute to the success of The Shield online. How hard could the website be when there was no LucidPress to contend with? I had no idea that design was in my job description, much less that it would become one of my strongest skills over the course of the year.
I quickly learned otherwise as story after story came to me to be published on the site, and I found that none of the web drafts looked quite right. What came naturally to me in putting together a post was not as reflexive for everyone else. So, I decided to hone my craft. I mastered the WordPress design dashboard (which I found less overwhelming than print design platforms), learned all the tips and tricks I could from advice and experimentation, and got to work on improving the visual elements of macshieldonline.com. Soon, if there was a website problem, but more specifically, a design problem, I knew how to solve it.
With web design, I valued consistency, readability and aesthetic appeal. Every post required the same basic elements in the same locations so that, as a whole, the website was more cohesive. I ensured that all pull quotes started on the right side and that high-quality photos were interspersed between said quotes. Pull quotes were also never too long, so they were easier to read and headlines always spanned the entire length of the page on one or two lines. I also included digital art, infographics, and sidebars to add color and originality to posts. With these goals in mind, the website looked more professional and like every post had intentional creative thought behind it.
I used the variety of templates provided by SNO not just to meet the requirements for a Story Page Excellence badge but to present stories in the most effective way. Dual profiles? Use the Side-by-Side template. A long story covering various subtopics? Use the Long Form templates. In the past, these templates had been used for the sake of “shaking things up” but often failed to live up to their full potential. By using single header photos and pull quotes to make each chapter the same length, I designed the SNO templates to look like one purposeful story and not multiple related stories forced together.
I also enhanced designs with multimedia elements, like GIFs and flip cards, to make each web post unique. This made web stories immersive instead of a wall of text with two pull quotes and a photo. Elements like these were my streamlined versions of print cutouts and deconstructed page layouts, which both allowed me to present more information in a visually interesting way that aligned with online standards. Design was also crucial in translating stories from their print pages to the website. I learned how to take excellent print designs and maintain their originality on the website; it was my mission to prevent some of the original print designs from being lost in transition, as had happened in the past. I did this by playing with graphics and templates in ways that mirrored print editors’ work.
My unexpected creative outlet taught me more than just outside-the-box thinking and determination. I realized the importance of web design and how much work it takes to create an impressive and polished final product. Online journalism requires just as much creativity and design effort as print journalism, especially as more publications transition into the virtual space. With over 100 designed and edited web posts under my belt, I hope to pass this wisdom on to the next generation of The Shield’s online editors.
This was a beast of a story to both write and design. The word count was staggering and the information was unfamiliar to much of The Shield’s audience. To make reading this story less of a daunting task, I first used the full-width template, so that the web page would be vertically shorter. I also used a balance of infographics, pull quotes and photos that relayed information matching up to the part of the story they were placed in. Overall, the web design made this story more appealing and easier to understand.
The print page for this story was incredible, but at first glance, it seemed impossible to translate to a digital format. With four reviewers sharing opinions on different menu items at four taco trucks, I was scratching my head with what to do with it. I decided on headings to separate the reviews from the separate trucks, making the organization clean and breaking up the text. For the first truck, I simply captioned a single photo, but for the second, I used interactive flip cards. The flip cards made the second set of reviews distinct from the first and added a unique multimedia design element to the story as a whole.
For this web exclusive, I used the grid template to its full potential to showcase a lot of information in a visually interesting way. In the past, web editors have used this template for the end-of-year ‘Who’s Who’ project, but with the addition of a collage gallery feature image and portraits all taken at school by the same photographer, I made the design more cohesive and my own.
This design showcases every element that I worked to push in web design this past year. The headline and subheadline fit perfectly, the pull quotes have ideal positioning and length and there are multimedia elements. The GIF in particular has colors that match the featured image and conveys information not directly included in the story itself.
With this design, I am especially proud of how I transformed the story from print to web. In our third issue, the entire top half of the page was a basketball court, and with the use of an immersive feature image and the Side-by-Side SNO template, I maintained this crucial design and storytelling element. By inserting alternating pull quotes, a related stories module and editing headlines, I made sure both chapters were the same length so the full container came together as one tidy package.