Elementy interfejsu użytkownika. Korzystanie z biblioteki elementów interfejsu użytkownika

Zasadniczo dla profesjonalistów nie ma nic prostszego niż ręczne naszkicowanie schematu strony internetowej. Proces staje się nieco bardziej skomplikowany, jeśli chodzi o projektowanie elementów interfejsu użytkownika (i ich szczegółów). Tutaj nie można obejść się bez wyobraźni, doświadczenia i inspiracji.

Jeśli nie wiesz od czego zacząć (albo masz już pomysł, ale chcesz zaoszczędzić czas korzystając z szablonów), mogą trafić do Ciebie usługi takie jak UI Patterns z wariantami klasycznych wdrożeń lub gotowe zestawy specjalne do pobrania. ratować. Te ostatnie dostarczane są z reguły w formacie PSD, więc każdemu, kto umie pracować w Photoshopie, nie będzie trudno przerobić je na swój sposób.

Zielony zestaw WebUI

Zestaw interfejsu Green WebUI Kit - zawiera prawie wszystkie potrzebne elementy - górne menu nawigacyjne, przyciski (OK, Anuluj, Kup teraz, Pobierz teraz), naklejkę promocyjną, formularz logowania, pusty suwak i elementy subskrypcji - RSS, e-mail i jeszcze.

Wszystkie elementy wykonane są z wysoką jakością, design jest nowoczesny. Każdy element ma swoją własną warstwę (plik PSD), dzięki czemu praca z nimi jest bardzo wygodna. W zasadzie z tego można szybko naszkicować projekt takiego bloga - suwak, są już subskrypcje. Jeśli miałbym porównać, to ten byłby bardziej odpowiedni dla Chińczyków.

Żółte elementy interfejsu użytkownika

Żółte elementy interfejsu użytkownika - zestaw zawiera 11 żółtych elementów interfejsu, w tym przyciski (Pobierz, Prześlij, Kup teraz, szukaj), sekcje (Polecane i data), paski przewijania i paski postępu. Wszystkie warstwy w pliku PSD są wygodnie pogrupowane, dzięki czemu można łatwo wprowadzać zmiany w tym lub innym elemencie interfejsu użytkownika. Kolor można równie łatwo zmienić na dowolny (oczywiście w zestawie Green WebUI).

Niestety Yellow UI Elements zawiera mniej elementów niż Green WebUI Kit, więc nie wykluczam, że będziesz musiał pożyczyć niektóre elementy z innych zestawów lub narysować samodzielnie.

Zestaw miękkiego interfejsu użytkownika

Ładny, lekki zestaw elementów interfejsu do tworzenia stron internetowych. Może być używany zarówno podczas tworzenia strony internetowej, jak i aplikacji internetowej. Wśród wszystkich źródeł PSD znajdują się najpopularniejsze elementy dla sieci - + wyszukiwanie, rozwijana lista, pola wyboru i pola radiowe, podpowiedzi tekstowe itp., są nawet gwiazdki za głosowanie. Dla kogoś, kto umie pracować w Photoshopie, nie będzie trudno dostosować ten plik PSD do swoich potrzeb. Ogólnie zestaw jest bardzo dobry pod względem ilościowym i jakościowym.

Przezroczysty szklany interfejs użytkownika

Jak widać z nazwy zestawu (Transparent Glass UI) i podglądu, jego cechą wyróżniającą jest przezroczystość elementów. To po pierwsze wygląda imponująco i dobrze wpasuje się w nowoczesny design, a po drugie będzie pasować do niemal każdego koloru tła. Zestaw PSD zawiera wszystkie typowe elementy interfejsu webowego - listy rozwijane, przyciski radiowe, przyciski, formularze, slidery i pola wejściowe.

Myślę, że z przedstawionych zestawów elementów UI do Photoshopa znajdziesz coś dla siebie. Szczególnie dobre są zestawy pierwszy i ostatni. Życzę udanych eksperymentów i pięknego interfejsu!

PS Jeśli potrzebujesz znaleźć elastyczny system dla sklepu internetowego - magento commerce może Cię mile zaskoczyć pod względem możliwości, funkcjonalności i rozszerzalności projektu.

W tej lekcji wyjaśnimy i pokażemy, w jaki sposób można korzystać z elementów interfejsu użytkownika z biblioteki zawartej w dostawie rozwiązania, a także jak korzystać z możliwości układu, wstawiać ikony, przyciski i elementy projektu na stronie.

Uwaga! Aby skutecznie pracować z kodem html, potrzebujesz przynajmniej minimalnej znajomości tagów i zasad nagrywania. Jeśli masz jakiekolwiek wątpliwości lub potrzebujesz poćwiczyć, możesz poeksperymentować z układem strony testowej. Zmiana kodu html może zrujnować układ pojedynczej strony, ale nie zepsuje całej witryny.

Elementy interfejsu użytkownika prezentowane na stronie demonstracyjnej to kod html, który możesz skopiować i wkleić w dowolnym miejscu na stronie witryny. Jako przykład dodajmy do witryny element „Koła zębate” i nagłówki o różnych rozmiarach.

Przejdź do żądanej strony witryny, na której chcesz umieścić elementy, aktywuj tryb edycji i otwórz stronę do edycji. Przełącz na wyświetlanie side-by-side, aby jednocześnie widzieć zarówno kod HTML, jak i wygląd treści.

Otwórz sekcję z biblioteką elementów UI na swojej stronie, przejdź do strony z pożądaną treścią, wejdź w tryb edycji, a także przełącz się w niej na tryb wyświetlania łączonego.

Skopiuj kod elementów, które Cię interesują i wklej na stronie swojej witryny.

W naszym przykładzie skopiowaliśmy kod nagłówka i kod elementu Gears. Możesz dokonać zmian w kodzie - na przykład usunąć tekst testowy pod nagłówkiem lub zmienić podpis pod kołami zębatymi.

Po zapisaniu zmian na stronie wyświetlają się wymagane elementy:

Czasy, w których projektanci wszelkich pasków afiszowali się przed sobą, chwytliwych, powiedziałbym nawet zbyt fantazyjnych projektów, wykorzystujących wszelkiego rodzaju graficzne dzwonki i gwizdki, minęły bezpowrotnie, przyszedł czas na nowe rozwiązania projektowe, które pozwalają użytkownikom skupić się na najważniejszych elementach projektu internetowego, a nie na jego kolorowym opakowaniu.

Użycie płaskich elementów interfejsu, niepostrzeżenie, ale na pewno, rozprzestrzeniło się wraz z wydaniem Windows 8 i jego raczej minimalistycznym stylem Metro. Płaska konstrukcja, z minimalistycznym podejściem, skupia się przede wszystkim na użyteczności na różnego rodzaju urządzeniach użytkownika, zarówno komputerach stacjonarnych, jak i smartfonach z dotykowym sterowaniem. Cechami charakterystycznymi płaskich projektów są ostre linie, dwuwymiarowe obiekty, żywe kolory, dobrze zdefiniowane linki i krój pisma bezszeryfowego. Aby nie odwracać uwagi użytkowników od ważnych elementów, nie ma żadnego ozdobnego blichtru.

Jeśli śledzisz nowe trendy w projektowaniu stron internetowych i stałeś się już zwolennikiem rozwiązań projektowych w stylu flat, oto 10 całkowicie darmowych zestawów elementów interfejsu użytkownika o płaskiej konstrukcji dla Twoich nowych projektów. Wszystkie zestawy zawierają szeroką gamę komponentów, które są idealne dla każdego projektanta stron internetowych: przyciski, elementy wejściowe, menu, pola wyboru i przyciski radiowe, tagi, menu, paski postępu i suwaki, a także elementy nawigacyjne i wiele innych.

Podkręć swój projekt w nowym, przyciągającym wzrok stylu dzięki tym niesamowitym zestawom interfejsu użytkownika.

1. Interfejs użytkownika piórkowego

Atrakcyjny zestaw darmowych elementów interfejsu od Sarah Hunt, jakościowo zaprojektowany na podstawie wektora i podzielony na warstwy, starannie spakowany do pliku, wszystkie warstwy są oznaczone intuicyjnymi nazwami. Tekst i kolory są łatwe do edycji. W projekcie wykorzystano czcionkę, z której możesz korzystać bezpłatnie.

Dzięki temu zestawowi elementów interfejsu użytkownika możesz poświęcić znacznie mniej czasu na pracę i skupić się na kreatywności. Zestaw jest całkowicie darmowy do użytku w projektach osobistych lub komercyjnych. Możesz pobrać zestaw i od razu zacząć.

2. Nowoczesny zestaw dotykowy UI

Podstawowa darmowa wersja świetnego zestawu elementów UI w formacie PSD, dzięki której można stworzyć funkcjonalną stronę internetową o nieskazitelnym designie.Zrównoważona typografia, ogólna waga i rozmieszczenie elementów, dopasowane dopełnienie, marginesy i paleta kolorów. Ogólny styl z wyraźnym naciskiem na treść. Pełna wersja HTML tego wspaniałego zestawu jest dostępna dla zarejestrowanych użytkowników z subskrypcją PixelKit.

3. Pionowa nieskończoność

4. Kwadratowy interfejs użytkownika za darmo

Kolejny świetny i zapakowany zestaw od Designmodo, prezentowane w domenie publicznej, z wyjątkiem formalnej subskrypcji wiadomości, aby otrzymać link do pobrania. Jestem pewien, że ta mała przeszkoda nie powstrzyma nikogo, jeśli potrzebujesz produktu wysokiej jakości. A zestaw jest naprawdę wysokiej jakości i zawiera wiele dobrze narysowanych komponentów internetowych do projektowania stron internetowych. Po pobraniu darmowej wersji i jeśli zestaw Ci się spodoba, możesz kupić rozszerzoną wersję premium zestawu, jeśli chcesz. Chociaż darmowa wersja ma wystarczająco dużo najbardziej przydatnych bułek projektowych, aby stworzyć pełnoprawną stronę internetową.

5. Płaskie komponenty interfejsu użytkownika

Lekki (407 Kb) zestaw komponentów interfejsu użytkownika wykonany w płaskim stylu z przewagą niebieskawych tonów w ogólnej palecie kolorów. Wszystkie elementy w tym zestawie są dostępne w jednym, dobrze zorganizowanym pliku PSD i można je łatwo edytować. Jak widać, nie ma zamieszania kolorystycznego, wszystko jest surowe i nastawione wyłącznie na łatwość percepcji treści.

6. Zestaw UI płytek metra

Darmowy, dość bogaty i pięknie wyrenderowany zestaw komponentów UI od PixelKit. Zestaw zawiera wiele elementów interfejsu użytkownika, ułożonych warstwowo i połączonych w pliku PSD, jego konstrukcja jest idealna do tworzenia projektów internetowych i aplikacji mobilnych. Na pierwszy rzut oka projekt komponentów, styl interfejsu graficznego Wihdows 8, precyzyjnie narysowane krawędzie elementów, miękkie niebiesko-niebieskie odcienie i znakomicie czytelna czcionka.

7. Zestaw UI z płaskim zaokrąglonym kwadratem

Na uwagę bez wątpienia zasługuje imponujący pakiet elementów interfejsu internetowego, który został udostępniony za darmo przez rzemieślników. Autorzy w swojej pracy nieco odeszli od linii stuprocentowej płaskiej konstrukcji, dodając odrobinę objętości poszczególnym elementom, stosując lekko zaokrąglone narożniki i lekki cień na dolnych krawędziach elementów. Ta decyzja projektowa jest uzasadniona w okresie przejściowym zmiany priorytetów w projektowaniu stron internetowych. Wszystkie elementy niezbędne do produktywnej pracy budowniczych w kompletnym zestawie. Pozostaje pobrać, rozpakować archiwum i zacząć tworzyć, jeśli nie wieczne, ale przynajmniej piękne i miłe)))

8. Pakiet interfejsu użytkownika o płaskiej konstrukcji

Prawdziwa waga ciężka (125MB!) Wśród podobnych zestawów PSD UI. Płaska konstrukcja elementów zestawu jest dopracowana w najdrobniejszych szczegółach, zachwyca i nastawia do kreatywnej pracy. Ten zestaw interfejsu użytkownika może być używany za darmo zarówno w projektach prywatnych, jak i komercyjnych, choćby dla radości i korzyści dla biznesu.

10. Bootflat 1.0.1

Na zakończenie recenzji proponuję do rozważenia rodzaj zbioru HTML, CSS, JS i komponentów do szybkiego tworzenia interfejsów stron internetowych - "Bootflat", zbudowany na znanej platformie Twitter Bootstrap 3. Intuicyjne narzędzie który zawiera lekkie wtyczki i komponenty, ale z bogatymi funkcjami Bootstrap. Wsparcie dla HTML5 i CSS3, świetna kolorystyka i stylizacja oparta na ulepszonym stylu Bootstrap 3. Bootflat jest w pełni responsywny, co oznacza, że ​​nie będzie problemów z wyświetlaniem elementów na ekranach wszystkich typów urządzeń użytkowników. Wszystkie komponenty platformy można łatwo rozbudowywać i edytować. Bootflat to projekt typu open source, więc możesz swobodnie korzystać ze wszystkich jego funkcji bez ograniczeń i tworzyć własny styl.

Flat design to szczególny trend, dla którego przyszłość jest i ważne jest, aby nie przegapić chwili, wskoczyć do pędzącego pociągu na czas, ponieważ każdy nowy trend ma swój własny cykl życia i nie może być nawet najpopularniejszy trend w projektowaniu grzebień fali na zawsze. W dzisiejszych czasach z wielu powodów warto wykorzystać ten ciekawy styl projektowania przy opracowywaniu nowych projektów, nie pędząc na szczyt w pogoni za modą, ale robiąc wszystko z wyczuciem, z wyczuciem i aranżacją. Można śmiało powiedzieć, że takie popularne strony internetowe będą intuicyjne, łatwe do naśladowania i będą wywierać pozytywne wrażenie i równie pozytywne opinie społeczności internetowej.

Interfejs użytkownika (w języku angielskim interfejs użytkownika, UI) w skrócie YI to środowisko interakcji między użytkownikiem a komputerem. Są to przyciski, menu, przyciski radiowe, pola wyboru i wiele więcej. Teraz nie jest jasne, wyjaśnię wszystkie zawiłe słowa poniżej. Jeśli dana osoba korzysta z telefonu komórkowego, interfejsem użytkownika jest aplikacja lub przeglądarka.

Podstawowe elementy interfejsu użytkownika

Teraz wyjaśnię słowa, które napisałem powyżej. Wszystko powinno się ułożyć. Nie bez powodu mówię o interfejsie użytkownika. Ta informacja jest potrzebna, abyś nie zapomniał narysować wszystkich tych elementów w układach. Jeśli projektant układu graficznego nie znajdzie tego w układzie, zrobi to tak, jak mu się wydaje.

Teksty (tytuły)

Kiedy dana osoba jest w sieci, pierwszą rzeczą, na którą się natknie, są teksty i nagłówki. Dlatego dla nas jako projektantów ważne jest, aby opracować wszystkie nagłówki naraz w jednym układzie. Nagłówki są zwykle nazywane H1, H2… Hn, ponieważ tak się nazywają w tagach HTML.
W tym przypadku pierwszy nagłówek to H1, potem H2 i tak dalej. Pierwszy to najtrafniejszy nagłówek. Na stronie docelowej może to być na pierwszym ekranie, niżej na ekranie opadającym. W układach musisz pokazać wszystkie nagłówki, aby projektant układu zrozumiał, gdzie umieścić dany znacznik.

Spinki do mankietów

Oto tekst, tytuł i podświetlony link. Linki mają 4 stany: normalny, po najechaniu (może zmienić kolor, podkreślenie lub coś innego, efekt), kliknięty i odwiedzony (kliknięty, a następnie wrócił do witryny, z której wyszedł).

guziki

Są one podobne do fizycznych przycisków, a przynajmniej zostały pomyślane jako przyciski magnetofonu. Dlatego mają stany: zawisanie i naciskanie. Wszystko to musi zostać wypracowane.

Przycisk radiowy i pola wyboru

Po lewej stronie znajduje się przycisk radiowy (po rosyjsku przycisk radiowy, ale nazwę go przyciskiem radiowym, ponieważ jest to zwyczajowe wśród projektantów), po prawej jest pole wyboru. W radio button można wybrać tylko 1 opcję, mamy szopa pracza. W check-boxie jest możliwość wielokrotnego wyboru, wybraliśmy fokę i szopa pracza.

Formularze

Formularze należy opracować w kilku formach jednocześnie. Formularz nieaktywny (u góry), aktywny (drugi od góry), formularz z błędem (trzeci od góry), formularz wypełniony pomyślnie (czwarty od góry). Czasami, w przypadku błędu w formularzu, lepiej zrobić wyskakujące okienko po prawej stronie, w którym można wyraźnie wskazać błąd. Na przykład, jeśli gość wpisał litery w formularzu do wpisywania numeru telefonu, wpisz „tylko cyfry można wpisać w tym polu” na liderze. Pomoże to ludziom w wypełnieniu formularza i zwiększeniu jego konwersji.

Wyskakujące okienko

Wyskakujące okienka lub wyskakujące okienka do autoryzacji (wejścia) na stronę muszą być zawsze narysowane. Nie na tym zdjęciu, ale ogólnie zwyczajowo robi się krzyż po prawej stronie, aby wyjść z formularza.

Paginacja

Paginacja to nawigacja strona po stronie, która pozwala szybko przełączać się między dużą liczbą produktów, arkuszy lub czegoś innego. Teraz taka forma paginacji, jak kanał informacyjny w VK, jest powszechna, gdy przewijasz do dołu i ładowanych jest więcej wiadomości. Możesz to również zrobić w sklepie internetowym. W takim przypadku nadal musisz podać przycisk „pokaż więcej produktów”. Jeśli jest ich już dużo i pokazuje jakiś preloader, czyli element, który pokazuje ładowanie strony.

Bułka tarta

Często można go znaleźć w sklepie internetowym. Na przykład sklep internetowy jest napisany po lewej stronie, męskie ubrania po prawej, sportowa odzież wierzchnia po prawej, a następnie kurtki. Pozwala przejść w górę, klikając żądany poziom. Bułka tarta nazywa się inaczej.

Wstępne ładowanie

Rzecz, która pokazuje, że coś się ładuje. Są bardzo różne. Możesz wygooglować „preloader GIF” i zobaczyć różnorodność i użyć tych, które lubisz. Istnieje specjalny generator wstępnego ładowania, w którym możesz wybrać, jak będzie wyglądać, jaki kolor, w jakim formacie go zapisać i tak dalej. Radzę użyć standardowych rzeczy, takich jak kółka i paski, do specjalnych projektów możesz użyć czegoś nietypowego lub możesz narysować się w Photoshopie i zrobić animację GIF. Nie przesadzaj, jest to z pewnością ważny element, ale i tak nie warto poświęcać mu dużo czasu.

Stoły

Często projektanci zapominają o narysowaniu stołu. Na przykład, jeśli robisz sklep internetowy z urządzeniami produkcyjnymi, to w opisie i na karcie produktu pojawiają się cechy porównawcze, wagi i coś innego. Wygodnie jest korzystać z tabel, gdy linie zmieniają kolor, co jest bardzo dobrze odbierane przez widza. W takim przypadku wyświetlana jest tabela z polami wyboru, nie jest to konieczne. Nie zapomnij o stołach.

Menu

Menu to nawigacja po całej witrynie. W tym przypadku pokazało, że po najechaniu jest wyskakujące menu. Trzeba to narysować. Zwróć uwagę, jak pokazałem wskazówki i interaktywność. Wystarczy pobrać kursor png i umieścić go na swoim miejscu. Jeśli masz duży układ, umieść dużo kursorów. Na przykład, aby pokazać, jak działa menu, jak wygląda przycisk i link po najechaniu myszą. W takim przypadku nie zapomnij o stanie normalnym. Dzięki temu w układzie statycznym można łatwo pokazać, jak elementy interfejsu użytkownika zachowują się w stanie interaktywnym.
Pamiętaj, że kursory są różne: dla komputera i dla maku.

„Kursor png” jest łatwo wyszukiwany w Google. Jeśli wyświetlasz witrynę na komputerze Mac (makieta z MacBookiem), to musisz użyć prawego kursora, jeśli na komputerze PC (na przykład makieta z eksploratorem Internetu), to lewego .

Oto podstawowe rzeczy dotyczące elementów interfejsu użytkownika. Informacje te mają na celu poznanie wszystkich terminów używanych w projektowaniu witryn. Aby nie zapomnieć o rysowaniu takich rzeczy, jak wyskakujące menu, interaktywność przycisków i tak dalej. Pozwól, aby Twoje witryny po układzie wyglądały tak, jak je renderowałeś. Amen

Żadna nowoczesna witryna nie jest pomijana. Istnieje jednak sposób, który pomoże znacznie zaoszczędzić czas w układzie i projektowaniu, w tym interfejs użytkownika strony internetowej - są one gotowe Biblioteki elementów interfejsu użytkownika... Dziś jest ich tak dużo, że udało nam się zebrać tylko darmowe zestawy w jednym dość dużym poście.

Jakie są zalety wykorzystania w projekcie gotowych elementów UI strony?

1. Cała żmudna praca polegająca na dopasowywaniu małych elementów została już za Ciebie wykonana.
2. Animacja kształtu, guziki oraz inne elementy zostały już wdrożone i skonfigurowane zgodnie z nowoczesnymi trendami w projektowaniu stron internetowych.
3. Każdy zestaw Interfejs HTML Komponenty z reguły nie są pierwszym wydaniem. Cały JS jest debugowany i działa stabilnie. Jednocześnie zidentyfikowano eksperymentalnie najbardziej użyteczne rozwiązania tego lub innego elementu z zestawu.

Gdzie można używać zestawów elementów interfejsu użytkownika HTML?

Przede wszystkim jest prototypy, ponieważ nie wymaga specjalnej unikatowości w projekcie. Podczas opracowywania prototypu biblioteki są używane z niewielkimi lub bez kosmetycznych zmian. Najważniejsze jest, aby pracować i odzwierciedlać istotę projektu.

Mimo że interfejs użytkownika ma przemyślaną konstrukcję, może być wykorzystana w prawie każdym projekcie. Wszystkie elementy są dostosowane do nowoczesnych trendów webdesignerskich i najprawdopodobniej zdarzy się, że przynajmniej jeden zestaw z tej kolekcji będzie dokładnie taki sam, jak Twój projekt.

Więc. Za twoją uwagę 20 bezpłatnych zestawów elementów interfejsu użytkownika HTML dla Twojej witryny. Nie zapomnij zasubskrybować społeczności. sieci.

Element

Nieźle Zestaw narzędzi HTML dla witryny... Zawiera prawie wszystkie elementy interfejsu użytkownika, w tym okna dialogowe, kształt, niestandardowe siatki do projektowania stron internetowych, powiadomień, menu i nie tylko. Wszystkie elementy i ich animacje są łatwo dostrzegalne i nie przeciążają strony. Na podstawie Vue.js 2.0

Bloki projektowe

170+ bloków HTML stworzyć prototyp jakości. Jest to rodzaj kreatora stron internetowych, z którego możesz stworzyć wszystko. Zestaw zawiera kompletny zestaw wszystkich elementów, połączonych w jeden styl.

Projektowanie materiałów dla Bootstrapa

Bezpłatnie dla frameworka css Bootstrap 3 w projekcie Projektowanie materiałów Google... Niestety nie ma tej samej dynamiki, co oryginalny Google Material Design w Angularze, ale stara się to naśladować.

Płaski interfejs użytkownika

Wystarczająca jakość Zestaw Ui w stylu płaskim który jest oparty na responsywny framework CSS Bootstrap 3... Ogromnym plusem jest dostępność źródeł PSD.

Czysty zestaw UI

Jeśli potrzebujesz siatek, formularzy, przycisków, tabel lub menu, ta struktura interfejsu użytkownika może być dla Ciebie. Jest bardzo lekki. Waga to tylko 3,8 KB.

Płaski interfejs użytkownika - HTML5 + CSS3

Minimalny zestaw nie wyróżniający się szczególną jakością Elementy UI w HTML5 + CSS3... Dodatkowo posiada oryginalny design.

CSS interfejsu Metro

Interfejsy metra stały się przeszłością, ale nawet dzisiaj ten styl przyciąga ogromną publiczność. Przyznaję, że jestem jednym z nich. Nawet dzisiaj są zadania, w których UI METRA mogą być potrzebne. Zwracam uwagę, dość duży i wysokiej jakości Framework UI na HTML w stylu METRO... Prawie wszystkie elementy w osobliwym projekcie są dostępne za darmo: są to kafelkowe ekrany, formularze, pola wyboru, przyciski radiowe, przyciski, menu, paginacja i ogromna ilość innych interesujących rzeczy. W sumie framework zawiera ponad 70 komponentów UI. To także dzieło ukraińskiego dewelopera.

Śmigło

Darmowy Material Design CSS Framework z Bootstrap... Zawiera około 25 komponentów, które, co dziwne, są dość podobne do oryginalnej dynamiki Material Design w Angular. Dostępna jest również wersja premium.

Projektowanie materiałów Lite

Jeden z najbardziej rozwiniętych Interfejs projektowania materiałów ramy włączone HTML... W jego arsenale jest ogromna liczba komponentów. To jest cały kombajn. Myślę, że jest to jedna z najlepszych implementacji Material Design w HTML.

Semantyczny interfejs użytkownika

Ładne, lekkie i zadbane framework do tworzenia interfejsu użytkownika i prototypowanie. Zawiera prawie wszystko, czego potrzebujesz. Na przykład przyciski, zakładki, typografia, przełączniki itp. Aktywnie przetłumaczone na język rosyjski. Został zbudowany od podstaw i nie ma nic wspólnego z Bootstrapem, w przeciwieństwie do większości odpowiedników w tym artykule.