© 2011 ian Icons & branding marks, part 1

Icons & branding marks, part 1

I heard this tongue-in-cheek joke a lot during my time in design school: “Those who can’t draw become graphic designers.” I was hoping that this really wasn’t the case, but the fact that I don’t know how to draw from memory was frightening. However, I do find that I am able to hold myself well when drawing with some inspiration, such as photographs or existing imagery found on the Internet. The fun part is trying to adapt this new artwork to fit in amongst its environment & to make sure that it abides by existing patterns.

This falls under both the print & web categories of my portfolio, as some of my icon sets overlap in both mediums. I’ve been grateful that I get to use my illustrations on websites, email campaigns, and even on print.

Labcompare icons for a landing page

I was tasked to design this two-column landing page with a lead form. Our shareholders deemed that all the fields in the form were essential, so the height of the page was dictated by the length of the form. The left column needed to be filled out (ideally with relevant information) to attain visual balance of the page.

Copy has been written, but some graphical elements would be beneficial. We wanted to create content that would convey incentives for users to sign up, so I skimmed the copy to find bullet points, with which I would be able to create icons to accompany them.

Inspiration for these icons were found from a Google Image Search, but they were created from scratch in Photoshop & its mesh tool. I made sure that the icon set was monochromatic to match the scheme of the site, & gradients were utilized in the site’s pattern library, this gave me freedom to use 3D elements.

Icons used on a print flyer for Dentalcompare

Similar requests would be made for print. Our flyers were once verbose pages of text, but in recent projects, we have designed our print materials to use bite-size pieces of information, effectively removing excise by explaining our processes in the least amount of steps as possible. New icons associated with the text can now fit with the new-found space.

The branding’s color scheme of orange and teal to match the current print layout, which, in turn, matches the icons. The logo is designed with rounded edges, so to echo the pattern, all the icons contain rounded corners. These were created initially in Illustrator, then dropped into InDesign for layout.

Monochromatic icons to match a monochromatic, three-dimensional logo

Again, an icon series for another landing that depicts a step-by-step wizard for our Biocompare vertical. It’s logo is mainly a light & dark blue, but since the logo utilizes a 3D effect, the icons were able to reflect the same presentation. These were made in Photoshop with vectorized elements & the mesh tool.

Quick idea mockups for a food production & prepraration equipment shopping website

Designing a logo is an arduous task, requiring many sketches, renditions, and just coming up with different ideas in various variations. After a quick notepad sketch session, my ideas are translated onto Illustrator. I find myself sketching on Illustrator is sometimes faster than sketching on paper & colored pencils.

Here were a few variations for a branding mark for a food technology-related website that was released a while ago. The mark was to appeal to people in the food preparation industry, so a color scheme was chosen to be subdued & non-playful, as well as to relate to an industry at the grass roots level. A quick brainstorming mind mapping session showed that I had to bring silos, factories, grain & crops, and sterility into one compact image.

High-fidelity silhouettes for use on a laboratory company's business card

These illustrations were drawn to decorate a business card. Scientists are comfortable with the technical aspects of graphic representation, so I made sure that these silhouettes contain as much detail as possible while being easily recognized as tools of the lab. Images were sourced from the Internet, then were traced in Illustrator to create these vector silhouettes.

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>