Yeni nesil web tasarımcı olmak

6 Nis 2010 tarihinde eklendi. Blog | 2 yorum

Makaleme, her web tasarımcıyı ilgilendirecek bir soru ile başlamak istiyorum. Web tasarım trendlerini takip ediyor musunuz? Yoksa “Hayır, bildiğim bana yeter” diyenlerden misiniz? Eğer bu sektörde itibar kazanmak istiyorsanız trendi takip etmeli ve yeniliklere açık olmalısınız. Ve bu yeniliklere tasarımlarınızda yer vermekten çekinmemeniz gerekiyor. Yenilenmek, hayatta kalmaktır. Öyle ki kendini yenilemeyen hücrelerin öldüğü gerçeğini de hatırlayarak, kendinizi yenilemenin yollarını arayın. Aksi takdirde, web tasarım gibi çağımızın en geniş freelance sektörlerinden birinde farkınızı yaratamazsınız.

En son web teknolojilerini destekleyen tarayıcılara “yeni nesil tarayıcı” denildiği gibi o teknolojiyi kullanan tasarımcıya da “yeni nesil web tasarımcı” diyebiliriz bence. Ve bu konuyla ilgili giriş paragrafından iki ana başlık çıkarabiliriz.

1. Trendi takip etmenin yolları

2. Web tasarım trendleri

Konuyu birbiriyle doğrudan bağlantılı bu başlıklar halinde incelediğimizde,  yeni nesil web tasarımcı olmak için gerekli ipuçlarını öğrenmiş olacaksınız.

1. Trendi takip etmenin yolları

Yeni nesil web tasarımcı olmanın yolu bu sektörde trendi takip etmekten geçiyor. Hızla gelişen ve dolayısıyla değişen web teknolojisini takip etmek kolay sayılsa da işiniz sadece takip etmekle bitmiyor. Bir de o teknolojiyi öğrenip web sitelerinizde kullanmanız gerekiyor. Bu da tabi ki fazladan efor ve zaman kaybı demek. Ama bunu başardığınızda, size getirdiği itibar ve finansal kazanç, harcadığınız emeğe kesinlikle değer.

Blogları takip edin: Web tasarım trendini takip etmenin en kolay yolu, dünyanın belki de en iyi freelance tasarımcılarının düzenli olarak yazdığı web tasarım bloglarını okumaktır. İngilizceniz olmasa bile “mavi renk kullanılan web siteleri”, “grunge efektli web siteleri” gibi güzel web sitelerinden derlenen harika örnekler yayınlanıyor. Bu tasarımları incelemek için ingilizcenizin olması gerekmiyor. Ayrıca Webrazzi, Bilgirgec gibi internet dünyasını yakından izleyen Türkçe blogları mutlaka düzenli olarak okuyun.

Sosyal Medyada Yer Alın: Zamanınızı Facebook’ta sadece Farmville oynayıp, komik video izleyerek geçirmek yerine sosyal medyayı iş konusunda lehinize çevirebilirsiniz. Sosyal medya ortamlarında tasarım gruplarına katılın ve aktif olarak yer alın. Beğendiğiniz web tasarımcıların Twitter sayfalarını takip edin. Araştırmalara göre, haberler en hızlı sosyal medya ortamlarında yayılıyormuş. Tasarım dünyasındaki haberleri de en hızlı sosyal medyadan öğrenebilirsiniz.

Sörf yapın: Sörf yapma sözünü uzun zamandır kullanmıyorum sanırım. İnternette gezmenin adına “sörf yapmak” diyorduk yıllar önce : ) Sadece blogları değil, ne kadar çok web sitesi gezerseniz aklınızda o kadar fazla tasarım kalacaktır. Sitelerde ilk defa karşılaştığınız özellikleri ve stilleri inceleyin. Sadece “güzelmiş” diyip geçmeyin. Beğendiyseniz onu öğrenmenin bir yolunu bulun. İnternette istemediğiniz kadar tasarım dersi bulunuyor.

Esinlenin: Tasarımda trendi takip ederken kendinizi geliştirmenin en basit yolu esinlenmektir. Beğendiğiniz tasarımlardaki yeni stilleri öğrenerek tekniğinizi geliştirin. Bu noktada dikkat etmeniz gereken nokta, tasarımın aynısını kopyalayıp çalmak yerine esinlenerek kendi  tarzınızı yaratmaya çalışmaktır. Böylelikle trendi kendinize göre yorumlamış olacaksınız.

2. Web tasarım trendleri

Web tasarım trendleri bir yana, yeni nesil web tasarımcı olmanın bana göre ilk koşulu, öncelikle Table‘lardan tamamıyla vazgeçip html kodlaması için DIV kullanmaya başlamanızdır. Eğer hala Table ile kodlama yapıyorsanız daha fazla geç kalmamak için bir an önce Div yapısına alışsanız iyi olur.

Hiç kuşkusuz, web tasarım trendine bu yıl CSS 3 ve Jquery hakim. Tarayıcıların CSS 3′ü hala bütün özellikleriyle desteklememesini de düşünürsek, bu trend en az bir kaç yıl daha devam edecek gibi geliyor. CSS 3 ve Jquery’nin hayatımıza girişi ile birlikte bakalım web sitelerinde neler moda?

@font-face:

Arial, Times New Roman gibi standart sistem fontlarını web sitelerinde kullanmaktan sıkılanlar ya da başlıklarda ve Header, Banner gibi özel alanlarda farklı yazı tipi kullanmak isteyenler, daha önce sIFR, Cufon gibi Flash ve Javascript’in ortak uygulamalarını kullanmak zorunda kalıyordu. Bu da oldukça zahmetli bir uygulamaydı. CSS 3 dahilinde @font-face özelliğinin yayınlanmasıyla birlikte kullanım kolaylığı dolayısıyla hızlıca yaygınlaştı. Neredeyse bütün yeni web sitelerinde karşılaşmaya başladık.

Siz de aşağıdaki satırları CSS dosyasına ekleyerek, sitenizde @font-face kullanmaya bir an önce başlasınız iyi olur. Böylece daha etkileyici başlıklar ve Header’lar oluşturabilirsiniz.

Bütün tarayıcılarda sorunsuz olarak çalışması için Fatih Hayrioğlu‘nun konuyla ilgili bu yazısından yardım alabilirsiniz.

Text-shadow:

Şüphesiz CSS 3′ün en çekici özelliklerinden biri text-shadow. Internet Explorer ısrarla desteklememeye devam etse de Firefox, Chrome, Safari gibi yeni nesil tarayıcı kullanıyorsanız, sitelerde sıkça kullanılmaya başlanan gölgeli yazılarla siz de karşılaşmışsınızdır.

Kullanımı da çok basit. text-shadow: #000 1px 1px 1px şeklinde yazarak istediğiniz gibi düzenleyebilirsiniz.
border-radius: explorer desteklemiyormuş, kimin umurunda? Explorer’ın kendisi utansın.

Box-shadow:

Son zamanlarda web sitelerinde gölgeli kutulara rastlıyoruz. CSS 3′te box-shadow özelliği ile DIV’lere gölge vererek sitedeki kutuların gölgeli görünmesini sağlayabiliyorsunuz. Explorer desteklemese de diğer tarayıcılarda sitenizin daha şık görünmesini sağlayabilirsiniz.

Box-shadow’un Mozilla (Firefox) ve Webkit (Safari, Chrome..) tarayıcıları şeklinde olmak üzere 2 farklı şekilde kullanımı var.

-moz-box-shadow: #000 1px 1px 1px

-webkit-box-shadow: #000 1px 1px 1px

Renk kodu ve gölge değerleri ile oynayarak farklı stiller elde edebilmeniz mümkün. Bu sayfadaki örnekler işinize yarayabilir.

Border-radius:

Ve nihayet yuvarlak köşeler yapmak için imaj kullanmak zorunda değiliz artık. DIV’lerin köşelerini box-radius özelliği ile istediğimiz yarı çapta yuvarlayabiliyoruz. Box-shadow ve box-radius’ü bir arada kullanarak çok şık kutular oluşturulabiliyor. Siz de bu şekilde bir kullanıma alışmakta iyi edersiniz.

Border-radius de aynen box-shadow’da olduğu gibi mozilla ve webkit için ayrı ayrı yazılmak zorunda.

Bütün köşelerin yarı çapı aynı olduğu durumlarda;

-moz-border-radius: 5px

-webkit-border-radius: 5px

Ancak her köşe için ayrı ayrı yarı çap yazılan durumlarda kullanımı Mozilla ve Webkit özelliklerinin yazılımı biraz farklı.

Mozilla tarayıcıları için;

• -moz-border-radius-topleft:5px
• -moz-border-radius-topright:4px

• -moz-border-radius-bottomleft:5px
• -moz-border-radius-bottomright:2px


Webkit tarayıcıları için;

• -webkit-border-top-left-radius: 5px
• -webkit-border-top-right-radius: 4px
• -webkit-border-bottom-left-radius: 5px
• -webkit-border-bottom-right-radius: 2px


Jquery:

Yazılımcıların yanında tasarımcıların da yeniden javascript’e yönelmesini sağlayan bir javascript kütüphanesi, Jquery. Özellikle görsel etkiler üzerine geliştirilmiş yapısıyla birbirinden güzel animasyonlu menüler, resim slaytları ve daha bir çok hareketli yapılar hazırlanabiliyor Jquery ile. Ajax bilen yazılımcılar çok daha gelişmiş uygulamalar hazırlayabilir pek tabi. Ama hiç javascript bilmeyen tasarımcıların bile html kodlarına kolaylıkla ekleyebileceği şekilde basit ve kullanışlı bir yapısı var.  Bu nedenle 2009′dan itibaren en çok kullanılan, neredeyse 3 siteden 2′sinde karşılaştığımız Jquery ile küçük ama etkileyici uygulamalar oluşturabilirsiniz. Bu müşterilerinizin de hoşuna gidecektir.

Örnek olarak referanslarımdan biri olan www.camateknik.com ‘da ana menüye Jquery ile uyguladığım  animasyonu inceleyebilirsiniz. Sitelerinizde hala flash menü kullanıyorsanız, Jquery’e geçme vaktiniz gelmiş demektir.

Tipografi:

Web 2.0 anlayışının iyice benimsenmesi ve yaygın olarak kullanılmaya başlanmasıyla birlikte, web tasarımında da tipografi düzenine çok önem veriliyor artık. Önem sırasına göre düzenlenen yerleşim düzeni ve yazı tipi boyutlarının doğru seçimi ile siz de web tasarımında tipografiye önem vermelisiniz. Web tasarımında tipografi ile ilgili daha kapsamlı bir yazı yazmayı düşünüyorum. Şimdilik aşağıdaki örnekleri inceleyerek ne demek istediğimi anlayabilirsiniz.

Makaleyi beğendiniz mi?

Konu ile ilgili aklıma gelenler bunlar. Umarım beğenmişsinizdir. Web tasarımcıların kendini yenilemesi ve geliştirmesi için önemli ipuçlarından bahsettiğimi düşünüyorum. Eğer unuttuğum varsa sizin yorumlarınızla eksikleri beraber tamamlayabiliriz.

Makale ile ilgili yorum ve eleştiri yapmaktan çekinmeyin.

Benzer Yazılar: