Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Responsive Web Design

Tipps und Tricks für einen ansprechbaren Entwurfsprozess 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 Sie durch meinen Designsprozess zum Erstellen eines ansprechbaren Design in Sketch führen. Um die Dinge auf den Punkt zu bringen, werde ich über eine ansprechbare Zielseite sprechen, die ich vor einiger Zeit für eine Reise-App entworfen habe. Lassen Sie uns gleich loslegen!

Die Grundeinstellung

Jedes Designprojekt hat eine Art Setup. In diesem Fall werde ich kurz auf Inhalte und Drahtmodelle eingehen, bevor ich in Sketch auf den ansprechbaren Designsprozess eingehe.

Das Wichtigste zuerst, der Inhalt

Es ist im Allgemeinen empfehlenswert, den Inhalt zu erfassen, bevor Sie ein Designprojekt starten. Genau so starte ich alle meine Projekte (für das, was es wert ist, ist es Teil meines Vertrags - etwas, das Sie auch in die Praxis umsetzen sollten). Dieses Tutorial konzentriert sich auf die Benutzeroberfläche und lässt wichtige UX-Fragen wie die Auswahl bestimmter Inhalte, Seitenziele usw. aus.

Während Sie mit Ihrem Kunden oder Ihrem Team über Inhalte diskutieren, müssen Sie über die Inhalte auf kleinen und großen Bildschirmen nachdenken. Ich schlage vor, zuerst den Inhalt für Handys zu schreiben und alles in ein Google Doc zu schreiben. Öffnen Sie als Nächstes das Dokument auf Ihrem Telefon, um festzustellen, ob es genau richtig ist oder ob zu viel davon vorhanden ist. Wenn Sie auf Ihrem Telefon durch Seiten und Seiten mit ausgeschriebenen Inhalten scrollen, müssen Sie dies sofort beheben.

Schneiden Sie Ihre Inhalte immer erheblich, egal was passiert.

"Entfernen Sie die Hälfte der Wörter auf jeder Seite und dann die Hälfte der verbleibenden Wörter." - Steve Krug, bring mich nicht zum Nachdenken

Sobald Sie mit den mobilen Inhalten zufrieden sind, können Sie der Tablet- und Desktop-Version weitere hinzufügen. Größere Bildschirme verfügen über mehr Bildschirmfläche, um detailliertere Informationen zu verarbeiten.

Sie werden natürlich Revisionen durchlaufen. Lassen Sie sich zu diesem Zeitpunkt nicht zu sehr darauf ein. Der Inhalt sollte fast endgültig sein, muss aber nicht in Stein gemeißelt sein.

Lesen Sie den Artikel von James Deer, um mehr über einen Content-First-Ansatz zu erfahren:

Die Vereinbarung von Inhalten für alle Websiteversionen ist der erste Schritt bei der Einrichtung Ihres Designs. Sie wissen jetzt, was Sie erwartet. Es ist absolut in Ordnung, den Inhalt durchgehend gleich zu halten, genauso wie bestimmte Inhalte je nach Bildschirmgröße angezeigt oder ausgeblendet werden.

Welche Art der Inhalten suchen Sie?

Die häufigste Art von Inhalten im Web ist geschriebener Text. Es gibt jedoch auch andere Dinge, einschließlich Bilder und Grafiken (d. h. Fotos oder Illustrationen), Videos, Zitate, Audiodateien (d. h. Podcasts), Spiele oder sogar eingebettete Inhalte über Iframes.

Sie müssen nicht alle Videos und Podcast-Episoden festgenagelt haben. Zumindest eine Beschreibung des visuellen oder akustischen Inhalts. Das habe ich für diesen Kunden getan. Ich wusste ungefähr, welche Art von Grafik ich für jeden Abschnitt haben wollte, um das Wertversprechen jedes Abschnitts näher zu erläutern. Zum Zeitpunkt der Diskussion des Inhalts verfügte ich jedoch nicht über die tatsächlichen Grafiken. Ich habe es gerade beschrieben.

Wireframing

Der nächste Schritt besteht darin, den Inhalt visuell darzustellen. Bei diesem Projekt habe ich mich für einfache Wireframes mit niedriger Wiedergabetreue entschieden. Ich wollte den Inhalt schnell und visuell zeichnen. Ich habe zwei Wireframes erstellt, ein mobiles und ein Desktop, da sie jeweils unterschiedliche Inhaltsanforderungen hatten. Beide geben Ihnen einen allgemeinen Überblick über die visuelle Struktur der Zielseite.

Sie können jedes Werkzeug verwenden, mit dem Sie sich am besten auskennen, aber ich habe hier Sketch verwendet. Sie können auch Stift- und Papier-Drahtgitter mit niedriger Wiedergabetreue erstellen. Es spielt keine Rolle. Sie können sogar die später in diesem Lernprogramm beschriebenen Techniken verwenden, um ansprechbare Drahtmodelle zu erstellen.

Lassen Sie uns mit Sketch in das ansprechbare UI-Design einsteigen.

Das Ansprechbare UI Design

Es wird unser Leben einfacher machen, wenn wir zuerst Inhalte identifizieren, die für alle Varianten gleich sind, und Inhalte, die für bestimmte Bildschirme einzigartig sind.

In diesem Design sind die folgenden Elemente auf allen Bildschirmen vorhanden:

  • Überschriften, einschließlich h1 und h2 (obwohl sie auf allen Bildschirmen vorhanden sind, reagieren sie)
  • Tasten
  • Links
  • Zitate
  • Hintergründe

Elemente, die für verschiedene Bildschirmgrößen einzigartig sind:

  • Grafiken (die Grafiken sind auch ansprechbar)
  • Textabsätze

Perfekt. Jetzt können wir beginnen, diese Elemente entsprechend zu erstellen.

Entwerfen der grundlegenden Benutzeroberflächen

Meine grundlegende Schaltfläche für Desktop und Tablet ist ein Rechteck mit einer Größe von 352x40 Pixel und einem Randradius von 5 Pixel. Der Hintergrund ist #7455FF. Wählen Sie in den Größenänderungseigenschaften aus, dass das Objekt am linken und rechten Rand fixiert und eine feste Höhe festgelegt werden soll.

Als Nächstes folgt die Textebene, die Kopie der Schaltfläche, mit einer fett gedruckten Note Sans UI-Schriftart und einer Schriftgröße von 16 Pixel. Es ist weiß oder #ffffff. Die Ausrichtungsbreite ist auf auto eingestellt, und auf der Textebene sind keine weiteren Einstellungen festgelegt. Wenn Sie möchten, können Sie die Schaltfläche in ein Symbol verwandeln. Dies ist für dieses spezielle Design jedoch nicht erforderlich, da die Schaltfläche auf der gesamten Seite nur einmal angezeigt wird.

Wenn Sie die beiden Elemente zu einer Gruppe (oder einem Symbol) kombinieren, sollten Sie die Größe der Schaltfläche problemlos ändern können, wobei der Text unabhängig von der Breite der Schaltfläche in der Mitte bleibt.

Sie können auch das Anima-Plugin für Sketch verwenden. Sie können Fluid-Bildschirme erstellen, deren Größe geändert wird, während ihre Eigenschaften wie Abstand, Polsterung oder Höhe zusammengehalten werden. Es eignet sich hervorragend für Layouts mit Formularen.

Wir können Anima verwenden, um verschiedene Header-Elemente zusammenzuhalten und gleichzeitig die Größe von mobil auf Desktop zu ändern. Es gibt uns auch einen guten Hinweis darauf, wie sich diese Elemente in anderen Bildschirmgrößen als den von uns entworfenen im Verhältnis zueinander verhalten - in den dazwischen liegenden Größen wie bei einem größeren Telefon oder Tablet.

Für das, was wir heute tun, fügt dieses Plugin jedoch nicht zu viel hinzu.

Ansprechbare Typografie in Skizze

Dieses Landingpage-Design erfordert einige große und schöne Überschriften. In der Desktop-Version ist h1 72px, während h2 32px ist. 72px ist viel zu viel für Handys. Wir müssen die Überschrift für das erste Halbjahr ansprechen. Es ist nicht so einfach wie flüssige Typografie in CSS, aber machbar.

Wir müssen für jede h1-Überschrift einen Stil erstellen und ihn dann als Textstil mit der richtigen Namenskonvention oder Syntax speichern. Auf diese Weise können wir später das erforderliche h1 nach Bedarf auswählen, während wir den Rest der Seite entwerfen. Es ist nicht perfekt und hübsch manuell, aber so geht es.

Für h1 sind dies die folgenden Stile: Noto Sans UI, fett, Größe 72 (Desktop), Größe 48 (Tablet) und Größe 32 (Telefon).

Dieselbe Syntax kann auch zum Organisieren von Symbolen angewendet werden. Zum Beispiel: Style-name/sub-name/specific-style

Um unsere Typografie zu organisieren, können wir für Desktops die folgende Syntax für großes h1 verwenden: Headings/H1/Desktop, für Tablet: Headings/H1/Tablet und für Telefone: Headings/H1/Phone.

H1 heading stylesH1 heading stylesH1 heading styles

Der Grund dafür, dass in der Dropdown-Liste derzeit Headings/h1 angezeigt wird, ist, dass wir keine anderen Stile hinzugefügt haben. Gehen wir also zu h2 und fügen den Textstilen eine weitere Hierarchieebene hinzu.

H2 heading stylesH2 heading stylesH2 heading styles

Für h2 verwende ich die folgenden Stile: Noto Sans UI, fett, Größe 73 (Desktop und Tablet) und Größe 18 (Telefon). Verwenden wir für h2 auf Telefonen die folgende Syntax: Headings/H2/Phone. Für Tablets können wir hier zwei Dinge tun, wir können es mit Desktop kombinieren und es Headings/H1/Desktop + Tablet nennen oder wir können zwei separate Stile haben, die einfach gleich sind. Ich schreibe über dieses Design, nachdem es fertig ist, also ist es ein wenig voreingenommen. Ich möchte sagen, dass wir das Tablet vom Desktop trennen, da dies eine bessere Designspraxis darstellt.

Mit Typografiestilen in Sketch können Sie mit ihren Syntaxregeln wirklich detailliert und organisiert werden. Zum jetzigen Zeitpunkt gibt es in Sketch jedoch keine Funktion oder kein Plugin, mit dem die Größe der Typografie für Sie so geändert werden kann, wie flüssige Typografie über CSS funktioniert. Derzeit ist es noch ein manueller Vorgang.

Verwenden und Wiederverwenden der Symbolen

Als nächstes werden wir Symbole erstellen, um sie wiederzuverwenden und unser Leben ein bisschen einfacher zu machen. In diesem Design haben wir viele Testimonials und Zitate von früheren Benutzern; Sie müssen reagieren.

Zum Glück wird das Format für Testimonials auf der gesamten Seite gleich sein, sodass wir dies nur einmal für sie tun müssen. Zuerst haben wir den Namen der Person und dann ihr Zitat. Die beiden sind jedoch unterschiedliche Stile. Gestalten wir zuerst die Quelle. Ich habe den Textstil Testimonial/Source genannt. Der eigentliche Stil dieses Elements lautet: Noto Sans UI, fett, Größe 14, Zeilenhöhe 24. Als nächstes haben wir das eigentliche Zeugnis. Ich habe den Textstil Testimonial/Quote genannt. Sein Stil ist: Noto Serif, normal, Größe 14, Zeilenhöhe 24.

Um ein Symbol zu erstellen, wählen Sie beide Textelemente aus und klicken Sie oben links in Ihrer Symbolleiste auf das Symbol Symbol erstellen. Ich habe mein Symbol Testimonial genannt.

Jetzt müssen wir das Symbol bearbeiten, damit es die Größe für verschiedene Bildschirmgrößen und für verschiedene Anführungszeichengrößen ändert. Doppelklicken Sie auf das neu erstellte Symbol, um es zu bearbeiten.

Zunächst müssen wir die Elemente innerhalb des Symbols umbenennen. Standardmäßig wird der Name einer Textebene aus ihrem eigenen Textinhalt erstellt. Ich habe sie in Source’s name und Quote umbenannt.

Als Nächstes müssen wir die Größenänderungseinstellungen für beide Textelemente anpassen. Sie haben die gleichen Größenänderungseigenschaften. Weder hat eine feste Breite oder Höhe. Die Größe der beiden beiden linken und oberen Kanten wird jedoch geändert. Dadurch wird sichergestellt, dass die Textelemente beim Ändern der Größe des Symbols dort bleiben, wo sie hingehören.

Um das Symbol wiederzuverwenden, klicken Sie oben links in der Symbolleiste auf das Dropdown-Menü Insert und navigieren Sie zum Symbol Testimonials. Klicken Sie dann auf eine beliebige Stelle auf der Zeichenfläche, um sie zu platzieren. Um den Text zu ändern, fügen Sie den Inhalt in die entsprechenden Überschreibungseingaben ein, die wir zuvor umbenannt haben. Ändern Sie die Größe nach Bedarf.

Ansprechbare Grafiken

Ich verwende den Begriff "ansprechbare Grafiken" hier etwas anders. Die Idee ist, dass sich die Grafiken je nach Bildschirmgröße ändern. Ich müsste die Grafiken jedoch immer noch manuell für jeden Bildschirm erstellen. Solange sie nicht flüssig sind, wie ein Eingabeelement oder eine Schaltfläche, können sie nicht automatisch erstellt werden.

Um ein besseres Verständnis der ansprechbaren Grafiken zu erhalten, finden Sie hier einen Link zu einem Artikel, den ich über ansprechbare Symbole geschrieben habe. Die Idee ist jedoch für alle Arten von Grafiken und Bildern genau gleich.

Wiederverwenden grafischer Elemente

Wir können sowohl die Reiseroutenkarten in Symbole als auch die Karten unter dem sozialen Bereich der Zielseite umwandeln. Lassen Sie uns stattdessen die Social Cards für die Grafik von Tag 3 verwenden (etwas interessanter).

Wählen Sie die Karte erneut aus und verwandeln Sie sie in ein Symbol. Doppelklicken Sie darauf, um das Symbol zu bearbeiten. Wir möchten sicherstellen, dass die Größe sowohl vertikal als auch horizontal gut angepasst wird.

Beginnend mit dem Hintergrund möchten wir ihm Größenänderungseigenschaften geben, die den Objekt-Pin oben und links machen. Gleiches gilt für die beiden Textebenen. Wir möchten jedoch, dass das Bild oder der Avatar oben rechts angeheftet wird. Vergessen Sie nicht, die Titel dieser Elemente in etwas zu ändern, das besser geeignet ist, wenn wir den Inhalt überschreiben.

Und voila!

Die kleine Einzelheiten sind auch wichtig

Zuletzt wollen wir uns auch mit den kleinen Design-Einzelheiten befassen. In diesem speziellen Design verwende ich die kleine lila Linie häufig mit einem Punkt. Ich verwandle diesen lila Indikator auch in ein Symbol.

Dieses Symbol besteht aus einem Kreis mit einer Größe von 8x8 Pixel und einem Hintergrund von #7455FF. Die Breite der Linie spielt keine große Rolle, aber der Standardwert ist 122px. Seine Höhe beträgt 2px. Wieder mit #7455FF Hintergrund.

Innerhalb des Symbols müssen wir die Größenänderung erneut vornehmen. Für den Kreis muss er gleich groß und am gleichen Ort bleiben. Wir werden ihm eine feste Breite und Höhe geben und ihn am oberen rechten Rand anheften. Für die Linie geben wir ihr auch eine feste Höhe, aber keine feste Breite, da sie zum Erweitern der Breite benötigt wird. Wir werden es auch beim Ändern der Größe am rechten Rand anheften.

Auf diese Weise ändert sich die Linienbreite nur, wenn wir die Größe dieses Symbols ändern.

Ein schneller Hintergrundtrick

Eine weitere Möglichkeit besteht darin, die Hintergründe flüssig zu gestalten. Die Abschnittshöhen unterscheiden sich zwischen mobilen und Desktop-Layouts. Dies bedeutet, dass Sie die Hintergrundelemente an der richtigen Stelle nach oben und unten verschieben müssen.

Hier fordert die Benutzeroberfläche einen weißen 16-Pixel-Rand. Das bedeutet, dass die Hintergrundebene 16 Pixel von den Kanten der Zeichenfläche entfernt sein muss. Sie müssen lediglich die Hintergrundebene auswählen und entweder mit dem Anima-Plugin oder mithilfe der Größenänderungseigenschaften alle Kanten der Hintergrundebene fixieren. Stecken Sie es also oben, unten, links und rechts fest. Wenn Sie nun die Größe der Zeichenfläche ändern, folgt der Hintergrund!

Und alles andere?

Nachdem wir uns um die meisten Designelemente gekümmert haben, die ansprechbare Grafiken oder flüssig oder in wiederverwendbare Symbole umgewandelt werden können, ist es an der Zeit, über den Rest der Designelemente auf dieser Seite zu sprechen.

Einfach ausgedrückt, hier krempeln Sie Ihre Ärmel hoch und machen Ihre Design manuell nacheinander. Das Entwerfen der Kartengrafik muss von Hand erfolgen, da sie einzigartig ist. Gleiches gilt für das Layout, die Auswahl der Farben und die Entscheidung für die Typografie.

Abschluss

Leider ist das Entwerfen ansprechbare Grafiken Schnittstellen in Sketch noch kein Kinderspiel. Aber es gibt Techniken, sogar Plugins, die Ihnen das Leben als Designer in Sketch erheblich erleichtern. Ich hoffe, dieses Tutorial hat Ihnen einen guten Überblick über meinen eigenen Designprozess gegeben. Das Entwerfen ansprechbarer Benutzeroberflächen muss nicht langwierig sein, viele davon können auch automatisiert werden.

Haben Sie Tipps oder Tricks zum Entwerfen einer ansprechbaren Grafikenn Benutzeroberfläche, die Sie uns mitteilen möchten? Lass sie in den Kommentaren unten fallen!

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.