2021'de daha akıllı çalışmanıza yardımcı olacak 52 web tasarım aracı

En iyi web tasarım araçları: Fotoğraf, John Kappa on Unsplash
(Resim kredisi: Fotoğraf, Unsplash'ta John Kappa)
Sayfa 1/2: Sayfa 1 ATLAMAK:

Bugünlerde pek çok harika web tasarım aracı var. Web tasarım iş akışınızda çözmeye çalıştığınız sorun ne olursa olsun, ister bağımsız bir yardımcı program isterse daha büyük bir uygulama içindeki bir özellik olsun, birisi onun için bir araç yapmış olabilir. Ve web tasarım topluluğu ilk günlerden beri çok değişmiş olsa da, çalışmalarınızı paylaşma ruhu hala var, bu harika araçların çoğu ücretsizdir.

Aletlerin çoğalması büyük bir nimettir ancak aynı şeyi yapmanın pek çok yolu olduğu için seçim yapmakta kendinizi şımartmanıza da neden olabilir. Bu makalede, şu anda en iyi araçlar olduğunu düşündüğümüz şeyleri özetledik. Elbette kapsamlı bir liste değildir, ancak umarım onu ​​daraltarak ve en iyilerden bazılarını vurgulayarak iş akışınız için doğru araç setini bir araya getirmenizi kolaylaştırırız.



Bu oldukça uzun bir liste olduğu için, makalenin daha kolay gezinilebilmesi için araçları bölümlere ayırdık. Bu sayfada, eksiksiz bir web tasarım yazılımı, ardından daha temel adanmış tel çerçeve araçları ve web tasarım çerçeveleri ve kitaplıkları bulacaksınız. İkinci sayfada, görüntülerle çalışmaktan AR ve VR ile uğraşmaya kadar her şey için bir dizi daha küçük, daha özel araç var.



Buradayken, en iyi web barındırma hizmetleri ve en iyi web sitesi kurucuları 2020 için

adobe illustrator perspektif ızgarasından kurtulun

JS banner



Daha fazlasını öğrenmek ve biletlerinizi satın almak için resme tıklayın(Resim kredisi: Future / Toa Heftiba, Unsplash)

Eksiksiz tasarım araçları

01. InVision Studio

InVision, sizin için tek kullanıcı arayüzü aracı olmayı hedefliyor

InVision, ihtiyacınız olan tek kullanıcı arayüzü aracı olmayı hedefliyor(Resim kredisi: InVision)

InVision Studio tüm temelleri kapsamayı ve ihtiyacınız olan tek kullanıcı arayüzü aracı olmayı amaçlamaktadır. Hızlı prototip oluşturma, duyarlı ve işbirliğine dayalı tasarım ve tasarım sistemleriyle çalışma araçları dahil olmak üzere güzel etkileşimli arabirimler oluşturmanıza yardımcı olacak bir dizi özellik ile birlikte gelir.

InVision'ı Sketch gibi araçlarla zaten kullanıyorsanız, özelliklerde oldukça fazla geçiş vardır. Ancak Studio’nun gücü, özellikle tasarımınız animasyon içeriyorsa, prototipleme departmanında yatar. Hızlı prototipleme, karmaşık ve yaratıcı geçişler oluşturmanıza olanak tanıyarak arzu ettiğiniz animasyon düzeyine gerçekten ulaşmanızı sağlar. Kullanıcı arayüzünüzün geçişinin başlangıcında nasıl görünmesini istediğinizi bulun ve ardından nihai sonucu tasarlayın. InVision Studio gerisini sizin için halleder.



Bunun da ötesinde, bu özel animasyonları ve geçişleri kaydırma, tıklama ve fareyle üzerine gelme gibi bir dizi hareket ve etkileşimden oluşturabilirsiniz.

İşiniz bittiğinde, prototiplerinizi InVision aracılığıyla dışa aktarın ve insanları ortak çalışmaya davet edin. Projenizi amaçlanan platformda görüntüleyebilirsiniz - tasarımınızı keşfetmenin ve test etmenin harika bir yolu. Müşteriler daha sonra tasarım hakkında doğrudan yorum yapabilecekler.

Bunun da ötesinde, birden çok cihaz için çok sayıda çalışma yüzeyi oluşturmayı düşünmeyi bırakabilirsiniz - Studio'nun düzen motoru, tasarımınızı herhangi bir ekrana otomatik olarak ayarlayacaktır. Bu zaman kazandırıcı, tasarımınız hakkında çok daha fazla düşünmeniz için size alan sağlar.

02. Eskiz

Sketch, birçok web tasarımcısı için UI tasarım aracı olarak Photoshop

Sketch, birçok web tasarımcısı için UI tasarım aracı olarak Photoshop'un yerini aldı [Resim: Bohemian Coding](Resim kredisi: Bohemian Coding)

Bohem Kodlama Eskiz en yaygın kullanılan web tasarım platformlarından biridir; İşbirliğine dayalı bir şekilde arayüzler ve prototipler oluşturmak için oldukça güçlü vektör tabanlı bir araçtır. Sketch, özellikle web siteleri ve uygulamalar yapmak için oluşturulmuştur, bu nedenle arayüzünüzü karıştıran gereksiz özellikler yoktur ve daha geniş kapsamlı bir yazılımdan daha hızlı ve daha verimlidir.

Rory Berry, yaratıcı yönetmen Süper , 2017'de Sketch'e geçiş yaptı ve kesinlikle tavsiye ediyor. 'Photoshop ile karşılaştırıldığında, tüm belgelerinizi sıralamak ve Sketch üzerinde revizyonlar yapmak çok daha kolay' diye başlıyor. 'Sketch'in küçük belgeleri varken Photoshop'un büyük belgeleri var. Vektör tabanlı bir uygulama olması nedeniyle dosya boyutları Photoshop'a kıyasla önemli ölçüde daha küçük. '

Ve hepsi bu değil. 'Sketch'teki yerleşik ızgara sistemi harika ve arayüz tasarımını çok daha kolay hale getiriyor. Bence genel kullanıcı arayüzü ve minimal his, tasarımı daha temiz ve kullanıcı dostu hale getiriyor. Photoshop karşılaştırıldığında çok karmaşık görünüyor. '

Topluluk yüzlerce sunuyor Sketch eklentileri tasarım iş akışınızı daha kolay ve sorunsuz hale getirmek için.

Sketch'in dezavantajı, yalnızca Mac'te mevcut olması ve diğer işletim sistemlerini destekleme planlarının olmamasıdır. Tasarımcılar genellikle Windows kullanan geliştiricilerle .sketch dosyalarını paylaşmak isteyeceklerinden bu bir sorun olmuştur. Neyse ki artık bir 'Windows için Sketch' uygulaması var Çılgınlık .sketch dosyalarını açıp düzenleyecek ve bu sıkıntının çoğunu ortadan kaldıracak - Dışa Aktarma ve Dönüştürme Bu makalenin bölümü.

Kaçırmayın Sketch kullanmak için en iyi ipuçları .

03. Adobe XD

Adobe XD, kolaylıkla prototip oluşturmanıza olanak tanıyan hafif bir arayüze sahiptir

Adobe XD, kolaylıkla prototip oluşturmanıza olanak tanıyan hafif bir arayüze sahiptir(Resim kredisi: Adobe)

Adobe XD, Adobe Creative Cloud paketi altında dijital projeler için en iyi ortamı sunar. Meraklı bir Adobe kullanıcısıysanız ve XD'de yeniyseniz, arayüzü başlangıçta çok 'Adobe' gibi bulamayabilirsiniz. Ancak, piyasadaki diğer önde gelen araçlara kadar yığılır. Bir süredir Photoshop'ta tasarım yapıyorsanız, bu bir sıçrama, ancak UI tasarımı için buna çok değer.

Bu vektör tasarımı ve wireframing aracı, aşağıdakiler için destek gibi eklemelerle daha da iyi hale geliyor: ses prototipleme aracın UX'teki en son trendlere ayak uydurmasını sağlamak. XD, çizim araçları, statik olmayan etkileşimleri tanımlamanıza olanak tanıyan araçlar, mobil ve masaüstü önizlemeleri ve tasarımlar hakkında geri bildirim vermek için paylaşım araçları içerir. Bir projeyi başlatmak için cihaza özel bir çalışma yüzeyi seçmenize olanak tanır ve hatta popüler bir kullanıcı arayüzü kitini, örneğin Google'ın Materyal Tasarımı'nı içe aktarabilirsiniz.

Adobe XD, Creative Cloud'un geri kalanıyla bütünleşir, bu da Photoshop veya Illustrator'daki varlıkları kolayca içe aktarabileceğiniz ve bunlarla çalışabileceğiniz anlamına gelir. Halihazırda başka Adobe uygulamalarını kullanıyorsanız, kullanıcı arayüzü hoş ve tanıdık gelecektir ve çok fazla öğrenme eğrisi göstermemelidir.

Andrei Robu Barselona'daki Robu Studio'nun tasarım direktörü, hayranları arasında. 'Hızlı örnekler için harika,' diyor. Çok sayıda fotoğrafın yüklü olduğu çok hafif bir arayüz ve ruh hali tahtaları için harika. Prototipleme, müşterilere işlerin nasıl çalıştığını göstermek için çok yararlı, özellikle de içeriği hemen çevrimiçi olarak gönderebildiğiniz için. '

Ellis Rogers, grafik tasarımcı Resepsiyonal Ltd ayrıca tavsiye ediyor. 'Tasarım / prototip veya tel kafes tamamlandığında, Adobe XD, öğeleri çok hızlı bir şekilde seçmenize ve bir bağlantı yoluyla paylaşılabilen çalışan bir prototip için sayfa geçişleri oluşturmanıza olanak tanır' diye açıklıyor. Bağlantı ayrıca her sayfa için geri bildirim toplamanıza ve her şeyi organize etmenize olanak tanır. Bağlantı, Adobe XD içinde güncellenebilir, böylece istemci, yanlış sürümler konusunda endişelenmek zorunda kalmadan her zaman en son sürümü görebilir. Birlikte çalışmak mutlak bir zevk. '

04. Marvel

Marvel

Marvel, entegre bir kullanıcı test aracı ile birlikte gelir(Resim kredisi: Marvel)

Marvel, hızlı fikirler üretmek, bir arayüzü nasıl görünmesini istediğinize göre geliştirmek ve prototipler oluşturmak için harika bir başka web tasarım aracıdır. Marvel bir prototip aracılığıyla tasarımınızı simüle etmenize olanak tanıyan gerçekten düzgün bir sayfa oluşturma yöntemi sunar. Tasarımlarınızı proje iş akışınıza eklemek için bazı harika entegrasyonlar var. İlginç bir şekilde, web tasarım araçlarında hala oldukça sıra dışı olan entegre bir kullanıcı testi özelliği var. Hepsi de çevrimiçi olduğundan herhangi bir şey indirmenize gerek yok.

05. Figma

web tasarım araçları: Figma screengrab

Figma, gerçek zamanlı olarak diğer tasarımcılarla birlikte tasarlamanıza, prototip oluşturmanıza ve geri bildirim toplamanıza olanak tanır [Resim: Figma]

Figma birden çok tasarımcının gerçek zamanlı olarak işbirliği yapmasını sağlayan bir arayüz tasarım aracıdır. Projede sonucu şekillendirmeye dahil olan birden fazla paydaşınız olduğunda bu çok etkilidir. Tarayıcıda veya Windows, Mac veya Linux'ta mevcuttur ve ne için kullandığınıza bağlı olarak hem ücretsiz hem de ücretli sürümleri vardır.

İşte olağanüstü özelliklerinden bazıları:

'Figma, platformlar arası olması dışında Sketch ile benzer bir USP'ye sahip' diye açıklıyor ön uç tasarımcısı Benjamin Oku . 'Birkaç simge oluşturmak için kullandığımda iş akışını inanılmaz derecede akıcı buldum. Öğrenmek için hiç zamanım olmadı ve işbirliğine dayalı olmanın ek faydası oldu: uygulama içinde başkalarıyla grafik paylaşabilirsiniz. '

'İşim için Linux'a geçmeye çalışıyorum ve bazen Windows kullanıyoruz, bu yüzden Figma pratik açıdan bana mantıklı geliyor' diye ekliyor.

Serbest içerik yazarı ve sanatçısı David Eastwood Figma hakkında söyleyecek güzel şeyler de var. 'MVT'lerle hızlı bir şekilde dalga geçmemiz gerektiğinde de gerçekten yararlı bir araç oldu; bazen mevcut bir düzene küçük eklemeler. Masaüstü, tablet ve mobil için hızla tasarımlar oluşturabilmenizi seviyoruz. '

06. Affinity Designer

Affinity Designer, masaüstünde olduğu kadar iPad

Affinity Designer, masaüstünde olduğu kadar iPad'de de güçlü [Affinity Designer](Resim kredisi: Serif)

'Şerifler Affinity Designer bazıları tarafından 'Photoshop katili' olarak anılıyor ve nedenini görmek çok kolay 'diyor ürün tasarımcısı Ve Edwards . Ayarlanabilir, tahribatsız katmanlar da dahil olmak üzere gerçekten keyif aldığım birkaç özellik vardı. Bu, esasen görüntüleri veya vektörleri onlara zarar vermeden ayarlayabileceğiniz anlamına gelir.

Yüzde 1.000.000 yakınlaştırma sadece mutluluktu; Gerçekten yaklaşabileceğiniz için özellikle vektör sanatıyla çalışırken kullanışlıdır. Geri alma ve geçmiş özellikleri de gerçekten kullanışlıdır: Affinity, 8.000'den fazla adıma geri gitmenizi sağlar! '

Tasarım söz konusu olduğunda, kullanıcı arayüzü tanıdık geliyor. Photoshop'tan taşınırken, herkes baştan başlamak istiyor gibi görünüyor ve bu gerçek bir zorluk oluşturabilir. Affinity'nin yaptığı şey, düzeni tanıdık tutmak ve aynı zamanda her şeyi sıkıştırmak ve dikkat dağıtıcı şeyleri gizlemek oldu. Kolayca doğrudan içeri girip tasarım yapabildim. '

Affinity Designer da mevcuttur iPad için . Ve bunun, bekleyebileceğiniz küçültülmüş mobil uygulama sürümü olmadığını unutmayın: Masaüstünde aldığınız tam sürümle aynı.

Kullanma kılavuzlarımızı kaçırmayın Piksel kişi , Kişiyi dışa aktar ve Kalem aracı Affinity Designer'da. Ayrıca Serif'in bir Photoshop alternatifi oluşturduğunu da unutmayın. Affinity Fotoğraf ve bir InDesign alternatifi, Yakın İlgi Alanı Yayıncısı ; hepsi birlikte güzelce oynuyor.

Mockup'lar ve prototipler

07. UXPin

UXPin: web tasarım araçları

UXPin, etkileşimli durumlar ve mantıkla prototip oluşturmanıza olanak tanır(Resim kredisi: UXPin)

Listemizdeki bir sonraki web tasarım aracı UXPin'dir. Bu özel prototipleme uygulaması Mac, Windows veya tarayıcıda mevcuttur. Diğer tasarım araçlarının çoğuyla, yalnızca çalışma yüzeyinizdeki farklı öğeleri birbirine bağlayarak etkileşimleri taklit edebilirsiniz, UXPin koda yaklaşır ve etkileşimli durumlar, mantık ve kod bileşenleriyle çalışmanıza olanak tanır.

İOS, Materyal Tasarımı ve Önyükleme için entegre öğe kitaplıkları ve ayrıca yüzlerce ücretsiz simge setleri , size yolda yardımcı olmak için. UXPin, tasarımlarınızın alkışladığımız WCAG standartlarına uygun olmasını sağlamak için yakın zamanda erişilebilirlik özelliklerini de kullanıma sundu.

üniversite öğrencileri için grafik tasarım projeleri

API İsteği, UXPin'in Etkileşimler yeteneklerine yapılan en son eklemedir. Bu özellik, doğrudan tasarım aracınızın içinden ürünlerinizle 'konuşan' uygulamanın prototipini oluşturmanıza olanak tanır - koda gerek kalmadan. HTTP isteklerini harici bir API'ye göndermenizi sağlayarak çalışır.

İlk prototipinizi şurada oluşturabilirsiniz: UXPin ücretsiz ve size uygunsa aylık ücretli aboneliğe geçin (ekip üyelikleri mevcuttur). UXPin kısa süre önce Sketch ile entegrasyonunu geliştirdi, bu nedenle prototip oluşturma yeteneklerini sınırlayan bir Sketch hayranıysanız, iş akışınıza dahil edilebilir.

08. Proto.io

Bu araç, gerçeğe yakın prototipler oluşturmanıza yardımcı olur

Bu araç, gerçeğe yakın prototipler oluşturmanıza yardımcı olur(Resim kredisi: Proto.io)

Proto.io kaba fikirlerle başlayan ve tam teşekküllü tasarımlarla biten gerçeğe yakın prototiplerin başlamasına izin veren en iyi uygulamadır. Araç ayrıca, detaylı ve özel vektör animasyonları dahil olmak üzere projeleriniz için size çeşitli olanaklar sunar.

Elle çizilmiş bir stille ilk fikirleri geliştirerek başlayabilir, bunları tel çerçeveler halinde çalıştırabilir ve yüksek kaliteli bir prototiple bitirebilirsiniz. Sketch ve Photoshop eklentileri, diğer araçları kullanarak tasarım yapmak istiyorsanız yardımcı olur, ancak Proto.io uçtan uca tasarım sürecini iyi yönetir. Diğer özellikler - örneğin kullanıcı testi - tasarımlarınızı doğrulamanıza yardımcı olacaktır. Bu, çok sayıda güvenilir markanın halihazırda kullandığı hepsi bir arada bir çözümdür.

Oynamaya başlamak için bir sürü harika demo var ve bu uçtan uca çözümün şu anda mevcut olan bir dizi aracı ne kadar kolay değiştirebileceğini gerçekten görebilirsiniz. Nispeten yeni eklemeler, Proto.io yakın zamanda, varlık yöneticileri, geliştirici kılavuzları ve prototipinizi kaydetme yeteneği dahil olmak üzere bir dizi yeni özellik dahil etti - bu aracı daha iyi prototip oluşturma araçlarının birçoğuyla uyumlu hale getirin.

09. Balsamiq

Balsamiq arayüzü

Balsamiq, hızlı tel çerçeveleme için mükemmeldir(Resim kredisi: Balsamiq)

Hızlı, verimli tel çerçeve aradığınız şeyse, o zaman Balsamiq güçlü bir öneridir. Projeleriniz için hızlı bir şekilde yapı ve yerleşim planı geliştirebilirsiniz. Sürükle ve bırak öğeleri hayatı kolaylaştırır ve düğmeleri diğer sayfalara bağlayabilirsiniz. Tel çerçeve oluşturarak, arayüzlerinizi hızlı bir şekilde planlamaya ve ekibinizle veya müşterilerinizle paylaşmaya başlayabilirsiniz. Balsamiq, 2008'den beri devam ediyor ve düşük kaliteli, hızlı, odaklanmış mantıksız yaklaşımıyla gurur duyuyor.

10. ProtoPie

Bu aracı kullanarak yerel sensörlerle oynamaya başlayın

Bu aracı kullanarak yerel sensörlerle oynamaya başlayın(Resim kredisi: ProtoPie)

Web tasarım aracı Protopik karmaşık etkileşimler oluşturmanıza ve tasarımınızın ideal son işlevine yaklaşmanıza olanak tanır. Belki de göze çarpan özellik, prototipinizdeki eğim, ses, pusula ve 3D Dokunmatik sensörler gibi akıllı cihazların sensörlerini kontrol etme yeteneğidir. Projenize bağlı olarak, bu, yerel uygulama özelliklerini kapsamak isteyenler için harika bir araçtır. Pasta kadar kolaydır ve kod gerekmez.

Son yayınlanan sürüm 4.2, çok istenen iki yeni özellik içerir: artık sahnelerinize düzenlenebilir SVG'ler ekleyebilir ve seçim üzerine anında iki katman arasındaki mesafeyi bulabilirsiniz.

11. MockFlow

MockFlow

Bu araç, kaba fikirlerle dalga geçmek için harika(Resim kredisi: MockFlow)

MockFlow web sitelerini planlamak ve tel çerçeve oluşturmak için bir uygulama paketidir. WireframePro, ilk fikrinizi belirlemenize ve ardından tam doğru olana kadar yinelemenize yardımcı olur - bu konuda size yardımcı olacak bir UI revizyon izleyici vardır. Gereksinimlerinizi karşılayacak şekilde ayarlayabileceğiniz binlerce önceden oluşturulmuş bileşen ve düzen ile birlikte gelir ve çalışmanızı iş arkadaşlarınıza ve müşterilerinize sunmak için bir önizleme modu vardır.

Tel çerçevelerinizi yaptıktan sonra, paketin geri kalanı, bilgi mimarisi, bir stil kılavuzu oluşturma (bu otomatik olarak oluşturulabilir) ve bir oturum kapatma süreci dahil olmak üzere web sitenizi planlamanın diğer yönlerinde size yardımcı olabilir.

Başka seçenekler görmek isterseniz, en iyiler listesine göz atın. tel kafes araçları .

12. Adobe Comp

Adobe Comp iPad için web sayfaları için tel kafeslerin, prototiplerin ve mizanpaj konseptlerinin oluşturulmasına yardımcı olan harika bir web tasarım aracıdır. İsterseniz Creative Cloud destekli akıllı eskiz defteri. Mobil ve web için bir dizi düzen için temel şablonlara sahiptir ve hatta size göre buysa yazdırın ve görüntüleri, metni ve daha fazlasını temsil etmek için sezgisel şekiller çizerek hızlı yer tutucular oluşturabilirsiniz. Comp, kaba anahatları düz çizgilere, dairelere ve dikdörtgenlere dönüştürür.

Şaşırtıcı bir şekilde Adobe, XD'ye doğrudan dışa aktarmayı dahil etmeyi uygun görmedi - çılgın! - rağmen uzun süredir devam eden bir talep sonsuza kadar göründüğü için gözden geçirildi. Bununla birlikte, Photoshop'a dışa aktarma yerleşiktir (Illustrator ve InDesign ile birlikte) ve her yerde bulunan görüntü düzenleyicide modelinize ince ayarlar yapıldıktan sonra oradan XD'ye aktarabilirsiniz. Adobe adanmış wireframer'ın kullanıcı yolculuğundaki bu istenmeyen ekstra adıma rağmen Comp, her yere gidebilme yetenekleri, kullanım kolaylığı ve etkileyici kullanıcı arayüzü ile bu listeye dahil edilmesini tamamen hak ediyor.

13. Flinto

Flinto arayüzü

Önceki ve sonraki durumları tasarlayın ve Flinto farkı sizin için belirleyecek ve canlandıracak(Resim kredisi: Flinto)

Flinto, tasarımlarınız içinde benzersiz etkileşimler oluşturmanıza olanak tanıyan bir tasarım aracıdır. Bir dizi jest kullanabilir ve önceki ve sonraki durumları tasarlayarak kolay geçişler yapabilirsiniz. Flinto sizin için farklılıkları ve animasyonları basitçe çözer - süper yararlıdır.

Bunun yalnızca iOS olduğunu, ancak kullanmaya başladığınızda tanıdık geleceğini unutmayın. Yolculuğunuzda size yardımcı olacak çevrimiçi belgeler var ve Sketch ve Figma'dan içe aktarmak da basit.

14. Eksen

Axure arayüzü

Dinamik verilerle karmaşık tel kafes arayüzleri(Resim kredisi: Axure)

Axure her zaman piyasadaki en iyi tel çerçeve araçlarından biri olmuştur ve dinamik veri gerektiren karmaşık projeler için harikadır. Axure ile, hem teknik olan hem de yapı ve verilere özel dikkat gerektiren projeleri modellemeye gerçekten odaklanabilirsiniz.

Axure'un devir süreci, geliştiricilerin tasarımlarınıza uygun nihai bir ürün oluşturmalarına yardımcı olan kapsamlı spesifikasyonların oluşturulmasını içerir.

15. özlem

Justinmind

Justinmind, Sketch ve Photoshop gibi araçlarla entegre olur(Resim kredisi: JustInMind)

Justinmind prototip oluşturmaya yardımcı olur ve Sketch ve Photoshop gibi diğer araçlarla bütünleşir. Prototipinizi oluşturmanıza yardımcı olması için etkileşimlerinizi ve hareketlerinizi seçebilirsiniz. Aynı zamanda UI kitleri içerir, böylece ekranları hızlı bir şekilde bir araya getirebilirsiniz ve aynı zamanda duyarlıdır.

16. Akışkan

Akışkan arayüzü

Fluid, hızlı UI tasarımı için harika(Resim kredisi: Fluid)

Sıvı hızlı prototipler oluşturmak ve tasarımları geliştirmek için basit ve sezgisel bir araçtır. Hızlı prototiplerle devam etmenizi sağlamak için bazı güzel, kullanıma hazır varlıkları bir araya getiriyor. Yükseltme yaptıktan sonra, kendi sembollerinizi tercih ettiğiniz kullanıcı arayüzü varlıklarıyla bir araya getirmek gerçekten çok kolay. Bu araç, hem yüksek hem de düşük uygunluk prototipleri için mevcut varlıklarla çok hızlı UI tasarımı sunar.

17. Etkileşim

Etkileşim, herkesin aynı sayfada kalmasına yardımcı olur [Image: Interplay]

Etkileşim, herkesin aynı sayfada kalmasına yardımcı olur [Image: Interplay](Resim kredisi: Interplay)

Etkileşim ekibinizdeki, özellikle tasarımcılar ve geliştiriciler arasındaki iletişimi ve işbirliğini geliştiren bir prototipleme sistemidir. Tasarım sistemleri göz önünde bulundurularak oluşturulmuştur ve takip etmesi kolay ve otomatik olarak güncellenen belgeler oluşturmak için kodunuzla bütünleşir. Herkesi aynı sayfada ve güncel tutmak temel bir işlevdir - kodunuz güncellendiğinde tasarımınız da değişir. Interplay hala beta aşamasındadır, ancak halihazırda bir dizi büyük tasarım ve geliştirme aracıyla çalışmaktadır.

Tasarım çerçeveleri ve kitaplıkları

18. Önyükleme

web tasarım araçları: Bootstrap screengrab

Eski favori Bootstrap'in bazı güçlü yeni güncellemeleri var

Önyükleme kesinlikle yeni bir araç değil, ancak gelişimde devrim yarattı ve web'de nasıl bir şeyler inşa ettiğimizi şekillendirmeye devam ediyor.

Yazma sırasında, en son sürüm (4.4.1, Kasım 2019'da piyasaya sürüldü), belirli bir kesme noktasına kadar akışkan olan yeni duyarlı kapsayıcılar ve kesme noktaları arasındaki sütun sayısını verimli bir şekilde belirtmek için yeni duyarlı .row-cols sınıfları tanıttı.

Bootstrap ayrıca yakın zamanda kendi açık kaynaklı simge kitaplığını da başlattı. Bootstrap Simgeleri Bootstrap bileşenleriyle çalışmak üzere tasarlanmıştır.

Bul kılavuzumuzdaki en iyi ücretsiz Bootstrap temaları .

19. Başlatma 3

Kod yazmadan bir Bootstrap sitesi oluşturun [Resim: Designmodo]

Kod yazmadan bir Bootstrap sitesi oluşturun [Resim: Designmodo](Resim kredisi: Designmodo)

Bootstrap'i seviyorsanız ancak işlenmemiş şeye dalmak istemiyorsanız, Başlangıç ​​3 kolay yoldur; 12 sütunlu bir ızgaraya sahip Bootstrap 4 tabanlı web siteleri oluşturmak için yerleşik şablonlara ve temalara sahip çevrimiçi bir uygulamadır. Sürükle ve bırak arayüzünü kullanarak kod yazmadan sitenizi oluşturabilirsiniz, ancak işleri bitirmek için biraz HTML ve CSS bilgisine ihtiyacınız olacak.

20. Vue.js

web tasarım araçları: vue.js screengrab

Karmaşık JavaScript kitaplıklarında kullanılmıyor mu? Vue.js sizin için mükemmeldir [Resim: Vue.js]

Vue.js kullanıcı arayüzleri oluşturmak için bir çerçevedir ve sanal bir DOM kullanır. Adından da anlaşılacağı gibi, Vue’nun temel kitaplığı, görünüm katmanına odaklanmıştır.

Kullanıcı girdisini kullanan ve kitaplığın zarafetini gösteren, Vue belgelerinden alınan bir kod örneğine bakın. HTML ile başlayacağız:

{{ message }}

Reverse Message

Özel v-on işleyicisine dikkat edin. reverseMessage yöntem. İşte JavaScript:

var myApp = new Vue({ el: '#example', data: { message: 'Hello Vue.js!' }, methods: { reverseMessage: function () { this.message = this.message.split(''). reverse().join('') } } });

Bu örnek, paragrafı verilerle doldurdu ve reverseMessage yöntem. Vue, karmaşık kitaplıklarda daha az deneyimli olanlar için harikadır, ancak karmaşık tek sayfalı web uygulamalarının geliştirilmesine yardımcı olacak bir dizi eklentiye de sahiptir.

21. Kalıp Laboratuvarı

web tasarım araçları: Pattern Lab screengrab

Kalıp Laboratuvarı Atomik Tasarım temelindedir [Resim: Model Lab]

Pattern Lab, Dave OIsen ve Brad Frost tarafından oluşturulan güzel bir desen odaklı tasarım aracıdır. Kavramına dayanmaktadır Atomik Tasarım , tasarımınızı en küçük parçalara - atomlara - ayırmanız ve bunları birleştirerek daha büyük, yeniden kullanılabilir bileşenler - moleküller ve organizmalar - daha sonra kullanılabilir şablonlara dönüştürmeniz gerektiğini söylüyor.

Özünde, UI bileşenlerini bir araya getiren statik bir site oluşturucu olsa da, Desen Laboratuvarı Daha. Dil ve araçtan bağımsızdır; UI desenlerini birbirinin içine yerleştirmenizi ve dinamik verilerle tasarım yapmanızı sağlar; tasarım sisteminizin tamamen yanıt vermesini sağlamanıza yardımcı olmak için aygıttan bağımsız görünüm yeniden boyutlandırma araçları içerir; ve tamamen genişletilebilir olduğundan, ihtiyaçlarınızı karşılayacak şekilde genişletileceğinden emin olabilirsiniz.

22. Materyal Tasarımı

Materyal Tasarım, Google

Materyal Tasarım, Google'ın sunduğu bir dizi ilkedir [Resim: Google](Resim kredisi: Google)

Materyal Tasarımı web sitenizde uyumlu ve esnek bir temel oluşturmak için iyi tasarımın klasik ilkelerini teknoloji ve bilimdeki yeniliklerle birleştirmeyi amaçlayan Google'ın görsel bir dilidir.

Materyal Tasarım çerçevesi kullanılarak oluşturulan web siteleri ve uygulamalar modern görünecek ve kullanıcıya aşina olacak, böylece insanlar ürününüzü hemen kullanmayı kolay bulacaktır. Bu tasarım sistemine yardımcı olacak birçok araç mevcuttur; onları bulmak için gezinme çubuğundaki Kaynaklar'ı tıklayın.

JS banner

(Resim kredisi: Future / Toa Heftiba, Unsplash)

Daha iyi JavaScript oluşturmanıza yardımcı olan konferans GenerateJS'deki JavaScript süperstarları serimizle Nisan 2020'de bize katılın. Şimdi rezervasyon yap createconf.com

sanat eserlerinin fotoğraflarını çekmek için en iyi kamera

Sonraki sayfa: Herhangi bir sorunu çözmek için özel web tasarım araçları

  • 1
  • iki

Geçerli sayfa: Sayfa 1

Sonraki Sayfa Sayfa 2