Es gab diese ungeschriebene Kluft zwischen Designern und Entwicklern, solange wir Websites erstellen. Menschen, die Dinge gut aussehen lassen, im Vergleich zu Menschen, die dafür sorgen, dass es funktioniert. Diese Tage sind vorbei.
Jeder Designer muss lernen, wie Entwicklung in der digitalen Landschaft funktioniert. Und jeder Entwickler sollte grundlegende Designtheorien verstehen. Hier helfen wir Designern, die Sprache der Entwickler besser zu verstehen, eine wichtige Fähigkeit auf dem heutigen Markt. (Als zusätzlicher Bonus werden alle Designbeispiele mit CSS-Frameworks erstellt.)
Benutzeroberflächen und Design
Das Rückgrat hinter jeder Website besteht aus 1s und 0s. Das ist nicht sehr aufregend, wenn es um Design geht. Aber die eigentliche Schnittstelle und Verbindung mit einem Benutzer ist.
Jedes winzige Detail enthält Elemente des Designs, mit denen sich jemand beschäftigen muss, von Schaltflächen über Navigationselemente bis hin zu Formularen, um ein Video anzusehen oder ein Paar Schuhe zu kaufen. Das Ziel ist, etwas zu schaffen, das schön, ansprechend und einfach zu bedienen ist. Hier treffen sich Design und Entwicklung.
Wörter, die Sie wissen müssen:
- Ajax: Durch die Verwendung von asynchronem JavaScript und XML wird ein interaktives Erlebnis geschaffen, bei dem neue Informationen auf der Benutzerseite einer Website ohne Aktualisierung angezeigt werden können. Ein häufiges Beispiel ist das kontinuierliche Laden von Beiträgen, während ein Benutzer durch eine Twitter-Seite blättert.
- API: Durch die Bereitstellung von Spezifikationen für Routinen, Daten, Objektklassen und -variablen sowie das Application Programming Interface können verschiedene Websites oder Software "sprechen". miteinander und arbeiten zusammen. Betrachten Sie es als eine virtuelle Menge von Bausteinen.
- CSS: Cascading Style Sheets sind das Rückgrat der Sprache, mit der Websites gestaltet und HTML-Elemente visuell angezeigt werden.
- Medienanfrage: Ein CSS-Element, das bestimmte Regeln für bestimmte Geräte erstellt, wenn es darum geht, wie Bilder dargestellt werden. (Es ist die Magie, mit der dasselbe Foto auf einer Desktop-Site mit einem Aspektverhältnis und Zuschnitt gerendert wird und auf einem mobilen Gerät auf andere Weise.
- Responsive Webdesign (RWD): Eine Webdesign-Technik, bei der ein flexibles Raster sowie Bilder, Medien und Text verwendet wurden, sodass eine einzelne Website sich an verschiedene Gerätegrößen anpassen kann. (Dies ist derzeit wohl einer der wichtigsten Faktoren im Webdesign.)
- UI: Die Benutzeroberfläche ist alles, was der Benutzer in einem Design sieht und mit ihm interagiert. Dies kann alles von der Nutzung der Website und des Geräts bis zu jedem einzelnen Element auf dem Bildschirm sein.
- UX: Die Benutzererfahrung ist das, was jeder einzelne Benutzer von der Interaktion mit der Website nimmt. Dies wird tendenziell als emotionale Verbindung ausgedrückt und bezieht sich auf den wahrgenommenen Gesamtwert.
Denken Sie in Fragen
? Jede dieser Interaktionen sollte sich wie ein Gespräch zwischen zwei Personen anfühlen, die sich gegenseitig vertrauen und das gegenseitige Vertrauen verdienen.?Jeder Teil einer Website fordert die Benutzer auf, sich mit einem anderen Teil der Website zu beschäftigen. Egal, ob Sie ein Spiel spielen, einen Artikel lesen oder ein Geschenk kaufen - jede Aktion führt Sie zu etwas anderem. Aber wie kommst du dorthin?
Hier kommen Fragen zum Tragen. Wenn Sie im Entwurfsprozess Fragen stellen, können Sie Verknüpfungen zwischen Aktionen herstellen und so einen nahtloseren Entwurf mit einem logischen Ablauf schaffen.
?Schön gesagt? von Nicole Fenton und Kate Kiefer Lee ist ein Handbuch zum Schreiben für das Web. Es bietet auch einen Rahmen mit Fragen, die für jeden Teil des Webdesign-Erlebnisses funktionieren.
Fragen, die Sie auf dem Weg stellen sollten (und viele weitere aus dem Ressourcenhandbuch des Buches):
- Wie verwenden Menschen diesen Inhalt oder diese Funktion jetzt?
- Wer spricht hier?
- Welche Probleme versuchen wir zu lösen?
- Wie dient dieser Inhalt unseren Zielen? Was ist der Zweck?
- Was sind die Funktionen der Website? Wie verhält es sich?
- Was ist das endgültige Format?
- Gibt es technische Einschränkungen oder Zeichenbeschränkungen?
Fenton schrieb noch mehr über andere Fragen, die von Websites gestellt werden. die ganze Zeit. Wir sprechen über die persönlichen Daten, die Benutzern helfen, sich auf die Websites zu beziehen, mit denen sie interagieren. "Jede dieser Interaktionen sollte sich wie ein Gespräch zwischen zwei Personen anfühlen, die sich gegenseitig vertrauen und das gegenseitige Vertrauen verdienen." Sie schreibt.
Einige dieser Fragen sind:
- Wie können wir Ihnen helfen?
- Wo bist du gerade?
- Bist du bereit dafür zu bezahlen?
Die Antwort auf diese Fragen legt die Art der Beziehung zwischen Schnittstelle und Benutzer fest und beeinflusst das Design erheblich. Stellen Sie sich das so vor: Wenn ein Benutzer Ihnen nicht sagen möchte, wo er sich befindet, sind das Design und die Benutzeroberfläche nicht wirksam, wenn es sich um eine geografische Standortbestimmung handelt. Das Design sollte den Benutzer auf andere Weise ansprechen.
Denken Sie an Einfachheit und Richtung
Wenn Websites zusammenkommen, neigt alles dazu, irgendwo auf einer Karte zu landen. Sie können den Kurs von einer Benutzerinteraktion zur nächsten plotten. (Was für visuelle Denker großartig ist.) Denken Sie also an den Entwurfs- / Entwicklungsprozess in Bezug auf A vs. B: Was ist der nächste Schritt, A oder B?
Jedes Element sollte einen einfachen Zweck haben, der leicht zu definieren und zu beschreiben ist. (Klicken Sie, um zu spielen; klicken Sie, um einen Bildlauf durchzuführen.) Wenn Sie es in einem Satz nicht verständlich machen können, möchten Sie möglicherweise die Entwurfsstrategie überdenken.
Lerne Code
Jetzt, wo Sie in der Methodik eines Entwicklers über Dinge nachdenken, müssen Sie einige Programmierfähigkeiten entwickeln. Dies bedeutet nicht, dass Sie ein Master-Coder sein müssen, aber Sie sollten es genug verstehen, um einfache Änderungen vorzunehmen und mit anderen Designern und Entwicklern zusammenhängend zu sprechen. (Außerdem können Sie wirklich einige coole Effekte erzeugen, wie die oben genannten.)
Persönlich habe ich mit etwas HTML angefangen. Ich machte eine Liste mit Dingen, die ich wissen wollte, und lernte sie von innen heraus (d. H.So ändern Sie die Farbe eines Site-Elements mithilfe eines HEX-Werts im CSS, anstatt auf ein Feld in einem Farbwähler zu klicken.) Es gibt zahlreiche Tools, die von Online-Kursen und -Tutorials bis zu persönlichen Schulungen in Ihrer Umgebung reichen. Alles was Sie tun müssen, ist sich anzumelden und loszulegen.
Vier großartige Codeentwicklungsressourcen:
- Tuts +
- CodeAcademy
- Code Schule
- Khan Akademie
Fazit
Das Lernen von Web-Entwicklung bedeutet nicht nur das Erlernen von Frameworks und Code. Es geht um den Denkprozess. Designer können wie Entwickler denken, um eine erfolgreiche Website zu erstellen. Sie müssen nur offen für die Idee sein.
Das Verständnis, dass einige Denkprozesse ähnlich sind - visuelles Denken sowie Lösungen und Ergebnisse - sind Bestandteil jedes Konstruktions- oder Entwicklungsprojekts. Wir sind alle Designer / Entwickler auf dem heutigen Markt.
Bildquelle: Marjan Krebelj.