Zum Inhalt wechseln
dr. web Logo mit Maus und Hand, die sich den Finger blutig geklickt hat.
  • Beste Agentur finden
    • 3D Animationsagentur
    • Designagentur
    • Digitalagentur
    • Drupal Agentur
    • Internetagentur
    • Joomla Agentur
    • Marketing Agentur
    • Online Marketing Agentur
    • PR Agentur
    • SEO Agentur
    • Shopware Agentur
    • Social Media Agentur
    • TYPO3 Agentur
    • Webagentur
    • Webdesign Agentur
    • Werbeagentur
    • WordPress Agentur
  • Magazin
    • Bloggen
    • Buchhaltung
    • Büro
    • Content Marketing
    • E-Commerce
    • Finanzen
    • Freelancer
    • Green Revoluzzer
    • Hardware
    • Künstliche Intelligenz (KI)
    • Marketing
    • Marktübersichten
    • Online-Marketing
    • Schrift & Grafik
    • Selbstständigkeit
    • Social Media
    • SEO
    • Software
    • UX Design
    • Webdesign
    • WordPress
  • Newsletter
  • Kontakt
Menü
  • Beste Agentur finden
    • 3D Animationsagentur
    • Designagentur
    • Digitalagentur
    • Drupal Agentur
    • Internetagentur
    • Joomla Agentur
    • Marketing Agentur
    • Online Marketing Agentur
    • PR Agentur
    • SEO Agentur
    • Shopware Agentur
    • Social Media Agentur
    • TYPO3 Agentur
    • Webagentur
    • Webdesign Agentur
    • Werbeagentur
    • WordPress Agentur
  • Magazin
    • Bloggen
    • Buchhaltung
    • Büro
    • Content Marketing
    • E-Commerce
    • Finanzen
    • Freelancer
    • Green Revoluzzer
    • Hardware
    • Künstliche Intelligenz (KI)
    • Marketing
    • Marktübersichten
    • Online-Marketing
    • Schrift & Grafik
    • Selbstständigkeit
    • Social Media
    • SEO
    • Software
    • UX Design
    • Webdesign
    • WordPress
  • Newsletter
  • Kontakt

< dr. web > » Webdesign » Shards: Modernes UI-Kit auf Basis von Bootstrap 4 als Open Source

Shards: Modernes UI-Kit auf Basis von Bootstrap 4 als Open Source

  • Aktualisiert am 6. Februar 2023
  • Dieter Petereit von Dieter Petereit
  • Webdesign
  • Ein Kommentar

UI-Kits gibt es viele, auch kostenlose. Shards von Designrevision ragt dennoch aus der Masse, weil es nicht nur kostenlos, sondern auch ausgesprochen ansehnlich und modern ist.

Catalin Vasile aka Designrevision

Shards ist das erste Produkt aus dem Hause Designrevision. Hinter dem Namen Designrevision verbirgt sich der „design-fokussierte Software-Entwickler“ (Selbstbeschreibung) Catalin Vasile. Catalin beabsichtigt wohl, mit Designrevision eine Marke zu schaffen, unter der er künftig hochwertige Design-Helfer vermarkten kann.

Das schließe ich unter anderem aus dem Aufbau der entsprechenden Website, auf der es immerhin den Punkt „Store“ gibt. Im Store findet sich allerdings aktuell nur ein einziges Produkt, nämlich Shards. Und Shards ist Open Source unter der liberalen MIT-Lizenz. So kannst du Shards sowohl für deine persönlichen, als auch für deine kommerziellen Zwecke, etwa in Kundenprojekten, verwenden. Nach eigenen Angaben arbeitet Catalin derzeit an einem kostenpflichtigen Add-on für Shards. Da hätten wir direkt schon ein Bezahlprodukt.

Shards und Bootstrap 4: So geht modernes Design

Shards basiert auf dem aktuellsten Bootstrap, nämlich der Version 4. Das UI-Kit integriert zudem die Symbolsätze der Material Icons und Font Awesome, was dir unkomplizierten Zugriff auf über 1.500 Piktogramme gibt. Icons werden als Klassen eingebunden und erfordern keine manuellen Eingriffe in den Quelltext ansonsten. So ist es möglich, Icons ohne weitere Anpassungen nahezu jedem Element beizufügen. Das erfolgt entweder mit einer klaren optischen Abgrenzung zum Text oder nahtlos direkt nebeneinander.

shards cards Shards: Modernes UI-Kit auf Basis von Bootstrap 4 als Open Source
Kartenbasierte Designs mit Shards. (Screenshot: Dr. Web)

In Sachen Typografie könnte Shards mehr tun. Immerhin ist der Einsatz des schlichten Google-Fonts Poppins in verschiedenen Schnitten für Überschriften schon mal ein erster Ansatz. Fallback ist stets auf den eingestellten System-Font. Bei der Farbgebung setzt Shards auf etwas leuchtendere Varianten als den Bootstrap-Standard. Sehr nah am Material Design sind auch die Inhaltskarten.

Es kam zu einen Fehler. Wahrscheinlich ist das unsere Schuld. Schreiben Sie uns gerne an hallo@drweb.de
✓ Sie haben sich erfolgreich zum Dr. Web Newsletter angemeldet

Dr. Web Newsletter

Tipps, Tricks, Tools und Ratgeber. Einmal im Monat frisch gedruckt in deinem Mail-Postfach.

Was Shards aber wirklich interessant macht, sind die interaktiven Elemente. Besonders die Gestaltung und Steuerung von Formularen und deren Feldern sieht ausgesprochen elegant aus. Das trifft ebenso für die Validierung zu. Auch das Design der Slider und Datums-Picker begeistert das Auge. So zieht sich die ausgesprochen gefällige Gestaltung durch alle Bereiche des UI-Kits, das zusätzlich Buttons, Badges, Fortschrittsbalken, Alerts, Tool-Tipps, Popovers und Modals umfasst.

shards form validation Shards: Modernes UI-Kit auf Basis von Bootstrap 4 als Open Source
Formularvalidation in schön. (Screenshot: Dr. Web)

Neben farblich passenden Navigationsleisten umfasst Shards zwei vollständige Landing Pages, sowie die fünf Megabyte große Sketch-Datei, die dem Design zugrundeliegt. Für den kostenfreien Download musst du Catalin eine gültige E-Mail-Adresse verraten, an die er dir die Downloadlinks senden kann. In der E-Mail findest du einen Link zum UI-Kit und einen weiteren zur Sketch-Datei. Den Haken zum Abonnieren des Newsletters kannst du, wenn du willst, auch weglassen. Ebensowenig ist die Nennung von Vor- und Zuname pflichtig.

Shards solltest du dir in jedem Falle sichern. Catalin hat übrigens angekündigt, eine React-Version seines Kits zu bringen. Hierzu gibt es allerdings noch keinen Zeitplan.

Die Demo von Shards findest du hier, die Dokumentation rufst du an dieser Stelle auf.

Dieter Petereit

Dieter Petereit

Dieter Petereit ist seit 1994 im Netz unterwegs, aber bereits seit über 30 Jahren in der IT daheim. Seit Anfang des neuen Jahrtausends schreibt er für Technik-affine Medien wie T3N und Dr. Web. Dieter war acht Jahre lang Chefredakteur des Dr. Web Magazins.

Inhaltsverzeichnis

Agenturpartner in München

Edit Content

WebOptimizer

Kunden kommen nicht von selbst – auch nicht im Internet. Wir arbeiten schnell und effektiv: Während andere noch reden, erobern wir für Sie schon neue Kunden.

— Dr. Heiner Etzler,
Inhaber
Alle Webdesign-Agenturen →

Lust auf mehr?

14 Best Practices, die Sie für einen erfolgreichen Internetseite Relaunch beachten sollten

Was bewegt einen Unternehmer dazu, seine Internetseite von Grund auf neu auszurichten? Nun, die Gründe für einen Internetseite Relaunch einer können sehr vielfältig sein. Oft spielt ein veraltetes Design eine Rolle. Dieser Grund ist nicht so trivial, wie er vielleicht erscheint. Denn ein unmodernes Aussehen der Webseite kann Besucher und damit potenzielle neue Kunden abstoßen.

KI GPT-4: werden Webdesigner und sonstige Erdlinge ihren HAL-Moment erleben?

Wo ist dieser verdammte Aus-Schalter?” Dies waren die letzten Worte von David Bowman, dem Anführer einer Widerstandsgruppe Webdesigner, denen es gelang zum vermeintlichen WDN-Zentralcomputer vorzudringen, bevor sie von Wächterdroiden eliminiert wurden.

Microsoft Designer to the people: KI Power Webdesign und Grafikdesign?

Ein Webdesign selbst erstellen? Ist bei mir schon ewig her. 2006 muss das gewesen sein. Ich durfte für eine Rechtsanwaltskanzlei ran. Typische Erstaufträge. Freundes- und Bekanntenkreis abgrasen eben. Der damalige Freund einer Freundin arbeitete dort und brachte mich ins Spiel.

Eine Antwort

  1. Sebastian sagt:
    5. Dezember 2017 um 13:10 Uhr

    Schöner Tipp! Danke! 🙂

    Antworten

Schreibe einen Kommentar Antworten abbrechen

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Fachmagazin für Online-Marketing. Seit 1997. Wissen, Software, Dienstleister: Wir bringen die Digitalisierung Ihres Unternehmens praxisnah voran. ✅

Für Unternehmer: Finden Sie Ihre Agentur in…

  • Alle Städte und Leistungen
  • Alle Städte
  • Augsburg
  • Basel
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Hamburg
  • Hannover
  • Heidelberg
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Osnabrück
  • Passau
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Stuttgart
  • Wien
  • Wiesbaden
  • Wuppertal
  • Zürich
  • Alle Städte und Leistungen
  • Alle Städte
  • Augsburg
  • Basel
  • Bayreuth
  • Bergisch-Gladbach
  • Berlin
  • Bern
  • Bielefeld
  • Bonn
  • Bremen
  • Chemnitz
  • Darmstadt
  • Dortmund
  • Dresden
  • Duisburg
  • Düsseldorf
  • Essen
  • Esslingen
  • Flensburg
  • Frankfurt
  • Freiburg
  • Gelsenkirchen
  • Hamburg
  • Hannover
  • Heidelberg
  • Innsbruck
  • Karlsruhe
  • Kassel
  • Köln
  • Leipzig
  • Leverkusen
  • Mainz
  • Mannheim
  • München
  • Münster
  • Nürnberg
  • Offenburg
  • Osnabrück
  • Passau
  • Potsdam
  • Regensburg
  • Reutlingen
  • Rosenheim
  • Rostock
  • Salzburg
  • Stuttgart
  • Wien
  • Wiesbaden
  • Wuppertal
  • Zürich

Agentur nach Schwerpunkt finden

  • Beste Agentur finden
  • Designagentur finden
  • Digitalagentur finden
  • Drupal-Agentur finden
  • Online Marketing Agentur finden
  • SEO Agentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
  • WordPress Agentur finden
  • Beste Agentur finden
  • Designagentur finden
  • Digitalagentur finden
  • Drupal-Agentur finden
  • Online Marketing Agentur finden
  • SEO Agentur finden
  • Webdesign-Agentur finden
  • Werbeagentur finden
  • WordPress Agentur finden

Aus unserem Magazin

  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social Media
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • Webdesign
  • WordPress
  • Buchhaltung
  • Content Marketing
  • Design
  • Digitalisierung
  • E-Business
  • E-Commerce
  • E-Mail-Marketing
  • Finanzen
  • Freelancer
  • Hosting
  • HTML/CSS
  • Inspiration
  • IT Sicherheit
  • Jobs & Karriere
  • Online-Marketing
  • Programmierung
  • Public Relations
  • Rechtliches
  • Responsive Design
  • SEA – Suchmaschinenwerbung
  • SEO
  • Showcases
  • Social Media
  • Tipps, Tricks & Tutorials
  • Tools
  • UX Design
  • Webdesign
  • WordPress
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Kunden-Login
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen
  • Datenschutzerklärung
  • Geschäftsbedingungen (AGB)
  • Kunden-Login
  • Impressum
  • Kontakt
  • Privatsphäre-Einstellungen ändern
  • Historie der Privatsphäre-Einstellungen
  • Einwilligungen widerrufen