Dani Ward

Graphic Designer

Tag Archive for Graphic Design

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.

“Different” isn’t enough.

Occasionally, in both my freelance and office work, I’ve gotten requests from clients to create a design that’s different. “We don’t want to do what our competitors are doing. We want to be different.” Don’t get me wrong. There’s definitely merit to this request. A design that mimics competitors — or is so bland as to be invisible — fails to have a lasting impact. A strong and unique design is always appropriate.

But just being “different” isn’t enough in and of itself.

Sometimes, it can even be disastrous.

So, when is a “different” design just not enough?

“Different” isn’t enough…

…when it leads to a departure from your established brand.

Consistency in branding is important. As I tend to think of it, your brand is like a person. If a person acts erratically and inconsistently, we intuitively feel uneasy about them and withdraw. Similarly, a constantly changing verbal or visual tone in your designed materials communicates instability, promoting distrust or disinterest.

Lots of seemingly small decisions impact your brand consistency. Things like font choices, color schemes, layout choices, and photo/illustration usage all play into how your brand expresses itself. So unless you’re creating a new product with its own branding and personality, or creating something for a themed event, make sure your new design flows seamlessly with your existing brand. Changing things up creates an inconsistent visual story that destabilizes your company’s message.

Whatever the project, it ought to be in keeping with your existing branding efforts.

…when the implementation breaks standards.

There are widely researched and accepted standards for designs of all kinds: ads, business cards, websites, brochures. These standards often include commonly accepted font usage, implementation of color, and standard folds and sizes, among many other things. As a design professional, it’s my job to understand these standards and how best to implement them in a creative way. There’s always some flexibility, of course, and I rely heavily on the experience of those whose expertise lies in those areas (such as web development and printing). But sometimes an idea has to be abandoned because it simply can’t be created without flying in the face of what’s in your best interest.

If the only way to use that typeface you want online is to display it as an image, we need to pick another typeface in order to not inhibit your search engine rankings and to comply with accessibility standards. If the only way to fit all the information you want on that ad is to make the font size 6pt light condensed, we need to cut copy to narrow the focus of your message and keep it legible for your target audience. If implementation doesn’t comply with industry standards, the idea needs to adapt in order to succeed.

These constraints may feel arbitrary or unimportant, but trust me — they allow us the opportunity to work together to create a better solution for everyone.

…when it distracts from the message.

One of the primary differences between art and design lies in what is being communicated. Art is open to interpretation and ambiguity. Design fails if the message is unclear. The majority of a designer’s training and career revolves around making sure your visual message matches your written one. And sometimes, an idea or visual direction is distracting from your message rather than promoting it.

This can look like using a particular typeface you love, but is hard to read. Or maybe using a photo or illustration that dominates the space to the detriment of your content. Even colors can contradict what you’re trying to communicate.

Content is king. The purpose of any material — logo, business card, ad campaign, website, or email marketing — is to communicate a specific message. And if the design direction doesn’t support that message, then you’re going in the wrong direction.

There’s nothing wrong with striving to be different.

It’s important to learn how to differentiate yourself from your competition and attract the attention of your target market. But these symptoms listed here are all signs that “different” isn’t enough to help you stand out.

A successful solution will always be different or strong enough to garner positive attention while fitting in with your existing brand, adhering to the standards of the medium, and unambiguous about its message. That’s a delicate balance to achieve — and that’s why it’s so important to invest in hiring professionals trained to do just such work.