Prototype of "Happiness Is" Site

For my photography, I'm going to talk about the lo - fi prototypes I made on index cards and the hi - fi prototypes I created in Adobe Photoshop. 

Index cards - lo - fi prototypes

Once I decided on my site and what I was going to do, it was time to create the lo - fi prototypes. For my lo - fi prototypes I drew out on index cards just a few thumbnails for what I wanted my main pages to be and look like. The main pages I chose are Home, About, Contact, and Content.

iPhone templates - hi fi prototypes

Next, after I created my lo - fi prototypes I scanned them onto my computer and then opened them in Adobe Photoshop. Once in Photoshop, I then either outlined them or found a photo on Google that was similar to what I wanted to use as a template to create an outline. I did this for each of my pages. After this I then decided on a color scheme, fonts, text, and images. Finally I saved them as a jpeg and have my final hi - fi prototypes. 



The photo below is the scan of my four main pages for my web site. The pages are landing page, contact page, about page, and home page. I changed some things up a bit from what I had originally planned in these lo - fi prototypes. 

The images below are the hi - fi prototypes of my site "Happiness Is." These are based off of the photo above from my lo - fi prototypes on the index cards. I created these in Adobe Photoshop. I used an iPhone template to see what it would look like on mobile. Then, I put it into Invision to make it clickable and finally put it into Adobe Dreamweaver to do the coding, the site didn't go live. For some of the outlines, I did use photos from Google as a reference for an outline.