Dr. Adam G. Augustin - agametis
Entwicklung von modernen Benutzeroberflächen mit FM
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Entwicklung von modernen
Benutzeroberflächen mit FileMaker Pro
Es war noch nie so einfach
Dr. Adam G. Augustin - agametis

Dr. Adam G. Augustin - agametis
Entwicklung von modernen Benutzeroberflächen mit FM
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Wer bin ich …
• selbständiger FileMaker Entwickler und Berater im Großraum München
(zusammen mit Armin Egginger (CrossCheck) als Cross Solutions GmbH)
• FBA Mitglied
• Filemaker 12 und 13 zertifiziert
• Vorträge auf der FMK 2012 in Salzburg
• Kein Grafikdesign- aber Mathematikstudium
kontakt@agametis.de

Dr. Adam G. Augustin - agametis
Entwicklung von modernen Benutzeroberflächen mit FM
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
… und was machen wir hier
• Benutzeroberflächen (GUIs), die unseren Usern Spaß machen sollen
• Was gibt uns FileMaker an die Hand
• Wie kann man die Möglichkeiten zur GUI Gestaltung einsetzen
• Viele Hands-Ons und Demos
• Ausblick auf meinen zweiten Vortrag nach der Kaffeepause „Moderne
Benutzeroberflächen am Beispiel einer FileMaker Lösung“
• Interessante Quellen zum Thema GUI und „Design“

Dr. Adam G. Augustin - agametis
Entwicklung von modernen Benutzeroberflächen mit FM
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Was gibt uns FileMaker an die Hand
• Vieles, sehr vieles
• Seit 8: Autosizing (automatische Größe) von Layoutobjekten
• Seit 9: bedingte Formatierung
• Seit 10: Skripttigger, Tooltips
• Seit 11: Merge Fields (Platzhaltervariablen), Quick Find (Schnellsuche)
• Seit 12: Layout Themes/Designs, Window styles, Erweiterte Containerfelder
• Seit 13: Custom Themes/Designs, Popover-Tasten, Slider (Seitensteuerelement),
Steuerung der Sichtbarkeit von Layoutobjekten, Gesten auf iOS und Windows 8.x,
Perform Script On Server (PSoS) - Skript auf Server ausführen
• Seit 14: Navigationsbereiche, Button Bars, Steuerung der virtuellen Tastatur in Go
und Pro auf Touch-Geräten, Tasten-Icons, App-Icons
• Seit ?: Custom Menus (Angepasste Menüs)
http://www.filemaker.com/products/filemaker-pro/version-comparison.html

Dr. Adam G. Augustin - agametis
Entwicklung von modernen Benutzeroberflächen mit FM
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Skripttrigger in FileMaker
Anzahl der Skrip/rigger
10
14
18
22
26
FileMaker Pro Version
10 11 12 13 14
25
22
20
17
14
http://help.filemaker.com/app/answers/detail/a_id/7465/~/understanding-and-using-script-triggers

Dr. Adam G. Augustin - agametis
Entwicklung von modernen Benutzeroberflächen mit FM
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Wie kann man die Möglichkeiten zur GUI
Gestaltung einsetzen
• Dynamische Datenanzeige (mit Conditional Formating, Hide Object,
Slider)
• Dateneingabe/Datenerzeugung, ohne den Kontext zu verlassen (mit
Slider, PopOver)
• Kontrollierte Commits (mit Skripttriggern)

Dr. Adam G. Augustin - agametis
Entwicklung von modernen Benutzeroberflächen mit FM
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Hands-On
Custom Themes/Designs

Dr. Adam G. Augustin - agametis
Entwicklung von modernen Benutzeroberflächen mit FM
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Hands-On
Button Bars

Dr. Adam G. Augustin - agametis
Entwicklung von modernen Benutzeroberflächen mit FM
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Demo
Slider

Dr. Adam G. Augustin - agametis
Entwicklung von modernen Benutzeroberflächen mit FM
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Demo
PopOver

Dr. Adam G. Augustin - agametis
Entwicklung von modernen Benutzeroberflächen mit FM
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Demo
Kontrolliertes Speichern

Dr. Adam G. Augustin - agametis
Entwicklung von modernen Benutzeroberflächen mit FM
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Ausblick auf den nächsten Vortrag
Welche ist die native iOS-App und welche ist FileMaker?
„Moderne Benutzeroberflächen am Beispiel einer FileMaker Lösung“

Dr. Adam G. Augustin - agametis
Entwicklung von modernen Benutzeroberflächen mit FM
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Interessante Quellen zum Thema
• Wissenswertes
https://developer.apple.com/library/ios/documentation/UserExperience/
Conceptual/MobileHIG/ (Apple iOS Human Interface Guidelines)
• Inspiration
https://dribbble.com/tags/user_interface
• Tools & Icons
https://color.adobe.com/create/color-wheel/
http://www.materialpalette.com/
https://icons8.com/
• SVG Icons
• Verschiedenes

Dr. Adam G. Augustin - agametis
Entwicklung von modernen Benutzeroberflächen mit FM
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Vielen Dank unseren Sponsoren
Danke für das Bewerten dieses Vortrages

Dr. Adam G. Augustin - agametis
Entwicklung von modernen Benutzeroberflächen mit FM
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Q & A
Vielen herzlichen Dank

Dr. Adam G. Augustin - agametis
Entwicklung von modernen Benutzeroberflächen mit FM
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Wir sehen uns nach
der Kaffeepause

Dr. Adam G. Augustin - agametis
Entwicklung von modernen Benutzeroberflächen mit FM
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Quellen: Wissenswertes
• https://developer.apple.com/library/ios/documentation/UserExperience/
Conceptual/MobileHIG/ (Apple iOS Human Interface Guidelines)
• http://www.google.com/design/spec/material-design/introduction.html
(Google Material Design Specs)
• http://ui-patterns.com/
• http://uxmovement.com/forms/why-infield-top-aligned-form-labels-
are-quickest-to-scan/
• http://uxmovement.com/buttons/how-button-color-contrast-guides-
users-to-action/
• http://exisweb.net/mobile-menu-abtest
• http://exisweb.net/menu-eats-hamburger

Dr. Adam G. Augustin - agametis
Entwicklung von modernen Benutzeroberflächen mit FM
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Quellen: Inspiration
• https://www.thedash.com/
• https://dribbble.com/tags/user_interface
• http://tech.co/5-go-websites-design-inspiration-2015-08
• http://www.pinterest.com/
• iTunes Appstore, Google Playstore

Dr. Adam G. Augustin - agametis
Entwicklung von modernen Benutzeroberflächen mit FM
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Quellen: Tools & Icons
• https://inkscape.org/en/ - freies Graphikprogramm für SVG Icons
• http://colourco.de/ , https://color.adobe.com/ - Farbschema Generatoren
• http://gridpak.com/ - Layout Grid Generator
• http://www.blocklayer.com/GoldenRatio.aspx - Goldener Schnitt, einfach
gehalten
• http://www.kostelijk.nl/thegoldenratiocalculator/index.php - Goldener
Schnitt, sehr detailliert und sehr mathematisch
• https://www.iconfinder.com/, https://icons8.com/, http://www.flaticon.com/
• https://www.google.com/design/icons/

Dr. Adam G. Augustin - agametis
Entwicklung von modernen Benutzeroberflächen mit FM
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Quellen: SVG Icons und Tools
• http://commons.oreilly.com/wiki/index.php/SVG_Essentials - Einführung
• https://fmhelp.filemaker.com/docs/14/en/svg/
• http://www.w3.org/Graphics/SVG/
• http://www.datamanix.com/downloads/ - FM SVG Gallery
• http://www.indats.com/2015/06/15/indats-icon-manager/- FM SVG Tool

Dr. Adam G. Augustin - agametis
Entwicklung von modernen Benutzeroberflächen mit FM
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Quellen: Verschiedenes
• http://makerbook.net/ - A hand-picked directory of the best free
resources for creatives
• http://help.filemaker.com/app/answers/detail/a_id/14403 (Appicon
Infos)
• http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-
resolutions
• ivomynttinen.com/blog/the-ios-design-cheat-sheet-volume-2/
• http://youandsaturation.com/5-must-have-free-apps-for-graphic-
designers/

Dr. Adam G. Augustin - agametis
Entwicklung von modernen Benutzeroberflächen mit FM
FileMaker Konferenz 2015 Hamburg
www.filemaker-konferenz.com
Quellen: meine persönlichen Tools
• Digital Color Meter (MacOS, Farbenanalyse)
• MBS Plugin (MacOS, Syntax-Highliting und Variablen-Check)
http://www.monkeybreadsoftware.de/filemaker/
• fmWorkMate (speziell fmSyntaxColorizer )
http://www.freewebs.com/russellwatson/fmworkmate.htm
• fmXRaySpecs (FileMaker Layoutanalyse)
http://workflowdata.com/fmxrayspecs.html