Webseiten entwickeln – aktuell und zukunftsorientiert

Im 1. Teil „Webseiten entwickeln“ sprachen wir darüber, wie über die Zeit immer mehr mit PSD Dateien gearbeitet wurde um dem Kunden vor dem Projekt zeigen zu können was er am Ende erhalten würde. Dies ist durch die neuen Devices und das veränderte Surfverhalten nicht mehr ohne extremen Aufwand im Grafikbereich möglich und zudem besitzt der Kunde kein sauberes Verständnis was er bekommen wird.

Mobile First bedeutet das die grafische Entwicklung im simpelsten Modus von mobilen Endgeräten beginnt eine Webseite zu planen.

Atomic Design ist die Antwort für mittlere und große Projekte

Heutzutage ist es sinnvoll Webseiten „atomar“ zu planen. Hier fängt der Webdesigner an Elementare Teilchen einer Webseite zu definieren auf der Basis der CI der Firma.

Ein Beispiel sind die Farben, der Font, H1-H5, Linien usw… Aus diesen „Atomen“ ist es nun möglich „Moleküle“ zu erstellen. Hier als Beispiel Formular Elemente wie Textfeld => da hier Linien und Text vereinigt werden.

Aus diesen zusammen gesetzten Teilen können dann ein Organismus entstehen. Ganze Formulare,  Erweiterungen usw.

Ganz zum Schluss werden aus vielen Organismen ein Template. Das Ergebnis kann man dann in einem Patternlab, einer Übersicht von allen Atomen, Molekülen, Organismen und Templates, sich anzeigen lassen. Hier ein Beispiel des Beispiel-Patternlabs von patternlab.io  Hier hat man, wenn man von Anfang an auf alle Gerätetypen geachtet hat und von Mobile first startete automatisch ein mobil-fähiges Design-Template erstellt. 

Wichtig ist zu sagen das Atomic Design nicht automatisch ein RWD Template (Reponsive Web Design = mobil fähig ) erstellt sondern nur eine Art von Abarbeitung ist um ein sauberes Template erstellen zu können. Nur wenn der Webdesigner den Auftrag hat auch RWD umzusetzen und dies auch so macht, bekommt man auch am Ende ein Patternlab welches mobilfähig ist.

Hört sich leicht an, ist es auch. Jedoch das initiale Erstellen einer Webseite ist sehr zeit intensiv. Der große Vorteil besteht darin, dass wenn ein Atomic Design einmal erstellt wurde, Anpassungen schnell und unkompliziert umgesetzt werden können. Zudem haben Webentwickler für die Umsetzung ein besseres Verständnis. Alles super, jedoch bei sehr kleinen und klein bis mittleren Webseiten lohnt sich der Aufwand nicht immer. Hier ist Fingerspitzengefühl gefragt. Denn jede Änderung geht nicht sofort in die Entwicklung sondern erst mal über den Webdesigner. Dieser kann bei neuen Elementen Anpassungen vornehmen und danach es wieder zum Dev geben. 

Wollen Sie nun mehr über dieses Thema wissen?  
Einfach einen Schulungstermin bei thehelper ausmachen und zusammen mit uns Ihr erstes Atomic Design Pattern aufbauen.

Na dann ist ja jetzt alles Paletti ;). Naja … noch nicht ganz. Es braucht ja auch noch den versierten Webdesigner welche uns das Design erstellt. Aber wie erkenne ich diese Personen? Es gibt so viele „Webdesigner“. Diese sind meistens aber hauptsächlich aus dem Print Bereich. Arbeiten also meistens mit Photoshop, Fireworks usw.

Wir haben dafür eine kleine Liste erstellt um Designer unter die Probe zu stellen.