Webentwicklungskonzepte, die alle Webdesigner verstehen sollten

Es gibt viel zu sagen Die Kluft fand sich zwischen Designern und Entwicklern. Zugegeben, es gibt viele Designer / Entwickler-Hybride, die das können beide Seiten der Münze verstehen, aber sie sind wenige und weit voneinander entfernt.

Kreative Projekte gedeihen weiter richtige Kommunikation. Dies kann jedoch schwierig sein, wenn Designer und Entwickler nicht sicher sind, wie sie vorgehen sollen Sprich miteinander. Ich denke nicht, dass Designer wissen müssen, wie man korrektes JavaScript schreibt, und auch sollten Entwickler die Typografie-Auswahl beherrschen. Aber es gibt einige grundlegende Themen dass ich denke, in beide Richtungen gehen.

Die folgenden Themen sind meine persönliche Einstellung Wichtige Webentwicklungsideen, die alle Designer verstehen sollten. Als Designer / Entwickler weiß ich, wie verwirrend es sein kann, beide Bereiche zu untersuchen. Aber es lohnt sich immer zu lernen, denn ein klares Verständnis verbessert die Kommunikation und macht einen Designer für ein kreatives Team viel wertvoller.

Verhalten des Frontend-Codes

Es wird oft angenommen, dass Webdesigner Frontend-Fähigkeiten mit ihren Designtalenten besitzen. Dies ist ein heiß diskutiertes Thema, hauptsächlich weil es da ist keine richtige Antwort.

Designer sollten das tun, was sie tun fühle mich wohl mit. Wenn das nur visuelle Designarbeit bedeutet, dann soll es so sein. Ein kurzes Verständnis der Frontend-Technologien kann jedoch zu demselben Designer führen intuitiver beim Erstellen von Ressourcen für Entwickler.

Ich glaube, jeder Designer sollte das zumindest verstehen drei grundlegende Sprachen der Frontend-Entwicklung (HTML, CSS und JS) sowie deren Verwendung. Die meisten Dropdown-Menüs basieren zum Beispiel auf JavaScript, es gibt jedoch auch nur Alternativen für CSS.

Wenn ein Designer ein Dropdown-Menü erstellt, kann er darüber nachdenken Komplexität der Implementierung über Code. Ein Designer, der versteht, für welche Elemente JavaScript erforderlich ist, kann besser darauf vorbereitet sein, was er von Entwicklern verlangt.

Das ist möglich ohne zu lernen, eine einzelne Codezeile zu schreiben.

CSS wird gemacht gestalten Sie die Website. Abgesehen von CSS-Animationen und CSS ist dies meist statisch schafft die Mehrheit der Visuals auf einer Seite. Die meisten dynamischen Funktionen werden mit JavaScript erstellt.

Wenn Sie diese Kluft verstehen können, wird sie bewusst in die Entwurfsarbeit einbezogen. UX-Motion-Designer müssen außerdem prüfen, wie viel Arbeit in die Animation einer Benutzeroberfläche investiert wird.

Responsive Techniken

Jeder Webdesigner sollte zumindest den Begriff kennen sich anpassendes Design. Dies ermöglicht Websites zu passen Sie sich an verschiedene Bildschirmgrößen an, zu denen jeweils ein anderes Layout gehört. Geräteabmessungen beim Anwenden eines neuen Layouts sind definiert durch Haltepunkte, in (einer) der CSS-Datei (en) hinzugefügt.

Haltepunkte werden durch a angegeben bestimmte Pixelbreite (und / oder manchmal auch Höhe), entweder minimal oder maximal, bei der sich das Layout an diese Bildschirmgröße anpasst. Ein responsives Layout sieht daher auf einem 1080px-Monitor anders aus als auf einem 320px-Smartphone.

Um zu sehen, wie Haltepunkte auf echten Websites funktionieren, besuchen Sie die Media Queries-Website.

Als Designer müssen Sie überlegen, wie die einzelnen Haltepunkte aussehen könnten Einfluss auf das Modell. Möglicherweise müssen Sie mehrere Comps entwerfen passend in verschiedene Bildschirmabmessungen.

Wenn Sie verstanden haben, dass ein CSS-Haltepunkt die Bedingungen definiert, wenn sich das Layout ändert, ist die Bereitstellung dieser Assets für das Entwicklerteam viel einfacher.

Denken Sie modular mit Designs

Entwickler wollen es immer Code wiederverwenden so viel wie möglich, da dieser Ansatz die Entwicklung ermöglicht weniger wortreich und reduziert die Dateigröße - In der Tat ist es eine wichtige Methode zur Code-Optimierung.

Modulares Design beschreibt eine Methode zum Erstellen von Websites aus “Module” das kann sein im Laufe der Zeit wiederverwendet. Denken Sie an Schaltflächen, Formulareingaben, Überschriftenstile oder Blockquotes mit ausgefallenen Stilen.

Wenn du Gestaltungselemente modular gestalten, Für Entwickler wird es einfacher, das Layout mit zu codieren wiederverwendbare CSS-Klassen. Es ist immer eine gute Idee, darüber nachzudenken, wo Sie können angemessen wiederverwendet werden die gleichen Farben, Texturen und Seitenelemente, jedoch müssen Sie darüber klug sein die Ästhetik insgesamt nicht zu schädigen.

Es ist noch besser, wenn Sie kommentieren welche Elemente Sie in verschiedenen Modellen kopiert haben, damit Entwickler dies tun können Markieren Sie diese Teile der Website mit Wiederholungscode - die Entwicklung schneller und einfacher gestalten.

Modularer Aufbau bezieht sich auf atomares Design, Beide Ansätze sind eher auf Entwickler ausgerichtet. jedoch Visualisierung kann Ihnen helfen zu verstehen, wie der Code funktioniert, wenn Sie also Schwierigkeiten haben Visualisieren Sie das modulare Design In diesem Beitrag findest du einige Beispiele.

Retina-Bilder und SVG verstehen

Normalerweise ist es die Aufgabe des Designers, Bilder vorzubereiten, alle erforderlichen Fotos aufzunehmen und Symbole von Grund auf zu entwerfen. Dies bedeutet, dass die Designer allein dafür verantwortlich sind Lieferung der visuellen Assets dass Entwickler schließlich in das Layout kodieren. Deshalb ist es wichtig zu verstehen Netzhautgrößen und zu Retina-unterstützte Vermögenswerte weitergeben zu den Entwicklern zusammen mit dem endgültigen Modell.

Ich würde diesen Smashing Magazine-Beitrag wärmstens empfehlen, wenn Sie mehr über Retina-Design-Workflows erfahren möchten. Retinize Es ist eine kostenlose Sammlung von Photoshop-Aktionen Erstellen Sie automatisch Retina-Versionen Ihrer Vermögenswerte.

Die meisten Designer wissen bereits zu unterstützen @ 2x Bilder, aber die neueren iPhone 6+ Geräte haben @ 3x Auflösungen. Einige Projekte sind jedoch nicht mit @ 3x-Bildgrößen belastet. Sprechen Sie daher mit Ihrem Projektleiter, bevor Sie Assets abschließen.

Eine letzte Sache, die zu berücksichtigen ist, ist die Weiterentwicklung von SVG im Internet. Alle modernen Browser unterstützen SVG, das ist ein vektorbasiertes Bildformat. Dies bedeutet, dass SVG-Symbole angezeigt werden automatisch skalieren ohne Qualitätsverlust, Sie brauchen also keine Retina-Assets für SVG-Grafiken.

Allerdings sind nicht alle Kreativteams bereit, SVGs für Webdesign zu verwenden. Sie werden zwar von Browsern unterstützt, können aber in manchen Fällen auch schwierig zu implementieren sein. Aus diesem Grund ist Kommunikation für eine erfolgreiche Designer / Entwickler-Beziehung unerlässlich.

Besprechen Sie die Vor- und Nachteile der Verwendung von Vektorgrafiken und entscheiden Sie, was für jedes Projekt am besten funktioniert. Wenn Sie sich nur mit diesen Funktionen auskennen, können Sie mit den Entwicklern klar kommunizieren und sogar das Layout für die Retina-Unterstützung kodieren.

Barrierefreiheit verstehen

Progressive Enhancement und anmutige Erniedrigung Es gibt zwei Möglichkeiten, um dasselbe Problem zu behandeln: Zugänglichkeit. Nicht alle Benutzer befinden sich auf Geräten oder führen Browser aus, die 100% der dynamischen Funktionen einer Website unterstützen.

Diese Benutzer sollten trotzdem eine Erfahrung, die funktioniert, und dies muss mit der richtigen Codierung behandelt werden. Einige Screenreader ignorieren möglicherweise den gesamten JavaScript- und CSS-Code außer der Website muss noch funktionieren.

Ich habe vor kurzem ein Post Covering gemacht Progressive Enhancement im Detail, weil es meine bevorzugte Entwicklungsmethode ist. Progressive Enhancement beginnt mit sehr grundlegenden Funktionen, dann arbeitet bis zu mehr “fortgeschritten” Eigenschaften.

Anmutige Erniedrigung ist der entgegengesetzter Ansatz woher Alle Hauptfunktionen werden zuerst entworfen, Der Entwickler entscheidet dann, wie mit diesen Features umzugehen ist, wenn der Benutzer kein JavaScript oder CSS unterstützt.

Es ist unwahrscheinlich, dass ein Designer in diesen Situationen Mockups machen sollte. Es ist jedoch wichtig, dass Designer diese Begriffe verstehen und verstehen, was sie bedeuten, weil sie es sind beeinflussen den Entwicklungsprozess. Dies gilt insbesondere für Projekte, bei denen die Barrierefreiheit ein großes Problem darstellt.

Abschließend

Es gibt einige Themen, die ich übersprungen habe, weil ich sie für optional halte. Versionskontrolle, Fehlerbehandlung und JavaScript-Animationen sind einige komplexere Themen, in die sich Designer möglicherweise einlassen möchten.

Aber ehrlich gesagt, werden die Punkte, die in diesem Beitrag angesprochen werden, mehr als nur helfen, die Anforderungen eines Entwicklungsteams zu verstehen. Indem Sie einfach die Oberfläche der Webentwicklung überfliegen, werden Sie Einblicke Das hilft Ihnen, Ideen zu kommunizieren und mit Problemen in Verbindung zu treten, die während der Produktion auftreten.

Wenn Sie nach weiteren Inhalten suchen, werfen Sie einen Blick auf diese Beiträge:

So kommunizieren Sie effektiv mit Entwicklern (smashingmagazine.com)
Helfen Sie Designern und Entwicklern, sich gegenseitig zu verstehen (uie.com)
Das Erlernen von Code bietet Ihnen als UX-Designer Vorteile (jessicaivins.net)