FMK 2013 Design, Gestaltungsmittel in Layouts, Arnold Kegebein

1.631 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.631
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

×