Trey Ingram

Graphic Designer

28

11

Design Extensions Web Icons

I have always held a passion for clean, vector-made badge icons. When I came across this Skillshare class, I just couldn't pass up the opportunity to learn from one of the industry's best. I began by listing my interests, and from there my mind-map notes led me to a couple of ideas that seemed worthy of pursuit.

My fork in the road looked like this:

 • Future clubs for Major League Soccer (ficticious, of course).

 • Website icons for Design Extensions new and improved website.

Choosing a Path

The choice was difficult to make, but eventually I came to decide upon the website icons/badges. I currently work for a company called Design Extensions located in northeast Florida, and one of our major ongoing projects is a total rebrand of our digital agency. The website refresh has been a massive team effort, and the projected launch date is drawing ever closer. I realized that some of the key missing ingredients are the icons and illustrations. The next step was to take a closer look at the website's pages, and determine where these illustrations would be most effective.

Here is a list of the 8 different icons I chose to attack:

  • Mission
  • Blog
  • Branding
  • Web Design
  • Online Marketing
  • Printing
  • Create (Call 2 Action)
  • Connect

To the Sketchbook!

This is where the pencil hits the paper. Cranking out ideas is definitely much more efficient when you can quickly draw the thoughts bouncing around in your head. Here's a look at the sketches I came up with. I will most likely sit on these for a day or two and then add more refined sketches to the project. Stay tuned!

Style Inspiration

Here are some examples I pulled from Dribbble that really appealed to me in terms of style. I admit I am a bit torn between using a bold stroke for these icons (like the b/w examples), or rather to go with a non-outline approach (as in the color examples). Most likely, I will try one badge with both styles and then determine which will be the winner. My aim is to focus on a minimal color palette, which is already defined since these icons are destined for the Design Extensions website. I will upload the color palettes soon for review. 

Color Palette

First Icon

Worked a bunch on this first icon in order to develop the style and to find out if my color scheme would hold true. I ended up not using the medium shade of grey, and went with a four color palette. Overall, I am pleased with the result of this first one. I am attaching a close up (detailed) view of the textures I used...not totally committed to it though. I also will include a side-by-side comparison of the icon with and without texture. As always, your thoughts / feedback are definitely welcome!

After some late hours, and much reflection...I decided to ditch the texture on this series. It was already pretty subtle, but I just kept coming back to the overall clean style of our website design and brand. From that perspective, it made more sense to keep it crisp.

Continuing the Series

Check out the attached to see my options on the Mission badge, and also the Blog one as well. I'm thinking I will use a variation of background badge shapes, keeping the colors consistent throughout the series. I am also thinking I want the folded banner element to remain the same on all eight of these. More badges coming at ya soon!

And Then There Were Four...

Halfway done with this icon series! The next four will be the ones representing each of the 4 service areas. Stay tuned!

Comments

Please sign in or sign up to comment.