50 İnfografik Örneği

Önceki yazımda yeni trend olan infografiklerden bahsetmiştim. Şimdi de bu bilgiler doğrultusunda 50 infografik (infographic) örneğine göz atacağız birlikte. Hepsi çok kaliteli, çok güzel örnek teşkil eden bu infografikler yardımıyla da bir sonraki aşamada dersleri toplayıp kendi infografiklerimizi oluşturmaya çalışacağız. Resim bağlantıları için de bir hatırlatmada bulunayım; infografiklerin çoğu kendi oluşturucusunun sitesinde değil de diğer sitelerde yayınlandığı için bazılarında hata yapmış olabilirim. Bu kusurumu görmezden gelerek zevkli bir incelemeyi sunuyorum.

1-Twitter Infographic

2-Obessed With Facebook

3-Dexter

4- Smokin

5- Starbucks

6- Flickr

7- Anatomy of an Energy

8- School-Prison Food

9-America’a Green Garden

10- Left Handed Facts and Statics

11- Gamers Infographic

12- How Small Businesses Are Using Mobile

13- Women in Business

14- Research in Motion’s Uncertain Future

15- Nikon vs. Canon

16- Scary Truth About Movie Theater Snacks

17- Time Line Infographic

18- Graphic Designers Roadmap

19- SV650 Infographic

20- Karl Marx

21- Simpsons Infographic

22- Last.fm Infographic

23- Pixel Infographic

24- Sony Playstation 3 Infographic

25- Sex by Numbers

26- Bing vs. Google Infographic

27- Package Fox Infographic: FedEx Vs. UPS

28- How Android Is Taking Over

29- Electric Car Infographic

30- WordPress Infographic

31- Earth Day Infographic

32- Collage Football  Infographic

33- Barcelona School of Management

34- 2010 World Cup Social Media Stats

35- How the Web has Changed the Way We Buy Music

36- Transportation Today

37- Most Bike Friendly Cities

38- Clean Water

39- Fizy İnfografik

40- Hearing Loss Statistics Infographic

41-Child Abuse and Neglect in America

42- The Marathon Meal

43- Facebook’un İlişkiler Üzerine Etkisi

44- Aile İçi Şiddet İnfografik

45- Gittigidiyor Anneler Günü Kampanyası İnfografiği

46- Mobil Pazarlama

47- Skype

48- Animals&Humans: What’s the diffirence

49- Aldatma İnfografiği

50- Color Psychology

 

 

 

 

15 Güney Afrika Dünya Kupası Kaynağı

İçimiz buruk bir organizasyonu daha izlemeye az bir zaman kaldı. Fifa Dünya Kupası 2010 için takımlar Güney Afrika’da muhteşem stadlarda oyunlarını sergileyecekler. Biz de milli takımımızın gidemediği bu turnuvayı izleyeceğiz şüphesiz. Tabi sadece televizyondan değil bunun yanında internetten de destek alacağız. 2006 ve 2002 turnuvalarında internetten bu kadar nimetlenmek mümkün değildi aslında. Şimdi ise yüksek hızdaki internet, gelişen internet teknolojileri çok şey sağlıyor. Bu yazımda internette bize kaynak olabilecek, stadlar, turnuva, oyuncular, konaklama, iddia, kampanya ve daha birçok konuda öncülük edebilecek Güney Afrika Dünya Kupası sitelerini derledim.

1-footballworldcup.com

Maç biletlerini temin edebileceğimiz, sağlık hizmetlerini alabileceğimiz bir site. Bu bilgiler yanında seyehat paketleri de sunuyor.

2-fifa.com/worldcup

Organizasyonun Fifa tarafından hazırlanmış resmi sayfası. Oyuncular, stadlar, takımlar, maçlar, gruplar hakkında bilgi alabiliyor, haberlere yorum yapabiliyoruz. Bu hizmetlerin dışında video ve resim galerisi servisi de mevcut.

3-worldcup2010southafrica.com

Takımlar, gruplar, stadlar ve maç takvimi hakkında bilgi alabildiğimiz sitede otel, araç kiralama gibi bilgilere de yer veriliyor.

4-en.wikipedia.org

Organizasyonla ilgili Wiki sayfası. Turnuva ile ilgili çok ayrıntılı bilgilere ulaşabiliyoruz.

5-betonworldcup2010.com

Futbol olup da bahis olmazsa çok ayıp olurdu. İşte bunun için bu sitede turnuva boyunca bahis durumları takip edilip, oynanabilecek. Üyelik gerektiriyor. Oranlara ve ücretleri de görmek mümkün (:

6-d6media.com Masaüstü Aracı

Turnuvayı siteleri dolaşmadan skor, gelecek maç, stad bilgilerini masaüstümüzden takip etmek için hazırlanmış güzel bir araç.

7-southafrica.info

Turnuva hakkında bilgilerin yer aldığı sitede geri sayım sayacı da mevcut. Ayrıca haberler, stadlar arası harita ve taraftarlar için yolculuk bilgillerine yer veriliyor.

8-world2010cup.com

Haberlerin kategorilere ayrıldığı, bilet bilgilerine, konaklama bilgilerine, stadyum bilgilerine yer veren hazırlık maç takvimini de elinde bulunduran güzel bir site. Ayrıca videoları da izleyebiliyoruz.

9-soccernet.espn.go.com/world-cup/

Ağırlıklı olarak turnuva hakkındaki haberlere yer verilen, günlük fikstürlerin görüntülendiği Soccernet sitesi.

10-worldcupblog.org/world-cup-2010

Değişik dillere kolayca çeviri imkanı sağlayan, bahis, alışveriş, seyehat, bilet ve haber kategorilerinde içerikler paylaşan turnuva blogu. Ülkemizdeki arkadaşlardan da tutan olursa sevineceğiz.

11-worldcup2010southafrica.org.uk

Haber, konaklama, bahis, fikstür gibi konulara geniş kapsamlı yer veren bir site.

12-sa-venues.com/2010/

2010 Güney Afrika Dünya Kupası stadları hakkında grafik/harita yardımıyla bilgi veren sayfa.

13-90turk.com

Turnuva ile ilgili ulaşabildiğim tek Türkçe sayfa maalesef  Coca Cola’nın hazırladığı kampanya sayfası. Bu sitede detayları yazan kampanya ile 90 kişi dünya kupasını izlemek üzere Güney Afrika’ya gidiyor.

14-foxsports.com.au/football/worldcup2010

Fox spor servisine ait sayfada turnuva haberleri yer alıyor. Ayrıca video ve resim galerisi de mevcut.

15-eurosport.yahoo.com/football/world-cup

Yahoo’nun spor servisi ve kanalı Euro Spor’un sayfası da turnuva ile ilgili en kapsamlı kaynaklardan birisi. Haberler, videolar, resimler, stad bilgileri ve daha birçok içeriğe yer veriliyor.

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

10 İlham Kaynağı WordPress E-Ticaret Tasarımı

WordPress temelinde her ne kadar blog içerik yönetim sistemi olsa da birçoğumuzun farklı projelerde kullandığı bir ilaçtır. Gerek firma tanıtım siteleri için, gerek ürün sergilemek için gerekse e-ticaret için. Bu durum da WordPress’in kullanıcılara sağladığı dizayn esnekliğinden kaynaklanıyor. Birçok içerik yönetim sistemi kendi fonksiyonları dışındaki öğelere yer vermezken WordPress’e istediğimiz herşeyi entegre edebiliyoruz. Bu yazımda da WordPress’in blog haricinde e-ticaret için kullanıldığı yerleri derledim. İlerleyen günlerde bunu sağlayan eklentileri de derleyip bilginize sunacağım.

1-camerashopper.info

2-icondock.com

3-daisyjs.com

4-demo.billionstudio.com

5-neuro-enhancement.com

6-simpleshopper.info

7-ebookshopper.net

8-flowershopper.info

9-babyshopper.info

10-camerashopper.info

10 Güzel Kod Gösterim Şekli

Bloglarımızda veya diğer internet sayfalarımızda ara ara kodlar yayınlıyoruz. Yayınlanan bu kodların tasarım bütünlüğünü bozmaması ve okunabilirlik oranı da oldukça önemlidir. Bu derlememde bu kriterleri ele alan 10 farklı kod gösterim şekline göz atacağız. Aslında daha birkaç adet fazla gösterim şeklini listeye alabilirdim ancak onlar da listeye aldıklarımın aynılarıydı. Bu yüzden farklı olanlara göz atmak daha iyi olacak.

1-siarto.com

Renklendirme ve arkaplan rengi ile birlikte okunabilirliği geçrekten muhteşem. Tasarım bütünlüğü de ele alınarak harika bir gösterim elde edilmiş. Ayrıca CSS, HTM, PHP dillerinin hepsinde renklendirme yapılmış.

2-goodbytes.be

Arkaplan çok hoş görünmese de renklendirmesi oldukça iyi. Ayrıca siyah tasarım içinde hemen fark edilebiliyor. Yine farklı dillerde renklendirme yapılmış.

3-onwired.com

Listedeki en güzel kod gösterimlerinden. Satırların farklı renkle ve numaralarla gösterilmesi çok hoş. Ayrıca tasarım bütünlüğünü bozmayan renklerle ve okunaklı yapılması da müthiş. Tek eksiği kod renklendirmesinin eksik olması 🙂

4-24ways.org

Satırların numaralarla belirtilmesi ve her satırın farklı iki renkle ayrılması okunmasını kolaylaştırıyor. Her ne kadar kodlarda renklendirme yapılmasa da seçilen kod rengi okunabilirliği arttırıyor. Bu gösterim şeklinin en büyük artısı kodların en altında kod kaynağının txt dosyasında verilmesidir. Kopyalama yapılması için güzel bir özellik.

5-snipt.net

Renklendirme yapılması ve kod alanının diğer alana göre daha açık bir renkle gösterilmesi oldukça hoş.

6-alexsancho.name

Satırların numaralandırılmış olması ve satırların altının çizgilerle belirtilmesi güzel ve kullanışlı. Renklendirme yapılmasa da seçilen kod rengi aykırı durmuyor. Ancak kodu kopyalamak istersek biraz uğraşıyoruz çünkü satır numaraları ile birlikte ve aradaki boşlukları da alarak kopyalanıyor. Kaynak gösteriminde bile aynı sorun var. Bir artısı da kodun istendiğinde gizlenebilmesi.

7-viget.com

Kod alanının farklı bir renk ile belirtilmesi ve genel dizayna aykırı durmaması oldukça güzel. Uzun kod satırları için üzerine gelince alanın büyümesi çok kullanışlı. Renklendirme olmasa da rahat okunabiliyor. Ayrıca kopyalama yapmak çok basit. Tek kötü yanı numaralandırma yok.

8-yakuter.com

PHP, CSS, HTML ve diğer dilleri desteklemesi ve renklendirme yapması çok güzel. Ayrıca kaynak kodu görüntüleme ve kopyalamayı kolaylaştırma, yazıcıdan çıktı almak için buton bulunması, panoya kopyala butonunun bulunması çok büyük bir artı. Erhan’ın kullandığı bu gösterim şekli WordPress’e ait  Syntax Highlighter eklentisi sayesinde yapılıyor.

9-kadirgunay.com

Renklendirme ve okunabilirlik oldukça iyi. CSS, HTML, JavaScript ve diğer birçok dili de destekliyor.

10-veerle.duoh.com

Kod alanının çizgili kağıt gösteriminde belirtilmesi ve her satırın hatasız gösterimi muhteşem. Numaralandırma, kod renklendirme de çok iyi. Ayrıca seçilen renkler de çok güzel. Listedeki en iyi gösterimlerden birisi de budur.

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 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