Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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.868 Aufrufe

Veröffentlicht am

  • Als Erste(r) kommentieren

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

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

×