Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam

In seiner Funktionalität auf die Lehre in gestalterischen Studiengängen zugeschnitten... Schnittstelle für die moderne Lehre

Incom ist die Kommunikations-Plattform der Fachhochschule Potsdam mehr erfahren

Prototyping an App

This is the documentation for the course „Software Interfaces: App Prototypen Entwicklung“ with Pierre La Baume in winter semester 15/16.

Introduction

The purpose of the course was to make a mobile prototype of an application. The subject of the application was sounded directly at the first lecture. Finally we should make a prototype of an Event App.

During the lectures we learned different prototyping tools and their use cases. We started with basic tools, like Pop, Marvel, Invision which allow to make basic animations. Main focus of the course was learn to work with more a difficult tool Framer studio based on CoffeeScript and framer.js. We needed to make screens of the app in Photoshop or Sketch, import them in Framer studio and make an animated prototype. The purpose was to create not a final application but only its prototype, having shown its basic functions.

Every week students prepared presentationson different themes (Personas, typography, Grids, GUI, Sketch, Javascript and JQuery…) which helped us to understand the bases of prototyping. An important component of the course were weekly Framer studio tutorials and homework which helped us to learn basics programming on CoffeeScript and framer.js.

Concept

11.jpg11.jpg

I often face a problem of absence of good applications for searching concerts and exhibitions in other cities. I checked what applications generally exist with similar functions. I found two apps with the opportunity for searching concerts – Bandsintown and Lastfm and Out Of Office for searching different events. But any of them didn't execute all functions necessary to me. Therefore I decided to make a prototype of an app, which gives a possibility to find large concerts, exhibitions, and also theatrical performances in the large cities all over the world.

The app, I called it Friday, allows you to add the favorite (concerts, exhibitions, performances), browse upcoming tour dates for any artist, share the information with your friends in facebook, twitter and google +, add the event to your google calendar as well as buy tickets. It is also synchronizes with iTunes, Spotify and Google Play and shows you recommended events.

Process

At first we needed to concentrate and define our target audience and personas and scenarios.

Target audience

Women and men, interested in music, art, theater, various exhibitions, age 16-40, living in big cities or travelling a lot.

Persona 1

3.jpg3.jpg

Scenario 1

Kirill drives to Rome in 3 weeks. He would like to visit any interesting musical concerts or festivals. It is necessary for him soon as possible decide what concerts he would like to visit and as soon as possible to buy all the tickets.

Persona 2

5.jpg5.jpg

Scenario 2

Nataly flies to London with her husband this week. They like to visit interesting modern art exhibitions. Nataly tried to find something in the internet but, unfortunately, she has no time to click all links. With the help of my App she can choose the city (London) where she is flying, select the section Exhibitions, enter the date she is in London and look and read about all events, she is interested in, for only making few clicks and having spent for this minimum quantity of time. She also has the possibility to buy tickets online and add it to her calendar.

11.jpg11.jpg
22.jpg22.jpg
33.jpg33.jpg
44.jpg44.jpg
55.jpg55.jpg
66.jpg66.jpg

Prototyping started with wireframing and using Invision (Marvel or Pop) for small animations. After wireframs I decided that I will concentrate my attention on the first scenario and I began to create screens in Photoshop. When all the screens were made, I imported all files in Framer studio and started long process of programming in framer.js. It is my first experience of prototyping in Framer studio and I am satisfied with result that it turned out.

1.jpg1.jpg
2.jpg2.jpg
3.jpg3.jpg
4.jpg4.jpg
5.jpg5.jpg
6.jpg6.jpg
7.jpg7.jpg
8.jpg8.jpg
9.jpg9.jpg
10.jpg10.jpg

Conclusion

The course was an exciting experience for me. The constant exchange and presenting the works was very inspiring and have made fun. The working tempo of the course was great. I am glad that I have got a good overview about different prototyping tools especially in Framer studio. Programming has given a lot of pleasure to me. Weekly tutorials as well as homework tutorials helped me a lot. Big thanks to Pierre who has tried to support us in the best possible way. I am very happy that I took part in this course and I hope to use the gained knowledge of making prototypes in Framer studio further.

Ein Projekt von

Fachgruppe

Interfacedesign

Art des Projekts

Studienarbeit im ersten Studienabschnitt

Betreuung

foto: Pierre La Baume

Zugehöriger Workspace

Software Interfaces: App Prototypen Entwicklung

Entstehungszeitraum

Wintersemester 2015 / 2016