Sparkle

Nach Webflow und Macaw kommt jetzt Sparkle. Sparkle verspricht einem das man ohne Codingkenntnisse Webseiten designen kann und das Sparkle diese auch noch automatisch richtig umsetzt. Ob das auch so gut funktioniert, erfährst du in diesem Review.

Sparkle Sidebar

© 2014 River SRL

Kann Sparkle halten was es verspricht?

Wenn man Sparkle öffnet, wird man von einem Interface begrüßt was dem von Sketch sehr ähnlich ist. Von der Funktionalität soll es aber eher Webflow entsprechen. Die Arbeitsfläche ist bereits mit einem 12er Raster versehen und man hat die Möglichkeiten mehrere Seiten in einem Dokument zu erstellen. Oben in der Toolbar kann man das Raster ändern und hat die Auswahl für verschiedene Arbeitsflächengrößen, entsprechend des Endgerätes (Computer, Tablet oder Smartphone). Das ist also das Responsive-Element, dazu aber später. Weiter rechts hat man die Auswahl zwischen den Elementen Text, Bild, Video, Embed, Box und Wide Box.

Das Textwerkzeug von Sparkle

Sparkle Textwerkzeug

© 2014 River SRL

Wenn man auf das Textwerkzeug klickt, kriegt man einfach eine beliebig große Box mit komischen Gekritzel auf die Arbeitsfläche geschmissen. Ich kann also nicht drauf klicken und dann das Textfenster in der Größe aufziehen, wie ich es brauche. Nachträglich kann ich die Größe aber ändern, aber irgendwie ist das doch recht umständlich gelöst. Das Gekritzel ist auch nicht sehr schön, wenn auch die Idee dahinter nachzuvollziehen ist. Sparkle möchte erstmal mit Wireframes beginnen. Anstelle des Gekrakels würde ich mir aber eher die Verwendung
der Blokk Font wünschen, die extra für Wireframes erstellt wurde. Wenn man nun aber richtigen Text in das Textfenster einfügen möchte muss man erstmal auf den Knopf „Lorem Ipsum“ drücken. Jetzt wandelt sich das Gekrakel in Lorem Ipsum Text um, den man dann endlich durch den richtigen Inhalt ersetzen kann.

Der Workflow des Sparkle-Textwerkzeuges lässt also heftig zu wünschen übrig. Ich möchte von Anfang an die Wahl haben, ob ich ein leeres Textfenster, oder Platzhaltertext auf meine Arbeitsfläche haben möchte und auch die Größe des Fensters möchte ich von Anfang an bestimmen.

Bilder einfügen

Die Bildfunktion von Sparkle ist hingegen sehr gut gelungen. Man kann einen Kasten für das Bild aufziehen und dann ein Bild von der Festplatte importieren. Auch Name und Description kann man sofort anlegen. Die „Fill“ Funktion ersetzt den Gebrauch von lästigen Masken, weil das Bild automatisch die Box füllt und dann überstehende Inhalte versteckt. Man kann auch auswählen ob das Bild links, rechts oder mittig positioniert werden soll. Sogar auf X und Y Achse bezogen. Auch die üblichen Effekte wie Border, Schlagschatten und Deckkraft fehlen nicht und sogar ein kleines Zoomtool und die Möglichkeit Hyperlinks zu erstellen, sind mit eingebaut.

Videos bei Sparkle

Sogar Videos kann man direkt auf der Arbeitsfläche von Sparkle einfügen. Wenn man auf das Video Icon klickt, kriegt man eine Videobox und es öffnet sich ein Fenster indem man YouTube oder Vimeo nach Videos durchsuchen kann, aber auch eine beliebige URL lässt sich einfügen. Finde ich sehr schön gelöst.
Man hat scheinbar auch die Möglichkeit Embed Codes einzufügen, wobei mir die Funktionalität hier nicht wirklich klar ist. Also was kann man alles mit Embed Codes in Sparkle machen? Hier wäre ein kleines Tooltip sehr hilfreich.

Die Boxen

Man hat bei Sparkle die Möglichkeit eine Box oder eine Wide Box zu benutzen. Eine Wide Box ist gewissermaßen eine „Section“ die über die gesamte Arbeitsfläche geht. Also gut für den Header, oder wenn die Seite in mehrere Bereiche unterteilt ist, die untereinander folgen. Die einfache Box ist einfach ein Kasten, den man genauso wie die Wide Box mit einer Farbe und einem Bild versehen kann. Bei der einfachen Box kann man die Eckenabrundung definieren und natürlich auch die üblichen Effekte hinzufügen. Wichtig ist, dass Bilder die hier eingefügt werden, nur als Schmuckelemente zu betrachten sind, denn man kann sie nicht verklinken, oder die Zoomfunktion nutzen. Was allerdings sehr schön ist, ist die Blurfunktion, mit der man über einen Schieberegler das eingefügte Bild blurren kann.

Was bei allen Elementen auffällt ist, dass man nicht die Möglichkeit hat ein Margin oder Padding hinzuzufügen. Das wäre in manchen Situationen sehr hilfreich und würde die Anordnung der Elemente präziser machen, als wenn man alles nur per Hand hin- und herschiebt.

Kann Sparkle auch Responsive Design?

Sparkle Responsive Design

© 2014 River SRL

Ja und nein. Man hat zwar die Möglichkeiten unterschiedliche Größen bzw. Umbruchpunkte für eine Seite zu erstellen, allerdings passiert nichts anderes, als das alles Verkleinert wird. Im Vergleich zu Webflow, wo sich die Elemente untereinander anordnen, wenn in der Horizontalen der Platz zu Eng wird, schrumpft Sparkle einfach alles zusammen. Man muss also ALLE Elemente für jeden Umbruchpunkt neu anordnen, hier findet absolut kein intelligentes Verhalten statt. Sehr schade, denn mittlerweile sollte sowas möglich sein. Wenn man allerdings alles händisch angeordnet hat und es im Vorschaumodus überprüft, kann man sicher sein das es funktioniert. Schön am Vorschaumodus ist auch, dass man direkt in Sparkle auswählen kann, welchen Browser man dafür nutzen möchte.

Für wen ist Sparkle zu empfehlen?

Für Leute die schnell Wireframes machen möchten ist Sparkle eventuell nützlich, da die Lernkurve sehr niedrig ist und fast jeder der schon mal mit Word oder PowerPoint gearbeitet hat, sollte in der Lage sein Sparkle ohne große Einarbeitung nutzen zu können. Auch für Privatanwender die nicht auf ein CMS wie WordPress zurückgreifen wollen, weil sie entweder alles selbst gestalten möchten, oder einfach nur eine statische Webseite brauchen, ist Sparkle eine tolle Anwendung. Professionellen Designern kann ich allerdings nur abraten und empfehle die Verwendung von professionellen Programmen wie z.B. Webflow.

Sparkle kostet 69,99€ und ist für Mac OS X 10.9 Mavericks verfügbar.

[button color=“red“ size=“big“ alignment=“none“ rel=“follow“ openin=“newwindow“ url=“http://sparkle.cx/“]Jetzt zur Sparkle Website[/button]

 

 

Chris

UX Design Freelancer aus Berlin. Nie müde Projekte und Experimente nebenher zu betreiben. Ehemann, Vater und überzeugter Pflanzenfresser.