fmk2015: entwicklung von modernen benutzeroberflächen mit filemaker pro by adam augustin

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



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

[email protected]

mailto:[email protected]



… 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“



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

http://www.filemaker.com/products/filemaker-pro/version-comparison.html



Skripttrigger in FileMakerAn

zahl 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

http://help.filemaker.com/app/answers/detail/a_id/7465/~/understanding-and-using-script-triggers



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)



Hands-On

Custom Themes/Designs



Hands-On

Button Bars



Demo

Slider



Demo

PopOver



Demo

Kontrolliertes Speichern



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“



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

https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/

https://dribbble.com/tags/user_interface

https://color.adobe.com/create/color-wheel/

http://www.materialpalette.com/

https://icons8.com/



Vielen Dank unseren Sponsoren

Danke für das Bewerten dieses Vortrages



Q & A

Vielen herzlichen Dank



Wir sehen uns nach der Kaffeepause



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

https://developer.apple.com/library/ios/documentation/UserExperience/Conceptual/MobileHIG/

http://www.google.com/design/spec/material-design/introduction.html

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



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

https://www.thedash.com/

https://dribbble.com/tags/user_interface

http://tech.co/5-go-websites-design-inspiration-2015-08

http://www.pinterest.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/

https://inkscape.org/en/

http://colourco.de/

https://color.adobe.com/

http://gridpak.com/

http://www.blocklayer.com/GoldenRatio.aspx

http://www.kostelijk.nl/thegoldenratiocalculator/index.php

https://www.iconfinder.com/

https://icons8.com/

http://www.flaticon.com/

https://www.google.com/design/icons/



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

http://commons.oreilly.com/wiki/index.php/SVG_Essentials

https://fmhelp.filemaker.com/docs/14/en/svg/

http://www.w3.org/Graphics/SVG/

http://www.datamanix.com/downloads/

http://www.indats.com/2015/06/15/indats-icon-manager/



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/

http://makerbook.net/

http://help.filemaker.com/app/answers/detail/a_id/14403

http://www.paintcodeapp.com/news/ultimate-guide-to-iphone-resolutions

http://ivomynttinen.com/blog/the-ios-design-cheat-sheet-volume-2/

http://youandsaturation.com/5-must-have-free-apps-for-graphic-designers/



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

http://www.monkeybreadsoftware.de/filemaker/

http://www.freewebs.com/russellwatson/fmworkmate.htm

http://workflowdata.com/fmxrayspecs.html

fmk2015: entwicklung von modernen benutzeroberflächen mit filemaker pro by adam augustin

Technology