Posts made in Nisan, 2010
Haftalık OZD #9
9. haftada yazdığım makaleler, kendi açımdan her zamankinden çok daha fazla tatmin edici oldu. Özellikle de Google SEO ayarları, @font-face kullanımı başlıklı yazılarımın sadece web tasarımcıların değil, blog kullanıcıları ve site sahiplerinin de işine yaradığını öğrenmek beni mutlu etti. Ayrıca 50′den fazla PSD website şablonu ve Jquery slayt eklentilerinin yanında düzenli olarak derlediğim ücretsiz web tasarım kaynaklarının 7.si de bu haftaki makaleler arasında yerini aldı.
10. hafta görüşmek üzere : )
Web tasarımcılar için Google SEO ayarları
Web Tasarım Kaynakları #7
Jquery galeri ve slayt eklentileri
@font-face kullanımı
50+ PSD Website Şablonları
50+ PSD Website Şablonları
Website tasarımında Adobe Photoshop‘dan daha iyi bir program olmadığı konusunda hemfikiriz galiba. Bazen biz tasarımcılar arayüz tasarımı yaparken öyle bir an gelir ki takılıp kalırız. Aklımıza hiç bir fikir gelmez. İnsanlık hali: ) Böyle durumlarda hazır website şablonları incelemek en kolay ilham kaynağı olabiliyor. Birebir kullanmaktan her zaman çekinmemiz gerekse de, arayüz taslağı, renk paleti ya da beğendiğimiz bir buton tam da ihtiyacımız olduğu bir zamanda işimize yarıyor. bir Sinema-TV öğrencilerinin sürekli olarak uzun metraj film senaryosu okuması gibi, yeni başlayan web tasarımcıların da hazır website şablonlarını bütün efektleri ile incelemesi, kendilerini geliştirmesi açısından çok faydalı olacaktır.
İnternette oldukça fazla PSD website şablonu bulunuyor. Ancak o kadar dağınık ki nereye bakacağımızı şaşırıyoruz. Ben de bunun üzerine ücretsiz olarak indirebileceğiniz 50′den fazla hazır website şablonunu paylaşmak istedim. Farklı tarzlarda, farklı renk paletlerinde, her türlü kullanım için uygun hazır PSD website şablonlarını ücretsiz olarak indirmek için resimlere tıklamanız yeterli.
@font-face kullanımı
Daha önce “Yeni nesil web tasarımcı olmak” başlıklı makalemde de bahsettiğim üzere, web sitelerimizde standart sistem fontlarından farklı fontlar kullanmak için artık sIFR gibi Flash tabanlı scriptler kullanmak zorunda değiliz. CSS 3′ün bize hediye ettiği en güzel özelliklerden biri olan @font-face ile bu işin üstesinden çok kolay bir şekilde gelebiliyoruz. Ancak o makalede @font-face özelliğinin üstünde çok durmamıştım. Verdiğim örnek satırlar @font-face’in genel kullanımını temsil ediyordu. O haliyle kullandığınız zaman bütün tarayıcılarda aynı sonucu alamazsınız.
Ben de blogumda font-face kullanmaya başladığımdan olsa gerek, konu ile ilgili ayrıntılı bir makale yazmak istedim. (Blogumdaki font-face özelliğini görmeniz için tarayıcınızın geçmişini silmeniz gerekebilir.) @font-face’in bütün tarayıcılarda aynı sonucu alacak şekilde nasıl kullanılacağından bahsetmek istiyorum. @font-face’i doğru kullandığınız takdirde aşağıdaki tarayıcılarda düzgün çalıştırabilir ve istediğiniz fontları web sitenizde sorunsuz kullanabilirsiniz:
- Safari 3.1+
- Opera 10+
- Firefox 3.5+
- Chrome 4.0+
- Internet Explorer 6+
Bütün tarayıcılarda @font-face kullanımı
Font dosyalarınızın bir arada düzgün bir şekilde bulunmasını sağlamak için ilk yapacağınız şey, sunucunuzda “fonts” klasörü oluşturmak olsun. Fontlarınızı bu klasöre kopyaladıktan sonra aşağıdaki satırları CSS dosyanıza yerleştirin. Font seçerken, türkçe karakterleri destekliyor olduğuna dikkat etmelisiniz. Yoksa türkçe karakterleri sistem fontu olarak gösterir. Bunun da pek hoş bir görüntü oluşturduğunu söyleyemem. Gelelim @font-face satırlarına…
|
1 2 3 4 5 6 7 8 |
@font-face { /* declare fonts */
font-family: "MuseoLight";
src: url("fonts/Museo300-Regular.;feot");
src: local("Museo 300"), local("Museo-300"),
url("fonts/Museo300-Regular.woff") format("woff"),
url("fonts/Museo300-Regular.otf") format("opentype"),
url("fonts/Museo300-Regular.svg#Museo-300") format("svg");
} |
Fontları çağırdığınız bağlantı yollarının doğru olduğundan emin olmalısınız. Bu satırlarda örnek olarak kullanılan MuseoLight font ailesini istediğiniz gibi değiştirebilirsiniz.
Daha sonra da bu fontu sitenin neresinde kullanacaksanız, CSS dosyasına bu özelliği aşağıdaki gibi tanımlamanız yeterli olur.
|
1 2 3 |
h1 { font: 24px/1 MuseoLight, Verdana, sans-serif; }
h2 { font: 18px/1 MuseoLight, Verdana, sans-serif; }
h3 { font: 14px/1 MuseoLight, Verdana, sans-serif; } |
@font-face’in bütün tarayıcılarda düzgün çalışacak şekilde kullanımı bu kadar basit aslında.
Fark ettiğiniz üzere, bir fontu kullanabilmek için birden fazla font uzantısı kullanmamız gerekiyor. Bunun sebebi en çok kullanılan font uzantısı olan TTF’nin bütün tarayıcıların bütün versiyonları tarafından desteklenmiyor olması. Hatta Internet Explorer yine yapacağını yapıyor ve hiç bir versiyonunda TTF uzantısını desteklemiyor. Aşağıdaki tabloda hangi font uzantılarının hangi tarayıcılar ve versiyonlar tarafından desteklendiğini görebilirsiniz.
Font uzantılarını değiştirme
İsterseniz font uzantılarını birbirine çeviren ücretsiz programları indirip kullanabilirsiniz. Ama TTF uzantısını font-face’de kullanılan bütün uzantılara çevirebilen bir o kadar çok online araç varken, program indirmekle uğraşmanıza gerek yok. Bunların bana göre en iyisi fontsquirre, bu işin başarıyla üstünden geliyor.
@font-face kullanımına örnekler
İlk örneği zaten OZD Tasarım’ın yeni halinde görüyorsunuz. Tasarıma hem alışılmışın dışında bir hava hem de daha şık bir görünüm kazandırdığı kesin. Daha fazla örnek görmek isteyenlere bu sayfayı tavsiye ederim. Bu örnekleri gördükten sonra siz de sitenize @font-face’i uygulamak isteyebilirsiniz. Yeniliklere açık olun ve denemekten çekinmeyin.
Jquery galeri ve slayt eklentileri
Çok değil, bundan bir kaç yıl öncesini hatırlıyorum da web sitelerimize animasyonlu resim galerileri eklemek için Flash kullanmaktan başka çözüm yolumuz yoktu. Oysa şimdi internetin her köşesinde, javascript ile hazırlanmış resim galeri ve slayt eklentisine rastlamak mümkün. Özellikle de Jquery’nin yaygın olarak kullanılmaya başlanmasıyla birlikte hareketli resim galerileri ve slayt gösterileri de günden güne daha popüler oluyor. Web geliştiricilerinin Jquery’i sevmesi ve resim galerisi ve slayt gösterileri ile ilgili her geçen gün yeni scriptler yazması bu popülerliğin en önemli etkeni tabiki.
Aşağıda Jquery ile yazılmış resim slayt gösterileri ile ilgili yepyeni 6 eklenti bulunuyor. Bunları sitenize eklemek de son derece basit. Eklentinin tanıtım sayfasında, nasıl ekleneceği ile ilgili bütün detaylar mevcut.
Ama öncesinde hala bilmeyenler için, Jquery’nin şu sıralar en meşhur javascript kütüphanesi olduğunu ve resmi sitelerinden Jquery ile ilgili detaylı bilgi alabileceklerini belirtmek isterim.
Şimdi geçelim Jquery ile hazırlanmış resim slayt eklentilerine…
Supersized
Supersized, Jquery resim eklentilerinin en yenisi sanırım. Çünkü diğerlerinden çok farklı bir uygulama. Sitenizin arkaplan resmini tarayıcınızın ekran çözünürlüğüne göre yeniden boyutlandırıyor ve sitenin arkaplan resmini slayt gösterisi şeklinde belli zaman aralıklarında değiştiriyor. Scrollbar yok, boş alan yok, sadece değişen arkaplan resmi var. Bütün tarayıcılarda (Firefox, Safari, Opera, IE7, and IE6…) sorunsuz çalışıyor.
SimpleSli.de
SimpleSli.de sıkıştırılmış hali ile yalnızca 4 KB yer kaplayan çok küçük ve bir o kadar da sade bir Jquery eklentisi. Sadece resim ile kalmayıp, html içeriğinizi de slayta dahil edebiliyorsunuz. Düzgün CSS ve Script yapısı ile renk, genişlik ve hız gibi kriterleri istediğiniz gibi değiştirebilirsiniz. IE 6.0 hariç bütün tarayıcılarda ve versiyonlarında düzgün çalışıyor.
jqFancyTransitions
jqFancyTransitions, resimlerinizi farklı efektlerle slayt şeklinde gösteren bir Jquery eklentisi. Dalgalanma, perde ve sıkıştırma gibi 3 farklı efektten birini seçebiliyorsunuz. Animasyonla ilgili olan sayısal değerleri istediğiniz gibi değiştirerek sitenize uygun resim galerileri oluşturabilirsiniz.
ColorBox
ColorBox, resim, fotoğraf albümü, html içerik ve hatta ajaxı destekleyen oldukça küçük (9 KB) bir Jquery eklentisi. CSS dosyası ile istediğiniz görsel değişikliği yapmaya uygun. Firefox 2 & 3, Safari 3 & 4, Opera 9, Chrome, Internet Explorer 6, 7, 8 gibi en çok kullanılan tarayıcıların bütün versiyonlarında test edilmiş ve sorunsuz çalıştığı görülmüştür.
YoxView
YoxView, diğerlerine göre oldukça gelişmiş özelliklere sahip bir Jquery eklentisi. Resimleri tarayıcınızın o anki büyüklüğüne göre yeniden boyutlandırarak görüntüleyerek ekranda scrollbar çıkmasını önlüyor. İsterseniz tek tek resimlere tıklayarak görüntüleyebiliyor, isterseniz de çok güzel bir slayt efekti ile otomatik olarak çalıştırabiliyorsunuz. Cache özelliği ile daha önce açtığınız resimleri hafızasında tutarak, bir sonraki işlemde yeniden yüklenmesini beklemeden anında o resmi açabiliyor. Bütün tarayıcılarda da sorunsuz çalıştığı test edilmiş.
Horinaja
Horinaja, Jquery ve Prototype olmak üzere iki farklı versiyon şeklinde yazılmış bir slayt eklentisi. Kullandığı Div elementinin içine ne yerleştirirseniz onu slayt edebilme özelliğine sahip. Horinaja’yı diğerlerinden ayıran en önemli özellik mouse’unuzun tekerleği ile de hareket ettirilebiliyor olması. Slayt gösterisi hem otomatik hem de manuel olarak çalışabiliyor.
Web Tasarım Kaynakları #7
Zaman zaman gecikse de düzenli olarak yayınlamaya çalıştığım web tasarım kaynaklarına 7.si ile devam ediyoruz. Aslında gecikmekten daha ziyade, ikon setleri, yazı tipleri gibi hazır tasarım kaynaklarını paylaştığım haftalarda, web tasarım kaynakları serisine devam etme ihtiyacı görmüyorum. O nedenle web tasarım kaynakları serisi, hafta sayısı ile paralel ilerlemiyor.
Öncekilerden farklı olarak bu defa, hazır navigasyon menü ve website şablonlarına da yer verdim. İlginizi çekeceğini tahmin ediyorum. Ayrıca yine her zamanki gibi ücretsiz yazı tipleri, photoshop fırçaları, photoshop stilleri, hazır butonlar ve ikon setlerini de ücretsiz indirebilirsiniz.
30 Ücretsiz Profesyonel Yazı Tipi
Faith Collapsing Yazı Tipi
Yanone Kaffeesatz Bold Yazı Tipi
RSS Feed İkon Seti
Folder İkon Seti
Vintage Grunge: Photoshop Fırça Seti
Sweet Icons: Vektörel İkon Seti & PSD Dosyası
Hazır Navigasyon Menüleri – PSD Dosyası
Glossy Navigasyon Menüleri – PSD Dosyası
Exp Business – Hazır Website Şablonu PSD & Html Dosyası
Modern Outlook – Hazır Website Şablonu PSD & Html Dosyası
Wind Blows Photoshop Action Seti
Revnart Photoshop Stil Paketi
Fruit Inspired Buton Seti – PSD Dosyası
Web tasarımcılar için Google SEO ayarları
Bugün siteler arasında yaşanan en büyük rekabet, hiç şüphesiz arama sonuçlarında özellikle de Google’da üst sıralarda çıkmak için yaşanıyor. Arama motoru ve site trafiğinin takibinde kontrolün %90’ını Google’ın elinde tuttuğunu dikkate alacak olursak, web tabanlı pazarlama stratejilerinde en önemli hedefin Google’da bir numaraya yükselmek olduğuna şaşırmamalıyız.
Başka bir deyişle, web sitelerinizin daha fazla kişiye ulaştırmanın ve tanıtmanın yolu Google’da üst sıralarda çıkmaktan geçiyor. Bu noktada ise devreye Arama Motoru Optimizasyonu, yani SEO giriyor. Web sitenize uygulayacağınız doğru SEO düzenlemeleri ile geliştireceğiniz stratejiler, sitenizi arama motorlarında üst sıralarda çıkartır ve internet dünyasında sitenize itibar ve yeni bir anlam kazandırır.
Her web tasarımcıyı ilgilendiren, sitenizin SEO ayarlarını doğru yapmanın 8 yolu ile devam ediyoruz.
1. Her sayfaya Google Analytics ekleyin
Google Analytics bildiğiniz üzere Google tarafından geliştirilen ücretsiz site istastik yazılımı. Bu hizmet ile müşterinize, web sitesi ile ilgili istatistik bilgilerini ve arama motorlarındaki performansını detaylı kriterlere göre raporlayabilirsiniz.
Aynı zamanda, Goal Tracking (Hedefler) özelliğini kullanarak, anahtar kelimelere ve sitedeki içeriğe bağlı olarak, sitenizin arama motorlarındaki değerini artırabilirsiniz. Bu özelliği kullanmakla ilgili bütün detaylara bu adresten göz atabilirsiniz. Bir web tasarımcı olarak hala Google Analytics kullanmıyorsanız, üye olmak için daha fazla gecikmeyin.
Web sitesinin bütün sayfaları ile ilgili istastik bilgisi almak için Google Analytics’i sitenin her sayfasına mutlaka eklemelisiniz.
2. Meta bilgilerini eklemeyi unutmayın
Sitenizin html kodlarına ekleyeceğiniz meta bilgileri, arama motorlarında çok önemli rol oynar. Bu bilgiler potansiyel ziyaretçilerinize, arama sonuçlarında sitenizle ilgili ön bilgi ve açıklamalar sunar. Sadece site bilgilerini değil, arama sonuçlarını etkileyen anahtar kelimeleri de <meta> etiketleri ile siteye yerleştiririz. Bu nedenle meta bilgilerini sitedeki her sayfanın html kodlarına eklemek SEO bakımından çok önemlidir.
Diğer yandan, Google meta bilgilerini sitedeki sayfaları birbirinden ayırdetmek için de kullanır. Bu nedenle sayfalarda içerik tekrarı yapmamaya da özen göstermelisiniz.
Ayrıca meta bilgilerinin boşluklar dahil olmak üzere 160 karakteri geçmemesine de dikkat edin.
Daha önce hiç meta bilgisi eklemediyseniz aşağıdaki örnekler size bu konuda yardımcı olacaktır. Meta bilgilerini html kodlarınızda <head> … </head> tag’leri arasına yerleştirin.
Anahtar kelimeler için,
<meta name=”keywords” content=”e-ticaret, alışveriş, online ticaret, elektronik” />
Site açıklaması için,
<meta name=”description” content=”Online alışverişte kalitenin ve ucuzluğun adresi” />
3. Her sayfaya başlık ekleyin
İnternet tarayıcısının en üst barında görüntülenen sayfa başlığı, sayfadaki içeriğin arama motorlarında saptanmasını sağlayan en önemli faktörlerden biridir. Bu nedenle, sitenizin her sayfasında bulunan <title></title> tagleri arasına sadece sitenin adını yazmak yerine sayfaların içeriği ile ilgili anahtar kelimeleri içeren bir başlık yazmayı tercih edin. Ve bu başlığın 60 karakteri geçmemesine de dikkat etmeniz gerekiyor.
Böylece Google’da sayfalarınızın değeri artacak, bu da SEO bakımından olumlu sonuçlar sağlayacaktır.
4. Html kodlarına özen gösterin
Bir çok sitede özellikle <h1>, <h2>, <h3> gibi önemli başlıklarda kullanılması gereken html tag’lerinin ihmal edildiğini görüyorum. Bazı web tasarımcılar işin kolayına kaçarak, içeriğin tamamını sadece <div> ya da <p> tag’lerinin arasına gelişigüzel yerleştirerek, sadece tarayıcıda düzgün görünmesinin yeterli olacağını düşünüyor olabilir. Oysa Google’ın site içeriğini saptarken en çok önem verdiği html tag’leri; bir metnin ana başlığını içeren <h1> ve önem sırasına göre alt başlıkların yerleştirildiği <h2>, <h3>, <h4> … tag’leridir.
İş sadece <h1> ‘in doğru kullanımı ile de bitmiyor elbette. Html ve CSS‘in kapsayıcı ve çocuk element yapısını dikkate alarak, hiyerarşik yapısına uygun bir html kodlaması yapılması Google SEO bakımından son derece önemlidir.
5. Html kodlarınızdaki fazlalıkları azaltın
Html kodlarına direkt olarak yazılmış olan Javascript ve CSS satırları, Google örümceklerinin sitenizdeki özgün içeriği taramasını ve saptamasını zorlaştırır. Bu nedenle Javascript ve CSS dosyalarını, html yapısına ekleyeceğiniz tek satırla dışarıdan çağırmalısınız. Böylece hem html kodlarının tarayıcıya çabuk yüklenmesini sağlamış olursunuz, hem de Google’ın sitenizdeki bütün içeriği kaydetmesini kolaylaştırarak SEO bakımından da doğru bir düzenleme yapmış olursunuz.
6. Sitenizdeki içerik özgün olsun
Özgün içerik, Google SEO ile ilgili bu makalede yazdığım bütün yolların en önemlisi aslında. Çünkü Google, başka bir siteden kopyala – yapıştır yoluyla birebir aldığınız içeriği “içerik tekrarı” olarak değerlendirip, sitenizi arama sonuçlarında göstermeye gerek duymuyor. Bu nedenle sitelerinize içerik eklerken işin kolayına kaçmadan, kendinize ait özgün metinler yazmalısınız.
Buna rağmen başka bir siteden içerik hırsızlığı yaparsanız, Google algoritması bunu derhal tespit ederek, sitenizi sandbox (kum havuzu) denilen bölüme alır ve arama sonuçlarında sitenizi göstermek istemez.
7. Her sayfaya Footer linklerini ekleyin
Çoğu zaman sitenin ana menüsünü metin link yapmak yerine, daha güzel görünmesi açısından flash ya da grafik tasarımı şeklinde yaparız. Oysa ana menüyü en sade hali ile metin link halinde kullanmak Google SEO bakımından önemli bir faktördür. Çünkü Google sadece metin linklerini standart bağlantı yolu şeklinde algılar. Ancak biz web tasarımcılar, tasarımın şıklığından ödün vermemek için sitelerin ana menüsünü grafik tasarım şeklinde yapmakta ısrar ettiğimizden, bu duruma basit bir düzenleme ile çözüm yolu bulabiliriz.
Sitedeki her sayfanın en altına mutlaka Footer bölümü ekleyin ve footer linklerini yani ana menüyü en basit haliyle metin linkler şeklinde bu bölüme yerleştirin. Böylece Google’ın sitenizdeki bağlantı yollarını tespit etmesini kolaylaştırabilirsiniz.
8. Sitenize blog ekleyin
Arama motoru optimizasyonu ile ilgili yukarıda bahsettiğim bütün ayarları yaptıysanız, son olarak siteye blog bölümü ekleyerek müşterinize, siteyi sürekli olarak güncellemesi için sorumluluk verebilirsiniz. Böylece site sahibi (yani müşteriniz) sitedeki içeriği blog sistemiyle kolayca ve düzenli olarak güncelleyecek, her daim canlı siteleri seven Google’ın dikkatini çekecektir.
Ayrıca bloglar ziyaretçi sayısı ve site trafiğinin artması bakımından çok önemli bir faktördür. Sitede yayınlanan yazılar ziyaretçiler ve potansiyel müşteriler tarafından başka sitelerde paylaşılarak sitenizin pagerank’ini ve Google’daki değerini artırır. Ancak blogda da içeriğin özgün olmasına dikkat etmeniz gerekiyor.
Devamını OkuHaftalık OZD #8
Dile kolay, OZD Tasarım‘ı hayata geçireli tam 8 hafta geçti ve neredeyse her gün aksatmadan makale yayınlamaya çalıştım. Şu an veritabanımızda 61 adet makale bulunduğunu da belirtecek olursam, günde 1′den fazla makaleye tekabul ettiğini anlıyorsunuzdur : ) Umarım işlerden fırsat bulabilirim de her hafta böyle verimli geçmeye devam eder.
Geçtiğimiz haftaya, “Yeni nesil web tasarımcı olmak” başlıklı makale ile yeni nesil web tasarımcı tabirini incelemeye çalışarak başlamıştım. Bu makale haftanın en çok okunan makalesi oldu. Sonraki günlerde ise yayınladığım “Yeni başlayan web tasarımcılar için online araçlar” başlıklı makalede adı geçen siteler bir çok kişi tarafından bilindiği halde, bilmeyen arkadaşların OZD Tasarım aracılığı ile tanıştığına bizzat tanık oldum. Makalelerimin işe yaradığını görmek, gerçekten mutluluk ve azim verici.
Geçtiğimiz hafta yayınladığımız bütün makalelere sırasıyla göz atalım.
Yeni nesil web tasarımcı olmak
30+ Floral Photoshop Fırça Setleri
Yeni başlayan web tasarımcılar için online araçlar
20+ Ücretsiz Kaliteli WordPress Temaları
10+ Yepyeni İkon Setleri
10+ Yepyeni İkon Setleri
Özellikle sosyal medya ve blog kullanımının yaygınlaşmasıyla ikon setlerinin önemi de arttı. Neredeyse her gün yeni bir ikon seti yayınlanıyor. İkon tasarımı da ayrı bir meziyet. Ve tahmin ettiğinizden çok daha fazla zahmet ve sabır gerektiren bir tasarım işi. Dünyanın en iyi ikon tasarımcıları gerçekten çok kaliteli ikon setleri yayınlıyor. Ancak bir çoğu graphicriver, medialoot gibi sitelerde ücretli olarak satıldığından bir çoğumuz tarafından kullanılamıyor.
Kaliteli ikonlara ücret ödemek istemeyen tasarımcılar için, internette ücretsiz ama bir o kadar güzel ikon setleri bulmak da mümkün tabi. Son haftalarda web tasarım bloglarında ve sosyal medya ortamlarında yayınlanan 10′dan fazla yepyeni ve kaliteli ikon setlerini bir araya getirdim. Ücretsiz olarak indirmeniz için resimlere tıklamanız yeterli. Güle güle kullanın : )
Vibrant Stickers Web Icon Pack
Cute Critters Free Icon Set
Imperial Porcelain Icon Set
Social Buzz Icon Pack
Gold Embedded Leather – Social Icon Pack
Original Google Buzz Icons
Medialoot Prime – Free Icon Set
Global Warming Icon Set
Payment Method Icons
16px Weather Icons
Jive: Social Media Icon Set
20+ Ücretsiz Kaliteli WordPress Temaları
Wordpress’in blog anlayışına yeni bir boyut kazandırdığı aşikar. Aynı zamanda en iyi ve en çok kullanılan içerik yönetim sistemlerinden biri haline geldi. Durum böyleyken, WordPress tema tasarımı konusunda her geçen gün, hatrı sayılır güzel işler ortaya çıkarıyor tasarımcılar.Mevcut temayı düzenleyerek yeni tema oluşturan arkadaşlardan hiç bahsetmiyorum bile. Onları da katarsak, ciddi anlamda her gün sayısız yeni tema ekleniyor WordPress dünyasına. Ama en güzellerini kullanmak için yıllık ücret ödemeniz gerekiyor maalesef. Peki bütün güzel temaları kullanmak için ücret ödemek zorunda mısınız? Aşağıdaki temalardan da anlaşılacağı üzere, tabi ki hayır.
Sayısı hızla artarak çoğalan WordPress kullanıcılarının hoşuna gideceğini düşündüğüm ve ücretsiz indirilip kullanmaya hazır oldukça kaliteli 20′den fazla WordPress temasını bir araya getirdim. Bazılarını daha önce görmüş olsanız da bir çoğunu ben de yeni görüyorum. İçlerinde blog, resim ve video galerisi, içerik yönetim sistemi ya da e-dergi şeklinde kullanmaya elverişli her türden tema bulunuyor.
1) Bueno
2) Rockstar
3) Mainstream
4) Metamorphosis
5) Irresistible
6) Typebased
7) Blogtheme
8 ) Snapshot
9) Premium News
10) Agregado
11) Infinity
12) Color Paper
13) WP Slider
14) News CMS
15) WP Coda Blue
16) Travelogue
17) Simply Ornate
18) Zine Press
19) Freemium
20) Marangal
21) Keko
22) Zexee
23) Magazeen
Yeni başlayan web tasarımcılar için online araçlar
Web tasarım işinde yenisiniz ve ilk profesyonel tasarım işinizi aldınız. Zamanınız kısıtlı, müşterinize işi teslim etmek için çok az zamanınız var. Photoshop’u açtınız ve başladınız tasarımla uğraşmaya. Ama o da nesi?! Kaynak sıkıntısı çektiğiniz için hayal ettiğiniz tasarımı bir türlü tamamlayamıyorsunuz. Ücretsiz Font, ikon, photoshop fırçası gibi kaynaklara ihtiyacınız var. Diğer web tasarımcıların o kadar güzel fontları, ikonları ve hazır kaynakları nereden bulduğunu merak etmiyor musunuz?
Profesyonel web tasarımcılar için hiç de yabancı gelmeyen ama bu işe yeni başlayanların mutlaka bilmesi gereken ücretsiz online araçlardan bahsetmek istiyorum. Sınıfının en geniş ücretsiz hazır kaynaklarını barındıran bu web siteleri web tasarımında işinizi inanılmaz derecede hızlandıracak ve kolaylaştıracak. Bu siteler her web tasarımcının vazgeçilmezidir. Hala bilmiyorsanız, gördükten sonra sizin de öyle olacağına eminim.
dafont.com
Dafont dünyanın en geniş ücretsiz font arşivine sahip online font sitesi olarak biliniyor. Ve her geçen gün eklenen yeni fontlarıyla bu arşiv giderek büyüyor. Kategorilere ve alfabetik sıraya göre görüntülenebilen font listesi, fontu indirmeden önce istediğiniz metini yazarak bütün fontları deneme imkanı gibi kullanışlı özellikleriyle, diğer font sitelerine göre her zaman bir adım önde gidiyor Dafont. Dafont’un bu kadar popüler olmasının sebepleri bunlarla sınırlı değil. Yayınlanan fontların, dünyanın en iyi font tasarımcıları tarafından hazırlanıyor olması, Dafont’un ne kadar büyük bir font sitesi olduğunun asıl göstergesi.
Bütün web tasarımcılarının mutlaka faydalandığı bu font sitesine, her tasarım işinizde uğramayı alışkanlık haline getireceğinizden eminim.
iconfinder.net
Resimden de gördüğünüz üzere, şu an 158bin’den fazla ikon barındıran ve her geçen gün hızla büyüyen arşiviyle bence internetteki en iyi ikon sitesi iconfinder.net Web sitenizde birbirinden kaliteli ikonlar kullanmak istiyorsanız bu site alışkanlığınız haline gelecek. Aslında siteden ziyade ikon arama motoru desek daha doğru olur. İkonları ister set halinde ister tek tek görüntüleyip, farklı boyutlarda ve formatlarda ücretsiz olarak indirme imkanınız var. İkona her ihtiyaç duyduğunuzda ilk ziyaret etmeniz gereken online aracınız iconfinder.net olsun. Çünkü daha kalitelisini bulmanız çok zor. Bu kadar da iddialıyım : )
deviantart.com
Deviantart 2000 yılının ortalarında kurulduğunda bu kadar büyüyeceğini tahmin ediyor muydu bilmiyorum ama şu an sanal dünyanın en büyük sanatçı topluluğuna ev sahipliği yapıyor. Tasarımın her dalında sanatçıların olduğu Deviantart’ta, wikipedia‘nın söylediğine göre 5 Milyon’dan fazla kullanıcı ve 18 Milyondan fazla tasarım bulunuyor. Bu tasarımların arasında elbette web tasarımcıların işine yarayacak kaynaklar bulunuyor. Kullanıcıların ücretsiz olarak yayınladığı photoshop fırçaları, dokular, actionlar, gradient stilleri, hazır vektörel grafikler, PSD dosyaları, butonlar, yazı tipleri, site şablonları, stok foto vs şeklinde uzayıp giden milyonlarca kaynak, tasarım anında bütün ihtiyacınızı karşılayacak kadar geniş bir arşivden oluşuyor. Kategori yapısının kullanışlı olmasından dolayı da bu kadar geniş bir arşivde kaybolmadan gezerek, aradığınız kaynağı kolayca bulabiliyorsunuz.
sxc.hu
Sxc.hu, tasarım dünyasının çok yakından tanıdığı, yüksek kaliteli (ve ücretli) stok fotoda başı çeken istockphoto.com‘a bağlı ücretsiz bir stok foto sitesi. Yani istockphoto’dan ücretli foto satın almak istemeyen tasarımcılar, aynı foto olmasa da yine yüksek kaliteli ve işinizi görebilecek kadar başarılı ücretsiz fotoları sxc.hu‘dan indirebiliyor. Özellikle banner, showcase ve background tasarımlarında ihtiyacınız olan ücretsiz ve yüksek kalitede fotoyu başka sitede aramanıza gerek yok. İşinizi rahatlıkla görebilecek binlerce fotodan oluşan geniş bir arşiv bulunuyor bu sitede.
Hepsi bu kadar değil!
Web tasarımında işinize yarayacak online araçlar tabi ki bu kadar değil. Ama neredeyse bütün tasarımlarınızda faydalanacağınız temel siteler bunlar. Daha gelişmiş uygulamalar için kullanışlı online araçlarından daha sonra bahsedeceğim.
Devamını OkuSponsorlar
Facebook’ta beğen.
