Color EnCoded

 

Dokumentation – Color Encoded

Eine App um mit Farbeüberlagerungen Informationen zu entschlüsseln.

20140714_MockUp

April 2014


 Interaktion im Raum – Ideenfindung

Für mein Projekt – Interaktion im Raum möchte ich mit Farben, deren Überlagerung und versteckten Botschaften arbeiten.

Farbraum_CMYK-RGB_Farbkreise_01

farbsehtest-matt-cutts


Erste Ideen

Erste Versuche mit optischer Kodierung.

Es soll eine versteckte Botschaft übermittelt werden, aus der man einen Mehrwert generieren kann.

  • Links
  • Aktionen
  • QR Codes
  • Botschaften

hallo

Grundlegende Idee ist es, eine Interaktion im Raum zu gestalten.

Hierbei sollen dem Nutzer oder Besucher gezielt Informationen zukommen. Die Entschlüsselung soll in via Handy oder Tablet funktionieren.

Mai 2014


Konkretisierung des Projektes – App

Konkretisierung

Nach einigen Recherchen und Überlegungen zur Durchführbarkeit habe ich mich nun entschlossen mein Projekt als App zu realisieren.

Durch genaues Studiern von Apps wie Instagram oder diversen Foto-Filter-Apps konnte ich mir ein Bild von der Usabillity machen um ein einfaches UI daraus zu abzuleiten.

instagram

401888-afterlight-for-iphone

Als meine Interpretation der Aufgabenstellung “Interaktion im Raum” möchte ich visuelle und Grafische Inhalte durch Überlagerung von Farben ent- und verschlüsseln. Hierzu möchte ich mich vor allem den Rot/Grün Problem widmen.

farbtest2

hallo

Als Entwicklungsumgebung werde ich Unity wählen, da es für Einsteiger in die App-Entwicklung sehr schöne und einfach Verständliche Librarys und Funktionalitäten bereithält.


Erste Gehversuche mit Unity

Unity – The Weapon of Choice

In diesem Blogeintrag möchte ich lediglich nur mitteilen das ich mich auf gemacht habe, in die großen Unbekannten Welten der App-Programmierung.

Nach zahlreichen Tutorials und Programmiernächten bin ich nun langsam auf dem Stand die Kentnisse  für die Realisierung meines Projektes zu nutzen.

the_it_crowd___moss_by_ramart79-d4bx2w1

Juni 2014


Grobgerüst der App – Color EnCoded

Color EnCoded

Nach zahlreichen Programmiertutorials habe ich nun ein Grobgerüst für die App konzipiert.20140714_LOGO_color_encoded

Start / Splash Screen

20140723_AppScribbles_001

Der Startscreen der App soll ein Foto mit Logo zeigen.

Photo Screen

20140723_AppScribbles_002

Der zweite Screen zeigt den Kamera / Aufnahme Bereich.

Filter Screen

Der dritte und letzte Screen der App zeigt den Filter Bereich wo die aufgenommene Information entschlüsselt werden kann.

20140723_AppScribbles_003

Weitere Schritte

Nächste Schritte sind jetzt

  • Erstellen der Grafiken
  • Umsetzung der Funktionalität in Unity
  • Erproben der Entschlüsselung, Farbcodierung

 


Color Encoded – The App was born

Color EnCoded

Nachdem das Grobe Konzept der App stand, konnte ich mich gezielt auf die Funktionalität konzentrieren.

Die Grafiken wurden alle in Photoshop erstellt, und auf die Größe des iPhone 5 (1136x640px / 326ppi) angepasst. Unity macht diese Grafiken automatisch kompatibel mit iPhone4 Modellen (960×640 / 326ppi)

Alle Grafiken (pressed und statisch) wurden als Einzelgrafiken exportiert um sie in Unity zu referenzieren.

Splash Screen

Der Splash Screen war wie angenommen am einfachsten zu Realisieren.

Screen_01

Unity_Splash_Scene

Hier musste lediglich eine Grafik eingebunden werden und nach einer bestimmten Zeit (2 Sekunden) zum Main Screen wechseln.

Photo Screen

Der Kamera Screen war schon etwas aufwendiger da ich Grafiken auf verschiedenen Ebenen einbinden und die Kamera dahinter legen musste, noch dazu musste die Ausrichtung, Auflösung und der Zoom-Faktor auf die App angepasst werden.

Screen_02

Unity_Main_Scene

Filter Screen

Nun zur kniffligsten Aufgabe – dem Filter Screen!
Die aktuelle Funktion ist nur einen farbige Fläche über das Foto zu legen und diese mit dem darunterliegenden Foto zu verrechnen. Führt Momentan aber noch zu keinem zufriedenstellenden Ergebnis.

Weitere Schritte

  • optimieren der Filterfunktion
  • testen

Juli 2014


Bugfixing to the Limit

Da die Photofunktionalität problemlos Funktioniert, widme ich diesen Post der Überarbeitung der Filterfunktion.

Probleme:

  • verrechnung der farbigen Flächen funktioniert nur teilweise
  • kontraste sind zu schwach
  • nur rot/grün bilder werden korrekt entschlüsselt

Ich habe mir, da ich nach einigen Nächten des try and error verfahrens nicht besonders weit gekommen bin, die Hilfe von Steve geholt, er hat mir dann gezeigt wie mann mehere Attribute auf eine Funktion bringt. So konnte ich durch einen klick auf einen Filter mehrere Werte wie: Ebenenverrechnung, Kontraste, Tonwerte, Helligkeit verändern.

Dies brachte dann den gewünschten Erfolg.

Filter

Screen_03


App Logo als letzter Schliff

Zu guter letzt braucht jede App noch ein Icon für das Smartphone.

Hier wurde ebenfalls viel recherchiert und gezeichnet, um aus verschiedenen Elementen die für die App sprechen ein ansprechendes Icon zu generieren.

20140723_AppScribbles_004

Der Kreis mit den Blendfacetten soll die Typische Ansicht eines Objektives darstellen, das Schlüsselloch in der Mitte des Icon steht für die Möglichkeit der Entschlüsselung.

appIcon IMG_5857


Fazit und Ausblick

  • Das recherchieren, konzipieren und umsetzen der Aufgabe “Interaktion im Raum” war für mich eine Herausforderung die ich mit großer Spannung und hoher persönlicher Erwartungshaltung umgesetzt habe. Da ich zeitgleich noch ein Interaction Design Projekt zusammen mit Steve Crouse bearbeitet habe, konnte ich viele neue Erkentnisse, vor allem im Bereich der App-Entwicklung direkt mit einfliessen lassen. Es war sehr Spannend zu sehen mit welchen Problemen man beim App-Design begegnet, und  wie man diese dann Lösen kann. Es war für mich ein Wichtiger Schritt auf einem völlig neuen Gebiet, der mir einmal wieder gezeigt hat, dass der Gestalter von Heute ein Know-How auf einem sehr breit gefächertem Spektrum haben muss. Persönlich freue ich mich besonders ein für mich gänzlich neues Territorium betreten zu haben was für mich sicherlich nur ein Anfang in der App-Entwicklung darstellt.
  • Einen Ausblick auf die Weiterentwicklung der App könnte eine Anleitung zum bedienen der App beinhalten, eine Auswahlmöglichkeit um Fotos direkt von der Cam aufzunehmen, oder aus der Galerie auszuwählen. Eine Verbesserung der Filterfunktion sollte auch implementiert werden. Das abspeichern der entschlüsselten Information soltle auch integriert werden, was man mit einem Share zu Sozialen Netzwerken oder dem einfachen abspeichern in der lokalen Galerie möglich machen könnte.

App Video