Mit Webflow lassen sich Webseiten erstellen. Im Beitrag die Erfahrungen damit.

Einführung

Webflow (im Beitrag auch mit WF abgekürzt) ist ein Websitebaukasten. Das Besondere dabei ist jedoch, dass man damit viel komplexere Internetpräsenzen erschaffen kann, als das mit anderen Werkzeugen wie WIX oder Jimdo möglich wäre.

Besonderheiten

Hier einige Besonderheiten:

Speicherung auf dem Server des Anbieters

Anders bei anderen komplexen Webseiten-Systemen, wie zum Beispiel bei WordPress, liegen die Dateien nicht auf dem eigenen Server/ Webhosting, sondern auf dem von Webflow.

Das hat Vorteile und Nachteile.

Ein Vorteil ist natürlich, dass WF ein performantes Hosting liefert, dass auch sicher vor Angriffen von Dritten ist.

Der Nachteil ist jedoch, dass man dadurch eingeschränkt ist. Man kann zum Beispiel keine Änderungen am Source Code vornehmen, und zum Beispiel eigene individuelle Programmierungen hinzufügen. Wie das zum Beispiel bei WordPress (über Plugins und Themes) oder anderen Lösungen möglich ist.

Damit muss man auf die Designmöglichkeiten zurückgreifen, welches das Tool bereitstellt.

Komplexe Webdesigns möglich

Es stimmt zwar, dass man auch mit WordPress, eigene komplexe und schöne Designs erstellen kann. Das ist jedoch nicht immer ganz einfach, und man braucht hier dann einen Designer (Photoshop Experten), einen Webdesigner (HTML/ CSS Profi) und einen Webentwickler (WP Freelancer oder ähnlichen).

Bei Webflow kann auch der Designer selbst die kompletten Schritte machen. Dafür hilft auch der nächste Punkt.

Ohne Programmierkenntnisse nutzbar

Ein Designer ohne technische Kenntnisse kann das Werkzeug nutzen.

Beispielsweise hat es ein relativ komplexes Designtool. Man braucht etwas Zeit bis man dieses erlernt.

Man braucht hierfür keine Programmierkenntnisse, wie das bei anderen Systemen der Fall wäre.

Professionelle Designs kann man auch in Figma (eine Software mit der man Benutzeroberflächen designen kann) erstellen und diese dann in Webflow benutzen. Es kann sinnvoll sein sich mit der Zeit Kenntnisse in HTML, CSS und JavaScript anzueignen, um damit dann auch komplexere Designs umzusetzen.

Nur eine Person kann die Website erstellen

Das bedeutet also, dass der Designer den kompletten Prozess, von der Beratung, über das UI/ UX, das Branding und auch die technische Umsetzung übernehmen kann.

Daher findet es immer mehr Beliebtheit bei UI/ UX Designern, die sich nicht mehr einen Webdesigner und Programmierer dazuholen möchten. Sondern alles selbst anbieten möchten.

Auch für mittelständische Unternehmen nutzbar

Die Erfahrung zeigt, dass sich mit WF auch Internetseiten erstellen lassen, welche auch im Mittelstand nutzbar sind.

Auch Onlinepräsenzen von erfolgreichen Startups und mittelständischen Unternehmen werden damit zunehmen umgesetzt.

Die Verkaufsargumente sind dabei die höhere Sicherheit, da Speicherung auf dem Hosting von Weblow selbst, die einfachere Bedienbarkeit, die Flexibilität im Design.

Es eignet sich besonders, wenn man auf ein starkes Branding setzt, und gegenüber den Webbesuchern einen guten Eindruck machen will.

Eventuelle Nachteile

Hier auch ein paar Nachteile.

Mit der Zeit erkennt man, ob eine Website mit diesem Werkzeug erstellt wurde

Jemand der sich längere Zeit mit WF beschäftigt hat, merkt mit der Zeit, ob eine Internetseite mit diesem Werkzeug erstellt wurde. Denn es nutzt bestimmte Designelemente.

Das muss jedoch kein Nachteil sein, denn die schlussendlichen Nutzer (Kunden, Mitarbeiter des Kundenunternehmens, etc.) sind ja keine WF Designer, sondern wollen sich zu unterschiedlichen Dingen wie der Marke oder den Services/ oder Produkten informieren.

Keine individuellen Programmierungen möglich

Es kann sinnvoll sein eine Internetpräsenz auf Webflow zu kreieren. Besonders für mittelständische Unternehmen, welche eine starke Marke aufbauen wollen.

Die Problematik ist jedoch, dass man auf dieser Homepage keine individuellen Programmierungen vornehmen kann.

Denn manche mittelständische Firmen möchten eventuell einen Produktkonfigurator integriert haben, oder eigene Plugins oder Module, welche die Website ergänzen.

Ist das jedoch nicht der Fall, dann kann man auf WF setzen.

Nicht auf dem eigenen Server speicherbar

Die Daten sind “irgendwo” gespeichert. Meistens in den USA oder Irland.

Das ist besonders für Unternehmen problematisch, in denen Datenschutz wichtig ist.

Wenn Nutzer jedoch keine Daten auf der der Website hinterlassen, sollte das wiederum kein Problem sein.

Zudem lassen sich auch keine eigenen Sicherheitsmassnahmen implementieren, da alles vom WF Webshosting abhängt.

Für Laien nur schwer nutzbar

Wenn man Webflow wirklich gut nutzen möchte, dann sollte man auf einen Profi setzen, der sich damit auskennt.

Denn die Design Oberfläche lässt sich nicht in wenigen Stunden oder Tagen bedienen.

Man braucht dafür mehrere Wochen, um alles richtig zu verstehen. Zudem gibt es viele versteckte Funktionalitäten, mit welchen man komplexe Seiten und Effekte erstellen kann.

Daher sollte man immer auf einen Webflow Entwickler setzen, welcher sich darauf spezialisiert hat.

Glücklicherweise gibt es immer mehr Designer, welche sich auf dieses System fokussieren.

Vorteile

Hier auch ein paar Vorteile.

Günstiges Pricing

Die Hosting Gebühren selbst sind relativ gering. Sie liegen zwischen 12 und 45 US Dollar im Monat.

Die Hauptkosten entstehen bei der Erstellung durch den Designer. Meistens liegen die Kosten für die Erstellung zwischen 5’000 und 25’000 Euro. Es gibt jedoch auch grössere Projekte in diesem Umfeld.

Es gibt auch einen Enterprise Plan. Dieser muss bei dem Vertriebsteam bei WF erfragt werden.

Als Content Management System nutzbar

Manche Unternehmen wollen Texte veröffentlichen oder andere Dokumente, Bilder, Videos und andere Dinge teilen.

Hier lässt sich WF als Content Management System (CMS) nutzen.

Einmal erstellt, lässt sich das Backend auch über einen Laien bedienen.

Geringere Fehlerquellen

Bei einer individuell programmierten Website können einige Fehlerquellen entstehen. Zum Beispiel fehlerhafte Plugins, Module oder Themes.

Diese Fehler kann man bei WF nicht machen, da alles sehr konform ist, und durch die Designoberfläche überwacht wird.

Was gibt es noch zu beachten?

Hier noch ein paar andere Dinge die man beachten sollte:

SEO/ Suchmaschinenoptimierung

Bei selbst erstellten Internetpräsenzen mit Designern und Programmierern, lassen sich die Suchmaschinen (SEO) -Massnahmen individuell programmieren und einstellen.

Besonders bei SEO gibt es viele Parameter, die sich von Website zu Website unterscheiden. Gerade Onlineshops, oder Blogs, die ein hohes Ranking erzielen wollen, brauchen diese Flexibilität.

Bei Webflow ist man jedoch auf den Anbieter angewiesen. Nur wenn dieser eine gute Arbeit leistet, sind auch die Rankings gut. Lediglich die Content-Massnahmen kann man selbst beeinflussen.

Auch die Geschwindigkeit des Hostings, welches einen Einfluss auf das SEO hat, ist vom Anbieter abhängig. Bei einer selbst programmierten Webpage, könnte man auch einen schnelleren Hoster einschalten.

Fazit

WF bietet viele interessante Möglichkeiten grossartige Webseiten zu erstellen. Es lassen sich wunderschöne Homepages erzeugen, mit vielen modernen Webdesign-Effekten.

Besonders der Mittelstand und auch kleinere Webpages können davon profitieren.

Man sollte jedoch auf einen Webflow Entwickler setzen, der bei der Umsetzung  unterstützt.

Was sind Ihre Erfahrungen?

Interessante Links:

Webflow Homepage im Test

Webflow im Review

Bilder: Canva

Der Autor: Sascha Thattil arbeitet bei YUHIRO und hilft Unternehmern und Unternehmen beim einfachen Aufbau von Programmier-Teams in Indien. YUHIRO ist ein deutsch-indisches Unternehmen welches IT Firmen, Agenturen und IT Abteilungen Softwareentwickler bereitstellt.

Adobe Photoshop ist der Klassiker und bis heute Weltmarktführer für professionelle Bildbearbeitung. Das 1990 erstmals veröffentlichte Tool bietet zahlreiche Funktionen, um Bilder und Grafiken zu bearbeiten und zu verbessern.

Figma hingegen wurde für UX (User Experience, neudeutsch für Nutzererfahrung)- bzw. UI (User Interface, neudeutsch für Benutzeroberfläche)-Design entwickelt und im Jahr 2016 veröffentlicht.

Können dennoch beide, Figma und Photoshop, verglichen werden? Wo liegen die genauen Unterschiede?

Welche Plattform für Grafiksoftware?

Adobe Photoshop nutzt als arbeitsplatzbezogene Software die klassische Plattform für Bildbearbeitung, die für macOS, Windows und iPadOS zur Verfügung steht. Diese wird zentral auf einem Computer installiert und steht damit nur dem dort angemeldeten Benutzer zur Verfügung.

Die KI-fähige Lösung Adobe Creative Cloud ermöglicht dennoch mehreren Personen, zusammen und gleichzeitig an einem Bild zu arbeiten. Dafür gibt es einen speziellen Invite-to-Edit-Schalter, mit dem andere Accounts eingeladen werden können. Wer also aus dem Büro oder Home Office an einem Bild arbeitet, benötigt weiterhin eine lokale Installation.

Die umfangreichen Funktionen und Ressourcen sorgen für eine starke Beanspruchung des Personal Computers oder Laptops. Dadurch können andere Funktionen oder die Arbeitsgeschwindigkeit beeinträchtigt werden.

Eine alternative Lösung wäre die Installation eines Fernzugriffs oder eines serverbasierten virtuellen Desktops, die aber teilweise noch größere Nachteile in der Performance haben.

Figma gibt es ebenfalls als Desktop-App, die allerdings für alle in Unternehmen gebräuchlichen Betriebssysteme zur Verfügung steht: Linux, macOS, Windows, ChromeOS, Android und iOS. Dabei gibt es auch eine webbrowserbasierte Variante, die für Google Chrome, Safari, Microsoft Edge und Firefox verfügbar ist.

Insbesondere die Webbrowservarianten beanspruchen Prozessor und Grafikkarte weitaus weniger als Photoshop und sind damit besonders beliebt. Es erlaubt das gleichzeitige Arbeiten an einem Projekt, wobei extra Tools für Projektmanagement, Versionskontrolle und eine Kommentar- bzw. Notizfunktion integriert sind. Das erlaubt ein besseres, strukturiertes Arbeiten im Team. Wer aber gerade nicht mit dem Internet verbunden ist, kann das Programm nicht nutzen.

Funktionen für die Bildbearbeitung

Photoshop bietet eine Vielzahl von leistungsstarken Funktionen für die Bildbearbeitung. Mit seinem Ebenensystem ermöglicht es eine präzise und nicht-destruktive Bearbeitung, wodurch einzelne Änderungen wieder rückgängig gemacht werden können.

Damit können verschiedene Anpassungen ausprobiert und dann auch komplett zurückgenommen werden, ohne dass ein ständiges Zwischenspeichern als verschiedene Versionen notwendig ist.

Verschiedene Auswahlwerkzeuge erlauben es, bestimmte Teile eines Bildes auszuwählen und zu bearbeiten. Retuschierwerkzeuge helfen dabei, einzelne Bereiche zu manipulieren und beispielsweise bei Gesichtern Unregelmäßigkeiten zu entfernen oder Haut zu glätten.

Zahlreiche Filter und Effekte stehen zur Verfügung, um Bilder zu verändern und zu verbessern. Textwerkzeuge ermöglichen das Hinzufügen und Formatieren von Text. Zudem bietet es umfangreiche 3D-Bearbeitungsfunktionen.

In Figma gibt es ebenfalls einige Tools, um Bilder zu bearbeiten. Dazu gehören verschiedene Möglichkeiten der Bildtransformierung wie Zuschneiden, Skalieren, Drehen und Spiegeln. Auch das Anpassen von Helligkeit, Kontrast und Farben ist möglich.

Zudem lassen sich verschiedene Ebenen und Masken verwenden, um bestimmte Bereiche eines Bildes zu isolieren und separat zu bearbeiten. Damit können Anwender grundsätzlich ebenfalls Bilder bearbeiten, jedoch nur in sehr rudimentären Ausmaßen.

Prototypen im Bereich des UX bzw. UI Design

Figma ist ein cloudbasiertes (es lässt sich über das Internet aufrufen) Design-Tool, das sich besonders für die Erstellung von Benutzeroberflächen und die Entwicklung von Prototypen (Definition: Ein Prototyp ist ein funktionsfähiges, aber vereinfachtes Versuchsmodell einer Software. Quelle: t2informatik Blog) für Webseiten und Anwendungen eignet.

Eine der besten Merkmale ist seine vektorbasierte Designumgebung. Diese ermöglicht es Designern, Grafiken zu erstellen, die unabhängig von ihrer Größe gestochen scharf sind. Durch die Verwendung von Vektoren können somit Benutzeroberflächen und Icons problemlos skaliert und angepasst werden, ohne dass das Objekt völlig in einer anderen Größenversion neu erstellt werden müsste.

Dies bedeutet, dass Designer sich weniger Gedanken über verschiedene Bildschirmgrößen und -auflösungen machen müssen und sich stattdessen auf die Gestaltung großartiger Designs konzentrieren können.

Mit Figma können Designer nicht nur statische Designs erstellen, sondern auch interaktive Prototypen, die das tatsächliche Benutzererlebnis simulieren. Dies ermöglicht es Designern, ihre Designs auf Herz und Nieren zu prüfen, bevor sie in die Entwicklung übergehen.

Es bietet auch eine Vielzahl von Bibliotheken und Ressourcen, die Designern dabei helfen, ihre Kreativität zu entfalten. Von vorgefertigten UI-Kits über Icons bis hin zu Schriftarten bietet das Programm eine umfangreiche Auswahl, die Designern helfen, Zeit zu sparen und sich auf das Wesentliche zu konzentrieren: die Gestaltung großartiger Benutzeroberflächen.

Photoshop ermöglicht es Designern, Benutzeroberflächen und UI-Elemente wie Schaltflächen, Symbole und Menüs zu erstellen. Mit den umfangreichen Grafik- und Zeichenwerkzeugen können Designer hochwertige Designs erstellen.

Obwohl es nicht über dedizierte Prototyping-Funktionen wie Figma verfügt, können Designer dennoch interaktive Prototypen erstellen, indem sie verschiedene Bildschirmzustände in separaten Ebenen entwerfen und sie dann mit Verknüpfungen oder Animationen verbinden. So kann eine Benutzeroberfläche in ihrem Usererlebnis getestet werden.

Dennoch sind diese Funktionen sehr eingeschränkt, da ein umfangreiches Testen der Benutzeroberflächen während der Entwicklung nicht möglich ist.

Weitere Unterschiede bei den Programmen

Neben diesen beiden Hauptunterschieden trennen beide Programme noch ein paar andere Dinge. Vor allem bei der Benutzerfreundlichkeit merkt man einen Unterschied, denn die Vielzahl an Funktionen macht Photoshop eher unübersichtlich. Um die verschiedenen Werkzeuge zu finden und die Möglichkeiten kennen zu lernen, ist eine gewisse Einarbeitungszeit notwendig.

Die Benutzeroberfläche von Figma ist weitaus übersichtlicher und intuitiver, sodass es auch für Anfänger einen einfacheren Einstieg ermöglicht.

Wer einmal Hilfe benötigt, findet bei beiden Programmen einen E-Mail-Support, eine Wissensdatenbank und ein Forum. Da Photoshop allerdings weitaus mehr Anwender hat, gibt es in der Community weitaus mehr Lösungen. Zudem bietet das Adobe-Programm auch einen Telefonsupport, 24/7-Erreichbarkeit und einen Chat.

Für beide Programme lassen sich für die meisten Funktionen umfangreiche Erklärvideos auf den gängigen Videoplattformen finden, wobei es auch hier für Photoshop mehr Auswahl gibt.

Fazit: Das beste Grafikprogramm?

Neben einigen Gemeinsamkeiten gibt es zwischen Photoshop und Figma sehr große Unterschiede.

Zwar haben beide Programme Funktionen für alle Bild- und Grafikbearbeitungen. Sie unterscheiden sich aber deutlich bei ihrem Schwerpunkt.

Während Photoshop seine großen Stärken in der Bildbearbeitung hat, ist Figma bestens für UX- und UI-Designs geeignet. Damit kommt es auf das jeweilige Projekt an, um das beste Programm zu finden.

Photoshop ist am besten geeignet für:

• Fotografen zur Verbesserung und Bearbeitung von Fotos
• Illustratoren zur Erstellung von kreativen Grafiken
• Grafikdesigner zur Erstellung von Logos und anderem
• PR-Spezialisten zur Bearbeitung von Plakaten
• Marketingfachleute zur Erstellung von Broschüren

Dagegen ist Figma eher bei folgenden Berufsgruppen anzutreffen:

• UX/UI-Designer zur Erstellung interaktiver Benutzeroberflächen
• Produktdesigner für Apps, Webseiten und anderes
• Produktmanager zur Nachverfolgung von Benutzerflüssen

Insgesamt ergänzen sich Photoshop und Figma eher, anstatt Konkurrenten zu sein.

Zusatz: Im Webdesign

Man kann sagen, dass immer mehr Webdesigner auf Figma umsteigen, da es für User Interface Design gemacht ist und es die Prozesse hier vereinfacht. Während Photoshop eigentlich für die Bearbeitung von Fotos gedacht war, um im Grunde genommen für das Webdesign umfunktioniert wurde, da man damit Benutzeroberflächen designen kann.

Der Übernahmeversuch von Figma durch Adobe zeigt, wie wichtig das UI Tool für Webdesigner geworden ist. Denn lange Zeit war Adobe das Go To Werkzeug, um Benutzeroberflächen zu erstellen. Das hat sich mit Figma geändert.

Die Übernahme wurde jedoch nicht durch den Gesetzgeber genehmigt. Auch das zeigt, dass auch die Marktregulatoren in der EU/ Großbritannien erkannt hatten, wie Markt-dominierend Adobe dadurch geworden wäre.

Interessante Links:

Ein Vergleich der beiden Werkzeuge auf getapp

Unterschiede von Figma und Photoshop (Beitrag auf Englisch)

Bilder: Canva

Der Autor: Sascha Thattil arbeitet bei YUHIRO und hilft Unternehmern und Unternehmen beim einfachen Aufbau von Programmier-Teams in Indien. YUHIRO ist ein deutsch-indisches Unternehmen welches IT Firmen, Agenturen und IT Abteilungen Softwareentwickler bereitstellt.

Die einfache Erstellung von Webseiten ist in den vergangenen Jahren zu einem wichtigen Markt geworden. 

Content Management Systeme wie WordPress gelten als die am meisten verbreitete Basis für Websites auf der Welt. 

Aber es gibt auch noch komplexere Systeme, die sich sogar noch einfacher bedienen lassen und neue Optionen bieten. Webflow (im Beitrag auch mit WF abgekürzt) hat sich in diesem Bereich einen Namen machen können. 

Der Vorteil liegt hier nicht nur in der einfachen Gestaltung, sondern in dem Komplettpaket aus Design und Hosting. Dabei sind vor allem die vielen Möglichkeiten für Anwender besonders interessant. 

Es stellt sich aber die Frage, wie hoch die Kosten für eine solche Webseite eigentlich wirklich sind.

Was genau ist Webflow?

Webflow fällt unter die Kategorie der Baukasten-Systeme. 

Das bedeutet, dass entscheidende Elemente der Webseite einfach mit wenigen Klicks erstellt werden können. 

Der Nutzer kann dabei nicht nur aus verschiedenen Vorlagen auswählen, sondern die Seite in der Regel weitestgehend nach dem What You See Is What You Get Prinzip aufbauen. Solche Systeme gab es in der Vergangenheit bereits und selbst viele Hoster, etwa 1&1, bieten dabei entsprechende Möglichkeiten an. 

Der entscheidende Unterschied gegenüber anderen System ist der Funktionsumfang. 

Dazu kommt, dass man bei der Nutzung von Webflow das Hosting für die eigene Seite gleich mitbestellen kann.

Webflow hat sich im Vergleich mit Anbietern wie Jimdo besonders dadurch einen Namen gemacht, dass es sehr flexibel einsetzbar ist und für die unterschiedlichsten Anwendungszwecke skaliert werden kann. 

Die entsprechenden Funktionen sind sowohl für einen eigenen Blog interessant als auch für den grundsätzlichen Betrieb eines Shops im Internet. Dazu kommt, dass die Plattform verschiedene Funktionen für die Kollaboration anbietet. 

Es ist aber eben dieser Funktionsumfang, der dafür sorgt, dass die Kalkulation der Kosten zu einer Herausforderung werden kann – besonders dann, wenn man in diesem Bereich bisher noch nicht mit anderen Systemen gearbeitet hat.

Unterstützung durch einen Webdesigner

Es kann sein, dass man auf professionelle Unterstützung, durch einen Webdesigner, der sich mit diesem Tool auskennt, zurückgreifen muss. Denn die Bedienung ist für einen Laien dann doch nicht so einfach.

Die Stundensätze liegen in diesem Bereich meistens bei zirka 70 Euro bis 150 Euro. Dabei ist der Markt für solche Experten derzeit eher dünn. Weshalb man mit eher hohen Stundensätzen rechnen muss.

Wie berechnen sich die Kosten bei der Nutzung?

Schauen wir uns zum Anfang erstmal die Nutzungskosten an.

Generell ist die Kostenstruktur bei dem Software as a Service so aufgebaut, dass nur für das bezahlt werden muss, was man auch wirklich nutzen möchte. 

Verschiedene Preismodelle erlauben es, im Zweifel nicht nur flexibel entsprechend dem Wachstum der eigenen Projekte im Internet aufzustocken, sondern auch nur die Funktionen auszuwählen, die auch wirklich benötigt werden. 

Dazu kommt, dass die Webseite am Anfang sogar vollkommen kostenlos benutzt werden kann. Ein kurzer Überblick über die wichtigsten Eckdaten bei den Kosten:

• Die Basisfunktion von Webflow kann vollkommen kostenlos benutzt werden. So kann man sich beispielsweise in die Funktionen einarbeiten. Für den Betrieb einer Webseite reicht die kostenlose Version allerdings in den meisten Fällen nicht und viele der Grundfunktionen anderer Pakete sind gar nicht oder nur eingeschränkt verfügbar. Das Problem ist jedoch, dass man in dieser kostenfreien Version keine eigene Domain nutzen kann. Man nutzt sozusagen eine Subdomain von WF, was für eine professionelle Nutzung eventuell nicht so gut ist.
• Man sollte daher auf die nächsthöhere Version setzen, welche 14 US Dollar (rechnen wir der Einfachheit halber einen Euro pro einem US Dollar. Es wären also 14 Euro umgerechnet) im Monat kostet.
• Für den Betrieb größerer Webseiten gibt es verschiedene Pakete. Eine Internetpräsenz mit vielen Inhalten lässt sich beispielsweise bereits ab 23 Dollar im Monat realisieren.
• Für eine professionelle Unternehmenspräsenz macht der Plan für 39 Dollar Sinn.
• Wenn man es als Lösung für mittelständische Unternehmen oder große Konzerne nutzen will, sollte man sich mit dem Vertriebsteam von WF zusammentun. Diese werden dann einen entsprechenden Preis berechnen.

Preise von WF

Durch die unterschiedlichen Pläne für die Bezahlung ist eine transparente Planung der eigenen Kosten möglich. 

Während 23 Dollar beispielsweise auf den ersten Blick recht teuer erscheinen – besonders im Vergleich mit den Leistungen mancher deutschsprachiger Hoster – sollte nicht vergessen werden, dass hier nicht nur das Content Management System geliefert wird. Auch die Seite selbst wird gehostet und nutzt dabei eine Infrastruktur, die für Projekte unterschiedlichster Größe ausgelegt ist. 

Es ist also eine Kombination von Produkten, die dafür sorgen soll, dass alle Leistungen für den Aufbau und Betrieb einer Webseite aus einer Hand geliefert werden.

Mehrsprachigkeit

Wenn man die Internetseite auch auf mehreren Sprachen haben will, dann muss man ein zusätzliches Lizenzpaket buchen.

Hier die Liste:

Onlineshop

Man kann mit WF auch einen Onlineshop erstellen. Dafür gibt es eine separate Preistabelle:

Das Tolle bei den höheren Tarifen (ab 74 Dollar) ist, dass die Transaktionsgebühr von 2 Prozent entfällt.

Wenn man einen professionellen Onlineshop erstellen lassen möchte, kann man WF auch mit Shopify vergleichen. Da es ähnliche Optionen bietet und eventuell Stärken im eCommerce hat.

Individuelles Web Design

Wie bereits erwähnt, wird man als Laie höchstwahrscheinlich das WF Werkzeug nicht selbst bedienen. Sondern wird auf einen Experten in diesem Bereich zurückgreifen.

Hier ein paar Beispiele Budgets mit welchen man rechnen kann:

Es kann sich lohnen, diese Beträge zu investieren. Denn einmal gebaut, kann man die Onlinepräsenz für die nächsten Jahre verwenden. Denn in den meisten Fällen werden keine großen Änderungen vorgenommen. In den meisten Fällen lohnt sich solch eine Investition, denn man kann bereits durch wenige mehr Kunden im Jahr, die man dazu gewinnt, die Ausgaben amortisieren.

Für wen und welche Bedürfnisse ist der Einsatz geeignet?

In den letzten Jahren hat sich die Branche für unterschiedliche Tools zur Gestaltung von Webseiten stetig vergrößert. 

Auch sind solche klassischen Content Management Systeme wie WordPress heute so gestaltet, dass sie auch von Nutzern ohne größere Vorkenntnisse bei Bedarf installiert werden können. 

Allerdings haben die meisten dieser Optionen den Nachteil, dass sie entweder mit einem geringen Funktionsumfang angeboten werden oder eben doch Vorkenntnisse benötigen. 

So lässt sich WordPress mit der Hilfe von vorgefertigten Designs und Templates zwar einfach aufsetzen und betreiben – schon bei kleinsten Änderungen wird aber auch hier in der Regel wieder Aufwand in die Richtung von Programmierung spürbar.

Webflow versucht genau diese Lücke zu schließen und den Anwendern ein Produkt zu liefern, das einen großen Funktionsumfang hat, aber besonders auf eine leichte Bedienung setzt. Das Anwenderprofil ist dabei einfach erklärt: prinzipiell ist die Plattform für jeden geeignet. Das liegt vor allem an den Kernfunktionen, die eben keine Einarbeitung benötigen, sondern mit denen vom ersten Klick an gearbeitet werden kann:

• Einfache Design-Bearbeitung per Mausklick. Sämtlicher Code, der für ein modernes Webdesign geschrieben werden muss, wird automatisch im Hintergrund erstellt. Zwar gibt es Elemente, die als Vorlagen genutzt werden können, der Anwender ist allerdings nicht darauf beschränkt und hat weitestgehenden Spielraum in der Gestaltung.
• Schnelle Bearbeitung von Inhalten durch unterschiedliche CMS-Funktionen. Content jeder Art, ob statische Unterseite oder dynamischer Blog-Eintrag, können einfach eingefügt werden.
• Verschiedene Bearbeiter möglich. Das bedeutet, dass mehrere Personen an der Webseite arbeiten können, ohne dass ein voller Zugriff auf die technische Basis gewährt werden muss.
• Selbstverständlich sind auch solche Basics wie Responsive Design oder Suchmaschinenfreundlichkeit als Funktionen bereits hinterlegt und erlauben daher eine einfache Vermarktung der Webseite.

Das System überzeugt in diesem Fall also vor allem dadurch, dass es sich für Projekte unterschiedlichster Größe anbietet. 

Sollte die eigene Webseite im Laufe der Zeit wachsen und ist ein größerer Umfang an Funktionen und Inhalten nötig, kann das ebenfalls einfach umgesetzt werden. 

In diesem Fall kann zudem einfach auf ein größeres Abo gewechselt werden, um auch die nötige technische Infrastruktur zu schaffen, die mit dem Betrieb einer solchen Seite einhergehen kann.

Webflow mit Hilfe vom Profi – gute Webseite und passende Beratung

Ein Vorteil der Struktur von Webflow liegt darin, dass die Bearbeitung nicht unbedingt vom Besitzer der Webseite selbst erfolgen muss. 

Die unterschiedlichen Rollen im System erlauben es beispielsweise, dass sämtliche Aufgaben rund um das Design und die technische Verwaltung an einen Profi übergeben werden. 

Das kann ein professioneller Webdesigner sein oder ein IT-Profi, der sich genau auf diesen Bereich spezialisiert hat. 

Für die Betreiber der Webseiten bedeutet das, dass sie sich auf die eigentlichen Kernaufgaben im Internet konzentrieren können. 

Sie sorgen dafür, dass mehr Besucher auf die Seite kommen und hier Geschäfte abgewickelt werden. 

Der Profi kümmert sich darum, dass das Design ansprechend ist und die Seite so funktioniert, wie es sich Betreiber und Besucher wünschen.

Solche Managed Services können die Kosten natürlich nach oben treiben. Allerdings können viele Aufgaben, vom eigentlichen Aufbau bis hin zum Betrieb, in Hände gegeben werden, die Erfahrung in diesem Bereich haben. 

Besonders jene, die sich um ihre eigentlichen Geschäfte kümmern möchten, ohne dabei auf die Vorteile einer modernen Webseite zu verzichten, profitieren von diesem Service. 

Webflow ist hier eine besonders beliebte Plattform, weil sie ebenso viele Möglichkeiten bietet und in den unterschiedlichsten Branchen und bei verschiedenen Größen Anwendung finden kann. 

Eine Beratung kann hier helfen, um sich die Vorteile maßgeschneidert für das eigene Business erklären zu lassen und am Ende eine Entscheidung zu treffen.            

Interessante Links:

Die offizielle Pricing Website des Herstellers

Mehr Informationen zu den Kosten in diesem Blog Beitrag

Bilder: Canva

Der Autor: Sascha Thattil arbeitet bei YUHIRO und hilft Unternehmern und Unternehmen beim einfachen Aufbau von Programmier-Teams in Indien. YUHIRO ist ein deutsch-indisches Unternehmen welches IT Firmen, Agenturen und IT Abteilungen Softwareentwickler bereitstellt.

Wer heute eindrucksvolle Webseiten fernab von starren Templates erstellen möchte, die den Responsive-Design-Gedanken konsequent umsetzen, greift zunehmend auf den Webflow-Builder zurück. 

Developer mit entsprechenden Kenntnissen sind daher heute stark nachgefragt und sie müssen mit vielfältigen Anforderungen ihrer Auftraggeber umgehen können.

Worum handelt es sich bei bei diesem Tool genau?

Webflow ist ein Tool des gleichnamigen US-amerikanischen Unternehmens für die Entwicklung von Webseiten direkt im Browser. 

Das Werkzeug stellt der Anbieter als Software as a Service (SaaS) bereit, womit eine jederzeitige Online-Zugänglichkeit von jedem Gerät und Ort aus besteht. 

Mithilfe von Webflow soll es einfacher gelingen, neue Webseiten zu bauen und seine Ideen als Webentwickler umzusetzen.

Der entscheidende Vorteil des Angebots besteht darin, dass die Erstellung der Webseiten ohne Code erfolgt. Dieser No-Code-Ansatz beschleunigt die Entwicklung und eröffnet diese auch solchen Designern, die über keine umfangreichen Programmierkenntnisse verfügen. 

Die Erzeugung des notwendigen Codes wie etwa HTML, Javascript oder CSS erfolgt automatisch durch die Software im Hintergrund. Dennoch sind spezielle Kenntnisse im Umgang mit Webflow gefragt, um Ergebnisse erzielen zu können, die allen Anforderungen an professionelle Webseiten genügen. 

Das gilt gerade dann, wenn maßgeschneiderte Lösungen gefragt sind, die exakt dem jeweiligen Bedarf im Unternehmen entsprechen. Daher hat sich mit dem Webflow-Entwickler hier ein eigenes Berufsbild heraus geprägt.

Als Content-Management-System (CMS) konkurriert Webflow mit anderen Angeboten wie dem seit vielen Jahren etablierten WordPress. Webflow wächst stark, kommt ohne Code aus und bietet ein hohes Maß an Designfreiheit. 

Der visuelle Entwicklungsansatz und die Flexibilität in der Umsetzung von Webseiten-Projekten sowie die einfache Integration von SEO tragen dazu bei, dass Webflow als bedeutsames CMS der Zukunft gilt.

Um diese Aufgaben kümmern sich die Programmierer

Das Aufgabenspektrum der Webflow-Entwickler ist vielfältig und umfasst Arbeiten, die sich auf die direkte Anwendung des Tools beziehen als auch vorbereitende und Managementaufgaben. 

Die wesentliche Herausforderung für jeden Webflow-Developer besteht darin, die bestehenden Designkonzepte in Webflow (im Beitrag auch mit WF abgekürzt) umzusetzen und damit also aus einem Katalog mit verschiedenen Anforderungen letztlich die gewünschten Webseiten zu erzeugen.

Um diese Aufgaben bewältigen zu können, reichen Kenntnisse in Bezug auf das Webflow-Tool alleine nicht aus. Der Entwickler muss auch mit dem Kunden kommunizieren und ermitteln, welche Art von Webseite überhaupt gewünscht ist und was diese können soll. Das Projektmanagement gehört ebenso zu den Aufgaben wie die Anwendung allgemeiner Designprinzipien.

Der WF-Entwickler muss in der Lage sein, Webseiten und Landingpages nach Kundenanforderung erstellen zu können. Er verwaltet bereits bestehende Web-Projekte und kümmert sich auch um SEO-Maßnahmen, um dem Ergebnis in den Suchmaschinen zu einer besseren Sichtbarkeit zu verhelfen. Damit das funktioniert, arbeitet er mit anderen Teams zusammen, die zum Beispiel aus Copywritern oder Designern bestehen.

• Zusammengefasst sind das die drei wichtigsten Aufgaben der Webflow-Experten:
• Entwicklung
• Design
• Projektmanagement
• Kundenkommunikation

Für Unternehmen ergibt sich aus dieser Bündelung von Tätigkeiten in einer Person der Vorteil, dass sie mit nur einem Ansprechpartner auskommen. Das hilft dabei, Projekte in der Webentwicklung mit einem geringeren Organisations- und sonstigen Aufwand umzusetzen und die Strukturen schlank zu halten.

Welche Ausbildung muss ein Experte in diesem Bereich mitbringen?

Die wichtigsten Kenntnisse des WF-Developers beziehen sich auf den WF-Service selbst und die Möglichkeiten, die er für die Erstellung von Webseiten bietet. Entwickler in diesem Bereich bringen typischerweise grundlegende Kenntnisse in der Webentwicklung mit und haben auch ein Verständnis für die Programmierung zum Beispiel im Rahmen von HTML oder CSS erlangt. 

Auch wenn die Arbeit mit dem WF-Tool rein visuell erfolgt, ist es wichtig, den automatisch generierten Code zumindest verstehen und überprüfen zu können, auch wenn der Entwickler ihn nicht direkt selbst schreibt. WF-Developer bringen daher Fähigkeiten mit, die sich mit jenen klassischer Webentwickler überschneiden.

Webflow-Developer sind entweder Freiberufler oder als Angestellte fest in die jeweiligen Teams in der Webentwicklung in den Unternehmen integriert. Sie bringen ein tiefes Verständnis für die Struktur und das Layout von Websites mit und kennen sich mit der WF-Plattform und deren Funktionen und Möglichkeiten sowie mit den Details der Webflow-Dokumentation aus.

Viele dieser Fähigkeiten können die Entwickler im Selbststudium erlernen. Sie sammeln Erfahrungen mit dem WF-Tool und setzen Projekte eigenständig um. Sie verstehen sich darauf, vorgegebene Designs ihrer Auftraggeber präzise im WF-Tool umzusetzen. 

Häufig sind mehrere Jahre Berufserfahrung notwendig, um den verschiedenen Vorstellungen von der fertigen Webseite entsprechen zu können. Dazu gehört auch, auf während eines Projekts wechselnde Anforderungen reagieren zu können. 

Zudem ist es wichtig, dass die Entwickler ein ausgeprägtes ästhetisches Verständnis mitbringen und einschätzen können, ob das Ergebnis zum Beispiel in Hinblick auf die Anwenderfreundlichkeit ausreichend ist.

Mit welchen Stundensätzen ist zu rechnen?

Der Stundensatz  ist abhängig von Faktoren wie der Erfahrung, der Region oder der Komplexität des Projekts. Hinzu kommt die Frage, ob der Kunde wünscht, dass neben der WF-Plattform noch weitere Tools zum Einsatz kommen sollen. Weiterhin ist die aktuelle Marktnachfrage nach WF-Developern zu berücksichtigen.

Einsteiger mit wenig Erfahrung können bereits Stundensätze zwischen 50 und 70 Euro verlangen. Wer bereits mehrere erfolgreich abgeschlossene Projekte vorweisen kann, rechnet von 80 bis 120 Euro in der Stunde ab. Experten mit umfangreichen Erfahrungen und Kenntnissen können aber auch deutlich mehr von ihren Auftraggebern verlangen.

Diese Technologien kommen bei der Entwicklung der Webseiten zum Einsatz

Bei der Erstellung von Webseiten mithilfe des WF-Tools dreht sich alles um die Gestaltung ästhetisch ansprechender Webseiten mit einfacher Bedienung und allen Funktionen, die das Nutzererlebnis verbessern.

1) WF-Plattform

Das zentrale Werkzeug für den WF-Entwickler ist die WF-Plattform selbst. Sie stellt die wesentlichen Funktionen zur Verfügung, die zum Beispiel für die visuelle Hinzufügung von Elementen notwendig sind. Zudem ist es möglich, mithilfe dieses Werkzeugs interaktive Funktionen für die Besucher der Webseiten umzusetzen.

2) Responsive Design

Webflow-Entwickler müssen sich mit dem Konzept des Responsive Designs hervorragend auskennen. Die Darstellung der Webseiten muss auf allen Endgeräten und bei allen Anzeigeformaten die gleiche hohe Qualität und Funktionalität erreichen. 

Das gilt gerade in Hinblick auf mobile Endgeräte mit ihren kleineren Bildschirmen. Funktion und Ästhetik sollten im Idealfall unabhängig vom Gerät und der Bildschirmgröße oder -auflösung sein. Ein guter WF-Developer verfügt über die Erfahrung, das umsetzen zu können.

3) WF CMS

WF-Entwickler kennen sich mit dem Webflow Content Management System (CMS) aus und nutzen dieses, um die dynamischen Inhalte auf den Websites zu verwalten. Dieses Tool hilft dem Developer dabei, die Inhalte effizient zu aktualisieren und zu organisieren.

4) HTML, CSS, Javascript

Grundsätzliche Kenntnisse bezüglich HTML (Hypertext Markup Language), CSS (Cascading Style Sheets) und Javascript sind bei einem gut ausgebildeten WF-Developer vorhanden. Er kann den Code lesen und bei Bedarf anpassen, auch wenn er ihn nicht selbst erstellt.

5) Sonstige Design-Tools

Neben WF selbst können weitere Design-Werkzeuge zum Einsatz kommen. Zu nennen sind zum Beispiel Adobe XD oder Sketch. Welche Werkzeuge hier gefragt sind, hängt vom jeweiligen Auftraggeber und den besonderen Anforderungen des jeweiligen Projekts ab.

Interessante Links:

Website eines Webflow Programmierers

Mehr zum Website Tool auf Wikipedia

Bilder: Canva

Der Autor: Sascha Thattil arbeitet bei YUHIRO und hilft Unternehmern und Unternehmen beim einfachen Aufbau von Programmier-Teams in Indien. YUHIRO ist ein deutsch-indisches Unternehmen welches IT Firmen, Agenturen und IT Abteilungen Softwareentwickler bereitstellt.

Das Thema „Stundensatz für Webdesign-Leistungen“ ist von großer Bedeutung für alle, die eine Website erstellen oder verbessern möchten. Oder solche Service anbieten. 

Die Höhe des Stundentarifes kann von einer Vielzahl von Faktoren beeinflusst werden, wie zum Beispiel der Erfahrung des Webdesigners, dem Standort, der Art und dem Umfang des Projekts.

Ziel dieses Artikels ist es, ein umfassendes Verständnis dafür zu schaffen, welche Faktoren den Stundenlohn beeinflussen.

Des Weiteren werden die Unterschiede zwischen Freelance-Webdesignern und Agenturen thematisiert sowie die Möglichkeiten einer personalisierten Kalkulation des Stundensatzes erläutert.

Nicht zuletzt bietet der Artikel wertvolle Tipps für Kunden, die einen Webdesigner beauftragen möchten. Hierbei geht es insbesondere um die Frage, wie man einen qualifizierten Webdesigner findet und welche Aspekte bei der Auswahl berücksichtigt werden sollten.

Faktoren die den Stundentarif beeinflussen

Es gibt eine Vielzahl von Faktoren, die den Stundenlohn für Webdesign-Leistungen beeinflussen können. 

Erfahrung

Einer der wichtigsten Faktoren ist die Erfahrung des Webdesigners. Ein erfahrener Webdesigner, der bereits mehrere erfolgreiche Projekte abgeschlossen hat, kann einen höheren Stundensatz verlangen als ein weniger erfahrener Designer.

Standort

Ein weiterer bedeutender Faktor ist der Standort. In Städten mit einer hohen Nachfrage nach Webdesign-Leistungen kann es sein, dass der Stundenlohn höher ist als in ländlichen Gebieten mit einer geringeren Nachfrage.

Art des Projekts

Ein weiterer Faktor, der den Stundentarif beeinflusst, ist die Art des Projekts. Ein einfaches Informations-Website-Design wird wahrscheinlich weniger kosten als ein komplexes Online-Shop-System.

Umfang

Schließlich kann auch der Umfang des Projekts eine Rolle spielen. Je größer das Projekt, desto mehr Zeit und Aufwand sind erforderlich, was zu einem höheren Stundenlohn führen kann.

Es ist wichtig zu beachten, dass diese Faktoren nicht unabhängig voneinander betrachtet werden können. Sie beeinflussen sich gegenseitig und können zu einem besseren Verständnis des Gesamtbildes beitragen, wenn man sie zusammen betrachtet.

Trotzdem kann gesagt werden, dass der durchschnittliche Stundensatz für Webdesign-Leistungen irgendwo zwischen 50 und 200 Euro liegen kann. Es ist jedoch wichtig zu beachten, dass dies nur eine grobe Schätzung ist und je nach Projekt und Faktoren, die den Stundenlohn beeinflussen, stark variieren können.

In jedem Fall ist es wichtig, eine gründliche Überprüfung der Faktoren, die den Stundentarif beeinflussen, durchzuführen, um eine realistische und angemessene Schätzung zu erhalten.

Der Einfluss von Freelancern und Agenturen auf den Stundensatz

Der Einfluss von Freelance-Webdesignern und Agenturen auf den Stundenlohn kann signifikant sein. Hier sind einige der wichtigsten Faktoren, die den Unterschied ausmachen:

• Größe und Ressourcen: Agenturen haben in der Regel mehr Ressourcen zur Verfügung als Freelancer und können somit größere und komplexere Projekte annehmen. Solche Projekte kommen oftmals zu besseren Preisen.
• Kostenstruktur: Freelancer arbeiten oft von zu Hause aus und haben geringere Kosten, während Agenturen mehrere Mitarbeiter beschäftigen und höhere Infrastrukturkosten haben. Der Freiberufler kann daher niedrigere Budgets anbieten.
• Expertise und Fachwissen: Freelancer haben in der Regel spezialisierte Fähigkeiten und können somit höhere Preise berechnen, während Agenturen eine breitere Palette an Fähigkeiten und Ressourcen zur Verfügung haben. Es gibt Freelancer, die bis zu 250 Euro die Stunde nehmen, weil sie ein sehr bestimmtes Know How haben. Während die Agentur eventuell mit einer Preisliste pro Fachkraft arbeitet, zum Beispiel “Webdesigner = 75 Euro die Stunde/ Webentwickler = 95 Euro die Stunde/ etc.”)
• Projektmanagement: Agenturen bieten oft ein umfassenderes Projektmanagement an, einschließlich Beratung, Planung, Design, Entwicklung und Tests. Dies kann zu höheren Stundensätzen führen, da Agenturen eine größere Menge an Ressourcen und Expertise bereitstellen.
• Reputation und Markenbildung: Agenturen haben oft eine etablierte Reputation und Markenbildung, die sich auf den Stundensatz auswirken kann. Eine erfolgreiche Agentur mit einer guten Reputation kann höhere Budgets berechnen, um ihre Leistungen zu würdigen.

Arten der Berechnung des Projektes

Ein weiterer wichtiger Faktor ist die Art und Weise, wie die Leistungen berechnet werden. 

Pauschalpreis

Einige Webdesigner berechnen ihre Leistungen auf der Grundlage eines Pauschalpreises für das gesamte Projekt. Dann ist der Gesamtpreis von Anfang an für alle Seiten klar. Der Stundenpreis wird jedoch nicht gelistet.

Stundenweise

Andere berechnen ihre Leistungen auf Stundenbasis. Die genutzte Zeit mal den Preis pro Stunde. Besonders Freelancer setzen darauf.

Value Based Pricing

Hier wird geschaut, welchen Mehrwert die zu bauende Lösung für den Kunden bringt. Beispielsweise kann die Website eine Umsatzsteigerung für den Großkonzern von mehreren Millionen Euro bedeuten. Davon nimmt man nun einen Teil als Preis. Beispielsweise 250’000 Euro. Der Zeitaufwand ist dabei nicht berechnet. Es kann auch sein, dass der Freiberufler oder die Agentur nur 250 Stunden benötigt, um die Anwendung zu erstellen. Dementsprechend hoch wäre dann auch der theoretische Stundenlohn.

Wie finde ich einen passenden Webdesigner?

Die Suche nach einem passenden Webexperten erfordert Sorgfalt und Bedacht. Es gibt eine Reihe von Faktoren, die bei der Wahl des richtigen Webdesigners berücksichtigt werden müssen, um sicherzustellen, dass das Projekt erfolgreich abgeschlossen wird. 

Eine Möglichkeit ist, Empfehlungen von Freunden, Kollegen oder Geschäftspartnern zu erbitten. 

Es empfiehlt sich außerdem, mit dem Webdesigner ein persönliches Gespräch zu führen, um ihre Arbeitsweise und Kommunikationsfähigkeiten zu beurteilen. 

Letztendlich ist es wichtig, sicherzustellen, dass der gewählte Webspezialist über die erforderlichen Fähigkeiten und Ressourcen verfügt, um das Projekt erfolgreich abzuschließen und eine Zusammenarbeit, die auf gegenseitigem Respekt und Vertrauen basiert, aufzubauen.

Durchschnittswerte

Hier ein paar Durchschnittswerte, die Webdesigner erzielen können.

Laut dem Gulp Stundensatzkalkulator bekommt ein Experte mit der Spezialisierung “Webdesign” 77 Euro pro Stunde.

Die Hosting Plattform Host Europe hatte eine Umfrage zur Preisgestaltung von Webdesignern vorgenommen.

Hier die Tabelle (die Prozente sind die Anzahl von Experten mit dem jeweiligen Stundentarif):

Aus der Tabelle kann man erkennen, dass 50 Prozent der Webexperten einen Preis von 60 Euro und mehr pro Stunde haben. Die andere Hälfte liegt darunter.

Für einen professionellen Service kann man jedoch meistens zwischen 80 und 150 Euro rechnen.

Was sind Eure Erfahrungen?

Bilder: Canva

Interessante Links:

Was verdienen Webdesigner?

Webdesigner Stundenlohn Informationen auf T3N

Der Autor: Sascha Thattil arbeitet bei YUHIRO und hilft Unternehmern und Unternehmen beim einfachen Aufbau von Programmier-Teams in Indien. YUHIRO ist ein deutsch-indisches Unternehmen welches IT Firmen, Agenturen und IT Abteilungen Softwareentwickler bereitstellt.

Das Konzept der Landing Page hat eine grosse Verbreitung gefunden. Auch weil die sogenannten Conversion Rate bei solchen Webseiten höher ist. Hier Vergleich der beiden Optionen.

Einführung

Zum Start des Internets ging es einfach darum eine Online Präsenz zu haben.

Das Konzept der Homepage klang damals und auch heute noch sehr interessant. Man hat eine Website auf der alle Informationen über zum Beispiel das Unternehmer aufgelistet ist.

Die Referenzen, der Newsletter (mit Newsletteranmeldung), das Kontaktformular, Neuigkeiten, ein Blog und viele weitere Komponenten hat solch eine Website.

Die Problematik hierbei ist jedoch, dass solch eine Seite im Internet viele Ziele verfolgt. Besser ist es, eine gezielte Seite zu haben, die sich nur um ein Ziel dreht. Damit war die Idee zu Landing Pages (kurz LP) geboren.

Hier die Unterschiede:

Viele Ziele vs. Ein Ziel

Wenn ein Besucher auf die Website (kurz WS) kommt, dann kann er oder sie aus unterschiedlichsten Optionen wählen. Man kann auf Links klicken und kommt auf neue Seiten, oder man kann auf das Menü klicken, und man kommt auf Unterseiten.

Bei einer LP sieht das bereits anders aus. Es gibt nur – ein Ziel – dies kann eines der oben genannten sein. Zum Beispiel das “Ausfüllen eines Kontaktformulars”. Es kann zwar sein, dass auf der Landing Page ein Link oder ein Menü ist, diese führen jedoch alle auf das Kontaktformular.

Es gibt auf der LP auch keine Möglichkeit auf eine andere Seite zu gelangen. Sogar der Standardlink über das Logo wird abgeschaltet, so dass der Besucher tatsächlich nur zwei Optionen hat. Entweder das Ausfüllen des Kontaktformulars oder das Schliessen des Browserfensters.

Das zeigt auch schon die Macht einer Landing Page.

Conversion Rate Optimierung wird vereinfacht/ A/B Testing

Bei einer WS kann ein Besucher alles mögliche für Dinge machen. Es ist relativ schwer etwas zu optimieren. Denn man weiss nicht, welche Änderung, welche Erhöhung der Conversion Rate ( Anzahl Besucher versus der Zahl an gewünschten Kundenhandlungen) gebracht hat.

Bei einer LP ist das anders. Hier könnte man für einen Teil des Traffic (Besucherstrom via dem Internet) auf eine bestimmte Version der LP leiten (auch A/B Test geleitet) und schauen welchen Effekt das auf das bestimmte Ziel hat.

Beispielsweise könnte Version A gleich bleiben und Version B einen prominenten roten Button haben.

Man leitet 50 Prozent der Besucher auf Version A und 50 Prozent auf Version B. Nun sieht man, dass über einen Zeitraum von 2 Monaten, 10 Kontaktformulare auf Version A ausgefüllt wurden und 20 Kontaktformulare auf Version B.

Das spricht klar dafür, dass Version B besser ist, und man übernimmt den roten Button in die Hauptversion. So kann man Schritt für Schritt testen und die Conversion Rate erhöhen.

Eine lange Seite vs. Mehrere Seiten

Auch das ist eine Besonderheit einer LP. Die Landing Page ist meistens eine lange Internetseite auf der man hoch und runter scrollen kann. Anders als bei einer Webseite, auf der man auf viele Hauptseiten und Unterseiten springen kann.

Gezielte Ansprache vs. Allgemeine Ansprache

Eine WS hat meistens einen relativ allgemeinen Ton. Man spricht alle möglichen Kundengruppen aus seiner Zielgruppe an. Denn man weiss nicht, wer die Webpage besucht.

Bei einer LP ist das anders. Hier könnte es, um ein einfaches Beispiel zu nehmen, eine Seite geben, die nur Frauen anspricht und eine die nur Männer anspricht. Und eine weitere die Kinder anspricht.

Die LP für die Erwachsenen hat eher formelle Farben, während die Seite für die Kinder eher bunt und spielerisch aufgebaut ist.

Auch das führt zu einer höheren Conversion Rate. Denn die Besucher fühlen sich durch die direkte Ansprache angesprochen. Und führen schon eher die gewünschte Handlung, wie einen Anruf beim Unternehmen, durch.

Ein Produkt vs. Mehrere Produkte

Eine Website führt meistens alle Produkte eines Unternehmens auf. Bei einem Onlineshop könnten das zum Beispiel unterschiedlichste Haushaltsprodukte sein.

Eine LP führt dagegen oftmals nur ein Produkt oder eine Produktgruppe. Zum Beispiel Kochtöpfe.

In diesem Beispiel könnte die LP auf die Vorteile dieser speziellen Kochtöpfe eingehen und andere Vertrauensstiftende Zeichen geben.

Eine Landingpage setzt hier oftmals auf:

1. Kundenreviews: Kunden werden aufgezeigt, welche positive Erfahrungen mit dem Produkt gemacht haben. Meistens werden auch fünf Sterne benutzt, um die Qualität aufzeigen.
2. Siegel: In manchen Fällen handelt es sich um offizielle Siegel von Verbraucherorganisationen. In vielen Fällen sind es jedoch selbst erstellte Siegel, welche die hohe Qualität aufzeigen sollen.
3. FAQ: Eine LP hat zum Beispiel auch einen Abschnitt, in welchem die wichtigsten Fragen beantwortet werden (Häufig gestellte Fragen).
4. Hero Bild: Dieses Bild ist meistens ganz oben Links oder Rechts (Above the Fold) und zeigt daneben die drei wichtigsten Vorteile für den Kunden.
5. Bekannt aus: Hier werden Publikationen aufgezeigt, wie Magazine oder Online Zeitschriften, welche bereits über das Produkt positiv berichtet haben. Dabei werden die Logos dieser Magazine oder Firmen genutzt.

Tendenz hin zur LP als Website

Eine WS ist relativ aufwendig in der Verwaltung. Man muss sicherstellen, dass alle Seiten richtig funktionieren. Nicht selten muss man darauf achten, dass alle Seiten auch auf Tablets und Smartphones richtig dargestellt werden.

All das führt dazu, dass besonders kleine und mittelständische Unternehmen immer mehr auf Landing Pages als Websites setzen. Dabei sind alle wichtigen Informationen auf einer Seite gelistet. Es gibt eventuell noch eine weitere Seite, welche die Blogartikel führt.

Das reduziert den Aufwand für die Wartung der WS. Gleichzeitig kann man diese Seite ständig optimieren. Auch das A/B Testing für nur eine Seite wird einfacher fallen.

Zudem ist es heutzutage möglich, mit Dingen wie Videotestimonials viel mehr Informationen auf nur einer Seite zu transportieren.

Was für Webseiten spricht

Einige Webseiten führen viele Produkte. Hier macht es keinen Sinn nur eine LP als Website zu haben.

Hier setzen Unternehmen zunehmend auf den Ansatz, einzelne Unterseiten/ Produktseiten in Form einer LP aufzusetzen. Dass heisst, mit Hero Bild, Referenzen oder Reviews pro Produkt, Qualitätssiegel und einem bestimmten Ziel – zum Beispiel den Klick auf den “Kaufen” Button.

Fazit

Das Konzept der Landing Page hat viele Vorteile:

• Gezieltere Ansprache
• Fokus auf eine Aktion des Kunden
• Bessere Performance Optimierung der Seiten mit A/B Tests
• Fokus auf bestimmte Produktgruppen

Im Bereich des klassischen Brandings kann eine Website jedoch immer noch eine Option sein. Oder wie erwähnt bei WS mit vielen Unterseiten und vielen Produkten.

Was sind Ihre Erfahrungen?

Interessante Links:
Homepage und Landingpage Unterschied erklärt auf morefire

Ein Vergleich auf dem Marketingblatt Blog

Bilder: Canva

Der Autor: Sascha Thattil arbeitet bei YUHIRO und hilft Unternehmern und Unternehmen beim einfachen Aufbau von Programmier-Teams in Indien. YUHIRO ist ein deutsch-indisches Unternehmen welches IT Firmen, Agenturen und IT Abteilungen Softwareentwickler bereitstellt.

Viele interessieren sich für die Kosten für die Entwicklung von Websites, Portale und andere Online Projekte. Gerne spricht man hier im Allgemeinen auch von Webdesign.

Im Beitrag eine Übersicht über die Preise in diesem Bereich.

Definition

Bei dem Webdesign geht es meistens um die Erstellung von Onlinepräsenzen, Internetseiten und vor allem Websites.

Da es oftmals jedoch auch die technische Implementierung umfasst, kann man auch gerne von Webentwicklung sprechen.

Würde man diesen Begriff jedoch genau definieren, dann entspricht es eher dem Bereich Design, als einer Programmierung im herkömmlichen Sinne. In der Programmierung kommen dagegen Werkzeuge wie PHP, PHP Frameworks (Laravel, Zend, etc.), WordPress, TYPO3, Shopware, etc. zum Einsatz. Beim Webdesign handelt es sich genau genommen um die Anwendung von Photoshop, HTML, CSS und JavaScript.

Da die Webentwicklung vom Kunden jedoch auch darunter verstanden wird, wird das Wort Webdesign als Oberbegriff verwendet.

Die unterschiedlichen Phasen

Meistens gibt es unterschiedliche Phasen, in welchen solche Projekte umgesetzt werden.

a) Anforderungen

Zum Start werden die Anforderungen zur Internetpräsenz aufgenommen. Oftmals wird das auch in einer Art Workshop gemacht, wo sich alle Beteiligten (Kunde, Projektmanager, Programmierer, Designer, etc.) treffen und das Projekt besprechen.

Mit der Zeit wird dann ein kleines oder grosses Anforderungspapier erstellt, wo die Details enthalten sind.

Zeitaufwand (kurz ZW): 3 bis 40 Stunden, manchmal auch länger falls es eine ausgiebige Konzeptionsphase gibt (notwendig in grösseren Projekten)

b) Planung

In dieser Phase wird entschieden, mit welchen Werkzeugen die Seite umgesetzt wird.

Falls es eine einfache Seite ist, welche nicht oft verändert wird, dann eignet sich eine Umsetzung als statische Website, mit Technologien wie HTML und CSS.

Benötigt es weitere Funktionalitäten kommt oftmals PHP dazu.

Wenn es viele Inhalte hat dann lohnt sich WordPress. Wenn es Inhalte sind, welche wichtig sind, zum Beispiel in mittelgrossen bis grossen Unternehmen, dann kommt beispielsweise TYPO3 oder Drupal zum Einsatz.

Braucht es einen Onlineshop kommen Systeme wie Shopware, Oxid, Magento oder WooCommerce in Frage.

Sind die Seiten sehr individuell gestaltet dann und brauchen spezielle Funktionalitäten, dann kann man PHP Frameworks wie Laravel, Zend oder Symfony nutzen.

Es ist natürlich auch immer eine Budget Frage, welchen Weg man geht.

Die Oberfläche (das Frontend) wird jedoch in den meisten Fällen mit HTML und CSS erstellt.

ZW: 5 bis 10 Stunden

c) Design

Jetzt werden die ersten sogenannten Wireframes erstellt. Diese sind erste Skizzen welche sich schnell mit Online Werkzeugen erstellen lassen.

Danach wird das Ganze in Photoshop umgesetzt.

Diese Photoshop Dateien (.psd Dateien) werden dann in HTML und CSS umgewandelt.

Heutzutage arbeitet man anstatt mit Photoshop auch gerne mit Online Werkzeugen wie Sketch und Invision. Dort werden die notwendigen HTML und CSS Dateien gleich mitgeliefert.

In vielen Projekten wird zudem auf eine aufwendige Designerstellung verzichtet und es werden Templates genutzt. Dies reduziert die Preise für das Webdesign.

ZW: 20 bis 80 Stunden

d) Technische Umsetzung

Danach kommen die WordPress, TYPO3, Laravel oder sonstigen Technologie Experten zum Einsatz und erstellen die Internetpräsenz nach den Webdesign-Vorgaben.

ZW: 40 bis 160 Stunden

e) Testing

Dieser Bereich ist speziell wichtig für grosse Projekte, in welchen es viele Funktionalitäten gibt. Besonders bei Individualprogrammierungen ist das mehr als sinnvoll.

Dabei wird der Code getestet, als auch die Bereiche im Frontend.

ZW: 5 bis 20 Stunden

Der Stundensatz

Ausschlaggebend für die Preise für die Erstellung einer Internetpräsenz ist auch der Stundensatz.

Der Stundensatz unterscheidet sich je nach Technologie und je nach Erfahrung der involvierten Entwickler.

Die meisten Agenturen nehmen 100 Euro die Stunde. Freelancer oftmals zwischen 70 und 90 Euro.

Dienstleistungen im Bereich WordPress sind zum Beispiel auch günstiger als TYPO3.

Zudem sind die Kosten auch in den ländlichen Gebieten niedriger als in den Ballungszentren wie München, Hamburg, Stuttgart oder Berlin. Auf der anderen Seite sind die technologischen Kenntnisse der Spezialisten in den Ballungszentren höher.

Texte, Bilder, Videos

Was oft auch nicht immer gleich erkannt wird ist, dass ein Webdesign auch oft durch Bilder, Texte und Videos (Erklärvideos, Imagevideos, Corporate Videos, etc.) geprägt ist.

Diese Bereiche kann oftmals das Internetunternehmen nicht selbst stemmen und es lagert diese Dinge an Textagenturen, Fotografen und Erklärvideo-Firmen aus.

Das sollte man bei der Erstellung der Website beachten, denn diese Kosten fallen zusätzlich an.

In den Angeboten der Internetunternehmen wird das auch oftmals explizit erwähnt.

Preise für Texte für Onlinepräsenzen werden pro “Zeichen” genommen. Ein Beispiel währen 24 Cent pro Zeichen. Eine typische Homepage mit 5 Unterseiten hat zirka 4500 Wörter. Bei dem 24 Cent pro Wort kommt man also auf 1’080 Euro für den Text.

Auch Erklärvideos sind unterschiedlich teuer (und trotzdem lohnenswert). Kurze Videos bekommt man bereits für 2000 Euro und aufwärts.

Bilder kann man sich entweder von einem professionellen Fotografen machen lassen, was mehrere Tausend Euro kosten kann, oder man nutzt sogenannte Stock Photos, Online Plattformen, wo man sich für eine geringe Gebühr Lizenzen für die Verwendung besorgen kann.

Recherche im Internet

Man kann im Internet auch Angaben von unterschiedlichen Firmen finden.

Ein Beispiel ist hier zu finden: Hiermit kann man Webdesign Preise des Anbieters errechnen

Laut dem Berechnungswerkzeug kostet eine Website mit 10 Seiten, mit Blog und Profilseite/ Team zirka 2921 Euro.

Einen anderen Kalkulator findet man hier: Kostenrechner von Webkalkulator

Gibt man ähnliche Angaben an, kommt man auf einen Betrag zwischen 3500 Euro und 5200 Euro.

Hinweis: Die Rechner stellen jeweils unterschiedliche Fragen. Beim Webkalkulator wird beispielsweise nicht das spezifische Content Management System (z.B. TYPO3) abgefragt, sondern bleibt relativ generell (Soll ein Content Management System verwendet werden?).

Die meisten Betreiber von Agenturen stellen jedoch eines ganz klar in den Vordergrund: Die Preise für das Webdesign können nur in einem persönlichen Gespräch ermittelt werden.

Das ist auch verständlich, denn die Anforderungen sind extremst unterschiedlich.

Fazit

Der beste Weg wäre immer noch ein Budget festzulegen und dann mit der Agentur oder dem Freelancer zu eruieren, was mit diesem Budget umsetzbar ist. Man kann beispielsweise eine Prioritätenliste erstellen und dann die wichtigsten Bereiche umsetzen lassen.

In vielen Fällen wird nicht offengelegt, wie viel man bereit ist zu investieren, dann wird es natürlich schwer die Kosten zu eruieren. Durch einen Workshop und eine Analysephase kann der Dienstleister in diesem Fall herausfinden, was das angefragte Projekt kosten kann.

Preiskalkulatoren können nur bedingt die richtigen Aufwendungen bestimmen. Denn beispielsweise kann ein Produktkonfigurator innerhalb einer Website wenige Stunden in der Entwicklung dauern (wenn beispielsweise die Standardfunktionen verwendet werden) oder eben mehrere Monate benötigen, wenn es viele individuelle Funktionalitäten hat.

Welche Erfahrungen haben Sie gemacht?

Weiterer interessanter Beitrag:
Einen festen Preis gibt es nicht sagt die Agentur reDim

Der Autor: Sascha Thattil arbeitet bei YUHIRO und hilft Unternehmern und Unternehmen beim einfachen Aufbau von Programmier-Teams in Indien. YUHIRO ist ein deutsch-indisches Unternehmen welches IT Firmen, Agenturen und IT Abteilungen Softwareentwickler bereitstellt.

UI Design und UX Design bzw. User Interface Design und User Experience Design sind zwei der am häufigsten verwendeten – und verwechselten oder vermischten – Begriffe der Fachbereiche Webdesign, Webentwicklung und Softwareentwicklung. 

Selbst erfahrene Programmierer kommen hier durchaus ins Stocken. Das ist wahrlich in mehrerlei Hinsicht verständlich. Insbesondere die Tatsache, dass beide Termini nicht selten gemeinsam in einem Begriff, nämlich dem „UI/UX Design“, zusammengefasst werden und de facto fachlich in einer engen Beziehung stehen, erschweren es, eine klare Differenzierung vorzunehmen. 

Am Ende dieses Artikels werden Sie wissen, was die Bezeichnungen sowie die Disziplinen dahinter ausmachen und wo der Unterschied liegt. Lassen Sie uns beginnen!

Was ist User Interface Design?

UI oder das User Interface beschreibt die Benutzerschnittstelle bzw. die Benutzeroberfläche einer Website oder Software. Die Benutzerschnittstelle ist das grafische und funktionale Layout einer Anwendung. Sie besteht aus den Schaltflächen, auf die der User schließlich klickt oder tippt, dem Text, den jener liest, Bildern, Icons, Schiebereglern, Texteingabefeldern und allen anderen Elementen, mit denen interagiert wird. Dazu gehören ebenfalls das Bildschirm-Layout, Animationen und jede einzelne Mikro-Interaktion.

Der Entwurf entsprechender Interfaces obliegt den sogenannten UI Designern. Sie müssen unter anderem Farbschemata, Schaltflächenformen und andere zu integrierende Features wählen sowie die Breite der einzelnen Bereiche und die für den Text verwendeten Schriftarten bestimmen. User Interface Designer erstellen praktisch das Aussehen und zum Teil die optimale Bedienung der Nutzeroberfläche einer Anwendung.

Zumeist handelt es sich bei diesen Fachleuten um Grafiker, Mediengestalter und/oder andere programmier- sowie design-versierte Profis. Es liegt an ihnen, sicherzustellen, dass die Benutzerschnittstelle eines Programms, einer App oder einer Website attraktiv, visuell anregend und thematisch passend zum Zweck und/oder zur Persönlichkeit der Anwendung gestaltet ist. Jedes einzelne visuelle Element sollte sowohl ästhetisch als auch zweckmäßig erscheinen.

Was ist User Experience Design?

UX oder User Experience beschreibt die Nutzererfahrung. Die Erfahrung eines Benutzers mit einer Website, Software, App etc. wird durch die Art und Weise bestimmt, wie jener mit ihr interagiert. Ist letzteres ohne Barrieren und intuitiv möglich oder gibt es an irgendeiner Stelle Probleme? Fühlt sich die Navigation logisch oder willkürlich an? Vermittelt die Interaktion dem User das Gefühl, dass jener die mit der Anwendung zu lösenden Aufgaben, Herausforderungen oder Bedürfnisse effizient lösen kann? Oder ist die zweckmäßige Nutzung eher schwierig? Diese und weitere Fragen müssen sich User Experience Designer im Webdesign, in der Webentwicklung und ebenso der Softwareentwicklung zentral stellen. Die Benutzererfahrung wird dadurch bestimmt, wie einfach oder schwierig es ist, mit den Elementen der Benutzeroberfläche, also des User Interfaces, zu interagieren, welche die User Interface Designer erstellt haben.

Das Design der User Experience beschäftigen sich also ebenfalls mit der Nutzeroberfläche einer Anwendung, wodurch der Unterschied manchmal unklar ist. Während aber User Interface Designer vornehmlich die Aufgabe haben, zu entscheiden, wie die Benutzeroberfläche aussehen soll, sind User Experience Designer grundsätzlich dafür verantwortlich, zu bestimmen, wie die Oberfläche funktioniert. Natürlich ist schon bei der Gestaltung des User Interfaces – wie auch im letzten Abschnitt bereits angedeutet – ebenfalls ein gewisses Verständnis einer guten User Experience vonnöten, was die Unterscheidung weiter verkompliziert.

UX Designer bestimmen die Struktur der Schnittstelle und deren Funktionalität. Es gilt optimale Abfolgen in der Organisation der einzelnen Bestandteile sowie ein perfektes Ineinandergreifen dieser zu gewährleisten – stets mit dem absoluten Fokus auf den Endanwender. Wenn die Nutzeroberfläche barrierefrei funktioniert und intuitiv bedienbar ist, wird der User eine gute Experience haben. Ist die Verwendung jedoch kompliziert oder in irgendeiner anderen Weise nicht zweckmäßig, resultiert mit Sicherheit eine negative User Experience – und diese ist sowohl im Webdesign bzw. in der Webentwicklung als auch in der Softwareentwicklung immer zu vermeiden.

Um eine gute Benutzererfahrung zu garantieren, arbeiten User Experience Designer bestenfalls eng mit den letztendlichen Anwendern zusammen. Das in Testläufen erzielte Feedback der User wird in die weitere Entwicklung eingebunden. Für entsprechende Designer ist es wichtig, ein möglichst ganzheitliches Verständnis dafür zu haben, wie die Benutzer mit ihren Anwendungen interagieren (möchten).

Wie beide Fachbereiche zusammenarbeiten?

Ein User Experience Designer entscheidet also, wie die Nutzeroberfläche funktioniert, während der User Interface Designer in erster Linie daran arbeitet, diese optisch zu gestalten. Dies ist faktisch ein sehr kollaborativer Prozess – entsprechende Teams verfahren niemals getrennt voneinander. Es kann nicht einmal genau festgemacht werden, ob zunächst die User Experience oder das User Interface gestaltet wird. In der Regel müssen betreffende Planungen und Testings parallel ablaufen, um wirklich effizient zu maximal zuträglichen Ergebnissen zu gelangen.

Nehmen wir an, dass zu einem bestimmten Zeitpunkt im Design-Prozess entschieden wird, dass zusätzliche Schaltflächen zu einem bestimmten Interface hinzugefügt werden müssen. Dies wird die Art und Weise ändern, wie die Schaltflächen zu organisieren sind und könnte ebenfalls eine Änderung ihrer Form oder Größe erfordern. Die User Experience Designer würden diesbezüglich die beste Anordnung der Schaltflächen eruieren, um weiterhin eine optimale Nutzererfahrung zu gewährleisten, während die User Interface Designer die Buttons an das neue Layout anpassen. Verlaufen solche Prozesse nicht hand-in-hand bei ständiger direkter Kommunikation bzw. Abstimmung, könnten es vorkommen, dass das Design lange Zeit zwar unter den zunächst festgelegten Aspekten einer guten User Experience erfolgt, diese sich dann aber nicht bewahrheiten und schließlich von vorne begonnen werden muss.

Daten sind der Schlüssel

Die Erhebung von Daten ist sowohl im User Interface Design als auch im User Experience Design von entscheidender Bedeutung. Es ist für beide Disziplinen wichtig, so viele gute Informationen wie möglich zu sammeln, da diese bei der Erstellung geeigneter Designs enorm behilflich sind.

So gilt es ganz zentral zu recherchieren, was die letztendlichen Benutzer vermutlich wollen bzw. welche Probleme oder Bedürfnisse sie mit der Anwendung lösen möchten. Ferner ist es überaus wichtig, festzustellen, was sie von der Website oder der Software generell erwarten. Entsprechende Nachforschungen verlaufen in der Regel iterativ, das heißt, es finden Usability-Sitzungen statt, bei denen echte Benutzer mit skalierten Versionen bestimmter Funktionen oder visuellen Designs interagieren. Hier wird unter anderem festgehalten, ob die Designer den richtigen Weg einschlagen. Das Feedback muss aufgeschlüsselt und in jeden Design-Prozess integriert werden.

UI vs. UX: Zwei unterschiedliche Disziplinen, die (bestenfalls) harmonisch zusammenarbeiten

Das Design von UI und UX erfordert unterschiedliche Fähigkeiten, die optimalerweise in allen Stadien der Entwicklung einer Anwendung ineinandergreifen. Faktisch ist diese Kooperation eine wesentliche Voraussetzung für den Erfolg einer jeden Anwendung. Denn eine ansehnliche Aufmachung kann eine Nutzeroberfläche nicht retten, die voller Barrieren ist.

Auf der anderen Seite vermag es aber auch eine brillant ausgearbeitete User Experience niemals, ihr volles Potenzial zu entfalten, wenn ein visuell minderwertiges Interface vorliegt. In beiden Kontexten greifen Endanwender tendenziell weniger gerne zur Website, App etc. Für das perfekte Ergebnis müssen sowohl das User Interface Design als auch das User Experience Designs differenziert, kombiniert und maximal nutzerzentriert ausgeführt werden. 

Das bedeutet eine große Herausforderung und viel Arbeit für Designer wie Programmierer, die sich jedoch unter anderem aufgrund eines resultierenden tendenziell großen Anwenderaufkommens sowie einer hohen Nutzerfrequenz lohnt.

Interessante Links:

Eine Gegenüberstellung von UI und UX

Ein Vergleich auf t3n.de

Bilder: Canva

Der Autor: Sascha Thattil arbeitet bei YUHIRO und hilft Unternehmern und Unternehmen beim einfachen Aufbau von Programmier-Teams in Indien. YUHIRO ist ein deutsch-indisches Unternehmen welches IT Firmen, Agenturen und IT Abteilungen Softwareentwickler bereitstellt.

Fast alle sind heutzutage mit dem Smartphone im Internet unterwegs. Gleichzeitig bevorzugen viele jedoch den Desktop-Browser, um Bestellungen zu tätigen, etc. Da es dort etwas bequemer ist. All das muss man im Webdesign berücksichtigen.

Im Beitrag mehr dazu wie Responsive für Smartphones, andere mobile Endgeräte und Desktop Browser funktioniert.

Einführung

Am Anfang war das Internet.

Klassischerweise nutze man einen Desktop Rechner und einen Browser wie den Internet Explorer, um das Internet zu erreichen.

Damals war die Arbeit für jemanden der ein Webdesign umsetzt, relativ einfach. Man musste nur für einen sogenannten “Viewport” ein Design erstellen. Der Viewport ist vereinfacht gesagt, dass was der Nutzer im Browser sieht – das Sichtfenster. Es gab auch nicht viele unterschiedliche Monitorgrössen. Der Webdesigner musste also im Idealfall nur ein Design erstellen, um alle Monitorgrössen, Webbrowser und Desktopsysteme abzudecken.

Mit dem Erscheinen des iPhones im Jahr 2007 sollte sich jedoch alles ändern.

Seit dem Release dieser Innovation, sind viele neue mobile Endgeräte erschienen. Auch die Medium Versionen namens Tablets und Phablets wurden kreiert.

Die Entstehung von Android hat zu noch mehr Diversität geführt. Anders als das iPhone und iOS, wird Android von unterschiedlichsten Firmen genutzt, um deren mobile Endgeräte zu bespielen.

Zudem haben viele auch ihre eigenen Browsersysteme herausgebracht. Neben dem Internet Explorer gibt es jetzt starke Browser wie Google Chrome, Mozilla Firefox und einige mehr.

Eine unendlich grosse Zahl an Bildschirmgrössen, Betriebssystemen und Browsern

Die Zahl der Bildschirmgrössen ist fast unendlich. Da fast jeder seine eigenen Dimensionen für seine Smartphones und Tablets hat. Keines gleicht dem anderen zu 100 Prozent.

Zudem hat nicht jeder Internetnutzer die neueste Version des Browsers installiert. Manche haben alte Versionen.

All das hat den Bereich Webdesign verändert. Und eine neue Kategorie in der Webentwicklung war geboren, das sogenannte Responsive Webdesign.

Wie kann man so eine Internetseite erstellen?

Der erste Schritt im Design Prozess ist es, mehrere Versionen der Website in Photoshop oder Sketch zu erstellen (beide Werkzeuge werden von Designern genutzt, um die Bildschirme darzustellen). In den meisten Fällen sind es drei Versionen. Eine für Smartphones (kleine Bildschirme), Tablets (mittlere Screens) und Monitore (grosses Design). Oftmals kommt noch eine vierte Variante, Laptops, dazu.

Es werden jedoch nicht drei unterschiedliche Versionen der Website durch den Webentwickler erstellt. Sondern dieser geht wie folgt vor:

Zitat von Siteways, Richard Albrecht:

“Idealerweise hat man den gleichen Inhalt und Aufbau (Content und HTML(5)) und unterscheidet die Darstellung nur anhand unterschiedlicher Formatierungsbefehle (CSS(3)).

Dazu kann man mittels CSS3 Media Queries (was so viel heißt wie „Abfragen der Medien welche die Website anzeigen“) Formatierungsbefehle auf bestimmten Bildschirmgrößen einschränken.”

Mit unterschiedlichen Programmierbefehlen, kann man die Website zudem dazu anweisen, einige Bereiche im kleinsten Responsive Webdesign nicht anzuzeigen. Man könnte zum Beispiel einen grossen Slider, welcher im Desktop-Browser gut aussieht, jedoch im Smartphone nicht zur Geltung kommt, ausblenden.

Im Tablet würden einige Bilder zudem untereinander, anstatt nebeneinander angezeigt.

Responsive vereinfacht damit den kompletten Webdesign Prozess. Anstatt alles dreifach zu entwickeln, wird es nur einmal programmiert, jedoch mit einigen Befehlen in CSS3, um die Darstellung unterschiedlich anzuzeigen.

Besonderheiten dieses Ansatzes

Das Responsive Design gilt als moderne Methode, um Webseiten auf vielen Webvarianten anzeigen zu können. Ohne alles doppelt und dreifach zu entwickeln.

Dieser Ansatz hat jedoch auch seine Einschränkungen. Es ist zum Beispiel nicht zu 100 Prozent für mobile Endgeräte optimiert. Denn in Smartphones oder Tablets, gibt es Funktionalitäten, wie Touch oder die vertikale und horizontale Ansicht (wenn man den Bildschirm dreht, zum Beispiel). All das kann ein solches Webdesign nicht optimal abdecken.

Nicht ohne Grund stellen grosse Internetportale fast immer eine Android und eine iOS App zur Verfügung, wo diese Funktionalitäten optimal umgesetzt werden.

Eine mobile, sogenannte Native, App lohnt sich jedoch nur bei sehr grossen Projekten. Bereits bei Webseiten die jeweils “nur” für die Aussendarstellung einer grossen Marke genutzt werden, ist der Aufwand für mehrere Mobile Apps zu hoch. Denn um eine Native App zum Beispiel für Android zu entwickeln, benötigt es den Gleichen oder mehr Aufwand, als die Website-Variante zu erstellen.

Zudem wird auch die Bereitschaft der Nutzer sehr gering sein, die Mobile App einer Marke herunterzuladen.

Der Responsive Ansatz ist hier um ein vielfaches besser. Nur muss man davon ausgehen, dass die Mobilen Ansichten nicht zu 100 Prozent optimal sein werden, wie das bei Apps der Fall ist.

Mobile App versus Webdesign

Hier noch einige Punkte die man beachten sollte, wenn man eine App mit einem Webdesign, welches man über einen Browser aufruft, vergleicht.

• App greift auf CPU/ Rechner des Smartphones zu: Damit ist es um einiges performanter als eine Website über den Internetbrowser, welches dadurch keinen direkten Zugang zur CPU hat.
• Native Apps sind auf Touch optimiert: Auch die Bedienung durch berühren ist in Nativen Apps direkt mit dem Betriebssystem wie iOS oder Android abgestimmt. HTML5 (welches man im Webdesign nutzt) ist zwar schon sehr modern, kann aber nicht alle Funktionalitäten eines Smartphone Gerätes abrufen.

Adaptive?

Neben dem Begriff Responsive hat sich auch Adaptive etabliert.

Bei Responsive ist alles sehr flüssig und es gibt keinen starken “Brüche” von einer Variante zur nächsten (zum Beispiel von Desktop zu Tablets).

Bei dem Adaptive Webdesign ist das anders. Hier werden bis zu sechs Versionen der Website designt. Die Programmierung erkennt, welche Grösse das Endgerät hat und spielt die passendste Version aus. Die üblichsten Breiten in Pixel sind dabei: 320, 480, 760, 960, 1200, und 1600 Pixel.

Abbildung: Laut Designers Insights sind die besten Grössen: Desktop – 1200 Pixel (Breite), Tablet – 768 Pixel (Breite), Smartphone – 320 Pixel (Breite). Die Abmessungen, wenn man das Tablet oder das Smartphone horizontal hält, findet man in der Abbildung.

Der Aufwand ist hier wiederum höher, da auch hier separate Designs für jedes dieser Grössen erstellt werden.

Der Vorteil ist hier, dass die Darstellung besser sein wird, als bei dem zuerst genannten Ansatz.

Jedoch, welcher Entscheider in Webprojekten möchte seinen Vorgesetzten um die Freigabe von 6 oder mehr Designs fragen?

Die Entscheidung fällt dann am Ende doch auf das einfachere Responsive Webdesign.

Fazit

Der Responsive Ansatz wird in den meisten Webseiten-Projekten, ob klein oder mittelgross, verwendet. Er gibt den optimalsten Output für die vielen Browser, Bildschirme und Systeme.

Denn mit der Zeit wird es nur mehr Bildschirmgrössen, Betriebssystem und ähnliche geben, und nicht weniger. Damit ist man auch für die Zukunft gerüstet.

Was sind Ihre Erfahrungen?

Interessante Links:
Responsive auf Wikipedia beschrieben
Mehr Informationen zu Responsive Design

Bilder: Canva, designersinsights.com

Der Autor: Sascha Thattil arbeitet bei YUHIRO und hilft Unternehmern und Unternehmen beim einfachen Aufbau von Programmier-Teams in Indien. YUHIRO ist ein deutsch-indisches Unternehmen welches IT Firmen, Agenturen und IT Abteilungen Softwareentwickler bereitstellt.

Wenn man von einem Webentwickler spricht, dann geht man davon aus, dass dieser alles abdeckt. Vom Design, bis hin zur Programmierung der Lösung.

Im Beitrag mehr Informationen zu den unterschiedlichen Aufgaben dieser Experten.

Einführung: Wie werden Webanwendungen entwickelt?

Eine Webapplikation wird mit Backend-Technologien wie PHP, ASP.NET, C#, Java, Python, Ruby, Node.JS oder ähnlichen umgesetzt. (Backend: Die Funktionalitäten einer Software)

Zusätzliche kommen noch Frontend Werkzeuge wie JavaScript, jQuery, Ajax, HTML und CSS zum Einsatz. (Frontend: Das was der Nutzer sieht und bedient, kurz das Design)

Für die Datenbank gibt es Tools wie MongoDB, MySQL, MSSQL, Oracle und ähnliche. (Datenbank: Dort werden die Informationen gespeichert)

Diese drei Komponenten, Funktionalitäten, Design und Datenbank müssen erstellt werden, um eine Webanwendung zu erhalten.

Kriterium: Wie komplex ist die Software und welche Standardkomponenten werden genutzt?

Es gibt unterschiedliche Formen der Komplexität die eine Weblösung annehmen kann. Hier ein paar einfache Beispiele:

Kleine Website

Hier könnte man mit einem Content Management System (CMS) wie WordPress arbeiten und für das Frontend mit einem Template von Plattformen wie Themeforest umsetzen. Hier könnte ein einzelner Webentwickler die komplette Entwicklung übernehmen. Den der Programmierer muss lediglich Standardkomponenten verwenden. Es gibt kaum Programmierarbeiten oder Designs zum umsetzen.

Webanwendung

Hier geht es weniger darum, dem Nutzer ein Design anzuzeigen, sondern darum, eine Funktionalität anzubieten. Ein Beispiel wäre eine Preisvergleichsplattform. Durch unterschiedliche Programmierungen werden von unterschiedlichen Stellen im Internet, Daten zur Verfügung gestellt (Preise verglichen, in diesem Fall).

Hier kann der Webentwickler jedoch nur die Programmierung in den Technologien wie PHP oder Java vornehmen.

Das Design für das Frontend müsste von einem UX/ UI Experten vorgenommen werden. Oder einem Designer der sich mit Photoshop auskennt und die Screens (Bildschirme) für die einzelnen Seiten gestaltet.

Danach kommt ein Webdesigner zum Einsatz, welcher mit Frontend Technologien wie HTML und CSS arbeitet und die Photoshop Seiten, in eine von Internetbrowsern verständliche “Sprache” zu bringen.

Auch bei mittleren bis grossen Webseiten braucht es diesen Ansatz. Da der Kunde hier meistens ein individuelles Design benötigt und kein Standard-Template, welche es oftmals im Bereich CMS gibt.

Grosse Softwareapplikation

Bei grossen Softwareanwendungen braucht es in vielen Fällen, neben dem Webentwickler, dem Webdesigner und dem Designer auch noch einen Datenbankentwickler. Denn in grossen Programmierungen sind die Datenbanken dementsprechend gross.

Daneben gibt es in solchen grossen Anwendungen dann vielleicht auch noch Projektleiter, Systemarchitekten (die das ganze System planen) und mehr.

Wichtig: Alle sind in anderen Bereichen spezialisiert

Heutzutage muss ein Design sehr hochwertig sein. Ein einfacher Programmierer kann deshalb nicht einfach ein Grundgerüst bauen, wie es früher noch üblich war.

Sondern es braucht einen sogenannten UX (User Experience, neudeutsch Nutzerfahrung)/ UI (User Interface, neudeutsch Benutzeroberfläche) Designer, welcher mit Werkzeugen wie Adobe XD, Adobe Photoshop, Sketch, InVision und ähnlichen grossartige Bildschirm Designs erstellt.

Ein solcher UX/ UI Designer ist jedoch so spezialisiert, dass dieser sich wiederum nicht mit der Frontend Programmierung mit HTML, CSS und eventuell JavaScript und CSS-Frameworks wie Bootstrap und Zurb Foundation auskennt. Hierfür braucht es dann den sogenannten Webdesigner.

Aber der Freelancer kann das doch?

Die meisten Freelancer aus der Webentwicklung geben an, dass sie alle Bereiche abdecken können – Design, Webdesign und Programmierung.

Dies liegt sicherlich auch daran, dass es sich oftmals um Webentwickler mit vielen Jahren Berufserfahrung handelt.

Zudem arbeiten diese IT Freelancer auch mit anderen Freiberuflern zusammen, welche das Design übernehmen.

Man merkt es also nicht direkt, dass nicht alles aus einer Hand kommt, sondern eigentlich ein Team daran arbeitet.

Wie man es einfacher machen kann

Man muss nicht immer einen separaten Designer und Webdesigner haben.

Man kann vieles auch direkt mit einem einzigen Webentwickler umsetzen.

Hier sollte man jedoch folgende Punkte beachten:

1)  Mehr Zeit geben

Ein Webentwickler ist ein Webentwickler. Er oder sie wird den Designbereich nicht so gut kennen. Man kann dem Entwickler jedoch mehr Zeit geben, dann kann sich dieser auch HTML und CSS aneignen oder die Best Practices darin erlernen und anwenden.

2) Simple Designs verwenden

Man braucht in vielen Webanwendungen keine hochkomplexen Designs. Besonders im Enterprise Bereich geht es eher darum, Software zu entwickeln, welche die Prozesse im Unternehmen effizienter und besser gestalten.

Wenn man es einfach hält, dann kann das auch der Entwickler erledigen.

3) Templates verwenden

In Content Management Systemen wie TYPO3, WordPress oder Drupal und ähnlichen gibt es Templates, welche man verwenden kann. Diese sind vorgefertigte Designs, die man mit wenigen Klicks installiert. Man muss lediglich die Texte, Bilder und andere Inhalte hinzufügen.

Hier muss man jedoch auch die Flexibilität mitbringen, dass die Designs nicht zu hundert Prozent so  umgesetzt werden, wie man das vielleicht hätte (dafür müsste man dann den Weg über den Designer und Webdesigner gehen).

Wer noch tiefer in die Materie einsteigen möchte, kann auch CSS-Frameworks wie Bootstrap verwenden, die noch flexibler für den Design-Vorgang sind.

Fazit

Fast jeder Auftraggeber möchte den – einen – Webentwickler, der alles macht. Vom Design bis hin zur Umsetzung, bis hin zum Testing der Lösung.

In “normalen” IT Projekten arbeiten jedoch UI/ UX Experten, Webdesigner und Softwareentwickler zusammen. Auch Software-Tester und Datenbankexperten werden oftmals hinzugezogen.

Wer also alles mit einer Person abdecken möchte, muss dieser dann auch mehr Spielraum geben, wie das Design erstellt wird und in welcher Qualität. Denn dann kann dieser Entwickler auch auf Standard-Templates oder einfachere Webdesigns zurückgreifen. Man kann diesen jedoch nicht verpflichten eine Weboberfläche wie auf den besten Internetportalen umzusetzen.

Was sind Ihre Erfahrungen in diesem Bereich?

Interessante Links:
Hier werden Webdesigner und Webentwickler verglichen
Warum beide Webentwicklung und Design ein Bereich werden

Bilder: Canva

Der Autor: Sascha Thattil arbeitet bei YUHIRO und hilft Unternehmern und Unternehmen beim einfachen Aufbau von Programmier-Teams in Indien. YUHIRO ist ein deutsch-indisches Unternehmen welches IT Firmen, Agenturen und IT Abteilungen Softwareentwickler bereitstellt.