Accentsconagua
Share
Was Sie erstellen werdenIn diesem Tutorial werde ich Sie durch meinen Entwurfsprozess zum Erstellen eines responsiven Entwurfs in Sketch führen. Um es auf den Punkt zu bringen: Ich spreche von einer ansprechbaren Landing Page, die ich vor einiger Zeit für eine Reise-App entworfen habe. Kommen wir gleich rein!
Jedes Designprojekt hat eine Art Einrichtung. Für dieses spezielle Thema werde ich kurz über Inhalte und Wireframes sprechen, bevor ich in den Responsive Design-Prozess in Sketch einsteige.
Im Allgemeinen ist es ratsam, den Inhalt vor dem Beginn eines Designprojekts zu erfassen. Genau so beginne ich alle meine Projekte (was es wert ist, es ist Teil meines Vertrages - etwas, was ich empfehle, dass Sie es auch in die Praxis umsetzen). Dieses Tutorial konzentriert sich auf die Benutzeroberfläche der UI und lässt die wichtigen UX-Fragen weg, z. B. warum bestimmte Inhalte ausgewählt wurden, Seitenziele usw..
Bei der Diskussion von Inhalten mit Ihrem Kunden oder Ihrem Team müssen Sie auf kleinen und großen Bildschirmen über den Inhalt nachdenken. Ich empfehle, zuerst den Inhalt für Handys zu schreiben. Schreiben Sie alles in ein Google-Dokument. Öffnen Sie als Nächstes das Dokument auf Ihrem Telefon, um festzustellen, ob es richtig ist oder ob zu viel davon vorhanden ist. Wenn Sie auf Ihrem Telefon durch Seiten und Seiten mit ausgeschriebenem Inhalt blättern, wissen Sie, dass Sie dies sofort angehen müssen.
Schneiden Sie Ihren Inhalt immer erheblich ab.
"Entfernen Sie die Hälfte der Wörter auf jeder Seite und dann die Hälfte des Restes." - Steve Krug, machen Sie mich nicht zum Nachdenken
Wenn Sie mit den mobilen Inhalten zufrieden sind, können Sie der Tablet- und Desktop-Version gerne weitere hinzufügen. Größere Bildschirme bieten mehr Platz für detailliertere Informationen.
Sie werden natürlich Revisionen durchlaufen. Lassen Sie sich in dieser Phase nicht zu sehr aufhalten. Der Inhalt sollte nahezu final sein, muss aber nicht in Stein gemeißelt werden.
Um mehr über einen inhaltlichen Ansatz zu erfahren, lesen Sie den Artikel von James Deer:
Das Einverständnis mit dem Inhalt aller Versionen der Website ist der erste Schritt beim Einrichten Ihres Designs. Sie wissen jetzt, was Sie erwartet. Es ist absolut in Ordnung, den Inhalt durchgängig gleich zu halten, genauso wie bestimmte Inhalte erscheinen oder verschwinden sollen, je nach Bildschirmgröße.
Die gebräuchlichste Art von Inhalten im Internet ist geschriebener Text. Es gibt jedoch 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 festnageln. Zumindest eine Beschreibung des visuellen oder auditiven Inhalts. Das habe ich für diesen Kunden getan. Ich wusste ungefähr, welche Art von Grafiken ich für jeden Abschnitt wollte, um den Wertbeitrag jedes Abschnitts näher zu erläutern. Zu dem Zeitpunkt, zu dem der Inhalt besprochen wurde, verfügte ich nicht über die tatsächlichen Grafiken. Ich habe es gerade beschrieben.
Der nächste Schritt ist die visuelle Darstellung des Inhalts. Bei diesem Projekt habe ich mich für einfache Wireframes mit niedriger Wiedergabetreue entschieden. Ich wollte den Inhalt schnell und visuell herausziehen. Ich habe zwei Wireframes, ein Handy und einen Desktop erstellt, da beide unterschiedliche Inhaltsanforderungen hatten. Beide geben Ihnen einen Überblick über die visuelle Struktur der Landing Page.
Sie können jedes beliebige Werkzeug für Wireframes verwenden, aber ich habe hier Sketch verwendet. Sie können auch Low-Fidelity-Stift- und Papier-Drahtgitter erstellen. Es spielt keine Rolle Sie können sogar die später in diesem Tutorial beschriebenen Techniken verwenden, um zu erstellen ansprechbar Wireframes.
Lassen Sie uns mit Sketch in das responsive UI-Design einsteigen.
Dies erleichtert uns das Leben, wenn wir zunächst Inhalte identifizieren, die in allen Varianten gleich sind, und Inhalte, die für bestimmte Bildschirme spezifisch sind.
In diesem Design sind auf allen Bildschirmen die folgenden Elemente vorhanden:
Elemente, die für verschiedene Bildschirmgrößen einzigartig sind:
Perfekt. Jetzt können wir mit dem Erstellen dieser Elemente beginnen.
Meine grundlegende Schaltfläche für Desktop und Tablet ist ein Rechteck mit 352 x 40 Pixeln und einem 5px-Rahmenradius. Der Hintergrund ist # 7455FF. Wählen Sie in den Eigenschaften für die Größenänderung aus, dass das Objekt an den linken und rechten Rand geklebt und eine feste Höhe festgelegt werden soll.
Als Nächstes befindet sich die Textebene, die Kopie der Schaltfläche mit einer Note Sans UI-Schriftart, Fettdruck und einer 16px-Schriftgröße. Es ist weiß oder #ffffff. Die Ausrichtungsbreite ist auf festgelegt Auto In der Textebene sind keine weiteren Einstellungen festgelegt. Wenn Sie möchten, können Sie die Schaltfläche in ein Symbol umwandeln. Dies ist jedoch für dieses spezielle Design nicht erforderlich, da die Schaltfläche nur einmal auf der Seite angezeigt wird.
Wenn Sie die beiden Elemente in einer Gruppe (oder einem Symbol) kombinieren, sollten Sie die Breite 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 damit Fließschirme erstellen, deren Größe unter Beibehaltung ihrer Eigenschaften wie Abstand, Polsterung oder Höhe geändert wird. Ideal für Layouts mit Formularen.
Wir können Anima verwenden, um verschiedene Header-Elemente zusammenzufügen, während die Größe von Mobile auf Desktop geändert wird. Dies gibt uns auch einen guten Hinweis darauf, wie sich diese Elemente in anderen Bildschirmgrößen verhalten werden, als in denen, die wir in Größen wie einem größeren Telefon oder Tablet entwerfen.
Für das, was wir heute tun, fügt dieses Plugin jedoch nicht zu viel hinzu.
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 h1-Überschrift 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 dann als Textstil mit der richtigen Benennungskonvention oder -syntax speichern. Dies ermöglicht uns, später den erforderlichen h1 auszuwählen, während der Rest der Seite entworfen wird. Es ist nicht perfekt und schön 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 / spezifischer Stil
Um unsere Typografie zu organisieren, können wir die folgende Syntax für große h1 für Desktops verwenden: Überschriften / H1 / Desktop, für Tablet: Überschriften / H1 / Tablet und für Telefone: Überschriften / H1 / Telefon.
Der Grund dafür, dass Überschriften / h1 in der Dropdown-Liste angezeigt wird, ist, weil wir keine anderen Stile hinzugefügt haben. Gehen wir also auf h2 und fügen Sie eine weitere Hierarchieebene in die Textstile ein.
Für h2 verwende ich folgende Stile: Noto Sans UI, fett, Größe 73 (Desktop und Tablet) und Größe 18 (Telefon). Verwenden wir die folgende Syntax für h2 auf Handys: Überschriften / H2 / Telefon. Für Tablets können wir hier zwei Dinge tun, wir können es mit Desktop kombinieren und es nennen Überschriften / H1 / Desktop + Tablet oder wir können zwei verschiedene Stile haben, die einfach gleich sind. Ich schreibe über dieses Design, nachdem es fertig ist, also ist es ein wenig voreingenommen. Ich werde sagen, dass wir das Tablet vom Desktop trennen, da dies eine bessere Entwurfspraxis ist.
Mit den Typografiestilen in Sketch können Sie die Syntaxregeln wirklich detailliert und organisiert anzeigen. Zum jetzigen Zeitpunkt gibt es in Sketch keine Funktion oder kein Plugin, das die Typografie für Sie so anpasst, wie flüssige Typografie durch CSS funktioniert. Im Moment ist es immer noch ein manueller Prozess.
Als nächstes werden wir Symbole erstellen, die wiederverwendet werden können und unser Leben ein bisschen einfacher machen. In diesem Design haben wir viele Erfahrungsberichte und Zitate von früheren Nutzern. Sie müssen ansprechbar sein.
Zum Glück ist das Format für Testimonials auf der gesamten Seite gleich, sodass wir dies nur einmal für sie tun müssen. Zuerst haben wir den Namen der Person und dann das Zitat. Die zwei sind jedoch unterschiedliche Stile. Gestalten wir zuerst die Quelle. Ich habe den Textstil benannt Zeugnis / Quelle. Der tatsächliche Stil dieses Elements ist: Noto Sans UI, fett, Größe 14, Zeilenhöhe 24. Als Nächstes haben wir das tatsächliche Testimonial. Ich habe den Textstil benannt Zeugnis / Zitat. 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 auf Symbol erstellen Symbol oben links in der Symbolleiste. Ich habe mein Symbol benannt Zeugnis.
Jetzt müssen wir das Symbol bearbeiten, damit es für verschiedene Bildschirmgrößen und für verschiedene Angebotsgrößen gut skaliert werden kann. Doppelklicken Sie auf das neu erstellte Symbol, um es zu bearbeiten.
Zunächst müssen die Elemente innerhalb des Symbols umbenannt werden. Standardmäßig wird der Name einer Textebene aus seinem eigenen Textinhalt erstellt. Ich habe sie umbenannt in Name der Quelle und Zitat, beziehungsweise.
Als nächstes müssen wir die Größenänderungseinstellungen für beide Textelemente anpassen. Sie haben die gleichen Eigenschaften für die Größenänderung. Keine hat eine feste Breite oder Höhe. Sie werden jedoch sowohl die Größe der linken als auch der oberen Kante ändern. Wenn Sie die Größe des Symbols ändern, werden die Textelemente dort bleiben, wo sie hingehören.
Um das Symbol wiederzuverwenden, klicken Sie oben links in der Symbolleiste auf die Dropdown-Liste Einfügen und navigiere zum Referenzen Symbol. Klicken Sie dann auf eine beliebige Stelle der Zeichenfläche, um sie zu platzieren. Um den Text einzufügen, fügen Sie den Inhalt in die entsprechenden Eingaben ein, die wir zuvor umbenannt haben. Ändern Sie die Größe nach Bedarf.
Ich verwende den Begriff "responsive graphics" hier etwas anders. Die Idee ist, dass sich die Grafiken je nach Bildschirmgröße ändern. Ich muss die Grafiken jedoch noch für jeden Bildschirm manuell erstellen. Wenn sie nicht fließend sind, wie ein Eingabeelement oder eine Schaltfläche, können sie nicht automatisch erstellt werden.
Um ein besseres Verständnis für responsive Grafiken zu erhalten, finden Sie hier einen Link zu einem Artikel, den ich über responsive Icons geschrieben habe. Die Idee ist jedoch für alle Arten von Grafiken und Bildern identisch.
Wir können sowohl die Streckenkarten in Symbole als auch Karten aus dem sozialen Bereich der Landing Page umwandeln. Lass uns stattdessen mit den Social Cards um die Day 3-Grafik gehen (es ist etwas interessanter).
Wählen Sie erneut die Karte 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 skaliert wird.
Beginnend mit dem Hintergrund möchten wir ihm Eigenschaften zum Ändern der Größe geben, durch die das Objekt oben und links fixiert wird. Dasselbe gilt für die beiden Textebenen. Wir möchten jedoch, dass das Bild oder der Avatar oben rechts fixiert wird. Vergessen Sie nicht, die Titel dieser Elemente in etwas besseres zu ändern, wenn wir ihren Inhalt überschreiben.
Und voila!
Schließlich möchten wir uns auch mit den kleinen Designdetails beschäftigen. In diesem speziellen Design verwende ich die kleine violette Linie vielfach mit einem Punkt. Ich verwandle diesen violetten Indikator auch in ein Symbol.
Dieses Symbol besteht aus einem Kreis, der 8 x 8 Pixel mit einem # 7455FF-Hintergrund ist. Die Breite der Linie spielt keine große Rolle, der Standardwert ist 122px. Seine Höhe beträgt 2px. Wieder mit # 7455FF Hintergrund.
Innerhalb des Symbols müssen wir die Größe erneut anpassen. Für den Kreis brauchen wir dieselbe Größe und den gleichen Ort. Wir geben ihm eine feste Breite und Höhe und befestigen ihn an der rechten oberen Kante. Für die Linie geben wir ihr auch eine feste Höhe, aber keine feste Breite, da sie in der Breite benötigt wird. Wir werden es bei der Größenänderung auch am rechten Rand befestigen.
Wenn Sie die Größe dieses Symbols ändern, ändert sich auf diese Weise nur die Breite der Linie.
Eine weitere Möglichkeit ist, die Hintergründe flüssig zu gestalten. Die Höhen der Abschnitte unterscheiden sich zwischen mobilen und Desktop-Layouts. Dies bedeutet, dass Sie die Hintergrundelemente an die richtige Stelle verschieben müssen.
Hier fordert die Benutzeroberfläche einen weißen Rand von 16 Pixeln. 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 über das Anima-Plugin oder über die Eigenschaften für die Größenänderung alle Kanten der Hintergrundebene fixieren. Befestigen Sie es also oben, unten, links und rechts. Wenn Sie nun die Zeichenfläche in der Größe verändern, wird der Hintergrund entsprechend angepasst!
Nachdem wir uns nun um die meisten Gestaltungselemente gekümmert haben, die ansprechend oder fließend oder in wiederverwendbare Symbole umgewandelt werden können, ist es an der Zeit, über die übrigen Gestaltungselemente auf dieser Seite zu sprechen.
Einfach gesagt: Hier rollen Sie Ihre Ärmel hoch und machen Ihre Entwürfe nacheinander manuell. Die Gestaltung der Kartengrafik muss von Hand erfolgen, da sie einzigartig ist. Gleiches gilt für das Layout und die Farbauswahl sowie die Entscheidung für die Typografie.
Das Entwerfen responsiver Interfaces in Sketch ist leider noch kein Kinderspiel. Es gibt jedoch Techniken, sogar Plugins, die Ihnen als Designer, der in Sketch arbeitet, Ihr Leben erheblich erleichtern werden. Ich hoffe, dieses Tutorial hat Ihnen einen guten Überblick über meinen eigenen Designprozess gegeben. Das Entwerfen von responsiven UIs muss nicht langwierig sein, viele davon können auch automatisiert werden.
Haben Sie Tipps oder Tricks für die Gestaltung einer ansprechbaren Benutzeroberfläche, die Sie mit uns teilen können? Füge sie in den Kommentaren unten ein!
