Kategorien
CMS Programmierung

Nichts für Amateure: Webydo, der Homepage-Baukasten für professionelle Webdesigner

Lassen Sie uns noch einmal das Thema „Homepage-Baukästen“ aufgreifen. Erst vor ein paar Tagen stellten wir an dieser Stelle ausführlich den jüngst an die Börse gegangenen Website-Builder Wix vor und dazu die Frage, ob Baukasten-Systeme die Zukunft des Webdesign darstellen könnten. Immerhin lässt sich wohl nicht leugnen, dass mit steigender Qualität der Werkzeuge und sinkender Komplexität der Bedienung die Attraktivität der Lösungen für all jene, die zwar gute Ideen, aber keine Coding-Skills haben, steigt. Heute stellen wir Ihnen einen weiteren Vertreter der neuen Spezies von Hochleistungsbaukästen vor. Es handelt sich um das ebenfalls aus Israel stammende Webydo. Am Ende des Beitrags finden Sie übrigens ein besonderes Angebot für Dr. Web Leserinnen und Leser.

Webydo: Website-Builder mit Designer-Fokus

Webydo, wie Wix in Tel Aviv gegründet und ansässig, hat ein kritisches Auge auf den Wettbewerber aus der gleichen Stadt gerichtet und legt viel Wert darauf, zu kommunizieren, inwieweit sich Webydo von Wix unterscheidet. Das wirkt zwar auf den ersten Blick etwas bemüht, ist aber auf den zweiten und alle weiteren Blicke durchaus als stimmig anzuerkennen. Anders als Wix richtet sich Webydo strikt auf Designer als Zielgruppe aus, wie Sie noch sehen werden. Entsprechend hört man im Hause Webydo die Begriffe Homepage-Baukasten oder Website-Builder gar nicht gern. In der Tat leitet die Verwendung dieser gängigen Terminologie etwas in die Irre, denn Webydo ist mehr als nur ein Baukasten, es ist eine vollständige Lösung für den Betrieb einer Designagentur, in jedem Falle eine vollwertige Website-Design-Software.

Wirtschaftlich orientierte Designer haben zumeist klare Bedürfnisse. Sie suchen ständig nach Wegen, die Kundenschar zu vergrößern. Sie wollen Design schneller und kostengünstiger, aber nicht qualitativ schlechter umsetzen. Viele wollen ihre Kenntnisse aus dem Print-Design auf Webseiten sinnvoll anwenden können. Und sie wollen oder können nicht coden. Die Zusammenarbeit mit Entwicklern zahlt sich für sie häufig nicht aus, da die Entwicklerkosten bis zu 70% des Gesamtbudgets verschlingen können. Haben Sie sich jetzt an einer oder mehreren Stellen schon erkannt? Dann sollten Sie auf jeden Fall weiterlesen…

webydo-homepage

Webydo: Offiziell erst zur TechCrunch Disrupt 2013 gestartet

Webydo gibt es schon seit gut zwei Jahren, hat aber sehr lange nur mit handverlesenen Designern gearbeitet. Erst zur TechCrunch Disrupt New York 2013 wagte man sich ans Licht der Öffentlichkeit. Dabei waren zu diesem Zeitpunkt schon mehr als 70.000 Webseiten von mehr als 13.000 Designern gestaltet worden. Der erfolgreichste Kunde der ersten Stunde erstellte innerhalb nur eines Jahres mehr als 1.000 Webseiten mit Webydo und einem Team von lediglich 15 angestellten Designern.

Webydo: der etwas andere Homepage-Baukasten

Gestartet im israelischen Tel Aviv, aber mittlerweile auch mit einem Büro in New Jersey, USA, vertreten, führt Webydo ein hochqualifiziertes Team von Mathematikern mit dem Ziel, Mathematik aus dem Webdesign zu eliminieren. Nach Recherchen von Webydo wird immerhin bis zu 70% des Budgets eines handelsüblichen Webauftritts von denen beansprucht, die Code mit der Hand schreiben. Für den reinen Designer bleibt da natürlich nicht mehr so viel.

Dass es eine Vielzahl von Wettbewerbern im Segment der Website-Builder gibt, ist den Machern von Webydo vollkommen klar. Sie sehen diese jedoch eher als Angebote für den Endkunden. In der Tat ist das zumindest ein Teil der Wahrheit. Schaut man sich etwa auf Wix.com um, so fallen einem sofort die extrem sorgfältig ausgearbeiteten Anleitungstexte und die leicht verständlichen Videos ins Auge, die Basiswissen, aber späterhin auch fortgeschrittene Kenntnisse vermitteln. Klar ist dabei, hier will man Menschen heranführen, die nicht über umfassende Grundkenntnisse verfügen. Auch die Hunderte von verfügbaren Templates sprechen eher dafür, dass man den design-affinen Endkunden zumindest sehr deutlich im Auge hat. Das ist bei Webydo definitiv nicht so.

webydo-selectdesign
Webydo: Die Zahl vorgefertigter Layouts ist ausgesprochen gering

Stattdessen sieht sich Webydo eher in der Tradition der Adobe-Produkte Photoshop oder Indesign. Hier erhält man professionelle Werkzeuge zur Erstellung professioneller Websites in die Hand, aber so gut wie keine fertigen Designs und Einsteiger-Tutorials. 24 fertige Layouts dienen eher zur Inspiration oder als Kickstarter, denn zum ernsthaften Einsatz als Live-Website…

So grenzt sich Webydo als Angebot für Designer gezielt vom Endkundenmarkt ab. Eine weitere Abgrenzung erfolgt mit Blick auf Developer. Hier möchte Webydo für Designer werden, was etwa WordPress für Entwickler ist. Es soll eine anpassbare Plattform entstehen, die von Designern für Designer fortentwickelt wird. Webydo-CEO Shmulik konstatiert hier eine Lücke, die klafft zwischen den Endkunden-orientierten Website-Baukästen und den an Entwickler gerichteten programmierbaren Content Management Systemen, die den Designprozess nach seinen Worten "marginalisieren".

Einen ersten aussagefähigen Eindruck vermittelt dieses kurze Video:

Webydo: die ersten Schritte

Probieren geht über Studieren. Die beste Methode, herauszufinden, inwieweit ein Dienst Ihren Bedürfnissen entspricht, ist es, diesen zu testen. Das gilt natürlich auch und insbesondere für Homepage-Baukästen. Leider macht es einem nicht jeder Anbieter so leicht wie Webydo. Webydo verzichtet auf vermeidbare Hürden, indem schon der Prozess des Einrichtens eines Nutzeraccounts auf das Nötigste reduziert ist. Sie teilen lediglich Ihren Namen und Ihre E-Mail-Adresse mit dem Anbieter, suchen sich zu guter Letzt noch ein Passwort aus und werden direkt in den eigentlichen Editor weitergeleitet. Keine Zahldaten, nicht die Schuhgröße, nichts…

webydo-register

Einmal dort angekommen, entscheiden Sie sich für eine von drei Möglichkeiten. Sie können entweder mit einem vorbelegten Layout starten. Oder Sie entscheiden sich für eine vorgegebene Grid-Struktur. Oder Sie machen es, wie Sie es sonst auch machen und starten mit einem leeren Screen.

webydo-howyouliketostart

Wenn Sie in etwa so ticken wie ich, dann suchen Sie sich eines der vorstrukturierten Layouts aus. Hier haben Sie die Wahl zwischen Corporate, Portfolio, Graphic und Wide Box.

webydo-selectlayout

Einmal ausgewählt, legt Ihnen Webydo ans Herz, ein Einführungsvideo anzuschauen, in welchem Ihnen die grundlegenden Funktionen des visuellen Editors erläutert werden. Im Verlaufe des Designprozesses werden Sie auf weitere dieser Videos stoßen. Nehmen Sie sich die Zeit, sie anzuschauen. Sie sind es wirklich wert und führen dazu, dass Sie deutlich schneller auf Betriebstemperatur kommen, als wenn Sie sich allein durch das Featureset frickeln. Nehmen Sie an Webydos Forum teil und helfen Sie so bei der Verbesserung des Produkts. Hier berichten Sie Fehler oder schlagen weitere Features vor. Die Fortentwicklung des Website-Baukastens basiert ganz wesentlich auf dem Feedback der bisher mehr als 30.000 teilnehmenden Designer, die so praktisch die Roadmap selber schreiben und sich ein perfektes System schaffen können.

Kommen Sie wie ich von älteren Mac-Versionen, werden Sie sich wohl stehenden Fußes in Webydos Editor verlieben:

webydo-editor

Der Editor ist klar, einfach, fast schon intuitiv zu bedienen. Wie Sie es von Photoshop, eigentlich noch eher von Indesign gewohnt sind, platzieren und bearbeiten Sie Elemente per Drag and Drop mit der Maus und verfeinern die Genauigkeit durch die Eingabe von Pixelwerten und exakten Koordinaten. Gerade das Setzen von Pixelwerten und Koordinaten ist im Homepage-Baukasten-Business nicht gang und gäbe und stellt einen echten Vorteil von Webydo dar.

Gestandenen Design-Kämpen wird nicht nur die UI vertraut vorkommen. Auch die Wortwahl im Featureset entspricht dem bekannten Duktus der Designwelt.

Webydos Editor verfügt über drei verschiedene Modi. Im Modus "Design" erarbeiten Sie das Layout. Der Modus "Content" zeigt alle vom Endnutzer bearbeitbaren Bereiche und der Modus "Preview" blendet alle Tools aus und zeigt die Website, wie sie öffentlich zu sehen wäre.

Design mit Webydo: Stärken und Schwächen

Wir wissen es doch alle. Webdesign ist letztlich niemals ohne Code zu bewältigen. Insofern muss man Webydos Versprechen eines code-free Webdesign auch relativieren. Webydo hält den Designer lediglich von allem fern, was mit Code zu tun hat. Im Hintergrund erzeugt das System standard-konformes HTML, das auf Desktops und mobilen Geräten gleichermaßen gut funktioniert. Wer nun ganz versessen darauf ist, diesen Code in stundenlanger Kleinarbeit ohne sichtbaren Nutzen, aber top-compliant zu optimieren, der kann auch das tun. Ich habe ja ohnehin den Eindruck, dass es eine ganze Riege von Webworkern gibt, für die die zeitaufwändige manuelle Nachfrickelei eine geradezu ideologische Grundvoraussetzung ist, um etwas überhaupt als Arbeitsergebnis bezeichnen zu können.

webydo-example
Webydo: So kann eine Website aussehen

Dennoch, machen wir uns nichts vor. Mit Webydo lassen sich zweifellos grafisch ansprechende, aufwändige Websites bauen, die ihre Besucher zu beeindrucken verstehen werden. Es ist also das perfekte System für die Erstellung einer Portfolio-Site für Fotografen oder Architekten, sowie für die Erstellung einer Unternehmenspräsentation. Sobald indes Anwendungslogik ins Spiel kommt, wird es finster und wir kommen um den Entwickler vielfach doch nicht herum..

Das ist Webydo ein Dorn im Auge und so versucht man diesem Problem mit sogenannten Widgets zu begegnen. In Kooperation mit Drittanbietern bemüht sich der Baukasten-Dienst darum, gängige Bedarfe innerhalb des Systems abzudecken. So erarbeitete man etwa mit dem E-Commerce-Provider Ecwid eine Möglichkeit, Webydo-Sites mit Onlineshops aufzurüsten, und zwar direkt aus dem Editor heraus. Die Widget-Funktionalität ist relativ neu und bedarf noch der Unterstützung durch weit mehr Drittanbieter, woran auch fleißig gearbeitet wird.

Eine besondere Stärke von Webydo soll hier ausdrücklich nicht unerwähnt bleiben. Das integrierte CMS ist einer der am leichtesten verständlichen Vertreter seiner Art. Davon können sich Wettbewerber eine ganz große Scheibe abschneiden. Sogar Ihre Kunden werden das System in weniger als 30 Minuten so weit verstanden haben, dass sie damit werden arbeiten können.

Webydos Preismodell

Webydos Preismodell ist sehr klar und bedarf keiner langen Liste. Können Sie damit leben, dass Ihre Site als Subdomain von Webydo gehostet wird, besteht sie zudem aus nicht mehr als 15 Seiten und wiegt nicht schwerer als ein Gigabyte, dann zahlen Sie gar nichts. Erstaunlich: es gibt kein Limit der Bandbreite. Sie können zudem unbegrenzt viele Websites mit diesen Einschränkungen bauen.

webydo-example-2
Ein weiteres Beispiel einer Website aus dem Webydo-Baukasten

Sobald Sie Ihre eigene Domain verwenden wollen oder mehr als 15 Seiten oder mehr Speicherplatz als ein Gigabyte benötigen, müssen Sie zum Premium-Angebot greifen. Dieser Plan schlägt mit 7,90 USD monatlich bei jährlicher Zahlweise oder 9 USD bei monatlicher Zahlweise zu Buche. Das Domainhosting ist im Preis inbegriffen und kann auch nicht auf andere Weise geregelt werden. In Sachen Hosting arbeitet Webydo mit Akamai zusammen. An deren Zuverlässigkeit wird wohl niemand ernsthaft Zweifel äußern wollen…

Nachdem die Entscheidung für eine Domain nebst Hosting im Regelfalle nicht alle paar Monate revidiert werden wird, sollte man sich entsprechend für den Jahresplan entscheiden und ein paar Dollar sparen. Haben Sie oder Ihr Kunde einen Igel in der Tasche, können Sie natürlich auch erst einmal mit dem kostenlosen Angebot starten und dann im Bedarfsfalle aufrüsten. Upgrades sind stets möglich.

Größere Design-Agenturen oder Freiberufler mit außergewöhnlich großem Kundenstamm sollten sich direkt mit Webydo in Verbindung setzen, um ein maßgeschneidertes Angebot zu erhalten.

Webydo als Zentrale Ihrer Design-Agentur

Um sich weiter von eher an Konsumenten gerichteten Angeboten abzugrenzen, führte Webydo im Sommer diesen Jahres verschiedene Möglichkeiten ein, die es ermöglichen, seine Designagentur komplett mit Webydo als Motor zu betreiben. Folgende Features stechen heraus:

  • Build Your Brand erlaubt es Designern, das System komplett unter eigenem Logo zu betreiben. Webydo verschwindet vollständig und wird den Kunden als Dienstleister überhaupt nicht bekannt.
  • Bill Your Client bringt Faktura in das Backend. Sie können somit direkt Leistungen und Dienste gegenüber Ihren Kunden abrechnen. Sie benötigen dementsprechend keine separate Rechnungslösung mehr.
  • Share Your Site Design teilt das Design in Bereiche auf. Sie legen so auf einfache Art und Weise Bereiche an, die von Ihren Kunden bearbeitet werden dürfen, während Sie andere Bereiche ausdrücklich für den Zugriff sperren. So bleiben Ihre Designs trotz Kunden-Content stabil.

Webydos CEO Shmulik Grizim ist enthusiastisch:

Das ist eine echte Revolution in der professionellen Erstellung von Websites. Erstmalig wird Designern die komplette Kontrolle über den Prozess der Website-Erstellung gegeben. Sie benötigen weder Code-Kenntnisse, noch müssen sie Entwicklerleistungen zukaufen, sondern können sich voll auf den kreativen Aspekt des Webdesign konzentrieren. Der starken Nachfrage unserer Kunden folgend, haben wir nun ein extrem sicheres, effizientes und automatisches Zahlungssystem direkt in das Webydo-Backend integriert. So deckt Webydo nicht nur die technischen, sondern auch die betriebswirtschaftlichen Aspekte einer Designagentur ab. Damit können sich Designer tatsächlich darauf konzentrieren, Websites bis zu zehn Mal schneller und kosteneffizienter zu bauen.

Dem ist im Grunde nichts hinzuzufügen. Inwieweit sich der Enthusiasmus im Realitätscheck bewahrheitet, muss jeder für sich selbst evaluieren. Der Ansatz ist erstmal plausibel und hat Charme. Spätestens jetzt ist der Zeitpunkt gekommen, an dem Sie sich wirklich selbst ein Bild machen müssen. Bauen Sie Ihre responsive Website mit Webydo.

Spezielle Promotion für Dr. Web Leser

Im Zuge unserer Gespräche mit Webydo-Vertretern erhielten wir einen allgemein gültigen Promocode für unsere Leserinnen und Leser. Unter Verwendung des Gutschein-Codes LimitedVIPdrweb75%off erhalten Sie den Webydo Professional Premium Yearly Plan, also die Bezahlvariante des Dienstes für die Dauer eines kompletten Jahres anstatt für 94,80 USD für 23,70 USD, also ein bloßes Viertel des Normalpreises. Das Angebot beginnt mit der Veröffentlichung dieses Artikels und wird 10 Tage lang aufrecht erhalten. Somit sollten Sie den Deal bis zum 21. Dezember 2013 nutzen können.

Melden Sie sich bitte bei uns, wenn der Code schon vor Ablauf dieses Zeitrahmens nicht mehr funktionieren sollte. Wir sorgen dann für eine funktionierende Lösung. Zeitzonen-Unterschiede sind gern mal der Auslöser solcher Irritationen…

Kategorien
CMS Programmierung

Wix.com: Hat der Homepage-Baukasten aus Israel das Potenzial, das Webdesign zu revolutionieren?

Wix.com, 40 Millionen Nutzer stark, hat sich in den letzten Jahren stark zum eigenen Vorteil gewandelt. Vor einigen Wochen gelang der größte Börsengang eines israelischen Unternehmens überhaupt. Kann Wix für das Webdesign sein, was Apple für die Computerbranche ist? Ein disruptiver Dienst, der neu definiert, wie auf breiter Front Webseiten gestaltet werden. Einiges spricht dafür…

wix-landingpage

Homepage-Baukästen, Website-Builder: Das ist doch alles Mist!

Gerade, wenn man als deutsches Magazin nur den Begriff “Homepage-Baukasten” aus der Feder fließen lässt, kann man sich hochkritischer Kommentare selbsternannter und tatsächlicher Experten sicher sein. So etwas sei nichts für Profis, was haben solche Beiträge überhaupt in einem Fachmagazin verloren? Seid ihr jetzt die Computer-Bild? Und so weiter…

Homepage-Baukasten: Zielgruppe “Kleine bis mittlere Seitenbetreiber”

Lassen Sie mich dementsprechend prophylaktisch folgende Aussagen treffen. Zunächst ist das Dr. Web Magazin gegründet worden als Magazin für Seitenbetreiber. Seitenbetreiber ist erst einmal jeder, der eine Seite betreibt, ob Designprofi oder nicht – in der Regel sogar eher nicht. Wir wollen nicht auf Profis als Zielgruppe reduziert werden, obschon natürlich vielfach Beiträge erscheinen, die ganz klar nur von Profis überhaupt verstanden werden können.

Viele Seitenbetreiber, etwa der Gassi-Geh-Service von nebenan oder der Pizzabäcker um die Ecke, können sich schlicht den klassischen, professionellen Webdesigner nicht leisten oder, und auch das ist Freiheitsrecht in Deutschland, wollen das einfach nicht. Diesen Markt wird es immer geben, ob man das nun goutiert oder nicht. Und dieser Markt wird immer größer sein als der Markt für professionelles Webdesign aus gelernter Stube.

Ich hatte damit noch nie ein Problem. Im Gegenteil sagte ich schon etlichen potenziellen Kunden unverblümt, dass sie für ihre definierten Kommunikationsziele keinen relativ teuren Auftragnehmer wie mich benötigen. Ich empfahl geradezu den Einsatz von Baukästen, die im übrigen in Deutschland von den gängigen Hosting-Platzhirschen 1&1 und Strato nicht eben unauffällig promotet werden.

Homepage-Baukasten: Zielgruppe “Professionelle Webdesigner”

Dann gibt es durchaus eine große Zahl an Designern, dazu zähle ich mich als Ersteller dieses Artikels ganz besonders, die noch nie, in meinem Falle seit den Neunzigern nicht, der Auffassung waren, Quellcode müsste zwingend mit der Hand geschrieben werden. Wann immer es ging, griff ich zu Werkzeugen, die mich im Designprozess so weit wie möglich unterstützen konnten.

Einschränkend will ich einräumen, dass NetObjects Fusion und Frontpage für mich auch damals nicht in Frage gekommen sind. Aber seit der Version 1 des damaligen Macromedia Dreamweaver bin ich dem Produkt treu geblieben. Hunderte, teils sehr komplexe Web-Projekte habe ich seither damit erstellt. Wichtig war für mich stets nur die Offenheit des Systems, also die Möglichkeit, zu können, wenn man denn wollte. Was ich sagen will: will ich Quelltext von Hand schreiben, hindert mich Dreamweaver nicht daran, sondern unterstützt mich auch dabei ganz ordentlich.

Ich bin demnach seit jeher Arbeitserleichterungen nicht abgeneigt. Website-Builder schaue ich mir daher schon seit gut 10 Jahren immer mal wieder an. Bislang konnte mich noch keiner so richtig überzeugen. Projekte gehe ich bis heute stets auf die konventionelle Art, also mit Dreamweaver an Bord, an. Allerdings spüre ich schon, dass die Entwicklung der Homepage-Baukästen mich, obwohl seit 20 Jahren im Webdesign tätig, eher über kurz als über lang dazu bringen wird, meinen bisherigen Workflow, zumindest für einige Projekte und/oder Auftragstypen über Bord zu werfen.

Im Sommer schaute ich mir Webydo an und war schon fast überzeugt. Im folgenden Beitrag befasse ich mich mit Wix.com und kann schon jetzt sagen, dass ich von den ersten Gehversuche mit dem neuen Wix-Editor durchaus sehr angetan bin. Schauen Sie sich auch einmal die Beispiele von mit Wix erstellten Websites an.

Homepage-Baukasten: Zielgruppe “Designer generell”

Aber, sprechen wir nicht ausschließlich von mir. Sprechen wir auch von den langgedienten Designern, die vielleicht noch länger im Geschäft sind als ich. Oder sprechen wir von den jungen Designern, die zwar großartige, kreative Ideen haben, aber Quelltext nicht schreiben können. Industrie-Designer, die etwa tolle Autokarosserien entwerfen, könnten immerhin auch nicht den Motor konstruieren.

Sprechen wir von denen, die hauptsächlich Print kreieren, aber auch ein Stück des Webdesign-Kuchens abhaben wollen – was übrigens vollkommen legitim ist.

Häufig genug sind Designaufträge eher klein, im Sinne von mit wenig Budget ausgestattet. Auch in diesem Segment kann der Einsatz eines Website-Builders lohnen. Zu diesem Argument höre ich immer wieder, man habe ja als Designer ohnehin einen ganzen Sack voller Snippets und Design-Elemente, die man in solchen Fällen zum Einsatz bringen könnte, da bräuchte man keinen Homepage-Baukasten dafür. Ich antworte dann gern: Worin besteht denn dann da noch der Unterschied zum kritisierten Baukasten-System außerhalb der Tatsache, dass man sich den Baukasten selber zusammengeschnipselt hat?

Abschließend lassen Sie mich das gern gehörte Argument bringen, dass Website-Builder dazu führen würden, dass Websites tendenziell identisch aussehen. Dieses Argument ist in etwa so valide wie zu behaupten, die Einführung von Microsoft Word habe dazu geführt, dass sich Texte tendenziell gleichen. Werkzeuge können nur dann einen solchen Effekt haben, wenn sie in dieser Weise genutzt werden. Kreativschaffende nutzen schon seit jeher immer gleiche Werkzeuge und erschaffen damit doch nicht stets identische Werke.

Wir werden auch hier und heute diesen Glaubenskrieg nicht beenden. Wir sollten uns aber wenigstens über die verschiedenen Standpunkte und Argumente verständigen. Sollte ich hier etwas vergessen haben, sind Sie herzlich eingeladen, es in den Kommentaren zu ergänzen!

Wix: From Zero to Hero?

Vor zwei Jahren schrieb ich einen längeren Test zu Homepage-Baukästen, der recht viel Beachtung fand und, ursprünglich für die Print-Ausgabe des t3n Magazin geschrieben, schnell auch den Weg in deren Onlinemagazin schaffte und in gekürzter Fassung von Spiegel Online gecovert wurde. Für den Artikel hatte ich mir 17 Website-Builder angesehen und zehn davon ausführlich vorgestellt. Wix war seinerzeit zwar unter den 17 auserwählten Teilnehmern, schaffte es jedoch nicht in die Runde der letzten 10. Mein Fazit damals:

Wix : Komplett Flash-basiert, kostenloser Tarif, sinnvoll nutzbar erst ab 15 € monatlich, deutsche Version verfügbar, aber gewöhnungsbedürftig lokalisiert

Wix: Kein Flash mehr, deutsche Sprachversion jetzt konsistent

Seitdem hat sich bei Wix enorm viel getan. Ich würde sogar so weit gehen, zu behaupten, dass sich Wix innerhalb der letzten zwei Jahre unter die besten Drei, wenn nicht gar an die Spitze der Branche vorgearbeitet hat. Insbesondere die Abkehr von Flash hin zu HTML5 hat hier sicherlich die Wende gebracht.

Auch in Sachen Sprachlokalisierung hat sich Wix nur noch sehr wenig vorzuwerfen. Die deutsche Sprachversion ist natürlich nicht vollständig. Das wäre bei einem so schnell wachsenden Dienst wohl auch zu viel erwartet. Immerhin finden sich keine maschinenübersetzten Katastrophen mehr, der Wechsel zwischen Deutsch und Englisch erscheint zumindest nachvollziehbar.

Aber, und das dürfte man wohl als wichtigste Voraussetzung für eine sinnvolle Nutzung ansehen, der Editor, das Herzstück des Homepage-Baukastens, ist komplett in deutscher Sprache verfügbar. Sogar viele Helferlein-Videos, wie dieses hier, sind eingedeutscht:

http://www.youtube.com/watch?v=uCo6qubKiFU#t=12

Hatte Wix zunächst nur HTML5 als Ausgabeformat hinzugefügt, während der Editor noch eine ganze Weile auf Flash basierte, so ist heutzutage Flash Geschichte. Der Wix-Editor gefällt mir persönlich deutlich besser als die Editoren verschiedener Desktop-Anwendungen, allen voran Dreamweaver. Die Bearbeitungsmöglichkeit in der Cloud, also von jedem Gerät mit Browser und sei es in Timbuktu, aus, hätte ich mir in der Vergangenheit schon dutzende, wenn nicht hunderte Male gewünscht.

Wix.com: Seit November an der NASDAQ gelistet

Mittlerweile zählt der Website-Builder aus Israel über 40 Millionen Kunden, von denen fast 700.000 zahlende Kunden sind. Damit hat sich die Gesamtzahl seit meiner letzten Recherche mehr als verdoppelt.

Wix ist dermaßen rasant gewachsen, dass das Unternehmen sich zum IPO entschloss und seit Anfang November an der New Yorker NASDAQ gelistet ist. Im Zuge des Going Public wurden erstaunliche 127 Millionen Dollar eingenommen. Damit gelang Wix der bisher größte Börsenstart eines israelischen Unternehmens überhaupt. Das Unternehmen mit seinen insgesamt um 400 Beschäftigten in den USA und in Israel wird nun mit rund 750 Millionen Dollar bewertet.

CEO Avishai Abraham ist überzeugt, über nahezu unbegrenztes Wachstumspotenzial zu verfügen, denn nach seinen Berechnungen repräsentieren die bereits akquirierten 40 Millionen Kunden weniger als ein Prozent des Gesamtmarkts.

Wix: Kostenloser Editor mit kostenpflichtigen Zusätzen

Bevor wir uns das Featureset des Baukastens aus Tel Aviv ansehen, lassen Sie uns kurz einen Blick auf die Preisgestaltung werfen. Das ist für mich immer ein ganz wichtiger Punkt, denn was nutzt mir beispielsweise das beste Auto, wenn ich es mir schlicht nicht leisten kann. In diesem Falle interessieren mich dann die Leistungsdaten auch nicht…

Schon im kostenlosen Plan bietet Wix den vollen Leistungsumfang. Sie bauen völlig kostenfrei Ihre Website ohne Einschränkungen seitens der Editor-Software. Auch der App-Markt, ein Marktplatz zusätzlicher Add-Ons, darunter Newsletter-Anbindungen, Kontaktformulare, Kommentarsysteme, Social Media Integrationen und vieles mehr, kann voll genutzt werden, sofern die Add-Ons an sich wiederum kostenfrei sind, was auf die allermeisten auch zutrifft, zumindest, soweit es deren Basisfeatures betrifft.

wix-premium-plans

Im Grunde der einzige Haken an der kostenfreien Variante der Website aus dem Wix-Builder ist die Tatsache, dass Sie nicht Ihre eigene Domain verwenden können und gegebenenfalls mit von Wix eingeblendeter Werbung leben müssen. Im geschäftlichen, aber auch schon im semi-professionellen oder gemeinnützigen Bereich wird dieser Nachteil schwer genug wiegen, um direkt das Nachdenken über einen der kostenpflichtigen Pläne anzustoßen.

Bevor Sie das jedoch entscheiden, können Sie, anders als bei vielen anderen, zunächst einmal alle Möglichkeiten des Wix-Editors auf Herz und Nieren testen. Erst, wenn Sie vollkommen überzeugt davon sind, dass es Ihrer Site an nichts mangeln wird, buchen Sie einen Premium-Tarif.

Hier kommt im Grunde nur der Tarif “Unlimited” sinnvoll in Frage. Für 15,95 Euro im Monat bei monatlicher oder 12,42 Euro im Monat bei jährlicher Zahlung erhalten Sie eine Domain, gehostet bei Wix, 10 GB Speicherplatz und vor allem unbegrenzte Bandbreite. Auch Anzeigen werden in diesem Tarif nur eingeblendet, wenn Sie sie selber einbauen.

Private Nutzer könnten sich eventuell noch für den Tarif “Combo” interessieren. Auch hier gibt es eine Domain dazu, auch dieser Tarif ist werbefrei. Die Beschränkungen betreffen hier den auf 3GB reduzierten Speicherplatz und die auf 2GB reduzierte Bandbreite. Für den Combo-Tarif fallen 10,95 Euro im Monat bei monatlicher und 8,25 Euro bei jährlicher Zahlung an.

Da Upgrades jederzeit möglich sind, könnte man sich zunächst mit dem kleineren Plan begnügen und im Bedarfsfalle erweitern. Andererseits ist der Preisunterschied dermaßen klein…

Wollen Sie einen Online-Shop mit Hilfe von Wix betreiben, steht Ihnen nur das Paket “eCommerce” für 19,90 Euro im Monat bei monatlicher und 16,17 Euro bei jährlicher Zahlung zur Verfügung. Hier erhalten Sie dann sogar 20GB Speicherplatz, werden aber erstaunlicherweise auf 10GB Bandbreite limitiert.

Sie sehen, Wix ist kein Preisbrecher, aber auch nicht ausgesprochen teuer. Die Leistungsfähigkeit ist höher als der Preis. Insofern würde ich insgesamt ein sehr gutes Preis-Leistungs-Verhältnis attestieren.

Wix.com: Erste Schritte

Nachdem Sie nun mutmaßlich davon überzeugt sind, dass Wix Sie auch in den kostenpflichtigen Plänen nicht verarmen lassen wird, sollten wir gemeinsam einen Blick auf das übrige Featureset werfen. Das Wix stark erweiterbar ist, haben Sie bereits zur Kenntnis genommen. Der angegliederte, sehr große App-Market lässt in der Tat kaum eine Anforderung unberücksichtigt. Damit wir einer der konzeptionell größten Nachteile üblicher Baukastensysteme effektiv beseitigt. Mit Wix ist prinzipiell jede Art von Website realisierbar.

Haben Sie sich für den Dienst registriert, was sehr unkompliziert und ohne Preisgabe intimer Daten erfolgt, fordert Wix Sie auf, Ihre erste Website zu erstellen. Das erfolgt grundsätzlich auf der Basis eines Templates. Von diesen Templates bietet Wix Hunderte. Ich habe sicherlich nicht alle gesichtet, aber diejenigen, die ich mir näher ansah, genügen problemlos auch gehobenen Ansprüchen an das Design der eigenen Website.

wix-templates

Übersichtlich sortiert nach Branchen findet hier jeder mindestens eine Vorlage, auf deren Basis man gerne arbeiten wird. Ich verfiel direkt dem Problem der Qual der Wahl. Wer zwar mit dem Wix-Editor, aber dennoch frei arbeiten will, der wählt eines der leeren Templates, in denen lediglich grob Strukturen vorgegeben sind, vergleichbar mit einem Wireframe. Mittlerweile sind fast alle angebotenen Templates auch für mobile Geräte optimiert, was aber nicht heißt, dass Ihre Site automatisch mobil funktioniert. Vielmehr gibt es im Wix-Editor einen separaten Designbereich, der sich ausschließlich mit dem Aussehen Ihrer Seite auf mobilen Clients beschäftigt. Im Klartext: Sie designen die mobile Seite separat, aber auf der Basis desselben Templates.

Haben Sie sich nun für ein Template entschieden, klicken Sie an dessen Thumbnail auf “Bearbeiten” und werden ohne weitere Umschweife in den HTML-Editor von Wix geleitet. Dieser bestand noch vor recht kurzer Zeit aus einem Flash-Boliden. Davon ist nichts mehr zu sehen. Der Wix-Editor wirkt sauber, aufgeräumt und steht hinsichtlich seiner Performance einer Desktop-App in nichts nach.

wix-editor-links

wix-editor-rechts

Die Werkzeuge des Editors stehen einmal in der linksseitig angeordneten Werkzeugleiste und oben rechts horizontal zur Verfügung. Ihr Hauptaugenmerk wird zunächst auf dem linksseitigen Werkzeugkasten liegen, denn darin verbergen sich die allermeisten Design-Funktionalitäten.

Die fünf mächtigen Icons des Wix-Baukastens

Fünf Icons reichen, um alle benötigten Layout-Features abzubilden. Zuoberst finden Sie das Icon namens “Seiten”. Hierüber erstellen Sie neue Seiten, ordnen bestehende neu an, ändern die Hierarchie, legen die Startseite fest und hinterlegen wichtige SEO-Informationen. Wenn Sie wollen, definieren Sie an dieser Stelle auch Seitenübergänge, wie Überblenden oder vertikales/horizontales Gleiten.

wix-seiten

Unter dem Icon “Design” finden Sie die Möglichkeit, den Seitenhintergrund aus einer Vielzahl vorhandener Varianten zu wählen oder einen eigenen hochzuladen. Weiterhin können Sie hier ein vorgefertigtes oder eigenes Farbschema auf das Design anwenden. Nicht zuletzt findet sich an dieser Stelle die Auswahl einsetzbarer Webfonts, ebenfalls in Form diverser Vorschläge, aber auch mit der Option zur individuellen Anpassung. Wollen Sie Websites etwa in kyrillischer Schrift erstellen, so können Sie das problemlos tun, indem Sie die entsprechende Sprachunterstützung in Wix aktivieren. Alle Änderungen, die Sie vornehmen, werden sofort im Editor umgesetzt. Ein Klick auf “Änderungen verwerfen” genügt, um schauderliche Auswirkungen ungeschehen zu machen.

wix-design

Das Icon “Hinzufügen” beinhaltet alle Elemente, die man herkömmlicherweise zu einer Website hinzufügen können wollen könnte. Angefangen von Text und Bild, über Buttons, Menüs, ganze Galerien, bis hin zu Blogs und sozialen Netzwerken bleibt kaum ein Wunsch offen.

Hinzugefügt werden stets frei bewegliche Container, wie Sie es etwa aus Adobes Indesign kennen könnten. Container lassen sich mit der Maus nicht nur verschieben, sondern auch in ihrer Größe verändern und um beliebige Winkel drehen.

wix-hinzufuegen

Je nachdem, was Sie mit einem Container anstellen, erlaubt sich Wix kontextsensitive Hinweise als modale Fenster einzublenden, darunter etwa der Hinweis, dass Sie einen Container nicht außerhalb der im Template vorgegebenen Gitterlinien platzieren sollten, wenn Ihnen an der ordnungsgemäßen mobilen Darstellung Ihrer Site gelegen ist. Per Rechtsklick öffnet man kontextsensitive Menüs, deren Inhalt je nach Element variiert, dabei aber jeweils die sinnvollsten Optionen schnell zugänglich macht.

wix-textabschnitt

Das Icon “Einstellungen” erlaubt die Festlegung grundlegender Parameter, darunter etwa die Site-Adresse oder die Anbindung an soziale Netzwerke, aber auch die Integration von Google Analytics, sowie die Sicherstellung einer EU-konformen Cookie-Regelung.

Der bereits genannte App-Markt findet sich als letztes Icon und damit direkt und ohne Umschweife aus dem Editor zugänglich. Achten Sie hier auf die Kennzeichnung der einzelnen Apps. Zumeist werden Sie Gratis/Premium angezeigt bekommen, was bedeutet, dass die entsprechende App mit Basisfeatures kostenlos verwendet werden kann, während für den gehobenen Anspruch eine kostenpflichtige Premium-Version gebucht werden muss.

Haben Sie sich für eines der Templates erschienen, erhalten Sie eine entsprechend vorbelegte Optik. Sie können jedes Element einzeln bearbeiten, verschieben oder löschen. Das Kontextmenü werden Sie schnell zu schätzen lernen.

Wix: die zweite Toolbar oben rechts

Unterhalb des oberen Randes des Browserfensters finden Sie von rechts startend eine zweite Werkzeugleiste. Darin finden sich nützliche Features wie “Rückgängig” und “Wiederholen” oder “Kopieren” und “Einfügen”. Letztere funktionieren in Browserumgebungen nicht immer zuverlässig in gewohnter Manier, weshalb Wix sie hier als Feature dezidiert einbaut.

wix-toolbar-oben-rechts

Die folgenden drei Icons steuern die optischen Hilfen für das Design der gewünschten Layouts. Sie können Gitterlinien konfigurieren und anzeigen lassen und dafür sorgen, dass sich Ihre Elemente an diesen Gitterlinien ausrichten. Zusätzlich können Sie frei weitere Linien positionieren, um etwa mehrspaltige Designs sauber zu positionieren. Wie bereits gesagt, das erinnert alles sehr stark an Indesign. Grafikdesigner werden sich hier sehr wohl fühlen. Leute ohne Designkenntnisse freuen sich über die weitgehend intuitive Herangehensweise. Nur der Coder, der wird meckern ;-)

Wix: die entscheidenden Schritte

Obschon sich der Editor komplett im Stile von WYSIWYG verhält, finden Sie in der oberen Toolbar eine separate Vorschau. Ein Klick darauf führt dazu, dass sämtliche Tool-Bereiche, Gitterlinien und sonstige Hilfen ausgeblendet werden. Per Klick wechseln Sie zwischen der Vorschau für Desktop-Browser und jener für mobile Geräte.

wix-mobilvorschau

Zuletzt sorgen Sie unter Verwendung des Buttons “Publizieren” für die Live-Schaltung Ihrer Website. An dieser Stelle können Sie noch einmal kompakt darüber befinden, ob Sie die Seite von Suchmaschinen indexieren lassen wollen und ob die mobile Version ebenfalls publiziert werden soll. Am Ende dieses Vorgangs findet sich die soeben designte Website öffentlich sichtbar im Netz der Netze wieder. Wenn Sie nun eine aussagekräftigere Domain damit verknüpfen wollen, so wissen Sie ja, was zu tun ist. Die Möglichkeit zum “Upgrade” hält Wix für Sie im Editor oben rechts stets zur Verfügung.

Wix Support: das ausgezeichnete Hilfe-Center

Aufgrund seiner außerordentlichen Qualität will ich noch das Hilfe-Center erwähnen. Dieses erreichen Sie aus dem Editorfenster heraus ganz rechts oben per Klick auf das Fragezeichen-Icon. Das Hilfe-Center bietet unterschiedliche Inhalte, ja nachdem, ob Sie sich gerade im Editor für die mobile oder im Editor für die Desktop-Variante befinden.

Das Hilfe-Center spiegelt das Design des Editor-Fensters wider und bietet so sehr leichten Zugang zu den Inhalten. Wollen Sie etwa die Handhabung des Icons “Design” erklärt bekommen, so führt Sie das Hilfe-Center nach dem gleichen Bedienmuster wie die Funktion selbst in deren Nutzung ein, wie Sie am folgenden Screenshot sehen können:

wix-hilfe-center

Viele Features werden nicht nur textlich, sondern zusätzlich mit Video-Kurzanleitungen verständlich gemacht. Die Videos stehen ebenfalls in deutscher Sprache zur Verfügung, so dass auch unter diesem Aspekt die schnelle Einarbeitung nicht gefährdet ist.

Fazit: Wix ist gut, günstig und eine echte Alternative zu WordPress-Themes

Wieso kommt er jetzt mit WordPress-Themes, fragen Sie sich vielleicht. Die Antwort ist näherliegend als Sie denken. Aus meinen persönlichen Erfahrungen kann ich behaupten, dass vielfach Personen ohne große Designerfahrungen auf Seiten setzen, die WordPress zum Unterbau haben. Das aber nicht etwa, weil Sie zwingend ein CMS benötigen würden, sondern lediglich, weil es für WordPress einen Riesenhaufen fertiger Templates gibt. So ist eine Site schnell geschustert und sieht noch dazu ordentlich aus. Gehören Sie zu dieser Zielgruppe, so können Sie es sich getrost einfacher machen und gewinnen sogar noch Flexibilität hinzu.

Sind Sie Designer alter Schule, werden auch Sie an Wix Ihre Freude haben. Denn, wie Sie im Text an vielen Stellen lesen konnten, lehnt sich das Bedienkonzept sehr stark an dasjenige von Grafikanwendungen wie Indesign, Photoshop oder Illustrator an.

Einen Nachteil gibt es, den man allerdings nur dann so bezeichnen kann, wenn es einem nicht ohnehin egal ist. Mit Wix erstellte Seiten geben nur über Umwege Zugriff auf den Quellcode. Im Wix-Supportcenter findet sich eine entsprechende Anleitung, die aber im Wesentlichen besagt: Rufen Sie Ihre Seite mit einem entsprechenden URL-Parameter auf, klicken Sie auf “Quellcode anzeigen” im Browser Ihrer Wahl und kopieren Sie den Quellcode Seite für Seite aus. Das ist natürlich keine komfortable Sache und eher geeignet, um Code-Stichproben zu ermöglichen. So können Sie als Code-Kundiger zumindest beurteilen, ob der generierte Quelltext professionellen Ansprüchen genügt. Optimieren können Sie nicht.

Am Ende also ist Wix eine valide Alternative für Endkunden, aber auch Designer, die entweder nicht coden können oder eben nicht coden wollen. In der Tat wird auch letzteres mehr und mehr zur Alternative, jedenfalls, wenn es um handelsübliche Websites für handelsübliche Zwecke, allen voran das Zeigen von Präsenz und das Marketing in eigener Sache geht.

Kategorien
Essentials Freebies, Tools und Templates

Google Web Designer räumt auf mit Flash in Online-Anzeigen, mehr aber nicht

Googles neuestes, kostenloses Tool hört auf den vielversprechenden Namen Google Web Designer. Schnell ist Verdacht geschöpft, man könne es hier mit einem Konkurrenten des altehrwürdigen Dreamweaver zu tun bekommen. Tatsächlich lassen sich mit Google Web Designer theoretisch beliebige HTML-Seiten erstellen. Aber komfortabel oder auch nur praxisnah ist anders. Für die Gestaltung von bewegten Anzeigen in (vornehmlich) Googles Anzeigennetzwerk ist das Tool hingegen bestens geeignet.

google-webdesigner-logo

Google Web Designer: Abonniert auf Animationen

Was interessieren mich Anzeigebanner, denke ich so, als ich den kostenlosen Download des für Mac und Windows erhältlichen Werkzeugs anstoße. Vielleicht ist der Web Designer ja tatsächlich für das Web Design geeignet. Immerhin legt der Name es nun wirklich näher als nahe. Und deshalb versuche ich gleich gar nicht, eine Anzeige zu definieren, sondern eine beliebige HTML-Datei aus einem meiner Projekte zu öffnen.

google-webdesigner-landing

Ernüchterung stellt sich ein. Das geht nicht. Der Web Designer kann keine HTML-Dateien öffnen, die er nicht selbst erstellt hat. Sicherlich, die Beschränkung lässt sich durch Änderungen im Header oder schlichtes Copy and Paste umgehen, aber hier wird schon deutlich, dass ich es eben nicht mit einem HTML-Editor alter Schule zu tun habe.

Ich gebe nicht auf. Nachdem ich einen Quellcode aus einem meiner letzten Beiträge über die Zwischenablage in Googles Tool gezwungen habe, wechsele ich aus der Codeansicht in die Designansicht. Wieder stellt sich Ernüchterung ein. Während in der Codeansicht noch ein wirklich überzeugendes Syntax-Highlighting mitsamt automatischer Einrückung Freude verbreitet, ist die Designansicht doch eher etwas zum Abgewöhnen. Dies jedenfalls, wenn es um das Website-Design gehen würde.

google-webdesigner-codeview

Erneut winkt Google Web Designer mit dem Zaunpfahl. Es ist in der Tat nicht für das Design herkömmlicher HTML-Seiten gemacht. Der Zugriff erfolgt über die HTML-Elemente (body, p, etc.). Jedes einzelne Element kann dann über ein Eigenschaften-Panel auf der linken Seite des Tools umfangreich manipuliert werden.

Dabei spielt Google Web Designer insbesondere da massive Stärken aus, wo es um Animationen in alle Richtungen, auch dreidimensionaler Art geht. Schneller als in jedem anderen Werkzeug, das ich kenne, hat man eine Rotation definiert und auf eine Timeline gebracht. Die Timeline erinnert mich an die gute alte DHTML-Timeline aus dem ersten oder zweiten Dreamweaver und natürlich ebenfalls an die klassischen Vorgehensweisen bei Adobes Flash.

An dieser Stelle beschließe ich, nicht länger zu versuchen, Google Web Designer beim Namen zu nehmen und erkenne an, dass es einfach ein tolles Werkzeug für die Werbebranche ist. Und die hat tolle Werkzeuge, die zeitgemäß sind, auch wirklich nötig. Denn immer noch dominiert im Netz das zwar nicht gute, aber immerhin alte Flashformat. Was im Desktop-Browser noch kein Problem darstellt, kann die mobile Nutzererfahrung komplett zerhäckseln.

google-webdesigner-adfocus

Responsives Ad-Design mit dem Google Web Designer

Google Web Designer: Ändert alles?

Die rasante Verbreitung mobiler Endgeräte, davon ein gutes Teil iOS-Devices, die bekanntlich vom Start weg Flash verweigerten, zwingt eigentlich zu Alternativen. Leider hinkt die Werbebranche dem Trend deutlich hinterher und verlässt sich lieber auf etablierte, wenn auch veraltete Produktionsverfahren für ihre Klick-Kampagnen.

Google Web Designer zeigt, dass der Umstieg nicht schwierig oder schmerzhaft sein muss, sondern sogar Freude bereiten kann. Googles Tool verlangt keine Coding-Kenntnisse und erlaubt auch Umsteigern in gewissem Umfang Erfolgserlebnisse. Schlussendlich kommt man aber nicht nur nicht um die Code-Erfahrung drum herum, will man das Optimum aus seinem Entwurf holen. Auch bei der Parametrisierung der Eigenschaften in den diversen Panels dürften völlige Code-Noobs nur mäßige Erfolge feiern.

So ist Google Web Designer in seiner jetzigen Inkarnation weder eine Komplettlösung für Web Designer, noch etwas für Banner-Neulinge. Wer aber schon über solide Kenntnisse in der Erstellung bewegter Anzeigenkampagnen für Netzbewohner verfügt, der kann mit Googles Tool recht schnell Fahrt aufnehmen und wird nach meiner Einschätzung nur wenig vermissen.

google-webdesigner-ui

Die UI erinnert schwer an die Adobe-Produktlinie

Das gilt auf jeden Fall, solange man AdMob oder DoubleClick anvisiert. Anzeigen für andere Anzeigennetzwerke lassen sich als "Generic" erstellen, bedürfen dann aber weiterer Anpassungen.

Der Code, den das Werkzeug generiert, kann sich, man glaubt es kaum, durchaus sehen lassen. Wir haben es nicht mit einem Frontpage für Bannerschrauber zu tun.

Fazit: Lassen Sie sich weder vom Namen, noch von der sehr an Photoshop und Dreamweaver erinnernden UI täuschen. Google Web Designer ist kein Tool für Einsteiger, weder für solche ins Webdesign, noch für solche ins Ad-Design. Denjenigen, die sich in letzterem bereits auskennen, sei das Werkzeug hingegen ans Herz gelegt. Für mich wär’s demnach auch nix…

Im Nachgang sei noch erwähnt, dass das Projekt umfangreich durch dokumentiert ist. Zusätzlich erläutert ein ganzer Reigen von Videos die individuellen Features des Werkzeugs im Detail. Wer sich also einarbeiten will, der findet beste Voraussetzungen vor. Einen ersten Überblick verschaffen Sie sich mit dem folgenden Video:

Links zum Beitrag

Kategorien
Inspiration Showcases

Geht doch: 25+ schicke Websites aus dem Homepage-Baukasten

Heute wollen wir uns mal wieder mit einem der Lieblingsthemen professioneller Designer beschäftigen – dem Homepage-Baukasten. Alles Geschimpfe nutzt nichts, die Dinger sind einfach nicht aus der Welt zu reden. Im Gegenteil, es werden eher mehr denn weniger. Das Versprechen ist aber auch zu verlockend. Ohne technische Kenntnisse soll man hervorragend aussehende Websites im Handumdrehen gestalten können. Da freut sich die Betreiberin des kleinen Schmucklädchens um die Ecke ebenso wie der Inhaber der Zweirad-Schrauberbude in Hintertupf. Manch Service richtet sich mittlerweile sogar direkt an Printdesigner, die sich ein Stück vom Webdesign-Kuchen abschneiden wollen. Egal, zu welcher Gruppe Sie gehören. Die folgende Zusammenstellung von Beispielen verschiedener Dienste zeigt, wie weit Sie im Spätsommer 2013 ohne Code-Kenntnisse kommen können…

Eins sei noch vorweg geschickt. Die folgenden Beispiele können zwar ohne Code-Kenntnisse, nicht jedoch ohne Ideen realisiert werden. Das grafische Konzept, das Navigationsdesign, die Informationsarchitektur, das alles nimmt Ihnen natürlich ein Homepage-Baukasten nicht ab. Es sei denn, Sie können und wollen Ihr Konzept in eines der stets vorhandenen, vorgefertigten Templates pressen. Individualität erreichen Sie dann jedoch nicht.

WebStartToday.com

Wie die meisten bekannten Homepage-Baukästen richtet sich auch  WebStartToday an kleine Unternehmen und Freiberufler. Auf der Basis eines Drag-and-Drop-Interfaces kümmert sich der Baukasten ansatzweise auch um SEO-Freundlichkeit. Geboten werden Tausende von Templates aus 72 Branchen, womit weite Bereiche real existierender Bedarfe abgedeckt sein dürften. Der Dienst bietet bei der Anpassung der Templates hilfreiche Tipps und Tricks, vor allem auch mit Blick auf SEO und kann im ersten Jahr komplett kostenfrei verwendet werden.

Reed Grey Woodworking

AquaVie Day Spa

Electrify Fitness

Intuit.com

Auch Intuit wendet sich an die Zielgruppe kleiner Unternehmen. Hier findet man lediglich einige hundert Designs vor, dafür glänzt der Dienst mit ausgezeichnetem Support, bietet E-Commerce- und Social-Media-Integration. Intuit kann 30 Tage lang kostenfrei ausprobiert werden.

Coco Lassial Apron Co.

Gentle Hands Canine Care

Elk Mountain Rentals LLC

Wix.com

Wix ist schwer zu schlagen, wenn man mal vom Namen absieht, denn Wix ist kostenlos. Es gibt zwar Premium-Angebote, diese beziehen sich jedoch auf Speicher und Bandbreite, das Featureset des Dienstes an sich ist kostenlos nutzbar. Wix bietet wenige vorgefertigte Designs, aber viele Möglichkeiten, eine Website zu gestalten, wenn man denn eine Idee hat, wie diese aussehen soll. Wenig verwunderlich, dass Wix zu den Lösungen gehört, die auch von Webdesignern eingesetzt wird.

Sue-Sue’s

The Punch and Judy Show

Richard Overton

Breezi.com

Breezi richtet sich direkt an Webdesigner, die den Einstieg in den Code vermeiden wollen (oder mangels Know-How müssen). Breezi limitiert seine Nutzer kaum. Auch anspruchsvolle Designs sind damit machbar. Erstellte Sites können mit einer Fülle zusätzlicher "Apps" aufgepeppt werden und sind automatisch responsiv. Designs in Breezi sind sog. Skins, die in Sekundenschnelle über die vorhandene Site gestülpt werden können – interessant für Wankelmütige.

BlackStoneIndonesia

Katherine Morgan Design

Fragments of Winter

Christine Brizendine

Design Printworks

Mint Wedding Cinematography

Weebly.com

Weebly ist beliebt bei vielen Menschen, aber vor allem bei Budgetorientierten. Denn Weebly gehört zu den günstigsten Diensten, ist im Basis-Featureset sogar kostenlos. Der Dienst erzeugt standard-kompatible Sites, die SEO-optimiert, Social Media vorbereitet und mit Analytics ausgestattet sind. Neben Apps für iOS und Android bietet Weebly seit kurzem Optionen zur Erstellung mobil-freundlicher Seiten.

Arancini Bros.

Zestwishes.co

Kaylee’s Education Studio

IM-Creator

Auch IM-Creator richtet sich neben der Zielgruppe der Kleinunternehmen und Freelancer direkt an Designer, die den Einstieg in das Coding scheuen. Die vorhandenen Templates sind in ihrer Mehrzahl von freiberuflichen Webdesignern beigesteuert worden – vermutlich ein Grund, wieso IM-Creator zu den vielfältigeren seiner Art gehört.

Wiggley Bottom Farm

Alex Steenfeldt

Chikin and Fish

Quails in the Nest

TheDigitalArtist.com

MoonFruit.com

MoonFruit richtet sich ebenfalls an Freunde des geringen Budgets. Kommt Ihre Site mit 20 MB auf 15 Seiten aus, dann kostet MoonFruit keinen Cent. Premium-Pläne bieten mehr Speicher und Bandbreite, sowie mehr Features, etwa E-Commerce-Unterstützung und bald auch den Betrieb von Blogs.

Shortlaunch.com

Emma Illustration

In Your Dreams

Re-loved Vintage

Raw Xclusive

Webydo.com

Webydo kann zwar grundsätzlich von Endkunden verwendet werden, Zielgruppe ist aber eindeutig der Designer. Webydo ist ambitioniert gestartet und steht mittlerweile auch als White-Label-Variante zur Verfügung. So kann sich jeder Designer in Webydo häuslich einrichten. Das System übernimmt auf Wunsch sogar die Rechnungsstellung gegenüber den Kunden. Etliche Kooperationen mit etwa E-Commerce-Firmen sind darauf angelegt, die Fähigkeiten von Webydo in Bereiche zu erweitern, in denen man bislang nicht um das Coding herum kommt.

Stella and Lori

Yoav Gurin

Gallery Born

Punko

Wie die gezeigten Websites erkennen lassen, sind die Zeiten, in denen Website-Generatoren nur Schund produzierten, endgültig vorbei. Wenn man sich nun noch vorstellt, dass diese Tools von erfahrenen Designern bedient werden und nicht direkt vom Endkunden, dann könnten da richtige Schmuckstücke entstehen. Die Vorteile für berufsmäßige Seitenersteller liegen auf der Hand. Die Erstellungsdauer wird verkürzt, der Preis kann sinken, muss aber nicht. In jedem Fall können Designer Zeit sparen, was sich – so oder so – wieder finanziell auswirken wird.

Natürlich gerät jeder Website-Baukasten an seine Grenzen, wenn es um die Erstellung komplexer Web-Apps mit Interaktionsmöglichkeiten geht, aber die durchschnittliche Web-Präsenz schafft er definitiv.

(th/dpe)

Kategorien
Bilder & Vektorgrafiken bearbeiten Design Inspiration Photoshop Showcases

Homepage-Baukasten: 40 fertige Elemente für das Webdesign mit Photoshop

Zahlreiche Web-Elemente können zunächst als eine Art Prototyp in Photoshop gestaltet werden. Klar ist, dass weite Bereiche oder gar das komplette Element später eine große Packung CSS erhalten wird, doch für den schnellen Entwurf ist für viele Webdesigner Photoshop die erste Wahl. Schnell lassen sich auf Basis weniger Grundformen hochwertige User Logins, Buttons, Slider, Video-Player oder gar ganze Webseiten erzeugen.

Login Form V2

Website: facecjf.com
Urheber: chris farina
psd-datei21

© chris farina

Dark Login Box

Website: 365psd.com
Urheber: Haziq Mir
psd-datei2b

© Haziq Mir

Blueish Cloud Growl Style

Website: premiumpixels.com
Urheber: Victor Erixon
psd-datei3b

© Victor Erixon

Unique Green & Blue Buttons

Website: 365psd.com
Urheber: Frantisek Krivda
psd-datei4

© Frantisek Krivda

Modern Image Slider (PSD)

Website: graphicsfuel.com
Urheber: Rafi
psd-datei5

© Rafi

Speech Bubbles

Website: 365psd.com
Urheber: Bart Ebbekink
psd-datei6b

© Bart Ebbekink

Settings Panel (PSD)

Website: premiumpixels.com
Urheber: Haziq Mir
psd-datei7b

© Haziq Mir

Image Carousel

Website: 365psd.com
Urheber: Bojana Cakic
psd-datei8

© Bojana Cakic

Light Video Player PSD

Website: pixelsdaily.com
Urheber: Nguyen Van Thy
psd-datei9

© Nguyen Van Thy

App Store Buttons

Website: 365psd.com
Urheber: latrucoteca.com
psd-datei10b

© latrucoteca.com

Photoshop-Tipp #1: Grundformen als Basis einsetzen

01 Grundform aufziehen

Möchten Sie die Wirkung der ausgewählten Farben für eine Website schnell testen, so erzeugen Sie mit wenigen Grundformen eine Grafik, welche dieses Gefühl schnell vermitteln kann. Hier wurde etwa über einer einfachen Hintergrundtextur mit dem Ellipse-Werkzeug in der Farbe #4499bb (RGB 68, 153, 187) und mit gedrückter Strg-Taste eine Kreisform aufgezogen. In der Optionsleiste war Form, statt Pfad oder Pixel, ausgewählt.

Auch bei dem Zeichenstift-Werkzeug war Form in der Optionsleiste ausgewählt. So konnte ich leicht die runde Form mit nur drei Klicks für ein Dreieck in eine Sprechblase verwandeln.

webelement-a1

02 Weitere Formen

Mit dem Rechteck-Werkzeug und gedrückter Strg-Taste wurde ein Quadrat aufgezogen und ebenso in eine Art Sprechblase verwandelt. Ist die Ebene mit dem Quadrat aktiv, so kann diese über Strg+J leicht kopiert werden. Mit dem Verschieben-Werkzeug, gedrückter Umschalttaste und der Pfeiltaste nach links wurde die Kopie dann positioniert.

Ein Doppelklick auf die Ebenenminiatur ermöglicht es, die Farbe des Quadrates anzupassen. In einem weiteren Rot-Ton wurde mit dem Rechteck-Werkzeug ein kleines Rechteck aufgezogen und über Ebene > Schnittmaske erstellen an die darunter liegende Form angepasst.

webelement-a2

03 Beschriftung

Da das Rechteck-Werkzeug gerade aktiv war, habe ich noch zwei Zierlinien in den verwendeten Farben oben wie unten eingefügt. Mit dem Text-Werkzeug und weißer Farbe wurden die Elemente beschriftet. Schon jetzt bekommt man ein gutes Gefühl dafür, wie die Farben, der Stil und die Hintergrundtextur zusammen wirken.

webelement-a3

Free PSD UI Kit: Super Buttons

Website: sixrevisions.com
Urheber: Josh Katherman
psd-datei11b

© Josh Katherman

Profile PSD

Website: 365psd.com
Urheber: Bojana Cakic
psd-datei12

© Bojana Cakic

Settings Panel PSD and CSS

Website: pixelsdaily.com
Urheber: Ali Asghar
psd-datei13

© Ali Asghar

Lock / Unlock Slider

Website: 365psd.com
Urheber: Andrew Forrester
psd-datei14

© Andrew Forrester

The Freebies

Website: kbsportfolio.com
Urheber: Kb’s portfolio
psd-datei15

© Kb’s portfolio

Dark Toolbar

Website: 365psd.com
Urheber: Rob Smittenaar
psd-datei16

© Rob Smittenaar

Learn How To Create A Stylish Twitter Modal Box

Website: photoshop-plus.co.uk
Urheber: photoshop-plus.co.uk
psd-datei1

© photoshop-plus.co.uk

Hanging Note Sign Psd

Website: www.pixeden.com
Urheber: www.pixeden.com
psd-datei17

© www.pixeden.com

Music Widget

Website: 365psd.com
Urheber: Ben Muschol
psd-datei18b

© Ben Muschol

Night/Day Slider

Website: 365psd.com
Urheber: Kuba Holuj
psd-datei19

© Kuba Holuj

Map GUI kit (PSD)

Website: graphicsfuel.com
Urheber: Rafi
psd-datei20b

© Rafi

Detailed Price Tag

Website: pixelsdaily.com
Urheber: Liam McCabe
psd-datei22

© Liam McCabe

Free PSD – Chat UI PSD Concept

Website: blazrobar.com
Urheber: blazrobar.com
psd-datei23

© blazrobar.com

Colorful Pricing Tables PSD

Website: pixelsdaily.com
Urheber: Ali Asghar
psd-datei24b

© Ali Asghar

Pump – A free website psd template

Website: blazrobar.com
Urheber: blazrobar.com
psd-datei25b

© blazrobar.com

Map Markers PSD

Website: dribbble.com
Urheber: Jeff Broderick
psd-datei26

© Jeff Broderick

File Upload Widget

Website: 365psd.com
Urheber: Bart Ebbekink
psd-datei27

© Bart Ebbekink

Mini Slider Free

Website: dribbble.com
Urheber: Dan Edwards
psd-datei28

© Dan Edwards

Drop Zone UI

Website: dribbble.com
Urheber: Michael Donovan
psd-datei29

© Michael Donovan

Thumbnail Hover State Overlay (PSD)

Website: premiumpixels.com
Urheber: premiumpixels.com
psd-datei30

© premiumpixels.com

Photoshop-Tipp #2: Menübar gestalten

01 Grundform mit Verlauf

Ziehen Sie die Grundform der Menübar mit dem Abgerundeten-Rechteck-Werkzeug auf, das in der Optionsleiste auf einen Radius von 20 Pixeln eingestellt ist. Damit die obere Seite gerade verläuft, wählen Sie das Rechteck-Werkzeug an und stellen in der Optionsleiste Vordere Form subtrahieren aus. Jetzt können Sie den oberen Bereiche durch eine weitere Form beschneiden. Aktivieren Sie einen Ebenenstil > Verlaufsüberlagerung mit einem Verlauf von Weiß zu einem mittleren Grauton.

webelement-b1

02 Komplexer Schatten

Erstellen Sie eine neue Ebene, etwa über Umschalt+Strg+N, und ändern Sie die Ebenenreihenfolge so ab, dass diese neue Ebene unterhalb der Ebene mit der Form liegt. Aktivieren Sie das Polygon-Lasso-Werkzeug und wählen Sie mit wenigen Klicks die Form des Schattens aus. Füllen Sie die Selektion mit Schwarz. Heben Sie die Auswahl auf, etwa über Strg+D, und wenden Sie den Filter > Weichzeichnungsfilter > Gaußscher Weichzeichner so an, dass der Schatten weich verläuft.

webelement-b2

03 Trennung

Eine Trennlinie soll verschiedenste Bereiche abgrenzen. Erstellen Sie dazu eine neue Ebene, etwa über Ebene > Neu > Ebene. Wählen Sie mit dem Auswahlrechteck-Werkzeug einen Bereich aus und das Verlaufswerkzeug an. Wählen Sie einen etwas dunkleren Grauton aus und in der Optionsleiste den Verlauf Vordergrundfarbe zu Transparent. Ziehen Sie einen kurzen Verlauf zu einer Seite hin auf. Wiederholen Sie diesen Schritt, so das der Verlauf zu beiden Seiten hin spiegelverkehrt zu sehen ist. Drücken Sie Strg+D zum Aufheben der Auswahl.

webelement-b3

04 Punkte

Ziehen Sie mit dem Ellipse-Werkzeug und gedrückter Strg-Taste eine Kreisform auf. Aktivieren Sie den Ebenenstil > Verlaufsüberlagerung mit einem Verlauf von #88aacc (RGB 136, 170, 204) zu #5588aa (RGB 85, 136, 170). Zusätzlich aktivieren Sie einen Ebenenstil > Kontur mit folgenden Werten: Größe 2 Pixel, Position Außen, Farbe #889090 (RGB 136, 144, 144).

Unterhalb dieses Buttons erstellen Sie mit dem Ellipse-Werkzeug eine weitere, aber etwas größere Form. Diese erhält eine Verlaufsüberlagerung von einem dunkleren zu einem helleren Grauton. So wirkt der Button wie eingedrückt in die Oberfläche der Menübar.

webelement-b4

05 Beschriftung

Die beiden Buttons wurden noch mit einem fortlaufenden Buchstaben gekennzeichnet und die Flächen beschriftet. Dazu setzen Sie das Text-Werkzeug ein. Hier kam die Schritart Dekar zum Einsatz.

webelement-b5

Orange Graph Widget

Website: 365psd.com
Urheber: Alexandre Naud
psd-datei31b

© Alexandre Naud

Primary School Website Theme (Psd)

Website: blugraphic.com
Urheber: blugraphic.com
psd-datei32

© blugraphic.com

Upload File Interface PSD (Metro Style)

Website: graphicsfuel.com
Urheber: Rafi
psd-datei33

© Rafi

Web Weather Forecast Widget (Psd)

Website: blugraphic.com
Urheber: blugraphic.com
psd-datei34

© blugraphic.com

Notification Centre UI PSD & CSS

Website: pixelsdaily.com
Urheber: Martijn Otter
psd-datei35

© Martijn Otter

HTC Sense Clock PSD

Website: livven.deviantart.com
Urheber: Livven
psd-datei36

© Livven

Sleek Search Box Pack

Website: design3edge.com
Urheber: sada
psd-datei37

© sada

Spotify Login Window

Website: dribbble.com
Urheber: Gavin Anthony
psd-datei38

© Gavin Anthony

Freebie PSD: Flat UI Kit

Website: dribbble.com
Urheber: Riki Tanone
psd-datei39

© Riki Tanone

Verticle Navigation

Website: dribbble.com
Urheber: Khurram Raza
psd-datei40

© Khurram Raza

(dpe)