Webdesign-Handbuch für Entwickler

Der Autor des Artikels, dessen Übersetzung wir heute veröffentlichen, sagt, dass er seine erste Website im Alter von 14 Jahren in Form eines Schulprojekts erstellt hat. Dann hatte er eine einfache Aufgabe: eine Website mit Text, Bildern und einer Tabelle zu entwickeln. Normalerweise bezog er sich auf diese Weise auf Schulprojekte: Zuerst vergaß er sie, und als die Frist kam, tat er sie im allerletzten Moment. Diesmal war es jedoch überhaupt nicht so. Er war besonders daran interessiert, wie seine erste Seite aussehen würde. Dann tat er sein Bestes, um alles so zu machen, wie es sollte. Der Autor des Materials sagt, dass er seit jenen alten Zeiten bestrebt war, sicherzustellen, dass das, was er tut, so attraktiv wie möglich aussieht. Dieser Wunsch lebt noch in ihm. Hier möchte er Tipps zum Design von Webseiten geben.

Design

Es kann erkannt werden, es kann nicht erkannt werden, aber die Menschen beurteilen alles nach seinem Aussehen. Wenn das, was Sie tun, gut aussieht, steigen natürlich die Chancen, dass Ihr Projekt das Vertrauen anderer gewinnt, wenn das Wort „gut“ nicht nur sein Aussehen, sondern auch seine Funktionalität beschreiben kann.

Viele Jahre lang habe ich meine eigenen Projekte erstellt und in dieser Zeit immer mehr auf die Entwicklung meiner Designfähigkeiten geachtet und nicht nur auf die Verbesserung meiner Programmierkenntnisse. Code ist wichtig, aber wenn Sie Ihr eigenes profitables Projekt erstellen möchten, müssen Sie viele Probleme lösen, darunter das Design. Ein Einzelentwickler muss sich umfassend entwickeln, um etwas zu erreichen.

Tolles Design kann auf Dribbble nicht viele Likes zusammenstellen . Dies wird zunächst gar nicht bemerkt. Es ist eine Balance zwischen äußerster Einfachheit und etwas Atemberaubendem. Design kann sowohl ein Wettbewerbsvorteil des Projekts als auch einer der Gründe für sein Scheitern sein.

Es geht nicht um Talent

Als ich jünger war, habe ich viel Minecraft gespielt. Ich habe mir das Schöne angesehen, das andere kreieren, aber als ich versuchte, etwas Eigenes zu bauen, sah alles wie eine Kiste aus. Weder Schönheit noch Stil. Und wie kann man in Minecraft überhaupt etwas Schönes machen?

Dann fand ich einen Video-Blogger auf YouTube und erstellte eine Kopie dessen, was er baute. Nach ein paar Wochen formte ich meinen eigenen Stil und konnte schon etwas Eigenes kreieren. Plötzlich sahen meine Entwürfe nicht mehr so ​​aus, als wäre nicht klar, was. Was soll ich sagen, ich habe sogar einen Wettbewerb gewonnen.

Eigentlich habe ich diese Geschichte der Tatsache erzählt, dass Design eine Fähigkeit ist und wie bei allen anderen Fähigkeiten Design beherrscht werden kann.

Werkzeugauswahl

Bei der Programmierung können Sie einen normalen Editor verwenden, um eine Anwendung zu schreiben, die der mit einer leistungsstarken IDE erstellten Anwendung in nichts nachsteht. Die Programmierung in Notepad ist jedoch möglicherweise nicht die unterhaltsamste Aufgabe, und der Entwicklungsprozess dauert wahrscheinlich viel länger als mit mit den richtigen Werkzeugen. Wenn wir über Webdesign sprechen, kann MS Paint die Rolle des Notepad hier spielen, und ich hoffe, dass, wie im Beispiel mit Notepad und Programmierung, nur sehr wenige es zur Lösung von Designproblemen verwenden werden.


Beliebte Webdesign-Tools

Hier sind einige beliebte Webdesign-Tools:

• Sketch ist ein exklusives Tool für MacOS. Wenn Sie eine Parallele zur Welt der Webprogrammierung ziehen, ist dies so etwas wie React for Design. Es besteht das Gefühl, dass die Erwähnung von Sketch in jeder Stelle des Designers vorhanden ist. Dieses Ding kostet 99 Dollar pro Jahr.
• Adobe XD ist ein kostenloses plattformübergreifendes Tool, das in Fortsetzung seiner Programmieranalogie Vue ähnelt. Um Adobe XD herum ist eine Community nicht so groß wie um Sketch, aber dieses Tool zu beherrschen ist sehr einfach.
• Adobe Photoshop ist so etwas wie ein Schweizer Messer in der Welt des Designs, das jeder kennt und das mit jQuery verglichen werden kann. Sie können Adobe Photoshop für 9,99 USD pro Monat verwenden.

Es gibt praktisch keinen Unterschied, ob Sie Sublime oder VS Code zum Schreiben von Code verwenden. Das Gleiche gilt für die Wahl von React oder Vue für die Schnittstellenentwicklung. Das ist Geschmackssache. Gleiches gilt für Designer-Tools. Jeder von ihnen hat seine eigenen Vor- und Nachteile.

Ich benutze Adobe XD. Der Hauptgrund für diese Wahl ist plattformübergreifend. Daher bin ich, wenn ich mich für Sketch entscheiden würde, keine Geisel des Apple-Ökosystems. Darüber hinaus wird Adobe XD von Adobe unterstützt, sodass Sie hoffen können, dass dieses Projekt noch sehr lange bestehen wird. Und für Anfänger ist es besonders angenehm, dass Adobe XD seit Mai 2018 kostenlos verwendet werden kann, wenn auch mit einigen Einschränkungen (obwohl es unwahrscheinlich ist, dass sie Sie sowieso stören).

Über die richtige Stimmung

Das Hauptproblem, das ich beim Einstieg in die Welt des Webdesigns lösen musste, war die Entwicklung der richtigen Einstellung. Zuvor war ich am Designprozess der Website beteiligt. Ich dachte, dass alles nur in einer bestimmten Reihenfolge angeordnet werden sollte. Die Elemente werden von links nach rechts und von oben nach unten platziert. Ein solcher Ansatz ist zwar ein sicherer Weg, ein schrecklicher Designer zu werden.

Mit Entwurfswerkzeugen arbeiten Sie so, als ob jedes Element absolut positioniert wäre. Nach den klaren Konstruktionen, die im Programmcode zu sehen sind, können die vom Designer betriebenen Konstruktionen unorganisiert und chaotisch erscheinen. Aber es muss akzeptiert werden. Dies gibt Freiheit, die Möglichkeit, alles schnell zu ändern und viel zu experimentieren. Und dies ist vielleicht das Wichtigste, da Design ein fortlaufender Prozess ist. Beim Design wird erwartet, dass Sie häufig alles wiederholen müssen, bevor Sie ein hervorragendes Ergebnis erzielen.

Lernwerkzeuge

Beim Schreiben von Code für Webseiten werden HTML-Elemente wie div , span und Dateneingabefelder verwendet, damit der Browser sie in etwas verwandeln kann, das auf dem Bildschirm angezeigt wird. Durch die Arbeit mit Entwurfswerkzeugen erhalten Sie die Möglichkeit, die Mediation zu beseitigen und visuelle Elemente wie geometrische Formen oder Textfragmente direkt zu verwenden.

Ich habe die vier am häufigsten verwendeten Designer-Tools ausgewählt, es ist nicht so viel, so dass Sie nicht zu viel Zeit damit verbringen können, diese Tools zu entwickeln. Tatsächlich wird die Zeit besser für das Design aufgewendet. Das heißt, wenn Sie die Grundlagen schnell verstehen, können Sie sofort mit dem Üben beginnen. Lassen Sie uns anhand von Adobe XD als Beispiel über diese Tools sprechen.

▍Rectangle Tool - Rechtecke

Ein Rechteck ist die am häufigsten verwendete geometrische Figur im Design. Während Sie entwerfen, werden Sie ständig mit ihnen arbeiten. Stellen Sie sich das Rechteck so vor, als wäre es ein HTML- div Element. Rechtecke werden beim Entwerfen einer Vielzahl von Seitenelementen verwendet - von Textfeldern bis zu Containern.


Rechteck

▍Werkzeugtext - Einzeilige Beschriftungen

Auf den ersten Blick scheint die Arbeit mit Texten sehr einfach zu sein. Es gibt jedoch eine Funktion, die darin besteht, dass das Werkzeug zum Arbeiten mit Texten zwei Betriebsarten hat. Eine davon dient zum Erstellen einzeiliger Beschriftungen, die zweite zum Erstellen mehrzeiliger Testblöcke. Glücklicherweise ist das Tool zum Arbeiten mit Texten trotz dieser Funktion leicht zu erlernen und zu verwenden.

Im ersten Modus, der für einzeilige Beschriftungen ausgelegt ist, wird die Größe des Textcontainers an die Größe des darin enthaltenen Textes angepasst. Dies ähnelt dem span Tag, außer dass der Text in einem solchen Container nicht automatisch in eine neue Zeile eingeschlossen wird, es sei denn, Sie verwenden explizit Zeilenvorschübe. Die Stärke dieser Betriebsart besteht darin, dass sich die Größe des Containers automatisch an die Parameter des darin enthaltenen Textes anpasst.

Um ein einzeiliges Textfragment zu erstellen, wählen Sie das Textwerkzeug in der Adobe XD-Symbolleiste aus, klicken Sie auf die Stelle, an der sich der Text befinden soll, und geben Sie ihn ein. In der Regel sollte dieser Modus für einzeilige Beschriftungen verwendet werden, deren Breite automatisch ausgewählt werden kann. Dies sind einzeilige Objektüberschriften und Beschriftungen.


Textwerkzeug - einzeilige Beschriftungen

▍Tool Text - große Textblöcke

Der zweite Modus des Werkzeugs zum Arbeiten mit Text wird verwendet, um Textcontainer einer bestimmten Größe zu erstellen, die sich wie ein p Tag mit einer bestimmten Breite oder wie ein p Tag in einer Rasterzelle verhalten. Die Stärke dieses Zustands besteht darin, dass er die Größe des Textblocks steuern kann. Um ein Textfragment zu erstellen, müssen Sie das Textwerkzeug auswählen und den Bereich auswählen, den das Fragment einnehmen soll. Eigentlich sollte dieser Modus für mehrzeilige Textfragmente verwendet werden.


Textwerkzeug - mehrzeilige Textausschnitte

▍ Werkzeug auswählen - Auswahl von Objekten

Mit dem Auswahlwerkzeug werden Objekte verschoben, in der Größe geändert und kopiert. In der folgenden Abbildung sehen Sie die Hilfselemente dieses Werkzeugs, nämlich rosa Linien, mit denen der Abstand zwischen Objekten bestimmt werden kann, und blaue Linien, an denen Objekte bequem ausgerichtet werden können.


Werkzeug auswählen

▍Tool Line - Zeilen

Manchmal sind die Zeilen sehr nützlich, um beispielsweise Seitenelemente zu trennen. Daher sprechen wir hier über das Linienwerkzeug. Aus technischer Sicht können Sie das Rechteck-Werkzeug für dieselbe Sache verwenden, aber was Sie tun können, das HTML- div Element kann verwendet werden, um alles zu implementieren.


Linienwerkzeug

Design: Empfehlungen und Tricks

▍ Layout

In der Webentwicklung wird das Layout normalerweise durch den Seitenkopf, das Menü, den Seiteninhalt und die Fußzeile dargestellt. All dies sind Teile des Layouts, aber das Layout selbst ist mehr als die Summe dieser Teile. Layout ist, wie Elemente auf einer Seite angeordnet sind.

Als ich beispielsweise die Informationsseite für Sidemail entworfen habe , habe ich die Elemente gleichmäßig im Container platziert. Die folgende Abbildung im unteren Teil zeigt genau diese Entwurfsoption, die ich für erfolgreich halte, und im oberen Teil gibt es eine erfolglose Option. Infolgedessen wurde das, was passiert ist, im Vergleich zu einer anderen Option als etwas Integraleres wahrgenommen. Diese Option sah genauer aus als die, die ich für erfolglos hielt.


Beispiele für erfolgloses und erfolgreiches Layout

▍Farben

Beachten Sie bei der Auswahl der Farben für Ihr nächstes Projekt ein Konzept wie die Farbpsychologie . Um gute Farbkombinationen basierend auf der Primärfarbe zu finden, können Sie das Paletton- Projekt verwenden.

Verwenden Sie zum Erstellen einer visuellen Seitenhierarchie Schattierungen der Vordergrund- und Textfarben. Experimentieren Sie bei Verwendung eines farbigen Hintergrunds mit Schattierungen der für den Text verwendeten Farbe.


Beispiele für die Arbeit mit Farben und Text

▍Typographie

Die für die verschiedenen Beschriftungen verwendeten Schriftarten wirken sich stark auf die Wahrnehmung der Seiten aus. Seien Sie daher bei der Auswahl vorsichtig. In der Regel sehen kommerzielle Schriftarten besser aus als die von Google Fonts. Wenn Sie jedoch gerade erst als Webdesigner anfangen, sollten Sie kein Geld für den Kauf von Schriftarten verschwenden. Selbst unter den Google Fonts finden Sie großartige Optionen.

Um Textfragmente visuell zu trennen, verwende ich häufig die Technik, die darin besteht, dass die Texte von Inschriften in Großbuchstaben mit einem größeren Abstand zwischen den Zeichen erstellt werden. Die Großbuchstaben sind symmetrisch, sie sehen attraktiv aus, sind jedoch schwieriger zu lesen, lassen Sie sich also nicht zu sehr mitreißen.


Beispiele für Großbuchstaben

Homepage- (oder Landungs-) Design

Ich versuche immer, der Versuchung zu entgehen, ein modisches Design zu kreieren, und drücke dann hinein, was ich über die Seite kommunizieren möchte. Stattdessen hebe ich die Vorteile des Projekts (und nicht seine funktionalen Merkmale) hervor, erstelle daraus eine Geschichte und erzähle diese Geschichte auf einer visuell attraktiven Seite.

Nachdem ich verstanden habe, welche Geschichte ich auf der Seite erzählen möchte, suche ich normalerweise nach Inspiration. Eine großartige Inspirationsquelle für mich ist das land-book.com- Projekt, ein umfangreicher Katalog großartiger Designs für Landingpage-Designs, für die Sie stimmen können. Ein weiteres Projekt, bei dem Sie nach Inspiration suchen können, ist interfaces.pro . Sie können Seiten bestimmter Typen auswählen, z. B. Seiten mit Informationen zu Preisen, Seiten 404 oder Seiten mit Informationen zu Websites. Ich schaue mir das alles nur an, bis ich genug Websites finde, die mir gefallen. Das Erscheinungsbild der Seiten entspricht meinen Vorstellungen über den Stil des Projekts, das ich mache.


Landing Page

Nachdem ich mir eine allgemeine Vorstellung davon gemacht habe, was ich brauche, ist es an der Zeit, die schwierige Aufgabe zu lösen, alles zusammen zu sammeln. Leider gibt es keine einfachen Wege. Um etwas Gutes zu schaffen, müssen Sie viel experimentieren und dies tun, bis Ihnen gefällt, was Sie bekommen.

Vielleicht fragen Sie sich, ob dies normal ist, wenn das Design, das vor einer Woche vollständig zu Ihnen passte, Ihnen plötzlich nicht mehr so ​​gut, aber vielleicht völlig inakzeptabel erschien. Dies ist völlig normal, und wenn Sie solche Empfindungen verspüren, ist es sogar gut. Dies liegt an der Tatsache, dass Sie im Bereich Design wachsen, studieren und besser werden. Infolgedessen sieht das, was gestern als entmutigende Aufgabe erschien, heute nicht mehr so ​​kompliziert aus. Denken Sie daran und Sie werden sich nicht wie ein Eichhörnchen in einem Rad fühlen.

▍ Schlussfolgerungen und Empfehlungen

• Die sorgfältige Auswahl von Schriftarten ist eines der kleinen Dinge, die gutes Design von schlechtem unterscheiden.
• Bilder sind wichtig. Versuchen Sie, auf Ihren Seiten geeignete Abbildungen oder Fotos zu verwenden, zumindest in kleinen Mengen.
• Erstellen Sie eine visuelle Hierarchie von Elementen mit Farbtönen. Es reicht nicht aus, nur ein paar Farben zu verwenden, von denen eine die Hauptfarbe und die zweite die Textfarbe ist.
• Verwenden Sie keine zu breiten Behälter. Eine Breite von 1.100 Pixel ist normalerweise ausreichend.
• Der leere Raum zwischen den Elementen ist ein wichtiges Gestaltungselement.
• Die Geschichte, die die Webseite erzählt, sollte auf den Vorzügen des Projekts und nicht auf seinen funktionalen Merkmalen aufbauen.
• Wenn Sie das Gefühl haben, dass Ihre Ideen erschöpft sind, suchen Sie nach Inspiration in anderen Projekten.

Webanwendungsdesign (oder Control Panel)

Wie beim Design der Zielseite müssen Sie beim Erstellen einer Webanwendung nicht sofort auf die Anordnung der Elemente auf der Seite zugreifen. Die betrachtete Situation unterscheidet sich von der vorherigen darin, dass Sie dem Besucher hier nicht die Geschichte erzählen. Dieses Mal erstellen Sie ein Tool, und Ihr Hauptziel ist es, dieses Tool bequem zu gestalten. Nehmen Sie ein Stück Papier und einen Bleistift und zeichnen Sie einen Arbeitsplan für Ihre Anwendung. Überlegen Sie, worauf es ankommt und wie Sie die Arbeit mit dieser Anwendung erleichtern können.

Wenn nötig, machen Sie ein paar Skizzen oder Layouts. Entdecken Sie das Design konkurrierender Projekte und überlegen Sie, was ihnen fehlt. Vielleicht entscheiden Sie sich für etwas, das sie nicht haben, und dies kann zum Wettbewerbsvorteil Ihres Projekts werden. Denken Sie daran, dass Sie sich manchmal Zeit zum Nachdenken geben müssen, bevor Sie Layouts zeichnen und Designoptionen herausfinden.

Der beste Rat, der nicht an die spezifischen Merkmale verschiedener Projekte gebunden ist, die ich hier geben kann, ist die Auswahl eines geeigneten Seitenlayouts. In der Regel verwenden Webanwendungen zwei Ansätze für Seitenlayouts. Die Wahl des einen oder anderen hängt von den Zielen der Anwendung ab. Wir sprechen von Behältern mit fester Breite und von flexiblen Behältern, die den gesamten Bildschirm ausfüllen.


Webanwendung

▍ Behälter mit fester Breite

Ich bevorzuge die Verwendung von Behältern mit fester Breite, da es für den Benutzer einfacher ist, sich auf einen begrenzten Bereich zu konzentrieren, da Sie keine unnötigen Augenbewegungen benötigen, um zu sehen, was sich in diesem Bereich befindet. Anwendungen, die feste Container verwenden, sehen außerdem normalerweise ordentlicher aus, und neue Benutzer solcher Anwendungen sind einfacher zu navigieren. Es ist zu beachten, dass solche Anwendungen aufgrund der begrenzten Breite der Behälter schwieriger zu entwerfen sind.

Hier einige Beispiele für Webanwendungen, die feste Container verwenden: Twitter , Buffer , DigitalOcean , Netlify , GitHub .

▍ Flexible Behälter

Flexible Container eignen sich hervorragend für Webprojekte wie Chats, Tabellenkalkulationsanwendungen oder große Informationsmengen in anderen Formaten. In der Regel ist es beim Entwerfen solcher Anwendungen wichtig, dass so viele Daten wie möglich auf dem Bildschirm angezeigt werden. Der Nachteil flexibler Container ist die Tatsache, dass die große Datenmenge, die auf dem Bildschirm angezeigt wird, den Benutzer verwirren kann.

Beispiele für Anwendungen mit flexiblen Containern sind Slack , Intercom , Hotjar , Google Sheets , Trello und Spotify .

▍ Schlussfolgerungen und Empfehlungen

• Die Auswahl der richtigen Container für den Anwendungsinhalt ist aus zwei Gründen wichtig. Erstens hängt das Seitenlayout davon ab. Zweitens sind ernsthafte Arbeiten erforderlich, um auf Container anderer Typen umzusteigen. Jedes Projekt ist einzigartig und erfordert einzigartige Lösungen. Haben Sie also keine Angst vor Experimenten.
• Streben Sie nach Einfachheit.
• Verwenden Sie Schriftarten, deren Beschriftungen leicht zu lesen sind.
• Verwenden Sie bei der Ausgabe großer Datenmengen eine visuelle Hierarchie.
• Analysieren Sie die Entscheidungen von Wettbewerbern und lassen Sie sie, wenn Sie Mängel feststellen, nicht in Ihrem Projekt erscheinen, oder statten Sie Ihr Projekt auf der Grundlage einer solchen Analyse mit Chancen aus, die zu seinen Wettbewerbsvorteilen werden.

Zusammenfassung

Ein Entwickler, der es gewohnt ist, eher mit Code als mit visuellen Bildern zu arbeiten, kann es schwierig finden, zur Welle des Designs zu wechseln. Aber Design kann man durchaus lernen. Denken Sie daran, dass Design ein Wettbewerbsvorteil Ihres Projekts sein kann. Achten Sie also darauf und erstellen Sie attraktive Websites, mit denen Sie bequem und angenehm arbeiten können.

Liebe Leser! Denken Sie, dass ein einzelner Programmierer gute Designergebnisse erzielen kann?