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

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

… 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.ﬁlemaker.com/products/ﬁlemaker-pro/version-comparison.html

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.ﬁlemaker.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

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

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

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/

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

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/

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

FMK2015: Entwicklung von modernen Benutzeroberflächen mit FileMaker Pro by Adam Augustin

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie FMK2015: Entwicklung von modernen Benutzeroberflächen mit FileMaker Pro by Adam Augustin

Ähnlich wie FMK2015: Entwicklung von modernen Benutzeroberflächen mit FileMaker Pro by Adam Augustin (20)

Mehr von Verein FM Konferenz

Mehr von Verein FM Konferenz (20)

FMK2015: Entwicklung von modernen Benutzeroberflächen mit FileMaker Pro by Adam Augustin