Dani Ward

Graphic Designer

Graphic Design

As a part of the graphic design community, I often have thoughts about design practices, client communication, content strategy, web development, and other miscellaneous things that, for the purposes of my writing, will fall under the extremely broad category of “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.

Booklet or Magazine Mock-Up Now Available

Available at Creative Market for just $10!

Use this mock-up template to create high-quality mock-ups of your booklet or magazine designs for use in your portfolio or a client presentation — without having to have access to the printed piece or photography equipment.

Background on how I began to create my own templates.

Last year, as I began looking for good mock-up templates to display many of my print pieces, I very quickly came to the conclusion that it would be easier to just start creating my own mock-ups from scratch. I’m not sure why I decided that, exactly, but I’m kind of glad I did. While it was labor-intensive at first, it’s proved to make it a lot easier to add things to my portfolio as I finish them.

Problem was, I created them all at 72dpi at relatively small sizes since I only ever intended to use them in an online setting.

The more I thought about it, the more I realized that these mock-ups could be great for printed portfolios as well, or even client presentations. So, I’ve been revisiting the mock-ups I created last year and updating them to be high-resolution and easy to update.

How I created this mock-up template.

Using smart objects, I’ve created a high-resolution open booklet or magazine template (sized 8.5″ x 11″) that can display an interior spread and front cover. You can even remove the staples if you like (if, for instance, your publication was saddle-stitched or perfect-bound). All you have to do is paste your 300dpi 8.5″ x 11″ page into one of 6 specific smart objects, and you’re good to go for your portfolio or client presentation.

While I’ve locked the layers you shouldn’t need to adjust, you’re absolutely welcome to unlock and play to your heart’s content. Adjust gradients, remove pages if it’s a small publication, adjust shadows to accommodate specific lighting you have in mind – you name it, you can adjust it.

For the spread, there is a smart object each for the visible left and right pages, along with a smart object each for the pages beneath. So rather than having to copy and paste into several pages, you just copy and paste into the first smart object in the “other pages” folder. That way you’ll see all the masthead colors and textures throughout the pages beneath, adding depth and reality to your mockup.

Pick up your Photoshop file over at Creative Market today!

There Are No Strings On Me: From Sketch to Vector

Last year, when Avengers: Age of Ultron came out on Bluray, my brother came over to watch the film at my house. While watching, I suddenly had an idea for a lettering project: I wanted to draw the phrase Ultron seems obsessed with throughout the movie (which is, of course, from Pinocchio): “There are no strings on me.” My thought was to use lots of swashes and embellishments, then finally ink it with my flex nib dip pen.

I ended up vectoring the piece, but was unsatisfied with the first finalization. I sat on it for several months, then decided to rework it after reading Jessica Hische‘s fantastic book, In Progress. The final result is something I can say I’m quite proud of.

For more on how I’ve started vectoring my projects, see “Cleaner bezier curves in typography.

Pencil sketch on dot-grid paper of italicized Copperplate-esque script with swashes linking the words together, reading "there are no strings on me."

The initial sketch.

Inked calligraphy on dot-grid paper of italicized Copperplate-esque script with swashes linking the words together, reading "there are no strings on me."

After inking with a flex-nib dip pen.

Digital edit of the inked calligraphy, on a red grungy painted background. Calligraphy with swashes linking the words together, reading "there are no strings on me."

First edit in Photoshop.

Second digital edit of the inked calligraphy, on a blue grungy painted background. Calligraphy with swashes linking the words together, reading "there are no strings on me."

Second edit in Photoshop.

Digitized monoline calligraphy with swashes linking the words together, reading "there are no strings on me."

First vector. I’d planned on adding shading like the original inking, but ended up preferring the monoline look. I was unsatisfied with this result overall, however. But I couldn’t put my finger on why.

Digitized and shaded calligraphy with swashes linking the words together, reading "there are no strings on me."

I thought that perhaps further stylizing the design would help, but it still felt “off” to me. I decided to sit on it for a while.

Animation of vectored calligraphy with swashes linking the words, with anchor points appearing and disappearing, text reading "there are no strings on me."

Several months later, after reading In Progress by Jessica Hische, I decided to take the knowledge I’d gained from her book (along with experience in lettering since that first sketch) to rework the vector for greater precision in my curves and more balance overall. This is a look at my progress, with and without anchor points, to illustrate how the lettering was structured.

Animation of final vectored calligraphy with swashes linking the words, with anchor points appearing and disappearing, text reading "there are no strings on me."

This is the final vector version, before adding embellishments.

Calligraphy swashes of the phrase "there are no strings on me," written with frayed rope.

I found a fantastic vector rope brush set online (I wish I could remember where!), and added it to the design. Then I moved into Photoshop to add further depth and correct where some of the rope brush didn’t quite work out around curves. Lastly, I added a grunge texture to the rope to help distinguish it from the clean black background.

A close-up of some of the rope intersecting, highlighting the texture and depth.

A close-up of the fine detail in the piece.

Humans Vs. Robots in the Fight for SEO

An age-old SEO debate: writing for people vs. writing for robots.

When it comes to writing content for your website, there are 2 main schools of thought seemingly at odds with one another. Many argue that you should focus on the people reading your content and forget about search engine optimization entirely. They suggest a heavy focus on loading your writing with keywords makes your content too stiff and difficult to understand, resulting in a disconnect from your visitors. But others insist the goal ought to be to focus on search engine robots crawling your site through loading your content with keywords. Their reasoning is that people can’t find your site if search engines don’t, making SEO of utmost importance. In short, the former focuses on human connection; the latter focuses on data alone.

But what if there doesn’t have to be a fight? What if content managed to be good while taking both humans androbots into consideration? What would that look like? What guidelines might inform how you write?

Find out over at Iconography!

Design Constraints

design-constraints

A good design is driven by needs and defined by constraints. ~Astik Pant

As designers, there are always limitations to consider when we start a new project. A client’s needs are the number one priority driving the design, but there are always a number of design constraints that affect how we as designers approach crafting a solution.

Some design constraints are physical. Paper and ad size limits (or file size limits for web work) affect the physical structure of a design.

Some design constraints are a little more indirect. For example, a project’s timeline informs the amount of time we have to spend creating the final product.

Some design constraints are a mixture of the two. Client budget affects the amount of time a designer has to complete the project, along with things like the number of colors to print and whether the design can bleed off the page.

All of these stipulations change how we work on a design, from the time we spend on it to the colors, typefaces, and graphics we use to communicate our client’s message. Creating a good design within these constraints takes a lot of training and a lot of practice. But at the end of the day, good designers work with their clients to deliver the best possible solution, no matter the design constraints.

On speaking clearly.

Why clear communication is more important than technical language.

Many of us work in specialized industries that all have a unique vocabulary. Since we spend 8 hours or more of our day working in these unique environments, it’s easy to assume anyone you’re talking to understands your everyday language. But chances are your customers, vendors, clients, and users don’t have the same level of education and experience in your field that you do. Using industry-insider jargon can quickly alienate people you’re trying to reach.

If you want to positively impact your audience, speaking clearly is incredibly important. Here are a few things to keep in mind during your next interaction with someone outside your business.

Speak simply.

Your company’s field — and thus vocabulary — may be entirely new to your client. Words and practices you take for granted may not be as intuitive to the person you’re talking to as they are to you. It’s certainly okay to use technical terms. They exist for a reason: to more succinctly describe specific tasks, functions, or experiences. Just make sure you define the terms you’re using. You want to make sure that everyone feels respected while ensuring that you’re all on the same page. Simplicity and clarity trump technicality.

Focus on who you’re talking to.

It’s easy to get swept up in the story you’re trying to sell your client or customer. That’s not what will reach them, though. Focus on their story. Why are they talking to you? What are their needs? What can you do for them that will help them meet their goals? By focusing on the person you’re talking to rather than focusing on your own business, you’re far more likely to make a positive impression and actually meet their needs.

Be specific.

Sometimes it’s easy to assume everyone is following along. It can be difficult for someone unfamiliar with your business to ask you to clarify something they’re afraid they should already know. Be specific in all of your communication, whether on the web, in person, or through email. Make sure you reference all involved aspects and persons: the project, the problem, the solution, actionable items. Restate what has been communicated to you to make sure you’re understanding correctly, and be sure to check in with everyone to make sure they’re up to speed.

Speaking clearly is an integral part of successful communication, from one-on-one conversations to advertising and marketing. Going out of your way to communicate clearly tells your clients that you care and builds the foundation for a lasting business relationship.

Your website takes work.

When your full-time job isn’t website maintenance, it’s easy to let your website get stale. Maybe you figure what you have is good enough for now, or maybe you’re hoping an upcoming redesign will revive interest in your site and business. It’s hard to dedicate time and energy to something that seems so immaterial when your time is already concentrated on the rest of your job.

I totally understand that.

When fellow feminist web designer Angelique Weger offered to host my website last year, I was ecstatic. Despite having worked in this industry for years, I’d been so busy working on everyone else’s projects that I’d never gotten to pulling together a website for myself. And yet, though a chunk of my career focuses on web design, content strategy, and site maintenance, even I was overwhelmed by the sheer amount of work it took to pull my site together.

Unfortunately for us all, no website comes ready-made, full of beautiful design and content and images ready to be consumed by the public. Your website takes work, whether you’re creating a new website like I was or updating one you already have. While you’re likely to be hiring a designer and developer for the creation of your site, here are some things you need to know and be prepared to work on — or delegate to someone who can dedicate their time to your online presence.

This article is targeted at businesses, but most of these points apply to my blog friends and their sites as well.

contentMake sure you have someone who can write and update your content.

Your content is the core of your site. While design and user experience help inform visitors about who you are, your content is what tells them who you are and what you can do for them. Therefore, your website can only be as strong as your content.

More than that, even, your search engine rankings are affected by how fresh your content is*, which in turn affects how people find your site and if they stay to learn more about you. Whether you hire a copywriter (like this one with whom I always love collaborating) or designate someone on your staff to keeping your content up to date, strong and frequently updated content is absolutely vital to the health of your business.

This is where keeping a blog or news section is important. You can write short updates about your business offerings, highlight media coverage you may receive, publish case studies about your business, create lists of best practices for your industry — the possibilities are endless. The important thing is to publicly establish yourself as an expert in your industry through detailed, compelling content.

socialSocial media engagement is important. Well, sometimes.

When venturing into social media for your business, there’s a few things you need to think about and be willing to tackle:

  • Don’t start something you can’t finish. Honestly, some industries don’t necessarily need to be very involved in social media. In fact, I’d go so far as to say that if you can’t be regularly active on social media, it’s better to not even have a profile. Abandoned accounts reflect worse on your company than nonexistent ones. If you do choose to create social media accounts, it can be a good idea to hire a marketing consultant (like my friend and colleague, Matt!) to help you get things started and develop a marketing plan. If you decide to engage with social media on your own…
  • Learn how to use different platforms. You know what’s almost as bad as an abandoned account? An account run by someone who clearly doesn’t understand the technology they’re using. A quick Google search is your friend and can help lead you to some great walk-throughs and tutorials for whatever social platform you’d like to utilize. One of my favorites is from designer and letterer Jessica Hische, who created “Mom This is How Twitter Works.” It’s easy to read and incredibly informative.
  • Create a regular posting schedule. With platforms like Twitter or Facebook, you typically have the option to schedule posts in advance. This allows you to set up multiple posts for upcoming days, weeks, or months all in the course of a few hours or days. A content strategy is quite useful here, as well. Determine what kind of content you’ll post on what days, what kind of tone you want to set, how you want to interact with others online. Be consistent, even if your posting schedule is once a week. Don’t forget that you can tie your blog to most social media platforms, as well!
  • Keep your branding consistent. Ask your designer to help you create profile photos and other graphics for your company to keep all of your online profiles consistent with your established brand. You want people to immediately recognize you and tie your business to your visual language. If you have a brand manager, copywriter, or marketing team, ask them to sit down with you and look at your online presence to make sure you’re sending a positive and consistent message through what you’re sharing along with your writing.
  • Be engaging. Don’t use social media as a megaphone. Social media is for social interaction, which always ought to be a two-way street. Follow people in your industry, leaders and local business alike. Spend time getting to know people, interjecting where appropriate. Take note of who interacts with people the most and how they go about it for good examples of how people in your industry are expected to talk to people on social media platforms. When potential customers or clients or even just followers comment or interact with you, don’t ignore them — talk to them. You want to be seen as professional and approachable, a solid part of your community online and off.

Monitor your search engine optimization.

What content management system are you using? Chances are, there’s an option that will allow you to control and monitor your search engine rankings. Many of them will even analyze your pages for you and give you tips on how to better optimize your content to help people and search engines find your site more easily. Be sure to pay attention to your grammar, as well — search engines are becoming more selective* in how grammar affects your rankings. In general, make sure that you understand why people are searching for your site and what terms they’re probably using, then incorporate those terms into your content as naturally as you can. No one likes to feel like they’re being sold something. Be sure that you’re writing with your customers or clients in mind, not just your company.

copyrightImages are your friends. Unless they come from Google.

People are visual creatures. So much so, in fact, that online articles with photos receive 94% more attention than those without*. A well-chosen, relative photo or infographic can clearly work wonders for your websites.

But.

Images are copyrighted. Yes, even and especially online images. Just because you can find an image online doesn’t mean it’s free to use without breaking the law. How can you tell what you are allowed to use? Thankfully, Curtis Newbold has put together a fantastic infographic detailing when it’s okay to use an image online. The basic things you need to keep in mind are:

  • If you don’t know where an image originated, don’t use it. If you don’t know where the copyright lies, it doesn’t mean it doesn’t exist. With companies like Getty being ever-vigilant in finding and fining illegal uses of their image*, it’s just better to be safe than sorry if you’re unsure who owns the rights of the image. If you do know where the image came from…
  • Credit the original owner of the image whenever possible. This is where things like Creative Commons images comes into play. Many people offer their images for free use so long as they are credited for the work. For example, all of the images used in this post come from the good people at Death to the Stock Photo. Speaking of which: if you’ve purchased an image from a stock photo site, you don’t need to worry about crediting the origin as you’ve purchased the right to use the image commercially.
  • Ask permission before using. Not only is this simply polite, it allows you to obtain written proof that you have permission to use the image and it opens the door for another professional connection.

Make the time to care.

This may sound a bit obvious, but I’ve seen otherwise beautiful well-organized websites crumble into ruin or flat-out fail. Why? Because the website owners weren’t willing to pay a third party to upkeep their site, nor were they willing to learn how update it themselves.

Your website takes work — and depending on how large the site is and what all you’re doing with it, it can be a full time job. You need to be prepared to handle that work with the team you currently have, or else be able to hire someone who can dedicate the bulk of their energy to your online content and marketing.


Looking for help with your online presence? I’d be more than happy to chat with you and discuss your needs. Drop me a line!

“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.

Responsive Web Design

This post first appeared on Iconography on September 23, 2015, and it has been edited for this site.


The web is an ever-changing medium. Design styles come and go. Browsers constantly update, changing how they display design and code. Gone are the days where a website was only ever viewed on a desktop monitor (and when we could accurately predict what size that monitor might be!).

The world-wide web isn’t static anymore. I’m not sure it ever really was.

And your website shouldn’t be static, either.

What is responsive web design?

Put simply, responsive web design describes a site that has been designed to display a website’s content legibly and usably on any screen in any context without the viewer having to make any adjustments. The concept of responsive web design has been around for a long time, since the early 2000’s. But it wasn’t until 2010, when web designer and developer Ethan Marcotte coined the phrase in his ground-breaking article on the subject.

Why do I need responsive web design?

Until recently, it was common practice to design a website with only a desktop browser in mind. Designers would choose a width and height as their primary canvas for design, and developers would translate that design into an equally static webpage. There was little concern for how a website might look on different platforms, and it wasn’t unusual for mobile versions to be developed that stripped much of the functionality of the site.

As smart phones, tablets, and other forms of accessing the web became more and more prevalent, the static approach to web design presented lots of problems. It failed to respect the time and availability of users accessing the site on non-desktop platforms, which in turn negatively affected companies whose sites were failing to convert those users into customers or clients because of bad interface experiences. Creating multiple versions of the site was impractical, as no designer or developer can predict with certainty what screens people will be using.

Approaching a website responsively, however, concentrates on the user experience above all else. The design is conceived with the understanding that it will never look the same across browsers and screens and the acceptance that a design shouldn’t be identical everywhere. Instead, the focus becomes marrying a company’s brand with a user’s viewing needs — which creates a beautiful, usable, readable experience for all who visit your site.

Want to learn more?

Take a look at some of Icon Graphics’ responsive web designs, then connect with us. We’re happy to help.

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.