Hızla gelişmeye devam eden bu teknolojik çağda, İnternet sitesi olmayan bir işletmenin ciddiye alınmadığını söylemek yanlış olmaz. Dolayısıyla web sitesi artık bir zorunluluk haline geldi.
Diğer yandan kendi işini yapan girişimciler ve freelancerlar da işlerinde başarılı olmak istiyorsa bir web adresi ile dijital dünyadaki rekabete katılmak zorunda.
Neyse ki bugünlerde web sitesi kurmak eskiye göre daha kolaylaştı. Çünkü ücretsiz uygulamalar bu konuda internet girişimcilerine yardımcı oluyor.
Bu makalede, web tasarımı yaparken sıklıkla kullanılan ve ücretsiz olarak yararlanabileceğiniz responsive tabanlı HTML 5 framework’leri listeledim. Küçük eğitimlerle bu araçları kullanmaya başlayabilir kendi web sayfanızı oluşturabilirsiniz.
İşte en popüler ve ücretsiz 12 farklı HTML5 Framework:
1) Twitter Bootstrap
İnternet sitesi tasarlamak için en pratik responsive HTML5 framework listesine Twitter Bootstrap ile başlayalım. Twitter Bootstrap, web sayfaları ve web uygulamaları geliştirmek için kullanılan araçlar bütünüdür.
Açık kaynak kodlu olan bu araç, bir ön yüz çatısı oluşturur. HTML ve CSS tabanlı tasarım şablonları içeren Twitter Bootstrap, web sayfalarının farklı cihazlarda düzenli ve orantılı bir şekilde görünmesine yardımcı olur.
Hazır kodlardan oluşan bu aracın en önemli özelliği 12 sütunlu bir yapıya sahip olmasıdır. Twitter Bootstrap, bir internet sayfası tasarlamak için gerekli olan tüm elementleri içinde barındırır.
İmajlar, stil, javascript gibi hazır bileşenler ile kolaylıkla tasarım yapılabilir. Bu araç Twitter çalışanları tarafından geliştirildiği için Twitter Bootstrap olarak ifade edilir.
Web sitesine gitmek için aşağıdaki linki kullanabilirsiniz:
2) Materialize
Web geliştiricilerinin tercih edebileceği bir diğer framework, Materialize aracıdır. Bu araç, Google’ın material tasarımından ilham alınarak geliştirilmiştir. Bir yandan Google tasarımına sadık kalınmış, bir yandan da Google ara yüzünü daha basite indirgemeyi amaçlamıştır.
Materialize aracı, görsel etkenleri odak noktasına alan bir framework’tür. Materialize, kullanıcıların web sitesi sayfaları ile nasıl etkileşime gireceği üzerinde durur. Kullanıcı deneyimini geliştirmek için liste, sekme ve buton gibi simge ve görsel ögeleri en faydalı hale getirir.
3) Foundation
En popüler responsive framework’lerden bir diğeri Foundation’dır. Modern bir HTML5 framework’ü olan Foundation, hem mobilde hem de masaüstünde web geliştiricilerinin işini kolaylaştırır. Ancak bu framework’ün önceliği mobil tasarımlardır.
Şablon, navigasyon barı, buton gibi Javasicript eklentilerini bünyesinde barındıran Foundation, hem profesyonel ve hem de yeni tasarımcılara hitap etmektedir.
Foundation hızlı bir prototip oluşturma becerisine sahiptir. HTML ve CSS tasarım şablonları ile web geliştiricilerinin tasarımlarını hızlandırmaktadır.
Web tabanlı çözümler sunmaya odaklanan Foundation, ZURB firmasına aittir. Bazı kaynaklarda Zurb Foundation adıyla geçmektedir. Foundation kullanan markalar arasında Facebook, Samsung, E-bay devler bulunmaktadır.
4) Skeleton
Skeleton, HTML 5 web siteleri ve uygulamaları için tercih edilen bir diğer framework’tür. Kullanıcıların ihtiyacı olan tasarım ögeleri ile kullanıcı deneyimini geliştirmeye hedefler.
Karmaşık bir yapıdan ziyade basit ve sade bir tasarıma sahiptir. Bu nedenle Skeleton için başlangıç ara yüz tasarımı tanımlaması yapabiliriz.
İlk kez web sitesi tasarlamak isteyenlere Skeleton önerilir. Hem basit hem de pratik bir sayfa düzeni sunar. Aynı zamanda verimli bir performans almak isteyenlerin tercihleri arasındadır. Başarılı bir yerleşim düzeneği ve tarayıcı uyumluluğu da skeleton aracının önemli avantajlarıdır.
5) HTML5 Boilerplate
Boilerplate, 2010 yılından sonra en popüler açık kaynak kodlu web geliştirme araçlarından biri haline geldi. En önemli özelliği HTML web sitelerini ve web uygulamalarını hemen çalıştırmasıdır/açmasıdır.
Boilerplate, modern web tarayıcıları tarafından desteklenir ve web geliştirme konusunda pratik çözümler sunar.
Mobil uyumlu HTML şablonları ve pratik site ikonlarını içinde barındıran Boilerplate, CSS resetleme ve web sayfalarını optimize etme gibi becerilere de sahiptir. Günümüzde bu aracın tercih edilme nedeni ise çok fazla yazılması gerektiği durumlardır.
Basit ve işlevsel bir web tasarımlarında kullanılan HTML 5 Boilerplate, farklı yazılım projelerinde başarılı bir performans sunmaktadır.
6) Gumby
Gumby framework, bir web projesi için farklı sütun ve ızgara varyasyonları sunan bir web geliştirme aracıdır. Web sayfaları için farklı konseptleri ile ön plana çıkar.
Pratik ve sade bir kullanıcı deneyimi vaat eden Gumby, mobil ve masaüstü çözünürlükler için kendini optimize eden bir anlayışa sahiptir.
Gumby kullanan web tasarımcılar, ihtiyaca göre tasarımlarını düzenleyebilir. Farklı uzantı ve eklentilere sahip olan Gumby, iyi bir kullanıcı deneyimi gerekli olan aksiyonları hızlı bir şekilde alma fırsatı verir. Gumby’nin framework grid sayısı 12’dir. Bu özellik tasarımcılara ve kullanıcılara avantaj sağlamaktadır.
https://gumbyframework.com/
7) UIKit
UIKit framework, “User Interface” konusuna dikkati çeken bir web geliştirme aracıdır. Baş harfleri User Interface/Kullanıcı Arayüzü kelimelerinin kısaltılmış halidir.
Kullanıcıların ekranda ne gördükleri ile ilgilenen UIKit tablo, buton ve şablon konusunda iyi işlere imza atan önemli bir araçtır.
Ekran üzerindeki bileşenlerin daha iyi nasıl gözükeceği konusunda çözümler sunan UIKit, pratik değişiklikler yapma imkanı da verir. Bünyesinde 10 framework grid bulunduran UIKit, tasarımcıların ücretsiz tercih edebileceği en iyi web geliştirme araçları arasında yer almaktadır.
8) CreateJS
CreateJS, zengin etkileşimli HTML 5 içerikleri oluşturmak için tercih edilen araç paketidir.
Açık kaynak web teknolojilerinde iyi bir performans veren CreateJS, içerik üreticileri için tasarlandı. 5 adet modüler JavaScript kütüphanesinden oluşan CreateJS’nin başlıca avantajları şu şekilde:
- Animasyon efektleri uygulamak
- HTML 5 sound’larını desteklemek
- HTML 5 Canvas ögesiyle çalışmayı kolaylaştırmak
- Yeni bilgileri yüklemek ve koordine etmek
Yazılım içinde farklı kütüphaneler ayrı ayrı kullanılabilir, gerektiğinde birleştirebilir. CreateJS uygulamasının son zamanlarda popüler web geliştirme paketleri arasında yerini aldığını söyleyelim.
9) Semantic-UI
Semantic-UI estetik ve işlevsel bir ara yüz geliştirmek için en çok tercih edilen framework seçenekleri arasında. Hızlı ve kullanışlı özellikleriyle dikkat çeken Semantic-UI, özellikle animasyon destekli olması nedeniyle dikkat çekiyor.
En iyi CSS Kütüphaneleri arasında yer alan Semantic UI, CSS’ye ek olarak JavaScript’e özgü özellikleri de sunuyor. Bu özelliği nedeniyle geliştiricilere daha rahat bir hareket alanı yaratıyor. Sematic-UI, 50’den fazla UI bileşeni ve 3000’den fazla tema değişkeni ile tasarımcıların her ihtiyacına cevap veriyor.
10) Jeet
Jeet, CSS ön işlemcileri üzerine kurulan bir framework uygulamasıdır. Bu nedenle Jeet kullanan tasarımcılar, col-6 gibi sınıflamalarla sınırlı kalmak zorunda değildir.
Sistem içinde özgün ve kullanışlı farklı ızgara/grid seçenekleri vardır. Geliştiriciler hem ondalık hem de kesir gibi farklı temaları (ya da her ikisini) tercih edebilir.
Jeet’in bir diğer özelliği en hızlı grid sistemlerinden birine sahip olmasıdır. Site tasarlayacağınız zaman çok kısa sürede isteğinize göre bir dizayn gerçekleştirebilirsiniz. Jeet ile sayfa düzeni ve stil konusunda kendi tarınızı hemen yaratmanız mümkün.
11) Titon Toolkit
Titon Toolkit, mobilde kullanıcı deneyimini geliştirmeye odaklanan bir web geliştirme aracıdır. Önceliğini mobil ve dokunmatik cihazlara veren uygulama, modern web sitelerinde zengin etkileşimli bir deneyim sunmaktadır.
Farklı HTML etiketleri kullanılarak yapılandırılan Titon Toolkit, iyi bir sunuma ek olarak bilgi de aktarmaktadır.
Kolay entegrasyon ve özelleştirme işlevleri sunan web geliştirme aracı, CSS3 ve GPU ile animasyon ve geçişleri iyileştirir. Farklı şablon, derleme ve özelleştirme seçenekleri ile tasarımcı ve geliştiriciler için oldukça pratik çözümler sunar.
https://github.com/titon/toolkit
12) HTML KickStart
Listemizdeki son framework, son dönemde HTML 5 geliştiricileri arasında popülerlik kazanan HTML Kickstart. Farklı bileşenlere sahip olan HTML KickStart, geliştiricilerin projelerini başarıyla tamamlamalarına yardımcı oluyor.
Slaytlar, menüler, tipografi ögeleri, simgeler, sekmeler ve çok daha fazlası HTML Kickstart’ın bileşenleri içinde yer alıyor. İhtiyaçları karşılamasına ek olarak İnternet sayfalarına estetik bir görünüm katıyor olması da HTML KickStart’ın önemli bir diğer avantajı.
Ben profesyonel web tasarımcı olarak projelerimde Bootstrap Framework’ü tercih ediyorum. Zira kullanımı kolay, minimal ve zarif bir çizgisi var. Size de tavsiye ederim.
