Web Design Guide für Nicht-Designer

Im Alter von 14 Jahren machte ich den ersten Standort. Dies war die Aufgabe für das Schulprojekt. Die Aufgabe war einfach: Eine sehr einfache Site mit Text, Bildern und einer Tabelle erstellen. Normalerweise vergaß ich alle Aufgaben und erledigte sie in letzter Minute. Aber zu dieser Zeit verlor ich meinen Verstand.

Bild

Ich habe immer dem Erscheinungsbild der Website Priorität eingeräumt. Ob Sie dem zustimmen oder nicht, der erste Eindruck ist immer in Erscheinung. Die Menschen vertrauen mehr, was ihnen gefällt.

Im Laufe der Jahre, in denen solche Projekte erstellt wurden, habe ich der Entwicklung von Designfähigkeiten mehr Aufmerksamkeit gewidmet, als die Programmierkenntnisse zu verbessern. Bei großen und komplexen Projekten werden Sie viele verschiedene Aufgaben erledigen. Eines davon ist Design.

Ausgezeichnetes Design ist etwas zwischen "Es ist so einfach, dass Ihre Großmutter dasselbe tun kann" und "Wow, es ist verdammt cool". Design kann Ihr Wettbewerbsvorteil sein oder ein Sargnagel sein.

Und es geht nicht um Talent.

Als ich jünger war, habe ich viel Minecraft gespielt. Ich habe all diese Gebäude gesehen, die von Menschen gemalt wurden. Aber als ich so etwas versuchte, sah es aus wie eine Kiste. Hässlich und nicht stylisch.

Ich habe auf YouTube ein Video gefunden und die Aktionen des Erzählers wiederholt, nach einiger Zeit habe ich meinen eigenen Stil entwickelt und konnte ihn selbst bauen. Ich habe sogar den Wettbewerb gewonnen.

Design ist eine Fähigkeit, die entwickelt werden kann.

Wählen Sie die richtigen Tools für den Job:

Beim Programmieren können Sie Notepad verwenden und die Anwendung schreiben sowie in einer vollständigen Entwicklungsumgebung, obwohl dies Ihr Leben komplizieren würde. In der Welt des Webdesigns spielt MS Paint die Rolle von Notepad, und genau wie Notepad verwenden es wenige Leute.

Die beliebtesten Tools für das Webdesign:

Sketch- Tool für MacOS. Abonnement kostet 99 US-Dollar / Jahr Einige halten es für so komplex wie React.

Adobe XD ist ein kostenloses, plattformübergreifendes Tool, das die Rolle von Vue spielt. Einfach zu bedienen

Adobe Photoshop Schweizer Messer für jede Designaufgabe. Es kann mit jQuery verglichen werden. Preis 9,99 $ / Monat.

Es macht keinen Unterschied, ob Sie Sublime oder VS Code zum Schreiben von Code verwenden. Oder Sie verwenden React oder Vue für die Schnittstelle. Dies ist eine Frage der persönlichen Vorlieben. Jedes der Tools hat seine Vor- und Nachteile.

Ich benutze Adobe XD. Zunächst einmal, weil es sich um ein plattformübergreifendes Programm handelt, also bin ich keine Geisel des Apple-Ökosystems. Für Anfänger ist es günstig, dass Adobe XD seit Mai 2018 mit wenigen Einschränkungen frei verwendet werden kann.

Umdenken,

als ich anfing, an Webdesign zu arbeiten, stand ich vor einem großen Problem. Ich musste mein Denken ändern. Ich hatte ein Design, als der Code fertig war. Tatsache ist, dass dieser Ansatz Sie zum schlechtesten Designer macht.

Wenn Sie im Webdesign arbeiten möchten, müssen Sie flexibel sein. Dies gibt Ihnen die Freiheit, Dinge schnell zu ändern und leicht zu experimentieren. Und das ist wichtig, weil Design ein kontinuierlicher Prozess ist. Sie ändern sich viel, bevor Sie ein großartiges Ergebnis erzielen.

Lernwerkzeuge

Bei der Programmierung verwenden Sie HTML-Elemente wie div, span und input und lassen Sie sie vom Browser visualisieren. Dank der Entwurfswerkzeuge können Sie den Mittelsmann überspringen und visuelle Elemente wie Formen und Text direkt verwenden.

Ich habe die 4 am häufigsten verwendeten Tools ausgewählt, sodass Sie weniger Zeit mit der Suche nach Informationen und mehr Zeit mit der Entwicklung verbringen müssen. Fange so bald wie möglich an zu üben. Im Folgenden werde ich erklären, wie sie funktionieren und wie man sie benutzt.

Werkzeugrechteck Rechteck

(Rechtecke) - die vielseitigste Form. Sie werden sie ständig benutzen. Betrachten Sie dies als ein div.



Das Label-Tool

Wie der Name schon sagt, können Sie mit diesem Tool Text erstellen. Dies ist nicht so einfach, weil ein Textwerkzeug zwei Status hat: einen für Text mit einer Zeile und den anderen für mehrere Absätze. Zum Glück ist es einfach zu lernen, wie man sie richtig benutzt.

Der erste Zustand ist ein einzeiliger Textcontainer, der seine Größe basierend auf Text anpasst. Es ist ähnlich wie <span>, es sei denn, es wird nicht abgeschlossen, es sei denn, Sie machen einen Zeilenumbruch. Der Vorteil dieses Status besteht darin, dass die Größe des Textfelds automatisch anhand der Zeilenhöhe und der Schriftgröße angepasst wird. Verwenden Sie es für alles, was keine bestimmte Breite benötigt und eine Zeile ist. Zum Beispiel einzeilige Header und Beschriftungen.



Das Absatzwerkzeug

Der zweite Zustand ist ein Textcontainer mit einer bestimmten Größe, der sich wie ein <p> mit einer bestimmten Breite oder <p> in einer Gitterspalte verhält. Der Vorteil dieses Status ist, dass Sie die Größe des Textfelds steuern können. Verwenden Sie diesen Status für Absätze und Überschriften in mehreren Zeilen.

Wählen Sie das Werkzeug

Verschieben, verkleinern, duplizieren. Für all das gibt es eine Auswahl. Diese rosa Linien zeigen Ihnen den Abstand zu den umgebenden Elementen. Blaue Linien helfen Ihnen bei der Auswahl der richtigen Elemente.



Werkzeug Linie

Manchmal ist die Linie , bequem zu den verschiedenen Teilen des Designs sind voneinander getrennt worden. Deshalb ist das Linienwerkzeug hier. Sie können stattdessen das Rechteckwerkzeug verwenden, dies ist jedoch nicht so praktisch.



Entwurfstipps und

Layouttechniken Die Layout-

Webentwicklung wird meist als Kopfzeile, Menü, Inhalt und Fußzeile beschrieben. Dies ist ein Teil davon, aber Layout ist etwas mehr. Dies ist die Position der Elemente relativ zueinander innerhalb der Seite.

Bei einem Projekt für Sidemail habe ich die Elemente gleichmäßig innerhalb des Dokuments verteilt. Also sah er besser aus.

Bild

Farben

Um Ihnen zu helfen, die perfekte Farbe für Ihr nächstes Projekt zu finden, beachten Sie die Farbpsychologie (weitere Informationen zu diesem Thema finden Sie unter colorpsychology.org).

Ein weiteres nützliches Werkzeug ist Paletton. Wählen Sie einfach die perfekte Farbkombination aus.

Verwenden Sie Grundfarben und Textfarben, um eine visuelle Hierarchie zu erstellen. Versuchen Sie dunkle oder hellere Farbtöne für Text, wenn Sie einen farbigen Hintergrund verwenden. Im Allgemeinen experimentieren.

Bild

Typografie

Typische Schriftarten wirken sich stark auf das Branding Ihres Projekts aus. Premium-Schriften sehen besser aus als Google-Schriften, aber wenn Sie neu sind, kaufen Sie sie nicht. Auch in Google Fonts finden Sie interessante Dinge.

Es gibt einen Trick, den ich sehr oft verwende, um Text visuell aufzuteilen. Ich mache Großbuchstaben mit großem Abstand zwischen den Buchstaben. Text in Großbuchstaben ist symmetrisch und sieht optisch gut aus. Missbrauche es nicht, es ist schwer zu lesen.

Bild

Homepage-Design oder Landing-Page:

Ich versuche die Versuchung zu vermeiden, viele trendige Elemente zu verwenden. Vielmehr erfinde ich Vorteile und präsentiere sie in Form von Text.

Wenn Sie nach Inspiration suchen, besuchen Sie land-book.com. Dies ist ein Katalog großartiger Seiten, die Ihre Zielgruppe mögen wird. Eine weitere großartige Seite mit Inspiration ist interface.pro. Hier können Sie nach Kategorien sortieren, zum Beispiel nach Preis, 404 oder "über uns".

Bild

Was Ihnen gestern cool erschien, wird morgen schrecklich erscheinen. Sie ändern nicht nur das Design. Das ist völlig normal und wirklich gut. Weil Sie lernen, wachsen und besser werden. Die gestrige Aufgabe ist heute nicht so schwer.

Schlussfolgerungen:

  • Die einzigartige Schrift sieht besser aus und erinnert sich besser als sonst;
  • Die Grafiken sind sehr wichtig, verwenden Sie mindestens ein paar Bilder.
  • Verwenden Sie mehrere Farbnuancen.
  • Sprechen Sie über die Vorteile, nicht über die Funktionalität.
  • Schauen Sie sich um, wenn Sie die Inspiration verloren haben.
  • Denken Sie daran, Design kann Ihr Wettbewerbsvorteil sein - nutzen Sie es und machen Sie etwas Großartiges.

Übersetzung des Artikels Ein Entwicklerhandbuch für Webdesign für Nicht-Designer

Jetzt auch beliebt: