todo-project.html

---
layout: project
---

<div class="project-text">
  <h1 class="page-header">
    App for Udacity course
  </h1>

  <p>
    Collaborated with Google on this open-source mobile app used in the course
    material for the Udactiy course teaching Google's new <a href="https://flutter.io">Flutter
    technology</a>. The course demonstrates how the app is built. This app was
    designed according to specifications, it had to look realistic, it had to
    demonstrate Flutter's technical capabilities, but at the same time it had to
    be simple enough for students to be able to implement it.
  </p>
</div>

<div>
  <img style="display: block; width: 100%" src="images/todo-tab.jpg">
</div>

<div class="project-text">
  <h1>Process</h1>

  <p>
    Target users: Udacity students
  </p>
  <p>
    Feature specifications:
  </p>
  <ul>
    <li>List all the items</li>
    <li>Filtered by TODO</li>
    <li>Filtered by Done</li>
    <li>Create/edit/delete items</li>
    <li>An item has a single title (one-line)</li>
    <li>An item may have an optional image</li>
  </ul>
  <p>
    I started out by sketching basic functionality and then building an interactive paper prototype in the Marvel POP app. We then tested the prototype with the client.
  </p>
</div>

<div class="project-text">
  <h1>Interactive paper prototype</h1>
</div>

<div class="video-example">
  <video autoplay muted loop>
    <source src="https://firebasestorage.googleapis.com/v0/b/anna-istomina.appspot.com/o/20171123_142408.mp4?alt=media&token=9f245261-5b9e-4233-ad6e-9dee1dc620ed" type="video/mp4">
  </video>
</div>

<div class="project-text">
  <h1>Design iterations</h1>

  <p>
    I then proceeded to several design iterations of what the app might look like.
  </p>
</div>

<div class="image-example">
  <img src="images/todo/iterations.jpg">
</div>

<div class="project-text">
  <h1>Style guide for the developer</h1>
</div>

<div class="image-example">
  <img src="images/todo/todo-style-guide.jpg">
</div>

<div class="project-text">
  <h1>Style guide - elements</h1>
</div>

<div class="image-example">
  <img src="images/todo/todo-style-elements.jpg">
</div>

<div class="image-example">
  <img src="images/todo/todo-style-elements-2.jpg">
</div>

<div class="project-text">
  <h1>Style guide - measurements</h1>
</div>

<div class="image-example">
  <img src="images/todo/todo-measurements.jpg">
</div>

<div class="project-text">
  <h1>Final screens</h1>
</div>

<div class="image-example">
  <img src="images/todo/todo-mock-1.jpg">
</div>

<div class="image-example">
  <img src="images/todo/todo-mock-2.jpg">
</div>