Icons

Big Dogs, Small Icons

My Process: Big Dogs, Small Icons

For my icons I decided to turn big dogs into small icons. This was an exciting project for me because this was one of the first times that I made something in Illustrator, especially such a big project. I knew for a while that I wanted to have dogs as my icon set, I just didn’t know how I wanted them to look, so I hit the notepad and began sketching.

Sketches

Sketching is an awesome opportunity to get your ideas onto paper before illustrating. I turned on classical music and let my mind wonder into a world of dogs and creativity. After I sketched out my images I placed a star by my favorite ideas so that I could think more about what I wanted to do. I determined that I wanted my icons to be a profile of large dog breeds with strong angles and no eyes. Next, I jumped into Illustrator to sketch out my first six dogs.

First Draft

This was my first draft of my dog icons. I knew before jumping into illustrator that vectors should be made up of shapes rather than thin black lines. In my class my teacher pulled up all of our drafts and critiqued them in front of the class. It was really nice to receive public critique because it helped me to really remember what I needed to fix. The main thing that needed correction with my drafts was that I had way too many tangents in my designs and there wasn’t enough of a consistent item to bring my icons together, so I decided to add a shadow under each of the dogs necks.

Final Icons

Janae-harker-media-big-dogs-small-icons

I learned so much during this project about Illustrator and design. After studying more about tangents I was able to remove the tangents from my designs and add six more dogs to my icon set. The biggest challenge and lesson that I learned while editing my final draft was that the shape builder tool is not always the best tool to use because sometimes it will bring in extra anchor points. I also learned that sometimes less is more, especially when it comes to a small icon. I demonstrated this by narrowing each of my dogs’ individual color schemes so that it would be more simplified. And last of all, I got to learn more about different large dog breeds.

Vector Website Process

Flower Power Website

Website Design Process

I was excited for this assignment, because I love writing html and CSS. What I found, however, was that it is a lot harder to think outside the box for me. I know what is required to make a design happen in reality, so I found myself backing away from more complex designs. The object here was to create a site that could showcase or implement our icons. I went to sketching, and got a couple of ideas that seemed to work for me.

20151014_120155-01-01    draft

I liked the second to last design the best, and others seemed to like it too, so I went to developing it into a wire-frame. What you see below is what came of it, not too much more came to me in this process, as I needed to see what it looked like in color.

bharker-website-draft

When I started into further development things got trickier. Some of my feedback suggested I shrink the header, and move my icons. I originally wanted to use the exact same colors used in my icons, but I wasn’t pleased with how they were coming out, I felt like I had a really low contrast design, and it was putting me to sleep. The colors just weren’t working, so I went to the web for inspiration. I noticed a couple of things in doing so. First, a lot of the flat designs I looked at had really bold colors. Second, there was a lot more white implemented.

bharker-website-draft2

I took those things to heart, and went to work. I liked the white on color look a lot better, but I had to fine tune my colors a little bit. I also implemented a lot more white, which helped it feel a lot cleaner, and made my images feel more like they belonged. I redesigned my header to make it smaller and more compact, and brought my images into better alignment. Below is my final result:

bharker-website-final

I was happy with how it turned out, and hope you like it. I am always open to feedback if you have any ideas! Below is a copy with notes about styling, and response with the webpage for future developers. These notes help them know how the design will fulfill my clients needs.

bharker-website-final-notes