-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy pathProtoYidio.html
More file actions
169 lines (107 loc) · 4.77 KB
/
Copy pathProtoYidio.html
File metadata and controls
169 lines (107 loc) · 4.77 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="shortcut icon" href="images/favicon.ico"/>
<title> Kenny Lopez Design Portfolio</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href='https://fonts.googleapis.com/css?family=Bitter' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Oxygen:300' rel='stylesheet' type='text/css'>
<link href='https://fonts.googleapis.com/css?family=Oxygen:700' rel='stylesheet' type='text/css'>
<link href="css/hover.css" rel="stylesheet" media="all">
<script type="js/jquery.js"></script>
<script type="js/script.js"></script>
<script src="js/modernizr.custom.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<style>
body {background:#FFFFFF;}
</style>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="yidiofold">
<div id="wrapperproject">
<div class="headlinetext">
<a href="http://kennylopez.co">
<img width="30" src="images/headerimage4.png" id="iconimage" style="display:inline; padding-bottom:0px;" />
</a>
<div style="display:inline;">Kenny Lopez</div>
</div>
<div class="headlinesubject">
<div>Yidio</div>
</div>
<div class="headlinedate">
<div>2016</div>
</div>
</div>
<div class="headerexample">
<img width="100%" style="padding-top:100px; padding-left:10px;" src="images/Yidioiphonescreens.png" id="iconimage"/>
</div>
</div>
<div class="examplebody">
<div class="contentpagesubject">
<div class="line-separator" style="background:#FD8729";></div>
<p>
Yidio consolidates streaming video from services such as iTunes,HBO Go, Netflix and allow you to quickly and effortlessly search for the content you want.
<p>
It was my task to design a simple and intuitive way for users to create and manage a list of movies, TV shows and episodes they want to watch.
<div class="line-separator" style="background:#FD8729";></div>
</div>
<div class="contentpagereq">
<h2>Pain Points</h2>
<div class="line-separator" style="background:#FD8729; width:100px;" ></div>
<p>
1. User should be able to add and remove movies, shows or episodes to watchlist (replacing favorites).
</p>
2. When a user adds a show to their Watchlist, they should be able to specify whether all episodes, or only future episodes are added.
<p>
3.Some movies or episodes in a user’s Watchlist may not be available from any apps or sources yet. The user should be able to easily see the availability status of these items.
</p>
4.For all items in a user’s Watchlist, notifications will be generated any time a previously unavailable movie or episode becomes available.
</div>
<div class="contentpagereq">
<h2>Current Flow</h2>
<div class="line-separator" style="background:#FD8729; width:100px;" ></div>
<div class="example">
<img width="100%" src="images/Yidioflow_2.png" id="flowimage"/>
</div>
</div>
<div class="contentpagereq">
<h2>Brainstorming</h2>
<div class="line-separator" style="background:#FD8729; width:100px;" ></div>
<div class="example">
<img width="100%" src="images/Yidiobrainstorm.png" id="flowimage"/>
</div>
</div>
<div class="contentpagereq">
<h2>Results</h2>
<div class="line-separator" style="background:#FD8729; width:100px;" ></div>
<div class="example">
<video width="375" height="667" controls>
<source src="images/Yidio_Results.mov" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="images/Yidio_Results.mov" type='video/ogg; codecs="theora, vorbis"'>
</video>
</div>
<div class="example">
<a href="/Yidio_Presentation.pdf"class="btn btn-primary btn-lg outline" style="margin-top:50px;text-decoration: none;">See the Full Yidio Project Presentation Here </a>
</div>
</div>
<div class="footer">
<div class="footer-fade-left" style="background:#E50914; width=50%; height=100%; color:#FFFFFF; text-align:center; padding-top:25px;">
<!--<a href="https://facebook.com/scckidd4212" class="button hvr-float-grow">
<img width="20" src="images/left.png" id="iconimage"/>
</a>
!-->
<h2 class="button hvr-float-grow"><a href="" style="text-decoration:none;color:#FFFFFF;">Netflix</a></h2>
</div>
<div class="footer-fade-right" style="background:#41A774; width=50%; height=100%; color:#FFFFFF; text-align:center; padding-top:25px;">
<h2 class="button hvr-float-grow"><a href="#" style="text-decoration:none; color:#FFFFFF;">Meed</a></h2>
<!-- <a href="https://facebook.com/scckidd4212" class="button hvr-float-grow2" height="50%">
<img width="20" src="images/right.png" id="iconimage"/>
</a>
!-->
</div>
</div>
</body>
</html>