DesignTools und Beispiele

von Dipl.-Ing. (FH) Arnold Kegebein

FileMaker Konferenz 2013 Salzburgwww.filemaker-konferenz.com

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

1

FileMaker Konferenz 2013 Salzburgwww.filemaker-konferenz.com

Dipl.-Ing. (FH) Arnold KegebeinBesseres Design

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

2

FileMaker Konferenz 2013 Salzburgwww.filemaker-konferenz.com

Dipl.-Ing. (FH) Arnold KegebeinBesseres Design

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

3

FileMaker Konferenz 2013 Salzburgwww.filemaker-konferenz.com

Dipl.-Ing. (FH) Arnold KegebeinBesseres Design

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

4

FileMaker Konferenz 2013 Salzburgwww.filemaker-konferenz.com

Dipl.-Ing. (FH) Arnold KegebeinBesseres Design

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

5

FileMaker Konferenz 2013 Salzburgwww.filemaker-konferenz.com

Dipl.-Ing. (FH) Arnold KegebeinBesseres Design

Text• Text Generator

• Lorem Ipsum www.lipsum.com

• Schrifttypenerkennung

• WhatTheFont www.myfonts.com/WhatTheFont

• Schrifttypenvergleich

• TypeTester www.typetester.org

6

FileMaker Konferenz 2013 Salzburgwww.filemaker-konferenz.com

Dipl.-Ing. (FH) Arnold KegebeinBesseres Design

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

• Color Scheme Designer colorschemedesigner.com inkl. eines Modus, wie Farbblinde die Farben wahrnehmen

• Bildfarbenanalyse

• Farben vom Bild www.propiedadprivada.com/lab/color

• Color Hunter www.colorhunter.com

7

FileMaker Konferenz 2013 Salzburgwww.filemaker-konferenz.com

Dipl.-Ing. (FH) Arnold KegebeinBesseres Design

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

8

FileMaker Konferenz 2013 Salzburgwww.filemaker-konferenz.com

Dipl.-Ing. (FH) Arnold KegebeinBesseres Design

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 moqups.com

9

FileMaker Konferenz 2013 Salzburgwww.filemaker-konferenz.com

Dipl.-Ing. (FH) Arnold KegebeinBesseres Design

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

10

FileMaker Konferenz 2013 Salzburgwww.filemaker-konferenz.com

Dipl.-Ing. (FH) Arnold KegebeinBesseres Design

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

11

FileMaker Konferenz 2013 Salzburgwww.filemaker-konferenz.com

Dipl.-Ing. (FH) Arnold KegebeinBesseres Design

Grid-System• Horizontales Gestaltungsraster

• Spalten

• Ränder bzw. Stege

• Monitorgrößen

• Vertikales Gestaltungsraster

• Grundlinienraster

• Bereichshöhen

12

FileMaker Konferenz 2013 Salzburgwww.filemaker-konferenz.com

Dipl.-Ing. (FH) Arnold KegebeinBesseres Design

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

13

FileMaker Konferenz 2013 Salzburgwww.filemaker-konferenz.com

Dipl.-Ing. (FH) Arnold KegebeinBesseres Design

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 www.youtube.com/watch?v=i06U6xDv-v0

14

FileMaker Konferenz 2013 Salzburgwww.filemaker-konferenz.com

Dipl.-Ing. (FH) Arnold KegebeinBesseres Design

Vielen Dank unseren Sponsoren

Danke für das Bewerten dieses Vortrages

15