Tasarım Kodlama

Web Sayfası Geliştirirken Kullanabileceğiniz Siteler

Web sayfası geliştirken sadece metinsel bir editör kullanmayız. Çoğu zaman iyi bir web sayfası için daha fazla araca ihtiyaç duyarız. Bunlardan bazıları photoshop gibi grafik programları olmasına rağmen çoğunlu yardımcı web araçlarıdır. İşte size bu yazıda web sayfalarında yararlanabileceğiniz bir çok web aracını sunacağım.

Fırsat oldukça da bu araçları güncelemeye çalışacağım. Olurda bağlantılarda kırık olursa aşağıya yorum bırakarak bağlantının güncelliğini sağlamaya yarımcı olabilirsiniz.

Aşağıdaki listeyi şu sıralamaya göre oluşturdum.

Iconlar:

  • SVG Repo
  • Flat Icon
  • Icon Finder

Fontlar & Icon Fontlar:

  • Awesome Font
  • Google Font
  • Font Squirrel
  • Fontello
  • Boxicons
  • Bootstrap Icons

Renkler

  • Flat UI Color
  • Adobe Color
  • Flatcolors

Grafik/Vectorel Nesneler

  • Vecteezy
  • Freebiesbug
  • Grapbox
  • Interfacer
  • UpLabs

Fotoğraflar

  • Unsplash
  • Reshot
  • Pixabay
  • Rawpixel
  • Pexels
  • Picsum Photos (Rastgele Fotoğraf)
  • Placeholder.com (Yer tutucu fotoğraflar)

HTML / JS / CSS Araçları

  • Bootstrap
  • jQuery
  • jQuery Script
  • Materialize
  • TailwindCSS
  • AlpineJS

Yardımcı Siteler

  • Bootstrap Cheat Sheet
  • cdnjs.com
  • Placeholder
  • Lorem Ipsum
  • GMatrix
  • IsItWP
  • Ping Dom
  • PageSpeed Insights
  • animate.CSS
  • Animista CSS

ve BONUS SİTELER…

Iconlar

SVG Repo

SVG formatında bir çok grafik barındıran güzel bir site. Ayrıca grafikleri indirmeden önce ihtiyacınıza göre kişiselleştirebilirsiniz.

Siteye git


Flat Icon

PNG, SVG, EPS, PSD ve BASE 64 formatlarında bulunan en büyük ücretsiz ikon veritabanı sitesi.

Siteye git


Icon Finder

Iconfinder, SVG, PNG, CSH ve AI formatında vektör ikonları için önde gelen arama motoru ve pazar yeridir.

Siteye git


Fontlar / Icon Fontlar

Awesome Font

Web’in en popüler simge seti ve araç seti olan Font Awesome ile web sitenize vektör ikonları ve sosyal logolar yapabilirsiniz.

Siteye git


Google Font

Harika tipografi ile web’i daha güzel, hızlı ve açık hale getirmek.

Siteye git


Font Squirrel

Serbestçe indirilebilen fontların arşivi. Alfabetik listeye, stile, yazara veya popülerliğe göre göz atın.

Siteye git


Fontello

Simgeleri ile özel yazı tipleri oluşturmak için bir araç.

Siteye git


Boxicons

Sitelerinizde sosyal medya ve çeşitli iconları font olarak kullanmak isterseniz güzel bir icon font sitesi. Ayrıca CDN olarak kullanım imkanı sunduğu için indirmeden projelerinize dahil edebilirsiniz.

Siteye git


Bootstrap Icons

Icon fontlar içinde en geniş seçeneğe sahip ve her hangi bir üyelik gerektirmeden doğrudan CDN olarak kullanabileceğiniz güzel bir icon font sitesi.

Siteye git


Renkler

Flat UI Color

Renk seçme konusunda sıkıntı yaşıyorsanız. Seçimlerinizde yardımcı olacak geniş renk yelpazesi sunan güzel bir site

Siteye git


Adobe Color

Renk tekerleği, altıgen veya görüntü ile renk paletleri oluşturun. Photoshop, Illustrator vb. Uygulamalarda kullanmak için binlerce renk kombinasyonuna göz atın.

Siteye git


 Flatcolors.net

Diğer flatcolor siteleri kadar renk seçeneği olmamasına rağmen, barındırdığı kaliteli renk seçenekleriyle favori sitelerden birisi olmaya aday renk sitesi. Diğer renk seçenekleri yanında bu siteye de göz atmanızı tavsiye ederim.

Siteye git


Vectorel Nesneler

Vecteezy

Freebiesbug sitesinin neredeyse her şeyi ücretli yapması üzerine keşfettiğim güzel vektör çalışmalarının sunulduğu site. Üyelik gerektirmeden 5 tane çalışma indirmenin yanı sıra üyelikle birlikte çok daha fazla vektörel çalışma indirebiliyorsunuz.

Siteye git


Freebiesbug

Freebiesbug, PSD dosyaları, HTML web sitesi şablonları, yazı tipleri ve diğer harika şeyler gibi ücretsiz yüksek kaliteli tasarım kaynaklarını sergileyen bir web tasarım blogudur.

Siteye git


Grapbox

Grapbox’da yazı tiplerini, logoları, simgeleri, vektörleri, maketleri, grafikleri, web şablonlarını ve daha yüksek kaliteli freebies’leri keşfedin ve indirin

Siteye git


Interfacer

Interfacer, internetteki en yetenekli ve harika insanlar tarafından oluşturulan yüksek kaliteli ücretsiz Tasarım Kaynakları koleksiyonudur. Hepsini ticari projelerde kullanabilirsiniz.

Siteye git


UpLabs

UpLabs, en iyi tasarım ve geliştirme ilhamını, kaynaklarını ve freebies’i seçiyor.

Siteye git


 Fotoğraflar

Unsplash

Herhangi bir proje için indirebileceğiniz ve kullanabileceğiniz güzel, ücretsiz resimler ve fotoğraflar. Herhangi bir telif ücretsiz veya stok fotoğraf daha iyi.

Siteye git


Pixabay

En güzel resim ve videoları bulun, ücretsiz biçimde indirin. Ticari Ücretsiz ticari kullanım ✓ Kaynak göstermeniz gereken ✓ Yüksek kaliteli resimler.

Siteye git


Pexels

Siteye git


reshot

Siteye git


rawpixel

Siteye git


Picsum Photos

Lorem fotoğraflar için güzel bir alternatif sitesi. Yer tutmasını istediğininiz fotoğraf ölçülerini yazıyorunuz ve fotoğraflarınız hazır hale geliyor.

Siteye git


Placeholder.com

Yer tutucular içinde en geniş seçeneğe sahip site olarak ifade edebiliriz. Sitede en çok yer tercih edilen özellik ise yer tutması için kullanılan fotoğraflar oluyor. Fotoğraf ölçülerini giyiorsunuz ve yer tutucunuz hazır hale geliyor.

Site git


HTML / JS / CSS Araçları

Bootstrap

Bootstrap HTML, CSS ve JS ile geliştirme için açık kaynaklı bir araç setidir. SQ değişkenlerimiz ve karışımlarımız, duyarlı ızgara sistemi, kapsamlı önceden oluşturulmuş bileşenler ve jQuery üzerine kurulu güçlü eklentilerle fikirlerinizi hızla prototipleyin veya tüm uygulamanızı oluşturun.

Siteye git


jQuery

jQuery hızlı, küçük ve zengin özelliklere sahip bir JavaScript kütüphanesidir. Çok sayıda tarayıcıda çalışan kullanımı kolay bir API ile HTML belgesi geçişi ve manipülasyonu, olay işleme, animasyon ve Ajax gibi şeyleri çok daha basit hale getirir. Çok yönlülük ve genişletilebilirlik kombinasyonuyla jQuery, milyonlarca kişinin JavaScript yazma şeklini değiştirdi.

Siteye git


Materialize

Materialize, Google’ın Materyal Tasarımına dayanan modern, duyarlı bir CSS çerçevesidir.

Siteye git


Alpine.js

Jquery kadar rahat vuejs gibi component tabanlı olan bir framework mü arıyorsunuz. Site alpinejs’yi öneririm. Kullanımı hafif ve esnek olan tüm basit çalışmalarınızda rahatlıkla kullanabilirsiniz. İlk kullanımdan itibaren gerçekten seveceğiniz bir framework olacak.

Siteye git


Tailwind CSS

CSS kullanımına yeni bir soluk getirecek yenilik denilebilir. Neredeyse bütün CSS seçeneklerini sınıf olarak bünyesinde barındırıyor. Projeye dahil edip hızlıca CSS yazmadan proje geliştirebilirsiniz.

Siteye git

Yardımcı Siteler

Bootstrap Cheat Sheet

Bootstrap sınıflarınızı bu etkileşimli Bootstrap hile sayfasında hızlıca bulun. Kod örnekleri ve öğelerin canlı önizlemesini içerir.

Siteye git


cdnjs.com

cdnjs.com – Web sitelerinizi hızlandırmak için web ile ilgili kütüphaneler için en iyi FOSS CDN!

Siteye git


jQuery Script

Web ve mobil geliştiriciler için örnekler ve öğreticiler ile 8000+ ücretsiz jQuery eklentisi.

Siteye git


placeholder.com

Placeholder.com, her yıl milyarlarca ve milyarlarca resim sunan web tasarımcıları için ücretsiz bir resim yer tutucu hizmetidir.

Siteye git


Lorem Ipsum

Rastgele bir Lipsum jeneratörünün yanı sıra kökenleri hakkında bilgi veren Lorem Ipsum hakkında referans sitesi.

Siteye git


JSONPlaceholder

Siteye git


GTmetrix

GTmetrix, sayfanızın hız performansını analiz eden ücretsiz bir araçtır. … Sitenizi test edin. Analiz Seçenekleri: … Sitenizi şimdi analiz edin ve ne kadar iyi performans gösterdiğini görün!

Siteye git


Ping Dom

Web sitelerinizin yük hızını analiz etmek ve nasıl daha hızlı hale getireceğinizi öğrenmek için bu ücretsiz Web Sitesi Hız Testini kullanın.

Siteye git


IsItWP

IsItWP, bir web sitesinin WordPress kullanıp kullanmadığını ve hangi WordPress temalarını ve kullandıkları WordPress eklentilerini kolayca tespit etmenizi sağlayan ücretsiz bir araçtır.

Siteye git


PageSpeed Insights

Siteye git


Animate.CSS

Hazır CSS aminasyonları kullanmak için ideal bir CSS kütüphanesi

Siteye git


Animista CSS

Hazır CSS kütüphaneleri içinde en çok CSS efektelerine sahip sitelerden bir tanesi

Siteye git


Immur.com

Hızlı şekilde resim ekleyip paylaşabileceğinizi hazır resim paylaşım sitesi.

Siteye git


BONUS

1 yorum