UI öğeleri. UI öğesi kitaplığını kullanma

Temel olarak, profesyoneller için, bir web sitesinin şematik düzenini elle çizmekten daha kolay bir şey yoktur. UI öğelerinin (ve ayrıntılarının) tasarımına gelince süreç biraz daha karmaşık hale geliyor. Burada hayal gücü, deneyim ve ilham olmadan yapamazsınız.

Neyle başlayacağınızı bilmiyorsanız (veya zaten bir fikriniz varsa, ancak şablonları kullanarak zamandan tasarruf etmek istiyorsanız), klasik uygulama seçeneklerine sahip UI Kalıpları veya indirmeye hazır özel kitler gibi hizmetler ayağınıza gelebilir. kurtarmak. İkincisi, kural olarak, PSD formatında teslim edilir, bu nedenle Photoshop'ta nasıl çalışılacağını bilen herkesin onları kendi yollarıyla yeniden oluşturması zor olmayacaktır.

Yeşil WebUI Kiti

Yeşil WebUI Kiti arayüz kiti - ihtiyacınız olabilecek hemen hemen tüm öğeleri içerir - üst gezinme menüsü, düğmeler (Tamam, İptal, Şimdi Satın Al, Şimdi İndir), satış etiketi, oturum açma formu, boş kaydırıcı ve abonelik öğeleri - RSS, E-posta ve daha fazla.

Tüm elemanlar yüksek kalitede yapılmıştır, tasarım moderndir. Her öğenin kendi katmanı (PSD dosyası) vardır, bu nedenle onlarla çalışmak çok uygundur. Prensip olarak, bundan böyle bir blogun tasarımını hızlı bir şekilde çizebilirsiniz - bir kaydırıcı, zaten abonelikler var. Karşılaştırma yapmak zorunda kalsaydım, bu Çinliler için daha uygun olurdu.

Sarı Kullanıcı arabirimi öğeleri

Sarı Kullanıcı Arayüzü Öğeleri - set, düğmeler (İndir, Gönder, Şimdi Satın Al, arama), bölümler (Öne Çıkanlar ve tarih), kaydırma çubukları ve ilerleme çubukları dahil olmak üzere 11 sarı arayüz öğesi içerir. PSD dosyasındaki tüm katmanlar uygun şekilde gruplandırılmıştır, böylece bu veya bu UI öğesinde kolayca ayarlamalar yapabilirsiniz. Renk, ihtiyacınız olan her şeye kolayca değiştirilebilir (elbette Yeşil WebUI setinde de).

Ne yazık ki, Sarı UI Öğeleri, Yeşil WebUI Kitinden daha az öğe içerir, bu nedenle bazı öğeleri başka kümelerden ödünç almanız veya kendi başınıza çizmeniz gerekeceğini dışlamıyorum.

Yumuşak UI Kiti

Web geliştirmeniz için güzel hafif arayüz öğeleri kümesi. Hem site oluştururken hem de web uygulaması için kullanılabilir. Tüm PSD kaynakları arasında, web - + arama, açılır liste, onay kutuları ve radyo kutuları, metin istemleri vb. için en yaygın öğeler vardır, oylama için yıldızlar bile vardır. Photoshop'ta nasıl çalışılacağını bilen biri için bu PSD'yi ihtiyaçlarına göre düzeltmek hiç de zor olmayacaktır. Genel olarak, set miktar ve kalite açısından çok iyidir.

Şeffaf Cam Kullanıcı Arayüzü

Setin adından (Transparent Glass UI) ve önizlemeden de görebileceğiniz gibi, ayırt edici özelliği öğelerin şeffaflığıdır. Bu, ilk olarak, oldukça etkileyici görünüyor ve modern tasarıma çok iyi uyuyor ve ikincisi, hemen hemen her arka plan rengine uyacak. PSD seti, bir web arayüzünün tüm tipik öğelerini içerir - açılır listeler, radyo düğmeleri, düğmeler, formlar, kaydırıcılar ve giriş alanları.

Photoshop için sunulan UI öğelerinden kendiniz için bir şeyler bulacağınızı düşünüyorum. İlk ve son kitler özellikle iyidir. Size başarılı deneyler ve güzel bir arayüz diliyorum!

not Bir çevrimiçi mağaza için esnek bir sistem bulmanız gerekiyorsa - magento ticaret, projenin olanakları, işlevselliği ve genişletilebilirliği açısından sizi hoş bir şekilde şaşırtabilir.

Bu derste, çözüm sunumuna dahil olan kitaplıktan UI öğelerini nasıl kullanabileceğinizi ve ayrıca sitedeki düzen seçeneklerinin, simgelerin, düğmelerin ve tasarım öğelerinin nasıl kullanılacağını açık bir şekilde anlatacağız ve göstereceğiz.

Dikkat! Html koduyla başarılı bir şekilde çalışmak için en azından minimum düzeyde etiket ve kayıt ilkeleri bilgisine ihtiyacınız vardır. Herhangi bir şüpheniz varsa veya pratik yapmanız gerekiyorsa, test sayfasındaki düzeni denemekten çekinmeyin. Html kodunu değiştirmek, tek bir sayfanın düzenini bozabilir, ancak tüm siteyi bozmaz.

Demo sitesinde sunulan UI öğeleri, site sayfasında istediğiniz yere kopyalayıp yapıştırabileceğiniz html kodudur. Örnek olarak "Gears" elementini ve farklı boyutlardaki başlıkları siteye ekleyelim.

Öğeleri yerleştirmek istediğiniz sitenin istediğiniz sayfasına gidin, düzenleme modunu etkinleştirin ve düzenleme için sayfayı açın. Hem html kodunu hem de içeriğin görünümünü aynı anda görebilmeniz için yan yana görüntülemeye geçin.

Sitenizdeki UI öğeleri kitaplığının bulunduğu bölümü açın, istediğiniz içeriğe sahip sayfaya gidin, düzenleme moduna girin ve ayrıca içindeki birleşik görüntüleme moduna geçin.

İlgilendiğiniz öğelerin kodunu kopyalayın ve sitenizin sayfasına yapıştırın.

Örneğimizde başlık kodunu ve Gears eleman kodunu kopyaladık. Kodda değişiklik yapabilirsiniz - örneğin, başlığın altındaki test metnini kaldırın veya dişlilerin altındaki imzayı değiştirin.

Değişiklikleri kaydettikten sonra, gerekli öğeler sayfada görüntülenir:

Tüm çizgilerden tasarımcıların birbirlerinin önünde gösteriş yaptıkları, akılda kalıcı, hatta diyebilirim ki, her türlü grafik zil ve ıslık kullanan çok hayali tasarım projelerinin sonsuza dek gittiği zamanlar, kullanıcılara izin veren yeni tasarım çözümlerinin zamanı geldi. bir web projesinin renkli ambalajından ziyade en önemli bileşenlerine odaklanmak.

Düz arayüz öğelerinin kullanımı, belli belirsiz ama kesinlikle öyle, Windows 8'in piyasaya sürülmesi ve oldukça minimalist Metro stili ile yayıldı. Minimalist yaklaşımıyla düz tasarım, öncelikle hem masaüstü PC'ler hem de dokunmatik kontrollere sahip akıllı telefonlar gibi çeşitli kullanıcı cihazlarında kullanılabilirliğe odaklanır. Düz tasarımların ayırt edici özellikleri net çizgiler, iki boyutlu nesneler, canlı renkler, iyi tanımlanmış bağlantılar ve sans-serif yazı tipidir. Kullanıcıların dikkatini önemli unsurlardan uzaklaştırmamak için tüm dekoratif cicili bicili tamamen yoktur.

Web tasarımında yeni trendleri takip ediyorsanız ve zaten düz stilde tasarım çözümlerinin destekçisi olduysanız, işte yeni projeleriniz için düz tasarımlı 10 tamamen ücretsiz kullanıcı arayüzü öğesi kiti. Tüm kitler, herhangi bir web tasarımcısı için ideal olan çok çeşitli bileşenler içerir: düğmeler, giriş öğeleri, menüler, onay kutuları ve radyo düğmeleri, etiketler, menüler, ilerleme çubukları ve kaydırıcıların yanı sıra gezinme öğeleri ve çok daha fazlası.

Bu harika UI kitleriyle tasarımınızı yeni ve göz alıcı bir tarzda güçlendirin.

1. Tüy Ağırlığı Kullanıcı Arayüzü

Sarah Hunt'tan bir vektör temelinde niteliksel olarak tasarlanmış ve katmanlara bölünmüş, dikkatlice bir dosyaya paketlenmiş çekici bir ücretsiz arayüz öğeleri seti, tüm katmanlar sezgisel adlarla etiketlenmiştir. Metin ve renklerin düzenlenmesi kolaydır. Tasarım, ücretsiz olarak kullanabileceğiniz bir yazı tipi kullandı.

Bu UI öğeleri seti ile işinize çok daha az zaman harcayabilir ve yaratıcılığa odaklanabilirsiniz. Kit, kişisel veya ticari projelerde kullanım için tamamen ücretsizdir. Kiti indirebilir ve hemen başlayabilirsiniz.

2. Modern Dokunmatik UI Kiti

Kusursuz bir tasarıma sahip işlevsel bir web sitesi oluşturabileceğiniz PSD formatındaki harika bir UI öğeleri kümesinin temel ücretsiz sürümü. Denge tipografisi, öğelerin toplam ağırlığı ve konumu, ayarlanmış dolgu, kenar boşlukları ve renk paleti. İçeriğe belirgin bir vurgu yapan genel stil. Bu harika kitin tam HTML sürümü, PixelKit aboneliğine sahip kayıtlı kullanıcılar tarafından kullanılabilir.

3. Dikey Sonsuzluk

4. Kare UI Ücretsiz

Bir başka harika ve paketlenmiş set Tasarım modu, bir indirme bağlantısı almak için resmi bir haber aboneliği dışında kamu malı olarak sunulur. Kaliteli bir ürüne ihtiyacınız varsa, bu küçük engelin kimseyi durdurmayacağından eminim. Kit gerçekten yüksek kalitede ve web sitesi tasarımı için iyi çizilmiş çeşitli web bileşenleri içeriyor. Ücretsiz sürümü indirdikten sonra ve seti beğendiyseniz, dilerseniz setin genişletilmiş premium sürümünü satın alabilirsiniz. Ücretsiz sürüm, tam teşekküllü bir web sitesi oluşturmak için en kullanışlı tasarım çöreklerinden yeterince sahip olmasına rağmen.

5. Düz Tasarım UI Bileşenleri

Genel renk paletinde mavimsi tonların baskın olduğu düz bir tarzda yapılmış hafif (407 Kb) kullanıcı arabirimi bileşenleri seti. Bu setteki tüm öğeler, iyi organize edilmiş bir PSD dosyasında bulunur ve kolayca düzenlenebilir. Gördüğünüz gibi, renk isyanı yok, her şey katı ve yalnızca içeriğin algılanmasını kolaylaştırmayı hedefliyor.

6. Metro Fayansları UI Kiti

PixelKit'ten ücretsiz, oldukça zengin ve güzel bir şekilde oluşturulmuş bir UI bileşenleri seti. Kit, bir PSD dosyasında katmanlı ve birleştirilmiş birçok kullanıcı arabirimi öğesi içerir, tasarımı web projeleri ve mobil uygulamalar geliştirmek için idealdir. İlk bakışta bileşenlerin tasarımı, Wihdows 8 grafik arayüzünün stili, öğelerin tam olarak çizilmiş kenarları, yumuşak mavi-mavi tonları ve mükemmel okunabilir bir yazı tipi tahmin ediliyor.

7. Düz Yuvarlak Kare UI Kiti

Zanaatkarlar tarafından ücretsiz erişim için sunulan web arayüzünün etkileyici bir paketi, şüphesiz dikkatinizi hak ediyor. Yazarlar, çalışmalarında, yüzde yüz düz tasarım çizgisinden biraz sapmış, bireysel bileşenlere biraz hacim ekleyerek, hafif yuvarlatılmış köşeler kullanarak ve öğelerin alt sınırlarına hafif bir gölge eklemişlerdir. Bu tasarım kararı, web tasarımında değişen önceliklerin geçiş döneminde haklı çıkar. Site kurucularının verimli çalışması için gerekli tüm unsurlar, eksiksiz bir sette. Arşivi indirmeye, paketini açmaya ve sonsuz olmasa da, en azından güzel ve kibar olmaya başlamaya devam ediyor)))

8. Düz Tasarım UI Paketi

Benzer PSD UI kitleri arasında gerçek ağırlık (125MB!) Takımın bileşenlerinin düz tasarımı, en küçük ayrıntısına kadar ayrıntılı olarak işlenir, yaratıcı çalışma için etkileyicidir ve kurulur. Bu UI kiti, hem özel hem de ticari projelerde, yalnızca neşe ve iş yararı için ücretsiz olarak kullanılabilir.

10. Önyükleme 1.0.1

İncelemenin sonunda, web sitesi arayüzlerinin hızlı gelişimi için bir tür HTML, CSS, JS ve bileşenler koleksiyonunu sunuyoruz - iyi bilinen platform Twitter Bootstrap 3 üzerine kurulu "Bootflat". Sezgisel bir araç hafif eklentiler ve bileşenler içerir, ancak zengin Bootstrap özelliklerine sahiptir. HTML5 ve CSS3 desteği, harika renk şeması ve geliştirilmiş Bootstrap 3 stiline dayalı stil.Bootflat tamamen duyarlıdır, bu da her tür kullanıcı cihazının ekranlarında öğelerin görüntülenmesinde sorun olmayacağı anlamına gelir. Tüm platform bileşenlerinin genişletilmesi ve düzenlenmesi kolaydır. Bootflat, açık kaynaklı bir projedir, bu nedenle tüm özelliklerini kısıtlama olmaksızın kullanmaktan ve kendi stilinizi yaratmaktan çekinmeyin.

Düz tasarım, geleceği olan özel bir trenddir ve anı kaçırmamak, zamanda hızlı bir trene atlamak önemlidir, çünkü her yeni trendin kendi yaşam döngüsü vardır ve en popüler tasarım trendi bile olamaz. sonsuza kadar dalganın tepesi. Günümüzde pek çok nedenden dolayı, yeni projeler geliştirirken moda peşinde koşarak değil, her şeyi hissederek, hissederek ve düzenleyerek bu ilginç tasarım stilini kullanmaya değer. Bunun gibi trend olan web sitelerinin sezgisel, okunması kolay ve İnternet topluluğundan olumlu bir izlenim ve eşit derecede olumlu geri bildirim oluşturacağını söylemek güvenlidir.

Kullanıcı arayüzü (İngilizce kullanıcı arayüzü, UI) kısaca YI, kullanıcı ve bilgisayar arasındaki etkileşim ortamıdır. Bunlar düğmeler, menüler, radyo düğmeleri, onay kutuları ve çok daha fazlası. Şimdi net değil, tüm anlaşılması zor kelimeleri aşağıda açıklayacağım. Bir kişi cep telefonu kullanıyorsa, kullanıcı arayüzü bir uygulama veya tarayıcıdır.

Kullanıcı arayüzünün temel öğeleri

Şimdi yukarıda yazdığım kelimeleri açıklayacağım. Her şey yerine oturmalı. Bir nedenden dolayı kullanıcı arayüzünden bahsediyorum. Bu bilgiler, tüm bu öğeleri mizanpajlarda çizmeyi unutmamanız için gereklidir. Düzen tasarımcısı, düzende bunlardan hiçbirini bulamazsa, bunu kendisine doğru göründüğü şekilde yapacaktır.

Metinler (başlıklar)

Bir kişi web'e girdiğinde ilk karşılaştığı şey metin ve başlıklardır. Bu nedenle biz tasarımcılar için tüm başlıkları tek bir mizanpajda aynı anda çalışmak önemlidir. Başlıklar genellikle H1, H2… Hn olarak adlandırılır çünkü html etiketlerinde böyle adlandırılırlar.
Bu durumda, ilk başlık H1, ardından H2 vb. şeklindedir. İlki en alakalı başlıktır. Bir açılış sayfasında, bu, azalan ekranın daha aşağısındaki ilk ekranda olabilir. Mizanpajlarda, mizanpaj tasarımcısının hangi etiketi nereye koyacağını anlaması için tüm başlıkları göstermeniz gerekir.

Bağlantılar

İşte metin, başlık ve vurgulanan bağlantı. Bağlantıların 4 durumu vardır: normal, üzerine gelindiğinde (rengi, altı çizili veya başka bir şeyi değiştirebilir, efekt), tıklama ve ziyaret durumu (tıklandı ve ardından siteye bırakıldığı yerden geri döndü).

Düğmeler

Fiziksel düğmelere benzerler veya en azından bir teyp üzerindeki düğmeler olarak düşünülmüşlerdir. Bu nedenle, durumları vardır: gezinme ve basma. Bütün bunların üzerinde çalışılması gerekiyor.

Radyo düğmesi ve onay kutuları

Solda bir radyo düğmesi (Rusça'da bir radyo düğmesi, ancak tasarımcılar arasında geleneksel olduğu için buna radyo düğmesi diyeceğim), sağda bir onay kutusu var. Radyo düğmesinde sadece 1 seçenek seçebilirsiniz, bir rakunumuz var. Onay kutusunda çoktan seçmeli bir olasılık var, bir fok ve bir rakun seçtik.

Formlar

Formların aynı anda birkaç formda çalışması gerekir. Aktif olmayan form (üstten), aktif (üstten ikinci), hatalı form (üstten üçüncü), başarıyla doldurulmuş form (üstten dördüncü). Bazen, formda bir hata olması durumunda, hatayı açıkça belirtebileceğiniz sağda bir açılır açıklama yapmak daha iyidir. Örneğin, bir ziyaretçi telefon numarası girmek için bir forma harf girdiyse, lidere “bu alana sadece rakamlar girilebilir” yazın. Bu, insanların formu doldurmasına ve dönüşümünü artırmasına büyük ölçüde yardımcı olacaktır.

Açılır

Siteye yetkilendirme (giriş) için her zaman açılır pencereler veya açılır pencereler çizilmelidir. Bu resimde değil, ama genel olarak formdan çıkmak için sağda bir çarpı işareti yapmak gelenekseldir.

sayfalandırma

Sayfalandırma, çok sayıda ürün, sayfa veya başka bir şey arasında hızla geçiş yapmanızı sağlayan sayfa sayfa gezinmedir. Şimdi, VK'da bir haber beslemesi gibi bir sayfalandırma biçimi, aşağıya kaydırdığınızda ve daha fazla haber yüklendiğinde yaygındır. Bunu çevrimiçi mağazada da yapabilirsiniz. Bu durumda, yine de "daha fazla ürün göster" düğmesini sağlamanız gerekir. Birçoğu zaten yüklenmişse ve bir tür ön yükleyici gösteriyorsa, yani sayfanın yüklenmesini gösteren bir öğe.

Galeta unu

Genellikle bir çevrimiçi mağazada bulabilirsiniz. Örneğin, solda bir çevrimiçi mağaza, sağda erkek giyim, sağda spor dış giyim, ardından ceketler yazmaktadır. İstediğiniz seviyeye tıklayarak yukarı çıkmanızı sağlar. Ekmek kırıntıları farklı şekilde adlandırılır.

ön yükleyici

Bir şeyin yüklendiğini gösteren şey. Onlar çok farklı. "GIF preloader" google ve çeşitliliği görebilir ve beğendiklerinizi kullanabilirsiniz. Nasıl görüneceğini, hangi rengi, hangi formatta kaydedeceğinizi vb. seçebileceğiniz özel bir önyükleme oluşturucu vardır. Daireler ve çizgiler gibi standart şeyler kullanmanızı tavsiye ederim, özel projeler için sıra dışı bir şeyler kullanabilirsiniz veya Photoshop'ta kendinizi çizip GIF animasyonu yapabilirsiniz. Aşırıya kaçmayın, bu kesinlikle önemli bir unsurdur, ancak yine de üzerinde çok zaman harcamaya değmez.

tablolar

Çoğu zaman, tasarımcılar bir tablo çizmeyi unuturlar. Örneğin, çevrimiçi bir üretim ekipmanı mağazası yapıyorsanız, karşılaştırmalı özellikler, ağırlıklar ve başka bir şey açıklamada ve ürün kartında görünür. Çizgiler renk değiştirdiğinde tabloları kullanmak uygundur, bu izleyici tarafından çok iyi algılanır. Bu durumda, onay kutuları olan bir tablo gösterilir, bu gerekli değildir. Tabloları unutma.

Menü

Menü, site genelinde gezinmedir. Bu durumda, fareyle üzerine gelindiğinde bir açılır menü olduğunu gösterdi. Bunun çizilmesi gerekiyor. Nasıl rehberlik ve etkileşim gösterdiğime dikkat edin. Sadece png imlecini indirip yerine yerleştirin. Büyük bir düzeniniz varsa, çok sayıda imleç koyun. Örneğin, menünün nasıl çalıştığını, düğmenin ve bağlantının üzerine gelindiğinde nasıl göründüğünü göstermek için. Bu durumda, normal durumu unutmayınız. Böylece, statik bir düzende, kullanıcı arabirimi öğelerinin etkileşimli bir durumda nasıl davrandığını kolayca gösterebilirsiniz.
İmleçlerin farklı olduğunu unutmayın: PC ve haşhaş için.

"Png imleci" kolayca google'da aranır. Siteyi bir Mac'te gösteriyorsanız (MacBook ile bir maket kullanarak), o zaman bir PC'deyse (örneğin, bir inernet explorer ile maket) sağ imleci kullanmanız gerekir, sonra soldakini .

İşte UI öğeleriyle ilgili temel şeyler. Bu bilgiler sitelerin tasarımında kullanılan tüm terimleri öğrenmek içindir. Açılır menüler, düğme etkileşimi vb. şeyler çizmeyi de unutmamak için. Yerleşimden sonra sitelerinizin onları oluşturduğunuz şekilde görünmesine izin verin. amin 🙂

Tek bir modern site atlanmadı. Ancak, web sitesi kullanıcı arayüzü de dahil olmak üzere düzen ve tasarımda önemli ölçüde zamandan tasarruf etmenize yardımcı olacak bir yol var - bunlar hazır UI öğesi kitaplıkları... Bugün o kadar çok var ki, oldukça büyük bir gönderide yalnızca ücretsiz setler toplamayı başardık.

Sitenin hazır UI öğelerini projede kullanmanın avantajları nelerdir?

1. Küçük öğeleri hizalamanın tüm sıkıcı işi sizin için zaten yapıldı.
2. Şekil animasyonu, düğmeler ve diğer unsurlar, web tasarımındaki modern trendlere uygun olarak halihazırda uygulanmış ve yapılandırılmıştır.
3. Her set HTML kullanıcı arayüzü bileşenler, kural olarak, ilk sürüm değildir. Tüm JS'lerde hata ayıklanır ve kararlı bir şekilde çalışır. Aynı zamanda, kümeden şu veya bu öğenin en kullanışlı çözümleri deneysel olarak belirlenmiştir.

HTML UI Öğe Kümelerini nerede kullanabilirsiniz?

Her şeyden önce, prototipler, tasarımda herhangi bir özel benzersizlik gerektirmediğinden. Bir prototip geliştirirken, kütüphaneler çok az veya hiç kozmetik değişiklik olmadan kullanılır. Ana şey, çalışmak ve projenin özünü yansıtmaktır.

Rağmen kullanıcı arayüzüönceden düşünülmüş bir tasarıma sahiptir, hemen hemen her projede kullanılabilir. Tüm öğeler modern web tasarım trendlerine göre ayarlanmıştır ve büyük olasılıkla bu koleksiyondan en az bir set projenizle tamamen aynı stilde olacaktır.

Yani. Dikkatinize 20 Ücretsiz HTML UI Öğe Kiti siteniz için. Sosyale abone olmayı unutmayın. ağlar.

eleman

Bayağı güzel Site için HTML araç seti... Dahil olmak üzere hemen hemen tüm kullanıcı arabirimi öğelerini içerir. diyalog kutuları, şekil, web tasarımı, bildirimler, menüler ve daha fazlası için özel ızgaralar. Tüm öğeler ve animasyonları kolayca algılanır ve sayfayı aşırı yüklemez. Vue.js 2.0'a dayalı

Tasarım blokları

170+ HTML bloğu kaliteli bir prototip oluşturmak için. Bu, herhangi bir şey oluşturabileceğiniz bir tür web sayfası oluşturucudur. Set, tek bir stilde birleştirilmiş tüm öğelerin eksiksiz bir setini içerir.

Bootstrap için Malzeme Tasarımı

css çerçevesi için ücretsiz Önyükleme 3 tasarımın içinde Google Materyal Tasarımı... Ne yazık ki, Angular'daki orijinal Google Material Design ile aynı dinamiklere sahip değil, ancak onu taklit etmeye çalışıyor.

Düz kullanıcı arayüzü

Yeterli kalite UI düz stilde ayarla hangi dayanmaktadır duyarlı CSS çerçevesi Bootstrap 3... Büyük bir artı, PSD kaynaklarının mevcudiyetidir.

Saf UI Kiti

Izgaralara, formlara, düğmelere, tablolara veya menülere ihtiyacınız varsa, bu UI çerçevesi tam size göre olabilir. Çok hafiftir. Ağırlık sadece 3.8KB.

Düz tasarım kullanıcı arayüzü - HTML5 + CSS3

Özel kalite ile ayırt edilmeyen minimum set HTML5 + CSS3'te UI öğeleri... Ayrıca özgün bir tasarıma sahiptir.

Metro Kullanıcı Arayüzü CSS

Metro arayüzleri geçmişte kaldı, ancak bugün bile bu tarz büyük bir izleyici kitlesi çekiyor. Kabul ediyorum, onlardan biriyim. Bugün bile görevler var METRO kullanıcı arayüzü gerekli olabilir. Dikkatinize, oldukça büyük ve kaliteli METRO tarzında HTML üzerinde UI Çerçevesi... Özel bir tasarımdaki hemen hemen tüm öğeler ücretsiz olarak mevcuttur: bunlar döşenmiş ekranlar, formlar, onay kutuları, radyo düğmeleri, düğmeler, menüler, sayfalandırma ve çok sayıda başka ilginç şeydir. Toplamda, çerçeve 70'den fazla UI bileşeni içerir. Aynı zamanda Ukraynalı bir geliştiricinin eseridir.

pervane

Özgür Bootstrap ile Malzeme Tasarımı CSS Çerçevesi... Garip bir şekilde, Angular'daki orijinal Materyal Tasarımı dinamiklerine oldukça fazla benzerlik gösteren yaklaşık 25 bileşen içerir. Premium versiyonu da var.

Materyal Tasarımı Lite

En gelişmişlerinden biri Materyal Tasarımı Kullanıcı Arayüzüçerçeveler HTML... Cephaneliğinde çok sayıda bileşen var. Bu tam bir hasat makinesi. Bunun Materyal Tasarımının en iyi HTML uygulamalarından biri olduğunu düşünüyorum.

anlamsal kullanıcı arayüzü

Güzel, hafif ve temiz kullanıcı arayüzü oluşturmak için çerçeve ve prototipleme. İhtiyacınız olan hemen hemen her şeyi içerir. Örneğin, düğmeler, sekmeler, tipografi, anahtarlar vb. Aktif olarak Rusça'ya çevrildi. Sıfırdan oluşturuldu ve bu makaledeki benzerlerinin çoğunun aksine Bootstrap ile ilgisi yok.