I started sketching random ideas, and fell in love with my tree idea as soon as I sketched it out. I loved the idea of a city that bleeds into a forest scene. I needed to incorporate my fruit icons from the last process, so I decided to expound on this website and have it be different locations that you can grow fruit.


Draft – Wireframe

The last two sketches above are actually wireframes that are a little more put together. I took my two best sketches and expounded on them a little more. This helped when I was going and actually developing the website into vector.


I was able to get feedback from several different peers on my design once I had started to vectorize it. I designed in black and white first to try and keep shapes and tones in mind, rather than trying to worry about all of it at once. They suggested I add some bushes and a house in between the city and the forest to make it blend through a little better. I also got the idea to create a mouseover effect with the text and fruit icons, so it made a little more sense with the design.



The final design comes in three parts. The first is the home page, in normal view. That is the colored version below. Then there are parts of the website that will pop up and highlight when you put your mouse over them. The second one shows a few different places that the mouseover effect would come up. Then there is the about page example, which has the words from my process of the fruit icons. Below that are close up screenshots of the design, for better detail.

KellyM-Website-Home KellyM-Website-HomeMouseover


Screen Shot 2015-10-21 at 11.18.20 AM Screen Shot 2015-10-21 at 11.18.55 AM Screen Shot 2015-10-21 at 11.18.42 AM