User Interface Design und Icon Library

Transkript

1 Clemens Grossmann - TouchingCode GmbH User Interface Design und Icon Library

2 Auftraggeber TouchingCode GmbH Wir sind spezialisiert auf die Entwicklung von Smartphone Apps und die dazugehörigen Backend Server Funktionen Flagship product: Unser Online tool zum Erstellen, Erweitern und Pflegen von nativen Apps: APMATO (App Publishing with a Modular Authoring Tool as an Online platform)

3 Designer Peter Scherbarth Schwerpunkt meiner Arbeit ist die Konzeption und Gestaltung von Graphiken (hier insbesondere Logos) und Webseiten, wobei ich letztere fast ausschließlich mit dem Content Management System WordPress umsetze. Ich photographiere Landschaft und Architektur. (Auch als 360 -Bilder.)

4 Das apmato System bietet: Online selbst Apps erstellen und bearbeiten Content server für Content Updates, User Daten und Push Notifications Automatisiertes Erstellen von nativen Apps Erweiterbar: eigene Module (HTML / Objective-C / Java) erstellen und integrieren Wir bieten auch an, die Veröffentlichung der Apps durchzuführen

5 Vorlagen Als ersten Schritt bei der App Erstellung wählt der User eine Vorlage. Diese kann danach visuell, inhaltlich und strukturell beliebig angepasst werden.

6 Editor Kernstück ist apmato-create, der Editor für die App

7 Module Bei apmato wird die App durch das Kombinieren von Modulen flexibel erstellt.

8 einfach ausprobieren! freemium Modell, kostenlos zum Prototyp oder privater App

9 Anforderungen Design Für unseren App Editor benötigten wir Vorlagen, die unsere User als Startpunkt für eigene Apps verwenden können Die Aufgabe bestand darin, die Vorlagen so allgemein zu erstellen, dass sie für viele verschiedene Apps verwendet werden können, aber trotzdem konkret genug, dass sie als beispielhaft verstanden werden können Entwicklung einer Ikon Bibliothek, für die Vorlagen und als Bibliothek für unsere User

10 Vorlagen Design

11 Vorlagen Design

12 Vorlagen Illustrationen

13 Ikon Bibliothek - Anforderungen Bibliothek, um alle Navigationseventualitäten möglicher Apps mittels Symbolen abzubilden Strukturierung und Gliederung der Symbole Produktion vom Üblichen zum Speziellen Darstellungsstil, der eine beliebige Erweiterung der Bibliothek ermöglicht Plattformübergreifend, viele verschiedene Größen

14 Ikon-Bibliothek

15 Ikon Bibliothek - Design Starke Abstraktion: 2D, formale Reduktion, wenige bis keine Schattierungen, vorgegeben durch die mobilen Systeme Möglichkeit der illustrativeren, weniger abstrakten Darstellung durch Fortschritte in der Hardware (höher auflösende Displays) Anwendung als redundante Wort-Bildkombination in den Apps, somit müssen die Ikons nicht zwingend selbsterklärend sein Aufgreifen von im Computerkontext üblichen, plattformübergreifenden Symbolen und Darstellung im bibliothekstypischen räumlich-illustrativen Stil Die Icons stellen einen wichtigen visuellen Kontrast zur, technisch bedingten, formalen Simplizität der Apps dar.

16 Design Fazit: das Design wurde termingerecht geliefert, und konnte sehr gut in das Produkt eingebaut werden. Die Ikon Bibliothek bereichert die mit apmato erstellten Apps. Die Kombination der beiden Bibliotheken in einer Gestaltungsaufgabe erwies sich als sehr praktikabel. Die Templates bedurften der Symbole und lieferten im laufenden Projektfortschritt wiederum konkrete Anforderungen an die Ikon-Bibliothek. Die Symbole konnten ohne Umschweife im konkreten Anwendungsfall auf ihre Symbolkraft und Darstellungsqualität überprüft werden.

17 Design Transfer Bonus Zeitlicher Verlauf 2013 ab 7. Januar: Formulieren der Aufgabe, Kontaktieren von Designern und Einholen von Angeboten 21. Januar: Abgabe des Antrages 26. März: Bewilligung des Antrages 1. April - 31 Mai: Durchführung Zahlung von TouchingCode an den Designer: 11. Juni Abruf / Sachbericht von TouchingCode: 25. Juni Auszahlung der Förderung: Anfang Juli

18 Design Transfer Bonus zusätzlicher Aufwand 3 schriftliche Angebote Förderantrag Abruf der Förderung inkl. schriftlichem Abschlussbericht Do the math: wir haben 4-5 Tage zusätzlichen Aufwand gehabt

19 Design Transfer Bonus Fazit: lohnendes Förderprogramm Was uns gefällt: Transparentes Verfahren Jederzeit ansprechbare Partner bei B.&S.U. mbh Zügige Auszahlung Was man bedenken muss: Starres Projektziel 3 abgegebene Angebote - nicht jeder, den man anfragt, gibt ein Angebot ab

20 Vielen Dank fürs zuhören! Clemens Grossmann: Peter Scherbarth: