challenge-2019-prototyp.html

---
layout: challenge
---

<section class="section">
  <div class="container">
    <h2 class="title is-1">Infos zum Challenge Prototypen</h2>

    <div class="content is-medium has-seperator">
      <p markdown="1">Setzen Sie Ihre Idee in einen erfahrenen Prototyp um. Dieser sollte die Kernelemente Ihres
        Features enthalten und möglichst anschaulich umsetzen. Nutzen Sie unser [Mockup
        Kit](https://github.com/th-koeln/wba-challenge) als Basis für Ihren Prototyp, oder erzeugen Sie sich einen
        eigenen, passenden Kontext.</p>
    </div>
  </div>
</section>

<section class="section">
  <div class="container">
    <div class="content">
      <h2><i class="fa fa-cubes" aria-hidden="true"></i>Mockup Kit</h2>

      <div class="js-video widescreen">
        <iframe width="1200" height="720" src="https://www.youtube.com/embed/-r5DoqDTQrM?rel=0&amp;showinfo=0"
          frameborder="0" allowfullscreen=""></iframe>
      </div>

      <p class="fu">Als Basis für Ihren Prototyp haben wir ein kleines Mockup Kit vorbereitet. Dieses enthält viele
        Grafiken der Tesla GUI, die Tesla Farben als Custom Properties und eine grundlegende Layoutstruktur.</p>

      <a class="button is-outlined is-primary" href="https://github.com/th-koeln/wba-challenge">Zum Mockup Kit</a>
    </div>
    <!--div class="columns">
      <div class="column">
        
      </div>

      <div class="column">
        <div class="content">
          <h2><i class="fa fa-server" aria-hidden="true"></i>Deployment</h2>

          <div class="js-video widescreen">
            <iframe width="1200" height="780" src="https://www.youtube.com/embed/uG0sdhOxNLw?rel=0&amp;showinfo=0"
              frameborder="0" allowfullscreen=""></iframe>
          </div>

          <p class="fu">Bitte stellen Sie Ihren Prototyp über den ADV Server im Internet bereit. Schützen Sie den
            Prototyp bitte mit Hilfe eine Passwortschutzes (wba:wba). Wie das geht, ist in dem Video beschrieben.</p>
        </div>
      </div-->
  </div>
  </div>
</section>


<section class="section">
  <div class="container">
    <div class="content">
      <h2><i class="fa fa-paint-brush" aria-hidden="true"></i>Figma Board</h2>
      <img src="../assets/images/tesla-assets.png" alt="tesla-assets" width="1958" height="1360" />
      <p class="fu" markdown="1">[Tom Johnson](http://www.tomjohndesign.com) hat ein sehr schönes Figma Board mit Tesla
        Screen UI Elementen aufgebaut. Dazu gibt es noch einen Artikel: [What Tesla’s Model 3 UI Reveals About Its
        Vision for the
        Future](https://blog.figma.com/what-teslas-model-3-ui-reveals-about-its-vision-for-the-future-eb01a75ae979).
        Die GUI zielt zwar auf ein querformatiges Display, aber wir haben es trotzdem als Basis für das Mockup Kit
        verwendet.</p>
      <a class="button is-outlined is-primary" href="https://www.figma.com/file/OIVSH9zbbnAAyRvoFE0dmowA/Tesla-Model-3">Zum
        Figma Board</a>
    </div>
  </div>
</section>