tasarımcı

2010 Web Tasarım Trendleri

Sadelik yanlısı sanatçılar, muhteşem tasarımın zamandan bağımsız olduğunu söylerler. Evet, ideal bir dünyada eğilimleri (trendleri) görmezden gelebiliriz.

Pragmatik yaklaşımla, tasarım trendlerini ölçmenin ve analiz etmenin pek çok yolu ve metodu vardır. Özellikle bahsi geçen tasarım unsuru web sitesi ise.

Şunu kabul edelim: Web (internet) hızla değişiyor. Diğer medyalarda olduğu gibi, internet üzerinde tasarım eğilimleri sadece estetik kaygılar üzerine değişmiyor. Teknolojik değişim ve ilerleme, internet ortamındaki eğilimleri yönlendirmede zorlayıcı ve güçlü bir etkiye sahip.

2010 yılında web tasarımcıların, web tasarımının sınırlarını zorlamaya devam ettiklerini ve yeni eğilimler yarattıklarını görüyoruz.

Basılı Materyal Tasarımı

Basılı materyal tasarımları, web tasarımları için daima ilham kaynağı olmuştur. Web tasarımı, daha önce hiç basılı işler üzerinde çalışmamış web tasarım ekipleri tarafından yapılıyordu. Bu günlerde basılı işlerde yapılan çizimlerden, web tasarımcıların daha fazla ilham almaya başladıklarını görüyoruz. Tasarımcılar için ilham kaynağının, web'in ötesine geçmeye başladığını gözlemliyoruz.

Serifli (Çıkıntılı) Fontlar

Tipografinin en önemli konusu okunabilirliktir. Baskı tasarımcıları daima şerifli fontlardan hoşlanmışlar ve tasarımlarında kullanmışlardır. Çünkü şerifli fontlarda bulunan sınırlar, görünürlüğü arttırdığı gibi, font formlarının daha kolay farkedilmesini sağlar.

Sans-serif fontların, genellikle ekran üzerinde daha kolay okunduğu düşünülür. Fakat artık daha fazla kullanıcının yüksek çözünürlüklü ekranları ve font yumuşatma teknolojisinin gelişmesi ile, şerifli fontların gövde metni içinde daha kolay okunmasını sağlamaktadır.

2010 Web Tasarım Trendleri 1

Yukarıdaki örnekte gördüğünüz gibi, artık şerifli fontlar, web tasarımında düz fontların yerini almaya başlamış.

2010 Web Tasarım Trendleri 2


Büyük Manşetler

Baskı (masaüstü, basılı materyal) tasarımcıları asırlardır dikkat çekmek için büyük manşetler ve başlıklar kullanmaktadır. Basılı materyalin tesirli ve güçlü görünümleri onların okunmasıyla sonuçlanırdır. Eğer masanın üzerinde sıkıcı bir broşür görürseniz uzanıp onu almaya tenezzül eder misiniz? Muhtemelen hayır.

2010 Web Tasarım Trendleri 3

Yukarıdaki ve aşağıdaki tasarımlarda büyük manşetlere sahip web sitelerini görüyorsunuz.

2010 Web Tasarım Trendleri 4

2010 Web Tasarım Trendleri 5

2010 Web Tasarım Trendleri 6

Çok Kolonlu Yerleşimler

Tasarımcılar kendi medyalarının kısıtlamaları içinde çalışmak zorundalar. Basılı işler, tasarımcıya web ortamındaki gibi kaydırma çubuğu seçeneği sunmazlar ve tasarımlar kağıt sınırları içinde yer almak zorundadır. Çeşitli kolonlar kullanarak tasarım yapmak, sınırlı ortama daha fazla içerik sığdırabilmeye olanak sağlar.

Bu günlerde, ekran çözünürlüklerinin artması ve ızgara metodu kullanmanın avantajları ile, daha fazla tasarımcı web ortamında bu metodu kullanmaya meyilli olmaya başlamıştır. Bu sayede web siteleri daha kolay kullanıma sahip olup, aynı ekranda daha fazla içerik görüntülendiği tasarımlara sahip olmaktadır.

2010 Web Tasarım Trendleri 7

Çok kolon kullanımına örnekler görüyorsunuz. Tasarımlarda kullanılan fazla kolon sayısı, okunabilirliği olumsuz etkilemeden sayfada daha fazla içerik kullanılmasına olanak sağlıyor.

2010 Web Tasarım Trendleri 8

2010 Web Tasarım Trendleri 9


Büyük Öncü İmajlar

Bir resim, binlerce kelimeye bedeldir. Yüksek çözünürlüğe sahip baskı üzerinde bu kadar etkili olan fotoğraf, web ortamında da benzer etkiye sahip olduğu için, geniş band internet erişiminin yaygınlaşması ile internet ortamında kullanılmasını da mümkün hale getirmiştir.

Artık, büyük boyutlu ve yüksek etkili imajlar kullanılan web siteleri ile ziyaretçilerin daha yoğun deneyimler yaşamaya başladıklarını görüyoruz.

2010 Web Tasarım Trendleri 10

2010 Web Tasarım Trendleri 11

Tasarımlarında büyük ve yüksek çözünürlüklü imajlar kullanılan web sitelerine örnekler.

2010 Web Tasarım Trendleri 12

2010 Web Tasarım Trendleri 13


Diyagramlar ve Infografikler

Baskı tasarımcıları, yıllardır karmaşık bilgileri aktarmak için info grafikleri kullanıyorlar. Bu örnekler özellikle dergilerde ve yıllık raporlarda kendilerini gösteriyorlar.

Grafikler, karmaşık ilişkileri ve oranları anlatma-gösterme konusunda düz metinden çok daha etkililer. Infografikler sade görünümlerine rağmen oldukça zengin içeriğe sahip olabilir ve çok şey anlatabilirler. Artık daha fazla web tasarımcının info grafikleri ve benzeri çalışmaları web sitelerinde kullanmaya başladıklarını görüyoruz.

2010 Web Tasarım Trendleri 14

Yukarıdaki örnekte, tasarımcı yeteneklerini info grafik ile ziyaretçilerine sunarak etkili bir deneyim yaşatıyor.

2010 Web Tasarım Trendleri 15

2010 Web Tasarım Trendleri 16

2010 Web Tasarım Trendleri 17


Sadelik / Gösterişsizlik

Saint Exuper bir defasında şöyle demiş: "Mükemmelliğe; artık eklenecek bir şey kalmadığında değil, çıkarılacak bir şey kalmadığında erişilir." Tasarımda sadeliğin pek çok avantajı vardır.

Hick Kanunu bize her bir seçenek artışının karar vermek için (logaritmik olarak) daha fazla zaman gerektirdiğini söylüyor. Ek olarak anlamlılık teorisi bize sinyale eklenen her gürültünün, sinyalin kalitesini düşürdüğünü söylüyor. Sinyalin web sitesi olduğunu ve gürültünün de gereksiz yere eklenmiş içerik olduğunu düşünürsek, daha fazla gürültü (noise-gereksiz içerik) daha az etkili web tasarımı anlamına gelmektedir.

Sade tasarımlar daha kolay kullanıma ve anlaşılabilirliğe sahip olur ve iletilmek istenen mesajın daha net ve keskin olmasını sağlar.

Azla Yetinen ve Izgara (Grid) Tasarımlar

Asgarici (minimalist) yaklaşım güçlü ve bir o kadar da zor bir zanaattir. Asgarici yaklaşım gerekli olan dışında hiç bir şeyin olmamasıdır. Gereksiz her şeyin kaldırılması, sunulan elemanların maksimum etkisi ile sonuçlanmaktadır.

Azla yetinen asgarici tasarımlar etkili olabilmek için grid (ızgara, çok sütunlu, kolonlu) sisteme ihtiyaç duyarlar. Doğal olarak, bol miktarda beyaz boşluğa sahip olan ancak ızgara yapısına sahip olmayan minimalist tasarımlar, ziyaretçide kopukluk ve düzensizlik etkisi yaratırlar. Izgara yapısı bie organizasyon ve bütünlük sağlar.

2010 Web Tasarım Trendleri 18

2010 Web Tasarım Trendleri 19

2010 Web Tasarım Trendleri 20


Tek Sayfa Yerleşimleri

Yalınlaştırmanın pek çok yolu vardır. Tek sayfa tasarımları bize bu yollardan ikisini sunmaktadır: Gizleme ve kaldırma.

Etkili tek sayfa tasarımları öncelikli olmayan tüm elemanların gizlenmesini sağlar. Eğer bir kullanıcı bu elemanlardan birini görmek isterse, üzerine tıklayarak açılmasını-görüntülenmesini sağlar. Bu yöntem, her şeyi görünür kılmaktan çok daha etkili sonuçlar doğurur ve sayfanın karmaşık ve bunaltıcı görünüme sahip olmamasını sağlar.

Aynı şekilde, tek sayfa tasarımlar gereksiz sayfaların da oluşturulmaması prensibine dayanır. Güçlü JavaScript kütüphaneleri ve hızlı internet erişimi sayesine, pek çok web sitesi daha az sayfaya ihtiyaç duyar hale gelmiştir. Tasarımcılar kolayca bilgilerini tek sayfaya sığdırabilmekte ve kullanıcılarına kolayca hiyerarşik içerik sunabilmektedirler.

2010 Web Tasarım Trendleri 21

2010 Web Tasarım Trendleri 22

2010 Web Tasarım Trendleri 23

Muazzam Beyaz Boşluklar

Web tasarımın eski dönemlerinde fazla ekran alanlarına ve fazla beyaz boşluklara sahip değildir. Eğer 640x480 çözünürlüğe sahip bir web sitesi tasarlamaya çalıştıysanız ne demek istediğimizi iyi bilirsiniz.

Artık büyük çözünürlüklere ve gelişmiş JavaScript kütüphanesleri ile elemanları gizleyebilme imkanına sahibiz. Dolayısı ile beyaz boşluklara daha kolay sahip olabiliriz.

Beyaz boşluk, iyi bir tasarımda kritik öneme sahiptir. Beyaz boşluk, gözümüze dinlenmek için yer sağlar. Doğal olarak da tasarımın kalitesini arttırır bu sayede hangi elemanın diğerine göre daha önemli olduğunu vurgulayabilmemize olanak sağlar.

2010 Web Tasarım Trendleri 24

2010 Web Tasarım Trendleri 25

2010 Web Tasarım Trendleri 26

2010 Web Tasarım Trendleri 27


Tipografik Yerleşimler

Web designers have long enjoyed using type as a subtle tool to communicate messages. With increasing control and capabilities, we’re seeing more designers focus on typography as the primary design element.

Güvenli web fontlarının azlığı ve onların görüntülenmesi için oldukça sınırlı seçeneğe sahip olduğumuz günler geride kaldı ve artık özgürce tipografi kullanabileceğimiz çok sayıda araca sahibiz.

Web tasarımcılar oldukça gelişmiş tipografi kullanım olanaklarına sahip olmaya başladıkça tasarımlarında font kullanımına da öncelik vermeye başladılar.

2010 Web Tasarım Trendleri 28

2010 Web Tasarım Trendleri 29

2010 Web Tasarım Trendleri 30


CSS3 Teknikleri

CSS3 tekniklerinin avantajlarını kullanmaya emin olamıyor musunuz? O halde yeniden düşünün. Andy Clarke ve Jeremy Keith gibi web öncüleri, web tasarımında "aşamalı geliştirme" tekniğini kullanmanızı telkin ediyorlar.

Web sitesi tasarımını aşamalı geliştirme yöntemi ile hazırlamak, eski tarayıcılarda sayfanın kullanılabilir olmasını sağlarken, gelişmiş teknolojiyi kullanan ziyaretçilerin de teknolojik imkanlardan faydalanabilmelerine olanak tanıyor.

Bu şekilde CSS3 tekniklerini kullanmanın avantajları, yuvarlak köşeler, katmanlı arkaplanlar ve metin ve kutu gölgeleri gibi görsel imkanlar tanımaktadır. Modern tarayıcıları kullanan ziyaretçiler web sitesinin zengin versiyonlarını görürken, eski teknolojiyi kullanan ziyaretçiler de web sitesinin temel versiyonunu görebilirler.

CSS3 Animasyonları

Web üzerinde animasyon hazırlamanın pek çok yolu mevcut. Başlangıçta yalnızca GIF imaj dosyalarında animasyon kullanabiliyorduk. Sonra Flash ile sınırlarımız genişledi. Şimdi flash, silverligh, gif, javascript hatta CSS3 teknikleri arasından seçim yaprak animasyonlar hazırlayabiliyoruz. CSS3 ile hazırlanmış zarif bir animasyon akılda kalabilir.

2010 Web Tasarım Trendleri 31

2010 Web Tasarım Trendleri 32


Yuvarlatılmış Köşeler

The Web 2.0 style of 2005 and 2006 made rounded corners popular, to the point of being annoying. At the time, creating them was difficult. There was no set way to create truly rounded corners. Instead they were simulated with CSS, JavaScript hacks and image files.

2005 ve 2006 yıllarının Web 2.0 stili yuvarlatılmış köşeleri popülerleştirdi. O zamanlar yuvarlatılmış köşeleri oluşturmak da zordu. Gerçek anlamda yuvarlatılmış köşeler yapmanın doğrudan bir yolu yoktu. Bunun yerine bazı CSS teknikleri, JavaScript kodları ve imaj dosyalarıyla oluşturulmaya çalışılırdı.

CSS3 şimdi bize doğrudan tarayıcı üzerinde yuvarlatılmış köşeler oluşturma imkanı sunuyor. Onları oluşturmak hala çok kolay olmamakla birlikte, çok daha etkili çünkü kullanıcı ekstra resim dosyaları ve JavaScript kodları indirmeye ihtiyaç duymuyor.

Bu günlerde web tasarımcılar yeni tarayıcı özelliklerinin avantajlarından artan şekilde faydalanmaya devam ediyorlar.

2010 Web Tasarım Trendleri 33

2010 Web Tasarım Trendleri 34


Kutu ve Metin Gölgeleri

Web'in ilk zamanlarından beri gölge kullanarak derinlik sağlama duygusu kullanıldı (hatta bazen aşırı kullanıldı). Fakat bu işlem çok pratik değildi. Bir metne gölge ekleyebilmek için resimler kullanmanız gerekirdi. Bu da sayfanın yüklenme süresini uzattığı gibi sayfanın bakımını da daha zor hale getirirdi. Kutu gölgeleri ise çeşitli imajlara ve CSS hilelerine ihtiyaç duyardı.

CSS3 çokça özelleştirilebilen, oldukça çeşitli yaratıcı efekt oluşturmaya olanak veren gölge yeteneklerine sahip. Sadece dış gölge değil, iç gölgeler de oluşturmanıza izin verecek kadar kapsamlı. Yaratıcı tasarımcılar bu CSS3 efektlerini kullanarak kabartma ve basık etkiler kullanılan tasarımlar yapmaya başladı bile.

2010 Web Tasarım Trendleri 35

2010 Web Tasarım Trendleri 36

2010 Web Tasarım Trendleri 37

2010 Web Tasarım Trendleri 38

RGB ve Opaklık

Yıllardır, web üzerinde opaklık ve transparanlık oluşturmak neredeyse imkansızdı. Bunu yapmak için üç seçeneğiniz vardı: düz resimler kullanarak transparanlığı simüle etmek, PNG kullanarak tarayıcı farklılıkları ile mücadele etmek ya da CSS'in temel transparanlık seçicileri ve filtreleri ile boğuşmak.

CSS3 RGB özelliklerinin opaklığını sağlamak için daha iyi tutarlılık ve özgürlük sağlamaktadır. Transparanlığın avantajlarından faydalanabileceğiniz sayısız yöntem ile, belirli bölgelerde girift arkaplanlar kullanabilir ve bazı bölgelerde de yarı transparan renkler kullanabilirsiniz. Eskiden, bu etkiyi oluşturmak pratik değil hatta imkansızdı.

2010 Web Tasarım Trendleri 39

2010 Web Tasarım Trendleri 40

2010 Web Tasarım Trendleri 41


Taşınabilir Aygıtlar İçin Tasarımlar

Taşınabilir web kullanıcılara milyonlarca seçenek sunmaktadır. Bir sırada beklerken banka hesabını kontrol edebilmek, metroda beklerken takımın skorlarını inceleyebilmek ya da yolculuk ederken Twitter hesabını güncelleyebilmek gibi. Ayrıca taşınabilir dünya hızla büyümeye de devam ediyor.

Bu günlerde şirketlerin web sitelerini taşınabilir web üzerinde nasıl göstereceklerini düşünmeye başladıklarını görüyoruz. Yenilikçi şirketler ise çoktan, kullanışlı taşınabilir web wersiyonlarına sahip etkili web siteleri oluşturdular bile.

2010 Web Tasarım Trendleri 42

2010 Web Tasarım Trendleri 43

2010 Web Tasarım Trendleri 44


Yaratıcılık

Sosyal medya kullanımının patlayarak büyümesi, insanların birbirlerine bağlanma ve bazı şeyleri tutku ile paylaşmak istemesiyle mümkün hale geldi.

Tasarım alanında diğer insanların çalışmalarının artan şekilde paylaşılmasına tanık oluyoruz. Tasarımcılar olarak bizler, herkesin yaratıcı çalışmaları ile bombardıman altındayız. Bu durum yalnızca tasarım standartlarının kalitesinin yükselmesine olanak sağlamakla kalmayıp, fikirlerin de paylaşılmasına olanak sağlamakta, yaractıcı ve yenilikçi bir kültürün de oluşmasına zemin hazırlamaktadır.

Temiz Çizimler

Eğer siz de benim gibi Disney filmleri ile büyümüş iseniz, animasyon üzerindeki yer bir çerçeveyi oluşturmak için sarfedilen efora da hayran kalmışsınızdır. Mürekkep ve kalem ile yapılmış çizimler evrim geçirerek yerini gelişmiş araçlara bıraktı ve bu da bizlere tasarımda daha yaratıcı olma fırsatı tanıdı.

2010 Web Tasarım Trendleri 45

2010 Web Tasarım Trendleri 46

2010 Web Tasarım Trendleri 47


Arkaplan Dokuları

Arkaplan dokuları web de yeni değil. Fakat son aylarda bu tekniğin ilginç varyasyonları görünmeye başladı.

2010 Web Tasarım Trendleri 48

2010 Web Tasarım Trendleri 49

2010 Web Tasarım Trendleri 50


Küçük Resimler / Resim Önizlemeleri

You may be saying, “Thumbnails have been around since the dawn of the web. How is this a trend?” True, they have always been used, but only very simply. You would have a thumbnail that you could click on to get a bigger image. It did the job but was boring.

Şunu söylediğinizi duyar gibiyim, "Küçük resimler webin erken dönemlerinden beri kullanılıyordu. Nasıl trend olabilirler?" Doğru, hep kullanıldılar ancak oldukça basit şekilde. Eskiden küçük bir resim üzerine tıklandığında daha büyüğü açtırabilirdik ancak bu biraz zahmetliydi.

Son bir kaç aydır tasarımcılar kendilerine şunu sormaya başladı, "Küçük resimleri daha ilginç hale nasıl getirebiliriz?" Bu soru küçük resimlerin daha kullanışlı ve akıllı örneklerini bulmaya yol gösterdi.

2010 Web Tasarım Trendleri 51

2010 Web Tasarım Trendleri 52

2010 Web Tasarım Trendleri 53

2010 Web Tasarım Trendleri 54

2010 Web Tasarım Trendleri 55


Suluboya

Webin evrimi esnasında tasarımcıların farklı kaynaklardan artan şekilde ilham aldıklarını gördük. Elbette güzel sanatlar'ın da kaynak olarak kullanıldığını görmek şaşırtıcı olmasa gerek.

Web tasarımlarında suluboya simulasyonlarının ortaya çıkması web sitelerine yumuşak zarif bir görünüm getirdi ve ziyaretçi üzerinde rahatlatan bir etki bıraktı.

2010 Web Tasarım Trendleri 56

2010 Web Tasarım Trendleri 57

2010 Web Tasarım Trendleri 58


El Yazısı

Elyazısı stilde tipografi kullanılan web sitelerinin de yoğunluklu olarak kullanılmaya başladığını görüyoruz.

2010 Web Tasarım Trendleri 59

2010 Web Tasarım Trendleri 60

2010 Web Tasarım Trendleri 61

2010 Web Tasarım Trendleri 62


Sosyal Medya

Bu günlerde insanların google'dan daha fazla Facebook'ta zaman geçirmesi sonucunda tasarımcılar da sosyal medyayı web sitelerine eklemenin yaratıyı yollarını bulmaya başladılar.

Bazı tasarımcılar içeriklerini önce sosyal medya ağlarında ayayınlamaya ve sonrasında bu içerikleri web sitelerine entegre etmeye başladılar.

2010 Web Tasarım Trendleri 63

2010 Web Tasarım Trendleri 64


Pozisyonu Sabit Elemanlar

Artık modern tarayıcılar pozisyonlara daha çok destek vermeye başladılar. Bu sayede elemanları dilediğimiz yerde sabitlemeye ve daha akıllıca görüntülemeye başladık.

Sabit elemanlar kullanıcı deneyimini arttırıcı ve akılda kalıcı etkiye sahipler. Bunun sayısız yaratıcı örneği bulunmakta ve tasarımcılar sabit pozisyon kullanmanın avantajlarından faydalanmaya devam ediyorlar.

2010 Web Tasarım Trendleri 65

2010 Web Tasarım Trendleri 66

2010 Web Tasarım Trendleri 67

Görüşlerinizi bizimle paylaşmanızdan mutluluk duyarız.

2011 Trendleri yazımızda görüşmek dileği ile.


Copyright Notu:

Bu içeriğin her hakkı WebDesignerDepot.com sitesine aittir. İçerik, İngilice olan web sitesinden serbest çeviri yöntemi ile Türkçe'ye tercüme edilmiştir.

Copyright © WebDesignerDepot.com. This content translated to Turkish from WebDesignerDepot.com

Son Güncelleme Tarihi: 2010-06-01 18:50:01
Yazar: Murat Uysal

Sayfa Özeti: 2010 Web Tasarım Trendleri

Sayfa Açıklaması: 2010 yılı web tasarım trendleri, tasarım yaklaşımı font kullanımı ve diğer eğilimler.

Anahtar Kelimeler:

internet çözümleri