Du hast deinen AdBlocker an?

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

Gadgets & Lifestyle

Frontify: Die „Web-Specification-Engine“

Frontify Styleguide

Frontify will die Zusammenarbeit zwischen Entwicklern und Designern entscheidend verbessern. Wir verraten dir, wie die Köpfe hinter Frontify diese Brücke schlagen wollen und was der Webdienst bietet.

Du bist Programmierer und hast schon mal mit einem Designer zusammengearbeitet? Dann hast du bestimmt auch die üblichen Probleme kennengelernt, beispielsweise die komplizierte Kommunikation beim Review-Prozess. Ist das schließlich geklärt und das Design steht, geht es an die Entwicklung. Aber welche Farben sind doch gleich die richtigen? Und was für eine Schriftart ist das bitte im Logo?

All diese Probleme sollen mit Frontify der Vergangenheit angehören. Das Tool will eine Brücke zwischen Designern und Codern schlagen und die Zusammenarbeit zwischen beiden mit einer Reihe von Tools optimieren.

Frontify: Die „Web-Specification-Engine“

Mit Frontify kannst du interaktiv und in Kooperation mit anderen Team-Mitgliedern Designs spezifizieren. Unterteil dein Projekt bequem in verschiedene Ansichten und lass Frontify einen individuellen Styleguide auf Basis deiner Entwürfe erstellen. Ziel des Ganzen ist dabei nicht nur eine vereinfachte Zusammenarbeit in der Layout-Phase, sondern auch die eine einfache Umsetzung und Dokumentation.

Alles beginnt mit deinem Design. Lade deine Mockups und Reinzeichnungen über Drag-and-Drop in ein Frontify Projekt oder nutze die bequeme Capturing-Funktion, um Screenshots von Webseiten anfertigen zu lassen. Du entscheidest dabei, mit wem du Entwürfe teilst und mit wem nicht.

Frontify Layout Übersicht
Frontify: Die Layout-Übersicht. (Screenshot: Frontify)

Für jedes Layout steht ein Toolset zur Verfügung. Hinterlass Kommentare direkt in deinem Screenshots, führ Abmessungen mit dem präzisen Auswahlwerkzeug durch oder leg ein Grid für dein Design an.

Mit dem Color-Tab lassen sich Farben per Klick in den Screenshots definieren, auslesen und übersichtlich zusammenfassen. Auch für die Dokumentation von Schriften stellt Frontify ein Tool zur Verfügung. Nutzer können Name und CSS-Eigenschaften definieren, die später automatisch in den Styleguide exportiert werden können.

Frontify Colorpicker
Der Frontify-Colorpicker. (Screenshot: Frontify)

Mit dem Modul-Werkzeug kannst du Seitenbereiche als Module definieren. Neben einer Beschreibung kann eine CSS-Klasse und ein Link zu einer Live-Version des Bausteins hinterlegt werden, dessen Code anschließend automatisch in den Styleguide übernommen wird.

Für eine interaktive Präsentation oder schnellere Navigation innerhalb der Frontify-Projekte lassen sich Verknüpfungen zwischen einzelnen Layouts herstellen und über die Share-Funktion mit den Kollegen teilen, alternativ hast du sogar die Möglichkeit, Bestandteile als Embed-Code in einer Webseite zu integrieren.

Frontify: „Styleguide is king“

Frontify Styleguide
Der Frontify-Styleguide. (Screenshot: Frontify)

Ist die Bearbeitung der Layout-Dateien abgeschlossen, generiert Frontify vollautomatisch einen Styleguide, an dem sich sowohl Designer als auch Coder orientieren können. Neben der Zusammenstellung einzelner Screens stellt der Styleguide übersichtlich die Projektfarben,  das verwendete Grid, Informationen zur Typografie und den Modulen zusammen. Jeder Projektbestandteil lässt sich bequem exportieren. So stehen Farben zum Beispiel nicht nur als Hexadezimalwerte zur Verfügung, sondern können als Photoshop-Swatches exportiert und so sehr schnell für den Produktiveinsatz genutzt werden.

Die Zukunft von Frontify

Für die Zukunft hat das Team hinter Frontify große Pläne. Für eine bessere Planung von mobilem Support sollen Designs mit verschiedenen Breakpoints angelegt werden können und zusätzliche Werkzeuge für die Spezifikation von Responsive Designs geschaffen werden. Durch Kombination mit weiteren Tools wie Jira und Confluence soll Frontify noch tiefer in die Entwicklung integriert werden können. Auch eine Verbindung mit Dropbox oder Github soll in Zukunft realisiert werden können, sodass eine Versionskontrolle für Designs möglich sein wird.

Frontify steht kostenlos für einen Benutzer mit einem Projekt und zehn Megabyte Speicher bereit. Für mehr Projekte oder Team-Mitglieder sowie Speicherplatz werden mindestens 19 US-Dollar fällig. Auf der Webseite von Frontify kannst du dir selbst ein Bild von dem Funktionsumfang des Tools machen und.

Was hältst du von Frontify? Wirst du den Webdienst für deine Projekte nutzen?

Finde einen Job, den du liebst

Bitte beachte unsere Community-Richtlinien

10 Reaktionen
tiptronic

@rogerdudler: Achja... die Limitierung der Projekte auf ein gewisses Kontingent (um beispielsweise ein günstigeres Abo anzubieten) halte ich für sub-optimal. Oft erstelle ich für ein und dasselbe Projekt unterschiedliche Design-Varianten, die dann jeweils als eigenständiges Projekt laufen würden...

Und eine Sache noch: Export/Import eines Projekts fände ich super!

Antworten
tiptronic

@rogerdudler: Erstmal - nur damit wir uns nicht falsch verstehen - ich finde Dein Frontify super! Gute Idee und sauber umgesetzt. Würde/werde ich auf jeden Fall ausprobieren.

Wegen Preis:
Nunja, MEINE Standard-Situation ist diese (und ich denke, ich bin da nicht der Einzige, der so arbeitet): Ich (1 Mann) entwickle ein mobiles UI (oder ein WebUI, oder whatever). Anschließend kümmere ich mich um die Software-Entwicklung (oder um andere Projekte). Während dieser Zeit (üblicherweise mehrere Wochen, wenn nicht gar Monate) wird der Dienst nicht verwendet, die Subskription läuft weiter. Diese Kosten muss ich einkalkulieren und weiter erwirtschaften. Oder ich kündige das Abo nach jedem Projekt - was ich mir einigermaßen lästig vorstelle.

Unterm Strich bleibt also: entweder stetiges abonnieren/kündigen, oder man ließe das Abo laufen, was mir bei 19$/mt eindeutig zu teuer wäre.

Ein Alternativ-Abo mit 5-10$/mt wäre ein no-brainer, denke ich.

Genauer kann ich Dir's auch nicht sagen - wäre aber offen, zumal ich solche gut gemachten Dienste gerne unterstütze (und natürlich auch nutze)

Antworten
rogerdudler

@Andy Fuchs: Was wäre denn für dich ein angemessener Preis? (für welche Benutzeranzahl?)

Antworten
rogerdudler

@Artur: Die Meinung unserer User ist uns wichtig, wir werden die Gestaltung des Personal Plans aufgrund von diversen Feedbacks überdenken und gegebenfalls anpassen. Besten Dank für dein Feedback.

Antworten
rogerdudler

@tiptronic: Es gibt zusätzlich zur Free Version auch Trials für die entsprechenden Preispläne, was einem erlaubt alle Funktionen für 30 Tage kostenlos zu testen.

Antworten
rogerdudler

@Peter Huanes: Wir bieten auch eine Self-Hosted Lösung an, die für solche Fälle genau das Richtige ist. Desweiteren gibt es eine Embeddingfunktion, mit der du Screens direkt ins Confluence oder Jira einbetten kannst. Gerne kannst du dich bei mir melden, wenn du weitere Infos benötigst. Mail: roger@frontify.com

Antworten
Peter Huanes

Genau sowas suche ich auch, aber als Plugin für Atlassian Software! Wir bearbeiten in unserer Agentur viele Projekte, die aufgrund von NDAs nicht auf fremden Servern gehostet werden dürfen. Ich denke da wird es nicht nur mir so gehen. Sonst tolle Arbeit, weiter so!

Antworten
tiptronic

Kleiner Nachtrag: Den 'free' Account kann man NICHT zum Ausprobieren verwenden! Will man Touch-Gesten ausprobieren, erhält man erstmal einen 'Upgrade'-Nag :( #fail

Antworten
Andy Fuchs

Schöne Idee, leider viel zu teuer.

Antworten
Artur

Danke für den Artikel! Genau das habe ich gerade gebraucht. Habe mir die "Team-Version" testweise geholt.

Großer Vorteil: die Trial-Phase von 30 Tagen für egal welches Paket ist unverbindlich und ohne Angabe von Kreditkarte und co im Vorfeld.

Schade finde ich, dass die Personal-Variante nur 1 Author zulässt. Dadurch ist man mehr oder weniger gezwungen die Team-Variante für 49$/Monat zu abonnieren, um vernünftigt damit arbeiten zu können.

Bin sehr auf die Weiterentwicklung gespannt! Alternative tools mit dem Umfang gibt es nicht oder?

Antworten

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