michaelreynolds.github.io/index.html at master · michaelreynolds/michaelreynolds.github.io · GitHub

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
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
<!doctype html>
<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang=""> <![endif]-->
<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8" lang=""> <![endif]-->
<!--[if IE 8]>         <html class="no-js lt-ie9" lang=""> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang=""> <!--<![endif]-->
  <head>

      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

      <link href="/images/favicon.ico" rel="icon" type="image/ico" />

      <meta property="og:type" content="website">
      <meta property="og:url" content="https://michaelreynolds.net">
      <!-- <meta property="og:image" content="https://michaelreynolds.net/images/og-image.png"> --><!-- 1200 × 630 -->
      <meta property="og:title" content="Michael Reynolds | Product and UX Designer" />
      <meta property="og:description" name="description" content="I'm a UX Designer who's passionate about creating user experiences through thoughtful design.">

      <meta name="twitter:card" content="summary_large_image">
      <!-- <meta name="twitter:site" content="@reynolds_ux"> -->
      <!-- <meta name="twitter:creator" content="@reynolds_ux"> -->
      <meta name="twitter:title" content="Michael Reynolds | Product and UX Designer">
      <meta name="twitter:description" content="I'm a UX Designer who's passionate about creating user experiences through thoughtful design. http://michaelreynolds.net">
      <!-- <meta name="twitter:image" content="https://michaelreynolds.net/images/card.png">  --><!-- 1024 × 512 --><!-- 600 × 330 -->
      <meta name="twitter:url" content="https://michaelreynolds.net">

      <meta name="robots" content="index, follow">

      <title>Michael Reynolds | Product and UX Designer</title>

      <link href="/stylesheets/normalize.css" rel="stylesheet" />
      <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/foundation/6.2.1/foundation.min.css">
      <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.1/animate.min.css">
      <link rel="preconnect" href="https://fonts.googleapis.com">
      <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
      <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@500;600;700&display=swap" rel="stylesheet">
      <link href="/stylesheets/style.css" rel="stylesheet" />

      <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
      <script src="/javascripts/all.js"></script>


  </head>

  <body class="index">


    <header class="cover row expanded intro">
      <div class="color-overlay blue intro">


        <!-- nav partial -->
        <nav class="row small-12 small-centered medium-12 large-10 medium-centered x-large-centered animated fadeIn" style="animation-delay: .5s;">
          <div class="responsivemenu show-for-small hide-for-large">
            <ul class="hamburger">
              <li class="first"></li>
              <li class="second"></li>
              <li class="third"></li>
            </ul>
          </div>

          <ul class="nav responsive small-large-text-left">
            <a href="/" class="left logotype">Michael Reynolds</a>
            <li class="right"><a href="#projects">Case Studies</a></li>
          </ul>
        </nav>


        <div class="content animated fadeInDown">
          <div class="row">
            <div class="small-10 large-6 x-large-uncentered small-centered large-text-left">
              <h3 style="color:#fff;">I’m an annoyingly curious product designer who is passionate about <span style="text-decoration: line-through; opacity:0.5;">software</span> helping people.</h3>
              <p style="color:#fff;">I turn frustrating user experiences into delightful and efficient ones by satisfying user needs as quick and frictionless as possible.</p>
              <a class="button inverse blue" href="https://michaelreynolds.design">See Case Studies →</a>

              <!-- <h2>Hi, I'm a product designer who specializes in user experience and product strategy.</h2>
              <h5 class="subhead">I’m passionate about creating high performant user interfaces for digital products.</h5>
              <p class="cta">Interested in working together?</p>
              <a href="mailto:hello@michaelreynolds.net?subject=Tell me more!" class="button inverse blue">Let's get in touch!</a> -->

            </div>
          </div>
        </div>

        <div>
          <a href="#projects">
            <span class="arrow bounce"></span>
            <span class="locator" href="#projects">More About Me</span>
          </a>
        </div>
      </div>
    </header>

    <!-- <section id="projects" class="container cover muted">
      <div class="content color-overlay muted">
        <div class="textblock large-6 medium-9 small-10 small-centered text-center large-centered x-large-centered">
          <h2>Giving App</h2>
          <h3>SaaS Donor Management</h3>
          <p>Explore the newly designed web app.</p>
            <a class="button inverse muted" href="https://cargocollective.com/michaelreynolds/Giving-App">Explore project →</a>
        </div>
      </div>
    </section>

    <section class="container cover blue">
      <div class="content color-overlay blue">
        <div class="textblock large-6 medium-9 small-10 small-centered text-center large-centered x-large-centered">
          <h2>Box Clinic</h2>
          <h3>Internal Patient Management Software</h3>
          <p>Explore the clinic paitent management web application.</p>
          <a class="button inverse blue" href="https://cargocollective.com/michaelreynolds/Clinic-Registration">Explore project →</a>
        </div>
      </div>
    </section>

    <section class="container cover disciples">
      <div class="content color-overlay muted">
        <div class="textblock large-6 medium-9 small-10 small-centered text-center large-centered x-large-centered">
          <h2>Disciples Mobile App</h2>
          <h3>SaaS Customer Relationship Manager</h3>
          <p>Explore the redesigned experience and mobile app.</p>
            <a class="button inverse muted" href="https://cargocollective.com/michaelreynolds/Disciples-Mobile-App">Explore project →</a>
        </div>
      </div>
    </section> -->

    <section id="projects" class="container cover grey">
      <div class="content color-overlay muted">
        <div class="textblock large-6 medium-9 small-10 small-centered text-center large-centered x-large-centered">
          <h2>Product Design</h2>
          <!-- <h3>UX Research, Product Design and Prototypes</h3> -->
          <p>Explore product design and user experience design projects.</p>
          <a class="button inverse muted" href="https://michaelreynolds.design">See Case Studies →</a>
        </div>
      </div>
    </section>
    <!--
    <section class="container cover light">
      <div class="content color-overlay light">
        <div class="textblock large-6 medium-9 small-10 small-centered text-center large-centered x-large-centered">
          <h2>Other Design</h2>
          <p>Explore additional branding, marketing and idenity projects.</p>
          <a class="button inverse light" href="https://cargocollective.com/michaelreynolds">Explore projects →</a>
        </div>
      </div>
    </section>
    -->
    <!--
    <section class="container">
      <div class="content color-overlay gray">
        <div class="textblock large-6 medium-9 small-10 small-centered text-center large-centered x-large-centered">

          <h2>All Projects</h2>
          <p>Explore all the projects while they are in the process of migrating here.</p>
          <a class="button inverse gray" href="https://cargocollective.com/michaelreynolds">Explore all projects →</a>
        </div>
      </div>
    </section>
    -->

    <footer class="row expanded color-overlay dark">
      <div class="text-center large-10 about">
        <div class="large-3 text-center column">
          <div class="portrait">
            <img src="images/profile-500.jpg">
          </div>
          <div id="connect" class="icons">
            <p class="sub">Connect</p>
            <a target="_blank" href="https://medium.com/@mreynolds">
              <svg class="icon" viewBox="0 0 34 28" width="100%" height="100%"><path d="M11.026 5.227c0-.02-.037-.074-.055-.092L1.535.405C1.274.278 1.016.13.72.13.222.13 0 .553 0 1.015V22.07c0 .555.406 1.22.923 1.48l8.59 4.302c.184.093.387.148.608.148.63 0 .907-.536.907-1.108V5.227zm1.182 1.865v11.082l9.863 4.913-9.86-15.995zm20.89.333l-9.974 16.198 8.145 4.063c.257.148.552.24.866.24.61 0 .96-.425.96-1.034V7.425zm-.056-2.217c0-.055-.037-.092-.074-.11L22.976.11c-.147-.073-.314-.11-.48-.11-.388 0-.757.185-.96.517L15.55 10.25l7.205 11.71c.738-1.182 10.287-16.678 10.287-16.752z"></path></svg>
            </a>
            <a target="_blank" href="https://linkedin.com/in/michaelnreynolds">
              <svg class="icon" viewBox="0 0 30 30" width="100%" height="100%"><g transform="translate(0 .057)"><path fill-rule="evenodd" d="M3.77.262C1.688.262 0 1.932 0 3.992s1.688 3.73 3.77 3.73 3.77-1.67 3.77-3.73S5.852.262 3.77.262"></path></g><path d="M.685 29.738h6.13V10.253H.685M23.83 9.64c-2.445-.132-4.81 0-7.31 3.326v-2.713h-5.875v19.485H16.8v-9.87c0-1.357.458-4.828 3.644-4.828 2.822 0 3.104 2.593 3.104 4.23v10.45h6.19V16.996c0-1.875-.558-6.955-5.907-7.354"></path></svg>
            </a>
            <a target="_blank" href="https://dribbble.com/michaelreynolds">
              <svg class="icon" viewBox="0 0 21 20" width="100%" height="100%"><path d="M14.787 16.402c-.346-1.793-.824-3.55-1.425-5.248 1.472-.214 3.037-.115 4.67.295-.392 2.045-1.587 3.81-3.245 4.95m-4.404 1.364c-1.74 0-3.347-.57-4.644-1.536.445-.688 1.4-1.968 2.894-3.088.925-.692 1.918-1.217 2.964-1.57.66 1.835 1.17 3.747 1.517 5.7-.85.32-1.773.494-2.735.494M2.596 9.98c0-.046 0-.092.002-.138.352.012.702.02 1.046.02 1.92 0 3.716-.19 5.358-.57.513-.117 1.01-.254 1.494-.408.154.334.304.67.448 1.012-1.197.412-2.33 1.016-3.386 1.806-1.527 1.143-2.562 2.43-3.146 3.276-1.133-1.352-1.816-3.095-1.816-4.998m4.318-6.973c.525.65 1.34 1.746 2.226 3.27.186.32.367.646.543.975-.383.115-.777.218-1.18.31-1.712.382-3.613.546-5.665.487C3.402 5.833 4.913 4 6.914 3.003m3.47-.814c1.84 0 3.53.64 4.862 1.707-.456.54-1.302 1.343-2.548 2.066-.414.24-.85.46-1.31.66-.222-.424-.453-.842-.69-1.253C9.95 4.094 9.25 3.09 8.705 2.376c.54-.12 1.1-.182 1.677-.182m7.78 7.435c-1.9-.44-3.73-.504-5.46-.19-.166-.404-.34-.8-.52-1.195.542-.24 1.06-.507 1.55-.798 1.285-.766 2.208-1.61 2.783-2.265.97 1.236 1.57 2.772 1.646 4.446M10.385 0c-5.522 0-10 4.477-10 10s4.478 10 10 10c5.524 0 10-4.477 10-10s-4.476-10-10-10"></path></svg>
            </a>
            <a target="_blank" href="https://twitter.com/intent/follow?screen_name=reynolds_ux">
              <svg class="icon" viewBox="0 0 32 26" width="100%" height="100%"><path d="M10.04 25.6C6.343 25.6 2.9 24.534 0 22.707c.512.06 1.034.09 1.563.09 3.07 0 5.893-1.03 8.135-2.756-2.866-.05-5.286-1.91-6.12-4.47.4.077.81.118 1.233.118.6 0 1.18-.08 1.73-.226-2.997-.592-5.255-3.194-5.255-6.314v-.08c.884.48 1.894.77 2.968.804C2.495 8.714 1.34 6.742 1.34 4.51c0-1.18.322-2.287.886-3.238C5.454 5.17 10.28 7.732 15.724 8c-.11-.47-.17-.962-.17-1.467 0-3.556 2.934-6.44 6.55-6.44 1.886 0 3.588.783 4.783 2.035 1.492-.29 2.894-.825 4.16-1.563-.49 1.504-1.528 2.766-2.88 3.563 1.325-.156 2.587-.502 3.762-1.014-.88 1.29-1.99 2.425-3.27 3.333.01.276.02.554.02.833 0 8.51-6.59 18.32-18.64 18.32"></path></svg>
            </a>
            <a target="_blank" href="https://github.com/michaelreynolds">
              <svg class="icon" width="100%" height="100%" viewBox="0 0 16 16" version="1.1" aria-hidden="true"><path fill-rule="evenodd" d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0 0 16 8c0-4.42-3.58-8-8-8z"></path></svg>
            </a>
          </div>
        </div>
        <div id="about" class="large-7 column text-left">
          <h5>About Me</h5>
          <p>I’m a designer with over <script>document.write(new Date().getFullYear()-2012);</script> years of experience designing and building interactive experiences. I’m passionate about creating innovative and intuitive experiences for others. I love making processes more efficient and enjoyable. I challenge the status quo with out-of-the-box questions and innovative solutions. I solve problems by analyzing data and relentlessly breaking down processes. I’m always eager to learning something new!
          <p>I love crafting wireframes, mockups, prototypes, wireflows, user flows, site-maps, and designing &amp; engineering front-end experiences.</p>
          <!-- <h5 class="subhead">Interested in working together?</h5>
          <a href="mailto:hello@michaelreynolds.net?subject=Tell me more!" class="button inverse dark">Let's get in touch!</a> -->
        </div>
        <div class="clearfix"></div>
        <div class="text-center large-11 connect">
          <p class="info"><span>&copy; <script>document.write(new Date().getFullYear());</script> Michael Reynolds. </span>
          Hand crafted and hosted on <a href="https://github.com/michaelreynolds/michaelreynolds.github.io"  target="_blank"> Github.</a></p>
        </div>
      </div>
    </footer>


  </body>
</html>