İçerik
- Eksiksiz tasarım araçları
- 01. InVision Studio
- 02. Eskiz
- 03. Adobe XD
- 04. Marvel
- 05. Figma
- 08. Proto.io
- 15. özlem
- 16. Akışkan
- 17. Çerçeve
- Tasarım çerçeveleri ve kitaplıkları
- 18. Önyükleme
- 19. Başlatma 4
- 20. Vue.js
- 21. Kalıp Laboratuvarı
- 22. Materyal Tasarımı
ATLAMAK: - Eksiksiz tasarım araçları
- Mockup'lar ve prototipler
- Tasarım çerçeveleri ve kitaplıkları
Bu günlerde maketler, çerçeveler, testler ve daha pek çok konuda size yardımcı olmak için oluşturulmuş çok sayıda harika web tasarım aracı var. Ayrıca, sanal gerçeklik, animasyon, renkler ve tipografi dahil ancak bunlarla sınırlı olmamak üzere, iyi web tasarımını oluşturan birçok öğeyle ilgili çok sayıda indirme bulacaksınız.
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. Daha da iyi haber, bu harika araçların birçoğunun ücretsiz olması, ancak bu, sunulan araçların seçimini çok daha korkutucu hale getiriyor.
Web reklam öğelerine yardımcı olmak için, şu anda en iyi araçlar olduğunu düşündüğümüz şeyleri toparladık (daha ayrıntılı bir liste için, bu kullanıcı arayüzü tasarım araçları özetine bakın). Bu oldukça uzun bir liste olduğu için, makalenin daha kolay gezinilebilmesi için araçları bölümler halinde düzenledik. Bu sayfada Sketch ve Adobe XD gibi eksiksiz bir web tasarım yazılımı, ardından daha temel özel tel çerçeve araçları ve web tasarım çerçeveleri ve kitaplıkları bulacaksınız. İkinci sayfada, resimlerle çalışmaktan çalışmalarınızda kapsayıcılığı sağlamaya kadar her şey için bir dizi daha küçük, daha özel araç var.
Buradayken, en iyi web barındırma hizmetleri özetimize göz atmak ve aynı zamanda en iyi web sitesi oluşturuculardan birini seçmek isteyebilirsiniz.
Eksiksiz tasarım araçları
01. InVision Studio
InVision Studio, tüm temelleri kapsamayı ve ihtiyacınız olan tek UI 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. Bununla birlikte, 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 tasarrufu, tasarımınız hakkında çok daha fazla düşünmeniz için size alan sağlar.
02. Eskiz
Bohemian Coding’s Sketch, en yaygın kullanılan web tasarım platformlarından biridir; işbirliğine dayalı bir şekilde arayüzler ve prototipler oluşturmak için oldukça güçlü bir vektör tabanlı araçtır. Sketch, özellikle web siteleri ve uygulamalar yapmak için geliştirildi, 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.
Superrb'de kreatif direktör olan Rory Berry, birkaç yıl önce 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ı çok daha temiz ve kullanıcı dostu hale getiriyor. Photoshop, kıyaslandığında çok karmaşık görünüyor. "
Topluluk, tasarım iş akışınızı daha kolay ve sorunsuz hale getirmek için yüzlerce Sketch eklentisi sunar.
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 .sketch dosyalarını açıp düzenleyen ve bu ağrının çoğunu ortadan kaldıran Lunacy adında bir "Windows için Sketch" uygulaması var. Dışa Aktarma ve Dönüştürme Bu makalenin bölümü.
Sketch'i kullanmayla ilgili en iyi ipuçlarımızı kaçırmayın.
03. Adobe XD
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ı, aracın UX'teki en son trendlere ayak uydurabilmesini sağlayan otomatik animasyon desteği gibi eklemelerle daha iyi hale gelmeye devam ediyor. 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 projeye başlamak için cihaza özel bir çalışma yüzeyi seçmenize olanak tanır ve hatta Google'ın Materyal Tasarımı gibi popüler kullanıcı arayüzü kitlerini 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 gelir ve çok fazla öğrenme eğrisi göstermemelidir.
Barselona'daki Robu Studio'nun tasarım direktörü Andrei Robu hayranları arasında. "Hızlı örnekler için harika," diyor ve ekliyor: "Çok hafif bir arayüz, yüklü birçok fotoğraf var ve duygudurum tahtaları için harika. Prototip oluşturma, müşterilere işlerin nasıl yürüdüğünü göstermek için çok yararlı, özellikle içeriği hemen çevrimiçi olarak yayınlayabildiğiniz için. "
Receptional Ltd'de grafik tasarımcı olan Ellis Rogers da bunu tavsiye ediyor. "Tasarım / prototip veya tel kafes tamamlandığında, Adobe XD, öğeleri çok hızlı bir şekilde seçmenize ve bir bağlantı aracılığıyla 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 toplayarak hepsini düzenli tutmanıza da olanak tanır. Bağlantı Adobe XD içinde güncellenebilir, böylece istemcinin yanlış sürümler konusunda endişelenmesine gerek kalmadan her zaman en son sürümü görebilir. Birlikte çalışmak mutlak bir zevk. "
04. 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 olan başka bir web tasarım aracıdır. Marvel, tasarımınızı bir prototip aracılığıyla 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
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 yolunuzda size yardımcı olacak yüzlerce ücretsiz simge seti bulunmaktadır. UXPin ayrıca, tasarımlarınızın alkışladığımız WCAG standartlarına uygun olmasını sağlamak için erişilebilirlik özelliklerine de sahiptir.
İlk prototipinizi UXPin'de ücretsiz olarak oluşturabilir ve uygunsa aylık ücretli aboneliğe geçebilirsiniz (ekip üyelikleri mevcuttur). UXPin ayrıca Sketch ile mükemmel bir entegrasyona sahiptir, bu nedenle prototip oluşturma yeteneklerini sınırlayıcı bulan bir Sketch hayranıysanız, iş akışınıza dahil edilebilir.
08. Proto.io
Axure her zaman piyasadaki en iyi tel çerçeve oluşturma 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’ün devir süreci, geliştiricilerin tasarımlarınıza uyan nihai bir ürün oluşturmalarına yardımcı olan kapsamlı spesifikasyonların oluşturulmasını içerir.
15. özlem
Justinmind, prototip oluşturmaya yardımcı olacak ve Sketch ve Photoshop gibi diğer araçlarla entegre olacak. 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
Fluid, 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 getirir. 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 kaliteli prototipler için mevcut varlıklarla çok hızlı UI tasarımı sunar.
17. Çerçeve
Framer, 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 dokümantasyon 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.
Tasarım çerçeveleri ve kitaplıkları
18. Önyükleme
Bootstrap kesinlikle yeni bir araç değil, ancak geliştirmede devrim yarattı ve web üzerinde nasıl bir şeyler inşa ettiğimizi şekillendirmeye devam ediyor. Dikkat edilmesi gereken özellikler arasında, belirli bir kesme noktasına kadar akışkan olan duyarlı kaplar ve kesme noktaları arasındaki sütun sayısını verimli bir şekilde belirlemek için duyarlı .row-cols sınıfları bulunur.
Bootstrap ayrıca, Bootstrap bileşenleriyle çalışmak üzere tasarlanmış kendi açık kaynaklı simge kitaplığına, Bootstrap Icons'a sahiptir.
Kılavuzumuzda en iyi ücretsiz Bootstrap temalarını bulun.
19. Başlatma 4
Bootstrap'i seviyorsanız ancak işin içine dalmak istemiyorsanız, Startup 4 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
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:
div id = "örnek"> p> {{mesaj}} / p> düğme v-on: click = "reverseMessage"> Mesajı Ters Çevir / düğme> / div>
Özel v-on işleyicisine reverseMessage yöntem.İşte JavaScript:
var myApp = new Vue ({el: '#example', data: {message: 'Hello Vue.js!'}, yöntemler: {reverseMessage: function () {this.message = this.message.split ('') . ters (). birleştir ('')}}});
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ı
Pattern Lab, Dave OIsen ve Brad Frost tarafından oluşturulan güzel bir desen odaklı tasarım aracıdır. Tasarımınızı en küçük parçalara (atomlara) ayırmanız ve bunları daha sonra kullanılabilir şablonlara dönüştürülebilecek daha büyük, yeniden kullanılabilir bileşenler (moleküller ve organizmalar) oluşturmak için birleştirmeniz gerektiğini söyleyen Atomik Tasarım kavramına dayanmaktadır.
Özünde, UI bileşenlerini birbirine bağlayan statik bir site oluşturucu olsa da, Pattern Lab'de bundan çok daha fazlası vardır. Dilden ve araçtan bağımsızdır; UI desenlerini birbirinin içine yerleştirmenize ve dinamik verilerle tasarlamanıza olanak tanır; tasarım sisteminizin tam olarak 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, 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 tanıdık gelecektir, böylece insanlar ürününüzü hemen kullanmayı kolay bulacaktır. Bu tasarım sistemine yardımcı olacak birçok araç vardır; onları bulmak için gezinme çubuğundaki Kaynaklar'ı tıklayın.
Sonraki sayfa: Herhangi bir sorunu çözmek için özel web tasarım araçları
