d12g

Blog von Daniel Grewing

5 Tipps, wie man als Webentwickler gutes Webdesign hinbekommt

22. März 2015 Softwareentwicklung

Bei der Entwicklung von Internetseiten kommen zwei unterschiedliche Tätigkeiten zum Einsatz. Auf der einen Seite der kreative, künstlerische Prozess bei der Erstellung des Webdesigns und auf der anderen Seite, die ingenieurmäßige Implementierung der Webseiten.
Für alle, die sich eher auf der technischen Seite wohl fühlen, habe ich einige Tipps zusammengefasst, wie man auch die andere Seite meistern kann.

1. Die Grundlagen verstehen
Das Webdesign ist eine Disziplin aus dem Grafikdesign. Obwohl das Medium Internet bewegte Bilder und unterschiedliche Anzeigegeräte unterstützt, gibt es doch Ähnlichkeiten mit dem Printdesign. Die Grundlagen von Grafik und Gestaltung zu verstehen heißt auch, diese Aspekte beim Webdesign besser beurteilen zu können.

Ein guter Einstieg ist das Handbuch von Markus Wäger. Die Kapitel zu Form, Farbe, Bild, Schrift, Textsatz, Lesetypografie und Gestaltungsraster sind alles Themen, die auch beim Webdesign eine grundlegende Rolle spielen. Wenn man sich mit diesen Themen vertraut gemacht hat, versteht man die Designprinzipien besser, wie sie die Infografik zeigt.

 

 

2. Wie machen es die anderen

Eine umfassende Sammlung von unterschiedlichen Webdesigns aus verschiedenen Bereichen kann man in den Büchern von Patrick McNeil nachschlagen. Seine Bücher kategorisieren Webseiten nach Farben, nach Typen (Business, Blogs, Portfolio usw.) oder nach Stylings (Minimalistisch, „sketchy“ oder „wood“). Die ersten beiden Ausgabe sind von 2008 bzw. 2010 und mittlerweile nicht mehr modern, für die erste Ideenfindung dennoch hilfreich. Mittlerweile gibt es schon die Ausgaben 3 (2013) und 4 (2014).
Möchte man auf den aktuellen Stand der Webdesign Trends bleiben, folgt man Blogs wie web creme oder webdesign inspiration.

3. CSS-Frameworks lernen
Ein weiterer Weg zum guten Webdesign kann auch der Einsatz von CSS-Frameworks wie Bootstrap, Foundation, Pure (oder ein ganz anderes) sein. Bereits mit den Standardtemplates kann man schöne Designs umsetzen.
Setzt man das Framework von Twitter, Bootstrap, ein, kann man auf viele freie Templates auf OpenSource Basis zurückgreifen. Diese kann man nach Belieben seinen eigenen Vorstellungen anpassen. Wenn man sich von der Masse abheben will, sucht man auf den diversen Plattform eine kostenpflichtige Vorlage. Versteht man dann noch die Design-Grundlagen, fällt es leichter aus den vielen Bäumen des Vorlagenwaldes sich die Rosen herauszupicken.

4. Pattern
Als Software Entwickler ist man vertraut mit Entwurfsmuster, z.B. mit den Patterns der Gang of Four. Entwurfsmuster sind Lösungsschablonen für wiederkehrende Probleme. In der Software Entwicklung steht man häufig vor Herausforderungen, über die sich andere bereits Gedanken gemacht haben. Anstatt das Rad neu zu erfinden, schaut man sich an, ob es bereits brauchbare Lösungsansätze gibt. Im Webdesign ist es manchmal ganz ähnlich. Registrierungsformulare gibt es häufiger, ebenso Darstellungen von Benutzerprofilen oder Datentabellen. Die Seiten UI-Patterns und die Design Pattern Libray von Yahoo sammeln Entwurfsmuster für Webdesign. Hilfreich können auch Sammlungen zu UI und UX bei Pinterest sein.

5. Design Guidelines
Google hat mit dem neuen Design für Android 5 eine sehr ausführliche Guideline erstellt. Der Guide beginnt mit einer Einführung in Design Prinzipien und erklärt ausführlich, wie man Fonts, Layouts und weitere Vorgaben umsetzen soll, damit eine Android App so ausschaut, wie Google sich das vorstellt. Die Guideline ist natürlich für die Entwicklung von Android Apps ausgelegt, die Regeln kann man prinzipiell aber auch für Webseiten verwenden. Und in Zeiten von responsive Webdesigns werden native Webseiten den Smartphone Apps immer ähnlicher.
Hilfreich finde ich vor allem die Farbpaletten und die Regeln, wie man sich ein Satz aus Primär- und Sekundärfarben zusammenstellt. Lehrreich ist auch der Vergleich von do und dont’s bei der Gestaltung von Layouts.
Analog hat Microsoft eine Guideline für das Kacheldesign von Windows 8 (früher Metro genannt) und Apple bietet ebenfalls Hilfestellungen für seine App-Entwickler an.

Es gibt verschiedene Wege wie man sich als Webentwickler an das Thema Webdesign wagen kann. Bei all den Ansätzen darf man aber nicht vergessen, dass eine gute Webseite von weiteren Kriterien abhängt. Bei allen kreativen Ausschweifungen darf der Benutzer der Webseite und damit die Benutzerschnittstelle nicht aus den Augen verloren werden. Was hilft ein schickes Design, wenn man den Login-Button nicht findet.

Formularvalidierung mit Grails und Bootstrap

15. Februar 2015 Softwareentwicklung

Bei der Formularentwicklung muss auch immer die Validierung von Benutzereingaben berücksichtigt werden. Für einfache Überprüfungen kann man gut die Möglichkeiten von HTML5 nutzen. So können einfach die Eingaben von einzelnen Eingabefeldern kontrolliert werden. Wenn es etwas komplizierter wird, weil zwei Eingabefelder voneinander abhängen, kann man sich mit JavaScript helfen.
In einigen Fällen ist es aber nötig, die Eingaben mit der Datenbank abzugleichen. Bei einer Registrierung zum Beispiel muss auf existierende Benutzernamen oder E-Mails geprüft werden.
Weiterlesen →

Internet der Dinge – Mein Weihnachtsprojekt

7. Februar 2015 Softwareentwicklung

Das Internet der Dinge („Internet of Things oder kurz IoT) mutierte in letzter Zeit immer mehr zum Schlagwort bei den aktuellen IT-Trends. Die Definition ist nicht ganz eindeutig und es existieren viele verschiedene Anwendungsbereiche. Kühlschränke können das Essen selbständig nachbestellen, der Toaster druckt das Wetter auf den Toast, die Heizung reguliert sich selbstständig oder die Uhr wird zur Verlängerung des Smartphones. Im Grunde sollen alle „Dinge“ über das Internet kommunizieren.

Kleinstcomputer, Elektronikbauteile und Sensoren
Die Entwicklung bei Kleinstcomputern (Raspberry Pi, Banana Pi) und einfachen modularen Elektronikbauteilen und Sensoren (Arduino, Tinkerforge) machen es einfach, auch selbst mit dem IoT zu experimentieren. Also habe ich zu Weihnachten mein erstes IoT-Projekt umgesetzt.
Zur Tradition von Weihnachten gehört es, die Wohnung zu dekorieren und das Lichtkonzept zu erweitern. Ein häufig anzutreffender Umbau ist, die Fenster mit Lichterketten zu versehen. Dadurch wird die Wohnung festlicher beleuchtet und der Welt wird demonstriert, „jo, hier wird Weihnachten gefeiert“.
Um nicht alle Lichterketten, wenn die Dunkelheit hereinbricht, händisch an, und vor dem Zubettgehen, wieder aus zu machen, verwendet man zur Steuerung Zeitschaltuhren. Das sind Aufsätze für Steckdosen und über kleine mechanische Stäbchen kontrolliert man die Steuerung der Stromzufuhr zeitabhängig. Um diese anachronistischen und mechanischen Brocken zu ersetzen, davon handelt mein Beitrag.
Weiterlesen →