Duyarlı Tasarım İçin En İyi 5 Araç
Bunu söyleyerek başlayayım, bu listedeki herhangi bir noktadan-tıkla tasarım araçlarını dahil etmeyeceğim (Adobe Edge Reflow'u düşünün). Nedeni yeterince basit, herkes için kötü olduğuna inanıyorum; tasarımcılar, müşteriler, kodlayıcılar… herkes acı çekiyor.
Bu programların kod çıktısının kalitesi sorun değil. Tasarımı “çok kolay” hale getirdiği için değil. Çünkü bu programlar ne kadar iyi olursa olsun, onları kullanan insanları her zaman sınırlayacaktır.
Programın ne yapabileceği ile değil, başardıklarını düşündükleri ile sınırlı olacaklar. Bunu düşünürlerse, ortalama kullanıcı muhtemelen PowerPoint ve / veya herhangi bir sayıda baskı tasarım programı gibi araçlarla karşılaştırır ve eski zihinsel yapılara bir kez daha düşer. Orada problem yatıyor. Görsel web yayınlama araçları her zaman eski süreçleri yeni teknolojilere uygulamayı deneyecektir.
Gerçekten web odaklı bir iş akışı, web'in üzerine inşa edildiği temeldeki kavramları ve teknolojileri kucaklayan bir iş akışıdır. Elbette, teknik olarak duyarlı web siteleri oluşturmak için istediğiniz sayıda görsel aracı kullanabilirsiniz, ancak noktayı kaçırıyor olmalısınız.
Bu uyarlanabilir bir düzen ile ilgili değil. Bilgiyi olabildiğince çok insana ulaştırmakla ilgili. Edge Reflow gibi bir programın yapamayacağı bazı şeyler var. Kısacası, kod yazmanız gerekiyor.
Bu nedenle, duyarlı tasarıma yardımcı olacak en iyi araçlar, web teknolojilerini anlamanıza ve kullanmanıza, web sitenizi kapsamlı bir şekilde planlamanıza, daha iyi kodları daha verimli bir şekilde yazmanıza ve duyarlı tasarımlarınızı istemcilere bağlamında test etmenize / sunmanıza yardımcı olan araçlardır.
Açık olanla başlayalım:
1) Tarayıcınız
Hayır, şaka yapmıyorum. Bu, tam anlamıyla sizin en önemli aracınızdır, çünkü web sitenizin tam olarak sizin özel koşullarınızda neye benzediğini gösterir.
Tarayıcıda tasarım yapmanın, Photoshop veya GIMP gibi bir görüntü düzenleyicide tasarlanmasından daha iyi olup olmadığı konusunda çok fazla tartışma olmuştur. Bunu sizin için çözmeme izin verin…
Web sitenizin kullanıcıları göz atmayı Photoshop'ta mı yapacak? Görüntü editörleri güzel resimler yapabilir, gerçek deneyimleri taklit edemez. Görüntüleri düzenlemek için görüntü düzenleyicileri kullanın. Web sitelerini tasarlamak için tarayıcınızı kullanın.
Müşterilerimize alıştıkları hiper-ayrıntılı maketlerden uzaklaşma zamanı geldi. Web değiştikçe ve süreçlerimiz daha akıcı ve iteratif hale geldikçe, devam etmeliyiz.
Her büyük oluşturma motoruyla en az bir tarayıcı yükleyin ve bazı geliştirici uzantıları edinin. Kaynak kodunuza tarayıcınızın gördüğü şekilde bakmaya alışın, çünkü bir süre burada olacaksınız.
2) Google Drive’ın çizim uygulaması
Teknik olarak, herhangi bir vektör tabanlı görüntü editörü, web sitelerinizi ve uygulamalarınızı tel çerçevelendirirken işe yarayabilir. Sitemin masaüstü sürümünü ilk önce tel çerçeve haline getirme, dosyanın bir kopyasını oluşturma, tuvali yeniden boyutlandırma ve buradan gitme eğilimindeyim. Vektörleri kullanmak, hala planlama aşamasındayken öğelerinizi hızlı bir şekilde yeniden boyutlandırmanızı ve yeniden düzenlemenizi kolaylaştırır.
Çizim uygulamasını tercih ederim Google sürücü birkaç sebepten dolayı:
Paylaşma ve ortak çalışma özellikleri: Google, bilgi paylaşımını yalnızca herkesten daha iyi yapar. İçerik içi yorum, eşzamanlı düzenleme ve Hangout entegrasyonu sayesinde, aşığım.
Otomatik kılavuzlar: Her çizim belgesinde, kılavuzlar, belgeye koyduğunuz her nesnenin boyutlarına göre otomatik olarak oluşturulur. Bu, belgedeki tutarlı boyutlu öğeleri tasvir etmeyi kolaylaştırır, bu da benim gibi ızgara takıntılı tasarımcıları için harika.
Bu tel kafesleri müşterilerle paylaştığımda, profesyonel görünümlü tutarlılık büyük bir artı. Ve yine de bu rehberlere kısıtlı değilim. Sizi ızgaraya sınırlamaya çalışan uygulamalar için iyi bir alternatif olarak görüyorum.
Oh, ve bedava. Daha da anlatmalı mıyım?
3) Stil Prototipleri
Stil Fayanslara Dayalı, Stil Prototipleri Müşterilerinize web sitelerinin tipografi, renk ve UI öğelerinin nasıl görüneceğine dair bir fikir vermenize yardımcı olacak bir tarayıcı içi teslim edilebilir. Tarayıcıda görüntülenmesi gerektiğinden, web sitesi oluşturulduktan sonra daha az tutarsızlık olacaktır.
Dahası, Stil Prototiplerinin müşterilerimize UX ve estetik kavramlarını zihinsel olarak ayırmalarına yardımcı olabileceğini söyleyebilirim. Ve gerçekten, müşterilerimize web tasarım sürecini daha iyi anlamalarına yardımcı olan her şey sadece iyi bir şey olabilir.
4) Sorumlu
Responsinator Web sitenizi farklı boyutlarda gösteren basit bir araçtır. Çok basit bir şekilde, farklı cihaz boyutları ve bağlamları taklit eder. Bu araç sizin yararınıza değildir. Web sitenizin daha küçük boyutlarda nasıl göründüğünü görmek ister misiniz? Tarayıcı pencerenizi yeniden boyutlandırın. Daha da iyisi, bazı gerçek mobil cihazları edinin ve bazı gerçek testler yapın.
Bu web uygulaması, müşterilerinizin web sitelerinin masaüstü veya dizüstü bilgisayar monitörü dışındaki bağlamlarda nasıl göründüğüne dair hızlı bir yaklaşım göstermesi için kullanılır.
Yine, aynı işi Sorumlu olarak yapabileceğimiz birçok araç var ve aynı şekilde etkili bir şekilde, sanırım. Bunu seçtim, çünkü kolay algılamak için birkaç cihaz silueti birbiri ardına sunuluyor.
5) Adobe Edge İncelemesi
Şimdi bu senin için. Bir mobil test laboratuvarınız varsa (ve ne kadar çabuk yapabilirseniz, o kadar iyi) Kenar incelemek Tüm cihazlarınızı aynı sayfayı aynı anda görüntüleyecek şekilde senkronize eder. Sayfayı bir cihazda yenileyin ve hepsini yenileyin.
Bu listedeki diğerlerinin aksine, bu ücretsiz değil. Ancak, böyle bir çözüme ihtiyaç duyabilecek kadar mobil cihaz sağlayabiliyorsanız, muhtemelen paraya değer.
Sonuç
Her zaman olduğu gibi, en önemli varlığınız beyninizdir. Bu araçlar ve onlardan hoşlananlar sadece sizin yolunuzda yardımcı olabilir. Bunları seçtim çünkü duyarlı sitelerin tasarlanmasında bana yardımcı olan çok özel işlevler yapıyorlar. Yapabileceklerimi sınırlamıyorlar.
En iyi araçlar gerçekten yoldan uzak olanlardır.
Bu araçları kullanıyor musunuz? Duyarlı tasarım için en iyi 5 aracınız neler? Yorumlarda bize bildirin.
Öne çıkan görsel / küçük resim, araçlar resmi Shutterstock üzerinden.