Du hast deinen AdBlocker an?

Es wäre ein Traum, wenn du ihn für t3n.de deaktivierst. Wir zeigen dir gerne, wie das geht. Und natürlich erklären wir dir auch, warum uns das so wichtig ist. Digitales High-five, deine t3n-Redaktion

Entwicklung & Design

Design2Code: 16 Tools und Services für Designer ohne Code-Kenntnisse

Design2Code. (Grafik: Shutterstock)

Das Design ist fertig, jetzt fehlt nur noch der Code? Kein Problem. Design2Code heißt das Zauberwort für Tools, Services und Plugins, die aus Layouts fertige Projekte machen.

Nicht jeder Designer ist in der Lage, seine in Photoshop entstandenen Layouts auch selbst umzusetzen – zu programmieren. Und wenn man es dann doch versucht, kann das – ohne die richtigen Kenntnisse – extrem zeitintensiv und frustrierend sein (man denke nur an Browserkompatibilität und Responsiveness). Zum Glück aber gibt einige einige Service-Anbieter, die einem diese Arbeit professionell abnehmen.

Das Prozedere: Man schickt eine PSD hin und bekommt – je nach Anbieter – so ziemlich alles, was man sich wünscht. Die meisten bieten außer des „Design2Code“-Services auch umfangreicheres Webdevelopment an. Und für diejenigen, die diese Arbeit doch nicht abgeben wollen, gibt es auch einige Plugins. Wir haben uns Anbieter und Tools für euch angeguckt und sagen euch, was sie taugen.

Design2Code: Service-Anbieter

1. PSD To Manythings

PSD To Manythings
Design2Code: Mit PSD To Manythings. (Screenshot: www.psdtomanythings.com)

PSD To Manythings bietet vielseitige und umfangreiche Konvertierungen an: vom einfachen HTML und CSS über WordPress- und Joomla-Themes bis hin zum Woo-Commerce-WordPress-Shop. Mit Kunden aus über 50 Ländern und über 500 WordPress-Implementationen zählt dieser Anbieter zu den Top-Playern auf diesem Gebiet.

Abgesehen davon, dass PSD To Manythings aus deinem Design eine funktionieren Website erstellt, hat das Unternehmen nie außer acht gelassen, dass die Zahl der mobilen Anwender stetig steigt; und so sind vor allem die Konvertierungen in responsives HTML eins der Kernangebote. Und wer will, kann auch seine Seite von PSD To Manythings pflegen und auf dem aktuellen Stand halten lassen – so kriegt man SEO-semantischen, gut dokumentieren Quellcode, der in Zeitrahmen und Budget passt.

2. Chop-Chop.org

Chop-Chop.org
(Screenshot: www.chop-chop.org)

Wie der lautmalerische Name schon erahnen lässt, nimmt „Chop-Chop.org“ ein PSD-Design und „choppt“ es in kleine Stücke, die dann in feinsten Gourmet-HTML- oder CSS-Code wieder zusammengesetzt werden. Das Ergebnis sind pixelgenaue, crossbrowser-kompatible, handgecodete und SEO-freundliche HTML-/CSS-Dateien.

Das Prozedere ist einfach: Man lädt sein Design hoch, bezahlt bequem via PayPal und hat kurze Zeit später die fertigen Dateien in seinem Postfach. Das Unternehmen ist noch relativ neu auf dem Markt, hat aber schon mehr als 500 zufriedene Kunden aus über 30 Ländern.

3. PSDgator

PSDgator
(Screenshot: www.psdgator.com)

Wenn PSDgator loslegt, ist das erst mal kostenlos. Man schickt sein Layout und PSDgator bietet kostenlose Konsultationen und Besprechungen an, bevor der Anbieter dann kostenpflichtig in die Tasten haut und das Projekt umsetzt. Allein dieser Service kann einem jedem Menge Ärger und Zeit ersparen, wenn Probleme identifiziert und gelöst werden, bevor die erste Zeile Code geschrieben wird.

Das Ergebnis ist wunderschönstes HTML und CSS, was so viel heißt wie: pixelgenaue, crossbrowser-kompatible Umsetzungen. PSDgator nimmt sich auf Wunsch sogar deine bestehende Webseite vor: slicet und codet alles neu – sauber und ordentlich.

Responsiveness, E-Commerce (Woo Commerce und Magento) und sogar Plugin-Entwicklung sind weitere Angebote, aus denen man wählen kann. Der Kundenservice ist schnell, überaus freundlich und unterstützt sofort, wenn man mal Probleme bei der Einbindung der umgesetzten Seite hat.

4. Pixel2HTML

pixel2HTML
(Screenshot: www.pixel2html.com)

Auch Pixel2HMTL ist einen Blick wert. Das Unternehmen liefert qualitativ hochwertige Umsetzungen, unter anderem auch für tumblr, WordPress und Shopify – zu einem sehr vernünftigen Preis. Wahlweise kann man seine Seite auch responsive und für Retina-Displays erstellen lassen.

Man schickt Pixel2HTML sein Layout mit einigen Anmerkungen und Angaben zu Umsetzung – zum Beispiel, welche Javascript-Bibliotheken verwendet und welche Funktionalitäten umgesetzt werden sollen. Dann meldet sich Pixel2HTML mit einem Angebot und einer Aufwandseinschätzung zurück. Ist das Angebot bestätigt, kann man sich zurücklehnen und schon bald landet die fertige hand-gecodete Seite im E-Mail-Postfach.

5. DirectBasing

DirectBasing
(Screenshot: www.directbasing.com)

DirectBasing hat in den letzten sieben Jahren mehr als 10.000 Projekte (das sind vier Projekte am Tag) umgesetzt. Durch ihren umfangreichen Erfahrungsschatz bieten sie Top-Qualität in der Umsetzung der Projekte. Sei es WordPress, Joomla, Magento oder ganz einfaches HTML und CSS. Selbstverständlich sind die Seiten alle responsive.

Einfach PSD/AI/INDD hochladen, DirectBasing alles zurechtschneiden und coden lassen … und dann das fertige Projekt runterladen.

6. Convert2xhtml

Convert2xhtml
(Screenshot: www.convert2xhtml.com)

Convert2xhtml erstellt aus deinem Layout HTML, WordPress-, Drupal-, Joomla- und andere Themes. Das Unternehmen kann aus deiner PSD auch E-Mails, OsCommers-Shops und Mobile Websites erstellen.

Convert2xhtml hilft dir auch bei der Installation und Konfiguration von Content-Management-Systemen, Templates und Modulen. Und das alles sogar mit einer Geld-zurück-Garantie.

7. Reliable PSD

Reliable PSD
(Screenshot: www.reliablepsd.com)

Reliable PSD ist ein brandneuer Design-to-HTML/-Wordpress-Service der Digitalagentur „Unexpected Ways“. Er richtet sich vor allem an Designer, die sehr viel Wert auf hohe Qualität legen und von anderen Angeboten frustriert und genervt sind. Auf ihrer Website heißt es: „Es ist wahrscheinlich ein ganz normaler Bestandteil ihres Alltags, Listen mit Änderungs- und Korrekturwünschen zu senden. Genauso wie die endlosen Stunden und die Energie die man dafür benötigt (und das Haareraufen, wenn man es wieder tun muss).“

Reliable PSD hat genau diese Probleme beseitigt und den gesamten Prozess so optimiert, dass man die Entwicklung der Website genießen kann. Hauseigene Designer überwachen den gesamten Entwicklungsprozess, sodass man am Ende auch das Ergebnis bekommt, das man sich gewünscht hat.

8. CSSChopper

CSSChopper
(Screenshot: www.csschopper.com)

CSSChopper ist ein Full-Service-Software-Haus, das unter anderem PSD-zu-HTML-, PSD-zu-HTML5-Konvertierungen und Responsive Webdesign anbietet. Dieser Anbieter akzeptiert so ziemlich jedes Standard-Designformat und erstellt crossbrowser-kompatiblen, pixelgenauen Code, der nach 48 Stunden zum Download bereit steht.

CSSChopper sind besonders stolz darauf, dass der Code, den sie produzieren, entschlackt ist und sehr schnell lädt. Und mehr als 9.300 Kunden dürften sich kaum irren.

9. 247xhtml

247xhtml
(Screenshot: www.247xhtml.com)

247xhtml behauptet von sich, der billigste und der beste aller Design2Code-Services zu sein. Für 45 US-Dollar kann man seine PSD innerhalb von 24 Stunden in XHTML 1.0 und CSS umwandeln lassen.

Zusätzliche Services sind: kommentierter Quelltext, skalierbare Schriften, verlinkte Seiten und ein zweistufiges Drop-Down-Menü. Das alles für sehr bodenständige Preise.

10. XHTMLized

XHTMLized
(Screenshot: www.xhtmlized.com

XHTMLized bietet sowohl Frontend- als auch Backend-Entwicklung an und erstellt aus PSDs sauberes HTML/CSS, WordPress-Templates und HTML-E-Mails – auf Wunsch auch responsive und für Retina-Displays, mit Mailchimp- und Trackingtool-Anbindung.

XHTMLized kann dich in jeglicher Hinsicht bei deinem Projekt unterstützen – sie erstellen sogar CSSS3-Animationen.

Design2Code: Plugins

1. CSS3Ps

CSS3PS
Design2Code als Plugin: CSS3PS. (Screenshot: www.css3psd.com)

CSS3PS ist ein kostenloses Plugin, das deine Photoshop-Ebenen in CSS3 umwandelt: Einfach die entsprechenden Ebenen auswählen und auf den Button des Plugins klicken. Auf der Homepage gibt es ein umfangreiches Video, das erklärt, wie dieses Cloud-basierte Plugin funktioniert.

Unterstützt werden Formebenen, Textebenen, Export von Ebenengruppen und das auf Basis von SCSS und SASS.

Design2Code: Tools

Die bisher vorgestellten Services und Plugins nehmen einem sowohl die Arbeit des „Zerschneidens“ eines Layouts, als auch das Programmieren ab. Wer allerdings seine Seite doch lieber selbst erstellen will und das möglichst ohne in die Tiefen des HTML- und CSS-Codes einzutauchen, dem ist mit den folgenden Tools geholfen.

1. Adobe Edge Reflow

Adobe Edge Reflow
(Screenshot: Adobe Edge Reflow)

Jeder, der ein Abo der Adobe Creative Cloud besitzt, hat auch automatisch eine Lizenz für Adobe Edge Reflow. Es ist eigentlich dafür gedacht, Photoshop-Layouts responsive-freundlicher zu machen und dem umsetzenden Programmierer zu zeigen, wie sich Elemente verhalten. Ein Design-Tool also, das es ermöglicht, wirklich responsive zu gestalten.

Adobe Edge Reflow und Photoshop greifen nahtlos ineinander. So muss man sein Design, das man in Photoshop erstellt hat, nicht erst wieder in Adobe Edge Reflow neu erstellen, sondern kann es direkt importieren und dann anfangen, sich um das Verhalten der Elemente bei den entsprechenden Breakpoints zu kümmern.

Die Benutzeroberfläche von Adobe Edge Reflow ist der von Photoshop und Indesign sehr ähnlich, sodass man sich sehr schnell „zuhause“ fühlt. Beim Editieren der Elemente sollte man allerdings schon ein grundlegendes Verständnis für HTML und CSS besitzen, da einige Elementverhalten sonst für Überraschungen sorgen könnten.

Anders als in den meisten anderen Tools kann man in Adobe Edge Reflow die Breakpoints visuell festlegen – ähnlich wie man Hilfslinien einzieht. Hilfreich ist auch die Möglichkeit, Minimum- und Maximum-Breakpoints festzulegen, sodass man auch in Adobe Edge Reflow „mobile first“ gestalten kann.

2. Webflow

Webflow
(Screenshot: www.webflow.com)

Webflow ist eines der neuesten Tools mit den meisten Features. Designs werden mit einem integreireten WYSIWYG-Editor erstellt – die Codegenerierung basiert auf Bootstrap 3.0. Webflow bietet die Möglichkeit, eine Website von Grund auf neu anzulegen oder aus einer riesigen Auswahl an Templates vom Webflow-eigenen Marktplatz auszuwählen.

Die Oberfläche kann man während der Arbeit zwischen „einfach“ und „fortgeschritten“ umstellen und anpassen, sodass Einsteiger nicht gleich von der Masse an Möglichkeiten und Funktionen erschlagen werden und sich langsam rantasten können. Die Webflowoberfläche reicht vollkommen aus, um eine Seite umzusetzen, ganz ohne in den HTML- und CSS-Code einzutauchen. Wer das dennoch will, muss sich allerdings einen bezahlten Account zulegen.

Projekte bei Webflow sind standardmäßig responsive. Sowohl in der Ansicht, als auch im Bearbeitungsmodus kann man zwischen den Ansichten Desktop, Tablet und Smartphone und da jeweils zwischen Hoch- und Querformat wählen.

3. MotoCMS 3.0

MotoCMS 3.0
(Screenshot: www.motocms.com)

MotoCMS 3.0 ist ebenfalls ein relativ neues Tool, das von Haus aus großartige responsive Templates mitbringt. Von der Oberfläche und Bedienbarkeit ist es Webflow sehr ähnlich. Der intuitive WYSIWYG-Editor mit Drag-&-Drop-Funktionalität macht einfach Spaß – und in Nullkommanix ist das Layout responsive umgesetzt.

Eins der besten Features des MotoCMS 3.0 Admin-Panels ist der sogenannte „intuitive support“. Jeder Bedienblock hat ein kleines Icon mit einem Fragezeichen, das erklärt, wofür man den jeweiligen Block verwendet. Das Farbwahlwerkzeug erlaubt es, das gesamte Farbschema des Designs mit nur einem Klick zu ändern. Nach einem Prinzip erben alle entsprechenden Elemente sämtliche Änderungen, die man vornimmt. Ähnlich wie bei Webflow sind die Templates mit drei Breakpoints versehen – wie etwa Mobiltelefon im Hoch- und Querformat.

Das wunderbare an MotoCMS 3.0 ist, dass man alles ohne vorherige Registrierung ausprobieren kann – ausgenommen natürlich das Speichern. So kauft man nicht die Katze im Sack.

4. Squarespace

Squarespace
(Screenshot: www.squarespace.com)

Squarespace ist ein altbekanntes Tool, das seit 2004 auf dem Markt ist und dessen Templates auch von sehr bekannten Seiten verwendet werden, wie dem Shutterstock Blog und DKNY We Are NYC. Das WebsiteTool ist voll responsive – also sieht die Website am Ende auf allen Geräten top aus.

Wie auch die anderen Tools bietet Squarespace die Möglichkeit von drei Breakpoint: Desktop, Tablet und Smartphone – leider ohne Querformatansicht. Bilder werden automatisch an die entsprechenden Größen angepasst. Um sich seine Website im Editor in der entsprechenden Größe angucken zu können, muss man seinen Browser entsprechend verkleinern – etwas müßig, vor allem, wenn man die Smartphone-Ansicht bearbeiten will.

5. Macaw

Macaw
(Screeshot: Macaw)

Macaw ist ein Newcomer in der Szene und ist im März 2014 an den Start gegangen. Macaw ist ein Webdesign-Tool, das semantisch korrektes HTML und CSS generiert. Macaw ist, genauso wie Edge Reflow, ein Offline-Tool, das man sich auf seinem Rechner installiert.

Die Benutzeroberfläche von Macaw ist ziemlich intuitiv, auch wenn man einige Dinger vermisst, wie zum Beispiel ein via Rechtsklick erreichbares Kontextmenü. Dafür gibt es ein sehr nützliches Feature: Man kann die Ansicht zwischen drei verschiedenen Modi wechseln: normal, outline und wireframe, sodass Macaw durchaus auch als Wireframing-Tool genutzt werden kann. Ein nahtloser Workflow von Konzept zum Design – wie schick ist das denn?

Ansonsten bietet Macaw, wie auch die anderen Tools, die üblichen Möglichkeiten, Elemente via Drag & Drop anzuordnen und zu repositionieren. Da man hier allerdings alle Breakpoints noch selbst setzt, ist es flexibler als beispielsweise Webflow – das nur drei Standard-Breakpoints bietet.

Du kennst noch weitere Dienstleister, Tools oder Plugins oder willst deine Erfahrungen mitteilen? Lass auch andere daran teilhaben und poste sie einfach in den Kommentaren.

Bitte beachte unsere Community-Richtlinien

4 Reaktionen
Mark Tely

Konvertieren PSD Designs Nach Magento erstellen theme: http://www.mtoag.com/psd-magento.htm

Antworten
hans_helb

Nach eigenen Designs HTML Emails erstellen: https://responsive.email/de/

Antworten
Maruboy

Gute Auswahl, habe auch schon Erfahrungen mit einigen gemacht. Leider ist die Qualität und das Pflichtbewusstsein für die Einhaltung der Termine nicht immer so genau wie hier. http://www.markuphelden.de/ Ist eine gute alternative für den deutschsprachigen Raum.

Antworten

Melde dich mit deinem t3n-Account an oder fülle die unteren Felder aus.

Abbrechen

Finde einen Job, den du liebst