Cyber Monday Sale 40% off unlimited courses & creative assets! 40% off unlimited assets! Save Now
Advertisement
  1. Web Design
  2. Sketch

Entwerfen eines von VSCO inspirierten Webjournals in Sketch

by
Read Time:12 minsLanguages:

German (Deutsch) translation by Władysław Łucyszyn (you can also view the original English article)

Final product imageFinal product imageFinal product image
What You'll Be Creating

In diesem Tutorial werde ich Ihnen zeigen, wie Sie eine einfache und anspruchsvolle Webjournal-Anwendung in Sketch für Mobilgeräte und Desktops entwerfen. Wir werden die VSCO-Ästhetik als Inspiration verwenden. Am Ende dieses Tutorials werden Sie auf viele der wichtigsten Funktionen von Sketch aufmerksam.

Neben diesen anwendungsspezifischen Fähigkeiten erhalten Sie mithilfe einer modularen Skala auch ein tieferes Verständnis für das Festlegen von Schriftarten und Layouts. Wir werden einige grundlegende und mittlere Techniken in Sketch verwenden. Lass uns anfangen!

Tutorial Assets

Sie benötigen die folgenden Assets, um mitzumachen:

Kurzer Haftungsausschluss

Bevor wir Sketch öffnen und ein neues Dokument erstellen, möchte ich darauf hinweisen, dass dieses Konzept vollständig theoretisch ist. Es würde eine viel tiefere Marktanalyse erfordern, bevor wir daraus ein echtes, brauchbares Produkt machen könnten. Ich war schon immer begeistert vom Online-Storytelling mit wunderschönen Fotos. Deshalb habe ich dieses Konzept entwickelt, um Ihnen beizubringen, wie Sie Webtrends aus der Sicht eines Designers verfolgen können.

Typografie

Wenn ich ein Projekt starte, beginne ich immer mit Typografie, weil ich fest davon überzeugt bin, dass Typografie das wichtigste Werkzeug für Kommunikationsdesigner ist.

Für den Text und größere Titel habe ich Merriweather gewählt, eine Serifenschrift, die von Buchgesichtern im alten Stil inspiriert ist und sich gut zum Erzählen von Geschichten und Reisen eignet. Auf hochauflösenden Displays vermittelt es das Gefühl eines echten, gedruckten Journals.

Auf der anderen Seite wollte ich für gängige UI-Elemente wie Schaltflächen und Beschriftungen etwas Modernes, also entschied ich mich für Montserrat, eine saubere und einfache serifenlose Schriftart.

Einrichten der Zeichenflächen

Zunächst möchte ich etwas mehr darüber schreiben, wie ich mit meinen Layout- und Typografieeinstellungen umgehe. Tim Brown, Type Manager für Adobe Typekit, hat ein fantastisches Tool namens Modular Scale erstellt. Dieses Tool ist großartig: Nachdem wir unsere ideale Textgröße definiert und eine wichtige Zahl vorgeschlagen haben, werden diese Zahlen durch einen mathematisch vertrauten Wert wie den Goldenen Schnitt oder den perfekten fünften geteilt und multipliziert. In einem Moment, in dem wir unsere typografische Hierarchie und die Grundelemente unseres Layouts einrichten, werde ich immer auf diese Zahlen zurückgreifen.

Hinweis: Natürlich müssen wir in einigen Fällen gegen diese Regel verstoßen, aber sie bietet uns ein natürliches Gleichgewicht innerhalb unseres Layouts und unserer Typografie, das für das Auge angenehm ist.

Ich habe die ideale Textgröße auf 18 Pixel eingestellt und 670 Pixel als wichtige Zahl definiert, da dies die tatsächliche, nutzbare Breite unseres mobilen Layouts ist.

Schritt 1

Nachdem wir Sketch geöffnet haben, wählen wir im Menü Einfügen die Option Zeichenfläche (A).

Setting up the artboardsSetting up the artboardsSetting up the artboards

Für unsere mobile Ansicht empfehle ich die Auswahl der iPhone 6-Abmessungen. Wenn Sie jedoch ein anderes iPhone-Modell haben, ist es besser, dieses auszuwählen. Die Verwendung von Sketch hat den großen Vorteil, dass Sie Ihre Arbeit mit Sketch Mirror in Echtzeit auf Ihr iOS-Gerät spiegeln können, ohne Bilder exportieren oder übertragen zu müssen. Der Spiegel ist ein wesentlicher Bestandteil meines Design-Workflows, da ich damit sofort das Endergebnis meiner Arbeit in der Hand sehen kann.

Um diese Funktion zu aktivieren, benötigen Sie die Sketch Mirror-App aus dem App Store. Klicken Sie dann in Sketch auf das Spiegel-Symbol (stellen Sie sicher, dass sich Ihre Geräte im selben Netzwerk befinden oder über ein USB-Kabel verbunden sind).

Use Sketch MirrorUse Sketch MirrorUse Sketch Mirror

Für die Desktop-Ansicht habe ich die Desktop HD-Leinwand mit einer Breite von 1440 Pixel ausgewählt.

Desktop HD artboardDesktop HD artboardDesktop HD artboard

Tipp: Später können wir die Höhe unserer Zeichenfläche ändern, indem wir die Zahlen auf dem Inspektorfeld ändern.

How to modify the artboard heightHow to modify the artboard heightHow to modify the artboard height

Schritt 2

Nachdem wir die richtigen Zeichenflächen gefunden haben, ist es an der Zeit, einige Hilfslinien festzulegen, damit unser Layout genügend Platz bietet und ausgewogen aussieht. Um die Lineale und die grundlegenden Hilfslinien einzuschalten, gehen Sie zu Ansicht > Lineale anzeigen (⌃R). Wählen Sie dann die Mitte unserer mobilen Leinwand aus, die 375 Pixel groß sein wird, und markieren Sie auch die ersten und letzten 40 Pixel, damit sie mit einer horizontalen 40 Pixel-Polsterung funktioniert.

Um eine Richtlinie zu erstellen, klicken Sie auf das Lineal bei 40px, 375px und 710px Punkten.

Basic guidelinesBasic guidelinesBasic guidelines

In der Desktop-Ansicht haben wir außerdem eine mittlere Hilfslinie (720px) und eine 100px-Polsterung festgelegt.

Guidelines for desktopGuidelines for desktopGuidelines for desktop

Erstellen des oberen Navigationsbereichs

Hinweis: Wenn Sie ein realistisches Modell mit einer originalen Safari-Menüleiste erstellen möchten, können Sie entweder einen Screenshot erstellen und in das zugeschnittene Bild einfügen oder die vom(ehemaligen) Teehan erstellte iPhone 6-GUI-Vorlage (iOS 8) herunterladen + Laxes Team.

Sketch iOS UI Design TemplateSketch iOS UI Design TemplateSketch iOS UI Design Template

Tipp: Es ist gut zu wissen, dass Sketch auch über eine integrierte iOS-Vorlage verfügt, die Sie unter Datei > Neu aus Vorlage > iOS-UI-Design finden.

Schritt 1

Um unsere obere Navigationsleiste zu erstellen, wählen Sie das Rechteck-Werkzeug (R) aus.

Retangle toolRetangle toolRetangle tool

Tipp: Ich empfehle Ihnen wirklich, die wichtigsten Verknüpfungen zu lernen, da sie einfach zu verwenden sind. In den meisten Fällen ist die Tastenkombination der erste Buchstabe unseres Werkzeugs. Bei Rechteck ist es R, bei Oval ist es O, bei Linie ist es L.

Erstellen Sie mit dem Rechteck-Werkzeug ein 750 Pixel breites, 120 Pixel hohes Rechteck mit der Hintergrundfarbe #F9F9F9.

Navigation bar color fillNavigation bar color fillNavigation bar color fill

Tipp: In Bezug auf Farben verwende ich immer HSBA-Zahlen (Farbton, Sättigung, Helligkeit, Alpha), da es einfach ist, sie zu ändern und sich das Ergebnis im Voraus vorzustellen.

Schritt 2

Wählen Sie das Oval (O)-Werkzeug aus und zeichnen Sie bei gedrückter Umschalttaste + Alt-Taste einen perfekten 80-Pixel-Kreis. Klicken Sie auf der rechten Seite im Inspektorfenster auf die Schaltfläche Füllungen und laden Sie unter der vierten Registerkarte ein Profilbild hoch.

Image fillImage fillImage fill

Tipp: Wenn Sie die Alt-Taste drücken und den Cursor bewegen, können Sie die Abstände in Pixel zwischen den ausgewählten Elementen anzeigen.

Distance between elementsDistance between elementsDistance between elements

Schritt 3

Wählen Sie das Textwerkzeug (T) und platzieren Sie einen Namen neben dem Profilbild mit einem linken Abstand von 20 Pixel. Stellen Sie die Schriftgröße auf 22px und die Schriftfarbe auf #9E846E ein. Sie können Großbuchstaben im Menü Typ > Großbuchstaben festlegen.

Uppercase typeUppercase typeUppercase type

Platzieren Sie den Text "Neue Geschichte" mit den gleichen Einstellungen auf der rechten Seite unserer Zeichenfläche mit einer rechten Auffüllung von 20 Pixel.

AlignmentAlignmentAlignment

Schritt 4

Jetzt erstellen wir unser erstes Symbol, das ein "+" - Symbol ist.

Erstellen Sie mit unserem Rechteck-Werkzeug (R) ein 36 x 6 Pixel großes Rechteck, das dieselbe Farbe wie unser Text hat. Wenn Sie fertig sind, duplizieren Sie die resultierende Form.

Our first iconOur first iconOur first icon

Wählen Sie die zweite aus und drehen Sie sie auf dem Inspektorfeld (auf der rechten Seite) um 90 Grad.

RotateRotateRotate

Nachdem Sie die Rechtecke perfekt aufeinander platziert haben, ziehen Sie das erste und legen Sie es in das zweite im Ebenenbedienfeld ab. Dabei führen wir die beiden separaten Ebenen zu einem 36x36px-Symbol zusammen.

Merging shapesMerging shapesMerging shapes

Schritt 5

In unserer Desktop-Ansicht haben wir auch das gleiche Navigationsrechteck in voller Breite mit einer Höhe von 70 Pixel und einer Deckkraft von 80%.

Desktop navigationDesktop navigationDesktop navigation

Die Textgröße der Menüschaltfläche ist etwas kleiner. 14px mit einer 40px-Polsterung und einer #CCCCCC-Trennlinie.

Desktop navigation buttonsDesktop navigation buttonsDesktop navigation buttons

Entwerfen der Navigation mit festem Boden

Bei der mobilen Ansicht erstellen wir eine feste untere Navigationsleiste, in der der Benutzer zwischen den Seiten "Raster", "Lieblingsorte", "Suchen" und "Profil" wählen kann.

Schritt 1

Genau wie bei der oberen Navigation beginnen wir mit einem 100 Pixel hohen #FFFFFF-Rechteck mit voller Breite und 90% Deckkraft. Platzieren Sie eine 1px #E6E6E6-Linie oben in diesem Rechteck und teilen Sie sie in vier gleiche Spalten.

Alle unsere Symbole sind 50 Pixel groß und haben die Farbe #666666.

Fixed bottom mobile navigationFixed bottom mobile navigationFixed bottom mobile navigation

Tipp: Sie können Ihr eigenes Rastersymbol erstellen, indem Sie neun 14 x 14 Pixel große Rechtecke mit 4 Pixel Polsterung anordnen.

Header erstellen

Schritt 1

Erstellen Sie für das Heldenbild ein Rechteck mit einer Breite von 850 Pixel in voller Breite und füllen Sie es wie im Fall des Profilbilds mit einem Foto. Um sicherzustellen, dass der Text weiterhin lesbar ist, habe ich eine schwarze Ebene mit 20% Deckkraft auf das Bild gelegt.

Hero imageHero imageHero image

Im Falle des Desktop-Heldenbildes empfehle ich 1000px für die Höhe. Stellen Sie außerdem sicher, dass sich das Bild unter der Navigationsleiste befindet.

Schritt 2

Für den Titel und den Untertitel betragen die Schriftgrößen 60px bzw. 24px. Die Titelschrift ist Merriweather Bold und die Untertitelschrift ist Montserrat Regular.

Title and subtitleTitle and subtitleTitle and subtitle

Schritt 3

Das letzte Element in unserem Heldenbild ist die Schaltfläche "Inspiration holen", bei der die Schriftgröße 24 Pixel mit einem Buchstabenabstand von 1,33 Pixel beträgt. Die Schaltfläche selbst ist 338 x 89 Pixel groß und hat einen weißen Rand mit einer Breite von 3 Pixel. Platzieren Sie die Schaltfläche 70px am unteren Rand des Bildes.

Hero buttonHero buttonHero button

Für die Desktop-Ansicht empfehle ich eine kleinere Schriftgröße von 18 Pixel.

Artikelkarten erstellen

Schritt 1

In diesem Schritt schaffen wir einen besonderen Ort für die beliebteste Geschichte. Beginnen Sie dazu mit einem 670 x 480 Pixel großen, mit Bildern gefüllten Rechteck, das in der rechten oberen Ecke ein spezielles Symbol enthält. Mit diesem Symbol kann jeder seine Lieblingsreisen auf der Website markieren.

Favorite locations iconFavorite locations iconFavorite locations icon

Dieses Symbol hat einen weißen Kreis von 80 x 80 Pixel mit einer Innendicke von 2 Pixel. Das Pin-Symbol ist 12 Pixel breit und wir verwenden eine reguläre 18-Pixel-Montserrat-Nummer. Dieses ganze Symbol hat eine Deckkraft von 70% und eine obere und rechte Polsterung von 15 Pixel.

Favorite locations for desktopFavorite locations for desktopFavorite locations for desktop

In der Desktop-Ansicht ist dieses Bild 1240 x 750 Pixel groß und das Symbol "Lieblingsort" ist 50 x 50 Pixel groß.

Schritt 2

Jetzt können wir unsere erste Karte erstellen. Erstellen Sie als ersten Schritt ein mit Bildern gefülltes Rechteck mit 670 x 522 Pixel und dann ein weiteres Rechteck mit 670 x 435 Pixel und #FFFFFF. Platzieren Sie das zweite Rechteck oben auf dem ersten.

Designing the big cardDesigning the big cardDesigning the big card

Erstellen Sie ein drittes Rechteck mit einer Größe von 670 x 744 Pixel und decken Sie die beiden vorherigen Rechtecke damit ab. Platziere diese Ebene unter den vorherigen. Geben Sie dieser Ebene einen kleinen Schatten, damit sie etwas herausspringt.

ShadowsShadowsShadows

Der Randradius ist für unser Kartendesign von entscheidender Bedeutung. Stellen Sie ihn daher auf 5 Pixel ein. Um diesen Radius auf jeder Ebene anzuzeigen, klicken Sie auf diese Schattenebene und verwenden Sie sie als Maske.

Use as MaskUse as MaskUse as Mask

Aufgrund der Tatsache, dass wir auf Mobilgeräten keinen Hover-Status haben, verwenden wir die Hover-Ansicht als Standardansicht, sodass alle Informationen sofort sichtbar sind.

Grouping elementsGrouping elementsGrouping elements

Nachdem wir jede Ebene ausgewählt haben, die mit diesem Kartendesign verbunden ist, können wir sie gruppieren (⌘-G). Anschließend können wir sie einfach duplizieren, indem wir die Alt-Taste drücken und die ursprüngliche Gruppe nach unten verschieben (alternativ können wir duplizieren mit ⌘-C und ⌘-V Methode auch.)

Duplicate cardsDuplicate cardsDuplicate cards

Tipp: Das Organisieren unserer Ebenen in Gruppen ist in größeren Projekten wie diesem äußerst nützlich.

In der Desktop-Ansicht können wir dieselben Karten verwenden. Für anspruchsvollere Ergebnisse empfehle ich, die Verhältnisse und Schriftgrößen ein wenig zu ändern.

Card design in desktop viewCard design in desktop viewCard design in desktop view

Vergessen Sie nicht, dass auf dem Desktop eine Hover-Ansicht verfügbar ist, sodass wir standardmäßig eine einfachere Version der Karte erstellen können. Dabei wird die kompliziertere Version angezeigt, wenn der Benutzer den Cursor über die Karte bewegt.

Entwerfen des Kartenabschnitts mit Reisesammlungen

Mithilfe dieses Kartenabschnitts ist es möglich, Fahrten nach Standort zu filtern und zu suchen. Die Ergebnisse werden als Sammlungen angezeigt, die von mehreren Autoren verfasst wurden.

Schritt 1

Erstellen Sie ein 750 x 850 Pixel großes Rechteck und füllen Sie es mit einem einfachen Google Maps-Screenshot. Platzieren Sie für die Suchleiste ein weiteres Rechteck mit 80% Deckkraft oben auf diesem Rechteck.

Tipp: Erstellen Sie zur einfacheren Ausrichtung ein Quadrat auf der linken Seite der Suchleiste. Danach können wir unser Suchsymbol an der richtigen Stelle platzieren.

Alignment techniqueAlignment techniqueAlignment technique

Ich habe #B3483E als Hauptfarbe für meine Karten-Benutzeroberfläche ausgewählt. Diese Farbe wurde von Pantone Marsala, Pantones Farbe des Jahres 2015, inspiriert.

Map UI colorMap UI colorMap UI color

Schritt 2

Wenn jemand nach einem bestimmten Ort sucht, werden die Ergebnisse als kleine Notizbücher angezeigt. Jedes Tagebuch ist ein mit Bildern gefülltes Rechteck mit 320 x 414 Pixel und einem Hauch von Schatten.

Notebook designNotebook designNotebook design
Wir können den selektiven Randradius festlegen, indem wir seine Form auswählen und die Eingabetaste drücken. Wenn wir einen der Vektorpunkte auswählen, können wir ihnen separate Randradiuswerte geben. Stellen Sie den oberen und unteren rechten Randradius auf 12 Pixel ein.
Rounded cornersRounded cornersRounded corners

Schritt 3

In der Desktop-Ansicht ist fast alles identisch, außer dass wir die Journale neben der Karte und nicht unter der Karte positionieren.

Map in desktop viewMap in desktop viewMap in desktop view

Entwerfen kleiner Artikelkarten

Schritt 1

Das Entwerfen kleiner Artikelkarten ähnelt dem Erstellen größerer Artikel, mit der Ausnahme, dass wir die Beschreibung und den zusammenfassenden Teil der Geschichten löschen. Auf diese Weise können wir mehr Informationen im selben Bereich anzeigen, sodass der Benutzer gleichzeitig mehr Inhalte durchgehen kann.

Small cardsSmall cardsSmall cards

In der Desktop-Ansicht werden die Karten nicht nur verkleinert, sondern auch in einem dreispaltigen Raster sortiert. Ich glaube, dies gibt uns eine bequeme und schnelle Möglichkeit, neue Inhalte zu entdecken und zu erkunden.

Aufruf zum Handeln

Bevor wir unser Projekt mit der Fußzeile beenden, ist es unvermeidlich, dass wir einen Call-to-Action-Bereich bereitstellen.

Schritt 1

Wie immer benötigen wir ein mit Bildern gefülltes Rechteck mit 750x1000px. Um den Text lesbar zu machen, fügen wir unserem Bild eine weiße Verlaufsebene hinzu. Unser Farbverlauf reicht von #FFFFFF-Deckkraft 30% bis #FFFFFF-Deckkraft 70%, sodass wir nur die Deckkraft ändern müssen.

Call to ActionCall to ActionCall to Action

Tipp: Ein kleiner, aber manchmal immer noch wichtiger Trick, um die Lesbarkeit unseres Textes zu verbessern, besteht darin, ihm Schatten hinzuzufügen. In diesem Fall habe ich meinen Titel- und Absatztext mit einem weichen Lichtschatten versehen.

Call to Action Text designCall to Action Text designCall to Action Text design

Erstellen des Fußzeilenbereichs

Für den Fußzeilenbereich verwenden wir eine Kombination aus Social Media-Symbolen und Textschaltflächen.

Mobile footer designMobile footer designMobile footer design

Stellen Sie sicher, dass unsere Social-Media-Symbole auf kleinen mobilen Bildschirmen berührbar bleiben. Machen wir sie mindestens 44 Pixel groß oder breit.

Desktop footer designDesktop footer designDesktop footer design

Noch eine Idee

Für die Desktop-Ansicht können wir einen weiteren Navigationsstil erstellen, aber wir müssen vorsichtig sein und ihn nur über einer Breite von 1440 Pixel verwenden. Dies entspricht der Navigation mit festem Boden in der mobilen Ansicht.

Extra desktop navigation viewExtra desktop navigation viewExtra desktop navigation view

Herzliche Glückwünsche!

Wir haben unser wunderschönes Design für Journal-Webanwendungen fertiggestellt. Nachdem Sie dieses Tutorial befolgt haben, hoffe ich, dass Sie sicherer sind, Sketch für große Projekte zu verwenden. Schauen wir uns ein Mashup der Endprodukte an:

Ich bin gespannt, wie Sie den Prozess gefunden haben. Zögern Sie also nicht, Feedback und Fragen in den Kommentaren zu hinterlassen.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.