İnternet Sayfalarının Ölçüsünü Alın

Tasarım yaparken veya CSS kodlaması esnasında ölçüler çok önemlidir. Drag and drop ruler ise yatay ve dikey iki tane cetvel ile herhangi bir internet sayfasının ölçülerini pixel, cm, ve in birimlerinde görebilmemizi sağlıyor. Ayrıca sayfa kenarlarındaki klavuz cetvellerinden de konumlandırmaları fevkalade görebiliyoruz.

Kullanımı oldukça kolay olan servisin sağlayacağı katkı; tasarım veya kodlama esnasında nesneler arasındaki ölçüleri, genel hat ölçülerini rahatlıkla görebilmek.

50 Mavi Tonlu İlham Kaynağı Tasarım

Mavi renk insana huzur verir ve rahatlatır. Deniz, gökyüzü gibi insanı rahatlatan doğa bileşenleri de mavi renktedir. Mavi gözlü insanlar daha ilgi çekicidir. Site tasarımlarında da mavi rengin önemi çok büyüktür. Mesela kendi blogumda mavi tonlar ağırlıklı ve rahatlatan bir görünümü var. Yine bakıldığında yeni nesil sitelerin birçoğu mavi renkleri mutlaka kullanıyor. Ben de buna istinaden bu yazımda mavi tonlardan oluşturulmu, ağırlığını mavi tonların oluşturduğu 50 tasarımı derledim. Bu derlememde de Türk siteleri var.

1-holidays4scubadiving

2-marketing-informatico

3-dc2009.drupalcon

4-designdisease

5-strawpollnow

6-ekochgren

7-divvoted

8-getmefast

9-aandesigners

10-dezignus

11-dgerelo

12-adventuredrop

13-serj

14-pumatalk

15-thegreatbeardedreef

16-stroybass

17-luxuscreations

18-ormanclark

19-vimeo

20-vgdesign

21-thealamobasement

22-bluedotsdesign

23-bluedotsdesign.com-Blog

24-egonautica

25-dizzain

Bu tasarımla ilgili özel not düşmeden geçemeyeceğim. Google’da yaptığım “diving” yani dalış aramasında karşıma kaç tane site çıktıysa hepsi bu tasarımın ya birebir aynısını ya da üst header resmini yürütmüşler. Bu kötü bir durum tabi.

26-indiqo

27-morphix

28-cloudia

29-webdesign-fr

30-jaesal

31-arbel-designs

32-vegasuncorked

33-samsungmobile

34-titkostelapo

35-dobisko

36-orkid

37-yapıkredi

38-hayatsu

39-erikli

40-deniztaksi

41-denizemeklilik

42-sakasu

43-hamidiye

44-galaksiajans

45-bellona

46-işbiryatak

47-mimarincesme

48-samsung

49-nivea

50-atlasjet

75 İlham Kaynağı Twitter Tasarımı

Birbirinden güzel, birbirinden yaratıcı 75 tane ilham kaynağı Twitter profil tasarımını derledim bu yazımda. Aralarında şirket profillerinden medyaya, medyadan Türk arkadaşlara kadar birçok dalda geniş kapsamlı bir derleme oldu. Bu derleme için Friend Feed‘de bildiklerinden beni mahrum etmeyen arkadaşlara da ayrıca teşekkür ederim. Derlemede renk düzeni, renk bütünlüğü ve uyumu ayrıca arkaplan resimlerini göz önünde bulundurdum.

1-boagworld

2-MrTweet

3-collis

4-djuro

5-chadengle

6-natalie

7-benek

8-divvoted

9-waynesutton

10-garyvee

11-keylimecreative

12-bleikamp

13-justcreative

14-chriscoyier

15-mike9r

16-randaclay

17-collylogic

18-ryancarson

19-ChristianWatson

20-wegotballs

21-brandstack

22-artistech

23-zacheos

24-graphicidentity

25-939design

26-symbiotics

27-chrisspooner

28-adii

29-abduzeedo

30-nicholaspatten

31-larissameek

32-schmutzie

33-JimCallender

34-jbrotherlove

35-spaksu

36-gracesmith

37-bartelme

38-cooljaz124

39-th0r

40-cheth

41-theleggett

42-GordyMac

43-webdesigngirl

44-ijustine

45-betterinpink

46-henceproved

47-arjunphlox

48-turtonmiddleton

49-antoineguedes

50-kriscolvin

51-ericwashburn

52-gelskitchen

53-nahnu

54-sahika

55-hyaman

56-skollfoundation

57-just4thealofit

58-pepsico

59-hughbriss

60-fabrikade

61-theconstruct

62-personable

63-gopalraju

64-alexpuig

65-catswhocode

66-blurup

67-PhilipsTurkiye

68-ntvmsnbc

69-erayendes

70-tsweens

71-overit

72-philipntina

73-laquesefue

74-pipitakitty

75-accyroy

50 İlham Verici Sekme Tasarımı

Hazırladığımız web sayalarında kullanış olarak çok faydasını gördüğümüz bölümlerden birisi de sekmelerdir.” Tab” olarak karışımıza çıkan bu yapılar ile aynı sayfa içinde birden fazla sayfanın verebileceği bilgiyi ziyaretçilerimiz ile paylaşma imkanı buluyoruz. Ajax’ın gelişmesi ile biraz daha görsel ve işlevsel bir hal alarak sayfayı hiç değiştirmeden bile sekmelerin altı görüntülenebilir hale geldi. WordPress temalarında da yan kısımda ve içerik kısımlarında oldukça yoğun bir şekilde kullanılmaya başlandı. Ben de sekmeli tasarımlar hazırlarken ipucu vermesi anlamında 50 tane örneği bu yazıda derledim.

1-slidedeck.com

2-popscreen.com

3-delibarapp.com

4-theofficeclue.com

5-sourcebits.com

6-dishizzle.com

7-typejockeys.com

8-imgspark.com

9-thecssblog.com

10-livestream.com

11-32round.com

12-ceusa.com

13-nameourbaby.ca

14-zunostudios.com

15-monassoc.com

16-freeagentcentral.com

17-myfonts.com

18-berttimmermans.com

19-outlawdesignblog.com

20-atebits.com

21-vyniknite.sk

22-apple.com

23-expressionengine.com

24-apple.com

25-jepcoministorage.com

26-simplifiedbuilding.com

27-getmiro.com

28-ministryofsound.com

29-cnn.com

30-bohemiancoding.com

31-veer.com

32-fidesvita.org

33-audi.de

34-wireandtwine.com

35-bigbrownbox.com.au

36-postrank.com

37-domestika.org

38-thewojogroup.com

39-whatalovelyname.com

40-kids.threadless.com

41-tumblon.com

42-mormon.org

43-jivesoftware.com

44-yourchurch.com

45-bell.ca

46-designologue.com

47-onebuttonmouse.com

48-cnn.com

49-dmry.net

50-facebook.com

Twitter ve FriendFeed İçin Arka Plan Hazırlarken Önemli Noktalar

Twitter ve FriendFeed’de biz kullanıcılara kendi dizaynımızı uygulamamız için gereken alt yapı sağlanmış durumdadır. İstediğimiz renk kombinasyonlarını ve arkaplan resmini kullanabiliyoruz. Özellikle tek parçadan oluşan arka plan resimlerinde değişik çözünürlük ve ekran büyüklüklerinde çok fazla farklar ortaya çıkabiliyor. Bir yere konumlandırılmış nesne sayfanın altına kalabiliyor mesela. İşte bu yazımda bunları en azanasıl indirebileceğimize bakacağız.

Pattern dediğimiz dolgu arkaplanlarında herhangi bir sorun yaşanacağını söylemek zor. Çünkü bu resimler her iki serviste de “tile image” seçeneği yardımıyla çözünürlüğe göre sürekli olarak tekrar eden bir biçimdedir. Yani tamamen dolgu yapmaktadır. Bu tür resimler küçüktür ve her seferinde birbirini tamamladığı için bir problem çıkartmazlar. Bunlar için çok fazla söylenecek birşey de yok zaten.

Asıl yoğunlaşacağımız nokta tekrar etmeyen tek resimlerden oluşan arkaplanlar olacak. Çünkü bazen çileden çıkartabiliyor insanı. Büyük resimler genelde tekrar etmezler. Çünkü tekrar ettikleri zaman çok aşırı farklar ortaya çıkar ve tasarım bütünlüğünü bozar. Bunun için de tekrar etmeden yerleştirilir. Ancak tekrar etmediğinde de büyük ekranlarda kenarlarda ve altta boşluklar ortaya çıkar. Yine bu da tasarım bütünlüğünü bozar. Peki kendi özel arkaplanlarımızı kullanmanın en mantıklı yolu nedir? İşte bunu birkaç adımda inceleyelim.

Örnek parça resim1-Arka Plan Resminin Yoğunluğu Tepede Olmalı

Arkaplanımızda vermemiz gereken mesajı, görseli yoğunluk olarak en üstte vermeliyiz. Çünkü her iki serviste de değişik çözünürlüklerde sorunsuz görünen ve konum değiştirmeyen kısım en üst kısımdır. Tepeden yaklaşık 100 pixel yükseklite bir alanı yoğunluk olarak kullanmalı. Yan resimde yukarıdan beyaz çizgiye kadar olan kısım 100 pixel’dir.

2-Resimleri Belli Bir Renge Doğru Yoğunlaştırmalı

Resimleri belli bir renge doğru yoğunlaştıtırsak sonrasında kullanacağımız arka plan resmi yerine renk olacaktır. Ve renk ile arka plan resmi bir bütünlük oluşturacaktır. Ayrıca bu tasarımımızın hızlı açılmasını da sağlayacaktır. Örnek resimde beyaz çigiye kadar olan alanda çok koyu bir kahverengiye doğru yoğunlaştırılmış ve sonrasında da o alnın rengi kullanılmıştır. Görüldüğü gibi bir sıkıntı da ortaya çıkmamıştır.

3-Resim Genişliği 1920 Pixel Olmalı

Şu anda piyasadaki en büyük monitör boyutlarının 106 cm FuLL HD TV’ler olduğunu düşünürsek ve bunların da 1920 pixel genişliğe kadar çıkacağını hesaba katarsak görüntü bütünlüğünde kayıp yaşamamak adına resim genişliğimizi 1920 pixel yapmalıyız. Tekrar etmesi gereken kısımları kendimiz resim üzerine işlemeliyiz.

4-Resim Üzerindeki Nesne Yoğunluğu Orta Kısımlara Dağıtılmalı

Örnek resimde mantar ve kuş resimlerinin yoğunluğunu orta bölümlere koydum. Sebebi de yaygın olarak kullanılan çözünürlüklerde bu alanın daha sık görüntüleneceğindendir. Geri kalan kısımlarda ise sürekli tekrar eden desen veya nesneler oluşturulabilir.

5-Resmin Gerçek Görüntü Kalitesi %60 Oranına Çekilmeli

Resmin görüntü kalitesini biraz azaltmalıyız ki profilimizin açılması hızlı olsun. Eğer en yüksek görüntü kalitesini kullanırsak çok geç yüklenecektir.

Örnek Twitter hesabım

Örnek FriendFeed hesabım

Son olarak dizayn bütünlüğü açısından renk paletleri de kullanılmalı.

50 İlham Kaynağı İletişim Sayfası

İnternet sayfalarının vazgeçilmezlerinden birisi belki de en önemlisi iletişim sayfalarıdır. Şirket sayfalarında iletişim bilgilerinin yanında elbette erişim, ulaşım bilgileri de olmak zorundayken kişisel sayfalarda bu mecburiyet yerini iletişim formlarına bırakıyor. Aslında bu yazı ile vereceğim örnek iletişim sayfalarında ve bölümlerinde bu bölümün önemini daha iyi anlayacağız. Ben şahsen hazırladığım sitelerde iletişim bölümüne çok özenmiyordum ve bugün anladım ki normal tasarımdan daha fazlasına ihtiyacı var bu sayfaların. 50 tane örnekte çok akıllıca, kullanışlı hazırlanmış olanlarını ele aldım. Ayrıca içinde birkaç tane yerli site de mevcut.

1-Fernando Landi

2-Radium Labs

3-Koorman

4-Paper Street

5-Mutant Labs

6-CramerDev

7-Pampaneo

8-Odopod

9-Wallace HCL

10-Baritchi

11-Aston Agency

12-Fajne Chlopaki

13-KevAdamson

14-Bert Timmer Man

15-Clear Left

16-Sprocket House

17-MB Dragan

18-Simplified Building

19-Piraja

20-Popular Front

21-Kyan Media

22-Paramore Redd

23-Sam Brown

24-Ordered List

25-Artificial Studio

26-Alexandru Cohaniuc

27-Substrakt

28-Deluge Studios

29-Thedolectures

30-Mormon

31-Roome

32-Hotel Oxford

33-Head Scape

34-Edit Studios

35-V-S-P

36-House Hold

37-Pixel Light Creative

38-Cámara de Comercio Hispano – Sueca

39-Made by Elephant

40-Kurtnoble

41-SR28

42-Cuban Council

43-BublesSOC

44-The Chemistry Group

45-Point Zero

46-Steve Ottenad

47-Ufuk Bahar Dördüncü

48-MYK-Medya

49-3Renk

50-Vodacoangency

65 Kullanışlı Footer Tasarımı

Günümüz internet sayfalarında footer dediğimiz alt kısımların tasarımları da oldukça modern ve kullanışlı bir şekilde tasarlanıyor. Daha önce de bu footer tasarımlarının incelendiği oldukça fazla yazı yazıldı. Ben de uzun zamandır bu konuyla ilgili bir derleme yapmayı düşünüyordum. Sonuç olarak 65 tane örnekten oluşan bu derlemeyi oluşturdum. Derlemeyi hem tasarım bütünlüğü hem de kullanış açısından yaptım.

1-R.U.4 Children

2-PV.M Garage

3-Launch Min

4-Fatburgr

5-Electric Pulp

6-Bela Alvorada

7-Ecoki

8-Edgepoint Church

9-Productive Dreams

10-DennisBloete

11-Johanna Hallin

12-I Primi Dieci

13-Ungarbage

14-YoDiv

15-Volll

16-Larissa Meek

17-Logo Design

18-Big Media Daily

19-Guilago

20-Melly.me

21-ZDnet

22-PlayStop

23-SimpleBits

24-Veerle’s Blog

25-nGen Works

26-Viget

27-Hopking Design

28-Freelenz

29-Ritche Linao

30-Elan

31-New Concept

32-eSpace

33-David Airey

34-Split Da Diz

35-Bristol Archive Records

36-Amuki

37-Biola

38-bcandullo

39-Albertlo

40-incubus

41-Spodek

42-Us Trendy

43-NTV MSNBC

44-Dmry

45-sr28

46-Viget

47-Tulsa Tough

48-SamRayner

49-Apple iMac

50-Judorijeka

51-Carhartt Streetwear

52-Roome

53-Obsessable

54-CSS-Tricks

55-David Hellmann

56-Kanal D

57-Web Designer Wall

58-Creamy CSS

59-Drupal Con

60-Bush Theatre

61-Evanto

62-Freshout

63-Lionite

64-Carsonified Events

65-Yapı Kredi

jQuery ile Hareketli Arkaplan Yapma

Web tasarımının önemli unsurlarından birisi arkaplanlardır. Arkaplanların da en yaygın kullanım şekli hareketsiz resimlerden oluşan kombinasyonlardır. Hareketli olanlarına şimdiye kadar pek rastlamadım işin açığı. Ben kendim blogumda header resmini hareketli yapmak istemiştim ve bunu flash dosyası yardımıyla yapabilmiştim. Ancak bu da hem blogun yüklenme süresini uzattı hem de kodların bir hayli iç içe girmesine neden olmuştu. Ancak jQuery ile hareketli arkaplanlar oluşturmak artık daha kolay olacak. Burada bir örneğine ulaşacağımız tekniğin nasıl yapıldığını öğrenmek, kaynak kodlara ulaşmak için de şuraya uğramak yeterlidir. Kesinlikle arşive alınması gereken bir döküman olduğu için buraya yazma ihtiyacı hissettim. Belki ilerleyen projelerimde sıkça da kullanacağım.

WordPress İçin Drop Down (Açılır) Menü Yapımı

Açılır menüler eskiden beri web sayfalarının vazgeçilmezlerinden olmuştur. Gerçi bir aralar raftan kalksa da şimdi yeniden canlanlamaya başladılar. Bunda hem ajax eklentilerinin, hem görsel kodlamaların gelişmesinin katkısı oldu. Son zamanlarda WordPress temalarında da sıkça görmeye başladık. Bu tür menülerin nasıl yapılacağına dair VanSEO Design tarafından güzel bir makale yazılmış. Çok faydalı bilgiler içeren bu yazıya göz atmakta fayda var.