Tasarımcı Araçlarının Büyük Derlemesi
Web tasarımcıları , belirli bir tasarım hakkındaki düşüncelerini nihai tasarımın hatalarını ayıklamaktan çıkarmak için her şeyi yapabilmeleri için kendilerine sunulan çok çeşitli araçlara sahiptir.
Ama o kadar çok araçla, hangisinin gerçekten faydalı olduğunu ve hangisinin zamanınızı harcayacağını nasıl belirliyorsunuz?
Web tasarımcıları için en iyi ve en kullanışlı araçlardan bazılarının büyük bir listesini derledik.
Listeden bilerek bırakılan pek çok tasarımcının zaten kullandığı yaygın araçlar (Dreamweaver veya Panic'in Coda, Photoshop veya GIMP'i ve hemen hemen her tasarımcı kendi araç setinde bulunan benzer yazılım programları gibi).
Bunlar size zaman kazandıracak, sizi daha etkili bir tasarımcı haline getirecek, tasarım sürecini basitleştirecek veya hızlandıracak ya da hayatınızı kolaylaştıracak araçlar.
Çevrimdışı Araçların Derlenmesi
Kullanışlı web tasarım araçlarının çoğu, yalnızca çevrimiçi araçlara odaklanır.
Ancak, tasarım söz konusu olduğunda seçeneklerinizi açmak için kullanabileceğiniz birkaç kullanışlı araç var. Bu şeyler kararsız müşterilerle çalışmak da dahil olmak üzere bazı görevleri kolaylaştırır.
Grafik Tabletleri
Grafik tabletleri (bazen çizim tabletleri, grafik pedleri veya sayısallaştırma tabletleri olarak da anılır), bir web tasarımcısının cephaneliğinde inanılmaz derecede faydalı bir araçtır. Çoğu tasarımcı bir fare ile oldukça ustaca çizebilirken, bir tablet onu daha kolay ve daha hızlı hale getiriyor.
Tabletlerin çoğu iki temel parçadan oluşur: tabletin kendisi ve kalemi (veya kalemi). Birçoğu ayrıca bir pakete (bir fare ile benzer şekilde çalışır, ancak tabletin kendisi fare pedi veya masanız yerine) gelir. Tabletin ana düşüncesi büyüklüktür, kalemin ana düşüncesi ise basınca duyarlılıktır.
Tabletlerin kendileri yaklaşık 4 ″ x 5 ″ ila 19 ″ x 13 ran arasında değişen boyutlarda mevcuttur. Tabii ki, tablet ne kadar büyükse, o kadar pahalı olacak. Çoğunlukla, web tasarımcıları çok sayıda örnek çalışma yapmayı planlamıyorsa (ve daha sonra orta boyutlu bir tabletten kaliteli sonuçlar elde etmek tamamen mümkün değilse) spektrumun küçük ucundaki tabletlerle uzaklaşabilirler.
Ve daha küçük tabletler daha portatiftir ve onları her zaman masasına bağlı kalmak istemeyen tasarımcılar için uygun hale getirir.
Kalemler daha gerçekçi bir deneyim vermek için basınca duyarlıdır . Ortak duyarlılıklar 256 seviyeden 2.048 seviyesine kadar değişmektedir. Duyarlık seviyesi ne kadar yüksek olursa, aslında bir kalem ve kağıt kullandığınız gibi hissedeceksiniz.
Popüler Grafik Tabletleri
Wacom Muhtemelen orada en popüler tablet üreticisidir. Tüketiciler ve hobileri hedefleyen Bambu (Bambu El Sanatları ve Bambu Eğlence ürünlerini içeren) dört farklı ürün hattına sahipler; Graphire, Bluetooth tabletleri; Intuos, yaratıcı profesyoneller için orta sınıf çizgileri; ve Cintiq, bir “ekran üzeri” deneyim için bir tableti bir monitöre dahil eden yüksek-uç çizgisi (biri 21 inç ekrana sahip).
Aiptek Yalnızca 50 ABD dolarından başlayan düşük maliyetli tabletler oluşturur. 130 ABD dolarından daha düşük bir 12.1 ″ USB tablet sunuyorlar (karşılaştırılabilir büyüklükteki bir Wacom tablet için 469 ABD Doları ile karşılaştırıldığında). Aiptek'in en ilginç teklifi, gerçek bir kalemle tabletin üstüne bir parça kağıda çizmenizi ve yaptığınız her şeyi kaydetmenizi sağlayan My Note Premium (170 ABD Doları) 'dır. 100 kadar yazılı sayfa için yeterli bellek var ve kapasitesini genişletmek için bir SD kart yuvası ile birlikte geliyor. Ve sadece bir toplantıda not almak için kullanmak istiyorsanız, 4 adet AAA pil ile çalıştırılabilir, yani dizüstü bilgisayarınızı yanınızda getirmeniz gerekmez.
UC-Mantık diğer büyük grafik tablet üreticisidir. Ürünleri tabletler için orta fiyat aralığında yer alıyor ve 9 ″ x12 ″ tablet (PF1209-Pro) 250 dolara yaklaşıyor. Sadece 40 ABD doları ile başlayan tabletler mevcut.
Ruh Kurulları
Ruh kurulları (ilham panoları olarak da adlandırılır), istedikleri hakkında net bir fikre sahip olmayan müşterilerle çalışan tasarımcılar için harika bir araçtır.
Ruh kurulları genellikle proje için tasarım öğeleri içeren bir kolaj şeklini alırlar . Dahil edilen elemanların örnekleri, tipografi örnekleri, renk şemaları, belirli grafik örnekleri veya sitenin ziyaretçilere vermesi gereken izlenim için tasarımcının vizyonunu yansıtan genel “duygudurum” öğeleri olabilir.
Mood panoları, müşterilerin bir odayı veya bir evin tamamını yeniden dekore etmek için fikirlerini göstermek için sıklıkla iç tasarım alanında kullanılır. Moda endüstrisinde de bir çizgi ya da sezon için ilham ve yönlendirme olarak kullanılırlar. Ama onlar sadece grafik ve web tasarımcıları için değerlidir.
Birlikte çalıştığınız istemci türüne bağlı olarak, organik bir şekilde örtüşen örneklerle gevşek bir kolaj oluşturabilirsiniz. Müşteriniz yaratıcı bir alanda ise veya yaratıcı sürece aşina ise, bu tür bir ruh hali kurulu oldukça iyi çalışabilir.
Diğer taraftan, müşteriniz daha kurumsal veya resmi bir çevrede kullanılıyorsa, daha organize bir yönetim kurulu oluşturmak muhtemelen daha uygundur.
Renk şemasını, özel tasarım öğelerini, tipografiyi ve duygudurum panonuzun diğer bölümlerini ayırmak için başlıkları kullanın.
Bir projenin gidebileceği yönler için birden fazla fikriniz varsa, birkaç farklı modeme panosu oluşturmak , müşteri geri bildirimi almak ve kendi fikirlerinizi daha da iyileştirmek için harika bir yol olabilir.
Bir müşteriyi göstermek için iki veya üç farklı örnek oluşturmak, gerçek bir site modelinde saatler veya günler harcamadan müşterinizden daha fazla yönlendirme için değerli olabilir.
Ve bu gerçekten tasarım sürecinizde ruh hallerini kullanmanın en büyük faydası. Bir duygudurum panosu genellikle bir site maketinden çok daha az zaman alır .
Sadece reddedilecek bir tasarıma saat ayırmadan önce kararsız veya güvensiz bir müşteriden daha fazla geri bildirim almak için ruh panoları kullanmak, herkesi mutlu eder.
Kendi Moodboardlarınızı Oluşturmak için Kaynaklar
Hakkında bir makale yayınladık Neden Ruh Kurulları Matter Geçen yılın sonunda. Makale, ruh kurulu oluşturma ve bunları neden kullanmak istediğinizin temellerini kapsamaktadır. Bu harika bir başlangıç noktası.
Couch denen bir video eğitimi var Etkin Bir Ruh Kurulu Oluşturmak . Yaklaşık yedi dakika uzunluğunda ve projeler için dijital bir ruh hali oluşturmanın temellerini kapsıyor.
Flickr bir İlham Kurulları Birden fazla tasarım disiplininden ruh hali ve ilham panosu görüntülerini toplayan havuz. Biraz ilham almak için iyi bir yer ya da başkalarının ruh halindeki yönetim kurullarına nasıl yaklaştıklarına dair örnekleri kontrol edin.
Çevrimiçi Araçların Derlenmesi
Çevrimiçi web tasarım araçları bir düzine bir düzine vardır. Onları gerçekten göze çarpan olanları bulmak için sıralama yapmak, onları kullanarak tasarruf etmeyi beklediğinizden daha fazla zaman alabilir.
Ancak aşağıda tek tek sayfa öğelerini daha kolay oluşturmak için tipografi, CSS, AJAX ve Javascript, renk seçimi ve araçları için en iyi araçları bulduk.
Yine, bunlar yaptıkları için eldeki en iyi araçlardan bazıları, bu yüzden onlarca farklı aracı test etmek için bir sürü zaman harcamak zorunda kalmayacaksın.
Tipografi Araçları
Web sitenizin tasarımlarında tipografi ile deney yapmak için bir dizi çevrimiçi araç var. Bazıları farklı yazı tiplerini yan yana karşılaştırmanıza izin verir. Bazıları her seferinde bir stili örneklemenize izin verir. Ve yine başkaları size farklı önerilen yazı tipi yığınlarını gösterir.
Diğer kullanışlı web tipografi araçları, piksel boyutlarını em birimlerine ve çeşitli Lorem Ipsum'a ve diğer kukla metin oluşturucularına dönüştürme uygulamaları içerir. Her şeyden önce, bir web tasarımcısının sahip olabileceği her türlü ihtiyaç için tipografi araçları var.
Typetester
Typetester , üç yazı tipini yan yana karşılaştırmanıza izin verir.
Kendi bilgisayarınızdan herhangi bir yazı tipini seçebilir veya yazı tiplerini ortak sistem yazı tipleri ve web güvenli fontlar menüsünden kullanabilirsiniz. Renk, lider, izleme, boyut ve diğer stil seçeneklerini değiştirmenize de olanak tanır.
Farklı fontlar için hangi fontların kullanılacağına karar vermeye çalışırken veya kendi font yığınlarınızı derlerken bile (çok sayıda fontu yan yana karşılaştırmanıza olanak tanıdığından) harika bir araçtır.
CSS Tipi Set
CSS Tipi Set, değiştirmek istediğiniz metni bir kutuya yapıştırmanıza, kaydırıcıları ayarlamanıza ve diğer biçimlendirme seçeneklerini seçmenize ve ardından oluşturulan CSS'yi kopyalamanıza olanak tanır.
Paragraflardan baş etiketlerine kadar ihtiyacınız olan herhangi bir metni biçimlendirmenin hızlı ve kolay bir yoludur .
Seçenekler arasında metin rengi, önde gelen, izleme, temel kaydırma, metin süslemeleri, hizalama ve daha fazlası bulunur.
Daha iyi CSS Yazı Yığınları
Geleneksel bir araç olmasa da, bu makale genel olarak CSS'de kullanılan standart yazı tipi yığınlarına bir dizi alternatif sunmaktadır.
Kendi yazı tipi yığınlarınızı oluşturmaya yönelik yönergeler sunmanın yanı sıra, bu makale ayrıca kullanabileceğiniz çok çeşitli örnek yığınları sağlar . Tipografi seçeneklerinden biraz sıkıldığınızı hissettiğinizde mükemmel bir kaynak.
HTML Ipsum
Çoğu standart Lorem Ipsum jeneratörü çevrimiçi olarak size bir metin bloğu verir ve başka bir şey vermez. Ve sadece biraz boşluk doldurmaya çalışıyorsanız bu harika.
Ancak HTML-Ipsum size temel HTML etiketleriyle (paragraf, kafa, sırasız listeler, vb.) İşaretlenmiş bir metin verir , böylece tüm farklı öğelerin birbiriyle nasıl etkileştiğini görebilirsiniz. Bu büyük bir zaman çizelgesi.
PXtoEm.com
PXtoEM.com tam olarak söylediklerini yapar: piksel boyutlu fontları em boyutlu fontlara dönüştürür .
Size verdiği seçenekler, onu gerçekten etkileyici ve esnek bir araç haline getiriyor.
Temel gövde yazı tipi boyutunu seçebilir ve tarayıcınızın varsayılan yazı tipi boyutunu temel alarak dönüşüm elde edebilirsiniz (örneğin, temel yazı tipi yüzdesini% 62.5'e ayarladıysanız, 10 piksel boyutunun 1em'e eşit olmasını sağlayabilirsiniz). varsayılan boyutunuz).
Typechart
Typechart , çeşitli web güvenli fontlara göz atmanıza ve hem Windows hem de Mac sistemlerine nasıl bakacaklarını görmenizi sağlar.
Yazı tiplerini, serif veya sans-serif veya vurgulu olsun, boyuta göre bulabilirsiniz. Sadece web güvenli fontları içerir, bu yüzden sunulan seçenekler sınırlıdır. Ama temel tipografi için, bolca ilham veren harika bir araçtır.
Ayrıca, sayfadan ayrılmadan her stil için CSS'yi kopyalayıp yapıştırabilirsiniz.
Tipik Saygısız
Flipping Typical, mevcut projeniz için doğru yazı tipini seçmeyi kolaylaştırmak için bilgisayarınızda bulunan yaygın yazı tiplerini ızgara biçiminde görüntülemenizi sağlar.
Bu sadece standart web güvenli yazı tiplerini kullanmak istemediğinizde ve daha fazla seçenek görmek istediğinizde harika bir araçtır.
Bilgisayarınızda yüklü birkaç yüz yazı tipi arasından seçim yapmak istemiyorsanız ve sadece daha popüler olanları görmek istiyorsanız özellikle kullanışlıdır.
CSS Araçları
HTML olarak web tasarımında CSS neredeyse önemlidir. Ayrıca, CSS temizleyicinizi daha iyi, daha yalın, daha etkili ve genel olarak daha iyi hale getirmek için yüzlerce araç vardır, bu da size stil sayfalarınızı manuel olarak mükemmelleştirmek için gereken zaman ve çabayı sağlar.
Siteleriniz için yükleme süresini hızlandıran stil sayfalarınızı sıkıştırmak, otomatik bir çevrimiçi araç kullanarak basitleştirilir. Yinelenen beyanları da ortadan kaldırmak için araçlar mevcut.
Hile sayfaları, sabah kahve içmeye başlamadan önce, CSS'nin temel öğelerini parmaklarınızın ucunda tutar ve kısa el işaretlemenizin hangi sırayla olması gerektiğini hatırlamakta zorlanırsınız.
Bu araçların çoğu, CSS'nizi temizlerken harika bir iş çıkarırken, orijinalinizin yedeğini aldığınızdan ve oluşturulan son ürünü test ettiğinizden emin olun. Bazen bir temizleyici veya kompresör, sitenizden ayrıldıktan sonra gerekli olan bir şeyi kaldıracaktır.
CSS SuperScrub
CSS SuperScrub , stil sayfalarınızın karmaşıklığını ve boyutunu önemli ölçüde azaltmayı hedefler.
Gereksiz çağrılardan kurtulur, gereksiz içeriği dışarı çıkarır ve daha sonra düzenlemeyi kolaylaştırmak için kalan öğeleri gruplandırır.
Stil sayfanızdaki tüm boşlukları kaldırmak veya parantez açmadan önce yeni bir satır eklemek için birkaç seçenek vardır.
Kod güzelleştirici
Code Beautifier , CSS dosyalarınızı optimize eder ve temizler .
Metninizi biçimlendirmek, renkleri sıkıştırmak, özelliklerinizi sıralamak, tüm seçicilerinizi küçük harfe dönüştürmek, özelliklerinizi büyük veya küçük harfe dönüştürmek ve kullanmak istediğiniz sıkıştırma düzeyini seçmek de dahil olmak üzere çok sayıda seçenek sunar.
CSS'nizi kopyalayıp yapıştırabilir veya CSS dosyanız için bir URL sağlayabilirsiniz.
CSS Sürücüsü
CSS Sürücü, temel bir CSS kompresörüdür .
CSS'nizin ne kadar sıkıştırılmasını istediğinizi (hafif, normal veya süper kompakt) ve yorumları nasıl ele almasını istediğinizi ayarlayabilirsiniz (bunların çıkarılıp çıkarılmayacağı).
Belirli karakterlerin etrafındaki boşlukları kaldırmak, sekmeleri kaldırmak, yeni satırları kaldırmak ve daha fazlası dahil olmak üzere size daha fazla seçenek sunan gelişmiş bir mod da bulunmaktadır.
CSS Yedeklilik Denetleyicisi
Bazen bir siteyi tasarlama sürecinde, son biçimlendirmeye dönüştürmeyen CSS seçicileri kurabilirsiniz.
Bu seçiciler, stil sayfalarınızı daha hızlı ve daha sonra düzenlemeyi daha zor hale getirmekten başka bir şey yapmaz.
CSS Redundancy Checker, hangi seçicilerin kullanılmadığını görmek için stil sayfanızdan ve HTML sayfalarınızın her birine gider ve ardından bunları kaldırır .
Stil sayfalarınızda gereksiz seçici kullanabileceğinizi düşünüyorsanız, bu harika bir araçtır.
CSS Mülk Dizini
CSS Özellik Dizini , her CSS özelliğini alfabetik olarak listeler .
Dahil edilen özelliklerden herhangi birine tıkladığınızda, varsayılan değer, izin verilen değerler ve bir üst özellikten miras alınıp alınmadığı ile ilgili bir tanım ve bilgiye ulaşırsınız.
CSS Kısa Kılavuzu
Kestirme CSS özelliklerinin kullanılması , CSS dosyalarınızı uzun el özelliklerinden daha küçük yapar .
Ama tüm farklı elementlerin hangi farklı özelliklerin yerine geçtiğini hatırlamanız, özellikle yaptığınız her tasarımda kullanamayacağınız şeyler için bir baş ağrısı olabilir.
Ayrıca, varsayılan özellik değerleri hakkında bilgi içerir, böylece bir özelliği dışarıda bırakmayı seçerseniz, değerin ne olacağını varsayacaksınız.
Renk Araçları
Web sitenizin tasarımları için doğru renkleri seçmek, tüm tasarım sürecinde yaptığınız en önemli kararlardan biri olabilir.
Bazen, önceden tanımlanmış bir renk şemasıyla (örneğin bir müşteri zaten marka renkleri oluşturulduğunda olduğu gibi) bir tasarıma girer veya hangi renkleri kullanmak istediğimizi hemen öğreniriz. Diğer zamanlarda tasarım için kendi paletimizi yaratmakta özgür olabiliriz.
Sıfırdan bir renk şeması oluşturuyorsanız, renk paleti jeneratörleri ve galerileri çok yardımcı olabilir.
Zaten bir renk düzeniniz varsa, erişilebilirlik ve sitenin hangi kısımlarında hangi renklerin kullanılacağı gibi dikkate alınması gereken başka hususlar da vardır.
Fakat bu kararlara da yardımcı olacak araçlar var. Aşağıda, renk düzenlerini yönetmek için kullanılabilecek en iyi araçlardan bazıları verilmiştir.
Colorblind Web Sayfası Filtresi
Erkek nüfusun% 7-10'u arasında bir miktar renk körlüğü olduğu göz önüne alındığında Vikipedi ), sitelerinizin bu popülasyona hala erişilebilir olduğundan emin olmak kötü bir fikir değildir.
Bu araç, tasarımlarınızın birkaç farklı renk körlüğü bozukluğuna sahip insanlara nasıl görüneceğini gösterir. Sonuçları sitenizin tamamı için görüntüleyebilir veya sonuçların sonucunu hariç tutabilirsiniz.
Ayrıca, renk körü güvenli bir renk seçim aracına bir bağlantı sağlar.
Web siteniz için Eşleşen Renkleri Bul
Bu renk paleti aracı , seçtiğiniz herhangi bir renkle koordineli renkler bulur .
Önceden tanımlanmış seçeneklerinden bir renk seçebilir veya tamamlayıcı, bölünmüş tamamlayıcı, üçlü, dörtgenli, analog veya tek renkli renk şemalarına dayalı olarak paletleri eşgüdümlü hale getirmek için herhangi bir altıgen veya RGB renk değeri girebilirsiniz.
Sağlanan renkler yoğunluğa benzer, ancak bu, tasarımlarınız için renk paletleri oluşturmak için gerçekten bir başlangıç noktasıdır.
Renk Paleti Üreticisi
Fotoğraflar, tasarım ilhamı arayan harika yerlerdir. Bu araç seçtiğiniz herhangi bir görüntüden bir renk paleti oluşturabilir (sadece resmin URL'sini girebilirsiniz).
Sağladığınız resme göre hem donuk hem de canlı renk şemaları sağlar.
Herhangi bir görüntüyü çevrimiçi kullanabilmek gerçekten bu aracı değerli kılar; çünkü bir görüntüyü indirmek ve daha sonra bir şema oluşturmak için bir şemaya yeniden yüklemek gibi bir siteye yeniden yükleme yapmak (veya indirmek ve daha sonra el ile oluşturmak için bir grafik programında açmak) bir renk paleti).
Kuler
Adobe'nin Kuler renk paleti galerisi, daha iyi renk paleti galerilerinden biridir .
Kuler kullanıcıları tarafından sunulan 10.000'den fazla renk paletine göz atabilir veya bunları arayabilir ve daha sonra referans almak için favorilerinizi indirebilir veya kaydedebilirsiniz.
Kuler ayrıca, sürgülerde renk seçmenizi veya HSV, RGB, CMYK, LAB veya hex renk değerlerini temel alan çok güçlü bir palet oluşturma aracı içerir.
Baz renk olarak herhangi bir rengin ayarlanması, çevreleyen renkleri tamamlayacak şekilde değiştirecektir.
COLOURlovers
COLOURlovers başka bir harika renk şeması galerisi .
800.000'den fazla renk şemasını (sayfa başına 20 şema ve 43.200'den fazla sayfa şeması) arayabilirsiniz. Paletlere ek olarak, paletlere göre ayrı ayrı renkleri ve desenleri de arayabilirsiniz.
COLOURlovers'ın en kullanışlı özelliklerinden biri de, önceden tanımlanmış bir renk şemasına veya anında oluşturduğunuz birine dayalı olarak kendi kalıplarınızı oluşturmayı sağlayan desen oluşturma aracıdır.
Ticari işler için kullanmak istiyorsanız, yalnızca desenin telif hakkı sahibiyle iletişim kurduğunuzdan emin olun.
100 Rastgele Renkler 2.0
Tasarımlarınızdan birisinin renk şemasına nereden başlayacağına dair hiçbir fikriniz yoksa, 100 Rastgele Renkler 2.0 doğru araç olabilir.
İsminin söylediği şeyi yapar: Onları, onaltılık değerleri de dahil olmak üzere 100 rastgele renkle sunar .
Ve ilk 100'de bir şey bulamazsanız, yenilemeye basabilir ve yepyeni bir set verebilirsiniz!
Bireysel Eleman Araçları
Siteleriniz için düğmeler, arka planlar, formlar ve diğer tasarım öğeleri oluşturmanın hızlı ve kolay olmasını sağlayan çok sayıda jeneratör var.
Bunlardan bazıları sadece hile, ama sadece bir Web 2.0-ish düğmesi veya basit bir çizgili arka plan gibi bir şey hızlı bir şekilde oluşturmak istiyorsanız, diğerleri çok yardımcı olur.
Form oluşturma araçları, özellikle müşterilerinizin kendi yönetim çalışmalarını kendi formlarında yapabilmelerini istiyorsanız, çok yardımcı olabilir.
Bu araçları kullanan en az birkaç tasarımcıyı biliyorum, böylece form veritabanına erişmek veya müşterileri için formları düzenlemek için özel, basitleştirilmiş bir arayüz oluşturmak zorunda kalmazlar. Özellikle daha karmaşık formlar oluşturmak için harika bir zaman tasarrufu.
Wufoo
Wufoo, 80'den fazla form şablonu ve renk şeması sunan ve aynı zamanda müşterileriniz için özel formlar oluşturmak için tam kontrol sağlamanıza olanak veren bir HTML form oluşturucusudur.
Şablonlar, standart web formları oluşturmayı (kayıt sayfaları veya iletişim formları gibi) daha hızlı ve daha kolay hale getirir.
Gönderilen formlar, müşterilerinizin özel bir arabirim oluşturmanıza gerek kalmadan istemcilerin yazdırabilmelerini, bireysel girişleri e-posta ile göndermelerini, arama yapabilmelerini ve diğer gelişmiş işlevleri gerçekleştirmelerini kolaylaştıran bir veritabanında otomatik olarak toplanır.
Çevrimiçi sipariş formları oluşturmak ve Authorize.net, PayPal veya Google Checkout ile entegre etmek için Wufoo'yu bile kullanabilirsiniz.
BgPatterns
BgPatterns, çok çeşitli farklı yinelenen öğeleri kullanarak döşemeli desenler oluşturmanıza olanak tanır.
Arka plan renginizi, tuval dokusunu ve desenin açısını seçebilirsiniz. Önizlemek için oluşturduğunuz arka planları BgPatterns sitesine uygulayabilir ve ardından görüntüyü sonlandırdıktan sonra indirebilirsiniz.
Başkaları tarafından oluşturulan desenlere de göz atabilirsiniz. Basit, kiremitli arka planlar oluşturmanın en hızlı ve kolay yolu.
Şerit Oluşturucu 2.0
Bir web sitesi için tekrar eden çizgiler oluşturmak zaman alıcıdır.
Tabii ki, kullanabileceğiniz ortak çizgiler için şablonlar yaratabilirsiniz, ancak bir proje için bir pin çizgisi, diğeri için geniş bir şerit ve diğeri için garip bir açıda ne isterseniz? Yakında bu şablonlar artık onu kesmiyor gibi görünüyor.
Stripe Generator 2.0, gölgeler ve degradeler olsun ya da olmasın , istediğiniz herhangi bir genişlikte ve istediğiniz herhangi bir altı renk kullanarak, çeşitli açılarda şeritler sunar.
Ayrıca başkalarının inşa ettiğini görebileceğiniz bir şerit galerisi de var.
Tartan Maker
Çizgili arka planlar oluşturuyorsanız, zaman harcıyorsanız, ekose arka planlar oluşturmak çok büyük bir baş ağrıyor.
Tartan Maker'ın devreye girdiği yer burası. İplik boyutunu, deseniniz için renkleri ve açıyı seçin ve otomatik olarak oluşturur.
Tasarımlarınızı tam ekran önizleyebilir ve ardından dosyayı indirebilirsiniz.
Pixelknete'nın Arka Plan Dotter
Bu arka plan jeneratörü, sayfa boyunca hareket ettikçe giderek daha küçük noktalara sahip modern noktalı bir arka plan oluşturur.
Bir degrade arka plan için iki nokta rengini ve iki rengi seçebilirsiniz (veya katı bir arka plan için sadece tek bir renk).
Desenin yüksekliğini de belirtebilirsiniz (varsayılan değer 700 pikseldir). Oluşturulan arka plan yatay eksende tekrarlar.
Düğme Üreticisi Olarak
Bu sayfadaki kötü tercüme edilmiş metni göz ardı ederseniz, bunun mevcut en basit düğme üreticilerinden biri olduğunu göreceksiniz. Düğmelerinize metin, farklı degradeler, çizgiler, resimler ve daha fazlasını ekleyin.
Düğme ve kenarlık renklerini, genel boyutu (kaydırıcıları veya metin alanlarını kullanarak) ve kenar kalınlığını ve düğmenin ne kadar yuvarlandığını seçebilirsiniz.
Çizgiler eklerseniz, renk, şeffaflık, kalınlık, şeritler ve açı arasındaki boşluk gibi birçok seçenek sunulur.
Bu kesinlikle orada en tam özellikli düğme üreteci.
Button Maker
Bu düğme üreteci, iki tonlu 80 × 15 piksel düğmeler kolayca oluşturmanıza olanak tanır.
Düğme renklerini, kutuların arasındaki bölmenin nerede olması gerektiği kenarlık renklerini seçin ve her taraf için metni girin, işte bu kadar!
Bu özelliklerle yüklü olmayan araçlardan biridir, ancak kusursuz ve kusursuz bir şekilde yapmak için tasarlandığı şeyi yapar.
AJAX ve JavaScript Araçları
Hepimiz Ajax'ın sitenize bir ton işlevsellik katabileceğini biliyoruz. Basit bir resim galerisi, interaktif bir iletişim formu eklemek veya tüm bir web uygulaması oluşturmak istiyorsanız , Ajax size yardımcı olacaktır.
Ama sıfırdan başlayarak, özellikle Ajax'a nispeten yeniyseniz, göz korkutucu olabilir. Kendinizi bir profesyonel olarak görseniz bile, projelerinizin her biri için boş bir sayfa listesiyle başlamak zaman alabilir.
Ajax gelişimini hızlandırmak için birçok araç var. Komut dosyası koleksiyonlarından çerçevelere ve belirli öğe üreticilerine kadar, aşağıdaki araçlarda size daha etkili bir geliştirici sağlayacak olası bir şey olabilir.
Ajaxload
Ajaxload, Ajax yükleyici simgeleri oluşturmak için bir jeneratördür . Aralarından seçim yapabileceğiniz bir ton farklı simgeler var.
Tek yapmanız gereken, ön plan ve arka plan renklerini ayarlamak (ya da şeffaf bir arka plan) ve sonra oluşturulan komut dosyasını indirmektir.
Hızlı ve kolay ama sizi birkaç dakika (veya daha uzun) kodlamaya karşı korur!
Mini AJAX
Mini Ajax, indirilebilir Ajax ve DHTML betiklerinin bir galerisi .
Modal pencerelerden slayt gösterilerine, daha gelişmiş komut dosyalarına (takvim ve tüm proje yönetim araçları gibi) kadar her şeyi içerir.
Bireysel Ajax elementlerini bulmak ya da sadece ilham almak için harika bir başlangıç noktasıdır.
Pek çok script için demolar mevcut ve hepsi orijinal kaynaklarından indirilebilir.
mooTools
MooTools bir Nesne Yönelimli JavaScript çerçevesidir . Kesinlikle yeni başlayanlar için tasarlanmamıştır, ancak çapraz tarayıcı uyumlu olan esnek, güçlü Ajax uygulamaları yazmanıza izin verebilir.
Aynı zamanda standartlara uygun ve inanılmaz derecede iyi belgelenmiştir.
Çekirdek oluşturucuya ek olarak, bir ton eklenti de mevcut. MooTools, basit görüntü galerilerinden kullanıcı arayüzlerini tamamlamak için kullanılabilir.
jQuery
jQuery, çeşitli JavaScript işlevlerini basitleştiren bir JavaScript kütüphanesidir .
Bununla birlikte, bu özel aracın en iyi parçalarından biri, jQuery için zaten mevcut olan eklentilerin sayısıdır.
Basit animasyonlardan formlara, widget'lardan gelişmiş kullanıcı arabirim öğelerine kadar her şey için hazır eklentiler var.
Muhtemelen JavaScript veya Ajax ile yapmak isteyebileceğiniz hemen hemen her şey için yapılmış bir eklenti veya en az bir tane kendi oluşturmak için temel olarak kullanmak için bir eklenti var.
Script.aculo.us
Script.aculo.us, bir animasyon çerçevesi, Ajax denetimleri, DOM yardımcı programları ve daha fazlasını içeren bir JavaScript kullanıcı arabirim kitaplığıdır .
Apple, CNN, Basecamp ve Ruby on Rails tarafından kullanılıyor. Prototip Çerçeve üzerine inşa edilmiştir.
Script.aculo.us wiki dosyasında, kullanmaya başlamanızı kolaylaştıran kapsamlı belgeler var.
Çevrimiçi JavaScript Sıkıştırma Aracı
JavaScript dosyalarınızı sıkıştırmak , bunların daha hızlı yüklenmesini, bant genişliğinizden daha azını tüketmesini ve sunucunuzda daha az yer kaplamasını sağlar. Bu araç sıkıştırma işlemini kolaylaştırır.
Sadece JS dosyalarını kopyalayıp yapıştırın (veya bunları yükleyin) ve daha sonra Minify veya Packer kullanarak sıkıştırmak isteyip istemediğinizi seçin.
Temizleyici, daha verimli bir kod otomatik olarak tükürür. Sadece sonuçları iyice test ettiğinizden ve orijinal dosyanızın bir yedeğini aldığınızdan emin olun.
JavaScript Beautifier
JavaScript'iniz istediğinizden biraz daha karmaşıksa (veya çok kötü biçimlendirilmiş olduğu için deşifre etmek neredeyse imkansızsa), daha sonra okumak ve düzenlemek için daha kolay , temiz, tutarlı biçimde biçimlendirilmiş komut dosyaları almak için bu güzelleştirici üzerinden çalıştırın.
Kullanılan ayarlar en az düzeydedir, ancak paketleyicileri algılamak ve satır sonlarını korumak isteyip istemediğinizi girintiler için kaç boşluk kullanacağını seçebilirsiniz.
Yine, yeni kodunuzdaki herhangi bir sorun olması durumunda son kodu test ettiğinizden ve bir yedeklemeyi elinizde tuttuğunuzdan emin olun.
Browsershots
Ne yazık ki, farklı tarayıcılar sitelerini biraz farklı şekillerde işlemektedir. Bu, özellikle müşterileriniz tek bir tarayıcı kullanıyorsa ve tamamen farklı bir tane kullanıyorsanız, büyük bir baş ağrısı olabilir.
Sonunda görünmeyen şeyleri görüyorlarsa (veya tersi), her iki tarafta da problem yaratabilir.
Bilgisayarınıza her zaman birden fazla tarayıcı yükleyebilirsiniz, ancak a) bu disk alanı kaybıdır ve b) İşletim sisteminiz için uygun olmayan tarayıcılar nelerdir? Bu nerede Browsershots içeri gelir.
Minefield ve Epiphany gibi açık tarayıcılar dahil olmak üzere, hemen hemen her büyük tarayıcıdan seçim yapabilirsiniz.
BrowserShots sadece görüntülemek için seçtiğiniz tarayıcıların ekran görüntülerini gösterir , böylece istediğiniz kadar çok veya az seçebilirsiniz.
Sınamak için seçtiğiniz tarayıcıların daha uzun olduğunu unutmayın. Ancak, BrowserShots'un ayarlandığı yol, yalnızca sayfayı işaretleyebilir ve sonuçlarınızı görmek için daha sonra tekrar gelebilirsiniz.
kundakçı
Firebug Firefox eklentisinden bahsetmeden web tasarımcı araçlarının hiçbir listesi tamamlanmayacaktır.
Çoğu zaman bir tasarımcının cephaneliğinde en değerli araç olarak düşünüldüğünde, Firebug kodunuzu (JavaScript, CSS veya HTML olsun) hata ayıklama ve düzenleme işlemini son derece kolaylaştırır.
CSS'nizi tarayıcınızda doğru yapabilirsiniz. CSS kutularınızın hizalanma şeklini görselleştirin. Sayfanızdaki herhangi bir öğeyi tarayıcınızda düzenleyin.
JavaScript'inizi ayıklayın ve hataları daha hızlı bulun. Ve bu sadece Firebug’ın yapabileceklerinin yüzeyini çiziyor.
Oradaki her tasarımcı için gerçekten olmazsa olmaz bir araçtır. Bunu kullandıktan sonra, onsuz nasıl tasarladığınızı merak edeceksiniz.
Sadece Cameron Chapman tarafından WDD için derlenmiş.
En çok hangi araçları kullanıyorsunuz? Kaçırdığımız başka hangi araçları kullanıyorsunuz?