15 darmowych ram projektowania materiałów dla programistów 2021

Material Design firmy Google wykroczył daleko poza to, co wielu projektantów przewidywało na początku, i jest obecnie powszechnie używanym standardem projektowania do tworzenia witryn mobilnych, aplikacji na Androida, a także oprogramowania komputerowego. Google posunął się nawet do wdrożenia natywnej aplikacji do projektowania materiałów we własnym narzędziu do tworzenia witryn; taki, który niedawno wyglądał dość brzydko i powolnie, ale teraz jest w stanie tworzyć niesamowicie piękne strony internetowe.

Nie powinieneś ślepo podążać za wskazówkami, ponieważ ktoś mówi, że to właściwa rzecz. Twój własny osąd jako projektanta jest najlepszym atutem do tworzenia prawdziwych i wyjątkowych projektów, które się wyróżniają. Weź z projektowania materiałów to, co czujesz, że już będzie komplementować twoje ideologie, a następnie stwórz na tej podstawie nagromadzenie. Możesz skorzystać z własnych osobistych wyborów, aby jeszcze bardziej udoskonalić projekt. Google z pewnością ma talent do omawiania i badania światowej klasy elementów User Experience i User Interface, ale kiedy o tym pomyślisz — Twój projekt jest wyjątkowy, dane demograficzne i typy odbiorców są wyjątkowe, a czasami musisz wykonać te kroki, aby stwórz projekt, który wydobywa najlepsze wartości Twojej firmy lub projektu, który budujesz.

Struktury, o których dowiesz się więcej, są idealnymi rozwiązaniami do wypróbowania Material Design. Być może najlepszym sposobem na to byłoby stworzenie projektu pobocznego, który mógłbyś zhakować w weekendy, w ten sposób nie zakłócając głównego przepływu pracy, a następnie, jeśli czujesz, że jest tam jakiś związek, zacznij tworzyć mapy drogowe tego, jak w przyszłości możesz wdrożyć Material Design w swoich aplikacjach/witrynach internetowych. Jeśli przegapiliśmy jakiekolwiek ważne/przydatne frameworki do tego podsumowania, daj nam wzmiankę w komentarzach, a my się tym zajmiemy.

Zmaterializować

Materialise to w pełni rozwinięta front-endowa platforma do tworzenia stron internetowych oparta na specyfikacji Material Design. Jest to jedna z wiodących platform do projektowania materiałów, ponieważ zapewnia szybki, skoncentrowany i łatwy w nawigacji rdzeń do szybkiego prototypowania nowoczesnych stron internetowych. Rama wykorzystuje to, co ma do zaoferowania materiał, i zgrabnie łączy to w jedną ramę, która sprawia, że ​​wszystkie elementy są dostępne szybko i bez zamieszania. Komponenty oparte na informacjach zwrotnych znacznie poprawią wrażenia użytkownika, ponieważ użytkownicy będą mogli lepiej zrozumieć znaczenie poszczególnych elementów projektu.

A ponieważ jest to framework, możesz spodziewać się niektórych funkcji CSS, takich jak siatki, i to jest właśnie w tym przypadku, Materialise zapewnia kolory, siatki, pomoce, zarządzanie mediami, pliki sass, zarządzanie tabelami, optymalizację typografii i optymalizacje cieni elementów, dzięki czemu można szybko stworzyć szkielet tego, co chcesz zbudować, a następnie użyć zoptymalizowanych komponentów MD, aby ożywić swój projekt.

Materiał szybki

Czy jesteś aktywnym programistą Swift, ale nie wiesz, jak zaimplementować Material Design w swoich aplikacjach Swift? Materiał od CosmicMind załatwia to wszystko bez wysiłku. Dzięki tej strukturze/bibliotece Swift Material możesz korzystać z komponentów MD i mieć do nich pełny dostęp do konfiguracji, dostępne są układy siatki, które zwykle są wymagane przez złożone interfejsy aplikacji mobilnych, otrzymujesz standardowe warstwy i widoki, które można wykorzystać do stworzenia unikalnego interfejsu użytkownika składniki. Inne funkcje obejmują możliwość sterowania nawigacjami, ikony projektowania materiałów, przyciski, karty, przełączniki oraz system menu do budowania animowanych menu nawigacyjnych. Swift Material w rzeczywistości nazywa się frameworkiem animacji, poza tym, że jest tradycyjnym frameworkiem aplikacji mobilnych, i świetnie sobie radzi, umożliwiając programistom tworzenie układów, które zależą od płynnych animacji, aby wzbogacić wrażenia użytkownika.

Ramy materiałowe

Material Framework sprawia, że ​​bardzo łatwo jest podłączyć Material Design do istniejącego projektu. Jest to w pełni responsywny framework oparty na czystym CSS. Wszystko, co naprawdę musisz zrobić, to dołączyć pliki arkuszy stylów CSS do głównego folderu stylów witryny i gotowe. Ta struktura oferuje wybór ciemnego i jasnego schematu kolorów, który można zastosować za pomocą określonej klasy CSS lub użyć JavaScript do ustawienia motywu, którego chcesz użyć.

Można użyć różnych efektów animacji, takich jak dodanie fali do istniejących formularzy, aby stworzyć bardziej znaczące wrażenia użytkownika. Układy typograficzne można dostosować do własnych upodobań, a także dostosować wygląd treści do innych elementów projektu. Możesz zmienić istniejące style, aby używać specyfikacji projektu dla przycisków, wejść, pasków narzędzi, ikon, list, menu, projektów kart i rzeczy takich jak przełączniki. Jego uruchomienie nie jest trudne i może być dobrym sposobem sprawdzenia, czy Twoi użytkownicy w ogóle docenią Material Design.

Istota

Essence łączy w sobie dwie rzeczy: Material Design i React.js — jeśli poszukujesz szybkiego działania sieci z optymalną specyfikacją projektu, trudno będzie dopasować to, co Essence oferuje wszystkim programistom. Wszystkie komponenty interfejsu użytkownika, które ma do zaoferowania Material Design, są przebudowywane za pomocą React.js, jeśli zdecydujesz się na Essence! Ostatecznym rezultatem jest oszałamiający wybór elementów interfejsu użytkownika, który stworzy unikalne wrażenia użytkownika. Essence jest łatwo dostępny w NPM, dzięki czemu można zainstalować i rozpocząć za pomocą prostego polecenia instalacji. Komponenty będą musiały być instalowane i używane osobno, ale niezależnie od tego wszystko trafia do tego samego folderu.

Interfejs Onsen

Onsen UI ma wiele mil reputacji jednego z najlepszych hybrydowych frameworków do tworzenia aplikacji mobilnych przy użyciu HTML5. Ta platforma typu open source jest całkowicie darmowa i zawsze była. Współczesne rozumienie dobrego projektowania pomogło programistom Onsen UI w tworzeniu elementów interfejsu użytkownika, które ostatecznie tworzą niezrównane wrażenia użytkownika. Jako niezależny framework, możesz używać Onsen z dosłownie każdym innym frameworkiem i nie martwić się o kolizje kodu lub jakiekolwiek problemy. To samo dzieje się w nowym interfejsie Onsen UI V2 — są to zintegrowane komponenty Material Design, Angular 2 i React, które dodatkowo wzbogacają wrażenia. W tej chwili wciąż kandydat do wydania, ale jest już używany przez tysiące. Jeśli zamierzasz uruchomić produkt mobilny lub zająć się tworzeniem oprogramowania mobilnego, nauka korzystania z interfejsu Onsen UI może wnieść dodatkową korzyść do Twojego CV.

Materiał CSS

Material CSS to lekka alternatywa, która używa atrybutów do definiowania stylów zamiast używania klas. To sprawia, że ​​przepływ pracy programistycznej jest łatwiejszy i na pewno znacznie prostszy. Ze względu na minimalny charakter będziesz dosłownie bawić się głównie samymi komponentami, takimi jak kolory, typografia, cienie, zmarszczki, ikony, dane wejściowe, formularze, przyciski, media, karty, panele, paski narzędzi, listy, strony, i pomocnicy. Material CSS dokładnie wyjaśnia każdy konkretny komponent w dokumentacji, w jaki sposób możesz go użyć.

Projektowanie materiałów Lite

Material Design Lite to kolejne lekkie rozwiązanie do optymalizacji projektów za pomocą specyfikacji materiałowej. Łatwo działa na stronach internetowych, które opierają się na treści statycznej, ale nie będzie problemu z implementacją w witrynach dynamicznych. Jest to niezależna biblioteka CSS, która do działania nie wymaga żadnych zewnętrznych zasobów. Z wbudowaną optymalizacją dla wielu urządzeń, w naturalny sposób obniży się, jeśli starsza wersja przeglądarki spróbuje uzyskać dostęp do witryny. Możesz wybierać między szablonami, takimi jak szablon blogowania, aby rozpocząć bloga, lub skorzystać z wersji Lite motywu używanej przez oficjalną stronę Androida, istnieją również szablony pulpitów nawigacyjnych do wdrożenia za Twoją witryną, nowoczesne portfolio, aby pokazać swoje najlepsze prace, i zoptymalizowane pod kątem tekstu szablony stron z treścią. Wszystkie inne rzeczy, takie jak komponenty i style, są tym, czego można się już spodziewać po frameworku, który używa Material Design.

Powierzchnia

Wygląda na to, że wielu programistów ćwiczy swoje umiejętności samodzielnego tworzenia frameworka, Surface to kolejna lekka (w tym przypadku naprawdę lekka) platforma, która po zminimalizowaniu ma około 6 KB. Jest również oparty na czystym CSS, więc nie będziesz musiał w ogóle korzystać z JavaScript. Zacznij od przejścia do dokumentacji Surface i poznania sposobu działania siatki Surface, aby łatwiej było uzyskać wszystkie komponenty na płycie. Komponenty takie jak animacje, alerty, kafelki, elementy zwijane, stopki, modalne, media, narzędzia i podpowiedzi. Deweloperzy zadbali o to, aby wszystko było ładnie zorganizowane i łatwiejsze do skonfigurowania niż liczenie do 1 od 100 wstecz.

Materiał-UI

Material-UI oferuje wybór komponentów React.js, które zostały już dostosowane ze specyfikacji Material Design. Jest jedna najważniejsza rzecz dotycząca Material-UI i pomysłu na jego użycie. Powinieneś najpierw dowiedzieć się trochę więcej o React.js i ogólnie o tym, jak współdziała z internetem i urządzeniami mobilnymi. Ponieważ komponenty są oparte na React, dobrze byłoby zrozumieć, jak React jest postrzegany w tworzeniu stron internetowych i jaką rolę w nim odgrywa. Zespół Material-UI był na tyle uprzejmy, aby zapewnić wybór szablonów, ciemnych i jasnych, i oba stanowią przykład tego, jak różne komponenty i elementy pasują do siatki.

Niektóre wcześniej niewidoczne komponenty obejmują paski aplikacji, autouzupełnianie formularzy, awatary, odznaki, chipy, selektor dat, okna dialogowe, dzielniki, szuflady menu, listy siatek, pola tekstowe, selektory czasu i różne odmiany pasków narzędzi; a to tylko kilka komponentów, które są łatwo dostępne w tym frameworku.

MUI

MUI to bogata, lekka struktura CSS, która dodaje pikanterii Twoim projektom dzięki materiałowemu projektowi Google. Udostępnia swoim użytkownikom różne typy układów demonstracyjnych: blog, strona docelowa, menu suwaka i pole subskrypcji newslettera w formacie HTML. Z samych tych demonstracji programiści mogą dowiedzieć się, jak wydajne jest projektowanie materiałów i jak łatwo je wdrożyć. MUI współpracuje również z frameworkami React.js i Angular.js, dzięki czemu możesz bez problemu podłączyć swoje aplikacje do materiału. Istnieją również różne indywidualne komponenty sieciowe, wszystkie gotowe do użycia.

Materiał kątowy

Angular Material to oficjalne wydanie interfejsu Material UI dla projektów Angular 2. Masz dokładną i zwięzłą stronę z dokumentacją. Może pokazać, jak pięknie mogą wyglądać Twoje aplikacje, gdy są wyposażone w interfejs użytkownika Material. Wszystkie komponenty są dostarczane z głębokimi przykładami i dodatkowymi opcjami. Dzięki temu możesz w pełni wykorzystać to, co ten framework ma do zaoferowania. Dokumentacja API jest dostarczana dla doświadczonych programistów, którzy chcą przenieść materiał na wyższy poziom.

Projektowanie materiałów dla Bootstrapa

Bootstrap jest bez wątpienia faworytem wielu światowych deweloperów front-end. Bootstrap wspiera dziś miliony stron internetowych, a kolejne miliony dopiero nadejdą. Material Design for Bootstrap to wydajny motyw Bootstrap, który wykorzystuje projektowanie materiałów do tworzenia spektakularnych doświadczeń projektowych. Możesz wybierać spośród wszystkich swoich istniejących, najbardziej ulubionych elementów Bootstrap. Możesz także zoptymalizować je za pomocą interfejsu użytkownika projektowania materiałów, jak wspaniałe jest to? Może to wymagać trochę majsterkowania, aby to działało dla tych, którzy wcześniej nie używali NPM. Dokumentacja wydaje się dość dobrze wyjaśniać proces uruchamiania.

LumX

LumX to pierwszy responsywny framework front-endowy oparty na specyfikacjach AngularJS i Google Material Design. Zapewnia pełną strukturę CSS zbudowaną z Sass i kilka komponentów AngularJS. Aby korzystać z LumX, musisz wiedzieć, jak używać Bowera do instalowania bibliotek. Jeśli nie znasz Bowera, inną alternatywą jest pobranie wszystkich zależności osobno. Należą do nich ikony Angular, jQuery, Velocity, Moment, Bourbon i Material. LumX wykorzystuje również Flexbox do tworzenia standardowych i responsywnych systemów gridowych przy użyciu właściwości Flexbox. Komponenty LumX obejmują dowolny obszar i część tradycyjnego projektu układu witryny.

Materiał jonowy

Ionic to najlepszy hybrydowy framework do tworzenia aplikacji mobilnych HTML5. A teraz cała ta niezwykła moc jest możliwa do wykorzystania w Twoich aplikacjach dzięki infuzji Material Design! Ionic daje Ci już zbudowane układy dla Twojej aplikacji, w tym kanały aktywności i kategorie. Może również pomóc w tworzeniu list funkcji, galerii, list ogólnych, stron logowania i stron profilowych. Możesz szybko załadować wersję demonstracyjną ogólnego interfejsu aplikacji, a następnie zbudować na niej swoje oprogramowanie. Materiał jonowy jest płynnie tematyczny. Ionic Material to przede wszystkim biblioteka zachowań i używa konwencji nazewnictwa kolorów i klas elementów Ionic. Szczegółowa, co do piksela specyfikacji, Ionic Material ma na celu przestrzeganie wytycznych Google dotyczących ruchu, atramentu i głębi. Wraz z dodawaniem do biblioteki nowych komponentów i układów, masz zapewnioną wysoką uwagę na specyfikacje projektowania materiałów.

fonon

Phonon Framework zapewnia zwięzłe rozwiązanie do tworzenia aplikacji mobilnych HTML5 przy użyciu technologii hybrydowego frameworka. Mocną stroną Phono jest jego dobra intuicja do szybkiego skalowania aplikacji tam, gdzie chcesz. Jest to również biblioteka interfejsów użytkownika, która zapewnia szybkie narzędzia do tworzenia interfejsów w locie. Phonon osiąga rozmiar około 24kb po pełnej minimalizacji i optymalizacji. Jest to jeden z głównych powodów, dla których programiści mobilni używają Phonon. To jest znacznie poniżej tego, co można zobaczyć we frameworkach takich jak Ionic lub Onsen!