Communication through the Ages Parallax scrolling website by Jiaxin Yu |
Home > Winners > #36444 |
 |
|
||||
| DESIGN DETAILS | |||||
| DESIGN NAME: Communication through the Ages PRIMARY FUNCTION: Parallax scrolling website INSPIRATION: I got the inspiration from Atlassian's info-graphic poster. UNIQUE PROPERTIES / PROJECT DESCRIPTION: This is a parallax scrolling website introducing the evolution of communication through the ages. Each age is depicted in a color illustration. While the background and the costumes changes, the male characters' positions are fixed. The parallax scrolling technique makes it possible to show the gradual changes. The last illustration, which shows a large question mark, prompts the reader to think about the future of communication. OPERATION / FLOW / INTERACTION: I created a simple storyboard as a guidance. The website flow is very similar to a book's structure: front matter(my website’s first title page and introduction pages), body matter(my website’s ten content pages), back matter(my website’s ending page plus social network promotion). Every scrolling the person make on my website will direct him/her to the next stage based on the timeline of the story. PROJECT DURATION AND LOCATION: The project started in January 2014 in New York and finished in May 2014 in New York and was exhibited in Manhattan Center in May 2014. |
PRODUCTION / REALIZATION TECHNOLOGY: I draw all the visual's in Photoshop and then built the parallax scrolling website using HTML, CSS, and JAVASCRIPT. SPECIFICATIONS / TECHNICAL PROPERTIES: The promotional poster's size is 20 in by 30 in. The website is partially responsive. TAGS: parallax scrolling website, illustration, story, education RESEARCH ABSTRACT: Since I didn't have solid coding knowledge before. I mainly researched the parallax scrolling technique and the responsive design technique. I spent a lot of time watching tutorials, testing, and debugging. CHALLENGE: I think the most challenging part for me is to get the idea of using multiple parallax scrolling technique to tell the story with timeline. This techniques is supporting the content a lot in my piece. ADDED DATE: 2014-09-16 09:33:02 TEAM MEMBERS (1) : IMAGE CREDITS: Jiaxin Yu, 2014. |
||||
| Visit the following page to learn more: http://holdon-app.com/communication_thro |
|||||
| CLIENT/STUDIO/BRAND DETAILS | |
 |
NAME: Pratt Institute PROFILE: Pratt Institute is a private, nonsectarian, non-profit institution of higher learning located in the Clinton Hill neighborhood of Brooklyn, New York, United States, with a satellite campus located at 14th Street in Manhattan. It originated in 1887 with programs primarily in engineering, architecture, and fine arts. Comprising five schools, the Institute is primarily known for its highly ranked programs in architecture, interior design, and industrial design, and offers both undergraduate and Master's degree programs in a variety of fields with a strong focus on research. The Communications Design (ComD) major at Pratt is the only program in the country that recognizes and embodies the convergence and integration of Illustration, Advertising, and Graphic Design as the primary forces for the visual expression of ideas. Words, images, strategies, motion, and sound—whether on a page, wall, television, laptop, or phone—are the tools you need to communicate a message across all platforms. In ComD we teach our students how to craft the strongest and most impactful communications possible by being creative problem solvers and elegant image-makers. |
| AWARD DETAILS | |
 |
Communication Through The Ages Parallax Scrolling Website by Jiaxin Yu is Winner in Website and Web Design Category, 2014 - 2015.· Press Members: Login or Register to request an exclusive interview with Jiaxin Yu. · Click here to register inorder to view the profile and other works by Jiaxin Yu. |
| SOCIAL |
| + Add to Likes / Favorites | Send to My Email | Comment | Testimonials | View Press-Release | Press Kit |
Did you like Jiaxin Yu's Web Design?
You will most likely enjoy other award winning web design as well.
Click here to view more Award Winning Web Design.
  |
 |
