Initially, my design comps showed a divided scrolling action happening on the gallery page, but I couldn’t get the scrolling to work without sacrificing the other jQuery functions. My solution for that page ended up being the sliding effect with color filters. I wanted the labels to not say “Before/After,” but rather something about the image/camera that took the photo. However, to modify that, I had to go into the SASS document that was provided and I couldn’t disperse the parts of SASS. I left it alone so as not to break the jQuery.
With this project, I felt a little more comfortable with modifying and writing jQuery, but yet not enough that I was able to make everything fit the product exactly. Looking back, it seems counter-intuitive to have a separate home page when it could just scroll down. I think the user experience could have been better and easier to navigate, but I focused on getting the interactions to work and better understanding jQuery with the design I had come up with.
The 360 degree images took the longest to figure out because all the cameras would revert back to the same image at one point. However, it worked out in the end. The animation that occurs in the Lomography type on the homepage could also be incorporated elsewhere, such as in the patterns on the gallery page. There could also be some cleanup such as fixing positioning and headers.
Overall, I was pleased with what I was able to accomplish for interactions, but I do think the site could do with a more finessed design.
What I’m working on…
HTML/CSS – nav bar, floating images, photoshop filters for images
- What is it trying to sell?
Orange amps makes a variety of amplifiers for musicians as well as a few guitars, a pedal and some accessories.
- How is it communicating the value of the product?
Through large hi-res images, video and audio content.
- How is it communicating the experience the product has to offer?
Images of the gear include hover states that one can click on to learn more about a certain detail on the product. There are also audio demos.
- What is the “character” of the product? Does the design help convey that?
The product design includes the color orange everywhere. The site design does the same thing. The product is loud and expressive and the site is designed to be seen large and up close.
- Is it successfully meeting it’s objectives? (Is it convincing?)
The website successfully displays the product and all its features. Not only are there images of the product, but there are detailed descriptions that talk about all the cool things it does, lists of features, artist statements, audio, videos and Orange also offers opportunities to learn guitar by having classes.
Project 2 Design Comps!
Project 1 evaluation:
I had great big plans for project one! Some of them worked and most of them fell through. It was quite a challenge figuring out how to make a space that the user could freely explore. Initially, I had wanted to use arrow key navigation to make the space have some sort of path to follow, but in the end, the navigation ended up being a combination of arrow keys and scrolling which may be a bit of an odd way to do it. I may not have put enough Sections in my HTML for the Grid Scrolling to be 100% effective.
There were also little “magical” bits that I would like to have added to the website to make it more dynamic such as glowing stars, more engaging Warning! waypoints, a star cursor effect when hovered over an image. What took the most time was figuring out the layout of the space, getting the text to sit in the boxes, having the flip work and trying to fix the parallax so that the stars that are on the homepage occur throughout the entire website. Grid Scrolling and Stellar seemed to be conflicting here. It was great learning to work with a parallax effect and it was quite exciting to get some of the Grid Scrolling to work! Definitely a small accomplishment that had me jump out of my seat and do a little dance.
It was also challenging trying to figure out how to animate SVGs in jQuery so that the paths would draw themselves as the user scrolled through the site. I imagined the SVGs on my site would be activated by using the waypoints plugin. However, animating the SVGs didn’t work out in jQuery, nor did it work when I tried it in CSS. Having never worked with jQuery before taking this class, I learned that there are many plugins for animating SVG paths that are not very intuitive.
Overall, this project was a challenge in learning how to use jQuery and how to tell a story with interactions. I am pleased with what I was able to learn and accomplish within the timeframe.
Project 2 comps: