Ansprechende Portfolio-Websites und Landingpages per Drag and Drop mit Salon.io erstellen

Bestimmte Kommentare zu diesem Beitrag sind vorhersehbar, bevor er überhaupt geschrieben ist: ‘Och nö, an die Gestaltung von Websites sollte man nur Profis lassen, alles andere ist doch halbgares Amateur-Geklickel.’ und: ‘Hey, bei […]
Ansprechende Portfolio-Websites und Landingpages per Drag  and Drop mit Salon.io erstellen
  • Von Elke Fleing
    Mittwoch, 2. Januar 2013
  • 10 Kommentare
  • 1 Star2 Stars3 Stars4 Stars5 Stars
    Loading ... Loading ...

Bestimmte Kommentare zu diesem Beitrag sind vorhersehbar, bevor er überhaupt geschrieben ist: ‘Och nö, an die Gestaltung von Websites sollte man nur Profis lassen, alles andere ist doch halbgares Amateur-Geklickel.’ und: ‘Hey, bei einem so simpel zu bedienenden Baukastensystem kann doch nichts professionell Nutzbares herauskommen.’ Trotz dieser ohne seherische Fähigkeiten vorhersagbaren Kritik stellen wir Salon.io (www.salon.io) vor. Es ist tatsächlich genau das, was die Einleitung ahnen lässt: Ein Online-Gestaltungswerkzeug, mit dem man Websites ganz einfach per Drag and Drop und ohne jede Programmierkenntnisse zusammenklicken und jederzeit umgestalten kann. Aber es ist eines mit viel Pfiff und durchaus professionellen Nutzungsmöglichkeiten:

Neben der Drag and Drop-Technik zur Erstellung ist das Außergewöhnlichste an Salon.io wohl die Möglichkeit, dass man online und in Echtzeit frei von irgendwelchen Vorgaben, das Layout der Internetpräsenz gestalten kann. Also wirklich komplett frei, sprich: Man kann jedes Element – Video, animierte Grafik, Bild oder Text – genau dort hinschieben, wo man will – und es natürlich formatieren und verlinken.

Diese mit HTML 5 realisierte Möglichkeit nennt sich Salon Style Hanging und bezieht sich auf die maximale Gestaltungsfreiheit nach dem Prinzip der ‘Petersburger Hängung’, bei der Gemälde scheinbar willkürlich dicht an dicht und oft bis unter die Decke gehängt sind.

Wer ein bisschen was von Web-Programmierung versteht, wird wissen, dass die Möglichkeit, jedes Elements auf einer Website willkürlich zu platzieren, nicht ganz einfach zu realisieren ist.

Diese beiden Eigenschaften von Salon.io:

  • Gestalten von Websites per Drag and Drop ohne HTML-Kenntnisse und
  • absolute Gestaltungsfreiheit durch Salon Style Hanging

machen das Tool wirklich für viele Nutzungsmöglichkeiten attraktiv:

1. Komplette kleine Internet-Präsenzen gestalten ohne Programmierkenntnisse

Jeder, der noch keine eigene Website hat, aber momentan weder Budget für Profis hat noch Lust auf Standard-Baukasten-Layouts hat, die doch irgendwie alle ähnlich aussehen, kann sich mühelos seine erste Internet-Präsenz mit Salon.io basteln. Mit mehreren Unterseiten, Navigation und allem drum und dran.

Die Möglichkeit des Salon Style Hanging bietet dabei viel kreativen Spielraum, so dass besonders Personen oder Unternehmen aus kreativen Bereichen sich leicht eine Site passend zu ihrem eigenen künstlerischen Stil erstellen können.

2. Präsentationsfläche für Arbeitsproben oder Referenzen

Vor allem Dienstleister stehen immer wieder vor dem Problem, ihr Angebot, ihre Referenzen oder auch Arbeitsproben online optisch ansprechend zu präsentieren. Viele Website-Templates sehen dafür schon spezielle Portfolio-Templates vor, aber man bewegt sich gestalterisch doch immer innerhalb eines tabellenartigen Gitters. Mit Salon.io ist man gestalterisch völlig frei, kann einzelne Elemente sich überlappen lassen, seine Bilder im freien Raum platzieren, durch Grafiken Zusammenhänge und optische Verknüpfungen herstellen – fast alles ist möglich.

3. Komplettes Online-Credential für die Akquise statt PDF per E-Mail

Wie oft verschicken vor allem Dienstleister im Zuge Ihrer Akquise eine PDF-Datei an potenzielle Kunden per E-Mail, in der sie ihre Vita, Ihr Leistungsangebot, ihre Referenzen und Ihre Kontaktdaten versammelt haben. Um dieses Credential nett zu gestalten, wählen viele den Weg, es per PowerPoint zu gestalten und dann in ein PDF umzuwandeln. Dabei kommen dann oft Dateien von 1 MB und mehr heraus – mit denen man das E-Mail-Postfach ausgewählter Empfänger beglückt.

Enthält das PDF Links zu Social Web-Accounts, Referenz-URLs oder anderen Internet-Adressen, muss der Empfänger dann ständig zwischen Acrobat und Browser hin- und herwechseln.

Wie viel einfacher ist es, dem Empfänger einfach einen Link zu seinem Salon.io-Online-Credential zu mailen, von dem aus er dann problemlos in neuen Tabs die Links anklicken kann, die er sehen möchte, ohne die Applikation wechseln zu müssen.

4. Kollaborationstool zwischen Webentwickler und seinem Kunden

Entwürfe zu Websites können mit minimalem Zeitaufwand online entwickelt werden. So können Kunde und Webentwickler gemeinsam online und in Echtzeit am Layout der Site basteln – tolle Möglichkeit zur Kollaboration.

5. Landingpage für einzelne Projekte oder Produkte

Mich hat Salon.io bei der Recherche für diesen Artikel so angesprochen, dass ich es gleich mal in der Praxis ausprobieren wollte.

Deshalb hab ich mal eben eine kleine Landingpage für das DS-Book No. 1 zusammengeklickt. Das Ganze hat keine 3 Stunden gedauert – und am längsten hab ich gebraucht, um die Bilder der 45 darin interviewten Gründer mit den Websites ihrer Start-ups zu verlinken. Das alles hat richtig Spaß gemacht. Hin- und Herschieben, rumprobieren, ergänzen und ersetzen – alles ging zack, zack und ohne eine Zeile Code zu schreiben…

Diese kleine Seite ist ausschließlich mit den Funktionen erstellt worden, die die gratis-Version von Salon.io bietet – als Premium-Nutzer und mit einigen HTML- und CSS-Kenntnissen hat man noch mehr gestalterische Möglichkeiten, weil man direkt ins HTML oder CSS eingreifen kann.

So oder ähnlich kann man sehr einfach ein neues Buch vorstellen, ein spezielles erklärungsbedürftiges Produkt, eine Sonderaktion oder ein Gewinnspiel. Und dabei kann man natürlich auch eine Navigation und mehrere Unterseiten erstellen.

Weitere Beispiele sind im Showroom von Salon.io zu sehen.

Entstanden als Plattform für Studenten

Ins Leben gerufen wurde das Projekt von Sebastian Deutsch, 9elements, und Stefan Landrock während einer Gastprofessur an der Hochschule für Gestaltung in Offenbach. Das Projekt richtete sich an die Kunst- und Design-Studenten, die ihre Arbeiten selbstständig und individuell im Netz präsentieren wollen und seitens der Hochschule keine geeignete Plattform dafür vorfanden.

Ebenfalls zu den Gründern gehören Eray Basar, ebenfalls 9 elements und Mathias Bär, Student an der Hochschule für Gestaltung Offenbach.
Jetzt will das Berliner Start-up sein Tool der Öffentlichkeit zur Verfügung stellen und per Fremium-Modell monetarisieren.

Momentan kostet ein Premium-Account, der für die allermeisten Bedarfe ausreichen dürfte, 49 Euro pro Jahr. Ab dem 5. Januar 2013 kostet er allerdings das Doppelte, denn nur bis zum 4.1.2013 gilt der 50 Prozent-Rabatt.

Dann läuft nämlich die erste Kickstarter Crowdfunding-Kampagne aus, deren Erlöse dazu genutzt werden sollen, Salon.io weiterzuentwickeln.

Was fehlt oder stört

Natürlich ist Salon.io, das ja noch in der Beta-Phase ist, noch in diversen Punkten ausbaufähig:

Dringend wünschenswert ist eine Möglichkeit, Salon.io-Seiten in bereits existente Internet-Präsenzen einzubinden, zum Beispiel wäre ein WordPress-Plugin gut.

Das Uploaden von Bildern dauert ziemlich lange – was daran liegt, dass beim Upload jedes Bild gleich in diverse Größen umgerechnet wird. Da sollte man seitens Salon.io nochmal bei, das hält ordentlich auf.

Was gar nicht möglich ist, weil hinter Salon.io ja ein komplettes Content Management System liegt: Den gesamten Content auf einen eigenen Server zu übertragen. Die mit salon.io erstellten Seiten bleiben auf den Servern des Dienstes. Allerdings gibt es eine technische Möglichkeit, die Seite über eine ‘Salon.io-freie’ beliebige URL aufrufen zu lassen, so dass der normale User gar nicht merkt, dass die Präsenz nicht selbst gehostet ist.

Bislang läuft Salon.io zwar schon auf allen Geräten, die HTML5 darstellen können. Swipe-und Zoom-Gesten für Touch-Bildschirme werden allerdings noch nicht unterstützt – die Entwicklung dafür ist aber schon in Arbeit und soll im 1. Quartal 2013 abgeschlossen werden.

Bisher ist die Plattform nur in englischer Sprache, was bei einem deutschen Start-up schade ist. Die Übersetzung ins Deutsche ist aber auch schon in der Pipeline.

Und an der externen Unternehmens-Kommunikation sollte noch gearbeitet werden. Viele der durchaus auch für den professionellen Bereich vorhandenen Nutzen werden bisher nicht deutlich und plastisch genug kommuniziert. Insgesamt kommt die Außenkommunikation ein bisschen rüber wie ‘nettes kleines Tool zum Spielen’. Da wünscht man sich erklärte und mit Salon.io umgesetzte Fallbeispiele – und zwar nicht nur von den Beta-Usern sondern vom Unternehmen selbst.

Elke Fleing

Hat sich der Mission 'Den Stern eines Unternehmens leuchten lassen' verschrieben. Als Unternehmensberaterin zu Positionierung und Kommunikation, Webworkerin, Texterin und Trainerin folgt sie dieser Mission in ihrem eigenen Unternehmen. Folgerichtig widmet sie sich auch hier vor allem Tools und Themen, die der Erfolgs-Maximierung von Unternehmen dienen.



  1. Matthias

    Ich persönlich finde die Seite und das Angebot gar nicht mal so verkehrt. Denn hey, im Vergleich mit irgendwelchen DIY Homepages von großen Hostern sieht das gebotene doch um Längen besser aus.

  2. Sieht Klasse aus, und im Vergleich zu anderen (unbounce z.B.) mit einer deutlich Startup freundlicheren Preis-Struktur!



  3. Markus Wolff

    Ich meine ja, daß die völlige Freiheit im Layout genau das sein wird, was dem Dienst das Genick brechen wird – da werden extrem viele Sites mit minderwertiger Optik bei raus kommen.

    Da können nur Leute was mit anfangen, die von Gestaltung ohnehin schon Ahnung haben, aber nicht von HTML/CSS-Entwicklung. Diese Zielgruppe stelle ich mir einigermaßen klein vor.

    Alle, die auch gestalterisch kein großes Talent haben, sind mit Diensten besser bedient, die professionell gestaltete, fertige Layouts anbieten, die man nur noch minimal anpassen muss – sowas wie Jimdo.

  4. Pingback: Ansprechende Portfolio-Websites und Landingpages per Drag and Drop mit Salon.io erstellen | coolwebworks | Scoop.it

  5. Ist das layout mobil-tauglich(responsive) aufgebaut?

  6. @MarkusWolff Unser vorrangiges Ziel ist es, ein Werkzeug anzubieten, das Leuten hilft, eigenständig, schnell und einfach ihre Inhalte online zu publizieren. Ob diese Inhalte nun schön, grossartig oder subjektiv nicht so toll sind, spielt für uns keine Rolle. Mit Photoshop kann schöne oder häßliche Bilder erstellen, was aber nichts über die Qualität oder die Möglichkeiten des Tools aussagt.
    Das Problem bei template-basierten Systemen ist oft, das man mit den Eigenheiten der Gestaltungsvorlage zu kämpfen hat und dabei von der eigentlichen Aufgabe, der bestmöglichen Darstellung der Inhalte, abgelenkt wird.
    Der Aussage, dass der Grossteil Gestalter auch HTML&CSS beherrscht kann ich aus eigener Erfahrung nur widersprechen.

    @Werner Unsere Layouts sind mobil-tauglich. Nicht “responsive”, dafür aber “fluid”



  7. TheRiddler

    Nett. Auch das “Erklärungsvideo”. Viel Erfolg!



  8. Jan

    Auja! Bitte mehr (und kleine!) Startups mit Ideen und interessanter Technik featuren. Das ist viel spannender als der X. E-Commerce, Couponing, Advertising oder Lieferdienstvermittler-Aufguss!

  9. Also als WordPress-Plugin wäre das wirklich eine sehr feine Sache! Da würde ich an deren Stelle auch etwas Geld zuschießen da dadurch die Anzahl der wirklich aktiven Blogger sicher steigen würde. Ich bin mal gespannt.

  10. Pingback: Forgif.me und 11 andere Websites zum Spaß-Haben :: deutsche-startups.de

Anzeige

Aktuelle Meldungen

Events, Events, EventsWebfuture Award, Interactive Cologne, re:publica

Videointerview“Die Realität sieht oft anders aus – man muss umdisponieren können”

Wo geht es heute hin?Reputami-Ableger Placeguide.de findet die besten Cafes

Gastbeitrag von Christian WiensRichtig versichert als Gründer (unter finanzieller Unsicherheit)