-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathmsix.html
121 lines (111 loc) · 5.79 KB
/
msix.html
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
<html>
<head>
<link type="text/css" rel="stylesheet" href="css/materialize.min.css" media="screen,projection"/>
<link type="text/css" rel="stylesheet" href="css/font-awesome.min.css" media="screen,projection"/>
<link type="text/css" rel="stylesheet" href="css/style.css" media="screen,projection"/>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Dan Rader | Portfolio</title>
</head>
<body>
<div class="msix-hero hero">
</div>
<div class="main-content">
<div class="container row">
<div class="bigscreen col l10 offset-l1 m12 s12 block">
<img src="images/msix/msix-group.png" />
</div>
<div class="intro-text col l10 offset-l1 m12 s12">
<h1 class="Title">MSIX</h1>
<h2 class="Title">Branding, mobile first, UI & UX Design</h2>
<p>Migrant Student Information Exchange is a platform mandated by the No Child Left Behind Act of 2001. The product consolidates data from multiple state information systems and allows for easy access to migrant student records. This is important because these students often move from state to state, multiple times a year, following their parents work and often times that leads to lost records, delayed graduation, and student drop out. </p><p>
Our work began with a rebrand. Through creative intakes, we were able to develop moldboards for further refinements and presented 4 concepts. The brand was to echo the people involved in the product—from the practitioners to the students. The approved logo represents land through the mark, the color of the Department of Ed Migrant Student sub-brand, and the concept of students and education through the soft geometric san-serif.</p><p>
Responding to user research with on-the-ground MSIX practitioners, our team moved to a mobile first development and design process. Working through the mobile experience before expanding out to the desktop. This allowed us to hone in on what is really important to the users.</p>
</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col l10 offset-l1 m12 s12 block">
<img src="images/msix/moodboards.png"/>
</div>
</div>
<div class="row msixlogo">
<div class="col l4 m4 s12 block">
<img src="images/msix/logo1.gif"/>
</div>
<div class="col l4 m4 s12 block">
<img src="images/msix/logo2.gif"/>
</div>
<div class="col l4 m4 s12 block">
<img src="images/msix/logo4.gif"/>
</div>
</div>
<div class="row logofinal">
<div class="col l4 offset-l4 m6 offset-m3 s8 offset-s2 block">
<img src="images/msix/msixlogo-final@2x.png"/>
</div>
</div>
<div class="row">
<div class="col l6 m6 s12 block">
<img src="images/msix/logo-finalko@2x.png"/>
</div>
<div class="col l6 m6 s12 block">
<img src="images/msix/logofinal-grey@2x.png"/>
</div>
</div>
<div class="row msixmark">
<div class="col l2 offset-l5 m2 offset-m5 s4 offset-s4 block">
<img src="images/msix/mark_final@2x.png"/>
</div>
</div>
<div class="row">
<div class="col l4 m4 s8 offset-s2 block">
<img src="images/msix/msixphone1.png"/>
</div>
<div class="col l4 m4 s8 offset-s2 block middlephone">
<img src="images/msix/msixphone2.png"/>
</div>
<div class="col l4 m4 s8 offset-s2 block">
<img src="images/msix/msixphone4.png"/>
</div>
</div>
</div>
<div class="parallax-container nomobile">
<div class="parallax"><img src="images/msix/iPhone5_5.jpg"></div>
</div>
<div class="container">
<div class="row last paddingbottom">
<div class="col l10 offset-l1 m12 s12 block">
<img src="images/msix/desktop@2x.png"/>
</div>
</div>
</div>
</div>
<div class="footer">
<a href="index.html"><h1>D<span style="color:#ffab17">a</span>n R<span style="color:#ffab17">a</span>der</h1>
<h2>Full Stack Designer</h2></a>
<p class="contact"> 804.245.1006 | <a href="mailto:howdy@danrdesign.com?Subject=Howdy!" target="_top">howdy@danrdesign.com</a></p>
</div>
</div>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="js/materialize.min.js"></script>
<script type="text/javascript">$(document).ready(function(){
$('.parallax').parallax();
});
</script>
<!-- <script type="text/javascript">$('.carousel.carousel-slider').carousel({full_width: true});
</script> -->
<script type="text/javascript">$(document).ready(function(){
$('.carousel').carousel();
});</script>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-84086424-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>