Design
Tools und Beispiele
von Dipl.-Ing. (FH) Arnold Kegebein

Dipl.-Ing. (FH) Arnold Kegebein
Besseres Design

FileMaker...
Ideensammlung
• Kreativität ist 99% Transpiration und 1% Inspiration
• Ideen müssen wachsen bevor sie reif sind
• Hilfsmit...
MindMap Programme
• FreeMind
• Kostenloses Java Programm für Windows, Mac, Linux
•  freemind.softonic.de
• XMind
• Kosten...
Wikis
• TiddlyWiki
• Ein-Datei-Wiki für den Webbrowser, HTML/CSS/JavaScript
•  tiddlywiki.com
• TiddlyWiki5
• Relaunch vo...
Weitere Tools
• yED
• Diagramme (Flowchart, Entity Relationship, …)
• Online, Offline Tool
•  www.yworks.com/en/products_...
Text
• Text Generator
• Lorem Ipsum  www.lipsum.com
• Schrifttypenerkennung
• WhatTheFont  www.myfonts.com/WhatTheFont
•...
Farben
• Tutorial
• Farben im Webdesign  www.metacolor.de
• Bedeutung von Farben
• Color Meaning  www.color-wheel-pro.co...
Icons
• Icon Finder
• Icon Finder  www.iconfinder.com
• iconmonstr  iconmonstr.com
• iconlet  www.iconlet.com
• Icon Sam...
Mockups
• Ein erster Eindruck, wie das Layout aussehen könnte
• Schrift- und Objektgrößen entsprechen der Realität
• Desig...
Web Design
• Web Viewer verwenden HTML/CSS/Javascript
• FileMaker 12 Layout Engine arbeitet mit einer CSS-Syntax
• Die The...
Web Design Tutorials und Quellen
• DIE deutsche Quelle für Web-Projekte (HTML/CSS/u.v.m.)
 www.selfhtml.org

• Online Web...
Grid-System
• Horizontales Gestaltungsraster
• Spalten
• Ränder bzw. Stege
• Monitorgrößen
• Vertikales Gestaltungsraster
...
Grid-System in FileMaker
• Lineal
• Maßeinheit: in, cm, pt
• Verwendung entsprechend dem Ausgabemedium
• Gitter
• Haupt-, ...
Grid-System Quellen
• Grid Generator
• Grid Designer  grid.mindplay.dk
• GridSystemGenerator  www.gridsystemgenerator.co...
Vielen Dank unseren Sponsoren

Danke für das Bewerten dieses Vortrages
Dipl.-Ing. (FH) Arnold Kegebein
Besseres Design

Fi...
Nächste SlideShare
Wird geladen in …5
×

FMK 2013 Design, Gestaltungsmittel in Layouts, Arnold Kegebein

1.738 Aufrufe

Veröffentlicht am

0 Kommentare
0 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

  • Gehören Sie zu den Ersten, denen das gefällt!

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.738
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
3
Aktionen
Geteilt
0
Downloads
43
Kommentare
0
Gefällt mir
0
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

FMK 2013 Design, Gestaltungsmittel in Layouts, Arnold Kegebein

  1. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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

×