1. Design
Tools und Beispiele
von Dipl.-Ing. (FH) Arnold Kegebein
Dipl.-Ing. (FH) Arnold Kegebein
Besseres Design
FileMaker Konferenz 2013 Salzburg
www.filemaker-konferenz.com
1

2. Ideensammlung
• Kreativität ist 99% Transpiration und 1% Inspiration
• Ideen müssen wachsen bevor sie reif sind
• Hilfsmittel zum Sammeln von Ideen
• Papier und Bleistift / Post-Its
• MindMaps
• Wikis
• Inspirationsquellen
• Internet
• Kollegen
• Konferenzen und FileMaker Stammtisch
Dipl.-Ing. (FH) Arnold Kegebein
Besseres Design
FileMaker Konferenz 2013 Salzburg
www.filemaker-konferenz.com
2

3. MindMap Programme
• FreeMind
• Kostenloses Java Programm für Windows, Mac, Linux
•  freemind.softonic.de
• XMind
• Kostenloses Java Programm für Windows, Mac, Linux
•  www.xmind.net
• MindNote Lite
• Kostenloses Programm für iPhone, iPad, Mac
•  mindnode.com
Dipl.-Ing. (FH) Arnold Kegebein
Besseres Design
FileMaker Konferenz 2013 Salzburg
www.filemaker-konferenz.com
3

4. Wikis
• TiddlyWiki
• Ein-Datei-Wiki für den Webbrowser, HTML/CSS/JavaScript
•  tiddlywiki.com
• TiddlyWiki5
• Relaunch von TiddlyWiki mit HTML5/CSS3/JavaScript
• Gegenwärtig im Beta-Status
•  five.tiddlywiki.com
• PmWiki
• PHP-basiertes Wiki, erfordert WebServer (z. B. Apache)
• Viele Erweiterungsmöglichkeiten
• auch in Deutsch erhältlich
•  www.pmwiki.org
Dipl.-Ing. (FH) Arnold Kegebein
Besseres Design
FileMaker Konferenz 2013 Salzburg
www.filemaker-konferenz.com
4

5. Weitere Tools
• yED
• Diagramme (Flowchart, Entity Relationship, …)
• Online, Offline Tool
•  www.yworks.com/en/products_yed_about.html
• Datengenerator
• GenerateData  www.generatedata.com
• Fake Name Generator  www.fakenamegenerator.com
Dipl.-Ing. (FH) Arnold Kegebein
Besseres Design
FileMaker Konferenz 2013 Salzburg
www.filemaker-konferenz.com
5

6. Text
• Text Generator
• Lorem Ipsum  www.lipsum.com
• Schrifttypenerkennung
• WhatTheFont  www.myfonts.com/WhatTheFont
• Schrifttypenvergleich
• TypeTester  www.typetester.org
Dipl.-Ing. (FH) Arnold Kegebein
Besseres Design
FileMaker Konferenz 2013 Salzburg
www.filemaker-konferenz.com
6

7. Farben
• Tutorial
• Farben im Webdesign  www.metacolor.de
• Bedeutung von Farben
• Color Meaning  www.color-wheel-pro.com/color-meaning.html
• Die Farbsymbolik  www.metacolor.de/farbsymbolik.htm
• KISSmetrics  blog.kissmetrics.com/gender-and-color/?wide=1
• Farbwähler
• Adobe Culer  kuler.adobe.com
Designer
• Color Scheme wie Farbblinde colorschemedesigner.com
inkl. eines Modus,
die Farben wahrnehmen
• Bildfarbenanalyse
• Farben vom Bild  www.propiedadprivada.com/lab/color
• Color Hunter  www.colorhunter.com
Dipl.-Ing. (FH) Arnold Kegebein
Besseres Design
FileMaker Konferenz 2013 Salzburg
www.filemaker-konferenz.com
7

8. Icons
• Icon Finder
• Icon Finder  www.iconfinder.com
• iconmonstr  iconmonstr.com
• iconlet  www.iconlet.com
• Icon Sammlungen
• Icons etc.  icons.mysitemyway.com
• Icon Finder  www.iconfinder.com/free_icons
Dipl.-Ing. (FH) Arnold Kegebein
Besseres Design
FileMaker Konferenz 2013 Salzburg
www.filemaker-konferenz.com
8

9. Mockups
• Ein erster Eindruck, wie das Layout aussehen könnte
• Schrift- und Objektgrößen entsprechen der Realität
• Design ist bewusst einfach (Drahtmodell oder Handzeichnung)
• Balsamiq Mockups, $79
 balsamiq.com
• inPreso online Mockups
 www.inpreso.com/inpresoscreens/
demo/113605/#
• moqups online Mockups
Dipl.-Ing. (FH) Arnold Kegebein
Besseres Design
 moqups.com
FileMaker Konferenz 2013 Salzburg
www.filemaker-konferenz.com
9

10. Web Design
• Web Viewer verwenden HTML/CSS/Javascript
• FileMaker 12 Layout Engine arbeitet mit einer CSS-Syntax
• Die Themes deuten an, dass hier noch mehr kommen wird
• CSS - Kaskadierende Stylesheets
• Ein Styledefinition vererbt ihre Attribute an untergeordnete
Elemente
Dipl.-Ing. (FH) Arnold Kegebein
Besseres Design
FileMaker Konferenz 2013 Salzburg
www.filemaker-konferenz.com
10

11. Web Design Tutorials und Quellen
• DIE deutsche Quelle für Web-Projekte (HTML/CSS/u.v.m.)
 www.selfhtml.org
• Online Web Tutorials (HTML/CSS/JavaScript/XML/u.v.m.)
 www.w3schools.com
• Canvas Tutorial
 developer.mozilla.org/en-US/docs/Web/
Guide/HTML/Canvas_tutorial
• jQuery – eine schnelle, kleine JavaScript Library
• Home Page  jquery.com
• Tutorials  www.learningjquery.com
Dipl.-Ing. (FH) Arnold Kegebein
Besseres Design
FileMaker Konferenz 2013 Salzburg
www.filemaker-konferenz.com
11

12. Grid-System
• Horizontales Gestaltungsraster
• Spalten
• Ränder bzw. Stege
• Monitorgrößen
• Vertikales Gestaltungsraster
• Grundlinienraster
• Bereichshöhen
Dipl.-Ing. (FH) Arnold Kegebein
Besseres Design
FileMaker Konferenz 2013 Salzburg
www.filemaker-konferenz.com
12

13. Grid-System in FileMaker
• Lineal
• Maßeinheit: in, cm, pt
• Verwendung entsprechend dem Ausgabemedium
• Gitter
• Haupt-, Nebenlinien
• Guides
• lokale, globale Guides
• gesperrte Guides
• Guides in gehosteten Datenbanken
• Bildschirmschablonen
Dipl.-Ing. (FH) Arnold Kegebein
Besseres Design
FileMaker Konferenz 2013 Salzburg
www.filemaker-konferenz.com
13

14. Grid-System Quellen
• Grid Generator
• Grid Designer  grid.mindplay.dk
• GridSystemGenerator  www.gridsystemgenerator.com
• GRID Calculator  gridcalculator.dk
• GridMaker, Yann Liqueur-Salzedo  www.infografix.eu/gridmaker
• Video Tutorial
• Grid Tool for FileMaker 12
Dipl.-Ing. (FH) Arnold Kegebein
Besseres Design
 www.youtube.com/watch?v=i06U6xDv-v0
FileMaker Konferenz 2013 Salzburg
www.filemaker-konferenz.com
14

15. Vielen Dank unseren Sponsoren
Danke für das Bewerten dieses Vortrages
Dipl.-Ing. (FH) Arnold Kegebein
Besseres Design
FileMaker Konferenz 2013 Salzburg
www.filemaker-konferenz.com
15