Share
Willkommen zur achten Lektion unserer Web Design for Kids-Serie, "Design-Grundlagen".!
In dieser Serie haben wir uns darauf konzentriert, ein Design zum Leben zu erwecken, aber wir haben noch nicht über die Entscheidungen gesprochen, die anfangs in dieses Design eingegangen sind. In diesem Tutorial werden wir einige der Grundlagen durchgehen Design-Konzepte das ist Teil einer guten Website.
Vergessen Sie nicht, Fragen in den Kommentaren am Ende dieser Seite zu stellen!
Etwas anderes, worüber wir bisher viel gesprochen haben, ist das Nutzer (oder Besucher). Jede Entscheidung, die wir im Webdesign treffen, und jedes Designkonzept, über das wir in diesem Tutorial sprechen, haben alle das gleiche Ziel: Die Website so benutzerfreundlich und verständlich wie möglich zu machen.
Ist dieser Benutzer zufrieden??Beim Design geht es darum, Probleme zu lösen. Wenn es unseren Benutzern schwerfällt, unsere Website zu nutzen, verlassen sie dies einfach. Es ist unsere Aufgabe, alle Schwierigkeiten für sie zu beseitigen, sie leicht lesbar zu machen und ihnen insgesamt eine überaus angenehme Erfahrung zu bieten. Unsere Entscheidungen beziehen sich auf Inhalte, Organisation, Layout, Leerzeichen, Grafiken, Farben und Typografie.
Inhalt ist der wichtigste Teil des Webdesigns. Es spielt keine Rolle, wie schön unsere Website aussieht, wenn wir keine Inhalte haben, die die Nutzer lesen möchten. Eine Frage, die wir uns stellen können, wenn Sie eine Website erstellen möchten, ist „Brauchen die Leute das?“ Und wenn ja, „Welche Informationen sind das? wesentlich?”.
Es kann verlockend sein, so viel Inhalt wie möglich in eine Website aufzunehmen. Durch das Aufräumen und Eingrenzen von Inhalten kann der Benutzer am Ende mehr Informationen erhalten, da das Wichtige auf der Seite nicht verloren geht.
Sobald wir unseren Inhalt bereit haben, müssen wir ihn in Kategorien oder relevanten Gruppen organisieren, damit der Benutzer alles problemlos finden kann.
Die beste Website wird sehr natürlich ablaufen und sicherstellen, dass der Benutzer nicht zu sehr darüber nachdenken muss, wo sich etwas befindet.
Die Tuts + Town-Website hat nicht viel Inhalt, daher konnten wir alles zentrieren und unsere schönen Bilder hervorheben. Wenn wir jedoch mehr Text auf der Website haben, funktioniert dieses Layout möglicherweise nicht so gut.
Um sicherzustellen, dass unsere Website für den Benutzer einfach zu navigieren ist und Spaß macht, müssen wir darüber nachdenken schauen und fühlen. Hier kommen Bilder, Hierarchien (die deutlich machen, wie wichtig alles im Vergleich zu allem anderen ist), Typografie und Farbe ins Spiel.
An dieser Stelle wissen wir alles über die Verwendung von Bildern auf einer Website. Wir haben vier Bilder auf unsere Tuts + Town-Site gestellt und durch die verschiedenen Bildtypen gegangen, die in einem vorherigen Tutorial im Web verwendet werden sollen.
Wann und wo diese Bilder und Grafiken verwendet werden müssen, ist ebenfalls wichtig. Alle auf unserer Tuts + Town-Site enthaltenen Bilder waren neben dem Inhalt, mit dem sie platziert wurden, sinnvoll. Zum Beispiel handelt es sich bei unserer Website um Tuts + Town. Wir haben also ein hübsches Bild ganz oben in einem wichtigen Gebäude unserer Stadt. Die drei Bilder, die folgen sollen, beziehen sich auf die angrenzenden Unternehmensgruppen: Hotels, Restaurants und allgemeine Einkaufsmöglichkeiten.
Wir haben diese Bilder verwendet, um dem Benutzer ein besseres Gefühl für die Gefühl der Stadt sowie die Einkaufsmöglichkeiten in unseren schönen Gebäuden. Es ist wichtig, dass wir die Aufmerksamkeit eines Benutzers nicht mit einem Bild erregen, das nichts mit dem Inhalt zu tun hat, mit dem es gerade ist.
Icons sind kleine Grafiken, die es gewohnt sind vertreten etwas.
Ein gutes Symbol ist gut verstanden und kann das Auffinden wichtiger Informationen auf einer Website erheblich beschleunigen.
Hier einige Beispiele besonders nützlicher Symbole:
Wissen Sie, was diese Symbole wahrscheinlich bedeuten??Es gibt so viel, dass wir ohne Text kommunizieren können. Wenn Sie in der richtigen Situation anstelle von Text Icons verwenden, erhalten Sie eine sauberere und benutzerfreundlichere Website.
Bei der visuellen Hierarchie geht es darum, das Herauszuheben und die Beziehung zwischen Informationen aufzuzeigen. Die Hierarchie der Teile einer Website kann durch eine Reihe verschiedener Stilmöglichkeiten angezeigt werden, z. B. Farbe, Größe, Verwendung von Leerzeichen und Positionierung. Alle diese Auswahlmöglichkeiten helfen dem Benutzer, zu sagen, was äußerst wichtig ist, was nicht so wichtig ist und welche Informationen miteinander in Beziehung stehen.
Hierarchie zeigt sich nicht nur an der Größe unseres Textes und der Bilder, sondern auch an der Entfernung voneinander. Ähnliche Inhalte sollten nahe beieinander gruppiert und von nicht verwandten Inhalten distanziert werden.
Dieses Bild von Tuts + Town Sky wurde entwickelt, um sicherzustellen, dass der Ballon zuerst die Aufmerksamkeit des Betrachters erweckt, gefolgt von den Wolken. Alles andere in den Bildern wurde weniger klar gemacht, um sicherzustellen, dass der Ballon und die Wolken stärker hervorstechen.
Das obige Bild zeigt eine Änderung in dem, worauf wir uns zuerst konzentrieren. Stellen Sie fest, dass Sie diesmal zuerst die Wolken sehen, dann den Ballon?
Es ist viel los in diesem Bild und wir sind nicht ganz sicher, wo wir zuerst suchen müssen. Es gibt keine Farbänderung, keine Organisation und keine Abstände, die uns sagen, worauf es ankommt.
Whitespace ist der leere Platz auf einer Site. es tut nicht haben aber weiß sein! An diesen Stellen gibt es keinen Text und keine Bilder. Wo wir uns für diesen leeren Bereich entscheiden, ist wirklich wichtig, weil er bestimmt, welche Teile einer Website hervorstechen und wie gut wir den Inhalt lesen können.
Das Bild oben ist ein Beispiel für eine Site, die Whitespace nicht gut verwendet. Es gibt viele Inhalte und Bilder und nicht genug Platz zwischen ihnen, um uns das Wichtigste zu zeigen.
Mal sehen, ob wir das aufräumen können!
Viel besser. Wir haben einige nicht wesentliche Inhalte weggeworfen und eine erstellt Hierarchie mit viel mehr Leerzeichen und einer besseren Organisation, die das Lesen erleichtern.
Der Whitespace, den wir auf unserer Tuts + Town-Site verwendet haben, ist eigentlich hellgelb.
Rechts und links neben der Seite sowie zwischen den Bildern befinden sich große Leerstellen. Dieser Bereich hilft, unsere Inhalte hervorzuheben und gleichzeitig sicherzustellen, dass nichts zu unübersichtlich wird.
Merken! Es ist genauso wichtig darüber nachzudenken, was ist nicht auf der Website als was ist, und das ist, wo Whitespace ins Spiel kommt.
Typografie und Farbe sind für das Webdesign so wichtig, dass sie eigene Tutorials haben werden, die diesem folgen sollen. Wir werden sie hier kurz ansprechen.
Typografie ist die Kunst, den Typ so auszuwählen und anzuordnen, dass er so ansprechend und lesbar wie möglich wird. Auf unserer Tuts + Town-Site gibt es zwar nicht viel Text, aber bei der Auswahl und Anordnung der Schrift wurde viel darüber nachgedacht.
Die Wahl der Farben ist auch ein sehr starker Teil des Designs. Farben haben Bedeutung und kann dazu beitragen, dass Benutzer bestimmte Gefühle in Bezug auf eine Marke oder Website erhalten. Die Tuts + Town-Farben sorgen für ein lustiges und einladendes Gefühl für unsere Stadt.
Aber wir werden bald mehr darüber reden!
In diesem Tutorial haben wir einige wirklich wichtige Design-Konzepte angesprochen. Nachdem wir den Inhalt vorbereitet haben, müssen wir diesen Inhalt auf einfachste und geordnetste Weise dem Benutzer präsentieren.
Beim Design geht es darum, die Dinge für die Menschen einfach und angenehm zu gestalten. Dies ist uns mit unserer Tuts + Town-Website durch Layout, Bilder, Farben und Leerzeichen gelungen.
Als nächstes werden wir diskutieren Typografie, die Kunst, den Typ auszuwählen und anzuordnen; einer der interessantesten und lustigsten Teile des Designs.
Wir sehen uns in der Stadt!
Accentsconagua