So erstellen Sie großartige Schnittstellen in PhotoShop usw.


8

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 weiß jedoch nichts über PhotoShop oder irgendetwas, das mit Design zu tun hat, außer HTML und CSS.

Wo soll ich anfangen? Wie lerne ich, wie man schön gestaltete Websites und Oberflächen erstellt?

Gibt es ein Buch, ein Tutorial usw., das Sie empfehlen?

Vielen Dank!

Antworten:


4

Für die Benutzeroberfläche empfehle ich die Verwendung von Fireworks über Photoshop. Photoshop eignet sich hervorragend für kreative und komplexe Grafiken (Druck oder Web), ist aber meiner Meinung nach ein übermäßig komplexes Tool für die webbezogene Benutzeroberfläche.

Fireworks wurde speziell als weborientiertes Authoring-Tool entwickelt, das Photoshop nicht bietet. Das Tool-Set für Fireworks ist auf die Erstellung der Web-Benutzeroberfläche ausgerichtet, nicht auf die komplexe kreative Arbeit, die Photoshop bietet.

Fireworks verwendet ein sehr ähnliches Tool-Set wie Photoshop, abzüglich des Aufblähens, sodass Sie alles tun können, was Sie zum Erstellen einer Web-Benutzeroberfläche benötigen.

Fireworks ist auch Teil der Adobe Creative Suite. Wenn Sie also über Photoshop verfügen, sollten Sie es auch haben.

Referenzmaterial, nicht spezifisch für Fireworks, sondern für die Benutzeroberfläche im Allgemeinen;

http://www.jankoatwarpspeed.com/

Ich würde wärmstens empfehlen, seine Artikel zu lesen und seine Arbeit als Inspiration zu betrachten. Die Benutzeroberfläche hat zwei Seiten, die er sehr gut abdeckt: Die Benutzeroberfläche und die Erfahrung mit der Verwendung der Benutzeroberfläche. Wird auch als UI und UX bezeichnet.

Informationen zur Verwendung der Anwendung finden Sie in den Online-Tutorials. Envato verfügt über ein großartiges Tutorial-Netzwerk ( http://tutsplus.com/ ). Die Haupt-Tutorial-Site für das Web ist Photoshop-orientiert. Die meisten Aufgaben in Photoshop werden jedoch in Fireworks auf dieselbe oder eine ähnliche Weise ausgeführt.

Ich finde mich auch ziemlich oft dabei, Websites mit einzigartigen Designmerkmalen oder UI-Elementen zu bookmarken, die in einem zukünftigen Szenario für ein Projekt gut funktionieren würden. Zum Beispiel eine eindeutige Registerkartenstruktur, ein Akkordeonstil oder sogar ein Pager.

Die Design-Benutzeroberfläche auf einer grundlegenden Ebene ist in Bereiche der Datenanzeige unterteilt. Da Sie einen Entwicklerhintergrund haben, wissen Sie, wie Sie Daten aus einer logischen Perspektive darstellen (Menüs, Akkordeons, Registerkarten usw.). Jetzt wird diese Benutzeroberfläche nur noch mithilfe dieser Steuerelemente oder Module aus einer visuellen Perspektive erstellt.

Einige zusätzliche Informationen zu UX:

http://uxmovement.com/

Ich habe auch einen Entwicklerhintergrund und kann Ihnen sagen, dass der erste Schritt beim Erstellen meiner Apps darin besteht, die Benutzeroberfläche zu erstellen, die wiederum die Apps-Funktionalität definiert. Mein erstelltes Kunstwerk dient sowohl als künstlerischer Wert für die App als auch als Funktionsdefinition. Ich baue meine Logik immer um das fertige Kunstwerk, niemals umgekehrt. Dies bedeutet immer, dass ich den Benutzer an die erste Stelle setze.

Ich hoffe, das gibt Ihnen zumindest einen Ausgangspunkt.


1

Du hast Glück. Viele Menschen sind in die Welt des Webdesigns gekommen und haben die gleiche Frage gestellt. Oft sehen Sie ein Team von Personen, bestehend aus mindestens einem Programmierer und einem Grafikdesigner. Gute Wahl mit Photoshop - daran bleibe ich.

Mit der neuesten Version von Adobe Photoshop, CS5, wurde es intensiv weiterentwickelt - es kann komplexe Aufgaben mit einfachen Werkzeugen oder noch komplexere Aufgaben mit komplexen Werkzeugen ausführen. Aber ich warne Sie, das Erlernen aller coolen Funktionen von Photoshop kann zu Nährstoffmangel führen. :) :)

Hier ist ein Tutorial, das die Grundlagen behandelt, damit Sie den Überblick behalten:

Nachdem Sie das alles erledigt haben, habe ich bei Google eine Reihe von Websites gefunden , die einige wirklich innovative Design-Tutorials enthalten.

Es gibt einige Techniken, die Sie möglicherweise lernen müssen. Ein glänzender Tipp ist heutzutage normalerweise ein guter Schritt. Um ein wirklich einzigartiges Design zu erhalten, suchen Sie in jeder Website-Vorlage nach Funktionen, die Ihnen gefallen, und verwenden Sie sie dann auf Ihre eigene Weise.

Ich hoffe das hat geholfen. Hinterlasse einen Kommentar, wenn du weitere Informationen benötigst.


Vielen Dank. Eine Frage: Was meinst du mit "glänzend"? danke
Donald

Dinge glänzend aussehen lassen - Schaltflächen, Navigationsleisten, Überschriften
Christopher
Durch die Nutzung unserer Website bestätigen Sie, dass Sie unsere Cookie-Richtlinie und Datenschutzrichtlinie gelesen und verstanden haben.
Licensed under cc by-sa 3.0 with attribution required.