Front-End Web Geliştiricileri İçin En İyi Ücretsiz Araçlar ve Kaynakların En Son Listesi

Bradley Nice, ClickHelp.com İçerik Yöneticisi - yazılım dokümantasyon aracı

Ön uç geliştirme, müşterinin doğrudan gördüğü ve etkileşime girdiği bir web sitesinin öğelerinin geliştirilmesidir. Programlama becerileri ve estetiğin bir birleşimidir.

Ön uç geliştiricilerin karşılaştığı zorluklar, bir web sitesinin ön ucunu oluşturmak için kullanılan araç ve tekniklerin sürekli değişmesi ve geliştiricinin alanın nasıl geliştiğinin sürekli farkında olması gerektiğidir.

Bu yüzden birkaç kategoriye giren ön uç geliştiriciler için bir araç ve kaynak listesi topladım: Renkler, CSS Jeneratörleri, Hesap Makineleri ve Dönüştürücüler, Tipografi ve Yazı Tipleri, Simgeler, Web Sitesi Stilini Analiz Et, Editörler, Geliştirici Araçları, Test Etme, Performans, Optimizasyon, Geribildirim, İlham, MOOC, Tel Çerçeve, Maket ve Prototip, Tasarım Haberleri ve Topluluk, Portföy, Kaynaklar.

Renkler

Color Hex: Herhangi bir renk hakkında bilgi sağlayan ücretsiz bir renk aracı

Malzeme Renk Seçici

Basit Düz Renk Seçici: Panoya kopyalamak istediğiniz formatı, seçiciyi üstte olacak şekilde seçin. Kopyalamak istediğiniz rengi tıkladığınızda panoya seçilen biçimde eklenir.

ColorDrop: En sevdiğiniz renk kombinasyonlarını kaydetmenizi sağlayan bir renk eşleştirme aracı.

Paletlenebilir: Önceden tasarım bilgisi olmadan güzel renk paletleri oluşturun.

ColorFavs: Resminizi sürükleyip bırakarak, bir URL ekleyerek veya rasgele değerler seçerek kolayca bir renk paleti oluşturabileceğiniz harika bir araçtır.

Güvenli Renk: WCAG'a dayalı güzel ve erişilebilir renk paletleri Metin ve arka plan kontrast oranlarının esasları.

RENKLER: Web için basit bir renk paleti.

SwatchMatic: Gerçek dünyadaki nesneler için renk seçici. Mother Nature tarafından sağlanan tohum renklerini kullanarak anında paletler oluşturmanıza olanak sağlar. Cep telefonunuzun kamerasını istediğiniz renge getirin ve SwatchMatic size rengin adını (birden çok dilde) ve yeniden oluşturmanız için gereken tüm değerleri söyler, ayrıca size güzel bir şekilde eşleşen beş renk verir.

uiGradients: Güzel renkli gradyanlar.

Web Renk Verileri: Bu proje aşağıdaki gibi soruları cevaplamayı amaçlamaktadır: Web'de en yaygın renk / ler veya renk / ler nedir? Bazı endüstriler belirli renkleri diğerlerine göre mi tercih ediyor? Hangi renkler genellikle birlikte bulunur?

Malzeme Tasarım Renkleri: Bu küçük web uygulaması, malzeme tasarım renklerini görselleştirmenize ve renkleri farklı biçimlerde kolayca kopyalamanıza yardımcı olur.

Malzeme UI Renkleri: Google’ın malzeme UI renk paleti, gösterim amacıyla veya marka renklerinizi geliştirmek için kullanılabilecek birincil ve vurgu renklerden oluşur. Birbirleri ile uyumlu çalışmak üzere tasarlandılar.

BADA55.io: BADA55.io, CSS hex renkleriniz için en saçma lale kelimelerini bulmakla ilgilidir.

Renk Heksa: Herhangi bir renk hakkında bilgi sağlayan ücretsiz bir renk aracıdır. Arama alanına herhangi bir renk değerini yazmanız yeterlidir ve ayrıntılı bir açıklama sunar ve otomatik olarak Onaltılık, İkili, RGB, CMYK, HSL, HSV, CIE-Lab, Hunter-Lab, CIE-Luv, CIE içindeki eşdeğer değerine dönüştürür. -LCH, XYZ ve xyY.

Kontrast Oranı: Renk kontrast oranlarını kolayca hesaplayın

Web Tasarımcıları İçin Grinin Elli Tonu:

RENKLER: Kullanıcı tarafından oluşturulmuş ve paylaşılan renk paleti ilham

Renk: Renk paleti üreteci

Paletton: Renk kombinasyonları yaratma aracı

Chrome Daltonize !: Daltonization, ayrıntıları görme engelli kullanıcılara açığa çıkarma tekniğidir, aksi takdirde neleri kaçırmış olacaklarını görmelerini sağlar.

CSS Jeneratörleri

CSS3.me: Bu çok minimal ve şık, aynı zamanda çok işlevsel. Size sınır yarıçapını, alt gölgeyi, degradeyi ve opaklığı değiştirme ve ayarlama yeteneği verir.

CSS3 Jeneratör: Hem işlevsel hem de iyi tasarlanmış bir jeneratördür. Sanırım bu benim favorilerimden biri çünkü tasarım ve kullanıcı arayüzü çok temiz.

CSS3-Tricks Button Maker: Bu neredeyse bir sürükle ve bırak kaydırıcı tarafından tamamen kontrol edilebilir.

CSS3 Button.net: Bunun tasarımında eksik olabilir, ancak öncekinden çok daha fazla seçenek sunuyor. Birden çok metin gölgesi, iç gölgeler, kenarlık ve yazı tipi renkleri ekleme yeteneği sunar. İlk başta anlamak zor olabilir, ancak birkaç dakika boyunca oynarsanız alırsınız.

Ultimate CSS Gradient Jeneratör: CSS gradyan jeneratörü

CSS3 Button Generator: Bu, gölge, kenarlık, renk ve üstünü değiştirmek için size büyük bir düğme verir ve bunun üzerine, üzerine gelindiğinde düzenleme yapma yeteneği verir.

Sınır Yarıçapı: Bu çok pratik ve basit olan küçük bir araçtır. Yapmanız gereken tek şey, her bir köşede ne kadar yuvarlak bir kenar istediğinizi ayarlamak. Sonra ne tür bir tarayıcı öneki eklenmesini istediğinizi kontrol edin ve hepsi bu kadar.

Renkli CSS Degrade Arka Plan Oluşturucu: CSS arka planı oluştur

EnjoyCSS: Hepsi bir arada CSS jeneratörü

CSS MenuMaker: Duyarlı web sitesi navigasyonu oluşturun

Açma / Kapama Çevirme düğmesi: CSS3 Açma / Kapama çevirme anahtarları oluşturma

CSSmatic: Gradyan, sınır yarıçapı, kutu gölge ve gürültü doku üreteci

Ui Parade Live Tool: Düğme, Form, Simge, Şerit oluşturucu

CSS Ok Lütfen: CSS ok üreteci

CSS3 Desen Galerisi: CSS3 desen galerisi

Mizanpaj Oluşturucu: CSS mizanpajı oluşturun

Tridiv: CSS'de 3B şekiller oluşturmak için web tabanlı editör

Hesap Makineleri ve Dönüştürücüler

DPI Aşk: Herhangi bir ekranın DPI / ÜFE'sini bulun

CSS Inliner: E-postanızın CSS'sini otomatik olarak satır içi

Kod güzelleştirin: JSON, XML, JavaScript, CSS, HTML, Excel'inizi güzelleştirin, doğrulayın, küçültün, analiz edin ve dönüştürün

PXtoEM: Pikselleri EM'ye dönüştürün

Yoğunluk Kovaları: Android ve iOS için ekran yoğunluğu dönüştürücü

Yoğunluk Dönüştürücü: Piksel Yoğunluk Dönüştürücü

Bu Retina mı ?: DPI / ÜFE Ekran hesap makinesi

NTH Testi: nth-child ve nth-of-type Test Cihazı

Tipografi ve Yazı Tipleri

Google Fontları: Açık kaynaklı web fontları

Fontspiration: Eğlenceli, hareketli tipografik şaheserler yaratmak için bir yapım aracı.

Gridlover: Modüler skala ve dikey ritim ile tipografik bir sistem kurma aracı.

Genius Türü: Bir sonraki projeniz için mükemmel font kombinasyonunu bulun.

Nugget Türü: Type Nugget, hoş bir kullanıcı arayüzü aracılığıyla hella fine web tipi için sağlam bir temel üzerinde hassas kontrol sağlayan çevrimiçi bir dizgi aracıdır.

TypeWonder: Herhangi bir canlı web sitesinde web fontlarını test edin

Metni Sığdır: Web türünü şişirmek için bir jQuery eklentisi

TypographyEditor: Typography Editor, tipografik posterler ve resimler yapmak için ücretsiz ve çevrimiçi bir araçtır.

Sadece benim tipim:

Typecast: Tipografiye dayalı güzel, gerçekçi ve tutarlı tasarımlar oluşturmak için tarayıcı tabanlı bir uygulama.

Yazı Tipi Sincap: El ücretsiz web fontları aldı

Dafont: Serbestçe indirilebilir fontların arşivi

Yazı Tipi Alanı: Ücretsiz fontları indirin

Genius Türü: Mükemmel font kombinasyonunu bulun

Yazı Tipi Nedir: Bir resimdeki yazı tipini tanımlayın

FontStruct: FontStruct, dünyanın önde gelen dijital tip satıcılarından FontShop tarafından desteklenen ücretsiz bir font oluşturma aracıdır. FontStruct, fayans veya tuğla gibi ızgara deseninde düzenlenmiş geometrik şekillerden oluşan fontları hızlı ve kolay bir şekilde oluşturmanıza olanak sağlar.

Tipik Saygısız: Bir tipografi aracı, görmek istediğiniz kelimeyi yazın ve bilgisayarınızdaki yazı tiplerinde anında görüntüleyin.

Font Swapper: Web sitelerinin Webtype'dan fontlarla nasıl görüneceğini önizleyin.

tinytype: Kullanılabilir varsayılan sistem fontlarını farklı mobil platformlarda gösteren bir uyumluluk tablosu.

Typetester: Web fontlarını Adobe Edge, Google ve Typekit'ten karşılaştırın

Tiff: Google fontları arasındaki farkı bulun

En İyi Fontları 2016: Bu yılın ücretsiz fontlarından oluşan koleksiyonum

Simgeler

Malzeme Tasarım Simgeleri: 750 glif Google Design tarafından Materyal Tasarım sistemi simgeleri paketi

İkonojen: Favoriler üretin, Windows 8 Fayansları, Apple Touch simgeleri, Android ve iOS simgeleri

Marka: Güzel dönüştürülebilir simgeler

Yazı Tipi Başar: Anında özelleştirilebilir ölçeklenebilir vektör simgeleri

Maki: Web haritacılık için belirlenen simge

Toplu iş: web ve kullanıcı arayüz tasarımı için 300'den fazla ikon

Fontello: Simge yazı tipi üreteci

Fontastic: Kendi ikon fontunuzu yaratın

Iconmonstr: Bir Alman sanatçıdan oluşan geniş bir glif simgeler koleksiyonu

Octicons: GitHub tarafından başlatılan simge yazı tipi

GlyphSearch: Font Awesome, Glyphicons, IcoMoon, Ionicons ve Octicons ikonlarını arayın

Simge Kavun: web için SVG simgeler kütüphanesi

Entypo: Daniel Bruce tarafından özenle hazırlanmış 411 kişilik premium piktogram paketi

Gemicon: 600+ Ücretsiz simge seti, 3 farklı boyutta geliyor (16px, 32px, 64px)

Typicons: Kullanıcı arayüzlerinde kolay kullanım için bir webfont içerisine gömülmüş ücretsiz kullanımlı vektör ikonları

Web Sitesi Stilini Analiz Edin

Stylify Me: Renkler, yazı tipleri, boyutlandırma ve boşluk dahil bir sitenin stil kılavuzuna genel bakış

StyleStats: Bir web sitesinin CSS istatistiklerini toplamak için basit bir araç

Renkler: Bir web sitesinin en yaygın renk veya tonunu bulun

Tip-o-matic: Bir sayfadaki tüm fontları bulan bir tarayıcı uzantısı

SnappySnippet: Seçili öğeden CSS ve HTML'yi kolayca çıkarın

Editörler

CodePen: Düzenlenebilir kaynak koduyla birlikte gelişmiş tekniklerin vitrini

JS Bin: HTML, CSS ve JavaScript için canlı bir pastebin ve bir dizi işlemci

CSSDeck: Gelişmiş geliştiricilerin ve tasarımcıların ön plana çıkmasına yardımcı olmak için Awesome CSS ve JS Creations Koleksiyonu

Dabblet: Etkileşimli bir CSS oyun alanı ve kod paylaşım aracı

Liveweave: Liveweave, web tasarımcıları ve geliştiricileri için HTML5, CSS3 ve JavaScript oyun alanıdır.

Adobe Edge Reflow: Tüm ekran boyutları için güzel duyarlı tasarımlar oluşturmanıza yardımcı olmak için tasarım iş akışınızı tamamlayan tasarım aracı

web akışı: Profesyonel duyarlı web siteleri oluşturmak için sürükle ve bırak web sitesi oluşturucusu

Amerika papağanı: Favori resim düzenleyicinizle aynı esnekliği sağlar, ancak aynı zamanda anlamsal HTML ve dikkat çekici derecede özlü bir CSS yazar.

Geliştirici Araçları

Chrome DevTools: Google Chrome'da yerleşik olarak bulunan web yazma ve hata ayıklama araçlarını ayarlayın

Grunt: Görevleri otomatikleştirmek için JavaScript Task Runner

LiveReload: CSS düzenlemeleri ve görüntü değişiklikleri, yenileme düğmesine basmaya gerek kalmadan canlı olarak uygulanır

Bower: Ön uç paket yönetimi sorununa çözüm

Yeoman: Bir jeneratör ekosistemi, temelde tüm projeleri veya faydalı parçaları taramak için `yo` komutuyla çalıştırılabilen bir eklenti

Kullanabilir miyim: Ön uç web teknolojilerini desteklemek için güncel tarayıcı destek tabloları

HTML5 Lütfen: HTML5, CSS3'e bakın ve kullanıma hazır olup olmadıklarını öğrenin

CSS Değerleri: CSS Referansı, Özellikleri ve Değerleri

CSS Tetikleyicileri: CSS'nin performansı nasıl etkilediğine dair paha biçilmez bir referans

Test yapmak

W3C İşaretleme Doğrulaması: Web dokümanlarının HTML, XHTML, SMIL, MathML içindeki işaretleme geçerliliğini kontrol eder.

HTML_CodeSniffer: HTML kaynak kodunu kontrol eder ve tanımlanmış bir kodlama standardının ihlallerini tespit eder

W3C CSS Doğrulama: Stil sayfalarına sahip (CSS) ve (X) HTML belgelerini kontrol edin

CSS Lint: CSS kodunuzla ilgili sorunları gösterir

JS Lint: JavaScript programlarındaki sorunları arayan JavaScript programı

Pestisit: CSS mizanpajı hata ayıklama

PhantomCSS: PhantomJS ile görsel / CSS regresyon testi

QUnit: Bir JavaScript Birim Testi çerçevesi

Tarayıcılar: Çapraz platform tarayıcı testi

Sorumlu: Sitenizin en popüler cihazlarda nasıl görüneceğini kontrol edin

Opera Mobile Classic Emulator: Tanımlanmış çözünürlük, piksel yoğunluğu ve kullanıcı arayüzü ile birden fazla Opera Mobile Classic örneği oluşturmak için profil seçiciyi kullanın

performans

Pingdom Web Sitesi Hız Testi: Canlı sayfanın yüklenme süresini test edin ve analiz edin

WebPagetest: Dünyanın dört bir yanındaki birçok yerden web sitesi hız testi

PageSpeed ​​Insights: Web sitesini analiz eder ve daha hızlı yüklenmesini sağlayacak yollar önerir

GTmetrix: Sınıf sitenin performansı ve bu sorunları çözmek için öneriler sunar

YSlow: Sayfanın performansını iyileştirmek için önerilerde bulunur ve önerilerde bulunur

Perfmap: Tarayıcıya yüklenen kaynakların performans ısı haritası

Optimizasyon

CSSCSS: Hangi kural setlerinin kopyalanmış bildirimleri olduğunu bilmenizi sağlar

Helyum: Sitenizi taramak ve kullanılmayan CSS’yi göstermek için javascript aracı

CSS Tidy: Açık kaynak kodlu CSS ayrıştırıcı ve iyileştirici

CSS Kompresörü: Yükleme hızını artırmak için CSS'nizi sıkıştırın.

CSS Dig: Tüm CSS özelliklerine, sıklıklarına ve çeşitlerine bir bak.

JavaScript Minifier: JavaScript'inizi küçültün

FF Alt Ayarı: Bant genişliği kullanımını optimize etmek için yazı tipi dosyasının boyutunu küçültün

Compressor.io: Yüksek kaliteyi korurken resimlerinizin boyutunu küçültün

Önek ücretsiz: mevcut tarayıcının önekini yalnızca gerektiğinde herhangi bir CSS koduna ekleyin

Sprite Cow: Sprite sayfaları için CSS oluşturun

TinyPNG: PNG görüntüler için gelişmiş kayıplı sıkıştırma

Uyarlanabilir Resimler: Ziyaretçinizin ekran boyutunu algılar ve aygıtı, görüntülerin uygun yeniden ölçeklendirilmiş sürümlerini otomatik olarak oluşturur, önbelleğe alır ve sunar

geri bildirim

Sıçrama: Bir tasarıma geri bildirim ekleyin ve başkalarıyla paylaşın

Tasarım Bırakma: Tasarım geribildirimlerini toplamak için bir araç

Peek: Sitenizi kullanan gerçek bir kişinin 5 dakikalık videosunu görün ve duyun

İlham

CoDrop'lar: CoDrop'lar haftalık olarak (ya da öylesine) popüler bir kollektife sahiptir, bu da web tasarımcıları ve diğer reklam öğeleri için büyük kaynak ve ilham verici öğeler toplamasıdır. Çok popüler ve çok faydalı.

Designrfix - Grafik Tasarım İlham - Öğreticiler ve Web Tasarım Kaynakları: Başka bir önemli grafik ve web tasarımı blogu.

OneXtraPixel - Web Tasarım ve Geliştirme Online Dergisi

Tasarımcılar ve geliştiriciler için çevrimiçi bir dergi olan OXP, tasarım ve geliştirmeyle ilgili ipuçlarını, öğreticileri, araçları, kaynakları ve diğer makaleleri paylaşır.

MonsterPost: TemplateMonster çoğunlukla bir şablon şirketidir, ancak devam eden harika bir blog da var. Bu sadece kendi işleri ile ilgili değil aynı zamanda birçok harika web tasarım malzemesi sağladıklarından emin oluyorlar.

FromUpNorth - Yüksek Kalite Tasarım ilham

DesignShack: Bir kez daha, tasarım topluluğu ile çok sayıda kaynak paylaşılıyor.

Vandelay Design: Çok ve çok sayıda mükemmel kaynak, freebies, makaleler, fırsatlar, WordPress ürünleri ve daha fazlası.

DesignM.ag: DesignM.ag, tasarımcılar, web tasarımcıları ve geliştiricileri için bir topluluktur.

Reddit Web_design

Gerçekten bir blog değil, bir subreddit.

Ancak, yükselen reddit mekaniği, web tasarımcıları için en üste çıkan her şeyin temel bir okuma olmasını sağlar. Çok popüler, en büyük alt dizinlerden biri.

Abduzeedo - Tasarım İlham ve Rehberler: Abduzeedo, trendlerin tepesinde kalmak ve etrafındaki en yeni ve en iyi şeylerin ne olduğunu bilmek isteyen tasarımcı için mutlaka görülmesi gereken tasarım ilham toplamalarını bulacağınız diğerlerinden biri.

tutorialZine - Yüksek kaliteli web geliştirme dersleri için tek yer: Genellikle web geliştirme dersleri için hazırlanan bir eğitim dergisidir. Dersler iyi yazılmış ve takip etmesi kolay.

eWebDesign: eWebDesign, web tasarım uzmanlarından en son ve en iyi makalelerin bir başka kaynağıdır. Web tasarımı, web geliştirme ve öğreticiler hakkında hikayeler içerir. Bu aslında bir bülten, yani doğrudan gelen kutunuza bir şeyler alacaksınız!

WebAppers: Çok sayıda açık kaynak ve ücretsiz web kaynağı.

WebNeel - Tasarım İlham, Sanat, Fotoğrafçılık ve Animasyon

CSS Mania - CSS Galerileri: Bu en popüler CSS vitrin sitesi. Yine, yenilikçi web tasarımlarına dikkat etmek için çok iyi bir site.

İzlemeniz Gereken 9 En Önemli Web Tasarım Blogu

MOOC

Gündelik Şeylerin Tasarımına Giriş: Tasarım hakkında meraklı olanlar için bilgilendirici: sıradan insanlar, teknik insanlar, tasarımcılar ve benzer tasarımcılar

Prototiplendirme Etkileşimi: Eskiz yaparak, inşa ederek ve test ederek farklı prototipleme yöntemlerini öğrenin

Grafik Tasarıma Giriş: Temel grafik tasarım ilkelerini (yazı tipleri, renkler, görüntüler, arka planlar ve sayfa düzeni) ve bunların nasıl uygulanacağını öğrenin.

HTML ve CSS'e Giriş: Dijital tasarım örneklerini statik web sayfalarına nasıl dönüştürebileceğinizi öğrenin

Web Geliştirme: Reddit ve Hipmunk kurucu ortağı Steve Huffman'dan çekirdek web geliştirme kavramlarını öğrenin.

Duyarlı Web Tasarımının Temelleri: Google’ın Pete LePage ile duyarlı web tasarımının temellerini öğrenin

Duyarlı Görüntüler: Modern web'deki resimlerle nasıl çalışacağınızı öğrenin, böylece resimleriniz harika görünecek ve herhangi bir cihaza hızlı bir şekilde yüklenebilecek

HTML5 Canvas: Tuvali nasıl kullanacağınızı öğrenin; şekiller, görüntüler ve metinler kullanılarak kompozisyonlar nasıl yapılır; Resimler üzerinde efektler ve filtreler nasıl oluşturulur ve animasyonlar nasıl oluşturulur?

Android Uygulamaları Geliştirme: Bir Android uygulamasının nasıl oluşturulacağını öğrenin

JavaScript Temelleri: JavaScript programlama temellerini öğrenin

Nesneye Yönelik JavaScript: JavaScript içinde çeşitli nesne yönelimli programlama özelliklerini nasıl kullanacağınızı ve daha önemlisi yeniden kullanılabilir ve bakılabilir kütüphaneleri nasıl yazacağınızı öğrenin.

JavaScript Tasarım Desenleri: JavaScript yazarken endişeleri ayırmanın ve yol boyunca uygulamalı deneyim kazanmanın önemini öğrenin

JavaScript Testleri: Kırmızı-yeşil-refactor iş akışını kullanarak JavaScript uygulamalarını güvenle yazmayı öğrenin

Mobil Web Deneyimleri Oluşturma: Harika, cihazlar arası mobil web deneyimleri oluşturmayı öğrenin.

Mobil Geliştiriciler için UX Tasarımı: Herhangi bir kod yazılmadan önce harika tasarımcıların harika uygulamaları planlamak ve prototip yapmak için kullandıkları teknikleri inceleyin

UIKit Temelleri: UIKit çerçevesi ile daha rahat hale gelmek için bir dizi basit uygulama oluşturun ve en çok kullanılan bileşenlerinde ustalaşın

JQuery'e Giriş: JQuery’nin dokümantasyonunu nasıl okuyacağınızı ve anlamlayacağınızı öğrenin.

AJAX'e Giriş: JavaScript ile nasıl asenkron isteklerde bulunacağınızı öğrenin (jQuery’nin AJAX işlevselliğini kullanarak) ve siz bunu yaparken ne olduğunu daha iyi anlayın.

Web Sitesi Performansı Optimizasyonu: Mobil ve masaüstü tarayıcıların sayfaları nasıl gösterdiğinin ayrıntılarına dalarak herhangi bir web sitesinin hız için nasıl optimize edileceğini öğrenin.

Oyunlaştırma Tasarımı: Oyunlaştırma temellerini oldukça pratik bir yaklaşımla öğrenin

Tel Çerçeve, Maket ve Prototip

Origami: Facebook tarafından oluşturulan modern kullanıcı arayüzlerini tasarlamak için ücretsiz bir araç

Cacoo: Bir diyagram, site haritası, akış şeması, zihin haritası, tel çerçeve, UML diyagramı ve ağ diyagramı oluşturun

Marvel: Dropbox veya masaüstü resimlerinizi herhangi bir cihaz için web ve mobil uygulama prototiplerine dönüştürün ve geri bildirim alın

Placeit: iPhone örnekler ve iPad örnekler oluşturun

MockFlow: Tasarımcılar için çalışmaları planlamak, inşa etmek ve paylaşmak için çevrimiçi hizmetler

Justinmind: Web ve mobil cihazlar için etkileşimli tel kafesler

Wireframe.cc: Ücretsiz en az tel kafesleme aracı

Tasarım Haberleri ve Topluluk

/ r / web_design: Web tasarımı subreddit

/ r / design: Tasarım subreddit

/ r / usability: Kullanıcı deneyimi, Arayüz tasarımı veya İnsan Faktörleri alt sınıfı

/ r / userexperience: Kullanıcı deneyimi tasarımı subreddit

Yığın Değişimi: Grafik Tasarımı: Grafik Tasarımı uzmanları, öğrencileri ve meraklıları için soru cevap

Yığın Değişimi: Kullanıcı Deneyimi: Kullanıcı deneyimi araştırmacıları ve uzmanları için soru cevap

Ön Uç Ön: Ön uç geliştiricilerin soru sorabileceği, ilginç bağlantılar paylaşabileceği ve çalışmalarını topluluğun geri kalanına gösterebileceği bir yer

Ananas: Geliştiriciler ve tasarımcılar için Rehberler, Araçlar ve Varlıklar Merkezi

Lockerdome: İlgi alanına dayalı bir sosyal ağ

Designer News: Tasarım ve teknolojide insan topluluğu

DesignFloat: Web tasarım haberleri ve püf noktaları

Web Karışımı: Tasarımcılar, geliştiriciler ve teknoloji bağımlıları için bir topluluk

Tasarım Haberleri: Tasarımcılar ve geliştiriciler tarafından yazılan haberler, kaynaklar ve dersler içeren bir site

Portföy

Behance: Yaratıcı çalışmaları sergilemek ve keşfetmek için lider çevrimiçi platform

Dribbble: Tasarım göstermek, tanıtmak, keşfetmek ve keşfetmek için bir yer

Cargo: Yetenekli kişilerin internete maruz kalmasını artırmak için erişilebilir araçlar ve ağ bağlamı yaratmayı amaçlayan kişisel yayın platformu

DeviantArt: Kullanıcı tarafından yapılan çeşitli sanat eserlerini gösteren çevrimiçi bir topluluk

kaynaklar

Vector Open Stock: Ücretsiz vektör grafikleri

Düğmeler: Sass & Compass ile oluşturulmuş bir CSS düğme kütüphanesi

Bootflat: Bootstrap 3.3.0 CSS çerçevesine dayalı açık kaynaklı Flat UI KIT

Animate.css: CSS animasyonlarının tarayıcılar arası kitaplığı

CSS Shake: CSS, sayfanız veya uygulamanız için grafikleri ve simgeleri sallar

İnce Desenler: Serbest tilable dokulu desenler

Placehold.it: görüntü yer tutucuları

Holder.js: Müşteri tarafı resmi yer tutucuları

Hammer.js: Web sayfanıza çoklu dokunma hareketleri ekleyin

Textillate: CSS3 metin animasyonları için basit bir eklenti

Timeline JS: Kullanımı kolay ve sezgisel, güzel hazırlanmış zaman çizelgeleri

Modernizr: Kullanıcının tarayıcısında HTML5 ve CSS3 özelliklerini algılayan JavaScript kitaplığı

İzotop: Web siteniz için filtrelenebilir bir portföy oluşturun

Polimer: Masaüstü, mobil ve ötesinde bir düğmeden eksiksiz bir uygulamaya kadar bir şey oluşturmayı daha kolay ve hızlı hale getirir

CodyHouse: Ücretsiz bir HTML, CSS, JS nuggets kütüphanesi

Cheetyr: Tasarımcılar ve geliştiriciler için kopya sayfaları ve kısayollar koleksiyonu

Broşür: Mobil Dostu Etkileşimli Haritalar için Açık Kaynaklı bir JavaScript Kitaplığı

Mütevazı Haritalar: İnteraktif haritalar için ücretsiz kütüphane

Templated: Cherry + AJ tarafından tasarlanan ve geliştirilen 846 ücretsiz CSS ve HTML5 site şablonu koleksiyonu

GraphicBurger: Topluma ücretsiz sunulan kaynakları tasarlayın

İyi günler dilerim!

Bradley Nice,
ClickHelp.com'da Content Manager - SaaS satıcıları için en iyi çevrimiçi dokümantasyon aracı