kulturbanause Blog

Responsive Design, WordPress, Konzeption, HTML, CSS, JS & UX/UI …

Workflow


Wie Designer und Programmierer ihre Zusammenarbeit optimieren können

Die Zusammenarbeit von Designern und Entwicklern gestaltet sich traditionell schwierig. Da bei der Erstellung von modernen Websites Design und Programmierung gemeinsam entwickelt werden, führen Kommunikationsprobleme zwischen Kreation und Development dazu, dass Projekte nicht wie gewünscht ablaufen können.

Der folgende Gastbeitrag stammt von UX-Designer Jonas Laufenberg. Er hat an der Rheinischen Fachhochschule Köln seine Bachelorarbeit zum Thema »Zusammenarbeit/Workflow von Designer und Programmierer« geschrieben und für seine Arbeit Interviews mit verschiedenen Designern und Programmierern geführt. Neben der schriftlichen Ausarbeitung der Bachelorarbeit hat er eine Microsite eingerichtet, in der er konkrete Handlungsempfehlungen aufführt.

Die Ergebnisse seiner Arbeit decken sich zu 100% mit meinen Erkenntnissen aus verschiedenen Projekten und werden so von mir auch in unseren Schulungen behandelt. Ich freue mich daher sehr, dass ich Jonas für diesen Gastbeitrag gewinnen konnte.

Beitrag zu Ende lesen

Verknüpfte Smartobjekte in Photoshop CC (14.2+)

Mit verknüpften Smartobjekten hat Adobe im neuesten Update von Photoshop ein lange erwartetes Feature bereitgestellt. Mit verknüpften Smartobjekten können Layouts und Collagen modular verwaltet werden. Verschiedene Designer können nun gleichzeitig an verschiedenen Bereichen eines Projekts arbeiten und auch für den einzelnen Designer wird der Workflow enorm vereinfacht und beschleunigt.

Beitrag zu Ende lesen

Live-Dateiexport (Bild-Assets) mit dem Photoshop CC Generator

Als Webdesigner hat man u. a. die Aufgabe die verschiedenen Elemente innerhalb eines Photoshop-Dokuments auszuwählen und im passenden Dateiformat zu exportieren. In jüngerer Vergangenheit wurde dieser Job zunehmend lästig, da der Workflow nicht mehr linear verläuft und neue Herausforderungen wie Retina-Optimierung & Co. den Aufwand erhöht haben. Mit den Bild-Assets in Photoshop CC (14.1) hat Adobe daher eine enorm hilfreiche Funktion für Web Designer integriert.

Beitrag zu Ende lesen

Mobile First + Progressive Enhancement

Das mobile Internet hat die Art und Weise wie wir Websites entwickeln grundlegend verändert. Vor einiger Zeit habe ich einen Artikel über den veränderten Workflow im Responsive Design veröffentlicht und erklärt, warum wir umdenken müssen, mit welchen Herausforderungen wir uns konfrontiert sehen und welche Lösungsansätze es gibt.
Doch nicht nur die Erstellung eines flexiblen Layouts ist wichtig. Auch die Performance-Optimierung, die Browserkompatibilität und die Informationsarchitektur sind entscheidend für den späteren Erfolg der Website.
In diesem Artikel möchte ich beschreiben, inwiefern sich die Sichtweise bei der Konzeption und Entwicklung von Websites verändert hat.

Beitrag zu Ende lesen

Der Workflow im Responsive Web Design – Prototyping & Co.

Die Entwicklung vom lokalen Desktop-Computer zum allgegenwärtigen „mobile Web“ zwingt uns dazu Webdesign-Projekte heute anders zu planen, zu gestalten und technisch umzusetzen als noch vor ein paar Jahren. Die schier unüberschaubare Anzahl an Displaygrößen, Geräten, Browsern und individuellen Einstellungen macht den bisherigen Workflow ineffizient, führt zu falschen Erwartungshaltungen bei Kunden und ist für langfristig angelegte Web-Projekte nicht mehr empfehlenswert. Die Anforderungen haben sich verändert und wir sollten darauf reagieren.

Beitrag zu Ende lesen

HTML5-Templates auf Boilerplate-Basis mit Initializr generieren

HTML5 Boilerplate ist ein extrem umfangreiche HTML5 Startpaket für die Arbeit mit HTML5-Websites. Allerdings müsst Ihr Boilerplate je nach Bedürfnis ziemlich abspecken bzw. anpassen. Initializr übernimmt diese Aufgabe für Euch. Ihr legt zunächst fest welche Bestandteile von Boilerplate Ihr für die neue Website einsetzen wollt - jQuery, Modernizr, Serverconfigs etc. Anschließend erhaltet Ihr ein dokumentiertes Download-Paket und könnt direkt loslegen. Selbst eine ToDo wird mit exportiert, so dass Ihr genau wisst was angepasst werden muss. Wie beispielsweise das Favicon oder der <title>-Tag.

Initializr

Data Driven Images mit Photoshop und Excel-Import

Designer müssen häufig eine große Anzahl an Dateien erstellen die sich zwar inhaltlich unterscheiden, vom verwendeten Raster oder der Gestaltung jedoch weitestgehend gleich bleiben sollen.
Als Beispiel sei hier eine Einladungskarte genannt, die über individuelle Namen und Anschriften verfügt. Alle Dateien einzeln in Photoshop zu erstellen ist ein zeitaufwändiger und langweiliger Arbeitsprozess den wir natürlich vermeiden wollen. Mit Microsoft Excel sowie der Möglichkeit in Photoshop Variablen zu verwenden lässt sich ein automatisierter Prozess starten der alle unliebsamen Aufgaben für uns erledigt.
Wie das im Handumdrehen funktioniert zeige ich Euch in diesem Screencast mit anschließender Checkliste zur Nachbereitung. Viel Spass mit Data Driven Images und einer weitestgehend unbekannten Funktion in Photoshop!

Beitrag zu Ende lesen