• Haupt / Computing

Holen Sie sich das perfekte Website-Layout in 27 Schritten

Seite 1 von 2: Website-Layout: Erste Schritte und Design des Workflows

• Website-Layout: Erste Schritte und Design des Workflows
• Website-Layout: Design-Ansatz und Abschluss

Das Entwerfen eines Website-Layouts muss nicht schwierig sein, insbesondere wenn Sie die häufig zu vermeidenden Fehler kennen. In diesem Beitrag werden die Schritte beschrieben, die Sie ausführen müssen, um das perfekte Website-Layout zu erreichen. Wir werden behandeln, was jeder neue Website-Builder wissen und tun sollte, bevor er ein neues Projekt startet, und was er beachten sollte, um ein Verrutschen zu vermeiden.

Diese Schritte umfassen nicht nur Designaspekte, sondern auch allgemeine Workflow-Tipps. Auf dieser Seite erfahren Sie, wie Sie beginnen und welche wichtigen Schritte im Entwurfsworkflow ausgeführt werden Seite 2 Sie finden allgemeine Ratschläge zur Gestaltung des Website-Layouts sowie Tipps zum Abschluss eines Projekts. Befolgen Sie diese Ratschläge und Sie sind bald auf dem Weg, professionelle Website-Layouts zu erstellen. Vielleicht möchten Sie auch nachlesen Atomic Design , um Ihre Site zu strukturieren.

Suchen Sie noch einen Gastgeber? Schauen Sie sich unseren Leitfaden zum an beste Website-Hosting-Dienste und das beste Website-Builder jetzt sofort. Und es wird hier nicht behandelt, aber vergessen Sie Ihre Fehlerseiten nicht! Schauen Sie sich unsere Auswahl an am besten 404 Seiten für Inspiration.

Einstieg

01. Definieren Sie, was Erfolg bedeutet

Bevor Sie mit der Arbeit beginnen, müssen Sie wissen, wofür Sie entwerfen. Neben der Beschreibung der Website müssen Sie die Erwartungen kennen. Nehmen Sie zum Beispiel eine Nachrichtenseite. Was ist das Ziel? Soll es so viele Anzeigenimpressionen wie möglich machen oder das beste Leseerlebnis bieten? Wie werden diese Ziele gemessen?

Gute Redesigns sind nicht unbedingt die auffälligsten, sondern diejenigen, die die Leistung im Laufe der Zeit verbessern. Das Gespräch mit Ihren Kunden, bevor Sie mit dem Entwurf beginnen, ist der Schlüssel zur Definition all dessen. Sie müssen lernen, was ihre Anliegen und Ziele jenseits der schriftlichen SOW (Arbeitserklärung) sind.

02. Verstehe die aktuelle Seite

Meistens geschieht die Teilnahme eines Designers an einem Projekt nicht isoliert. Kunden werden Sie nicht immer kontaktieren, um etwas von vorne zu beginnen. In den meisten Fällen müssen Sie das derzeit vorhandene System verstehen. Wenn Ihr Projekt es herausfordern soll, finden Sie Möglichkeiten, es weiterzuentwickeln, oder folgen Sie ihm so, wie er ist.

Die Möglichkeiten sind grenzenlos. Zu verstehen, was aus gestalterischer Sicht vorhanden ist, ist der Schlüssel, wenn Sie schnell vorankommen und erkennen möchten, wo die Innovationsmöglichkeiten liegen, anstatt das, was etabliert wurde, in Frage stellen zu müssen und als jemand herauszukommen, der die Anforderungen nicht verstehen kann.

03. Teilen Sie Designs frühzeitig mit Kunden

Wenn Sie ein interaktives Konzept oder ein Design-Look & Feel vorschlagen, müssen Sie sicherstellen, dass Sie und der Kunde so schnell wie möglich auf derselben Seite sind. Vermeiden Sie es, zu viel Zeit mit einem Konzept zu verbringen, bevor Sie es dem Kunden mitteilen.

Sobald das ursprüngliche Konzept genehmigt ist, können Sie sich ein wenig entspannen und mit der Produktion beginnen. Wenn sich der Kunde nach der Präsentation des ersten Konzepts nicht in das Konzept verliebt, sollten Sie genügend Feedback einholen, um ein zweites, angemesseneres Konzept auf den Tisch zu bringen.

Workflow entwerfen

04. Zuerst das Layout angehen

Dies scheint sehr offensichtlich zu sein, aber ich habe zu oft festgestellt, dass Designer direkt in ihre Arbeit einsteigen, bevor sie über das Problem nachdenken, das sie zu lösen versuchen. Beim Design geht es darum, Probleme zu lösen, und diese Probleme können nicht durch Farbverläufe oder Schatten gelöst werden, sondern durch ein gutes Layout und eine klare Hierarchie.

Denken Sie über den Inhalt, das Layout und die Funktionalität nach. Stellen Sie sicher, dass diese Gedanken mit den Zielen Ihres Kunden übereinstimmen, und teilen Sie sie gerne mit.

05. Beginnen Sie mit dem Skizzieren eines Frameworks der obersten Ebene

Wenn ich gebeten werde, ein Erscheinungsbild für ein Website-Layout zu erstellen, erstelle ich zunächst ein Framework auf oberster Ebene, das alle Designprobleme löst. Das Framework ist die Benutzeroberfläche, die den Inhalt umgibt und dem Benutzer hilft, Aktionen auszuführen und durch ihn zu navigieren. Es enthält die Navigation und Komponenten wie Seitenleisten und untere Leisten.

Wenn Sie sich Ihrem Design aus dieser Perspektive nähern, haben Sie ein klares Verständnis dafür, was Ihr Layout benötigt, wenn Sie Abschnitte außerhalb der Homepage entwerfen.

06. Fügen Sie ein Raster hinzu

Es ist so einfach wie es klingt. Bevor Sie mit dem Entwerfen beginnen, benötigen Sie ein geeignetes Raster. Es gibt keine gültigen Gründe, um ohne Raster zu beginnen - und wenn Sie dies nicht tun, kann ich Ihnen versichern, dass das Design nicht so gut aussieht. Ein Raster hilft Ihnen bei der Strukturierung des Layouts der verschiedenen Abschnitte. Es führt Sie durch die spezifischen Anforderungen an die Bildschirmgröße und hilft Ihnen beim Erstellen von reaktionsschnellen Vorlagen, sodass Sie hinsichtlich des Abstands und vieler anderer Designprobleme konsistent sind.

Um herauszufinden, wie das geht, schauen Sie sich diese Anleitung an Erstellen eines Rasters, das sich an alle Bildschirmgrößen anpasst .

07. Wählen Sie Ihre Typografie

Das Erforschen verschiedener Schriftarten und Farben ist Teil der Entdeckungsphase eines Projekts. Im Allgemeinen würde ich empfehlen, nicht mehr als zwei verschiedene Schriftarten in einer Website zu verwenden, obwohl dies wirklich von ihrer Art abhängt. Wählen Sie eine Schriftart, die für große Textblöcke leicht zu lesen ist, und spielen Sie spielerischer mit Titeln und Handlungsaufforderungen. Auf der Suche nach Inspiration? Schauen Sie sich unsere Zusammenfassung von perfect an Schriftpaarungen oder Liste von kostenlose Schriftarten . Haben Sie keine Angst vor der Verwendung großer Schriftarten und seien Sie kreativ und konsistent bei der Verwendung von Typografie.

08. Wählen Sie Ihr Farbthema

Während der Auswahl einer Reihe von Schriftarten sollten Sie untersuchen, welche Farben in der Benutzeroberfläche, den Hintergründen und dem Text verwendet werden. Ich empfehle einen begrenzten Satz von Farben und Tönen für die allgemeine Benutzeroberfläche.

Es ist wichtig, diese abhängig von der Funktionalität der einzelnen Elemente konsistent im gesamten Website-Layout anzuwenden. Denken Sie an das Layout von Websites wie Facebook, Twitter, Quora und Vimeo. Neben der Benutzeroberfläche sollte es keine Farbbeschränkung für Abbildungen oder grafische Details geben, solange diese die Funktionalität der Komponenten nicht beeinträchtigen.

Wenn Sie nicht weiterkommen, schauen Sie sich unsere Liste an die besten Farbwerkzeuge für Webdesigner .

09. Vereinfachen Sie das Layout

Je einfacher die Struktur der Site ist, desto einfacher ist die Navigation für Benutzer. Jeder Abschnitt muss eine Geschichte erzählen; Es braucht einen Grund und ein Endergebnis für den Benutzer. Das Layout soll dem Inhalt helfen, die wichtigsten Teile dieser Geschichte hervorzuheben.

In Wirklichkeit sollte es auf einer Seite nicht zu viele Handlungsaufforderungen geben - alles sollte zu dem endgültigen 'Was kann ich hier tun?'

Überlegen Sie sich das einfachste Layout, das Sie sich für einen einfachen Zweck vorstellen können, und fügen Sie die erforderlichen Komponenten hinzu. Am Ende werden Sie überrascht sein, wie schwierig es ist, es einfach zu halten.

10. Verfeinern Sie jede Komponente

Behandeln Sie jede Komponente so, als könnte sie einem Designwettbewerb präsentiert werden. Wenn Sie auf jede Komponente achten, ist das Ganze mehr als die Summe seiner Teile. Ich muss zugeben, dass dieser Rat nicht mein ist. Ich habe es bei einer früheren Agentur gehört und war schockiert darüber, wie klar und wahr diese Aussage war.

Jede Komponente muss so gestaltet sein, als ob sie als beste Komponente aller Zeiten für sich allein stehen könnte. Manchmal lassen Designer bestimmte Teile einer Website bis zum letzten Mal auf ihrer To-Do-Liste und zeigen ihnen am Ende nicht viel Respekt.

11. Führen Sie Kunden durch Ihre Lösungen

Vermeiden Sie große Enthüllungen Ihrer Arbeit. Eines der Ziele der häufigen Kommunikation mit dem Kunden ist es, Überraschungen bei der Offenlegung Ihrer Arbeit zu vermeiden. In den Zeiten, in denen ich meine Fortschritte vorgestellt habe, fand ich es nützlicher, sie auf eine Reise mitzunehmen und zu zeigen, wo ich angefangen habe, welche Überlegungen ich beim Navigieren durch diese oder jene Herausforderung hatte und wo ich schließlich gelandet bin, anstatt nur zu zeigen das Ende der Reise ohne Kontext.

Auf diese Weise werden Sie feststellen, dass sie entweder mit Ihren Schlussfolgerungen übereinstimmen oder irgendwann während Ihrer exemplarischen Vorgehensweise auf einen Fehler oder eine zusätzliche Variante hinweisen, die Sie möglicherweise nicht berücksichtigt haben. In beiden Fällen führen Sie ein Gespräch und der Kunde fühlt sich mehr investiert, da er Teil des Prozesses ist.

12. Denken Sie in Bewegung

Bewegung ist wichtig für die Gestaltung interaktiver Erlebnisse. Kein Design kann mehr allein oder als statische Komposition beurteilt werden. Jede Komponente wird durch ihre Beziehung zum System definiert, und diese Beziehung erfordert Bewegung, um richtig vermittelt zu werden. Bewegung kann dynamische Effekte auf Inhalte oder interaktive Zustände in Ihrem Layout veranschaulichen. Für diesen zweiten Zweck empfehle ich, Ihre Entwürfe etwas weiter in das Prototyping einzubeziehen.

13. Prototyp, Prototyp, Prototyp

Prototyping ist der beste Weg, um Interaktionen und Technologie zu testen. Da sind viele Prototyping-Tools Das macht es heutzutage einfach und Sie müssen kein Coding-Guru sein, um effektive Prototypen zu erstellen. Dies ist eine weitere Möglichkeit, Ihren Kunden mit Konzepten und Ideen zu begeistern, die sonst viel Erklärung benötigen würden.

Nächste Seite: Designansatz und Abschluss

• 1
• zwei

Aktuelle Seite: Website-Layout: Erste Schritte und Design des Workflows

Nächste Seite Website-Layout: Design-Ansatz und Abschluss