Tasarımda “Bilim” Yükünüzü Azaltabilecek Uygulamalar

Web tasarımcılarının en sevmediği şey nedir? Muhtemelen kodlama. Ve belki de yakın bir saniye, tüm cihazlar için prototiplemedir. Ve bu tür şeyleri kolaylaştırabilecek her şey, bir tasarımcının işinin yaratıcı yönlerine daha fazla zaman ayırmasını sağlar.

Bunu akılda tutarak, her tasarımcının araç setine potansiyel eklemeler olarak keşfetmesi gereken bir dizi harika yeni uygulama var!

ÖNLEM

Kendi stil kılavuzlarınızı oluşturmanız ve bunları gelecekte başvurmak ve paylaşmak üzere bulutta saklamanız için ne harika bir site. Logolar ve resimler, renk paletleri, tipografi, simgeler ve kendi metin ve medyanız için stil kılavuzu şablonları vardır. Buradaki diğer büyük artı, kendi PDF stil kılavuzlarınızı manuel olarak oluşturmak zorunda olmamanızdır – onları Frontify'da saklarsınız ve indirme, yazdırma ve paylaşma için PDF dosyalarına dönüştürülebilirler. Sürüm oluşturma, tüm eski sürümlerin herhangi bir zamanda yukarı çekilebilmesi için arka planda kalmasını sağlar. Kendi şablonlarınızı kişiselleştirmek için şablonlarıyla başlayabilir veya marka kitabı örneklerini araştırabilirsiniz. Tüm işlevlere API aracılığıyla erişilebilir. Frontify'ın kendi logosunu kullanarak yalnızca bir logo ile neler yapabileceğinize bir örnek:

Bu temel logodur. Frontify, burada "damlaların" anahtar olduğuna karar verdi, ancak logoyu tutarlı tutmaya devam ederek başka birçok şey yapabileceklerine karar verdi. İşte renk değişiklikleri:

Ve işte temel logonun bir varyasyonu örneği:

Bu, benzersiz stil kılavuzları oluşturmak için kullanabileceğiniz tasarım ve renk şablonlarının yalnızca bir örneğidir ve tüm bileşenler birbiriyle değiştirilebilir.

GÖRSEL Besteci

Bu uygulama bir süredir piyasada ve bunu zaten biliyor olabilirsiniz, ancak tasarım seçenekleri paketiyle başka bir uygulama bulmakta zorlanacaksınız. Temelde zorlu planlama ve kodlama görevlerini ortadan kaldırdı. Tasarım mizanpajlarına, tek bir tıklamayla öğeler ekleyerek dakikalar içinde sahip olabilirsiniz. 25 dolarlık fiyat etiketi buna değer. Her şey için düğmeler; çok sayıda animasyon seçeneği, anında paylaşım seçeneği vb. Bu bebekte 40'tan fazla içerik öğesi! Bu gerçekten çok amaçlı bir araçtır! Tüm özelliklerinden ve bu uygulamayı nasıl kullanabileceğinizden emin değilseniz, buradaki eğitim videolarına göz atın.

Sayfalarınızı çok hızlı bir şekilde tasarlamanıza izin veren harika özellikler vardır ve hemen hemen her öğeyi değiştirebilirsiniz. Örneğin, değiştirebileceğiniz önceden tanımlanmış birkaç ızgara öğesi veya kendi ızgaranızı tasarlama seçeneği vardır.

Visual Composer'ın bir dezavantajı varsa, devre dışı bıraktığınızda, yeni bir temaya başlamadan önce kaldırılması gereken çok sayıda küçük kodu geride bırakmasıdır. İşte Visual Composer ile oluşturulmuş bir tasarım örneği.

TASARIM AVI

İlhamınız durduğunda, muhtemelen size harika fikirler verebilecek yeni web siteleri arayarak onu ararsınız. Bu biraz zaman alan bir iş olabilir, öyleyse neden çok daha uygun bir yöntem kullanmıyorsunuz? Design Hunt, bir tür “takas odası”dır, ancak tüm repertuarını günlük olarak değiştirir. Pinterest, Dribble, Designer News, DesignInspiraton ve daha fazlasında bulunan harika yeni tasarımları çizer ve bunları yeni ilham ve fikirler arayan tasarımcılar için yayınlar. Artık her gün bir yere gidebilir ve tamamen yeni bir koleksiyon bulabilirsiniz.

TOOKAPIC

Stok fotoğraf işinde nispeten yeni olan Tookapic, şimdi çoğu ücretsiz, geri kalanı küçük bir fiyata 11.000'den fazla stok fotoğrafa sahip. Bunu, şu anda kullandığınız stok fotoğraf kaynağından daha çok beğenebilirsiniz – olağanüstü renk ve netlik ve gerçekten benzersiz fotoğraflar. Sitelerine erişin ve sahip olduklarına bakın. Şaşırmış olabilirsiniz!

MARVELAP

Bu ücretsiz prototip oluşturma aracı, cep telefonunuzdan veya başka herhangi bir cihazdan maketler çizmenize ve oluşturmanıza ve prototipi hemen görmenize olanak tanır. Buradan, herhangi bir cihazla anında uyumlulukla yeniden düzenleyebilir, değiştirebilir, renk, metin ekleyebilir, formları değiştirebilir ve hemen hemen her şeyi yapabilirsiniz. Projenize isim verdikten sonra hemen ana arayüze gider ve başlarsınız. Bitirdikten sonra, tüm tasarımı önizleyebilir ve her şeyin iyi çalıştığından emin olmak için onunla etkileşime girebilirsiniz.

Bu olağanüstü araç hakkında daha fazla bilgi edinmek için web sitesini ziyaret edin ve demoyu izleyin - kullanım kolaylığı sizi heyecanlandıracak. En iyi özelliklerden biri, herhangi bir yerden (Dropbox ve taslak dahil) ve herhangi bir görüntü türünden görüntü bırakma yeteneğidir. Bu ortak bir projeyse, bir ekip de ekleyebilirsiniz. Marvel'in en büyük dezavantajı, ücretsiz sürümde sınırlamalar olması, bu nedenle kesinlikle yükseltme yapmanız gerekecek. Yine de, bu kullanımı son derece kolaydır - her parçası Justinmind kadar iyidir.

CANLANDIRMA CSS'si

Çok fazla animasyon oluşturuyorsanız, kesinlikle bu aracı isteyeceksiniz. Herhangi bir kod yazmak zorunda kalmadan gerçekten harika özellikler. Kullanıma hazır bir animasyon efektleri kitaplığı vardır - aslında 50'den fazla - ve döngü sayısı ve süre için kolayca özelleştirebilirsiniz. Animasyon, aşırıya kaçmadığınız sürece harika bir etkileşim ve eğlence katar!

Bununla birlikte, gerçekten eksiksiz bir özellik ve seçenek dizisi arıyorsanız, ancak CSS tek başına faturayı doldurmaz. CSS ve JavaScript ile ilgili tartışmalar kesinlikle devam etse de, kesinlikle birlikte kullanılabilecekleri yollar var. Örneğin, tasarlanmış harika bir CSS animasyonunuz var, ancak bir kullanıcı aşağı kaydırırken belirli bir noktaya geldiğinde soldan kaymasını istiyorsunuz. Bunu yapmak için JS eklemeniz gerekecek. CSS'nin sınırlamaları olduğunu ve JS tarafından geliştirilebileceğini anlamak, mevcut araçların akıllıca kullanılmasıdır.

Bununla birlikte, Animate CSS'yi çalıştırmak gerçekten kolaydır. İndirin, CSS'nin yanı sıra jQuery ve istediğiniz diğer bileşenleri ekleyin ve canlandırmaya başlayın. YouTube'da başlamanıza yardımcı olacak harika bir eğitim var.

SOĞUTUCULAR

Renk körüyseniz veya yalnızca renk şemasına meydan okuyorsanız, bu araç sizin için tam bir renk şeması geliştirecek veya nereden başlamak istediğinizi biliyorsanız bir tane oluşturacaktır. Beğendiğiniz bir rengi gördüğünüzde, onu kilitleyin ve ardından tıklamaya devam edin - istediğiniz kadar renk içeren eksiksiz bir şema elde edeceksiniz. Bu, özellikle renk gradyanlarını kullanmak istiyorsanız yararlıdır. Bu araç hakkında gerçekten tartışmalı bir şey yok - onu kullanan tasarımcılar onu seviyor; henüz denemeyenler. Tek dezavantajı? Artık ücretsiz değil ve indirmek için bir iTunes hesabınızın olması gerekiyor.

Renkleri Zorlayanlar için Otomatik Renk Düzeni Oluşturucu

CIRCULUS.SVG

Bu, çok sayıda seçenek, şablon ve benzeri içeren kapsamlı bir araç değildir, ancak burada bir menü tasarlamanın benzersiz bir yolu veya istediğiniz sayıda sayfada birkaç tane var! Tek yapmanız gereken menünüze istediğiniz şeyin özelliklerini girmek. Ardından, onu nasıl oluşturacağınız ve belirli bir sayfaya nasıl yerleştireceğiniz konusunda ayrıntılı talimatlar verilecektir.

Ziyaretçilerin İlgisini Çekecek Küçük Bir Şey

Dairesel SVG, bu tür bir öğe oluşturmak için muhtemelen CSS'den üstündür. İndirdikten sonra 3 seçeneğiniz var: Sektörlerinizi Sketch gibi bir grafik düzenleyicide çizebilir ve ardından bunları SVG olarak dışa aktarabilir, etkileşim ekleyebilir ve gömebilirsiniz; kod ile sektörlerinizi çizebilirsiniz; veya doğrudan uygulamada Circulus oluşturucuyu kullanabilirsiniz.

CSS, dairesel gezinme oluşturmanıza izin verir, ancak birkaç tarayıcı hatası vardır, ayrıca çok fazla iş vardır. Bir dikdörtgenle başlamanız, onu parçalara ayırmanız, ardından bu bölümleri eğip döndürmeniz gerekir. Ve sektörlerinizde simgelerden fazlasını kullanırsanız, daha da zorlaşır.

SVG'yi kullanarak, istediğiniz "pasta dilimlerine" belirli çizgiler ve yay komutları kullanarak istediğiniz şekli çizebilirsiniz - işte bir örnek:

Takozlarınızın her birini çizdikten ve simgenizi ve/veya içeriğinizi yerleştirdikten sonra, onlara katılmanız yeterlidir.

METAFLOP

Aynı eski yazı tiplerinden ve harf stillerinden bıktınız mı? Kendinizinkini yaratın - kodlama gerekmez - sadece tıklayın ve sürükleyin. Metin için benzersiz yazı tiplerini ve stilleri değiştirmek, ziyaretçileri içeriği gerçekten okumaya teşvik edebilir! Bu uygulama o kadar harika ki, saatlerce oynamamakta zorlanacaksınız. Ve bir daha asla tipografinin web tasarımının en az seksi parçası olduğunu söylemeyeceksiniz.

Bu çok basit. Yükseklik, açıklık ve kontrast gibi farklı özelliklere sahip bir dizi slayttan yazı tiplerini özelleştirebilirsiniz. İstediğinizi elde edene kadar ayarlayın ve ardından bir web yazı tipi paketi (ücretsiz) olarak indirin. Ayrıca, aralarından seçim yapabileceğiniz önceden oluşturulmuş yazı tiplerinden oluşan bir kitaplık da bulunmaktadır. Oynamaya devam edin – yazı tasarımcılarının neden “ölmekte olan bir tür” olabileceğini anlayacaksınız.

Benzersiz Yazı Tipleri ve Stillerle Dikkat Çekin

yazı tipi alevi

Bu gerçekten "bloktaki yeni bir çocuk". Fontflame, tasarımcıları yalnızca bir yükten daha kurtarmaya çalışır: gerçekten işe yarayan yazı tipi eşleştirmeleri bulmak. Şu anda sitesinde yayınlanmış 10 eşleşmesi var ancak günlük olarak ekleniyor. Google'ın ücretsiz yazı tipi kitaplığını kullanan eşleştirme örnekleri arasında "Lobster-Asap" ve "Roboto-Open Sans" yer alır. Ek kütüphaneler yakında eklenecektir. Bu siteye bir göz atın - yakında eşleştirmelerde sunacağı çok şey olacak.

FREELANCER PODCAST

Bir uygulama veya araç değil - bu, kaçırmak istemeyeceğiniz tasarımcılar ve geliştiriciler için haftalık bir podcast. Paul Jarvis'in ev sahipliğinde, yeni trendlere, uygulamalara ve araçlara ve çok sayıda gerçekten pratik tavsiyeye erişebileceksiniz.

GÖRÜNTÜDE

İşte diğerlerinde bulunmayan birçok özelliğe sahip harika bir prototip oluşturma aracı. Diğerleri gibi, herhangi bir veya tüm cihazlar için maketinizi oluşturursunuz - istediğinizi seçersiniz. Prototipiniz oluşturulduktan sonra, tüm cihazlarda önizleyebilir ve ardından inceleme için müşterilere veya ekip üyelerine gönderebilirsiniz. Büyük bir artı olan tasarımın kendisi hakkında yorum yapabilirler. In-Vision'ın diğer iki güzel özelliği, bir tasarımın önceki tüm sürümlerini görmenizi sağlayan bir geçmiş modu ve tasarımcıların tüm özelliklerden memnun olana kadar üzerinde çalışabilecekleri 3 demo projesidir.

In-vision'ı Marvel uygulamasıyla karşılaştırırken, önemli farklılıklar muhtemelen şunlardır:

1. InVision, Marvel'den daha fazla özelliğe sahiptir, ancak bu aynı zamanda onu daha karmaşık hale getirir. Örneğin, daha fazla canlı işbirliği özelliğine, açıklama ekran görüntüleri için bir araca ve harika geçmiş öğelerine sahiptir.
2. Marvel'in bir iOS uygulaması var ve şu anda Android ve iPad uygulamaları üzerinde çalışıyor – InVision'da bunlara sahip değil.
3. InVision muhtemelen daha büyük bir ekip için daha iyidir, Marvel ise solo veya küçük ekipler için daha iyidir.

Bu uygulamaların her ikisinin de kullanıcılarından gelen yorumlar, hangisinin hangi amaçlar için en iyi olduğuna daha fazla ışık tutacaktır.

Muhtemelen diğer tasarımcıların duymak isteyeceği favori uygulamalarınız vardır. Bize bunların ne olduğunu ve size sanatçı olmanız için nasıl daha fazla zaman verdiklerini anlatın.