10 Design-Konzepte, die jeder Web-Entwickler muss wissen, kreative Bloq
Kyle Fiedler stellt zehn grundlegenden Design-Konzepte und Praktiken, die jeder Entwickler wissen sollte und verstehen.
In den letzten Jahren unterrichtet Ich habe an Entwickler einen Workshop zum Thema visuelle Design-Grundlagen richtet. Wie bei den meisten Dingen im Web, habe ich ein breites Maß an Gestaltungswissen und Interesse von beiden den Studenten gefunden, die meine Werkstatt genommen haben, sowie von den Entwicklern mit denen ich gearbeitet habe.
Diese Liste soll eine Liste der Begriffe sein, dass ich die Entwickler möchte ich mit über Design zu verstehen, arbeiten. Es soll Entwickler in die richtige Richtung als Einführung in das Denken und die Kommunikation über Design lenken.
01. Entwurf ist nicht nur visuelle
02. Seien Sie user-centric
Der Designer sollte nicht alle der User Experience Schulter; Designer sollten es nur führen. Die Erfahrung sollte stattdessen durch das gesamte Team geteilt werden (falls vorhanden). Es gibt viele Fälle, in denen ich auf die Entwickler verlassen habe, mir zu helfen, den besten Weg herauszufinden, die beste Benutzererfahrung zu schaffen. Nicht nur, dass sie wissen, dass ihre Grenzen besser, sie haben auch eine klarere Vorstellung aller Möglichkeiten.
03. Entwurf ist im Detail
04. Bei der Gestaltung, skizziert oft
Skizzen können Sie auf Ideen schnell zu durchlaufen und in Mockups oder Code experimentieren viel Zeit sparen
Mein erster College-Professor tief verwurzelt diese in mir, als ich ein Student war. Sie würde uns den Computer nicht benutzen lassen, bis sie sah, Seiten, auf Seiten von Skizzen. Junge Designer neigen dazu, auf den Skizzen oder wegzulassen, sie ganz knausern. Ich sehe noch viele Designer Übergang zu früh von den Skizzen zu einem höheren Genauigkeit Design, ohne vorher alle möglichen Lösungen zu erkunden.
Der beste Teil der Skizzierung ist, dass jeder kann es tun. Jeder weiß, wie Boxen, verschnörkelte Linien und Pfeile zu zeichnen. Dies sind die grundlegenden Werkzeuge, die Sie entwerfen beginnen - es ist wirklich so einfach. Wir sind nicht für unbezahlbar Stücke Grafik suchen, und Sie sicherlich einen extravaganten Kunst Grad nicht brauchen. Sie müssen nur in der Lage sein, klar hinter ihnen Ihre Skizzen und den Denkprozess zu kommunizieren.
05. Verwenden white space
Es scheint, das härteste Konzept zu sein für Entwickler zu erreichen: der größte Nutzen für die richtige Menge an Leerraum aufweist, wird dem Benutzer eine Pause zu geben. Pausen sind wichtig, um Informationen zu verarbeiten, vor allem, wenn es eine angemessene Menge zu verarbeiten. Es ist, warum wir Absätze und Sätze statt nur einen einzigen, langen Textblock ausgeführt wird.
Der Schlüssel ist, um sicherzustellen, dass Leerraum eine Beziehung zu anderen Objekten auf der Seite hat, einschließlich dem anderen Raum. Wenn Sie eine einzelne Spalte von Leerraum haben, stellen Sie sicher, dass eine andere einzelne Spalte von Leerraum gibt es, um es zu balancieren.
Für die vertikalen Raum, verwenden Sie nur Bruchteile der Körper Schriftgröße. Ich neige dazu, Dinge einfach zu halten und eine Skala von 0,25 verwenden, aber es gibt einige andere Skalen, die Sie verwenden können. Zum Beispiel ist, wenn die Körper Schriftgröße 16px (1em): 4, 8, 12, 16, 20, 24, 28, 32, 40, 48. Diese Größen für die Wahl der Schrift ermöglicht durch einfache Auf- und Abbewegung der Skala, wie ich will größer oder kleinen Typen.
Apple verwendet Leerraum wirklich gut seine Produkte hervorzuheben und präsentieren
06. Grids sind nicht nur Frameworks CSS
Verrückt, nicht wahr? Grids gefunden erste Prominenz in Design in, was jetzt Schweizer Typografie genannt.
Ein Gitter soll verwendet werden:
- Erstellen Sie Beziehungen zwischen Objekten
- Stellt ein Basissystem für visuelle Ausrichtung
- Hilfe einen horizontalen und vertikalen Rhythmus erstellen
- Hilfe schaffen optische Balance
Alle diese Konzepte zusammen arbeiten am besten, ein besseres visuelles System für Ihre Benutzer, die Sie erstellen können. Das Gitter Sie wählen, wirkt sich auf die Einheit des Designs; ein Gitter, auf deren Basis die Wahl ist am einfachsten, das beste Design Wahl für Ihre Inhalte und Benutzer werden nicht unbedingt zu implementieren. Am Ende ist es immer noch nur ein Werkzeug und wird nur so gut sein wie die Person, die es ausübt.
Glauben Sie nicht, nur ein Gitter als CSS-Framework. Es ist ein Design-Tool, das mit einem Zweck verwendet werden soll
07. Wenn alles Schwerpunkt hat, tut nichts
Es ist wie ein Gespräch mit einer Gruppe von Menschen, die alle an Sie schreien gleichzeitig verschiedene Dinge zu tun. Es sollte nur ein Element haben Betonung auf der Seite: die wichtigste. Der Schwerpunkt auf ein einzelnes Element und eine klare Hierarchie mit Fluss für die Leser liefert und soll sie in der gewünschten Richtung weist.
08. Halten Sie eine Inspiration Ordner
Nicht nur, dass dieser Akt als Referenzpunkt, es zwingt Dich auch ständig zu suchen und Auswertung von Design. Der einfache Prozess der Designstücke auswählen und diese in einen Ordner Kräfte sparen Sie diese Designanalyse Muskeln zu nutzen.
Halten Sie eine Galerie der Inspiration. Von Fotos zu T-Shirts, Fotos, Designs oder irgendetwas verweisen zu können, sonst helfen eine Idee für Ihre eigenen Entwürfe entfachen könnte
09. Entwurf dreht sich alles um Problemlösung
Sie sollen Design als eine Reihe von Problemen nähern, die Lösungen erfordern. Alles, was auf der Seite sollte einen Grund hat, dort zu sein und ein spezifisches Problem für den Benutzer oder Design werden zu lösen. Ich habe die Tendenz Features aus dem Feature-Set zu entfernen, bis das Problem, das ich bin die Lösung sehr deutlich wird.
10. Know-how über und Kritik Design sprechen
Ein sicherer Weg, einen Designer zu ärgern ist, ihnen zu sagen, dass ein roter Block blau sein soll, dass ein Stück Text bewegt über werden soll, oder das Logo größer zu machen. Ich glaube, Sie bekommen die Idee.
Dann hoffentlich wird der Designer mit Ihnen zusammenarbeiten, um eine Lösung für das Problem zu bilden. Dies ist Ihre Chance eine Auflösung vorzuschlagen; nur nicht fragen, das Logo größer zu machen.
Ressourcen und Werkstatt
Wenn Sie diese interessant gefunden haben, fühlen sich frei, mein Design für Entwickler Ressourcen und Design Lernwege zu überprüfen. Ich würde gerne auch Sie entweder in der Online-Version oder auf der face-to-face-Version des Workshops zu sehen.
Wörter: Kyle Fiedler
Kyle Fiedler ist ein Designer bei thoughtbot und hilft, Rails und iOS-Anwendungen zu erstellen. Er wurde konzipiert und entwickelt, in irgendeiner Form, da der Dot-Com-Boom (und Büste) und da hat nicht aufgehört.
Dieser Artikel wurde ursprünglich in Netto-Magazin Ausgabe 244 erschienen.