Entwickler zu Designer Pfad: How To

Als Entwickler, der Designer werden möchte, bin ich sehr daran interessiert zu lernen, wie man eine erstklassige Benutzeroberfläche für Websites, mobile Apps usw. erstellt. Ich verstehe jedoch nichts von Photoshop oder anderen Aspekten des Designs. Meine Hauptfähigkeiten sind HTML und CSS .

Wo soll ich anfangen? Wie lerne ich, wie man schöne Websites und Benutzeroberflächen erstellt?

Als ehemaliger Entwickler, der Designer geworden ist, würde ich einige Dinge vorschlagen. Beginnen Sie in erster Linie mit der Arbeit an Designs! Wenn Sie die Möglichkeit haben, suchen Sie sich einen Mentor, der bereits UI / UX-Designer ist, und beginnen Sie, mit ihm an Projekten zu arbeiten. Ich habe mehr gelernt, indem ich tatsächlich an Projekten gearbeitet und das Wissen von Menschen aufgesogen habe, die dies seit Jahren tun, als ich es jemals durch das Lesen eines Buches getan habe.

Abgesehen davon, wenn Sie sich über UI / UX / etc. Informieren möchten, würde ich mir diesen hervorragenden Thread ansehen: Muss man das User Interface Book lesen? 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.

Schließlich, in Bezug auf Tools wie Photoshop, Illustrator, etc ... machen Sie sich keine Sorgen! Letztendlich finden Sie die Tools, die am besten für Sie funktionieren. Persönlich beginne ich mit Bleistift- und Papiermodellen, dann gehe ich je nach Projekt entweder zu etwas in Balsamiq oder Axure oder manchmal zu einfachem HTML und CSS - es hängt wirklich von der Größe, dem Umfang usw. des Projekts ab am bequemsten für Sie. Am Ende des Tages kommt es nur darauf an, dass Sie Ihre Vision für Ihr Design klar kommunizieren und nicht das Tool, mit dem Sie dies getan haben.

Ich habe Design & Entwicklung für eine lange Zeit gemischt. Aber in den Anfängen habe ich mehr Zeit damit verbracht, die Bearbeitungswerkzeuge zu lernen, als was ein gutes Design ausmacht. Es gibt viele Tutorials, in denen Sie lernen, wie man mit Photoshop, Illustrator, Fireworks usw. umgeht. Darin möchte ich immer noch besser werden.

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

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

• Meine (sehr) kurze Liste von Must Read-Büchern für Designer
• Designgrundlagen für Entwickler
• 10 Möglichkeiten, ein Designproblem anzugehen und zu gewinnen

Während er in all seinen Präsentationen darüber spricht, denke ich, dass es wichtig ist, Inspiration für Ihre Entwürfe zu finden. Selbst die besten Designer kommen nicht einfach so aus dem Nichts auf die Idee. Eines meiner Lesezeichen ist eine Sammlung von "New Graphic Design" , die hauptsächlich in der Druckerei zu sehen ist. Die meisten von ihnen sind sehr einfach und verwenden häufig die Typografie selbst als Hauptgrafikelemente. So einfach es auch scheint: Wenn Sie nur in solchen Dingen stöbern, können Sie Ihr Design gestalten.

Genau wie das Erlernen von Visual Studio macht man keinen guten Softwareentwickler, und das Erlernen von Photoshop macht man auch keinen guten UI-Designer.

Wenn Sie den formellen Weg einschlagen möchten, sollten Sie eine Ausbildung in Kunst / Grafikdesign, Human Factors, Psychologie, Information Artchitecture / Bibliothekswissenschaften absolvieren.

Informell an die Arbeit! ;) Am besten lernst du, indem du es einfach machst.

Ich bin ein formal ausgebildeter Grafikdesigner, der seine Fähigkeiten in der Softwareentwicklung bei der Arbeit erworben hat. Ich habe aus reiner Not heraus angefangen.

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

Ich beginne mit dem Buch "Head First Web Design" von Watrall & Siarto (herausgegeben von O'Reilly). Es ist ziemlich einfach, leicht zu verdauen und führt Sie durch alles, was ein Designer beachten muss. Es ist keine eingehende Studie, sondern zeigt Ihnen, welche Fragen Sie als Nächstes beantworten müssen. Es behandelt Navigation, Organisation, Layout, Schreiben, Farbe und Barrierefreiheit.

Bevor Sie zu Photoshop, Adobe Illustrator oder einem anderen Programm wechseln, müssen Sie Ihr Design mit einem Drahtmodell versehen, um sicherzustellen, dass alles am richtigen Ort 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 geholfen hat, ist Balsamiq Mockups . Sie können zuerst über die Organisation und das Layout der Site nachdenken.

Eigentlich habe ich den umgekehrten Ansatz von UX Designer zu UI Developer gewählt. Wenn ich mich jedoch mit Design beschäftige, empfehle ich zunächst einige Bereiche:

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

Es gibt Unmengen großartiger Webressourcen, einschließlich SmashingMagazine.com und PSDTuts.com, die großartige aktuelle Artikel in der Welt des Designs und der Web-Technologie bieten.

Ich würde auch einen Blick darauf werfen, die Prinzipien von HCI zu verstehen, wenn Sie speziell daran interessiert sind, UX Designer zu werden.

Viel Glück und viel Spaß beim Gestalten!

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

Okay, das ist ein weites Thema. Sie möchten "schöne", "erstklassige", professionell aussehende "Websites erstellen. Sie müssen also wissen, was Menschen dazu bringt, etwas als" schön "wahrzunehmen, oder? Zum Glück ist Schönheit für Sie nicht wirklich subjektiv.

Ein Schlüssel für ein schönes visuelles Design ist die Harmonie .

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

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

Wie andere bereits erwähnt haben, würde ich empfehlen, Websites selbst zu gestalten. Versuchen Sie, die erlernten Entwurfsprinzipien anzuwenden, anstatt ein fertiges Framework zu verwenden. Am Anfang mag es schwierig sein, aber es wird Ihnen helfen, besser zu werden.

Wie man Harmonie in ein Website-Design einbettet

Das Folgende ist ein praktisches Beispiel und eine lustige kleine Übung, die Sie jetzt machen können.

Eine Möglichkeit, die ich persönlich bevorzuge, ist die Verwendung einer modularen Skala, um die Website-Elemente in harmonischen Proportionen zu skalieren . Eine Website, die Ihnen bei der Erstellung einer modularen Waage helfen kann, ist die folgende: modularscale.com

Die Verwendung einer modularen Waage bietet den Vorteil, dass Größenentscheidungen so einfach wie das Auswählen einer Zahl aus der Waage getroffen werden können.

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

Nehmen wir an, wir haben diese modulare Skalierung basierend auf der von mir gewählten Körperschriftgröße von 19px (19px, weil sie mit der von mir verwendeten Schriftart am besten aussah, aber Sie können diesen Schritt überspringen und die Standardgröße von 16px und das Verhältnis von 1,412 (Nr Ich muss auf Details eingehen, warum ich dieses Verhältnis gewählt habe. Jedes Verhältnis ist besser als kein Verhältnis für Ihre Projekte.):

Wenn ich es mir anschaue, würde ich den H1 mit 2,815, den H2 mit 1,994 und den H3 mit 1,412 wählen. Die ersten 3 Ziffern sind größer als die Schriftgröße des Körpers. Easy-Peasy, richtig? Der Body-Text wäre 1em (in meinem Fall 19px). Dann würde ich die Größe des H4-H6 auf 1em einstellen und den Kontrast (unterschiedliche Schriftgröße oder -art) verwenden, um sie vom Haupttext zu unterscheiden.

Versuchen Sie es jetzt:

1. Generieren 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, Abstände 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
• Lass mich nicht nachdenken von Steve Krug

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