Pfad vom Entwickler zum Designer: How To

Als ehemaliger Entwickler, der Designer geworden ist, würde ich ein paar Dinge vorschlagen. Beginnen Sie in erster Linie mit der Arbeit an Designs! Wenn Sie die Fähigkeit haben, finden Sie einen Mentor, der bereits UI/UX-Designer ist, und beginnen Sie mit ihm an Projekten zu arbeiten. Ich habe festgestellt, dass ich mehr gelernt habe, indem ich tatsächlich an Projekten gearbeitet und Wissen von Leuten aufgenommen habe, die dies seit Jahren tun, als ich jemals durch das Lesen eines Buches gelernt habe.

Davon abgesehen, wenn Sie sich über UI/UX/etc. informieren möchten, würde ich einen Blick auf diesen ausgezeichneten Thread werfen: Must-read User Interface Book? Ich denke, mein persönlicher Favorit ist Steve Krugs „Don’t Make Me Think“ – aber ich bin sicher, dass Sie irgendwann Ihren eigenen Favoriten finden werden.

Zu guter Letzt, in Bezug auf Tools wie Photoshop, Illustrator usw. ... keine Sorge! Letztendlich finden Sie die Tools, die für Sie am besten geeignet sind. Persönlich beginne ich mit Bleistift- und Papiermodellen, dann gehe ich je nach Projekt entweder zu etwas in Balsamiq oder Axure oder manchmal zu reinem HTML und CSS - es hängt wirklich von der Größe, dem Umfang usw. des Projekts ab. Verwenden Sie, was auch immer ist am bequemsten für dich. Am Ende des Tages zählt nur, dass Sie Ihre Vision für Ihr Design klar kommunizieren, nicht mit welchem ​​Werkzeug Sie es gemacht haben.

Ich vermische seit langem Design und Entwicklung. Aber in den frühen Tagen verbrachte ich mehr Zeit damit, die Bearbeitungswerkzeuge zu lernen, als was ein gutes Design ausmacht. Es gibt viele Tutorials, um zu lernen, wie man Photoshop, Illustrator, Fireworks usw. verwendet. Aber es ist schön, etwas Sinn und Richtung für Design zu haben. Darin möchte ich noch besser werden.

Eine meiner Inspirationen ist ein Typ namens Robby Ingebretsen, weil er sowohl in der Entwicklung als auch im Design sehr gut ist. Seine Website ist unter nerdplusart.com .

Es gibt ein paar Dinge, die ich mir von ihm ansehen würde ...

• Meine (sehr) kurze Liste der Must-Read-Bücher für Designer
• Designgrundlagen für Entwickler
• 10 Möglichkeiten, ein Designproblem anzugehen und als Sieger hervorzugehen

Wie er in all seinen Präsentationen sagt, ist es meines Erachtens entscheidend, Inspiration für seine Designs zu finden. Selbst die besten Designer kommen nicht einfach so aus dem Nichts. Eines meiner Lesezeichen ist eine Sammlung von "New Graphic Design" , die hauptsächlich in Druckwerken zu sehen ist. Die meisten von ihnen sind sehr einfach und verwenden oft die Typografie selbst als wichtigstes grafisches Element. So einfach es scheint, kann Ihnen das Durchstöbern solcher Dinge dabei helfen, Ihr Design zu gestalten.

Genauso wie das Erlernen von Visual Studio einen nicht zu einem guten Softwareentwickler macht, macht einen das bloße Erlernen von Photoshop auch nicht zu einem guten UI-Designer.

Wenn Sie den formalen Weg gehen möchten, wäre eine Ausbildung in Kunst/Grafikdesign, Human Factors, Psychologie, Informationsarchitektur/Bibliothekswissenschaften alles gute Orte, an denen Sie suchen sollten.

Informell an die Arbeit! ;) Der beste Weg zu lernen ist, es einfach zu tun.

Ich bin ein offiziell ausgebildeter Grafikdesigner, der sich bei der Arbeit Softwareentwicklungskenntnisse angeeignet hat. Angefangen habe ich aus reiner Not.

Ich persönlich denke, dass die besten UX-Teammitglieder diejenigen sind, die eine Mischung aus beiden Fähigkeiten haben. Ich denke also, Sie sind auf dem richtigen Weg.

Ich würde mit dem Lesen des Buches "Head First Web Design" von Watrall & Siarto (veröffentlicht von O'Reilly) beginnen. Es ist ziemlich sachlich, leicht verdaulich und führt Sie durch alles, was ein Designer berücksichtigen muss. Es ist keine tiefgründige Studie, aber Sie erfahren, welche Fragen Sie als Nächstes beantworten müssen. Es behandelt Navigation, Organisation, Layout, Schreiben, Farbe und Zugänglichkeit.

Bevor Sie in Photoshop, Adobe Illustrator oder was auch immer einsteigen, erstellen Sie ein Drahtmodell für Ihr Design, um sicherzustellen, dass alles an der richtigen Stelle ist, bevor Sie die zusätzliche Zeit aufwenden, um es hübsch aussehen zu lassen. Sie können es auf Papier oder Whiteboard skizzieren oder ein Werkzeug verwenden. Ein Tool, das mir bei diesem Schritt wirklich hilft, ist Balsamiq Mockups . So können Sie zuerst über die Organisation und das Layout der Website nachdenken.

Ich habe eigentlich den umgekehrten Ansatz von UX Designer zu UI Developer gewählt, würde jedoch beim Aufgreifen von Design ein paar Bereiche empfehlen, um zu beginnen:

Ich würde mir das Buch "Don't Make Me Think!" anschauen. von Steve Krug , das meiner Meinung nach ein großartiges Buch über Design für das Design im Web ist.

Es gibt unzählige großartige Webressourcen, darunter SmashingMagazine.com und PSDTuts.com, die großartige aktuelle Artikel in der Welt des Designs und der Webtechnologie enthalten.

Ich würde auch einen Blick auf das Verständnis der Prinzipien von HCI werfen, wenn Sie speziell darauf aus sind, ein UX-Designer zu werden.

Viel Glück und frohes Gestalten!

Ich bin wirklich daran interessiert zu lernen, wie man erstklassige Benutzeroberflächen für Websites, mobile Apps usw. erstellt.

Okay, das ist ein weites Thema. Sie möchten „schöne“, „erstklassige“ und professionell aussehende Websites erstellen. Sie müssen also wissen, warum Menschen etwas als „schön“ wahrnehmen, richtig? Zum Glück ist Schönheit nicht wirklich subjektiv.

Einer der Schlüssel zu einem schönen visuellen Design ist Harmonie .

Der Mangel an Harmonie lässt Ihre Designs amateurhaft aussehen.

Und das Beste ist, dass visuelle Harmonie auf Mathematik hinausläuft. Es geht nicht darum, ein Bauchgefühl zu haben.

Wie andere bereits betont haben, würde ich empfehlen, Websites selbst zu entwerfen. Versuchen Sie, die Designprinzipien anzuwenden, die Sie kennengelernt haben, anstatt ein fertiges Framework zu verwenden. Es mag am Anfang schwer sein, aber es wird Ihnen helfen, besser zu werden.

Wie man Harmonie in ein Website-Design einbettet

Es folgt ein praktisches Beispiel und eine lustige kleine Übung, die Sie jetzt machen können.

Eine Methode, die ich persönlich bevorzuge, ist die Verwendung einer modularen Skala , um die Website-Elemente in harmonischen Proportionen zu dimensionieren. Eine Website, die Ihnen helfen kann, eine modulare Waage zu erstellen, ist diese hier: modularscale.com

Der Vorteil der Verwendung einer modularen Waage besteht darin, dass Größenentscheidungen so einfach sind wie das Auswählen einer Zahl von der Waage.

Lassen Sie uns beispielsweise die Größe der Überschriften einer Website anpassen (um die visuelle Hierarchie zu kommunizieren).

Nehmen wir an, wir haben diese modulare Skalierung basierend auf der von mir gewählten Schriftgröße von 19 Pixel (19 Pixel, weil es mit der von mir verwendeten Schriftart am besten aussah, aber Sie können diesen Schritt überspringen und mit der Standardgröße von 16 Pixel fortfahren) und dem Verhältnis 1,412 (Nr Ich muss ins Detail gehen, warum ich dieses Verhältnis gewählt habe. Für Ihre Projekte ist einfach jedes Verhältnis besser als gar kein Verhältnis.):

Wenn ich es mir ansehe, würde ich den H1 auf 2,815 m, den H2 auf 1,994 m und den H3 auf 1,412 m wählen. Die ersten 3 Zahlen sind größer als die Schriftgröße des Körpers. Kinderleicht, oder? Der Textkörper wäre 1em (in meinem Fall 19px). Dann würde ich die H4-H6 auf 1em bemessen und den Kontrast (andere Schriftstärke oder -stil) verwenden, um sie vom Haupttext zu unterscheiden.

Probieren Sie es jetzt aus:

1. Erstellen Sie Ihre eigene modulare Waage
2. Holen Sie sich ein einfaches HTML-Dokument (echter Inhalt, bitte kein Lorem Ipsum)
3. Verwenden Sie die Skala, um die Überschriften zu skalieren.
4. Versuchen Sie dann, die Skala für andere Größenentscheidungen (Ränder, Polster usw.) zu verwenden.

Das ist nur ein kleiner Schritt in Richtung besserer Designs, aber ich hoffe, dass es Ihnen helfen wird.

Wenn Sie dies hilfreich fanden, können Sie meine andere Liste mit 7 Tipps für Anfänger-Webdesigner lesen, die sich mit HTML und CSS auskennen

PS: Du hast wirklich viel zu lesen

Wie andere gesagt haben, lesen Sie:

• Die Elemente des Grafikdesigns von Alexander White
• Die Elemente des typografischen Stils von Robert Bringhurst
• Bring mich nicht zum Nachdenken von Steve Krug

Außerdem hier eine riesige Liste von Online-Ressourcen wie Blogs und Communities, die Sie im Auge behalten sollten: enboard.co/webdesign/