Grafikdesign und Programmierung überschneiden sich dank Internet immer mehr.

Als Programmierer benötige ich ständig Grundkenntnisse in Grafikdesign, habe jedoch Probleme, gründliche und dennoch übersichtliche Lernressourcen für Grafikdesign zu finden, und finde stattdessen in der Regel die für die jeweilige Aufgabe erforderlichen Kenntnisse.

Könnt ihr ein paar Tipps geben oder ein paar gute Bücher, Tutorials, Blogs und Websites empfehlen, die einen Überblick über das Webdesign auf Anfängerebene bieten, das eurer Erfahrung nach effektive und qualitativ hochwertige Lernmaterialien bietet? Ich bin nicht auf der Suche nach Tipps zur Verwendung von Bildbearbeitungswerkzeugen, sondern gehe davon aus, welche Ressourcen und Ratschläge einem neuen Designer am besten helfen, professionell aussehende Designs zu erstellen.

• Bleiben Sie einfach - Versuchen Sie zunächst nicht, etwas zu Fantasievolles oder Abenteuerliches zu tun. Machen Sie sich erst mit den Grundlagen vertraut, dann können Sie mit dem Experimentieren beginnen. Versuchen Sie nicht, die Star Trek-Computeroberfläche zu emulieren.
• Seien Sie konsequent - Ein konsequentes Design ist Teil der Grundlage eines guten Designs. Behalten Sie Ihre Ränder, Größen und Platzierungen im Auge und behalten Sie sie während des gesamten Designs bei.
• Unordnung entfernen - Schließen Sie nur die Elemente ein, die für das Design erforderlich sind. Alles andere entfernen.
• Priorisieren - Was ist der Hauptzweck des Designs? Betonen Sie diesen Zweck. Machen Sie es deutlich.
• Leerzeichen verwenden - Richtige Ränder zulassen. Große Textblöcke mit kleinen oder keinen Rändern sind nicht gut lesbar. Das Gleiche gilt für andere Designelemente.
• Verwenden Sie eine Farbpalette - Sie sollten insgesamt nicht mehr als 4-5 Farben verwenden.
• Konsistente Schriftarten - Halten Sie sich an eine oder zwei Schriftarten. Verwenden Sie sie konsequent, normalerweise eine für Überschriften und eine für Absatztexte. Berechnen und pflegen Sie konsistente Schriftgrößen, Zeilenhöhen und Zeilenabstände. Verwenden Sie Comic Sans nur, wenn Sie tollwütige Velociraptor-Zombies abwehren können.
• Design First - Design sollte kein nachträglicher Gedanke sein. es sollte ein erstklassiges Mitglied der Planungsphase sein. Design ist die Art und Weise, wie Ihre Benutzer mit Ihrer Programmierung interagieren, und sie werden sich zuerst ihre Meinung bilden und sich größtenteils auf Ihr Design stützen. Geben Sie dem Design die richtige Bedeutung.

Informationen zu Ressourcen finden Sie auf den folgenden Websites:

• Smashing Magazine
• PSD Tuts
• Abuzeedo
• UX-Stand
• Ich liebe Typografie
• Jason Santa Maria

Jim Krauses Design-Basics-Index gab mir einen sehr guten Überblick über die Grundlagen von Komposition, Farbe und Typ. Ich war kein großer Fan der meisten seiner eigenen Beispiele, aber sie veranschaulichen seine Punkte sehr gut und er geht auf einige wertvolle Dinge ein, die ich anderswo nicht viel erwähnt habe. Und vielleicht am wichtigsten war, dass ich beim Lesen sehr aufgeregt war, mit den Ideen zu experimentieren, die er vorstellte.

Es gibt manchmal eine leichte Überschneidung zwischen Webentwicklung und Webdesign, aber ich denke nicht, dass Webentwickler versuchen sollten, Vollzeitdesigner zu sein, es sei denn, sie sind bereit, sich so viel Mühe zu geben, wie sie das Programmieren gelernt haben. Es ist nicht etwas, in das man sich am Wochenende einfach vertiefen und gut darin sein kann.

Wenn dies so ist, dass Sie lernen können, Ihr eigener Webdesigner zu sein (dh Ihr eigenes Webdesign für alle Websites, an denen Sie arbeiten), dann empfehle ich Ihnen wirklich, eine formelle Ausbildung zu absolvieren (auch wenn Sie nur ein paar College-Designkurse belegen). die Grundlagen der visuellen Gestaltung und Komposition zu erlernen. Ein Designbuch im Stil eines Lehrbuchs wie das von Damon könnte hilfreich sein, aber Sie müssen tatsächlich alle Übungen im Buch ausführen und sicherstellen, dass Sie das Material verstehen. Am wichtigsten ist jedoch, dass Sie viel Zeit mit dem Anschauen (Durchsuchen von Online-Designgalerien, Durchblättern von Magazinen und Anzeigen für Magazine usw.) und dem Erstellen von Designs verbringen müssen (Laden Sie einige Designübungen online herunter oder nehmen Sie an Online-Designwettbewerben teil).

Wenn Sie mit den Web- / Grafikdesignern, mit denen Sie arbeiten, kommunizieren möchten, ist es wahrscheinlich die beste Gelegenheit, ein Buch zu erhalten, in dem Sie den Wortschatz (z. B. Typografiekonzepte) erlernen und sich auf Benutzerfreundlichkeit , Barrierefreiheit und UX-Design konzentrieren . Auf diese Weise können Sie sich an der kreativen Ausrichtung des Projekts beteiligen und beim Entwerfen der Benutzeroberflächen helfen. Der Designer ist jedoch derjenige, der das "Aussehen" oder die Ästhetik der Website erstellt.

Virtuosi Media listet viele gute Ressourcen auf (das Tutsplus-Netzwerk ist im Allgemeinen großartig, und das Smashing Magazine ist ein Muss für jeden Webentwickler / -designer), zu dem ich Folgendes hinzufügen möchte:

• http://www.alistapart.com/
• http://webdesignledger.com
• http://behance.net - beherbergt die Portfolios vieler erstklassiger Designer, von denen Sie sich inspirieren lassen können

Ich bin selbst Programmierer und für mich waren die folgenden Bücher sehr hilfreich:

• Das Designbuch des Nicht-Designers von Robin Williams: Dieses Buch behandelt die Grundlagen des Grafikdesigns.
• Zeichnen auf der rechten Seite des Gehirns von Betty Edwards: Das Buch zur Entwicklung Ihrer Zeichenfähigkeiten.
• Das humane Interface von Jef Raskin: Dieses Buch regt einige Gedanken zum Design von Benutzeroberflächen an.

Vielleicht nicht für alle Fälle relevant, aber für Web-Programmierer ist eines der größten Dinge, die mir auffallen und die vielleicht ein wenig überbrücken, CSS von innen und außen zu lernen, da es nichts bedeutet, gut zu entwerfen wenn Sie es nicht in Ihr Projekt integrieren können, das Sie erstellen.

2004 befand ich mich auf halbem Weg zwischen beiden Welten, wie ich es fast mein ganzes Leben lang getan hatte - ich hatte in den Dotcom-Tagen seit HTML 3.2 Web gemacht; aufgewachsen mit einem Apple // e von Eltern (einem Choreografen und einem Pädagogen), die mir erlaubten und mich ermutigten, viel Zeit mit Kunst zu verbringen. Design ist keine Kunst, und tatsächlich passen einige seiner algorithmischeren Muster gut zur Programmierung, egal ob Sie im Web oder auf andere Weise arbeiten.

• Bücherregal-Histogramm - ein Druck, den ich in der Graduiertenschule gemacht habe und der sowohl Design- als auch Entwickler-Y ist.

Aber ja, 2004: Ich habe den Unterschied aufgeteilt, als ich zur Graduiertenschule gegangen bin, wo ich zuerst eine erstklassige typografische Ausbildung erhalten habe und dann den Spielraum erkundet habe.

Vielleicht überlegen Sie sich also eine Hochschulausbildung, oder was auch immer für Sie allgegenwärtig ist. Viel Glück damit.

Erfahren Sie viel über Typografie.

Von den Klassikern ...

^{Jan Tschichold}

Nicht die Clowns ...

^{David Carson}

Strategische und effektive Typografie ist eine der am häufigsten fehlenden Eigenschaften in diesem Bereich (und war es schon immer).

Normalerweise kann ich einen Designer einstellen, der sich ganz von seiner Art unterscheidet. Ungefähr 80% der Geschichte stimmen mit dem erstellten Lebenslauf überein.

Ein guter (kostenlos) Start ist diese detaillierte Anpassung der die wesentlichen Ressource von Robert Bringhurst für die Anwendung auf das Netz.

^{Die Elemente des typografischen Stils, Bringhurst}

Dies ist eine umfassendere Überlegung , die sich mit dem Zusammenspiel von Typ und Layout befasst.

^{Rastersysteme im Grafikdesign, Brockmann}

1. Denken Sie kritisch über gestaltete Objekte in Ihrer Umgebung nach

   Fast alles in der vom Menschen geschaffenen Umgebung hat eine Art Design, sei es eine Grafik, eine Website oder ein Modeaccessoire.

   Beachten Sie, wie gut das Design für den beabsichtigten Zweck funktioniert und wie es aussieht.

2. Stellen Sie sich Design vor, um einen Bedarf zu decken oder ein Problem zu lösen

   Während es darum geht, Dinge gut aussehen zu lassen, unterscheidet sich Design von anderen Arten von Kunst darin, dass es eine praktische Anwendung hat.

   Ein Logo ist beispielsweise eine Art Grafikdesign, mit dessen Hilfe eine Marke oder ein Unternehmen schnell wiedererkannt werden kann.

   Ein Kleidungsstück dient dazu, den Körper zu bedecken und den Träger attraktiver zu machen.

3. Übe visuell zu kommunizieren.

   Designer müssen in der Lage sein, Zeichnungen oder andere Darstellungen ihrer Entwürfe anzufertigen, um sie zu verfeinern und anderen Personen, wie z. B. Designkollegen und Herstellern, zu erklären.

   Zeichnen ist ein mächtiges Werkzeug für Designer, aber keine Sorge, wenn Sie nicht fotorealistisch zeichnen können. Designerzeichnungen müssen keine Meisterwerke sein, sondern nur eine Möglichkeit, schnell Ideen zu erfassen, die zum fertigen Produkt führen. Die Rückverfolgung ist ebenfalls völlig akzeptabel.

   Neben Zeichnungen verwenden Designer auch Modelle, Prototypen und Computerbilder, um ihre Entwürfe zu visualisieren.

4. Entdecken Sie, wie Dinge gemacht werden

   Wenn Sie als Designer arbeiten, müssen Sie nicht nur überlegen, was dem Auge gefällt, sondern auch, wie Ihr Design umgesetzt wird.

   Für ein Objekt wie eine Handytasche müssen Industriedesigner darüber nachdenken, welche Art von Kunststoff- und Spritzgussverfahren verwendet werden und wie die einzelnen Teile miteinander verbunden werden.

5. Gute Informationsquellen finden

   Suchen Sie neben Designmagazinen nach Büchern über den Prozess, die Prinzipien und Methoden des Designs.

   Schauen Sie sich Lehrbücher und technische Videos an, um mehr über die Herstellung von Bekleidung, Herstellungsmethoden und verschiedene Handwerkstechniken zu erfahren.

   Das Erlernen von Design geht tiefer als das Lesen von Mode und das Dekorieren von Zeitschriften, obwohl dies eine gute Ressource für aktuelle Trends ist.

6. Entwickeln Sie Ihre Designfähigkeiten

   Lernen und Üben ist gut, aber das, was Ihr Design wirklich auf die nächste Stufe hebt, ist die Erfahrung der realen Welt.

7. Machen Sie schnell Fehler

   Sie werden viele Fehler machen und je schneller Sie durch sie kommen, desto besser.

8. Seien Sie immer bereit, Ideen zu fangen.

   Überall nach Inspiration suchen. Inspiration muss nicht von anderen Designs oder Designtrends ausgehen - oft kommt sie von der Natur oder von Dingen, die zufällig passieren.

Bücher & Materialien

http://www.alistapart.com

http://webdesignledger.com

Smashing Magazine

PSD Tuts

Abuzeedo

UX-Stand

Ein paar Punkte zu beachten:

1. Jedes Design löst ein Problem

Hören Sie auf, an das Design zu denken, wenn Sie sagen: "Wie mache ich das hübsch?" und fang an darüber nachzudenken in Begriffen "Wie mache ich es so einfach zu bedienen wie nur irgend möglich?"

Wenn Sie Websites erstellen, bedeutet dies, dass Sie im weitesten Sinne ein Geschäftsproblem lösen .

Es gibt eine Website, um ein Geschäftsziel zu erreichen .

Die Benutzer einer Website haben auch ein eigenes Ziel: Sie möchten möglicherweise etwas kaufen, Produkte vergleichen, sich über ein Thema informieren usw.

Es ist Ihre Aufgabe als Designer, dem Unternehmen zu helfen, indem Sie sicherstellen, dass so viele Benutzer wie möglich das Unternehmensziel erreichen, und den Benutzern dabei helfen, auf der Website zu navigieren, damit sie ihr eigenes Ziel erreichen können.

Zum Beispiel entwerfen Sie einen E-Commerce-Shop: Das Geschäftsziel ist hier der Verkauf der Produkte. Und das Ziel der Nutzer ist es, so schnell wie möglich genau das zu finden, was sie kaufen möchten, und so schnell wie möglich auszuchecken.

Ein großer Teil des Designprozesses besteht darin, das Problem herauszufinden, ein Benutzerprofil zu erstellen, zu überlegen, wie das Geschäftsziel erreicht werden kann usw.

Die Farben, Schriftarten, das Layout und jede Designentscheidung, die Sie treffen, müssen vom Ziel der Website bestimmt werden .

2. Es ist die Wiederholung, die die Dinge schön aussehen lässt .

Darum geht es bei Konsistenz.

Zum Beispiel das Koppeln von Schriftarten. Schriftarten werden aufgrund ähnlicher Merkmale und Wiederholungen von Details gepaart.

Hier ist ein Match: Farnham und Benton Sans.

Laut diesem Beitrag hier 2 stimmen diese beiden Schriften überein, weil:

[...] die Gesichter gleichen sich in der Hocke ihrer Kleinbuchstaben, die deutlich kurze Auf - und Abgänge haben. [...] Die Kleinbuchstaben beider sind breit.

Durch die Wiederholung bestimmter Merkmale passen diese beiden Schriftarten gut zusammen. Sie können sie auf einer Webseite hier 3 sehen .

Wiederholung bringt Harmonie in ein Design. Und Harmonie lässt das Design schön aussehen.

Aber wie Sie sehen können, stehen Farnham und Benton Sans auch im Kontrast: Farnham ist eine Serifenschrift und Benton ist eine serifenlose Schrift.

Warum braucht es Kontrast? Wir wollen Ähnlichkeiten in ein Design einbauen, oder?

Nun ja, aber zu viele Wiederholungen machen Ihre Designs langweilig und schwer zu bedienen .

Die Heilung ist dagegen.

3. Kontrast hilft dem Benutzer, sich zurechtzufinden

Es hilft ihnen, verschiedene Elemente voneinander zu unterscheiden. Es hilft ihnen, die wichtigsten Elemente wie Überschriften, Navigation und Schaltflächen zu finden.

Je wichtiger das Element ist, desto stärker sollte es sich von seiner Umgebung abheben.

Verwenden Sie die Wiederholung, um Ihre Entwürfe konsistent zu machen. Wie andere bereits gesagt haben - 2 Schriftarten, eine begrenzte Farbpalette usw.

Verwenden Sie Kontrast, wenn Sie ein Element wirklich vom Rest unterscheiden müssen.

Das ist alles schön zu wissen, aber ... hilft Ihnen trotzdem nicht bei der Gestaltung Ihrer nächsten Website, oder?

Nun, auch dafür habe ich eine Lösung .

Schritt 1, um im Webdesign besser zu werden, ist, die Arbeit anderer zu beobachten und aufzunehmen . Viel davon. Das ist, wo "Inspiration" herkommt.

Schauen Sie sich hundert Designs an, die Ihnen gefallen, analysieren Sie sie und Sie werden Muster erkennen. Ihr Gehirn wird Ihnen helfen, diese Muster zu Ihrem eigenen Design zu kombinieren, das eine Variation aller ähnlichen Designs ist, die Sie gesehen haben. Sie müssen nichts "Einzigartiges" erstellen.

Zusammenfassung: Wenn Sie das nächste Mal mit dem Entwerfen für Ihr Nebenprojekt beginnen

Sehen Sie sich ein Dutzend ähnlicher Websites / Web-Apps an und machen Sie schnelle Skizzen ihrer Designs. Notieren Sie, welchen Workflow sie verwendet haben. Warum haben sie es benutzt? Beachten Sie, welche Formen, Farben und Schriftarten sie verwendet haben.

Führen Sie dann diesen Prozess aus, um Ihr eigenes Design zu erstellen:

1. Definieren Sie das Projekt. Tauchen Sie ein in das Projekt und erfahren Sie mehr über:

   1. Zweck, beabsichtigte Ergebnisse

   2. Seine (zukünftigen) Nutzer
   3. Die beabsichtigte Erfahrung für seine Benutzer / Besucher
   4. Das Branding hinter dem Projekt
2. Beschaffen Sie sich die benötigten Ressourcen. Holen Sie sich (Beispiel-) Inhalte (von ähnlichen Websites ausleihen)

3. Geben Sie dem Inhalt eine Form

   1. Wählen Sie eine Schriftart, in die der Inhalt eingefügt werden soll (wählen Sie eine, die der Stimmung und der Botschaft der Site entspricht).
   2. Wählen Sie die Schriftgröße für die Arbeitskopie
   3. Generieren Sie eine modulare Skala (eine Tabelle mit proportionalen harmonischen Abmessungen) aus der Schriftgröße der Körperkopie (unter Verwendung von Typenskala - Ein visueller Rechner).
   4. Skizzieren Sie verschiedene Layouts basierend auf den Projektanforderungen
   5. Erstellen Sie das Layout (in HTML und CSS) mit Hilfe des modularen Maßstabs: Spaltenbreite, Zeilenhöhe, Überschriftengröße, untere Ränder, Spalten (falls erforderlich)
   6. Tragen Sie die Farbe gemäß der Markenrichtlinie auf

Sie können hier mehr über jeden Schritt dieses Prozesses lesen .

Ein paar mehr:

1. Durchsuchen Sie inspirierende Websitesammlungen nach Ideen. Eine Sammlung voller inspirierender Websitesammlungen enthält eine ganze Reihe von Sammlungen. Weitere zwei gute Websites sind siiimple.com und minimalsites.com .

2. Der Vorschlag von Virtuosi Media zum Entfernen von Unordnung ist auf jeden Fall ideal, aber eine Site mit Unordnung, die von einem Anfänger erstellt wurde, sieht besser aus als eine minimalistische Site, die von einem Anfänger erstellt wurde. Unordnung tarnt etwas die anderen schlechten Entwurfselemente und lenkt mit Inhalt ab. Die typische Geschäftswebsite ist viel zu unübersichtlich, wie fast alle Vorlagen, sieht aber immer noch professionell aus.
   
   Es bedarf einer engen Verbindung mit Schriftarten, Kontrast, negativem Abstand, Farbe, Dichte, Fluss, ..., um eine wirklich gut gestaltete, effiziente Website zu erstellen, die gut atmet.

3. Wenn das alles ein bisschen überwältigend wird, sollten Sie eine Vorlage kaufen.

Nur um ein paar Links für Leute mit Programmierhintergrund hinzuzufügen, die sich für UI-Design interessieren.

• Design für Hacker (gedrucktes Buch)
• Prinzipien des User Interface Designs (Seite)
• Schritt für Schritt UI Design (ebook)
• Die Form des Designs (kostenlose Online-Version)

Am Anfang werden Sie Probleme haben, da einige Dinge Ihnen nicht im Weg stehen. Aber Sie müssen geduldig sein und viel üben. Als ich anfing, meine Arbeit vor 4 Jahren zu entwerfen und zurückzublicken, kann ich nicht glauben, dass ich das getan habe.

Sie müssen sich wirklich nach anderen großartigen Designern umsehen. Dafür solltest du großartigen Designern auf Dribbble folgen . Außerdem ist es sehr wichtig, regelmäßig die neuesten Designs auf CSS-Galerieseiten wie www.minimalistgallery.com oder anderen zu sehen.

Ich wünsche Ihnen alles Gute !!!

Abonnieren Sie http://sidebar.io/ für tägliche Newsletter. Jeder Artikel wird auf die eine oder andere Weise hilfreich sein. Eine weitere großartige Möglichkeit, selbst etwas über Designs zu lernen, ist Dribbble .

Dies mag ein allgemeiner Tipp sein, aber für mich ist es etwas, das wirklich sagt, ob jemand ein guter Designer ist oder nicht:

Leerzeichen, Ränder und Ausrichtung.

Sie sind der Schlüssel zur Schaffung von eleganten, professionell aussehenden Designs. Sie schaffen eine Art „Atempause“ und können wirklich bestimmen, ob Ihr Design zusammen passt oder nicht. Genau wie bei Schriftarten möchten Sie bestimmte Ränder / Leerzeichen einhalten, um ein sauberes Layout zu erhalten.

Um den Überblick zu behalten, kann die Verwendung eines Rasters oder von Hilfslinien zum Entwerfen sehr nützlich sein.

Ihre Frage lautet: "Als Designer benötige ich ständig Grundkenntnisse in der App-Programmierung." Sie sind beide ausgedehnte Gebiete mit überlagerten Regionen, die sich gegenseitig brauchen. Die gute Nachricht: Sie sind interessiert und wissen, wie wichtig sie sind. Die schlechte Nachricht: Es gibt keine einfache Möglichkeit, die Voraussetzungen für ein gutes Design vollständig zu verstehen, ohne einen geeigneten Kurs oder eine geeignete Methodik. ABER für die ersten Schritte ist dieses Buch in gewisser Weise gut geeignet, um mit dem Aufbau sinnvoller visueller Systeme sicher zu beginnen.

Nicht-Designer-Design-Buch