Vine Website Process Book

Page 1

PROCESS BOOK MARGARET BENT INFO ARCH 2 SPRING 2018



PROBLEM

Vine was an app from 2013 to 2016 that any user could upload six second looping videos and inspired, entertained, and given rise to a creative community. From comedians to musicians to fandom edits and sports, Vine creators have shaped pop culture. The app was unfortunately shut down, leaving only a camera app with no platform. The videos are now on twitter, if the user posts them again, in fanmade youtube compilations, or on Vines website. There is no platform or simple way to track down specific vines or see what had been made from a specific time.


CURRENT WEBSITE

Vines current website is a highlight reel of the most watched vines or viners, not the creative App it had been. There is no way to search for dates, viners, or specific videos. There is no way to see less popular vines or vines that weren’t made by super famous viners when many of the best or breakthrough vines that spur a trend are from random vine accounts.



AUDIENCE AND GOALS

The audience is people who want to experience vine again, find vines, and to discover ones that are new to them. This website is to be a tool to find that vine that’s been stuck in your mind or to find discover the start of a meme you loved. It’s to archive and memorialize the creativity that one app brought to their community.



INSPIRATION

Looking at websites that are more experimental or new ways to set up data it became clear that this website would have some funky features to it.

http://uix.me


http://play.studiogusto.com


https://amessagefrom.earth/sounds


http://www.bigsound.buzz



SKETCHES

While sketching there is experimentation with how to lay show time frames, users, and experiment with type. There are five main features or pages at this stage: home, date, surprise, viners, and timeline. This is where user flow and hierarchy began to take shape.


WIREFRAMES

This was were balancing the current branding and a new look for it while bringing in the app features and layouts became important to mesh with how this website was going to be shaped. Something to bring up the fun and weird community that was vine.




USER TESTING

While testing out the website on roommates and fellow classmates it needed to be strict with which directions allowed certain actions and colors to be more consistent. The learning curve was rough but once they got the feel for the website it became pretty intuitive for them. Some comments were: very simple, maybe too bright, and more movement.


DRAFTS

The changes in color and imagery began to take shape draft after draft. It began to incorporate the current Vine icons while still experimenting with how to organize, also throwing out elements that just weren’t going to work.



Populations of Trends and Viners.

The categories are home, date viner, trend, timeline, and suprise. Each has a strict grid with the ability to click on any vine and get the information and repopulate the page.


FINAL

This is where the the movement and features of the app took its final shape while taking in the past testing and fine tuning the userflow. The finals challenges was gathering and editing all the vines needed for each page, and getting the animations correct at this point. Here are some moments.



Timeline, Suprise, and Home.

The suprise page is probably the most chaotic, the only sound on a page is the main focus, the timeline never plays sound unless pressed.



COLOPHON

The typefaces used in this project are Avenir Next and the colors, icons, and logo are taken from the current Vine branding. Vines shown are real vines taken from vine.co. This website was created after realizing Snapchat did not need a website, and trying to change the App would be in vain as they keep doing that themselves.



Turn static files into dynamic content formats.

Create a flipbook
Issuu converts static files into: digital portfolios, online yearbooks, online catalogs, digital photo albums and more. Sign up and create your flipbook.