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 Webdesign

Eines der wichtigsten Begriffe, die uns im Bereich Webdesign dieses und nächstes Jahr begleiten wird ist „Responsive Webdesign“. Mit dem Einzug des Smartphones und des Tablett-PCs in den Alltag der User wird die Anforderungen an zukünftiges Webdesign und Website-Entwicklung die sein, dass sich die Inhalte einer Website an die Gegebenheiten der Endgeräte automatisch anpassen. Die Seiten sollten jederzeit benutzbar sein, egal ob Smartphone oder 27″ Monitor. Responsive Webdesign sagt dabei nichts anderes aus als reaktionsfähiges Webdesign.

Durch den Einzug von HTML5, CSS3 und JavaScript ist man in der Website-Entwicklung nun in der Lage, der Website eine gewisse Intelligenz mitzugeben. Dies hat aber nichts damit zu tun, dass die Zeilenbreite an den Monitor angepasst wird, so wie es vor knapp zehn Jahren gehandhabt wurde. Moderne Grid-Systeme wie das 960° Grid ermöglichen der Website auf Basis der Monitorauflösung und der Browsergröße unterschiedliche Layouts anzuzeigen. So kann zum Beispiel eine Internetseite auf dem Smartphone in einer Spalte untereinander angeordnet sein und auf einem Tablett-PC ist dieselbe Seite mit vier Spalten aufgebaut. Dabei kann sich die Darstellung der jeweiligen Spalten zur Monitorauflösung noch unterscheiden. Die Entwicklung geht hier soweit, dass Sie beim Verändern der Browsergröße das Layout der Seite neu anordnet. Auch die Schriftgröße kann sich hierbei wiederum der Auflösung anpassen.

Die modernen Grid-Systeme ähneln in Ihrer Darstellung und Umsetzung teilweise einem Raster-System wie wir diese aus dem klassischen Print-Bereich kennen. Die Anordnung der Inhalte wird hierbei starr nach einem festen Raster vollzogen.

Eine gut und sauber geplante Website kann nun im Kern über ein CMS-System wie zum Beispiel TYPO3 gepflegt und verwaltet werden. Die Programmierung auf einem modernen Grid-System ermöglicht die flexibelste Darstellung der Seite auf vielen Endgeräten. Selbst eine Web-App könnte hier noch in einer Entwicklung abgedeckt werden.

Technologien wie jQuery unterstützen und vereinfachen durch Ihre fertigen Bibliotheken die Programmierung erheblich.

Über die neuen Möglichkeiten in der Programmierung können zukünftig mit einer Website verschiedene Auflösungen abgebildet werden. Früher wären es unterschiedlichste Templates mit unterschiedlichsten Layouts gewesen. Was dies in der Betreuung und Pflege im Vergleich zu flexiblen Layouts bedeutet, steht in keinem Verhältnis.

Beispiele Responsive Website
http://isotope.metafizzy.co/

Beispiele Grid-Systeme und Frameworks
http://www.designinfluences.com/fluid960gs/
http://960.gs/
http://www.blueprintcss.org/
http://www.yaml.de/
http://bluetrip.org/
https://developer.yahoo.com/yui/grids/
http://csswizardry.com/inuitcss/

Hilfetool
http://gridr.atomeye.com/
http://grids.heroku.com/
http://www.gridsystemgenerator.com/
http://www.1kbgrid.com/
http://developer.yahoo.com/yui/grids/builder/
http://www.designbygrid.com/tools

Firefox Grid-Xtension
http://www.puidokas.com/portfolio/gridfox/

Technologien
http://jquery.com/
http://jqueryui.com/themeroller/