Wie fange ich mit dem UI-Design an?

Beginnen Sie niemals mit dem Werkzeug. Lernen Sie die Grundlagen von Layout, Farbtheorie, UX (Benutzererfahrung) und HCI (Mensch-Computer-Interaktion). Wenn Sie verstehen, wie Sie die Daten manipulieren, um das Erlebnis zu steuern, können Sie Killer-Schnittstellen erstellen.

Dann finden Sie das Tool, das für Sie funktioniert. Ich mache alle meine Modelle in Illustrator. In diesem Punkt gibt es viele Meinungsverschiedenheiten, aber Photoshop ist wirklich ein Bildbearbeitungsprogramm. Illustrator, Inkscape oder Fireworks sind alle besser für das Layout ausgelegt.

UPDATE > Ich experimentiere jetzt auch mit Sketch . Es ist intuitiver und viel kostengünstiger als Illustrator. Noch nicht so ausgereift, aber es kommt ans Ziel.

UPDATE ZUM UPDATE > Mit Sketch bin ich voll dabei. Für reines Interface-Design ist es derzeit das Beste, was läuft. Es hat seine Grenzen, aber mit der JSTalk-Plug-in-Plattform wird es meiner Meinung nach schnell aufholen. In Version 3.2 hat es meinen Workflow bereits erheblich verbessert. Da Illy mein wichtigstes Adobe-Tool war, habe ich auch Pshop für den einfacheren Pixelmator aufgegeben. Sketch + Pixelmator war ein starkes Duo.

Willkommen bei GD.SE!

Um ehrlich zu sein, denke ich nicht, dass Sie wirklich ein Photoshop-Guru sein müssen, um Ihre Benutzeroberflächen zu entwerfen. Besonders wenn Sie im Web arbeiten und am Ende sowieso alles codieren werden, sollten die Fähigkeiten, die Sie benötigen, um einige Mockups und Wireframes zu präsentieren, nicht lange dauern, um sie zu erlernen. Photoshop ist ziemlich intuitiv, aber das bedeutet natürlich nicht, dass es keine gewisse Lernkurve hat. Die Sache ist, wenn Sie für das Web entwerfen, sollten Sie es wahrscheinlich im Browser tun und Photoshop nur für einige Grafiken und zum Ausprobieren von Dingen im Layout verwenden.

Sie könnten mit einigen grundlegenden Tutorials beginnen, nur um zu verstehen, wie das Programm funktioniert (Ebenen, Texteffekte, Formen, solche Dinge). Sobald Sie es verstanden haben, können Sie den Tutorials folgen, die Sie durch einen Prozess führen und Ihnen helfen, ein Ergebnis zu erzielen, da sie normalerweise einige der Techniken behandeln, die Sie später verwenden werden. Einige Tuts wie diese , die sich auf ein Web konzentrieren, könnten sehr nützlich sein.

Nun zum Konzept, ich mache meins immer mit Bleistift und Papier. Photoshop ist für bestimmte Dinge großartig, aber nicht für alles. Es gibt viel bessere Tools für das Prototyping, wie Balsamiq (Premium) oder Pencil (kostenlos und Open Source). Sie sind schneller und einfacher zu bedienen.

Wie von Zivilkleidung erwähnt, ist es wichtig, die Grundlagen des Designs zu lernen . Es gibt viele gute Ressourcen, die hier auf GraphicDesign aufgelistet sind, um Ihnen den Einstieg zu erleichtern, die Sie leicht finden können, indem Sie sich das Ressourcen- Tag ansehen und es nach Stimmen sortieren. Sie sollten viele der bereitgestellten Ressourcen lesen, wenn Sie ein guter Designer für irgendetwas werden wollen.

Was UI-spezifische Ressourcen betrifft, fand ich diesen UX-Kurs einen guten Anfang. Es geht detailliert auf die meisten Aspekte des UI-Designs ein, obwohl Sie immer noch mehr lernen könnten. Wichtig ist, bewährten Regeln zu folgen , Erik Kennedy hat sich ein paar gute Grundlagen ausgedacht ( Teil zwei hier ), und sich viel Arbeit zu machen . Üben Sie die Umsetzung der Regeln, die Sie gelernt haben, um sie in Ihrem Geist zu festigen und um aus erster Hand zu sehen, was funktioniert und was nicht. Es ist auch sehr nützlich, dass andere Ihre Benutzeroberfläche nach jeder großen Iteration verwenden, um Feedback zu erhalten, bevor das Produkt "fertig" ist.

Es ist auch wichtig , auf dem Laufenden zu bleiben und UX im Auge zu behalten. UIGifs sendet einmal pro Woche eine E-Mail mit einigen schönen UI-Designs, ich empfehle dringend, sich anzumelden. Muzli veröffentlicht auch eine monatliche Liste, die länger ist, sich aber nicht zu 100 % mit UI befasst. UserFlowPaterns ist eine großartige Website, um schöne Beispiele für bewährte Verfahren zu sehen, die in prägnanter Weise in Anwendungen umgesetzt werden. UserInterface.io postet auch einige tolle Gifs. Es gibt viele andere, aber das sind im Moment meine Favoriten.

In der heutigen Zeit müssen wir, wie Yisela vorschlägt, nicht mehr in PS arbeiten, sondern können direkt im Browser (oder einem Editor für die Plattform, auf der Sie arbeiten) mit dem Entwerfen beginnen. Auch wenn es vielleicht nicht das Beste ist, dies immer zu tun, gibt es viele Vorteile. Dieser Artikel geht etwas detaillierter darauf ein, wann und wie dies zu tun ist.

Ich habe eine Liste von Ressourcen erstellt , um Anfängern den Einstieg in die Webentwicklung zu erleichtern, die hoffentlich sehr nützlich für Sie ist, wenn Sie Ihre Arbeit im Code erledigen. Der Vorteil, Ihr Design in Code zu erstellen (oder eine andere Art dazwischen wie WebFlow ), besteht darin, dass Sie einen Großteil Ihrer nächsten Phase bereits erledigt haben, was den gesamten Prozess beschleunigt. Es ist natürlich nicht erforderlich, aber es hilft Ihnen auch dabei, darüber nachzudenken, was möglich ist, und bewährte Verfahren zu entwickeln, indem es beim Entwerfen implementiert wird.

Angenommen, Ihr Design ist responsiv, d. h. es sieht unabhängig von dem Bildschirm, auf dem es angezeigt wird, gut aus, sollten Sie zuerst auf Mobilgeräte entwerfen . Mobile First sollte niemals als Mobile Most-Wichtig betrachtet werden, was bedeuten würde, dass wir in Ordnung sind, solange wir es auf Telefonen und Tablets zum Laufen bringen. Betrachten Sie es stattdessen als kleiner-zuerst oder kleiner-dann-größer in zeitlicher Reihenfolge der Betrachtung. Indem wir mit der kleinsten Bildschirmgröße beginnen, die wir unterstützen möchten, wissen wir, dass wir uns auf die wichtigsten Aspekte unserer Website oder App konzentrieren, und der Rest ist Soße. Wenn Sie weitere Informationen darüber wünschen, wie Sie sich auf diese Weise entwickeln können, habe ich darüber in meinem persönlichen Blog geschrieben.

Das Wichtigste, was Sie tun können, um beim UI-Design besser zu werden, ist, UIs zu erstellen und Benutzer Feedback dazu geben zu lassen – und das oft.

Benutzern zu helfen ist das gesamte Ziel, also tun Sie es! Das Anwenden von Regeln, während Sie sie lernen, ist großartig, da es hilft, sie in Ihrem Kopf zu festigen und gleichzeitig Ihr Design zu verbessern. Höchstwahrscheinlich werden Ihre Designs für eine Weile stinken, aber das ist in Ordnung! Dieses Video gibt eine gute Erklärung dafür - im Wesentlichen passiert es uns allen, aber du wirst es schaffen, wenn du es weiter versuchst :)

Wo kann ich meine Photoshop-Kenntnisse erlernen und verbessern und wie kann ich mit der Arbeit an einem Konzept beginnen?

Wie @plainclothes sagte, konzentriere dich niemals auf die Werkzeuge.

Wenn Sie Photoshop beherrschen, werden Sie kein Webdesigner. Genauso wie die Beherrschung der Bedienung eines Ofens Sie nicht zum Koch macht.

Photoshop, Illustrator, Sketch usw. Mit diesen Tools können Sie High-Fidelity-Prototypen erstellen .

Apps mit High-Fidelity-Ausgabe bieten Ihnen von vornherein zu viele Optionen, mit denen Sie spielen können . Sie verwässern Ihren Fokus und überwältigen Sie.

Wenn Sie mehr Tools zur Verfügung haben, als Sie benötigen, wird Ihr Verständnis des Denkprozesses, der das Design einer Website ausmacht, nur verlangsamt.

Sich an dieser Stelle mit „pixelperfekten“ Positionierungen, Farben oder Schriftarten zu beschäftigen, wird Sie nur von der Denkphase ablenken.

Das ist kein Entwurf.

Dies ist „Design spielen“, ein Spiel, das nicht nur Spaß macht, sondern auch jede Menge Zeit verschwendet, wenn Sie es spielen.

Wenn Sie gerade erst anfangen, sollten Sie sich darauf konzentrieren, Ihnen das Erlernen der Grundbausteine ​​einer Website so einfach wie möglich zu machen. Und sie dann nutzen.

Was mich zur Antwort auf deine andere Frage bringt:

Manchmal, wenn ich versuche, Designarbeit zu machen, ist mein Kopf leer oder verwirrt, weil es zu viele Referenzen gibt, die mir gefallen, und es für mich schwierig ist, zu bestimmen, welches Design ich bevorzuge.

Was wäre, wenn ich Ihnen sagen würde, dass es einen schnellen und einfachen Weg gibt, all diese Referenzen aus Ihrem Kopf zu bekommen?

Skizzieren nennt man das.

Lassen Sie uns gemeinsam etwas ausprobieren, oder?

Nimm jetzt einen Stift und ein Blatt Papier.

Eigentlich sind Stifte was für Weichlinge. Gehen Sie voran und wählen Sie eine Markierung. Ein dicker.

Zeichnen Sie jetzt eine sehr schnelle Skizze des Website-Layouts, das Sie erkunden möchten.

Vergleichen Sie es dann mit dem anderen Layout, an das Sie gedacht haben.

So:

Dies sind Low-Fidelity-Prototypen .

In der Phase der Ideenfindung reicht das aus.

Im Gegensatz zu den Apps für die Erstellung von High-Fidelity-Prototypen (Photoshop und dergleichen) machen es Ihnen Low-Fidelity-Website-Skizzen schwerer, sich mit den Details zu beschäftigen. Das Ziel ist es, Ihre Ideen aus dem Kopf zu bekommen, damit Sie darüber nachdenken und verschiedene Optionen vergleichen können. Die Dauerhaftigkeit des Papiers und der Mangel an inhärenter Präzision des Markers schränken Sie ein.

Ihre Werkzeugkisten Sie in . Und das ist nicht so schlimm, wie Sie vielleicht denken. Dieses Boxing begrenzt den Komplexitätsgrad im Designprozess.

Mit anderen Worten, das Skizzieren mit Markierungen bringt Sie dem eigentlichen „Design“ näher und hält Details, an denen Sie sonst herumfummeln würden, aus dem Weg. Zur Zeit.

Hoffe, dass ich dir geholfen habe.

Der obige Text ist ein Auszug aus einem Beitrag, den ich hier veröffentlicht habe .

Zur Erstellung eines Designkonzepts / Layouts:

Beginnen Sie damit, zu entscheiden, wie sich Ihr Layout anfühlen soll:

• Helleres oder dunkleres Thema
• Sauber (korporativ, typografisch oder Layouts mit vielen Symbolen) oder mit vielen grafischen Elementen besetzt
• Verwendung von Fotos? Vielleicht ist der Hintergrund ein riesiges Bild, das das gesamte Design beeinflusst

Entscheiden Sie dann, wo Ihre Hauptelemente positioniert werden.

• Wird Ihr Menü vertikal oder horizontal sein? Wird es oben auf der Seite oder unten sein?
• Welchen Platz möchten Sie für Ihren Header reservieren? Wo und wie groß wird es sein? Was wird in der Kopfzeile stehen: ein Banner, ein Logo, Ihr Menü? Wird der Header klare Grenzen haben oder läuft er hinter dem Inhalt durch?
• Wird es eine Fußzeile geben? Wie groß und wie wichtig ist es?
• etc...

Dies hängt alles davon ab, welche Art von Gefühl Sie anstreben. Durchsuchen Sie eine Sammlung guter Webdesign-Websites nach Inspiration.

Nachdem Sie sich für das Layout und die Positionierung Ihrer Elemente entschieden haben, können Sie mit dem Design der spezifischen Elemente beginnen.

Sie stellen zwei getrennte und nicht alle miteinander zusammenhängende Fragen.

Wo kann ich meine Photoshop-Fähigkeiten erlernen und verbessern?

Ich würde mit Google und Büchern beginnen. Es gibt so viele Informationen über die Verwendung von PhotoShop online und in Buchform.

Wie kann ich mit der Arbeit an einem Konzept beginnen?

Hier geht es im Wesentlichen mehr um kreatives Denken. Natürlich gibt es viele Bücher und Websites, die dabei helfen können. Aber das ist ein weites Thema für sich.

Was helfen könnte, ist, dass Sie einfach einen Bleistift aufheben und einen Skizzenblock bekommen. Wenn Sie an einer Idee arbeiten müssen, skizzieren, skizzieren, skizzieren und noch mehr skizzieren.

UI-Design ist ein faszinierendes Gebiet und es gibt eine Menge zu lernen. Erstmal herzlich willkommen! Lassen Sie sich nicht entmutigen, wenn die Dinge nicht von Anfang an zu 100 % perfekt sind, es ist ein sich ständig weiterentwickelndes Gebiet, und ich denke, jeder UI-Designer wird Ihnen sagen, dass es mindestens 2 Jahre gedauert hat, bis sie Arbeiten produziert haben, auf die sie wirklich stolz waren. Bei mir war es noch länger.

Ich werde es in 5 verschiedene Bereiche unterteilen:

1. Sammeln Sie Ihre Gedanken
2. Bauen mit Kontext
3. Einstieg
4. Erstellen der Benutzeroberfläche
5. Implementieren der Benutzeroberfläche

Ich gehe einfach davon aus, dass dies eine Art Webanwendung ist (responsiv oder nicht, spielt keine Rolle). Viele der gleichen Schritte sind sowohl beim Design von Mobil- und Desktop-Anwendungen als auch bei Marketing-Websites weit verbreitet.

1. Sammeln Sie Ihre Gedanken

Dieser ist ziemlich einfach. Sie sagten: „Ich weiß, was gutes Design und eine gute Benutzeroberfläche sind.“ Groß! Fangen Sie an, mentale Notizen darüber zu machen, was Ihnen an Ihren bevorzugten Benutzeroberflächen und am besten gestalteten Websites gefällt. Was macht sie so effektiv? Was sind die Teile, die sie verwenden (wiederverwendbare Komponenten)? Was tun sie, das nur Sinn macht?

Fangen Sie an, dies als Notizen, Websites und Designs zu speichern. Zum Beispiel habe ich einen riesigen „Inspiration“-Lesezeichenordner, ich schreibe Dinge mit Evernote auf und ich mag Snippets auf Dribbble.

Identifizieren Sie nicht nur gutes Design, sondern fragen Sie sich, WARUM es gutes Design ist, und fangen Sie an, darüber nachzudenken, wie Sie ähnliche Entscheidungen treffen und Ideen in Ihrem eigenen Design umsetzen würden. Ich bin ehrlich davon überzeugt, dass man zu etwa 50 % dorthin gelangt, wenn man einfach viele verschiedene Designarbeiten schätzt, sich viele Fragen stellt und über Design nachdenkt. Der Rest ist nur Hinrichtung.

2. Bauen mit Kontext

Bei jedem Projekt, Produkt oder Design, an dem Sie arbeiten, gibt es einen Grund dafür. Jede Person, die dieses Design verwendet oder mit ihm interagiert, hat einen Grund, dort zu sein – sei es beim Schreiben eines Blogbeitrags, beim Suchen nach etwas, beim Sammeln von Informationen oder bei der Interaktion mit anderen Benutzern. Finden Sie heraus, was ein Benutzer tut, und bauen Sie alles darauf auf.

Arbeiten Sie mit Produktmanagern, Stakeholdern, Kunden, anderen Entwicklern oder Designern zusammen, mit wem auch immer Sie sprechen können.

Ein gutes Beispiel dafür in der Praxis ist Ghost . Sie wollten das Bloggen vereinfachen und eine leistungsstarke Benutzeroberfläche erstellen. Hier ist ein Beispiel ihres Backend-Editors . Einige Annahmen, die sie hätten treffen können: Die meiste Zeit wird mit dem Schreiben/Bearbeiten von Blog-Beiträgen verbracht. Der Fokus liegt auf dem Inhalt. Aufgeräumter Arbeitsplatz. Das Einbringen externer Assets (z. B. Bilder) ist eine häufige Aufgabe. Die meisten werden mit dem einfachen Markdown vertraut sein (aber, hey, zeigen wir eine Live-Vorschau für diejenigen, die es nicht sind).

Diese Annahmen wurden wahrscheinlich diskutiert und bekannt, bevor ein "Design" stattfand. Der Inhalt für die Gebäudeplanung ist sehr wichtig.

Der Punkt ist: Sie müssen wissen, was Sie bauen, wer die Benutzer sind, und Sie sollten diese aufschreiben, bevor Sie etwas skizzieren. Kunden oder andere Projektbeteiligte schätzen diesen Ansatz, weil es weniger darum geht, was Sie wollen, als vielmehr darum, was ein Benutzer wollen würde.

3. Erste Schritte

Das ist das erste Mal, dass Sie sich fragen sollten: Wie soll es aussehen?

Hier fangen die Dinge an, sehr subjektiv zu werden. Viele Designer verzichten auf Wireframes und Skizzen und starten in Photoshop. Viele überspringen Photoshop oder andere Desktop-Anwendungen und beginnen mit dem Designen im Browser. Es gibt keine richtigen nächsten Schritte .

Aus Gründen der Argumentation empfehle ich, Ideen zu skizzieren und an einer Art Drahtmodell zu arbeiten, insbesondere wenn Sie gerade lernen. Musst du aber nicht. Sie können Ideen auf einem Notizblock oder vielleicht Balsamiq skizzieren . Vielleicht ein paar Stilplättchen zusammenstellen . Vielleicht ein Moodboard . Springen Sie vielleicht auf Dribbble und werfen Sie ein paar Gegenstände in einen „ Eimer “. Suchen Sie vielleicht nach Websites von Mitbewerbern und skizzieren Sie ein paar Ideen auf der Grundlage dessen, was sie tun.

Beginnen Sie an dieser Stelle einfach damit, Ihre Ideen visuell auszuarbeiten. Layout, Farbe, Typografie, Bilder, Branding, wiederholbare UI-Komponenten und sogar Animationen sind alle wichtig – was noch wichtiger ist, wie sie alle zusammenpassen, um Ihr Ziel zu erreichen, eine großartige UI für Ihre Benutzer zu erstellen.

Ein letzter Punkt ist, dass ich dem Konzept hinter Atomic Design sehr zustimme . Grundsätzlich besteht die Idee darin, wiederholbare, konsistente Elemente auf Ihrer gesamten Website zu erstellen, und dann ist die Idee, dass Sie nur die Komponenten auf jeder von Ihnen gestalteten Seite organisieren. Definitiv etwas, worüber es sich zu lesen lohnt, es ist ein sehr nützlicher Weg, um mit der Konzeption Ihrer Schnittstellen zu beginnen.

4. Erstellen der Benutzeroberfläche

Sie haben die Benutzer und die Grundlagen im Griff. Hoffentlich haben Sie einige Wireframes und Stilideen parat. Jetzt kommt der einfache Teil: alles zusammenbringen.

Ich verwende je nach Projekt Photoshop, Sketch, Illustrator und In-Browser-Design. Das Werkzeug ist nicht wichtig, da es schon ein Dutzend Mal nach Hause gefahren wurde.

Wichtig ist, dass Ihnen das Tool gefällt, das Sie verwenden . Sie sollten ehrlich Spaß damit haben, und wenn es sich anfühlt, als wäre ein Tool schwer zu benutzen oder Ihre Ideen einzuschränken, versuchen Sie etwas anderes. Wenn Sie Photoshop mögen, ist absolut nichts falsch daran, nur Photoshop zu verwenden. Tun Sie, was für Sie richtig ist – Sie können sich später jederzeit andere Software und Tools ansehen und in Betracht ziehen.

Ein wichtiger Schritt beim Erstellen der Benutzeroberfläche ist das Sammeln von Feedback. Kunden, Teammitglieder oder tatsächliche Benutzer. Versuchen Sie zu vermeiden, ein Design zu veröffentlichen, ohne Feedback von einer Vielzahl von Personen zu erhalten. Iterieren Sie, testen Sie Annahmen und haben Sie keine Angst, das Design zu streichen und neu zu beginnen.

Hier ist ein Beispiel für ein gut ausgeführtes High-Fidelity-Mockup.

Ein paar Imbissbuden: gute Typografie, klare Verwendung von Farben, helle und große Schaltflächen und gutes Layout (der helle Hintergrund mit den weißen "Kästchen" hilft, die Idee auf die Formulare zu übertragen). Genauer gesagt: benutzerdefinierte Zustände auf Formularelementen, Markenillustrationen (der Strichzeichnungsstil auf der Dokumentillustration) und das benutzerdefinierte Aussehen für die "codierten" Elemente unter Verwendung einer Monospace-Schriftart. Auch kleine UX-Überlegungen wie eine „Später verifizieren“-Option oder eine „empfohlene“ Option sind eine tolle Sache.

Bei der Erstellung eines Modells wie diesem wurden die meisten Elemente bereits entworfen oder durchdacht. Dinge wie Farben, Typografie, Formbehandlungen, Schaltflächenstile, Markenelemente oder Illustrationen usw. sollten durchdacht oder berücksichtigt worden sein, bevor Sie die gesamte Benutzeroberfläche zusammensetzen.

5. Implementieren der Benutzeroberfläche

An diesem Punkt haben Sie einige letzte Designarbeiten erledigt, und jetzt ist es an der Zeit, sie zu implementieren. Ich bin mir nicht sicher, ob Sie Implementierungsarbeiten planen oder einfach nur an reinen Grafikmodellen arbeiten. Aber selbst wenn Sie Ihre Benutzeroberfläche nicht implementieren, sollten Sie wissen, was in der Welt von HTML und CSS möglich ist und was nicht.

Im Allgemeinen erfordert diese Phase, dass Sie mit einem Front-End-Entwickler zusammenarbeiten, um Ihre Vorlagen so zu erstellen, dass er sie verstehen kann. Kommunizieren Sie frühzeitig und häufig mit Ihren Entwicklern, wie sie die bereitgestellte Benutzeroberfläche wünschen.

Ein paar kurze Hinweise zur Umsetzung:

1. Lernen Sie, eine kompilierte CSS-Sprache wie Sass, SCSS oder LESS zu verwenden. Auf jeden Fall die Zeit wert.
2. Erstellen Sie jede wiederverwendbare Komponente als wiederverwendbare Komponente in Ihrem CSS. Bringen Sie so viele Variablen und wiederverwendbare Teile wie möglich ein.
3. Erstellen Sie einen Styleguide für Ihre Entwickler, der alle wiederverwendbaren Komponenten zeigt. Super nützlich, wenn eine Seite schnell aufgebaut werden muss und sie die Teile haben, die sie brauchen, um etwas zusammenzuwerfen.

Photoshop-Tipp: Verwenden Sie die Copy-CSS-Funktion , um bei der Implementierung zu helfen! Wirklich nützliches Tool für Anfänger, aber bitte verwenden Sie diesen Code niemals als final. Betrachten Sie es eher als Lernwerkzeug (hilft, die Lücke zwischen Mockup und Implementierung zu schließen).

TL;DR

1. Sammeln Sie Gedanken darüber, was eine gute Benutzeroberfläche und gutes Design ausmacht. Machen Sie sich Notizen, speichern Sie Lesezeichen usw. Dieser „Gedankenkatalog“ treibt viele Entscheidungen an, die Designer treffen.
2. Vertiefen Sie sich wirklich in das, was Sie entwerfen und wer die Benutzer sind. Beginnen Sie Diskussionen, schreiben Sie Ziele und Annahmen auf und stellen Sie sicher, dass alle auf derselben Seite sind.
3. Beginnen Sie mit der Arbeit an Low-Fidelity-Mockups und Wireframes sowie mit ersten Versuchen an Styleguides und dem Skizzieren wiederverwendbarer Komponenten. Viele Designer werden sagen, dass es für diese Artikel eine bestimmte Reihenfolge gibt, aber ehrlich gesagt funktioniert jede Reihenfolge.
4. Erstellen Sie High-Fidelity-Modelle. Verwenden Sie Photoshop, Illustrator, Sketch, bauen Sie im Browser, was immer sich für Sie am besten anfühlt. Sie können alle Tools oder nur eines verwenden.
5. Setzen Sie es um. Da jedes Produkt/Projekt anders ist, gibt es nicht allzu viel zu sagen. Ich würde vorschlagen, wann immer möglich, Ihr eigenes CSS zu schreiben - es ist großartig zu lernen.
6. Viel Spaß und lassen Sie sich inspirieren. Halten Sie sich nicht mit Tools oder Best Practices auf. Sie werden mit der Zeit herausfinden, was Ihnen gefällt. Im Moment ist der wichtigste Schritt, zu erstellen, aufzubauen und ständig nach Verbesserungen zu suchen.

Viel Glück da draußen!