Page 1 – general landing page
This is a scrolling landing page. Header should have the attached icon on top left, and “sign in” & “sign up” links/buttons on the top right.
The top section should be photography or illustration related to the business. Some ideas are a TV with a cut cord, movie posters of current movies or shows, etc. Imagery can be photography, illustration, movie posters in a unique style, etc. Feel free to be creative here – I’m not set on anything specific. Text here should read “Who needs cable? Join the television revolution!” Action button should be “Take it for a spin.”
Next section should include three parts. They can be arranged any way – horizontal, vertical, skewed, whatever. Each part can have whatever imagery you feel appropriate. They should flow together intelligently:
- Watch your favorite TV shows and movies…
- …on your computer, TV or mobile device…
- …without a cable or satellite subscription!
Next section should be titled “What’s playing right now” and should accommodate four parts (horizontal lists of shows/movies). Each horizontal list should be similar to the list of video cards outlined for page 2 – this is kind of a preview of the core part of page 2 (the subscribed user landing page). Parts (horizontal lists) to include here are:
- Popular TV shows
- Blockbuster movies
- Live sports
- 4k videos
Next section should be titled “How it works” and should accommodate three parts. They can be arranged any way again. The parts are (main text first [doesn't have to be capitalized], then sub-text):
- PICK YOUR CHANNELS
- Channels are based on TV series, networks, actors, sports teams, etc.
- SELECT THE DEVICE YOU WANT TO WATCH ON
- Computer, TV, mobile device – the choice is yours.
- SNIPAROO WILL CREATE YOUR PERSONALIZED GUIDE WITH THE BEST OPTIONS TO WATCH WHAT YOU WANT.
- Sniparoo scans sites including: (icons representing Amazon, Netflix, Redbox, Vudu, NBC, Watch ESPN, etc.)
Several smaller sections should be included. These can be at the bottom, in between other sections, on the sides, whatever you want. They include:
- Apps (available on Google Play and the Apple App Store – please use the standard official images for these).
- As seen on (standard section for media outlets that review the app, such as New York Times, the Verge, Mashable, etc.)
- Section with counters for number of users, number of shows available, number of sources, etc.
Final section should be a standard footer for scrollable landing pages – links to About Us, Privacy, FAQ, etc., and a “Follow” section with Facebook, Twitter, etc.
Also please include somewhere something that highlights this: “Sniparoo is 100% safe and legal – no malware, viruses or illegal torrent sites. Just the best shows and movies from trusted sources.”
Page 2 – subscribed user landing page
See the attachment (Home Wireframe.png) for the basic layout (and excuse my poor illustration abilities). This page will be constructed with AngularJS and Bootstrap, so if you are familiar with the style properties involved please use those as guidelines. Some notes about the attachment:
- I want to keep this general layout for the major components (header should be at top, navigation on the left, content on the right). If you are familiar with Material Design, I’d love to apply some of the layout principles.
- There’s a lot of different information on the page, so spacing is critical so it doesn’t look cluttered. Feel free to take as much vertical room as needed.
- Links are shown in blue. These can be blue, some other color, underlined, whatever.
- Buttons are shown in red. Make them look however you want – I just used red to show that they are buttons, but you can use any color/style you want. Please make buttons consistent across both pages.
- I have a couple of small icons (a bookmark by “Sources”, a check mark by “Already Watched”). These are from the Bootstrap glyph icon set, so I’d like to stick with those, but if you have a better idea feel free to try it.
- The header across the top should be basic and minimal. I’d like to stick with just the logo on the left, search section in the middle, and log out link on the right. Give it enough space so it isn’t cramped, but don’t make it overbearing on the whole page.
- Navigation is on the left. The “My Lineups” section is a list that can be long. Each Lineup name (“Lineup 1”, “Lineup 2”, etc.) is a link. In addition, on this page, one of the lineups will be active. I’ve shown this on the attachment by having a gray box around “Lineup 2,” but you can handle this any way you want. There should be an “Edit Lineup” button, a “Sources” link, and a “Hide” checkbox list as shown. Feel free to separate these controls as you wish.
- One of the most critical parts is the video card – the attachment has four of them in a horizontal row. These will be a scrollable horizontal list (note the left and right scroll buttons at either end). Assume that the image for each card will be 160 x 90. Each card must have the image, a date line (“3 months ago”), the title (“The Cat’s in the Bag”), a set of icons (the white checkmark and bookmark, plus potentially others) and a button (could be play, add or remove). Feel free to modify the layout of the card, but it needs to be usable and scanable as the user looks across the row. The row of cards has a linkable header (“BREAKING BAD” in the attachment).
- Video details is the middle section on the right. This is pretty straight forward – mostly text areas with headers. For the “Sources with this video” part, I’d like to use shiny icons for each source.
- The bottom section has a simple table with checkboxes in the rows. On the right is a sub-section for adding or removing a video. Feel free to arrange it as you want, but that group of controls needs to stay together.