Accentsconagua
Share
GitHub ist ein großartiger Ort, um Projekte zu finden, die frei an die Öffentlichkeit verteilt werden. Aber haben Sie jemals ein Repo in der Hauptrolle gespielt, nur um zu vergessen, wie cool und nützlich es sein könnte? In dieser Zusammenfassung werde ich einige fantastische Projekte ans Licht bringen, die auf GItHub frei verfügbar sind und einen starken Fokus darauf legen, Interface-Designern dabei zu helfen, für das Web zu bauen.
Bytegröße-Symbole sind winzige, stilgesteuerte SVG-Symbolsätze. Eine Ressource wie diese kann sehr hilfreich sein, wenn Sie nicht über einen bestimmten Satz von Icons verfügen, der den Anforderungen Ihres Kontexts entspricht.
„Jedes Symbol ist in einem 32x32-Raster handcodiert und verwendet den SVG-Strich, um maximale Stilflexibilität zu ermöglichen. Das bedeutet, dass Sie das Gewicht, die Farbe und die Größe anpassen können und ob die Kanten rund oder quadratisch sein sollen. “
Alle 92 Icons wiegen bei 10,5 kb oder 2,9 kb .svgz. Legen Sie jedes Symbol entweder direkt in Ihre Seite ein oder laden Sie es über eine externe SVG-Datei und die benutzen Etikett. Sie können dann leicht die Gewichtung des Symbols ändern, indem Sie das Symbol ändern Strichbreite Attribut sowie das Ändern der Form der Linienkappen und der Linienverbindungen mit Strichlinienkappe und Schlagzeilenverbindung. Dadurch wird der Stil der Symbole geändert, indem sie abgerundet oder quadratisch dargestellt werden. Alle diese Stroke-Eigenschaften stehen auch in CSS zur Verfügung, falls Sie dies wünschen.
Shade ist ein mathematisch abgeleiteter Verlaufs-Explorer, mit dem Sie die gewünschten Ergebnisse mit den Schiebereglern steuern können.
Sie können Farbton, Sättigung und Helligkeit zusammen mit den entsprechenden Optionen für die Farbverlaufsverteilung einstellen. Der einzige Nachteil, den ich derzeit sehe, ist nicht die Möglichkeit, den Gradientenwinkel zu steuern, aber die Ausgabe in visueller Hinsicht zusammen mit dem richtigen CSS zu erhalten, ist wirklich großartig. Ein würdiges Werkzeug für alle, die in ihrer Designarbeit immer mehr Farbverläufe verwenden.
Materialise ist ein Frontend-Framework, das auf dem Material Design von Google basiert. Es behauptet, benutzerorientiert und benutzerfreundlich zu sein und die Entwicklung beim Entwerfen und Bestimmen von Schnittstellenkomponenten zu beschleunigen.
Wählen Sie aus einer Vielzahl von Komponenten, JavaScript-gesteuerten Widgets und vielem mehr. Diejenigen, die Sass verwenden, werden sich freuen zu hören, dass Sie das Farbschema Ihrer Elemente mit einer einfach zu verwendenden und zu lesenden Variablendatei extrem schnell ändern können.
Muster im Web können auf verschiedene Weise angewendet werden, entweder mit Bildmaterial oder mit CSS. Mit SVG können jedoch auch Mustereffekte erzielt werden, die bei jeder Bildschirmauflösung scharf bleiben und die Dateigröße kompakt halten.
Diese Muster können auf drei Arten verwendet werden, indem SVG-Muster defs, CSS-Hintergrundbild-URLs und Musterfüllungen über D3.js verwendet werden. Die Farben können für jedes Muster anpassbar sein, und Sie können sogar neue Muster zur Aufnahme in das Repo einreichen. Dies kann sehr praktisch für jedes Muster sein, das Sie für Ihr Schnittstellendesign benötigen, das wiederholt werden soll, während die Schärfe erhalten bleibt und die Dateigröße unter Kontrolle bleibt.
Hier ist ein wirklich praktisches Projekt für diejenigen, die mit Schnittstellen arbeiten. Benutzer können damit Produkte oder Lieblingsartikel bewerten.
Jede Bewertungsoption ist für jedermann zugänglich, einschließlich der Tastatursteuerung, und verfügt über ein wenig animierte Animationen. Derzeit stehen im Projekt acht verschiedene Bewertungsoptionen zur Auswahl. Natürlich können Sie auch immer eine neue Idee / ein neues Muster einreichen die aktuell zur Verfügung gestellten Muster.
Wenn Sie sich mit Sass auskennen, können Sie das Bewertungs-Widget an Ihre Bedürfnisse anpassen, z. B. ein 10-Sterne-System oder das Deaktivieren der Gliederung und des Hover. Dazu können Sie den Variablen in der Datei _variables.scss die Werte true / false zuweisen und die Gulp-Task ausführen, um die Dateien zu verarbeiten.
Das Sammeln von realem Inhalt für Designs wird immer wichtiger, um zu verstehen, wie Benutzer mit Ihren Komponenten interagieren.
Listen ist eine Galerie mit aktuellem Inhalt, der bereit ist, Ihre Modelle zu füllen. Exportieren Sie Listen in JSON-Dateien und importieren Sie sie in eine Google-Tabelle, kopieren Sie Inhalte in Ihre Zwischenablage und wählen Sie aus 16 Kategorien aus, die von der Unterhaltung bis zur Bildung reichen. Mithilfe von Listen können Sie mit echten Inhalten entwerfen, um intelligentere Entscheidungen zu treffen und schneller zu arbeiten.
Dies ist ein Sketch-Plugin, um das Bild in Ihrer Zwischenablage als Füllung für eine beliebige Form einzufügen!
Es ist äußerst praktisch, wenn Sie Comps erstellen und keine Zeit damit verschwenden möchten, Bilder zu finden und in Ihr Projekt zu importieren. vor allem, wenn Sie Bilder in verschiedenen Formen platzieren möchten. Super schnell, super einfach und super fantastisch, um den Workflow zu beschleunigen.
Sketch-Material ist ein Sketch-Plugin, mit dessen Hilfe Sie komplexe Materialkomponenten wie Tabellen, Chips, Formulare, Schaltflächen, QuickInfos usw. erstellen können.
Wenn Sie Modelle erstellen, kann dies die Effizienz und Geschwindigkeit Ihres Workflows erheblich verbessern. Einer meiner Lieblingsteile ist der Höhenaspekt, durch den Sie schnell auf die köstlichen Schlagschatten von Material Design zugreifen können. Sketch Material konzentriert sich auf die harte Arbeit, sodass Sie sich auf die wichtigen Dinge wie Design, Design und Design konzentrieren können.
Zum Drucken von Geräteskizzenblättern bereit. Alle Dateien enthalten eine leere und gepunktete Rastervorlage im .png- und .pdf-Format und enthalten eine Vielzahl von Geräten.
Diese Blätter können nicht nur gedruckt werden, sondern können auch in Ihrer digitalen Software zur Erstellung schneller Modelle verwendet werden. Da das Projekt frei verfügbar ist und auf GitHub gehostet wird, können Sie immer vorschlagen, ein neues Gerät aufzunehmen, falls Sie das benötigte nicht finden.
Ich habe die Oberfläche nur mit den hier erwähnten Projekten überflogen und würde gerne von anderen hören, die Sie in Ihrer täglichen Arbeit bezüglich des UI-Designs als nützlich erachten. Hinterlassen Sie unten Ihre Kommentare und Vorschläge und die Kodierung!
