Web- und Screendesigns effizient gestalten mit Sketch

Die Konzeption einer Website oder deren Relaunch geht einher mit der Entwicklung und Erstellung von Screendesigns. Auf Basis dieser Screendesigns leitet der Webentwickler die Templates für die Umsetzung der Website ab. Innerhalb des Responsive Webdesigns können hierzu eine Vielzahl von Screendesigns für die unterschiedlichen Viewports anfallen. Je nach Umfang und Anforderung können diese Screens für Desktop, Tablet und Smartphone sein. Dabei gilt es sowohl den Landscape- sowie Portraitmodus ebenfalls zu berücksichtigen – wobei diese lediglich die Auswertung des Seitenverhältnisses des Browserfensters darstellt und nicht die Abhängigkeit des Devices darstellt.

Responsive Webdesign benötigt viele Screens

Gerade diese Vielzahl an notwendigen Screens sind zeitintensiv zu erstellen und wurden bisher in den zeroseven design studios in Adobe Photoshop realisiert. Um bei Screendesigns, insbesondere für die mobilen Ansichten effizienter und schneller zu werden, waren wir auf der Suche nach einem Tool, um das Webdesign einfacher zu gestalten, ohne dabei Abstriche im Design und der Handhabung machen zu müssen. Adobe Photoshop bietet zahlreiche Werkzeuge sowie Effekte und ist eigentlich in der Bildbearbeitung führend, jedoch für die Anforderungen eines modernen Webdesigns nur bedingt optimal einsetzbar.

Unsere Praktikantin Amelie Chupin kam während ihres Studiums an der Hochschule für Gestaltung Schwäbisch Gmünd mit verschiedenen Tools für das UI Design in Berührung, unter anderem mit Sketch, was den Anlass bot, das Programm als Alternative zu den Adobe Programmen zu testen.

Sketch im Test bei der Erstellung von Screendesigns

Sketch ist ein vektorbasiertes Programm, dass sich auf digitale Medien spezialisiert hat. Es eignet sich daher, ebenfalls pixelbasierte Projekte zu gestalten. Hierfür kann man zwischen Vektor und Pixeldarstellung umschalten.

Sketch ähnelt dem Grundaufbau von Adobe und ist damit sehr intuitiv bedienbar. Alle Grundwerkzeuge, die es in Adobe gibt, sind auch in Sketch enthalten. Die Logik, mit verschiedenen Ebenen zu arbeiten, ist ebenfalls vorhanden. Demzufolge kann man nach einer kurzen Kennenlernphase schnelle und ansprechende Ergebnisse erzielen.Durch viele Voreinstellungen und Templates wird das Suchen nach dem richtigen Format und dem passenden Grid gespart, sodass man direkt in der richtigen Auflösung loslegen kann.

Sketch iOS UI Design Templates
Sketch iOS UI Design Templates

Voreingestellte Artboards (entsprechen den Zeichenflächen in Illustrator) umfassen unter anderem die Größen von Desktop HD, Desktop, Tablet und Mobile und lassen sich beliebig erweitern.

Artboards
Voreingestellte Artboards für die Bildschirmgrößen Desktop HD, Desktop, Tablet und Smartphone

Ein weiterer Vorteil in Sketch ist das Erstellen von Symbolen. Beispielsweise lässt sich so eine Navigation, die auf jedem Screen auftritt, einmal erstellen und beliebig oft auf unterschiedlichen Artboards einfügen. Wird die Navigation im Nachhinein verändert, reicht es, das Symbol zu ändern. Alle Symbole werden dann auf den Artboards aktualisiert. 
Es gibt außerdem schon einige iOS Symbole in Sketch, wie zum Beispiel unterschiedliche Keyboards, Status Bars, Alert Views und vieles mehr, die die Arbeitszeit verringern und es ermöglichen realistische Screens zu erstellen.

Die gängigsten Stile (Transparenz, Schatten, Füllung, Weichzeichner) werden übersichtlich rechts angezeigt, um alle Elemente schnell zu bearbeiten.

Gängigste Stile wie Transparenz, Schatten, Füllung und Weichzeichner

Des Weiteren lassen sich durch die App „Sketch Mirror“ die Artboards direkt auf dem Smartphone anzeigen und testen. Dadurch erübrigt sich, mühsames verschicken von Screens.

Sketch Mirror App

Die Artboards sind ebenfalls über den Browser abrufbar und werden wie in der App live aktualisiert.

Die Exportoptionen ermöglichen es, unterschiedliche Formate, Größen und Qualitäten in einem Arbeitsschritt zu exportieren.


Durch Plugins lässt sich Sketch noch weiter optimieren. Das Craft Plugin von Invision zum Beispiel, umfasst unterschiedliche Tools, die sowohl alleine als auch im Team Vorteile bieten. Zum einen kann man mit Craft verschiedenen Content generieren, seien es Fotos, Namen oder Daten. Sketch lässt sich dabei mit einer Stock Plattform, Dropbox oder lokalen Ordnern verbinden. Auch lässt sich der gesamte Content einer Website in die Gestaltung integrieren.
Durch Sync lassen sich Farbschemen, Textformate und Buttons konzipieren, die dann allen Designs des Teams zur Verfügung stehen.
Ein Nachteil von Sketch ist, dass bei größeren Dateien die Performance leidet und die Software nicht mehr flüssig läuft. Außerdem stellt sich einfaches Maskieren als umständlich dar.

Test-Fazit

Abschließend können wir folgendes Fazit ziehen: Sketch ist bestens für Web- und App-Design geeignet. Übersichtliche Darstellung und einfache Werkzeuge ermöglichen es, schnelle Konzepte und Screendesigns zu erstellen. Plugins erweitern das Tool um einige Funktionen und bilden so im Wesentlichen einen Mehrwert beim Generieren von Content und der Zusammenarbeit im Team. Im Bereich des Webdesigns lässt sich Photoshop vollkommen mit Sketch ersetzen, jedoch wird das Tool die umfassenden Möglichkeiten der Bildbearbeitung von Adobe Photoshop nicht erreichen.

Responsive und Retina-optimieriert Bilder in TYPO3

Bilder und responsive Webdesign sind nur schwer zu vereinen.
Während das Frontend in relativen Prozent-Angaben und Breakpoints arbeitet, bleiben Bilder zwangsläufig in Form von einzelnen Pixeln erhalten.

Die <picture>-Tag-Lösung hat unter Webentwicklern zwischenzeitlich eine hohe Beliebtheit gefunden und wird von vielen Browsers bereits nativ unterstützt.
Ältere Browser können über Polyfills versorgt werden.

Während aus technischer Sicht die Lösung steht, fängt für den Redakteur der Website das Problem gerade einmal an.

Anforderungen:

Ein Bild-Set für hochauflösende und Pagespeed-optimierte Darstellung von Grafiken verlangt unter Umständen folgendes:

  • Ein Bild pro Viewport für „normale“ Displays.
  • Ein Bild pro Viewport für Retina-Displays.
  • Eine Fallback-Grafik für ältere Browser.
  • Eventuell eine vergrößerte Grafik für die Lightbox-Funktion.

Für den Redakteur bedeutet dies schnell mal bis zu 14 einzelne Bilder in unterschiedlichen Größen zu erstellen, auf den Server zu laden und zu verknüpfen.

html picture-tag

Unser Tribut an alle Mobile-User mit geringer Bandbreite und Retina-Displays

Mit dem neuen fluid-basierten Content-Elemente-Rendering in der jüngsten Version von TYPO3 haben wir eine Lösung ausgearbeitet, welche es erlaubt mit nur einer Grafik die gewünschten Bild-Größen einzelner Viewports im Backend einfach auszuwählen.
Der Rest läuft nun ganz automatisch ab!

Ihre Grafik wird mit einem Klick auf allen Viewports in die optimale Größe gebracht.
Die Möglichkeit den Bildausschnitt über die Crop-Funktion zu wählen bleibt dabei selbstverständlich erhalten.

Keine Lust mehr darauf alle Fotos manuell mit Photoshop auf die richtige Größe zu bringen?
Wir auch nicht!

mask image online
Bild-Ausschnitt wählen

Google optimiert seinen Algorithmus zu Gunsten von mobilen Websites

Google hat zum 21. April ein Algorithmus-Update angekündigt, welches die Mobile-Freundlichkeit der Website als Ranking-Faktor aufnimmt. Google möchte zukünftig seinen Usern für deren Endgeräte noch besseren Content anbieten. Das bedeutet, ist ein User mit dem Smart-Phone auf der Google-Suchseite und gibt einen Begriff ein, so kommen dann die Suchergebnisse, die für die Voraussetzung des Users – also mobiles Endgerät – am besten sind. Google möchte seinen Usern relevante, Google optimiert seinen Algorithmus zu Gunsten von mobilen Websites weiterlesen

Relaunch Website der zeroseven design studios

Ein Relaunch der Website einer kreativen Agentur stellt immer eine ganz besondere Herausforderung dar. Auf der einen Seite sollte die Website am besten alle technischen Möglichkeiten ausschöpfen und darüber hinaus Grafisch möglichst eine Vorreiter-Rolle spielen. Und umgesetzt werden sollte sie am besten auch noch. Relaunch Website der zeroseven design studios weiterlesen