Inhalt
- 01. Design Systems Repo
- 02. PixelSnap
- 03. Sketch.The.Ripper
- 04. Stackswell
- 05. Variable Schriftarten
- 06. Streifenabrechnung
- 07. CreativeGuild
- 08. Mobbin
- 09. HueSnap
- 10. Eierradienten
- Holen Sie sich Ihr Ticket für Generate New York
Das Thema unserer Zusammenfassung in diesem Monat ist Geschwindigkeit und Effizienz: einige davon Webdesign-Tools Sie werden erstaunliche Dinge für Ihren Workflow tun, indem Sie mühsame, frustrierende Aufgaben vermeiden, die nichts mit Design zu tun haben. Take Stackswell - es automatisiert alle lästigen Aspekte des reaktionsschnellen Designs in Sketch. Ein weiteres unserer Tools beschleunigt die Arbeit für Sie, indem es alle Assets aus einer .sketch-Datei extrahiert und organisiert.
Darüber hinaus gibt es ein cooles neues Abrechnungsprodukt von Stripe, ein großartiges Netzwerk-Tool für Kreative von Tina Roth Eisenberg und ein fantastisches Tool zum Messen von Dingen auf Ihrem Bildschirm in Pixel.
01. Design Systems Repo
Wenn Sie mit der Arbeit an einigen Zutaten für das Designsystem Ihrer Organisation beauftragt wurden oder vielleicht sogar das System selbst erstellen oder kodifizieren möchten, sollten Sie sich mit den neuesten Ressourcen zu diesem Thema vertraut machen.
Dafür ist Design Systems Repo dein Freund. Es handelt sich um eine Sammlung von Büchern, Artikeln, Vorträgen, Websites, Tools, Designsystemen, Musterbibliotheken und Styleguides, mit denen Sie verstehen, wie Top-Organisationen und führende Denker Dinge tun.
02. PixelSnap
PixelSnap ist eine sehr raffinierte App, mit der das Messen von Dingen auf Ihrem Bildschirm viel, viel weniger ärgerlich wird. Setzen Sie den Cursor zwischen zwei Elemente wie ein Bild und eine Überschrift, und es wird automatisch die Anzahl der Pixel zwischen ihnen angezeigt. Zeichnen Sie ein Rechteck um ein Element, und es schnappt um es herum und zeigt Ihnen seine Abmessungen an. Ja. Sie können Dinge so schnell messen.
Schauen Sie sich das Video auf der Homepage an, um sich ein Bild zu machen. Der Preis für die App beträgt 15 US-Dollar. Der einzige Nachteil ist, dass sie derzeit nur als Mac-App verfügbar ist. Aber wenn Sie ein Mac-Benutzer sind, ist das eine großartige Sache.
03. Sketch.The.Ripper
Das Exportieren und Vorbereiten von Assets aus Sketch zur Übergabe an ein anderes Team kann eine echte Belastung sein. Daher ist die Aussicht auf ein Tool, das dies mit einem Klick für Sie erledigt, ziemlich aufregend. Sketch.The.Ripper extrahiert und organisiert die Bildschirme, kopiert und rastert Bilder von allen Zeichenflächen in einer .sketch-Datei und präsentiert sie auf bequeme Weise. Hier sehen Sie ein Beispiel für die Ausgabe einer gerippten Datei.
Dieses Tool ist webbasiert und funktioniert daher auf jedem Betriebssystem. Dies kann zu Reibungsverlusten in Ihrem Workflow führen, wenn Benutzer unterschiedliche Systeme verwenden. Es wurde von Icons8 erstellt und Sie können hier mehr darüber lesen.
04. Stackswell
Stackswell beschleunigt Ihren reaktionsschnellen Entwurfsworkflow, indem Medienabfragen in Sketch integriert und der Prozess der Aktualisierung von Schriftstilen und Symbolen für jeden Haltepunkt automatisiert werden. Anstatt diese Arbeit manuell auszuführen, werden die Stile beim Anpassen der Breite einer Zeichenfläche automatisch aktualisiert.
Stackswell erspart Ihnen außerdem die Überprüfung Ihres vertikalen Abstands für jeden Haltepunkt, sodass Sie einen gleichmäßigen Abstand mit minimalem Aufwand erhalten. Sie können mehr darüber in diesem Artikel lesen.
05. Variable Schriftarten
Mit variablen Schriftarten können Sie viele verschiedene Schriftstärken und -breiten verwenden, ohne für jede eine separate Datei einfügen zu müssen: Sie fügen eine Datei hinzu und ändern die Schriftart dann mithilfe von CSS. Dies ist eine großartige Situation, da Sie die Typografie in Ihren Designs optimal einsetzen können, ohne das Seitengewicht erhöhen zu müssen.
Allerdings sind nicht alle variablen Schriftarten gleich. Einige sind flexibler als andere. Mit diesem Tool können Sie verschiedene Schriftarten finden und mit ihnen experimentieren, um festzustellen, ob sie Ihren Anforderungen entsprechen. Probieren Sie diese Demo aus, um weitere Informationen zu variablen Schriftarten zu erhalten und eine Vorstellung davon zu bekommen, was erreicht werden kann.
06. Streifenabrechnung
Das neue Abrechnungsprodukt von Stripe für Online-Unternehmen bietet Unternehmen eine dritte Möglichkeit, das Dilemma zu prüfen, ob sie ein Abrechnungssystem aufbauen oder kaufen möchten (mehr dazu in unserem Artikel über Online-Shop-Lösungen). Die Stripe Billing API lässt sich problemlos in eine vorhandene Site integrieren und ermöglicht es Ihnen, mithilfe von Bausteinen ein flexibles System zu erstellen, das auf Ihre Anforderungen zugeschnitten ist.
Wenn Ihr System eingerichtet ist, wird alles über ein Dashboard verwaltet, in dem Sie Abonnements, Rechnungen und Finanzberichte im Auge behalten können. Sie erhalten außerdem leistungsstarke Funktionen wie das globale Zahlungssystem von Stripe, das verschiedene Währungen und Kreditkarten verwaltet, sowie die flexiblen Abrechnungskomponenten, mit denen Sie mit der Preisgestaltung experimentieren können.
07. CreativeGuild
CreativeGuild ist ein Spin-off von CreativeMornings, einer kostenlosen monatlichen Vorlesungsreihe, die vor einem Jahrzehnt von Tina Roth Eisenberg in Brooklyn gegründet wurde. Das Konzept war ein Erfolg und es gibt jetzt CreativeMornings-Kapitel in über 185 Städten auf der ganzen Welt, jede mit ihrer eigenen lebendigen Community, die ihre Mitglieder fördert und inspiriert.
CreativeGuild soll einen Teil des Community-Aspekts online stellen, damit mehr Menschen darauf zugreifen können. Sie können sich vorstellen, dass es ein bisschen wie LinkedIn ist, aber für Kreative. Es gibt ein Verzeichnis mit kreativen Unternehmen, Einzelpersonen und Jobs. Sie können nach Standort suchen, um Möglichkeiten in Ihrer Stadt zu finden.
08. Mobbin
Mobbin ist eine Galerie mit Designs für mobile Apps, mit denen Sie Ideen für Ihre eigenen Projekte erhalten können. Anstatt viele Apps zu installieren, können Sie sie an einem Ort durchsuchen, um zu sehen, wie andere Designprobleme lösen. Für jede App werden sechs Bildschirme angezeigt, damit Sie sich ein Bild von der Benutzerreise und dem Entwurfsmuster für jede App machen können. Es gibt auch eine Seitenleiste, in der Joblisten angezeigt werden.
09. HueSnap
Sie wissen nie, wann die Inspiration einschlagen wird. Vielleicht fühlt sich die Einrichtung eines Hotels oder das Licht im Park wie das richtige Farbschema für Ihre Arbeit an. In diesem Fall können Sie ein Foto aufnehmen und mit HueSnap die Farben aus dem Bild extrahieren und in eine Palette umwandeln.
Die App ist auf die mobile Nutzung ausgerichtet und funktioniert daher am besten auf Ihrem Telefon. Sie können Ihre Paletten speichern und für andere freigeben. Es gibt verschiedene Funktionen, mit denen Sie eine Palette ändern können, z. B. Optionen zur Auswahl von Komplementär- und Mischfarben. Ihre Paletten können jeweils bis zu sechs Farben haben.
Weitere Informationen finden Sie in unserer Zusammenfassung der besten Farbwerkzeuge für Webdesigner.
10. Eierradienten
Wer diese Sammlung wunderschöner Farbverläufe zusammenstellt, hat ein großes Auge für Farbe und einen interessanten Sinn für Humor. Jeder Farbverlauf wird in einem eiförmigen Behälter angezeigt und mit einem Namen versehen, der sich in irgendeiner Weise auf die Farben bezieht oder nicht. Wenn es eine Beziehung gibt, konnten wir sie nicht entschlüsseln.
Beispielnamen sind "Erfolgreicher Einwanderer" für einen türkisfarbenen Farbverlauf, "Wozniaks gebrochenes Herz" für ein hellblaues und "Barmherziger Feind" für einen Übergang von gelb nach grün.
Holen Sie sich Ihr Ticket für Generate New York
Führendes Webdesign-Event Generieren Sie New York ist zurück. Zu den Hauptrednern, die vom 25. bis 27. April stattfinden, gehören Dan Mall von SuperFriendly, der Berater für Webanimationen Val Head, der Full-Stack-JavaScript-Entwickler Wes Bos und weitere. Es gibt auch einen Tag mit Workshops und Top-Networking-Möglichkeiten - verpassen Sie es nicht. Holen Sie sich jetzt Ihr Generate-Ticket.
