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.

Ein Rückblick zum ADC Kongress 2015

Vom 19.-22. Mai 2015 veranstaltete der Art Directors Club für Deutschland e.V. (ADC) sein alljährliches Treffen der Kreativen in Hamburg. Das zeroseven Designteam sammelte beim hochkarätig besetzten ADC Kongress viele Inspirationen zum Thema „Creating the Digital Hype“.

Im Reeperbahn Club Schmidt’s Tivoli referierten internationale Branchengrößen wie Kevin Alloca von YouTube, Rob Newlan von Facebook Creative Shop und Iain Tait von Wieden + Kennedy über die Herausforderungen und Trends der digitalen Welt. Was kann ich von YouTube-Stars lernen und für die Markenkommunikation produktiv einsetzen? Wie differenziere ich meine Online-Kampagne vom Wettbewerb? Und mit welchem Content generiere ich die Aufmerksamkeit meiner Zielgruppe?

Antworten gaben die Referenten vor allem anhand erfolgreicher Cases. Andy Azula hatte seine „Unskippable Ads“ für das amerikanische Versicherungsunternehmen GEICO im Gepäck. Mit einer einfachen, aber genialen Idee entwickelte sein Kreativteam eine Reihe von Pre-Roll Spots, die innerhalb von 5 Sekunden die zentrale Werbebotschaft vermitteln – also in der Zeit, in der die Videos nicht übersprungen werden können. Gleichzeitig machen die Spots neugierig darauf weiterzuschauen und gelten deshalb als aktuelles Best Practice Beispiel für YouTube-Werbung.
Zum Video

Rob Newlan stellte als besonders kreative und innovative Facebook-Kampagne die Kronkiwongi-Videos von LEGO vor. Dabei handelt es sich um kurze Clips, in denen Kinder eine Figur aus LEGO-Steinen bauen, die sie sich unter dem Fantasienamen Kronkiwongi vorstellen. Der abschließende Appell „Build your #Kronkiwongi“ fordert Facebook-User dazu auf, Bilder und Videos mit Interpretationen eigener Kronkiwongis bzw. die ihrer Kinder zu posten. Damit löste LEGO, in Zusammenarbeit mit Facebook Creative Shop, eine riesige Welle von User-generated content aus, welcher heute als eines der wirksamsten Werbemittel im Web gilt.
Zum Video

Mit Sweetie präsentierte Mark Woerde ein Projekt, welches sich weitab von den anderen, in erster Linie werblichen Themen bewegte. Mit seiner Agentur Lemz entwickelte er für Terre des Hommes Netherlands eine Kampagne gegen Kinderprostitution im Web. Durch modernste 3D-Technologie wurde ein philippinisch aussehendes, täuschend echtes Mädchen geschaffen, welches online unter dem Pseudonym Sweetie auftrat und von zahllosen Pädophilen per Webcam missbraucht wurde. Mit dieser Aktion generierte Lemz nicht nur weltweit Aufmerksamkeit für das weitgehend unbekannte Problem, sondern überführte in wenigen Wochen über 1000 Täter.
Zum Video

Ein spannender Tag mit viel Input ging für uns wie im Flug vorbei. Einige Vorträge behandelten leider Themen, die für die Branche nicht neu waren oder deren Aussage schwierig auf den Alltag von Kreativen übertragbar war. Zusammenfassend lässt sich aber sagen, dass uns vor allem die Redner, die hier kurz vorgestellt wurden, wirklich begeistert haben! Auch die dazugehörige Ausstellung im Millerntor-Stadion war ein genialer Ideengeber.

ADC-Kongress-2015_02

ADC-Kongress-2015_03

ADC-Kongress-2015_04

ADC-Kongress-2015_05

ADC-Kongress-2015_06

ADC-Kongress-2015_07

ADC-Kongress-2015_08

ADC-Kongress-2015_09

ADC-Kongress-2015_10

ADC-Kongress-2015_11

ADC-Kongress-2015_12

Dynamische Text-Farbe, abhängig vom Hintergrund mit SASS.

Ein Beispiel:

Über CSS sollen Statusmeldungen oder Buttons auf Ihrer Website in vier unterschiedliche Layouts erstellt werden. Diese erhalten jeweils eine unterschiedliche Hintergrund-Farbe:

  • Success: #CBFC90 (Grün)
  • Info: #2EB9CC (Blau)
  • Warning: #FCFA90 (Gelb)
  • Danger: #CC532E (Rot)

Nun stellt sich nur noch die Frage nach der Text-Farbe innerhalb der Box: Hell oder Dunkel? Schwarz oder Weiß?

Mit Hilfe von SASS können Sie diese Entscheidung getrost der lightness()-Funktion überlassen. Diese berechnet über den RGB-Durchschnittswert die Helligkeit in einem Wert zwischen 0 – 100. Je höher die Zahl, desto heller die Farbe.

Um einen guten Kontrast zu gewährleisten wird dank einer kleinen Funktion in SASS der Text dunkel, wenn die Hintergrund-Farbe heller ist als 50%. Bei dunkleren Farben wie zum Beispiel Blau, wird der Text weiß gefärbt.

Die Hintergrund-Farben der Statusmeldungen oder Buttons können nun jeder Zeit angepasst werden. Ihre kleine und smarte Lösung kümmert sich um den Rest:

SASS

// FUNKTION ZUR BERECHNUNG DER TEXT-FARBE
@function setColorByBackground($backgroundColor) {
    @if (lightness($backgroundColor) > 50) {
      @return #000000;
    }
    @else {
      @return #FFFFFF;
    }
}

$success-color: #CBFC90;
$info-color: #2EB9CC;
$warning-color: #FCFA90;
$danger-color: #CC532E;

.infobox-success {
	padding: 20px;
	margin: 20px;
	font-size: 1em;
	background: $success-color;
	color: setColorByBackground($success-color);
}
.infobox-info {
	@extend .infobox-success;
	background: $info-color;
	color: setColorByBackground($info-color);
}
.infobox-warning {
	@extend .infobox-success;
	background: $warning-color;
	color: setColorByBackground($warning-color);
}
.infobox-danger {
	@extend .infobox-success;
	background: $danger-color;
	color: setColorByBackground($danger-color);
}

HTML

<div class="infobox-success">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>
<div class="infobox-info">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>
<div class="infobox-warning">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>
<div class="infobox-danger">Lorem ipsum dolor sit amet, consetetur sadipscing elitr</div>

HTML kann ganz schön schräg sein.

Wie bekommt man schräge Flächen in HTML und CSS?

Beinahe alle Websites haben eines gemeinsam: Klare, rechteckige Formen.
Allerdings gibt es tolle Möglichkeiten sich mit schrägen Flächen und Kanten und Trapez- oder Skew-Effekten und Dreiecken abzuheben.

Dazu sind keine Bildgrafiken nötig, sondern man kann mit den richtigen Methoden das Ganze direkt über CSS und HTML lösen. Der Vorteil: Größen und Farben lassen sich leicht und schnell verändern, Unterstützung von Retina-Displays und geringere Ladezeiten.

HTML kann ganz schön schräg sein. weiterlesen

Wenn einer eine Reise tut …

Wenn einer eine Reise tut, dann kann er was erzählen. Diese Weisheit trifft sicherlich in vielen Fällen zu. Wenn wir Kreative reisen, nehmen wir immer möglichst viele Inspirationen mit. Kaum eine andere Stadt wie New York bietet hier so viele Möglichkeiten sich inspirieren zu lassen. Egal ob Typografie, Grafik Design oder Architektur. New York bietet in diesen Bereichen alles. Wenn einer eine Reise tut … 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

Responsive Webdesign (RWD) am Beispiel der Website der zeroseven design studios

Was bedeutet eigentlich Responsive Webdesign (kurz: RWD genannt) und welche Grundlagen sind für die Entscheidung, ob eine Seite Responsive Webdesign unterstützen soll oder nicht, erforderlich? Mit Responsive Webdesign ist das ansprechbare oder auch reaktionsfähige Webdesign gemeint. Responsive Webdesign (RWD) am Beispiel der Website der zeroseven design studios weiterlesen

Augmented Reality

Unter dem Begriff Augmented Reality können sich die wenigsten etwas vorstellen. Wikipedia beschreibt Augmented Reality als „Wird als erweiterte Realität der visuellen Darstellung von Informationen verstanden, also die Ergänzung von Bildern oder Videos mit computergenerierten Zusatzinformationen oder virtuellen Objekten mittels Einblendung/Überlagerung.“. Augmented Reality weiterlesen

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/

Leuchtschrift Reklame Tutorial

In diesem Tutorial werde ich euch zeigen wie man nur durch Ebenenstile einen überzeugenden Leuchtschrift-Effekt erzielen kann. Solltet Ihr Fragen zu einem der gezeigten Schritte haben – zögert nicht und schreibt uns.

Dann starten wir mal mit dem Tutorial | Schwierigkeitsstufe: mittel

Hier der Link zum verwendeten Font