Design

Geometric History

A series of Christian and American history illustrations we did for American Heritage School.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Design House Updates & News

HireCloud Branding

A close up look at the creation of a brand.

We recently had the opportunity to work with HireCloud, a tech startup that’s aiming to revolutionize the hiring process for low-wage, entry-level jobs. Their goal is to make it easy to hire and get hired online.

HireCloud needed to speak to a very specific audience: the high-school to college-aged job seekers and the managers who want to hire them. The logo needed to appeal to both those groups. It also needed to convey the company’s name, the fact that it’s online, and the fact that it’s a place where you can find a job.

 

 

Conceptualizing
After lots of brainstorming, two symbols were chosen to tell the story of HireCloud. The tie and the cloud.


The tie represents the employment and the job search. The cloud represents the online nature of the HireCloud’s services. The cloud also hails back to the company’s name. Using Combination, the oldest trick in the book, we took the symbols and merged them into one.

 


 

 

Finally, after hell-bending brainstorming and arduous sketching, and lots of ideas, this is where the pencil lead us:


Tweaking
Next came computer iterations of the sketched ideas. This brought on a host of tiny tweaks and perfecting pinches. Using the basic cloud shape, we tried lots of options in an effort to tell just the right story.

 

 

 

 

 

We wanted to ensure the icon was perfect, geometrically as well as conceptually. After lots of revisions and time for ideas to percolate, we came up with just the right icon. As a crowning touch, we added a final bump to the cloud (just to make sure people didn’t think it was a sombrero).



Typography
After the icon was perfected, the next step was to creating a typographic element for the wordmark. After some consideration, we chose Avenir Medium as the base of the wordmark font.


 

Avenir had the structured, reliable look we wanted to brand to convey, but it was a little hard. So next we added fitted circles to the  terminals of each letter. This gave the Avenir base a more rounded, friendly feel that would make consumers feel comfortable (rather than being intimidating by an overly-corporate look).

Modifying the typeface also made HireCloud’s wordmark ownable and unique, distinguishing it from other brands.

 

 

Color, Pairing, and Voila!
Finally, with the typographic solution finalized, we paired the logo and wordmark and selected a color palette to bring the brand to life. The palette was drawn from natural sky tones to accompany the idea of clouds – soft, easy, and clean.
Then we plugged it all in, and the logo was born.

 


 

 

And that’s the logo!

Now that the logo is finished and the client is happy, we’re excited to begin work on the HireCloud website and app!

 

P.S. There’s more to design than just concept, color, and typography. Our design process draws heavily from the Gestalt Principles of visual interpretation. For a more detailed breakdown of what we’ve done here, please visit our Gestalt Vault where we offer technical explanations of our design work. P.PS. If this link doesn’t work, it’s because we haven’t created the Gestalt Vault yet, but we will.

 

Design

How To Create Effective Icons

A practical guide by Andrew that appeared on the prestigious awwwards.com blog.

 

I am maybe what you would call an iconophile. I LOVE icons, and I love making them even more! As an artist, my background is heavily in drawing – I love drawing, and I have been drawing all my life (far before I even knew what graphic design was).

This, I think, is a key into my understanding of creating icons. Drawing teaches you to see – and then to translate what you see into line and shape on paper – and that is exactly how you create effective icons.

 

Geometry

So, for starters, essentially anything can be made from combinations of these four shapes:

 

 

When I want to turn something into an icon, I look at it and break it apart into the most simple shapes possible. For example, a water droplet can be made using a triangle and a circle.

 

 

A heart icon can be composed of two circles and a triangle.

 

How to create a heart icon

 

I always create these shapes in Adobe Illustrator. Working with vector shapes give me control over the thickness of the lines, and interactions of the shapes and their anchor points. Illustrator also gives me the freedom to turn my lines into shapes, and visa versa. This all may seem extremely elementary, but it is the same method I use to create the most complex of icons. Here is a slightly more complicated example of an icon of the bill of rights I worked on recently, where I applied the same principals.

 

How to create a heart icon

 

Interface Icons

I recently got to do a set of icons for an awesome iPhone app called the Parker Planner. I really enjoyed working on this project, and one of the most important aspects of the project was to create an understandable, ownable, functional, and beautiful set of user interface icons that would help users navigate this semi-complicated planning application.

 

How to create a heart icon

 

Let’s take one of these icons and break it down to see how I created it. The trash can icon, for example, is composed of three rounded rectangles and three lines.

1. Choose the Rounded rectangle toolHow to create a heart icon

 

2. Drag out a shapeHow to create a heart icon

 

3. Play with the stroke weight until you’re satisfied.How to create a heart icon

 

I usually choose one or two stroke weights to use throughout a set of icons.How to create a heart icon

This helps them look more consistent and feel more cohesive.

4. Create the lid with another rounded rectangle.How to create a heart icon

 

5. One more rounded rectangle creates the handle of the lid.How to create a heart icon

 

6. Erase the bottom half of your rounded rectangle.How to create a heart icon

 

7. Now add the stripes on the can by adding three vertical lines to the can’s body.How to create a heart icon

 

8. And there you have it! A trash can icon… if you like, you can play around further with color or line weights.

How to create a heart icon

 

A few other really helpful tools I use often when creating icons are the pathfinder, which I use to cut, join, and knock out shapes;

How to create a heart icon

 

The Stroke/Fill tool, which helps you toggle shapes from fill to stroke.

How to create a heart icon

 

And my very favorite tool, the Stroke Panel, which helps you transform corners and line terminals from straight to rounded.

How to create a heart icon

 

When I am finished with a set of icons, I usually line them all up next to each other to see if any of them look weird or out of place. Then I make any necessary changes.

How to create a heart icon

 

Lastly, I always test them in-app to make sure that they feel right and function well.

How to create a heart icon

 

In the end, I would say that the way to create great icons is more than just learning illustrator tricks, although that is necessary as well. The best thing to do, is to practice breaking things you see around you into simple shapes. And the better you get at that, the more masterful iconographer you can become! Cheers.

 

Here’s a link to the article on the awwwards blog.