Das Designer-Toolset: Workflows, Software und Websites

Genau wie Softwareentwickler, Inhaltsschreiber, Marketingmitarbeiter usw. benötigen Designer ein gutes Toolset, um die tägliche Arbeit zu bewältigen. Wir haben hier versucht, solche Tools, Workflows und die Art und Weise, wie Sie sie kombinieren können, zu skizzieren, um Ihre Arbeit zu beschleunigen und die Wahrscheinlichkeit von Fehlern und Irrtümern zu verringern.

Informationen sammeln

Wenn ein neues Projekt kommt, geht es in den ersten Stunden hauptsächlich darum, Informationen darüber zu sammeln - welche Probleme der Kunde hat, welche Ziele er verfolgt, was er mag usw. Während dieses entscheidenden Schritts sollte der Designer versuchen, dies zu erreichen viele nützliche Daten wie möglich, die später verwendet werden, um fundierte Entscheidungen zu treffen.

Evernote

Evernote ist eine erstaunliche Software - es ist nicht nur eine App zum Notieren. Es kann Dateien speichern, sie in Sammlungen, Tags, Gruppen usw. kombinieren. Durch seine leistungsstarke Suche können Sie auf frühere Projekte zurückgreifen und so weiter. Die mächtigste Seite davon ist natürlich, wie Sie es verwenden. Sie haben eine grobe Richtlinie für einige organisatorische Ansätze.

E-Mail, Slack, Zoom…

Das nächste ist ein anderes offensichtliches, aber es gibt einen Grund, warum wir es hinzugefügt haben - das Verschieben eines Anrufs, einer Nachricht oder eines Videotreffens kann eine große Verzögerung für ein Projekt bedeuten. Oft ist die Möglichkeit, einen Bildschirm gemeinsam zu nutzen und Modelle, Drahtmodelle, Konzepte und Designs durchzugehen, ein Lebensretter. Vergiss das nie

Inspiration finden

Sobald genügend Informationen vorhanden sind, besteht der nächste Schritt darin, Inspiration zu sammeln - wie sollte eine App / Website aussehen, wie ist der Stil, was ist das Ziel usw. Gibt es coole Ideen für die Verwendung neuer Technologien oder verschiedener Medientypen? ? Alle Designer suchen links und rechts nach Inspiration - Websites, Bücher, Zeitschriften, alles.

Dribbble, Behance und ähnliche Websites

Aus diesem Grund (und damit Designer prahlen) gibt es Websites wie Dribbble. Dort können wir Designer nach Ideen und Ansätzen suchen, die Probleme lösen, mit denen wir derzeit konfrontiert sind. Manchmal besteht das Ziel darin, eine „allgemeine Verkaufsseite für Service A“ zu erstellen. Diese Verkaufsseite würde buchstäblich ein paar Absätze mit einem Foto auf Lager haben. Absolut ein wenig inspirierendes Ziel, aber es ist realistisch. Nun, die Kombination von Farben, Typografie, Abständen usw. kann etwas einzigartiger sein. Vielleicht probieren Sie auch verschiedene Layouts aus! Und die Idee dazu kann von einer zufälligen Landingpage stammen, die vor 3-4 Jahren veröffentlicht wurde. Die Discovery-Seite von 99Design ist auch ein guter Ort zum Anschauen!

Awwwards

Wir haben Websites wie Awwwards in eine separate Kategorie eingeordnet, da sie tatsächlich etwas zeigen, das erstellt wurde und funktioniert. Und außerdem konzentriert es sich mehr auf die künstlerische Art und nicht so sehr auf „irgendeine Designarbeit“. Meistens sind die Websites so umfangreich, dass sie nur auf High-End-Maschinen verwendet werden können, aber Sie können sich trotzdem von ihnen inspirieren lassen.

Farbpalette / Branding

Bei einem brandneuen Build, bei dem es keine vordefinierten Farben gibt, besteht einer der Schritte, um mit der Arbeit zu beginnen, darin, etwas auszuwählen, das zur neuen Site passt. Es gibt zwei Möglichkeiten, sich dem anzunähern: Wählen Sie ein vorhandenes Farbschema aus oder legen Sie die Primär- / Sekundärfarbe fest und arbeiten Sie das gesamte Schema basierend darauf ab.

ColorHunt

Websites wie Color Hunt bieten eine von der Community erstellte Sammlung von Farbpaletten. Sie können diese direkt auswählen und verwenden oder zunächst die Hauptfarben auswählen. Nicht so hübsch aussehend, aber auch ähnlich ist Color Lovers.

BrandColors

BrandColors verfolgt ein etwas anderes Ziel: Es enthält eine Liste der wichtigsten Marken und ihrer Farbschemata. Dort finden Sie einige großartige Farben und Kombinationen, die Ihren Körperbau inspirieren können. Farben unterliegen keinen Urheberrechten, aber wir empfehlen, ein wenig mit ihnen herumzuspielen, anstatt alle Farben von Orten wie Amazon zu kopieren.

Premium und Free Assets

Es ist nicht immer genug Zeit, um an jeder einzelnen Komponente der Site zu arbeiten. Manchmal ist es am besten, ein Icon Pack, eine Illustration oder ein Foto eines anderen Designers / Fotografen zu nehmen und dieses direkt zu verwenden.

• Font-Awesome - Eine riesige Sammlung von Symbolen in Form von Schriftzeichen
• Envato Elements - Riesige Auswahl an hochwertigen Assets zu einem guten Preis.
• Unsplash - Riesige Sammlung hochwertiger, kostenlos verwendbarer Fotos
• SVG-Generatoren wie Squircley, Getwaves, Blobmaker
• Adobe Fonts (kostenpflichtig) und Google Fonts (kostenlos)

Der beste Tipp hier ist, einige Websites wie diese oben zu finden und in der Nähe zu haben, damit Sie den Zeit- und Arbeitsaufwand für die Suche und Suche nach den besten Grafiken für den Job so weit wie möglich reduzieren.

Die wichtigsten Entwurfswerkzeuge

Mit den anfänglichen Arbeiten aus dem Weg geht es darum, das Design tatsächlich zu erstellen. Da alle fortschrittlichen Softwareprogramme für Designer über alle erforderlichen Tools zum Erstellen von Web- / App-Designs verfügen, werden wir Wireframing-Tools überspringen.

Figma

Unsere zentrale Wahl für die Designarbeit bei DevriX ist Figma. Es bietet großartige Funktionen für die Zusammenarbeit sowie browserbasierte Apps, auf die jeder im Team zugreifen kann, sei es Linux, Mac oder Windows. Früher haben wir Adobe XD verwendet, aber Linux-basierte Mitglieder konnten es nicht verwenden und Sketch ist nur auf dem Mac gesperrt.

Illustrator / Affinity Designer

Für mehr benutzerdefinierte Arbeit sind Illustrator oder Affinity Designer definitiv einige der Top-Optionen. In den letzten ein oder zwei Jahren waren benutzerdefinierte Illustrationen einer der angesagtesten Teile von Websites. Große, farbenfrohe Grafiken bestimmen die Oberhand und mehr Erfahrung mit den richtigen Werkzeugen ist auf jeden Fall eine gute Sache. An dieser Stelle können wir auch 3D-Software wie Blender zum Rendern von 3D-Modellen hinzufügen, die als Assets auf den Webseiten verwendet werden können.

Photoshop / Affinitätsfoto

Photoshop war die führende Software für Webdesign. Das mag heute seltsam klingen, zumal wir all diese großartigen Tools haben, die sich hauptsächlich auf das Web konzentrieren. Aber Photoshop ist immer noch ein großartiges Werkzeug und wir verwenden es oft, wenn es Fotos gibt, die bearbeitet oder ausgeschnitten werden müssen.

Präsentation

Aber es ist nicht nur die Entwurfsarbeit - ein statisches PNG. Einige Designer, die sich etwas mehr auf Bewegungsgrafiken und Interaktionen konzentrieren. Eine gute Demo, wie sich Elemente beim Hover, Swipe oder Click verhalten sollten, würde die Arbeit der Front-End-Entwickler erheblich unterstützen. Sowohl Figma als auch Adobe XD können dabei helfen, aber beide sind auch begrenzt.

Adobe After Effects

After Effects wird als eine der ersten Optionen für Bewegungsgrafiken angesehen. Es bietet alle notwendigen Werkzeuge, um alle Aktionen und Animationen darzustellen. Eine gute Sache, um Designer hier daran zu erinnern, ist, dass Animationen den Einschränkungen des Webs folgen sollten. Das Hinzufügen von Bewegungsunschärfe ist nicht möglich. Wenn Sie sich also mit fortgeschritteneren Animationen beschäftigen, besprechen Sie dies auf jeden Fall mit Ihrem Front-End-Entwicklerteam oder lesen Sie mehr über Animationen im Web und was möglich ist. Gleiches gilt für UX und A11y.

Lager

Figma und Adobe XD konzentrieren sich weitgehend auf die Cloud. Sie sollten sich also keine Sorgen machen, dass Sie Ihre Arbeit verlieren, aber nicht alles ist so - Photoshop, Illustrator-Dateien, heruntergeladene Schriftarten, Fotos usw. befinden sich auf Ihrem Computer.

Es ist am besten, sie zu sichern und jederzeit verfügbar zu haben, insbesondere wenn Sie an mehr als einer Maschine arbeiten. Und wenn es darum geht, sie zu teilen, ist es super einfach.

Dropbox

Die beste Wahl dafür wäre Dropbox. Mit seiner benutzerfreundlichen Desktop-App überwacht es Ihre Dateien und synchronisiert sie mit der Cloud, sobald Sie Änderungen vornehmen. Von dort aus können Sie sie mit einem Klick an den Kunden oder Ihr Team weitergeben.