Active Network - Visual Design Test
I found this assessment very exciting. I have truly enjoyed laying out websites as of recently AND I was able to work on branding (which is one of my favorite parts of being a designer.) Below, I have explained my design process.
Design Process
After reviewing the materials, I began sketching things that I thought related to the topic. The first thing that came to mind was a "King's Crown" and how it reminded me of a cupcake liner. I began sketching miscellaneous combinations until I found one that was promising.
Once I found the cupcake shape that I liked, I referred to Dribbble.com to see if there was a style that I could be inspired by. I found a couple and applied them to my logo design, which I executed in Illustrator. Once I was comfortable with my logo, I began working on color and color combinations that I wanted to use. I referred to kuler.adobe.com and created a color palette that I felt would really communicate with the audience.
Above is the color palette and logo I created. I felt as though it met all of the requirements for the target audience. The combination of logo and colors (in my opinion) project a hip, modern, social, and energetic feel.
The next step in my process was finding images for the wireframe. This took a bit of time but I was able to find images of cupcakes that looked unique and fun. I did have to go in and manipulate a few photos (the cover photo on the banner is a good example), and I added color overlays and such. In addition, I spent some time creating the look of my buttons. I wanted to make sure they were vivid and popped for the viewer. I also took the time to search for fonts, and ended up using a combination of Edmond Sans and Pacifico.
Once I had the basics of my visual style, I began laying it over the wireframe. I used a 12-column grid for the execution of this. I believe that it was a necessity to use the grid because it truly defines your space for all browsers. It also helps create a very clean and organized website.
Overall the execution of the wireframe did not take too long. I followed all of the given directions, but I did take it upon myself move a few elements (such as the login box, and the photos tab). I felt that this would be less repetitive and enhance the user experience. I also wanted to point out my search bar design. It looks as though it is just an icon, but I wanted it to have a much different interactivity than just a plan search field. I can better explain this in person (but wanted to inform, so that you knew it was like that for a reason).
I found this assessment so exciting that I wanted to place it into mock ups. I wanted to visually show you what I was thinking for the wireframe and how it would read on different mediums.
Overall, I found this to be a very fun and exciting assessment. Please let me know what you think, and please let me know if you would like to discuss the design further (I would love to!).
Sincerely,
Dillon Hesse
You can download the .JPG file here