Here's The Desktop Site That Will Help Vine Grow

  • Simply Zesty,

After looking at how Vine's app could be improved on Wednesday, we mentioned that one feature it's sorely lacking was a Web presence. While it's still very early days and the mobile-first strategy is a necessary move, the fact that there isn't a desktop site to view the world's creations is something that you would hope would be addressed soon.

We've already seen sites like Vinepeek, which shows you the latest videos loaded up in real-time, but what about a portal that allows you to see the most popular videos in the world or in your area? Or the opportunity to discover new content and users, creating a community similar to the one you would find on the likes of Instagram or Vimeo?

With that in mind, here is our vision of what Vine's new website should look like.

Concept Idea

When it comes to viewing videos, screen real estate really can't be beaten, hence the importance of an app like Vine to have its own desktop version.The intention here was not to reinvent the wheel, but to create a sleek interface that users would feel comfortable with. Keeping the consistency and ensuring the site would complement the mobile app, the fonts, feel and signature brand green colour as well as the hot air balloon illustrations were all incorporated.

For the main feed, the interface was designed to allow the user to focus on the elements which were most important. The size and placement of the main video gives it focus, allowing the user to enjoy the videos with ease.

A convenient slider is placed at the top with five videos viewable at any time so as not to overwhelm the viewer with an easy to scroll function. Keeping and enhancing the interactivity of the app, the like, comment, favourite and share buttons are all installed prominently to encourage connectivity and sharing, much like any other social network.

Home Page

Keeping the login page rather simple, we made sure that the overall style follows the app rather closely. While Vine's login screen is a background video, keeping it clean and simple was better as people wouldn't be spending a lot of time on it.Vine LogIn Screen

In keeping with the original app's design, there are three main sections to the site: Home, Explore and Profile. When users first login, they will be greeted by a feed of the most popular vine posts out there, which the ability to filter by location, friends or search. Each video at the top-part of the screen is given quick tabs that allow you to like, comment, share or watch the video in full below.

The bottom part of the screen is dedicated to the video in question, with threaded comments and the ability to like, favourite or reply to comments. The bottom section is dedicated to sections like local Vine posts, friends, a search function and settings. This is consistent across all pages with the middle highlighting which section you're viewing.VineFeedPage

 

Explore Page

This will be the focal point of the site since Vine should be about discovery and uncovering hidden gems. Since the Vine app makes great use of icons, bringing them over to the website made sense. Each category featured on the explore page would have an icon with hashtag and a collage showing the latest videos.

When you hover over it, it brightens up and clicking on the category will show you a collection of posts relating to it. However, if you see a particular video that catches your eye, you can click on the little thumbnail and it will bring you to that video first.VineExplorePage

 

Profile Page

Since seeing what your friends have created is always going to be a draw, the layout of its profile pages has been designed to reflect this. Alongside the usual features associated with a bio, the main video will be a featured video of your choice, giving a level of customisation similar to Facebook and Twitter's cover image. Underneath it, a feed of your most recent Vine posts will feature underneath which you can scroll through.VineProfilePage

 

comments powered by Disqus