9 wichtige Webdesign-Tipps für Heimwerker

Grundprinzipien des Webdesigns & Best Practices, die Anfängern aller Niveaus helfen, einen Profi visuell zu entwerfen & schlanke Website für sich.


Webdesign-Tipps für Anfänger

Heutzutage kann jeder Webdesigner sein. Ja, es ist eine kühne Aussage – aber mit einem verbesserten Zugang zu Open-Source-Design-Software wie Gimp, und mit DIY-Baustellenplattformen wie Wix und Weebly, die den Markt überschwemmen, die Grenze zwischen Amateur und gutgläubig Webdesigner ist in letzter Zeit viel dünner und dunstiger geworden. Das Interessante an Kreativität ist, dass sich niemand für Sie entscheiden kann, wenn Sie „bereit“ sind, eine bestimmte Rolle zu übernehmen. Viele Rockstars nahmen nie Musikunterricht; Viele erfolgreiche Künstler haben die menschliche Anatomie nie studiert. und die Mehrheit der Webdesigner da draußen hat keinen formalen Abschluss. Wenn Sie also die Website Ihres eigenen Unternehmens erstellt haben, können Sie dann sicher sagen, dass Sie ein „Webdesigner“ sind? Das müssen Sie selbst bestimmen.

Es ist für jeden möglich, ein Webdesigner mit Plattformen zum Erstellen von DIY-Websites zu sein.

Klicken Sie hier, um zu twittern

Wenn Sie ein Anhänger dieses Blogs sind, haben Sie wahrscheinlich bereits die Entscheidung getroffen, Ihre Website selbst zu erstellen. Während Sie sich möglicherweise völlig überwältigt fühlen von der erstaunlichen Menge an Informationen, die Sie über die Webentwicklung erhalten müssen, können Sie sicher sein, dass Geschäftsinhaber mit nur sehr wenig Designerfahrung wirklich Websites erstellen können, die professionell aussehen. Alles beginnt mit der Befolgung einiger Grundlagen, die bei korrekter Anwendung die Glaubwürdigkeit des Designs und der Benutzererfahrung Ihrer Website erheblich verbessern können.

Was dieser Leitfaden ist (und was nicht)

Um es klar auszudrücken, sprechen wir hier über die Grundlagen des Webdesigns – und werden nicht auf fortgeschrittenere Themen wie Rastersysteme, JavaScript oder CSS-Frameworks eingehen. In diesem Handbuch wird auch davon ausgegangen, dass Sie eine Art Drag & Drop-Website-Builder verwenden, damit Sie eine Website ohne Codierung entwerfen können. Unabhängig davon, ob Sie eine vorhandene Vorlage aus Ihrem Website-Builder verwenden oder von vorne beginnen (eine ehrgeizigere Option für Anfänger), hilft Ihnen dieses Handbuch bei den grundlegenden Prinzipien und Praktiken des Webdesigns, die Sie auf Ihre Website anwenden sollten. Ein einzelner Artikel zum Thema Webdesign wird Sie nicht sofort zu einem Experten machen. Betrachten Sie dies als Ihren ersten Schritt in eine größere Welt.

KURZER TIPP: Grundkenntnisse in HTML und CSS sind für jeden jungen Webdesigner von großem Vorteil. Wenn Sie wirklich in die Codierung einsteigen möchten, empfehle ich das Auschecken W3Schools um mehr über die Stiftung zu erfahren.

Die Grundlagen des Webdesigns für Anfänger

Kommen wir dazu, sollen wir? Hier sind einige der nützlichsten Trends und Richtlinien, die Sie beim Erstellen Ihrer ersten Website beachten sollten:

1. Legen Sie die Maus weg und nehmen Sie einen Bleistift

Ihre Website existiert möglicherweise bereits als eine schöne, vollständige Einheit in Ihrem Kopf. Deshalb springen Sie sofort in Photoshop (oder schlimmer noch in einen Browser und HTML), um sie zu planen. Whoa, whoa – kühle deine Jets für eine Sekunde! Stellen Sie den Wagen nicht vor das Pferd. Nehmen Sie zuerst einen Bleistift und einen Block Papier heraus und beginnen Sie, Ihre Ideen in etwas leicht Greifbares zu verwandeln. Dies ist eine wichtige Phase, um die Struktur Ihrer Website anhand von Rechtecken, Kritzeleien und inspirierten Ideen (oft als “häufig” bezeichnet) abzubilden Wireframing). An diesem Punkt können die Dinge sehr rau sein. niemand außer dir wird es sehen.

Beispiel für ein Website-DrahtmodellMithilfe eines Website-Drahtmodells können Sie ein Layout und eine Struktur für Ihre Website entwickeln, die Benutzererfahrung (UX) verbessern und Zeit sparen.

In dieser Phase ist es viel einfacher, Layouts zu ändern, von denen Sie ursprünglich dachten, dass sie funktionieren würden, aber jetzt entdecken Sie, dass sie auf dem Papier unübersichtlich und verwirrend sind. Dies erspart Ihnen viele Stunden Frust, anstatt die gleiche Entdeckung zu machen, sobald die Site codiert ist und sich in einem Browser befindet. Außerdem ist es sehr hilfreich, eine Webseite zu erstellen, wenn Sie eine Referenz zur Hand haben, die Sie konsultieren können, anstatt blind zu werden.

2. Folgen Sie einer Hierarchie

Es ist eine Tatsache, dass die meisten Websurfer dazu neigen, nur Webseiten zu scannen, anstatt sich die Zeit zu nehmen, um tatsächlich alles zu lesen. Sie müssen dafür bereit sein Den wichtigsten Inhalt an die erste Stelle setzen. Dies bedeutet, dass ein Benutzer beim ersten Laden in der Lage sein sollte, die wichtigsten Informationen auf einer Seite auf einem Bildschirm zu verarbeiten, ohne zoomen oder scrollen zu müssen. Das ist natürlich viel leichter gesagt als getan. Hier sind einige Tipps, die Ihnen helfen, die Bedeutung dieser Designtheorie besser zu verstehen:

Halten Sie den Inhalt “über der Falte”

Wir nennen diesen Startbildschirm des geladenen Inhalts “die Falte” – und alles darunter, was gescrollt werden muss, um gesehen zu werden, wird als zweitrangig betrachtet. Im Allgemeinen befinden sich Ihre wichtigsten Informationen „über der Falte“. Das Wichtigste in diesem Bereich ist, einen Benutzer zum Handeln zu verleiten oder den Anreiz zu schaffen, weiter nach unten zu scrollen.

Verwenden eines “Helden” -Bildes

Heutzutage ist es im Webdesign üblich, diesen Bereich „über der Falte“ mit einem so genannten „Helden“ -Bild oder Banner zu füllen. Hierbei handelt es sich um Hintergrundbilder im Vollbildmodus mit sehr prägnantem und punktgenau überlagertem Text, die normalerweise mit einer Handlungsaufforderung gepaart werden. Möglicherweise könnte der gesamte Zweck der Webseite in diesem Bannerbereich enthalten sein, obwohl er auch als hervorragende Grundlage für den folgenden Inhalt dient.

Heldenbild / Banner Beispiel

“The Fold” kann sich je nach Gerät ändern

Hier werden die Dinge kompliziert – und warum sollten Sie sich nicht überfordern, alles über diese magische Linie hinaus zu passen. Je nach Gerät des Benutzers können die Bildschirmabmessungen erheblich variieren. Ein umwerfendes 5K-Display hat eine vertikale Auflösung von 2880 Pixel, während ein iPhone 5 weniger als die Hälfte davon hat. Dies bedeutet, dass mobile Benutzer nicht so viele Inhalte in ihre Bildschirmfläche einfügen können. (Mehr dazu später.)

KURZER TIPP: Als Faustregel gilt, dass der Inhalt „über der Falte“ in den kleinsten gemeinsamen Nenner der Bildschirmabmessungen passt. Dies wird normalerweise als akzeptiert 768 Pixel der vertikalen Auflösung.

3. Typografie ist Ihr Design

Sofern Sie kein Fotobusiness betreiben, ist Text das wichtigste Element einer Website. Daher ist es wichtig, diesen Teil richtig zu machen. Die Hierarchie Ihrer Webseite hängt stark von der von Ihnen gewählten Typografie ab: Wie Ihre Überschriften, Unterüberschriften und Textkörper einem natürlichen Fluss folgen und sich optisch voneinander unterscheiden. Um einen umfassenden Überblick über Typografie zu erhalten, lesen Sie unseren Leitfaden mit Best Practices. Hier sind einige wichtige Imbissbuden:

  • Stellen Sie sicher, dass der Text ist lesbar (Vermeiden Sie blumige Schriftarten!) und groß genug (normalerweise ungefähr 16px für den Körper).
  • Bleib bei nicht mehr als zwei Schriftarten– und stellen Sie sicher, dass sie gut zusammenpassen!
  • Geben Sie Ihren Absätzen etwas Raum zum Atmen und stellen Sie genug ein obere Polsterung oder Spanne auf Ihren Überschriften, um deutliche inhaltliche Brüche anzuzeigen.
  • Vermeiden Sie lange Textzeilen. Es ist für die Augen einfacher, wenn Absatzzeilen ungefähr nicht mehr als sind 15 Wörter lang– und etwas weniger als bei mobilen Bildschirmen.
  • Serif Schriftarten sind normalerweise nur im Druck am besten geeignet – es sei denn, sie werden in großen Überschriften im Web verwendet.

4. Farben & Kontrast sind entscheidend

Wir haben ausführlich über Farbpsychologie gesprochen, aber das Konzept muss wiederholt werden. Die Farben, die Sie für Ihre Website auswählen, spielen eine enorme Rolle bei der Wahrnehmung Ihrer Marke durch die Benutzer sowie bei der Motivation, Maßnahmen über Ihre Website zu ergreifen (d. H. Dinge zu kaufen). Warum? Nun, jede Farbe ruft bestimmte Emotionen hervor, und entweder aufgrund ihrer Natur oder durch kulturelle Konditionierung sind diese Farben mit bestimmten Arten von Unternehmen verbunden. Wenn eine Kinderspielzeugfirma oder ein Finanzberater ihre gesamte Website stark schwarz lackieren würde, würde dies absolut die falschen Signale an das beabsichtigte Publikum senden. Auf der Rückseite würde ein leuchtendes Orange bzw. ein angenehmes Blau den perfekten Ton und das Bewusstsein für ihre Kunden einfangen.

Beispiel für WebdesignfarbenBlau ist eine Farbe, die Vertrauen und Zuversicht hervorruft, eine beliebte Wahl für finanzbezogene Websites.

Wenn Sie die Farben Ihrer Marke bereits festgelegt haben, verwenden Sie diese auf Ihrer Website. Es ist jedoch am besten, es beizubehalten nicht mehr als drei Farben für Ihre Website; Wie bei Schriftarten möchten Sie dies hier nicht übertreiben, da Ihre Website sonst zu einer multiplen Persönlichkeitsstörung führen kann. Achten Sie auch auf zu viele Farbtupfer auf Ihrer Webseite. Unsere Augen werden wie Honigfallen von ihnen angezogen und können den natürlichen Fluss Ihres Inhalts unterbrechen. Verwenden Sie Farbe nur dann, wenn sie am dringendsten benötigt wird, z. B. für Links oder Schaltflächen.

Zum Thema Kontrast, Es ist wichtig, dass sich Ihr Text vom Hintergrund abhebt. Wenn Sie für Ihre Schriftarten helle Grau-, Gelb- oder Grüntöne verwenden, werden diese mit ziemlicher Sicherheit auf der Seite unsichtbar. Schwarz auf weißem Hintergrund ist die größte Kontrastkombination und sollte im Allgemeinen eingehalten werden.

KURZER TIPP: Es ist am besten zu vermeiden volle Sättigung mit Farben im Web. Pure Red (Hex-Wert # ff0000) ist etwas zu druckvoll für die Augen. In ähnlicher Weise neigt reines Schwarz (# 000000) für Schriftarten dazu, für die Augen zu stark zu vibrieren, während ein leicht verringertes Schwarz (# 333333) das Lesen erleichtert.

Sie möchten auch, dass Ihr Text vor Hintergrundbildern angezeigt wird. Die Verwendung sehr geschäftiger Fotos kann vom Text ablenken. Um dieses Problem zu vermeiden, verwenden Sie entweder weniger detaillierte Fotos oder eine Überlagerung von beispielsweise rgba (51,51,51,0,5), um das Bild unter dem Text weicher zu machen.

Beispiel für eine BildüberlagerungVerwenden Sie eine Überlagerung hinter Text, damit dieser aus dem Hintergrund angezeigt wird.

Der Kontrast spielt auch eine Rolle dabei, wie Benutzer zu bestimmten Schlüsselelementen Ihrer Website hingezogen werden. Ihre wichtigsten Handlungsaufforderungstasten müssen durch Kontrastfarben ins Auge fallen. Ein blaues “Jetzt kaufen!” Der Button verliert seine Dringlichkeit und seinen Wert, wenn er von einer Site verschluckt wird, die überall Blau verwendet. Ein roter Button auf derselben Seite erregt jedoch die Aufmerksamkeit eines Benutzers, indem er “Hey! Klick mich!”

6. Verwenden von Bildern

Die Auswahl der richtigen Bilder für Ihre Website hängt zum Teil von Ihrer eigenen künstlerischen Begabung ab. Es sind jedoch auch intellektuelle Überlegungen zu treffen, die bei Ihrem Auswahlprozess hilfreich sein sollten. Vermeiden Sie es zunächst, Ihre Website mit überflüssigen Fotos zu verschönern, nur weil diese möglicherweise gut aussehen. Denken Sie stattdessen daran, wie jedes von Ihnen verwendete Bild seinen eigenen Zweck erfüllt und was noch wichtiger ist, wie es funktioniert Inhalt. Ein gut ausgewähltes Foto kann Ihre Marke, Ihren Service, Ihr Produkt oder Ihr Publikum viel effektiver vermitteln als Worte. Verwenden Sie Fotos, um Ihren Benutzern zu helfen, etwas zu verstehen, Emotionen hervorzurufen oder Vertrauen und Zuversicht zu schaffen. Die Verwendung aus rein ästhetischen Gründen sollte zweitrangig sein.

Grundlegendes zu Dateitypen & Kompression

Für die Verwendung von Bildern im Web muss ein zusätzlicher Schritt ausgeführt werden. Diese ausgefallenen Fotos erhalten Sie von Websites wie Shutterstock und iStock kann sehr groß sein (mehr als 5.000 horizontale Pixel und mehr als 10 Megabyte), was für den Druck in Ordnung ist, aber für Websites nicht geeignet ist. Nicht jeder hat superschnelles Glasfaser-Internet, daher müssen Sie die Größe Ihrer Bilder reduzieren, um die Ladezeiten zu berücksichtigen (ganz zu schweigen davon, dass 40% der Besucher die Website verlassen, wenn das Laden der Website länger als 3 Sekunden dauert!). In der Regel möchten Sie jedes Ihrer Bilder auf einem halten maximal von 500 Kilobyte in der Größe, obwohl Ihre durchschnittliche Dateigröße wahrscheinlich sein sollte 100 Kilobyte.

  • JPEG ist das Standardformat für Fotos. Es ist ein verlustbehaftetes Format, was bedeutet, dass die Bildqualität beim Komprimieren verringert wird. Wenn Sie ein JPEG für ein Hintergrundbild in voller Breite verwenden, empfehle ich, die horizontale Auflösung beizubehalten nicht weniger als 1200px. Für allgemeine Zwecke, Verwenden Sie keine Bilder mit weniger als 600 Pixel horizontale Auflösung, da sie auf modernen Bildschirmen wahrscheinlich verschwommen erscheint.
  • PNG ist die bevorzugte Wahl für Grafiken oder Bilder, die dies erfordern Transparenz. Es ist ein verlustfreies Format, das sich hervorragend zur Beibehaltung der Bildqualität eignet, aber auch die Dateigröße erhöhen kann. Im Allgemeinen verwenden Sie PNG-Grafiken für Illustrationen, Symbole oder kleinere Bilder, die aufgrund ihrer Transparenz über anderen Elementen gestapelt werden können. Sie benötigen selten ein PNG, das größer als 1000 Pixel ist.
  • SVG (skalierbare Vektorgrafik) ist ein neueres Format, das ersetzt wird GIF und in einigen Fällen sogar PNG. Das Schöne an SVG ist, dass es auf dem Bildschirm so groß oder so klein sein kann, wie Sie es benötigen, und dabei perfekte Klarheit und Schärfe beibehält (und dennoch eine kleine Dateigröße aufweist). Sie sollten SVG für jedes Logo, Symbol oder verwenden Vektorgrafik Auf deiner Webseite; Da Displays mit hoher DPI mittlerweile alltäglich sind, bietet die Schärfe von SVG die beste Bildqualität.

Beispiele für Bilddateitypen

6. Mobile-First Design

Wir haben jetzt eine Zeit erreicht, in der die meisten Menschen Online-Inhalte mit ihren Handys und nicht mehr auf einem Desktop-Computer konsumieren. Infolgedessen hat das Webdesign eine weitaus größere Priorität, um es speziell auf das mobile Erlebnis abzustimmen, was zur Designphilosophie „Mobile First“ geführt hat.

Im Wesentlichen bedeutet dies, dass Sie sich während Ihrer ersten Skizzen- und Planungsphase auf Papier am besten zunächst auf das mobile Layout der Site konzentrieren sollten. Auf kleineren Bildschirmen werden nur die wichtigsten Inhalte angezeigt, die für das Funktionieren Ihrer Website erforderlich sind. Das zwingt dich dazu vereinfachen Ihr Layout und schneiden Sie von Anfang an alle störenden Elemente aus. Denken Sie an Ihren Inhalt “über dem Falz” zurück: Wenn Sie zuerst sicherstellen, dass alle wichtigen Informationen auf den Startbildschirm eines Telefons passen, wissen Sie mit Sicherheit, dass sie auf größere Bildschirme passen. Sobald Sie das grundlegende Layout für Mobilgeräte festgelegt haben, können Sie Verzierungen oder größere Bilder für Desktop-Bildschirme hinzufügen.

Ihr mobiles Layout setzt eher ein vertikales Design voraus, das zum Scrollen inspiriert, als die weite Landschaft eines Desktops. Wenn auf Ihrer Produktseite beispielsweise Einträge in einem Raster von 3 auf Desktops angezeigt werden, werden sie in Ihrem mobilen Layout normalerweise nur als einzelne Spalte angezeigt.

Ja, dies bedeutet, dass Sie grundsätzlich mehrere Layouts für jede Seite Ihrer Website erstellen müssen. Zum Glück sollte jeder gute Website-Builder reaktionsschnelle Vorlagen bereitstellen, mit denen diese Layouts automatisch angepasst werden, sodass Sie sie nur noch optimieren müssen.

KURZER TIPP: Stellen Sie sicher, dass kein einzelnes Element auf Ihrer Website, insbesondere wenn es interaktiv ist, kleiner als ist 44px mal 44px in Größe. Warum? Dies ist das kleinste Ziel, bei dem der Finger noch genau darauf tippen kann.

7. Halten Sie die Dinge in einer Linie

Wenn Elemente sporadisch auf Ihrer Site verteilt erscheinen, liegt dies häufig an einem Ausrichtungsproblem. Stellen Sie sich Ihre Webseite auf einem Millimeterpapier vor. Trennen Sie es in gerade Spalten, indem Sie beispielsweise sechs gerade Linien zeichnen. Sie möchten jetzt sicherstellen, dass die linken Kanten Ihrer Elemente verteilt und nur auf diese sechs vertikalen Linien ausgerichtet sind.

8. Halten Sie es einfach

Es wird oft gesagt, dass das beste Webdesign unbemerkt bleibt; Nur schlechtes Design macht auf sich aufmerksam. Wie bereits erwähnt, ist der wichtigste Aspekt einer Website einfach ihr Text. Wenn Sie eine herausragende Typografie bereitstellen können, die Freude am Lesen macht, müssen Sie wahrscheinlich nicht viel mehr tun. Der Versuch, Ihre Website zu überarbeiten, führt nur zu Unordnung und Komplikationen.

Sind die Kastenschatten notwendig? Die verrückten, verzierten Muster? Die Dutzende von Farben? Wahrscheinlich nicht.

9. Große offene Räume

Ihr Inhalt braucht Raum zum Atmen. Leerraum ist die vorherrschende Designwahl für moderne Websites: weite, offene Räume des Nichts, um Bereiche zwischen Inhalten aufzufüllen. Auf diese Weise können Sie Informationen besser verarbeiten und überflüssige Texte und Bilder entfernen, um die Website sauber zu halten.

Fazit

Webdesign kann ein weitläufiges Feld von Technologie zum Lernen, Konzepten zum Üben, Sprachen zum Lernen und Kunst zum Beherrschen sein. Erst mit der Erfahrung werden all diese Komponenten Sinn machen, aber Sie sind bereits auf einem guten Weg, wenn Sie nur die Grundlagen verstehen, die eine gute Website zum Funktionieren bringen. Ich hoffe, dass dieser Leitfaden als Ausgangspunkt dient und Ihnen das Vertrauen gibt, Ihre Website selbst in die Hand zu nehmen und so zu gestalten, wie es nur ein Geschäftsinhaber am besten weiß.

Ein Designer wird geboren!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map