Plumbers Without Borders

I am proud to announce my partnership with Plumbers Without Borders a nonprofit that seeks to connect volunteer plumbing professionals with organizations working in impoverished areas in need of safe drinking water and sanitation.

Plumbers Without Borders is the brainchild of Domenico DiGregorio a Certified Plumber with more than 40 years of practical experience and Carmela DiGregorio who has worked with her husband for more than 35 years in the plumbing industry.

The mission of PWB is to connect volunteer Plumbers with organizations that are working to increase access to safe water and sanitation. This mission is as ambitious as it is noble and I am very proud to be part of the team making this vision a reality. If you would like to learn more about Plumbers Without Borders, or if you would like to donate your time, money or expertise please visit www.plumberswithoutborders.org today!

I’ve had the opportunity to help PWB grow by redesigning their logo, marketing materials and website. Below you can see the logo rebranding and website redesign that I have recently completed.

Logo Redesign

Plumbers Without Borders Logo Rebrand

Website

Plumbers Without Borders Website

Québec-Avocat.com

I was recently approached by a startup based out of Québec and commissioned to design an identity package and develop their website. It was the first bilingual website that I’ve ever created and brought with it unique challenges.

Every project requires a lot of planning and a clear direction, but it’s even truer for a bilingual website as any changes have to be made twice. This can quickly shift timetables and increase costs, therefore it was important to set clear goals and stick to deadlines by all parties involved.

Here are the final results of a 2 month process.

Identity Package

Québec-Avocat.com Identity Package – Letterhead, Envelope & Business card

Website

Québec-Avocat.com Website Screenshot – Desktop, Laptop & Mobile

Magazine Makeover

IowaMedicine Magazine

My favorite part of graphic design has to be layout design. There is something about arranging type, images and whitespace that I find to be very soothing. As you can imagine, I was very excited when I was given the opportunity to redesign the IowaMedicine magazine. IowaMedicine has been around for over 100 years, and throughout those years it has undergone many editorial and stylistic changes.

The most recent design changes date as far back as 15 years ago, so it was more than time to give the magazine a design makeover. My goal was to give the magazine an updated look, while keeping its identity alive. I wanted people who have been receiving the magazine for over 20 years to still recognize the publication. This meant keeping some of the old elements, while also removing clutter and shifting some of the visual focus on certain pages.


The Cover

Iowa Medicine Cover ComparisonHere is a comparison between the old cover and the new design that I created. As you can see, I kept the color and general layout the same so that the magazine is still very recognizable. However, there are some key differences between the two covers that make the new design much more effective.

The Masthead

One of the main issues with the old design is the cluttered masthead. There is a lot of noise going on up there, yet very little is being said. The title of the magazine is being overpowered by the black bar below and the unnecessary strikethrough on the word Iowa. Furthermore, the branding of this magazine as a publication of the Iowa Medical Society is being shortchanged, by being hidden in the black bar and once again obscured by a line going through it.

I decided to ditch the black bar and move Journal of the Iowa Medical Society to the very top. I was also able to add the website address of the company on the cover, while still making the masthead look less cluttered. So we’re saying more with less! The key here is that IowaMedicine stands out more because it has more room to breathe and does not have to compete with anything else. I also like having the website of the company on the cover, not only because it helps brand the company and drive traffic to the website, but also because the magazine itself is also available on the website in a digital format.

The Spine

The next area I tackled was the blue spine on the left. One of the biggest mistakes I see young designers make is that they want to bold everything. This is a classic case of everything needs to stand out and by bolding everything, nothing ends up standing out. I also disliked the fact that the date was separated from the volume number as they are a natural match.

The solution to these problems is very simple in fact; move the date and volume to the right which puts it next to the masthead. Since the masthead has a lot of whitespace around it, and is no longer cluttered, we can give the date and volume a regular font thickness. Even with this delicate type, it is still easy to read and immediately makes sense even if you are just glancing at the cover.

Next, since this magazine is a benefit for members this is the part I really wanted to stand out. Not only does this put emphasis on the fact that the members are receiving this magazine for free, but once again we’re branding this as something produced by the Iowa Medical Society. A third reason for having this text in bold, is that it will stand next to the main cover image, so it will have more to compete against.

Cover Image

Now that we have the top done and the side done, we have a nice framework to work with for the main image of the magazine. By having a clean masthead and clean spine, we can be more creative with the cover. This allows us to use more involved images as well as add more interest to the magazine by highlighting not only the feature article but also some of the other content inside.

I’ve kept the main article title at the top and added a secondary Also Inside section in the bottom right hand corner. This balances out the page and further frames the cover image giving it more impact and importance. I had to keep the bottom left corner empty because that is where the mailing label is affixed.


Table of contents

Old Iowa Medicine Table of contentsThe old table of contents lacks hierarchy and is cluttered. Everything seems to have the same weight and there is no discernible path for the reader’s eyes to follow. This detracts from the actual content and reduces the likelihood of people taking the time to read the short paragraphs explaining the articles, which in turn reduces the likelihood of the magazine being read at all.

These pages also make use of a lot of colors without actually getting any value from them. What I mean by that is that they were using at least 6 distinct colors, yet they all seem to blend together in a weird and unattractive mesh. It’s hard to discern at a glance what is a title of an article and what is section subhead despite all the colors used.

To remedy all of these problems I had to take a heavy handed approach to these pages. Simply changing the font type or colors would not have been enough. I had to change the location of sections, colors and size of subheads and the general flow of content.

New Iowa Medicine Table of contentsAs you can see in the final product I was once again able to add more content to the pages, while still making them look more organized. I’ve moved all static information into a dedicated gray left hand column. The subtle gray takes it out of focus thus no longer distracting the reader from the main content.

Now the primary focus, upon opening the table of contents, is on the cover story, followed by a few other important articles below. By establishing clear colors for the sections and titles of the articles it is very easy for the reader to figure out what to look at for information, and how to find the area they are most interested in. The subtle changes in font size help guide the eye from left top, to left bottom, back to right top and finishing at the right bottom of the two page spread.

To help further with page balance, I’ve added some of the more styled elements like the save the date and thermometer into its own dedicated bar on the right side of the page. Now both pages look symmetrical, have plenty of white space and a coherent hierarchy.


Article Page

Old Iowa Medicine Article pageThe article pages did not have as many problems as the other pages, but they still needed freshening up. One of my biggest pet peeves is placing too much emphasis on static content that the reader does not really have much use for. In this case, the content section as well as the magazine name and date are overpowering the actual article. By this time, the reader already knows what he or she is reading and they know what month it is.

Once we’ve engaged the reader by having a well-designed cover, and we’ve guided him to an article via a well-structured table of contents, we don’t want to waste his time by shoving our magazine name and useless dates in his face. We want to deliver the content cleanly and efficiently.

New Iowa Medicine Article pageWith that in mind, during the redesign I put most of the focus on the title of the article and the author; this gives the article importance and credibility. I’ve moved the section title to the top of the page, so they can be found easily when thumbing through the magazine, yet they are small and light enough as to not to interfere with the title of the article.

Furthermore, I’ve reduced the display of IowaMedicine and the date to only the left hand side of every spread in the magazine. This way we still get the branding without overpowering the page and without distracting the reader. Next I’ve also added the word Page and bolded the numbers in the bottom corners so that once again it is easier for the reader to thumb through and quickly find what they are looking for.

As a final step I established clear style guides for the articles such as having a distinct color and uppercase formatting for sub titles, as well as bold type and a blue color for all web and email addresses. These little tweaks help the reader make their way through lengthy articles by providing rest points for the eyes.


Conclusion

If you’ve made it to the end of this article, congratulations! As you can tell there is a lot to cover when it comes to layouts, which is why I love working on them. Having a good understanding of what makes a good layout and how to use whitespace correctly is absolutely crucial for all areas of design, but they really come out to shine when you are laying out a magazine.

Make good with the old

CPR Website

As designers we like nothing more than to be given a problem and then given the freedom to provide a creative solution to that problem. A brand new identity, a brand new website, brand new packaging design…that is what we like to take on, but that is not how it always works. Some projects start out like this: “We like what we currently have, could you just update it…and make it look a little better?”

I find that these kinds of projects are harder to take on because the client will often be emotionally invested in their current design. More likely than not they have been involved in the initial design and therefore feel you are in a sense “attacking their work” when you critique their current design. When you have a project like this the key is not to get frustrated; instead, keep your and the client’s common goal in mind. You are both trying to improve on the current design in order to make the final product stand out against the competition and as a result make the business more profitable.

I was recently presented with just such a challenge. A web design makeover that had to rely heavily on what had been done previously. This wasn’t a case of “We really like this design…we just want it updated” but instead it had to do with the fact that this was a brand new project that had been unveiled and radically changing the look of the site so soon would not have been acceptable. So instead, I had to take what was there and improve on it. Get rid of the design flaws, keep some key design elements and at the same time make the site more user-friendly and visually appealing!

My troubles began when I ran the current website through the W3C Markup Validation Service and got this (40 Errors , 11 warnings). For the purpose of this analysis I will not focus on the technical flaws of the website and instead focus on the pitfalls of the design. In my re-coding I obviously made sure the site would validate and I got rid all the cross browser issues.

Back to the design…

Old CPR WebsiteHere is a screenshot of the initial design that I had to work with. I’ve also highlighted some of the key problems with the design so you can follow along as I tackle them one by one.

As you look at the first screenshot you will see that the homepage lacks unity, good contrast and generally just feels unpolished. The color scheme is bland and makes almost all of the text hard to read. The subpage isn’t much better; it also suffers from the same issues and in addition has very poorly formatted text.


Main Issues

Not cross browser/platform friendly

I’ve briefly mentioned this before so I won’t spend too much time on it, but the entire site was just very poorly coded. It wasn’t cross browser compatible and didn’t keep accessibility in mind (more on this later).

Dark color scheme

This website is supposed to attract medical professionals to practice in Iowa. Instead of seeing clean, bright and inviting colors, we get a muddied dark gray along with some shades of green. These colors are not in line with what people think of when they think about medicine (white, clean, organized, etc.) Colors are used to set the mood on a site and can help you convey a comprehensive theme along with your content. You wouldn’t want a heavy metal band website to be bright pink and yellow, any more than you would want a website about medicine to be dark and gray. Always keep your audience and theme in mind when choosing colors for your website.

Lack of hierarchy

Poor hierarchy is the most common mistake I see on websites. People get caught up and enamored with every section of their design and forget to provide a coherent visual path for their users to follow. Always remember that not everything is equally important and it is your job as a designer to prioritize sections so the user can easily figure out where to go next. A good way to test if you have good hierarchy is the gray-blur test. Take your design, convert it to grayscale and blur it by 2-4 pixels and see if you can still figure out which sections are the most important ones. See example.

Accessibility

A website with accessibility is a site that can be used by people who have disabilities. More specifically, accessibility means that people with disabilities can perceive, understand and navigate the site. You may not be able to tell from the screenshot, but the front page has about 2 sentences worth of actual text. The rest are images which screen readers cannot view and search engines cannot crawl. Remember, if your site is not accessible you are alienating a large user base and are also making your website raking drop because bots cannot crawl your site and find keywords in your content. When you do have to use images, make sure to always include alt and title tags that are descriptive.

Here is a quick overview of some of the other issues:

  1. The menu uses dark gray text on a gray background. It’s hard to read, unattractive and just feels unfinished. The menu needs to be clean, bold and organized so the user knows where he’s going and where he’s been.
  2. These two menu items don’t even look like buttons, nor do they look like something that is interactive.
  3. The figure overpowers the text. This website is about getting doctors to Iowa, not about that specific doctor. Another hierarchy issue.
  4. All the sections seemed to be disjointed and lack unity. The page seems to be falling apart rather than being held together by a strong design.
  5. The footer is hard to read and on lower resolutions looks like it’s the end of the page. Some people never get to see the sponsors.
  6. Sponsors are important! They gave good money for this project and deserve better treatment than just being slapped at the end of the page without any integration with the rest of the content.

Solution: The Redesign

New CPR WebsiteHaving looked at all the issues with the design it came time for the redesign. As I said before the new design needed to be based on the original while at the same time fix all of the issues that I mentioned.

As you can see I’ve given the menu a much needed overhaul and combined some of the sections together to give them more impact and provide a clear hierarchy. I’ve also moved the sponsor above the footer because the footer denotes the end of the page, and the sponsors should be seen before that. Also note that the page is brighter and cleaner than before giving it an inviting and professional look.

How to ask for money

IMS Center for Physician Recruitment

I’ve seen it many times…great ideas…and great ideas getting crushed. Most people fall into the trap of thinking that if something is “good” it should speak for itself and that no sales pitch needs to be made. This couldn’t be farther from the truth. The difference between an idea becoming successful and an idea failing is more often tied to marketing rather than its actual potential.

A bad idea with great marketing will generate more money, than a great idea with awful marketing. Now, the bad idea will probably eventually die off, but not before it has made a lot of money for its creator. Many get rich quick or lose weight fast schemes come to mind.

Never go into a presentation without knowing what you want, what the strengths of your product are and a marketing piece that nicely displays and highlights all those strengths. When you leave you want to leave something behind that will make them remember you and make them think twice about dismissing your idea.


The Brochure

As an example of a leave behind brochure I’m going to talk about the IMS Center for Physician Recruitment (IMS CPR) brochure and how it helped us make the case and get funding for this project.

As mentioned before the brochure has to make an impact quickly and effectively which is why certain design elements need to be kept in mind. Here are some key points:

Keep it short

Keep it shortMost companies that are considering your product want to have a quick and succinct overview of your project. They don’t want to spend a weekend reading your material, they want the key points why they should take you seriously and why this is worth their money. When you go in for the second interview you can go into more detail.


Be bold

Be boldThis isn’t the time for 8pt type! It’s time for big catchy headlines, and nice bold paragraphs. Make it a quick and easy read that stands out and is confident.


Powerful images

Powerful imagesYou don’t need to have 20 pictures in your brochure. Very often a few large complimentary images are what will catch people’s eye. Again it’s important to display confidence with your images.


Coherent structure

Coherent structureJust like any good book your brochure should have a beginning, middle and end. Which means you need to lay out the current problem, introduce your product and how it solves said problem, and finally how the investor can be involved.


Words are power

Words are powerThis is one of the most critical components of your brochure! Writing compelling and conversational copy is absolutely critical! Nothing will discredit you more than spelling errors and poor grammar.


Conclusion: Design is Power

Asking for funding for a project is never an easy task. Unfortunately a lot of businesses make it even harder on themselves by asking for sponsorship without a proper plan and without a marketing piece to help them make their case.

The key to remember is that no matter how good your project is without a good marketing strategy it will fail.

There you have it! A quick overview on what it takes to make a brochure successful. Of course there is a lot more to the process which is why hiring a good graphic designer is important. But if nothing else this should give you a bit better understanding and appreciation of what it involved in creating good marketing piece.

The Redesign

IMS Website

Old IMS WebsiteHere is a quick snapshot of the old IMS website homepage. Click on the thumbnail to open a larger version of the image in a new window so you can follow along as I describe the issues with the website.

From the start you can see that the design itself is not very appealing. However, for me the lack of functionality was a much larger issue. I am no fan of overdesigned websites that make it hard to navigate, find content or are sluggish to load due to the use of flash or a lot of unnecessary images.


Main Issues

Not cross browser/platform friendly

As you can see the feature story (#2) does not sit neatly inside the blue shaded area. It looks fine in Internet Explorer, however, breaks apart in pretty much any other browser.

Lack of hierarchy

What are you supposed to look at first? Everything is about the same size with the same amount of emphasis making it hard to focus on anything. Remember, if you bold everything nothing stands out.

Poor menus

You cannot see how the menus functioned from this image; however, suffice it to say that they used a lot of JavaScript. Fly-out menus, with multiple levels, were used which made it hard to click on a link, as they would close up as soon as your mouse deviated off of the very small hover area. Worst of all, the menus were basically unusable on a mobile device.

Furthermore, the menus were poorly organized; sections with the same name would show up in multiple locations confusing the user in their search for content.

Website not centered horizontally

This is one of my pet peeves, and not everyone might necessarily agree, however, I am a big proponent of centering pages horizontally. I myself use a widescreen monitor, as more and more people are, and having to look to the left to look at a webpage is quite a nuisance. Especially if I plan on spending a lot of time on a page reading, it must be centered!

As you can see by the items mentioned above, this website had quite a few challenges to overcome, but there was more. Here is a quick breakdown of what else needed to be fixed:

  1. Text as image: As frustrating as it gets! The company’s address and phone number are displayed as images; which means you cannot highlight and copy/paste the information.
  2. Feature story does not stick out: The lead story is supposed to be the one to draw the most attention as it displays the most important issue. This does not happen here, the story gets lost with the rest of the design.
  3. Poor Menus: As mentioned before, poorly designed menus and they use images for text to boot.
  4. Google does not blend: The search box sticks out like a sore thumb; no CSS has been applied to make the design conform to the rest of the page.
  5. Links overpower the page: The links on the right hand side are unorganized, have no consistent style and are in general too large.
  6. More links: Again same problem as with number 5. And why are these on the left-hand side all of a sudden?
  7. No clear footer: Footers are necessary to show the user that a page has ended. Often pages that do not load fully will show up without a footer; however, this one is designed without one!

Solution: The Redesign

New IMS WebsiteThere you have it! Those were the main issues I was confronted with when I tackled the IMS website. All of the issues I mentioned were fixed in the redesign and the feedback we received from users was overwhelmingly positive. Our daily unique visitors shot up from 2,000/day to 10,000/day in less than two months.

As you can see the menu is now user friendly and cross platform compatible, the pages have a clear hierarchy now as well as interactive features, such as comments and quick polls. I have also made it a point to highlight important areas of the website with a top menu making it easy for users to find the most requested sections.