Chris Lopez Project 2 Self Evaluation

Screen Shot 2015-06-10 at 12.06.44 PM

Project 2 started off smooth for me, I went with a simple design and a product that already had solid branding so that I could focus on the code. The HTML and CSS went very smoothly for me, it wasn’t until I started using plugins that my progress came to a screeching halt. Applying the pagepiling.js plugin made my life easy, at first. I realized I could have saved some time by applying this plugin from the beginning instead of trying to vertically and horizontally centering the content in each of my sections as well as setting sections to the correct height for multiple device sizes. After setting up this plugin I tried many times, using different methods to have a navigation system that shows which section is active. I’m still playing with this part. I tried animating content on my site using a feature called “callbacks” that is built into the plugin, but the documentation is poor and I could not figure it out, though the examples make it look so easy. Trying to use waypoints to trigger the animations would not work unless I set the section to be scrollable, which is easy to do with the pagepiling.js plugin, however optimizing the height for different screen sizes proved very difficult.

I used Pure for a responsive framework and found only some features working and not the others, for example I made my grid layout with pure but the responsiveness does not work. I saw that one is supposed to add a serperate pure responsive stylesheet. I did that and that did not work either.


Project 2 Goals/Plugins

Today I am laying down the HTML framework for my site as well as moving into CSS.

I plan on using Waypoints to trigger bodies of text and images to from from the edges of the browser to their locked position while simultaneously fading in.

I plan on using stellar to create paralax curtain effects to move the user along each section.

Animated SVGs
I plan on using animated SVGs to show a full battery icon changing its state to a dead battery. This will involve the cells inside of it disappearing and changing their fill color to red. I plan on having a dashed line pulse and rotate around a laser sensor, as well as have a pulsing circle around the Apple Magic Mouse to show that it is wireless and to show its range.

CSS Animations
z-transform to make it look like the magic mouse is clicking. I will embed audio that will play a clicking sound bit when the user clicks on the mouse.

Thanks to Young, for finding this plugin. I plan on having each page snap to its height and be navigable via a series of circles on the right. This plugin works on mobile, which is perfect because I am also making a mobile version of my site.

I plan on using pure as my framework to create a responsive site.

I plan on using javascript to show that the user can click anywhere on the surface of the mouse.

Interactive Product Site Analysis, Additional Wireframes, Comps, and Annotated Comps

Oakley Airbrake MX Goggle.

What is it trying to sell?
This site is selling what Oakley is considering a pair of game changing motocross goggles. However, right off the bat the site is clearly selling more than the product, it is selling this feeling that by wearing these goggles you’re invincible. The site does this by the use of copywriting, photos, videos, and animations.

The first example is of this is bold type that reads “I am Invincible.” Bold statements are repeated throughout the site, examples include “Airbrake MX A Revolution In Impact Protection,” “A confidence-inspiring force field,” and “Maximum peripheral.”

Screen Shot 2015-05-19 at 12.09.16 PM

How is it communicating the value of the product?
The value of the product is clearly communicated great visual examples that help one to visualize what happens when one is wearing goggles. The first, more visceral example of this is a parallax scrolling effect that moves dirt clods toward the goggles as the user scrolls. I haven’t seen this done before so it gets some originality points. It is also very appropriate for the context; motocross goggles. Other features, such as it’s wide field of vision is shown by rotating the goggles and placing a compass graphic under the goggles to highlight the range of view. As someone who wears goggles for snowboarding and riding motorcycles this is really important and shown in a clever and pleasant way. Images of riders on the track covered in mud everywhere but on their goggles helps to show the goggles in a real world context. One of the best features, in my opinion, is the adaptability and serviceability of the goggles. The site uses an animation that separates the components of the goggles in an exploded diagram. This part shows how the lenses can be quickly replaced and all of the options they can choose.

Screen Shot 2015-05-19 at 12.09.36 PM Screen Shot 2015-05-19 at 12.09.42 PM Screen Shot 2015-05-19 at 12.09.48 PM

Screen Shot 2015-05-19 at 12.06.36 PM

Screen Shot 2015-05-19 at 12.14.51 PM

How is it communicating the experience the product has to offer?
The goggles are nearly life size and that really helps the user picture the goggles on their face with dirt clods flying at it. The experience of the product is communicated simultaneously with the value in many examples such as the dirt clods flying toward the goggles. This example shows the impact resistance as well as something that happens often while riding in the dirt (being hit in the face with dirt).

What is the “character” of the product? Does the design help convey that?
The character of the product is conveyed through bold type, bold statements/copywriting, photography of riders in context, as well as a few videos highlighting the features of the product. The language or voice of the videos is a little over the top if you’re not into motocross. For example my girlfriend’s brother was mocking the videos while I was watching them. “Goggles are life bro!” Is what he would say while I watched the product videos. I believe that the language and helps convey the character of the product, though maybe a bit too much for someone who is not familiar or involved in the motocross, or action sports scene. Some might think it’s heavy handed (girlfriend’s brother).

Is it successfully meeting it’s objectives? (Is it convincing?)
I believe that Oakley was pretty spot on in meeting its objectives with this interactive site. Holistically, it works well, each component such as the bold sans serif type, the copywriting, the photos of riders in context where the goggles are used really helps to see how the product is used and abused. This helps the user to understand why the highlighted features are wanted by someone purchasing the product. I actually thought that the product would be more expensive because Oakley put a lot of work and probably money into the production of this site.


IMG_1972 IMG_1973 IMG_1974 IMG_1975


project2_comps_r2 project2_comps_r22 project2_comps_r23 project2_comps_r24 project2_comps_r25 project2_comps_r26 project2_comps_r27 project2_comps_r28 project2_comps_r29 project2_comps_r210 project2_comps_r211 project2_comps_r212 project2_comps_r213 project2_comps_r214 project2_comps_r215 project2_comps_r216 project2_comps_r217 project2_comps_r218 project2_comps_r219 project2_comps_r220 project2_comps_r221 project2_comps_r222 project2_comps_r223 project2_comps_r224 project2_comps_r225 project2_comps_r226 project2_comps_r227 project2_comps_r228 project2_comps_r229 project2_comps_r230 project2_comps_r231 project2_comps_r232 project2_comps_r233



project2_comps_r3_annotated project2_comps_r3_annotated2 project2_comps_r3_annotated3 project2_comps_r3_annotated4 project2_comps_r3_annotated5 project2_comps_r3_annotated6 project2_comps_r3_annotated7 project2_comps_r3_annotated8 project2_comps_r3_annotated9 project2_comps_r3_annotated10 project2_comps_r3_annotated11 project2_comps_r3_annotated12 project2_comps_r3_annotated13 project2_comps_r3_annotated14

Project 1 Evaluation, Project 2: Additional Wireframes & Rough Comps

Project 1 – Self Evaluation

I had a hard time with project 1. My first hang up was choosing a narrative, I had plenty of ideas, but choosing just one was tough. Thom helped with my choice, and in the end I think it was the right choice as it was the stronger narrative. However, that required quickly re-reading and reviewing to gather content. My biggest mistake was spending so much time gathering content, after I re-familiarized myself with the story and had what I thought was enough content, I went through several rounds of revisions just to boil the content down. I went into wireframes without having a clear sense of how I would break the story down into digestible chunks. I had to go back and story board my content. Here I realized I had way too many “slides.” I went through three more rounds of revisions, boiling the slides down to around ten slides. At this point I was behind and went back to wireframes, and then moved on to comps. I did not fully finish my comps before moving on to HTML and CSS, but I felt behind so I had to get some code going. I then gathered my final imagery and locked in my type choices. I treated all of the photographs with a consistent black and white film photography look to match the period of the book, as well as the photographs taken by Jon Krakauer, the author.

In terms of learning I did not learn too many new things because I didn’t get around to applying javascript or jquery. I feel fairly competent in terms of HTML and CSS but I learned a couple of new tricks and ways to be more efficient. I learned how to use Typekit, how to make a dropcap in a body of text, how to use Coda more efficiently and to take advantage of its plugins.

I wish I would have spent less time in the design stage and more in the coding. The way I’m approaching this new project is to spend little time designing and generating content and more time coding and learning jquery and javascript features. My goal is to get a good understanding of interaction in websites so that I can apply it to client websites, therefore I’m not trying anything too crazy as I don’t foresee clients wanting too many crazy features. Most of the people who approach me to make websites ultimately want it on some sort of CMS so that they can ultimately update and maintain their site. I want to learn efficient ways of coding and the proper way to code. Therefore I’ve been more interested in the less and sass, as well as minified demos you gave, as well as the boostrap and pure demos. I plan on trying to fully implement some sort of framework to sites I have designed before. I started adding pure to a website I started redesigning at the beginning of the term but ran in to many errors caused by my CSS and theirs.

project2_comps project2_comps2 project2_comps3 project2_comps4 project2_comps5IMG_1755 IMG_1756 IMG_1757 IMG_1758

Project 2: Ideas, Wireframes, and Moodboards

I’ve boiled my list of possible products down to the following:

  1. Apple Magic Mouse
  2. Kershaw Knife
  3. Gibson Guitar
  4. Chrome Backpack
  5. Milwaukee Power Tools

I’m looking to save time in the design stage by using my chosen product’s current branding and photography. For this reason I have chosen products that already have product videos and high resolution images, as well as well defined type choices and color palettes. Since this is a coding class, I want to spend most of my time coding and learning about interactive features. This is something I did not do much of in the previous project because I spent most of my time gathering content and figuring out how I would present it while respecting the narrative.

Wireframes and moodboards for Apple Magic Mouse option:


I would like to include the following features in project two:
Animated SVG, parallax scrolling, snapping scrolling to page, full page video, animated gifs or video player without interface pause/play on scroll

Ideally, I would like to show an exploded diagram of sorts, some sort of product animation whether it’s rotating it or showing it’s movement (for example if it’s a knife showing it flip open and close). I want to vary my layout by showing close ups, wide shots, side views of the product, as well as showing the product in context and in glossy studio shots.