Top 4 Design-Frameworks in 2018

Der Kampf der Design-Frameworks ist mit jedem Jahr wettbewerbsfähiger geworden und ist jetzt in 2018 in vollem Gange. Man kann sagen, dass das gesamte Open-Source-Design-Frameworks-Ethos begann, als Twitter Mitte 2010 Bootstrap erstellte. Als nächstes kam Zurbs Stiftung auf die Bühne. Diese beiden bleiben weiterhin die beliebtesten Design-Frameworks auf dem Markt. Seitdem haben sie sich jedoch einem Schwergewichtsriesen in Form von Google und ihrem Materialdesign angeschlossen.

Es sollte beachtet werden, dass Giganten wie Microsoft und Apple zwar Richtlinien und Ressourcen veröffentlicht haben, um Designern bei der Erstellung von Benutzeroberflächendesigns zu helfen (Microsofts Fluent Design & Apples Human Interaction), sie jedoch keine offiziellen Frameworks in Form von HTML, CSS & Javascript-Komponenten anbieten. Damit, für den Umfang dieses Blogs, Wir werden sie nicht einschließen.

Das vierte Framework, das wir diskutieren werden, ist eine Open-Source-Community-getriebene Anstrengung, die in letzter Zeit unglaublich an Dynamik gewonnen hat, ist Bulma. Es ist eine ziemlich unglaubliche Geschichte, wie ein Scrappy-Projekt wie dieses zum Liebling der mobilen Responsive & Progressive Web Application Development Welt geworden ist.

1. Bootstrap

Bootstrap

Vielleicht das bekannteste Design-Framework der Welt, und das aus gutem Grund. Sie waren nicht nur die ersten in der Szene, sie haben die UI / UX-Designbranche für immer neu definiert. Twitter Bootstrap nahm eine immense Menge an Nacharbeit, die Designer & Entwickler wurden in jeder neuen Web-Anwendung zu tun. Container und Layouts neu erstellen zu müssen, dasselbe CSS erneut zu schreiben, wurde zur lästigen Pflicht, und mit mobilen Responsive Designs, die in den Vordergrund rückten, war Bootstrap ein Glücksfall. Entwickler konnten schnell Prototypen mit sauberen und glatt aussehenden Benutzeroberflächen und Gerüsten erstellen, die typische Seiten & -Layouts für sie direkt aus der Box generieren würden.

Seit seiner Gründung hat Bootstrap mit der Zeit Schritt gehalten und sich kontinuierlich weiterentwickelt (Bootstrap 4 ist der neueste Bleeding Edge Build), um nicht nur das Design frisch zu halten, sondern auch die neuesten Entwicklungstrends zu übernehmen, die verfügbar werden, wie es bei SaaS der Fall war, und jetzt mit seiner Unterstützung für Front-End-Frameworks wie React & Vue. Es besteht kein Zweifel, dass Bootstrap der unbestrittene König ist, wenn es um ein gründliches, gut gebautes, praxiserprobtes Design-Framework geht, das alles bietet.

2. Foundation

Zurb Foundation

Was als internes Projekt bei der Design & Entwicklungsagentur Zurb begann, wurde schließlich zum zweitgrößten Design-Framework im Web. Das Team bei Zurb stellte fest, dass sie HTML, CSS & Javascript-Komponenten häufig wiederverwenden mussten und sie immer wieder aus anderen Projekten abrufen mussten. Um diesen Engpass in ihrem Prozess zu lindern, beschlossen sie, ein internes Framework aufzubauen, das sie in ihren Projekten verwenden würden. Schließlich, im Jahr 2011, beschlossen sie, es zu öffnen, als sie sahen, dass sich das Web in Richtung mobiler Responsive Designs bewegte, in der Hoffnung, dieser Bewegung Schwung zu verleihen.

Seitdem haben sie kontinuierlich Updates veröffentlicht (Foundation 6 ist der neueste Build), um sicherzustellen, dass ihr Framework nicht veraltet ist — was in der Designwelt im Handumdrehen passieren kann. Sie verfügen auch über Open-Source-Projekte, die die Integration in Front-End-Frameworks wie Vue ermöglichen und React offiziell von ganzem Herzen unterstützen.

Müssen Sie ein Produkt entwerfen?

Unser Team von User-Experience-Designern kann einen Projektbrief in einen visuellen Prototyp verwandeln und bei jedem Schritt mit Ihnen zusammenarbeiten.

3. Material Design

Material Design

Sobald Design-Frameworks überall auftauchten und so populär wurden wie sie, war es nur eine Frage der Zeit, bis Google in den Ring sprang. Mit Material Design hat Google alle Grundlagen abgedeckt, vom Web über das Handy bis hin zu Smartwatches und Fernsehern. Ihr neuestes Front-End-Framework (Flutter) umfasst auch Material Design und wir sehen nicht, dass Google die Dinge so schnell ändert, da sie fantastisches Feedback von der Webanwendungsentwicklungs-Community darüber erhalten haben, wie einfach und sauber Material Design ist. Wir persönlich verwenden es auch hier bei Cygnis Media sehr gerne.

Wenn es um die Unterstützung von Front-End-Frameworks geht, ist Material Design möglicherweise das Beste. Sie unterstützen Angular, Vue & React und verfügen über eine Vielzahl von Komponenten und Bibliotheken von Drittanbietern, die im Web verfügbar sind.

4. Bulma

Bulma Design

Bulma ist das am wenigsten bekannte Design-Framework auf dieser Liste und im Vergleich zu den anderen relativ neu. Was Bulma wirklich attraktiv macht, ist das geringe Gewicht, das von der Open-Source-Community entwickelt und angenommen wird. Persönlich liebe ich auch das klare Aussehen und das praktische und dennoch ästhetisch ansprechende Design. Die Codebasis ist auch sehr gut geschrieben, mit einer niedrigen Eintrittsbarriere für neue Front-End-Entwickler, ohne entmutigende Syntax lernen zu müssen.

Bulma wurde von der Vue-Community von ganzem Herzen übernommen – beide sind Underdog-Frameworks, die ähnliche Ziele verfolgen und ihre größeren, etablierteren Pendants in den Vordergrund stellen — und haben ein fantastisches Open-Source-Projekt namens Buefy, das Vue-Integrationskomponenten & bereitstellt.

Müssen Sie eine Webanwendung erstellen?

Mit plattformübergreifender Kompatibilität bleiben Web-Apps das ultimative Medium für ein Produkt. Erzählen Sie uns von Ihrem Projekt für eine kostenlose Beratung.

Fazit

An dieser Stelle haben Sie wahrscheinlich die Big 3 Design Frameworks ausprobiert. Wenn Sie 2018 ein neues Design-Framework ausprobieren möchten, das schnell, leicht, aber auch praktisch und intelligent ist, probieren Sie Bulma aus — insbesondere, wenn Sie es mit Vue kombinieren.js. Es ist ideal für Gerüste, Admin-Panels und Dashboards. Viel Glück & viel Spaß beim Entwerfen!

Teilen:

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.