Die Anpassung des CSS-Codes einer Website mit Hilfe der Chrome Entwicklertools gehört fest zum modernen Web Design-Workflow. Die gemachten Änderungen sind allerdings nur lokal sichtbar und auch nur solange die Seite nicht neu geladen wird. Um die Zusammenarbeit – z. B. zwischen Designern und Entwicklern – zu verbessern, können die gemachten Änderungen in den Chrome DevTools gespeichert und exportiert werden.
In den vergangenen Jahren haben sich zahlreiche Tools und Workflows entwickelt um den Design-Development-Workflow zu optimieren. Das Ziel besteht oft darin, Designern eine möglichst codefreie Gestaltungsoberfläche zu bieten und die Übergabe des Layouts an Entwickler zu perfektionieren. Doch ist das die Lösung für einen zeitgemäßen Designprozess?
Wenn Web-Projekte nach modernen Workflow-Konzepten realisiert werden, stehen die späteren Benutzer im Zentrum aller Überlegungen. Interaktive Prototypen werden in diesem Zusammenhang immer wichtiger, um das entstehende Produkt möglichst früh und regelmäßig auf das Erreichen der gesteckten Ziele zu überprüfen. Bei umfangreichen Projekten helfen Prototypen zudem dabei den Gesamtumfang im Blick zu behalten.
Es gibt zahlreiche Arten, Prototypen umzusetzen – alle haben Vor- und Nachteile. Grob lassen sich drei Gruppen bilden: analoge, digitale und native Prototypen. Sie unterscheiden sich in Zielsetzung, Anwendbarkeit im Projektverlauf und der Qualität der Ausgestaltung.
CSS hat eine vergleichsweise einfache Syntax und erlaubt daher einen leichten Einstieg. Dennoch kann CSS in der Organisation schnell komplex werden. Das gilt besonders für größere Projekte mit mehreren involvierten Entwicklern, aber auch für kleine und mittlere Projekte in Eigenverantwortung. In diesem Beitrag fassen wir einige Tipps zusammen, die euch helfen sollen besseren CSS-Code zu schreiben.
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.
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.
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.
Webentwickler nutzen zahlreiche Tools um die Code-Qualität von Websites automatisch zu überprüfen. Neben Validatoren, Lintern und Google Page Speed sind …
Beitrag zu Ende lesenWireframes waren für lange Zeit ein essenzielles Element im Web Design-Workflow. Doch agile Prozesse, neue Design-Tools und ein verändertes Bewusstsein …
Beitrag zu Ende lesenHTML5 Boilerplate ist ein extrem umfangreiche HTML5 Startpaket für die Arbeit mit HTML5-Websites. Allerdings müsst Ihr Boilerplate je nach Bedürfnis …
Beitrag zu Ende lesen