Dani Ward

Designer | Teacher | Consultant

Process

Icon Graphics Website

When I joined the team at Icon Graphics in 2011, one of my main goals was to start migrating our sites to responsive web design. Naturally, this brought me to our site, which had been developed before the advent of responsive design…and when Flash was still a norm in web design.

Icon Graphics' 2009 Site Design

Icon Graphics’ 2009 Site Design: non-responsive, with a Flash animated header banner.

Content Strategy

Of course, client work always takes precedence when you’re a design company. But even as we focused on our clients, I began developing a content strategy and branding guide for the direction I thought would be best for our company to move. Over the course of a week, I wrote up a branding guideline for our visual and written work based upon the reputation we’d already earned by the longevity and breadth of our experience along with how we’d like to be perceived going forward. This branding guideline helped as I began to restructure the site and rewrite our content. I began a notebook in Evernote to easily share my ideas with my team members. (I converted this notebook into a visual guide here for ease of sharing with you.) My boss and coworker were both thrilled with the guideline, mood boards, and initial copy.

I took the research I’ve done for years on best practices for communication and design and combined it with what I knew of our company’s strengths and goals and created a list of things to keep in mind as we communicate with clients and work with our own branding and overall company representation.

Branding guidelines written to help as we reworked the Icon Graphics website design and content, along with as we communicated with clients and vendors.

Branding guidelines written to help as we reworked the Icon Graphics website design and content, along with as we communicated with clients and vendors.

Then, I began looking for visual representations of what would constitute as something visual that supported our goals. It’s not a very formal mood board, but it worked for visually communicating my vision for the company.

A mood board of visual elements that I felt communicated aspects of our branding guidelines.

Visual elements that I felt communicated aspects of our branding guidelines.

Between running my own semi-successful blog and doing lots of research on content organization and structure, I had a pretty good idea of how we should approach both our portfolio and our blog posts. I outlined all categories we should use, along with tags and what their function would be.

A series of categories and tags to help us keep content and portfolio items organized.

A series of categories and tags to help us keep content and portfolio items organized.

Finally, I wrote up a general suggested game plan for how to implement all of these strategies into our daily office lives.

I took both the branding guidelines and mood boards and came up with a list of actionable items I believed we should pursue to help the growth of the company.

I took both the branding guidelines and mood boards and came up with a list of actionable items I believed we should pursue to help the growth of the company.

Design, Copywriting, SEO, and Development Assistance

We brought Jeremy, a talented PHP developer, on board in 2013, which was just the push we needed to begin redesigning our site. My coworker, Kim, spearheaded the redesign based on the branding guidelines, restructuring, and copy I provided. After Keith, our employer and owner of Icon Graphics, approved Kim’s homepage and template design, I took the design and reworked it to ensure maximum responsiveness. I wanted to be sure that the design didn’t lose any of its charm as it scaled down for tablet and mobile views, along with ensuring that content and the user’s experience of the site were the main focus at each break point.

I also chose and manipulated several photos for use as our rotating header images. I wanted the photos to showcase our tagline of “STAND OUT” while also fitting in with the color palette Kim selected for our new branding efforts.

At this point, our new developer, Jeremy, began working on programming the site as I began working on interior page designs for our contact forms, portfolio, blog archives, blog posts, and team pages. All throughout this process, I revisited the initial scope of the site and checked in with Keith, Kim, and Jeremy to make sure that what we were doing reflected the needs of our company, met web standards, and served the needs of site visitors and potential clients.

The initial design of the website was just the homepage, so I set out to make sure all interior pages had a cohesive design system in place that meshed well with the template my coworker had created. This started in part with the blog archives page. I didn’t want it to look like an accident or afterthought, and realized I could re-use the styles from it for our Team page.

A simulation of how the blog would display, taking into account each article's title, meta information, featured image, and excerpt.

A simulation of how the blog would display, taking into account each article’s title, meta information, featured image, and excerpt.

Using the same styles as the blog archives, I designed a way for us to display photos of each team member, along with their name, title, and biography.

Using the same styles as the blog archives, I designed a way for us to display photos of each team member, along with their name, title, and biography.

Next was individual blog posts. We needed to consider how to best display the meta information (date, categories, author).

There was no need to adjust the typography styles for blog posts since those styles were in place already, so I focused on how tags should be displayed after a post, how to share our content, and what an integrated Disqus comment system would look like.

At this point, Keith felt the copy on the site was too playful and not robust enough. With the aid of an SEO measurement tool, I rewrote the entire site, making sure to appeal to both search engines and people using them. The copy on the current site is the end result of what I wrote.

Portfolio Organization and Mock-Ups

The final piece of the puzzle was figuring out how to upload, organize, and display our extensive portfolio. I spent some time talking with Keith and Jeremy, along with brainstorming best organization methods, and came up with the following:

This is an email I sent to our entire internal team for input. I wanted to outline the problems I foresaw us having as well as provide a detailed, practical solution.

This is an email I sent to our entire internal team for input. I wanted to outline the problems I foresaw us having as well as provide a detailed, practical solution.

After getting approval for this direction, I worked with Jeremy on implementation. To help, I created an animated gif to demonstrate both my vision for the design of the portfolio and how selecting a specific portfolio item would trigger the lightbox.

An animated gif I created showing the basic category and listing of portfolio items, then what it would look like when someone hovered or tapped on an item to activate it, and finally what the full image would look like when in a lightbox with a title and description.

An animated gif I created showing the basic category and listing of portfolio items, then what it would look like when someone hovered or tapped on an item to activate it, and finally what the full image would look like when in a lightbox with a title and description.

Finally, it was time to load our portfolio. The problem I ran into was that there were many projects where we didn’t have physical proofs of the final products. Rather than posting just the files as they were, I set out to create realistic scene mock-ups in Photoshop for various print pieces. I used smart objects to make updating these mock-ups quick and easy. The following are mock-ups that I created from scratch specifically for Icon’s design portfolio.

Conclusion

I’m very proud of the work I put into the Icon Graphics site redesign. Some of the strategy options weren’t implemented for various reasons, but the process of planning and organizing and writing and designing for such a large project, along with helping to oversee the progress and ensure quality, was a process that helped me grow as a designer, writer, and web professional.

Antietam Cable’s Home of the Future Campaigns & Collateral

Antietam Cable Television approached the team at Icon Graphics to create full-page and banner-sized print ads for the local newspaper, matching the minimalistic strong tone of their new TV spots. I was tasked with creating a print strategy for this “Home of the Future” campaign. The client was thrilled with the result.

One of the struggles I had with preparing for the campaign was finding suitable images. They all needed to be easily masked from their backgrounds or have a white background, and be able to work together with other images. A decent chunk of the time spent designing these ads was in selecting and prepping the images. Typographically, I chose to go for high-contrast between Myriad Black or Bold and Myriad Light. I found that this communicated both strength and sophistication, which is exactly the feeling Antietam Cable wanted in their campaigns.

After the ad campaigns were so well-received, Antietam Cable came back to the team at Icon and asked us to redesign all of their collateral materials in the same theme as the ad campaign. This included their cable channel guide, digital phone booklet, services pricing guide, digital phone brochure, digital cable brochure, high-speed internet brochure, business-class services brochure, and business-class services stepped one-sheet inserts. Once again, these designs were successful: the client approved the design, which was created specifically for ease of use for their customers. All around, it was a win-win.

Initial full-page newspaper ad design for Antietam Cable's Home of the Future ad campaign. Design for Icon Graphics.

Initial full-page newspaper ad design for Antietam Cable’s Home of the Future ad campaign. Design for Icon Graphics.

Full-page newspaper ad design for Antietam Cable's TV service as part of their Home of the Future campaign. Design for Icon Graphics.

Full-page newspaper ad design for Antietam Cable’s TV service as part of their Home of the Future campaign. Design for Icon Graphics.

Full-page newspaper ad for Antietam Cable's internet service as part of their Home of the Future campaign. Design as part of Icon Graphics.

Full-page newspaper ad for Antietam Cable’s internet service as part of their Home of the Future campaign. Design as part of Icon Graphics.

Banner ad design for insertion in the local newspaper for Antietam Cable's DVR service as part of their Home of the Future campaign. Design for Icon Graphics.

Banner ad design for insertion in the local newspaper for Antietam Cable’s DVR service as part of their Home of the Future campaign. Design for Icon Graphics.

Banner ad design for insertion in the local newspaper for Antietam Cable's WiFi service as part of their Home of the Future campaign. Design for Icon Graphics.

Banner ad design for insertion in the local newspaper for Antietam Cable’s WiFi service as part of their Home of the Future campaign. Design for Icon Graphics.

Antietam Cable's pricing insert for their services, based on the successful design style used for their Home of the Future campaign. Design as part of Icon Graphics.

Antietam Cable’s pricing insert for their services, based on the successful design style used for their Home of the Future campaign. Design as part of Icon Graphics.

Antietam Cable's channel guide design, as part of the team at Icon Graphics.

Antietam Cable’s channel guide design, as part of the team at Icon Graphics.

Antietam Cable's TV Packages brochure, designed as part of the team at Icon Graphics.

Antietam Cable’s TV Packages brochure, designed as part of the team at Icon Graphics.

Bifold brochure design for Antietam Cable's digital phone service, as part of the team at Icon Graphics.

Bifold brochure design for Antietam Cable’s digital phone service, as part of the team at Icon Graphics.

Brochure design for Antietam Cable's high-speed internet service, using the same design style used in their Home of the Future campaign. Design as part of Icon Graphics.

Brochure design for Antietam Cable’s high-speed internet service, using the same design style used in their Home of the Future campaign. Design as part of Icon Graphics.

Digital phone booklet design for Antietam Cable's digital phone service, designed as part of the team at Icon Graphics.

Digital phone booklet design for Antietam Cable’s digital phone service, designed as part of the team at Icon Graphics.

Bifold brochure design for Antietam Cable's business class services, as part of the team at Icon Graphics.

Bifold brochure design for Antietam Cable’s business class services, as part of the team at Icon Graphics.

Stepped sales sheet design for Antietam Cable's business class services, using the same design style established in their Home of the Future campaign. Designed as part of Icon Graphics.

Stepped sales sheet design for Antietam Cable’s business class services, using the same design style established in their Home of the Future campaign. Designed as part of Icon Graphics.

Throwback Thursday: INFOCUS Marketing Rebranding

INFOCUS Marketing acquired a 25 year old print and direct mail firm in June of 2010. Months before the official acquisition took place, the marketing department needed to come up with a new face for the company as we would be offering our clients and customers a myriad of services beyond list management.

Having been a part of the team for months, I had already proven my skill set, so I was tasked with redesigning our corporate materials and a company logo redesign. My goal was to keep the visual language consistent without being overbearing. The following gallery shows the rebranding before and after.

PACK EXPO International / Pharma EXPO Playbook 2014

PMMI approached me to design the exhibitor handbook for their co-located PACK EXPO International Pharma EXPO in Chicago. The theme was once again that of a comprehensive playbook, so sports imagery, bold colors, and clean layout were in order to attractively and intuitively lay out the contents of the book. The copywriter, Kwame DeRoché, provided the visual concept of a locker that holds all the information exhibitors need for the show.

PACK EXPO Playbook 2013

PMMI asked me to come up with a concept & a design for the exhibitor handbook for their 2013 PACK EXPO show in Las Vegas. The theme was a playbook, so I decided to go with a clipboard that would be full of “game plans” for the exhibitors. The clipboard was die-cut and slipped into a slit on the front to keep the booklet closed. PMMI and their exhibitors alike were incredibly pleased with the result.