Project 2 final & Reflection

here it is! 

It is mostly responsive so check it out on all devices!

I think this project came together really well. There were some challenges with how I would make certain animations convincing and functional to the user, but I think the solutions I came up with were a good fit. I would have really liked to developed a e-commerce section to allow people to choose which pieces they wanted to buy but that was a little over my head. I also wish the responsiveness would have scaled accordingly as the browser window was changing on top of my max-width media queries but at least on all standard size devices it should look good(phone, tablet, pc). There could probably be some design improvements made but I think the overall functionality is better then some other sites I’ve made in the past and was really my focus for this project.


Stuff I am working on and planning on achieving for project #2

Done so far-

html: still need to format and add some more content

css: 80% of html that is coded has correct css applied.

js: I want to add some more click options further down in my page for content that I am still working on.

before next class-

html: have 100% done

css: have 95% done

js: hopefully run into problems for solving and get this working

Make whole thing responsive through bootstrap or orderly

Annotated Comps & Progress

Here are my annotated comps and the progress on my site so far. I guess I have been working zoomed in so maybe scale down for safari and chrome, but hopefully I can integrate a responsive framework to make that work out in the end. Still working on some of the bottom functions and content. I did get waypoints and scroll-to running properly finally so thats awesome.


Project 2 Pages First Rough

Here is how my site would flow through each of the pages. I haven’t exactly figured out the adapters section and how that will function yet but I would like it to pair it with the app and show each of their functions simultaneously. Then the last part where the user builds out their own case might be tricky but we’ll when we get there. I want this to be totally responsive with parallax scroll and other cool functions. Lets see if we can make it happen.


Product Analysis

53 Pencil – stylus device 

  • What is it trying to sell?

The 53 Pencil that pairs with apps for apple touch screen devices, but will also work with other tablets and devices as a plain stylus.

  • How is it communicating the value of the product?

Through informative animations that show that its more then meets the eye along with Q&A sections that clear up any misconceptions.

  • How is it communicating the experience the product has to offer?

Through a variety of imagery/ videos/ animations/ background/ how to’s/ etc…

  • What is the “character” of the product? Does the design help convey that?

This pencil has a very sexy character, the design of the product and website feel cohesive.

  • Is it successfully meeting it’s objectives? (Is it convincing?)

Yes, I might buy this product if I was in the market for such a device.

Screen Shot 2015-05-17 at 5.17.25 PM Screen Shot 2015-05-17 at 5.17.44 PM Screen Shot 2015-05-17 at 5.18.10 PM

Project 1 Reflection & Wireframes

Project 1

I learned how to work skroller very effectively minus using it to– transform:scale (##);. I wish I was able to figure out some other Jquery functions to animate my map better and add click states. I really need to get some jquery working in my next site and start with a responsive template. This is going to be one of my main goals going into this next one.

Project 2

I’ve decided to make a website off of this kickstarter idea that I found for Nexpaq. I think this product has enough functionality and variety that I can make something unique for the site.

Below are my sketches and the start to my digital mockups/wireframes.

IMG_3038 Nexpaq