Tipps zur Verbesserung Ihrer Website-Design-Übergabe

Beim Erstellen einer Website finden einige Phasen statt. Wenn wir es vereinfachen und eine Standard-Website betrachten würden, wären die Phasen:

1. Die Notwendigkeit - Jemand benötigt aus dem einen oder anderen Grund eine Website.
2. Brainstorming - Festlegen der allgemeinen Struktur, der Ziele und mehr.
3. Der Vorschlag - Der Kunde findet einen Freiberufler oder eine Agentur, um die Website zu erstellen.
4. Inhalt - Artikel, Bilder usw., alles, was auf Zielseiten, Sitemaps usw. zu finden ist.
5. Design - Eine Person / ein Team arbeitet an Design und Layout basierend auf dem Inhalt.
6. Entwicklung - Eine Person / ein Team entwickelt den funktionalen Teil der Site basierend auf dem Design.

Meistens können Sie es hier verwechseln. Sie können die Reihenfolge der durchgeführten Aktionen ändern, und das Team kann dennoch hervorragende Ergebnisse erzielen. Dies kann jedoch schwierig sein, wenn Mitarbeiter verschiedener Agenturen an demselben Projekt arbeiten. Dies ist der Hauptgrund, sich für eine Allround-Agentur zu entscheiden, die sich um alles kümmert.

Für diesen Artikel gehen wir von Schritt 5, dem Entwurf, zu Schritt 6, der Entwicklung. Hier können Dinge schief gehen, indem die Entwicklung verlangsamt und das, was zuvor im Planungsprozess beschlossen wurde, durcheinander gebracht wird.

Die Dinge, die ein Designer berücksichtigen sollte

"Sollten Designer wissen, wie man programmiert?" ist eine häufige und es ist eine sehr vernünftige Frage. Wenn ein Designer den Code dahinter versteht und ihn im Idealfall (bis zu einem gewissen Grad) produzieren kann, kann er dem gesamten Team dabei helfen, das Projekt schneller abzuschließen.

Hier einige Gründe, warum dies der Fall ist:

1 - Am Ende landet alles im Browser.

Alle Designs, die Sie in Figma, Adobe usw. erstellen, werden im Browser angezeigt. Alle Browser verwenden eine Art Programmiersprache, die als HTML / CSS bezeichnet wird, um eine Seite zu rendern. Wenn Javascript verwendet wird, können Sie Ihre Designs interaktiv gestalten.

Der wichtige Hinweis ist, dass jedes Design in HTML / CSS machbar sein sollte. Viele talentierte Front-End-Entwickler können fast alles implementieren, solange die Technologie dies zulässt. Aber denken Sie daran: Es geht nicht immer um "Können Sie es schaffen?", Sondern um "Können Sie es gut machen und es wartbar machen".

2 - Konsistenz

Wartbar zu sein ist das Geheimnis eines erfolgreichen Projekts. Sie möchten nicht stundenlang vorhandene Site-Elemente optimieren und neue hinzufügen, da die Codebasis ein Chaos ist. Manchmal geraten extrem komplexe Designs mit wenig bis gar keinen wiederverwendbaren Komponenten in Unordnung.

Einige Tipps für Webdesigner:

• Design mit Blick auf Komponenten. Die meisten Tools bieten jetzt diese Funktionalität (Figma, Adobe XD, Sketch). Zwingen Sie sich, sie öfter zu verwenden, bis es nicht mehr ärgerlich wird, dies zu tun.
• Elemente gut ausrichten. Ähnliche Abschnitte sollten den gleichen Abstand voneinander haben. 80px ist beispielsweise eine gute Trennung. Platzieren Sie Abschnitte nicht zufällig mit 80 hier, 86 dort, 92 auf einem dritten und 78 auf dem anderen. Halten Sie es ordentlich und ordentlich.
• Verwenden Sie ein Gitter! Alle Werkzeuge bieten ein Rastersystem. Idealerweise ein 12-Spalten-Raster.
• Präsentieren Sie Ihr Design auf Breitbildschirmen (1920px oder mehr). Dies hilft den Entwicklern herauszufinden, wie jeder Abschnitt und ihre Hintergründe funktionieren.

3 - Gewicht der Website

Wir alle wollen eine schnelle Website, oder? Nun, der Designer ist auch ein Teil davon. Bedenken Sie Folgendes: Eine Website mit 8 riesigen hochauflösenden Bildern, vier Videos und animierten Elementen. . Viel Glück bei der pünktlichen Optimierung. Dies ist zwar machbar, erfordert jedoch zusätzliche Entwicklungszeit und -techniken, um Bilder und Videos verzögert zu laden, Medien beim Hochladen zu optimieren, bessere Bilddateiformate zu unterstützen und intelligente Animationsansätze für hohe Leistung hinzuzufügen.

Wenn die Entwickler nicht sehr erfahren sind oder sich keine Sorgen um die Geschwindigkeit machen, kann Ihre Website auf Smartphones und Laptops mit niedrigem bis mittlerem Level extrem verzögert sein.

Wie kann ich den Entwicklern helfen?

Als Designer ist es eines Ihrer Ziele, die Entwicklung einfacher und schneller zu gestalten und gleichzeitig das Erscheinungsbild der Website beizubehalten.

Sie sollten überlegen, was im Web leicht zu tun ist.

• Boxen - Es sind alles Boxen. Sie können einige Ecken abrunden, ja, Sie können Ellipsen (die in einem Feld definiert sind) und mehr erstellen. Wenn Sie sich jedoch für komplexere Formen entscheiden, die mit dem Layout interagieren, werden die Dinge schwierig.
• Das Animieren einer genauen Position ist schwierig - Stellen Sie sich vor, Sie möchten auf ein Bild klicken und es dann auf die andere Seite des Textes verschieben? Es klingt "einfach", ist es aber nicht. Die Position, an die das Bild verschoben wird, muss relativ zum Site-Container bleiben, der sich je nach Ansichtsfenster und mehr ändert. Und was passiert dann, wenn das Bild größer ist?
• Das Animieren von Boxabmessungen wirkt sich auf das Layout aus. Dies bezieht sich auf jede Änderung der Reihenfolge der Elemente während einer Animation. Dies kann den Browser extrem belasten und führt häufig zu einer enormen Verzögerung.

Betrachten Sie unterschiedliche Inhalte!

Wie würde das Design mit 2x dem Text aussehen? Oder als Porträtbild statt als Landschaftsbild? Sie wissen nie, was die Redaktion hochladen wird. Sollte es Einschränkungen wie das Seitenverhältnis oder sogar die Bildränder geben? Wenn Sie können, präsentieren Sie dies im Design.

Stellen Sie Ihre Designs in Tools wie Zeplin bereit

Die meisten Designtools wie Figma oder Adobe XD bieten die Möglichkeit, Designs mit Entwicklern zu teilen. Von dort aus kann das Front-End-Team Farben, Typografieeinstellungen, Abstände und andere visuelle Eigenschaften der Ebenen überprüfen, sodass sie sich sehr genau an die Designs halten können.

Stellen Sie andere Elemente wie Schriftarten oder Videos bereit

Wenn Sie auf der Site eine bestimmte Schriftart verwendet haben, stellen Sie diese den Entwicklern zur Verfügung. Wenn es lizenziert ist und über bestimmte URLs zugänglich ist, stellen Sie sicher, dass Sie dies auch teilen. Für einen Entwickler ist es wichtig, vom ersten Tag an mit den richtigen Schriftarten zu arbeiten. Wenn es Videos gibt - teilen Sie diese auch! Würden die Videos auf YouTube, Vimeo oder selbst gehostet sein?

Entscheide dich nicht für "Pixel perfekt"

Diese Idee, das endgültige Erscheinungsbild der Website perfekt mit dem Design übereinzustimmen, ist eine einfache Möglichkeit, Ihr Entwicklerteam dazu zu bringen, Sie zu hassen, und kann jede Chance zerstören, pünktlich live zu gehen. In fast allen Fällen wird das Design NICHT perfekt sein. Es ist unmöglich 100% sicher zu sein, dass Sie vor jeder Taste genau 18px Abstand haben? Und nicht 19px? Oder dass jeder einzelne Titel 38px und nicht 37px ist? Oder vielleicht, dass jeder Rand #ddd ist und dass es keinen gibt, der schwarz ist, aber eine Deckkraft von 15% hat?

Entwickler fassen hier und da kleine Fehler wie diese zusammen, um die Konsistenz auf der gesamten Website zu gewährleisten. Sie bauen Komponenten ein, die denselben Regeln folgen. Solange es in einem bestimmten Fall keine offensichtliche absichtliche Änderung gibt, sollte es keinen Grund geben, warum ein Element nicht überall gleich sein kann.

Am Ende sollte die codierte Website dem allgemeinen Erscheinungsbild des Designs folgen.

Hinterlassen Sie Kommentare im Design

Wenn Sie möchten, dass ein bestimmtes Element wie Registerkarten, Akkordeons, Schieberegler und dergleichen interaktiv ist, nehmen Sie sich einige Sekunden Zeit, um aufzuschreiben, wie es auf dem Desktop, auf dem Handy und was anklickbar sein soll, falls es ausgetauscht wird.

Denken Sie wie ein Benutzer

Wenn Sie fertig sind, halten Sie für eine Sekunde inne und stellen Sie sich vor, dass Sie die Site verwenden. Lesen Sie von oben nach unten, scrollen Sie nach unten und klicken Sie auf eine Stelle, um mehr zu sehen. Fehlt möglicherweise etwas im Workflow? Gibt es eine Ansicht eines bestimmten Elements, das sich bei der Benutzerinteraktion ändert? Wenn dies zutrifft und es kein Design gibt, überlassen Sie es Ihren Entwicklern, es herauszufinden, was den Job zusätzlich belastet. Wenn die Fristen knapp sind, können Sie die allgemeinen Dateien mit Ihrem Team teilen und sie wissen lassen, dass a Es stehen nur wenige "Status" -Ansichten an (stellen Sie sicher, dass Sie angeben, welche es sind).

Reaktionsschnelle Ansichten

Es ist entmutigend, 15 Seiten auf dem Desktop zu entwerfen und dann eine mobile Version zu erstellen. Noch ärgerlicher ist es, obendrein eine etwas andere Tablet-Version zu machen. Aus diesem Grund ignorieren einige Designer das Hinzufügen. Dies bedeutet jedoch, dass die Entwickler dies im Code tun müssen. Und deshalb Entscheidungen treffen. Wenn Sie komplizierte Elemente sehen, zeigen Sie im Idealfall deren Tablet-Ansichten, auch wenn Sie nicht die gesamte Site erstellen.

In Summe

Der Designer kann das Leben des Entwicklers zu einem Albtraum oder einer sehr guten Erfahrung machen. Der Schlüssel, um Letzteres zu erreichen, besteht darin, die verwendete Technologie HTMl / CSS besser zu verstehen, welche interaktiven Elemente machbar sind usw.

Wenn Sie das Glück haben, mit Entwicklern zusammen zu sein, und sich über bestimmte Elemente Sorgen machen, rufen Sie sie an, um sich alles anzusehen. Sie geben Ihnen auf jeden Fall Hinweise darauf, was schwierig und was einfach ist.