WEB TASARIM

Web Tasarım

Web Tasarım; yaşadığımız çağın en büyük iletişim kanalı olan internet ortamında kullandığımız tüm internet sitelerinin yapımıdır diyebiliriz.

Web Tasarım; içeriklerin yerleşimi, kullanıcıların içeriklere erişimini sağlayan bir yapıdır. Ürünlerimiz, hizmetlerimiz, kurumsal yapımız, iletişim bilgilerimiz, makalelerimiz, son kullanıcıya vermek istediğimiz tüm içerikleri barındıran yapıya web sitesi denir. Bu sözü edilen yapının tasarımı ve kodlamasına da web tasarımdır diyebiliriz basitçe.

Web Tasarım

Günümüzde Web Tasarım, teknolojik gelişmelerle paralel bir şekilde sürekli gelişim ve değişim göstermektedir.

Web sitesine erişim sağlayan cihazlar değiştikçe ve geliştikçe web tasarımın mantığı da değişip gelişim göstermektedir.

Günümüzde Mobil Cihazların yaygın kullanımı sözkonusu olduğundan dolayı hazırlanan sitelerin web tasarımları da mobil uyumlu hale getirilmeye ve mobil uyumlu responsive tasarım (Duyarlı tasarım) ile web sitesi hazırlanmaya çalışılmaktadır.

Bu değişime Google gibi arama motorları da destek vermekte ve son güncellemelerle birlikte bir websitesi tasarımından istenen master seçeneklere "Mobil Uyumlu" veya "Mobil Uyumlu değil" notunu vermektedir.

Basılı işlerdeki tasarım mantığının tamamen dışında hazırlanmak zorunda olunan Web sitesi tasarımları bunun yanında güncel kodlarla birlikte harmanlanarak son kullanıcıların içeriklere erişimleri sağlanmaktadır.


Web Tasarım Nasıl Yapılır?

İki farklı ana başlıkta değerlendirilmesi gereken bir sorudur bu.

1- Görsel Tasarım

2- Kodlama

1) Görsel tasarım:

İçeriklerin yapısını ve şablonunu iyi analiz edip bu analizle birlikte içerikleri kategorilendirmek ve bu kategoriler doğrultusunda sitenin tasarımına geçilmesi gerekmektedir.

Menüler, içerikler, alt içerikler, ürünler hizmetler vd tüm son kullanıcıya eriştirilmesi istenen doneler belirlendikten sonra tasarımın hazırlanmasına geçilmelidir.

Tasarım esnek yapıda kurgulanmalı ve aşırı yoğun görsellikten kaçınılmalıdır.

Daha da detaylı anlatmamız gerekirse;

Ürün, içerik önplanda olmalıdır. Birinci önceliğimiz daima içeriğin erişilebilirliği olmalı.

Son kullanıcıyı yormadan verilmek istenen bilgi, mesaj neyse o verilmeli. Son kullanıcının diğer içeriklere erişimininen kolay çekilde sağlanması ve bu erişim mümkün olduğunca çabuk olmalı.


Örnek:

Ürünlerimiz > Alt Ürün Kategorileri > Bir Alt kategori daha > Ürün Linki

Yukarıdaki örnekte son kullanıcımız ürüne ulaşmak için 3 kategori içinden ürüne erişim sağlıyor.

Biz ise anasayfada ürün geçişeleri sağlayarak sitemize gelen kullanıcıları tek tıkla o ürüne erişimlerini sağlayabiliriz.

Ziyaretçimiz (Son kullanıcı) mümkün olduğunca hızlı ve yorulmadan içeriğe ulaşabilirse, o site o kadar başarılıdır.


2) Kodlama:

Bu kısım işin en temel kısmını ve motorunu oluşturmaktadır. Web tasarımın dış görünüşü hazırlandıktan sonra bu tasarımın en hızlı şekilde çalışabilmesini sağlayacak şekilde kodlanması gerekmektedir. Aşırı kod yükü yerine sadeleştirilmiş kodlar kullanılarak hazırlanan web siteleri her zaman daha ön planda olmuştur.

Hazır kod sistemleri, HTML, PHP gibi birçok farklı yöntemle hazırlanan tasarımın kodlanması mümkündür.

CSS3 & HTML5 kod yapısı kullanılarak hazırlanacak olan siteler arama motorları tarafından daha çok sevilmekte ve tercih edilmektedir.

Jquery kütüphanesi kullanarak hazırlanan animasyon, hareketli bölümler yerine CSS3 ile oluşturulabilen animasyonlar ve hareketli kısımlar tercih edilmeli ve sitemize hareket katılmalıdır. 

Web tasarımında nelere dikkat edilmelidir?

Web tasarımı yapılacak işin mobil uyumlu olması gerekmektedir.

Web tasarımı yapılacak işin içerik yapısı kolay olmalıdır.

Web tasarımı yapılacak işin menü yapısı anlaşılır olmalıdır.

Web tasarımı yapılacak işin interaktif olması isteniyorsa, algoritma çok iyi kurgulanmalı ve gelişime ve değişime uygun halde sitemiz hazırlanmalıdır.

Web tasarımı ile baskılı tasarımın farklı mantıklar olduğunu gözetmeli ve sanal ortama uygun halde yeni bir tasarım mantığı geliştirilmelidir.

Kurumsal yapı asla bozulmadan, aşırıya kaçmadan, minimal tasarımlara yer verilmelidir.

 

RESPONSİVE WEB TASARIM NEDİR ?

Responsive web tasarım, farklı ekran boyutlarına göre farklı görünüm alabilen tasarımlar için kullanılır. Yani tüm cihazlar (Akıllı telefonlar, tabletler, masaüstü ve dizüstü) için uyumlu şeklinde kısaca özetlenebilir. Bu kavram internete girmemizi sağlayan araçların çeşitliliğinin artmasıyla ortaya çıkmıştır. Neden responsive (uyumlu) tasarım diyecek olursak;

Responsive Web TasarımNeden responsive (uyumlu) tasarım: Web siteniz masaüstü veya dizüstü bilgisayar üzerinde gayet sorunsuz görünebilir ancak son dönemde kullanımı oldukça yaygınlaşan cep telefonu veya tabletten sitenize girildiği zaman da ziyaretçinizi memnun edecek bir görüntüyle karşılaşmayabilir. Responsive yani uyumlu bir tasarımınız olursa farklı cihazlara göre değişebilen ve düzgün bir görünüm elde etmiş olursunuz. 

Bir web sitesinin responsive (uyumlu) olduğunu nasıl anlarım: Web sitesini herhangi bir tarayıcıda açıp küçültün. Sonra da boyutunu azaltıp arttırın. Sitenin görünümü farklılaşıyorsa o site responsive yani uyumludur.

Responsive (uyumlu) tasarımın faydaları nelerdir : Şu sıralarda web sitelerinin bazılarında mobil site kavramını görüyoruz. Büyük siteler için çok sorun olmayabilir, belki de özellikle masaüstünden farklı özellikleri olan mobil site yapmak istemiş de olabilirler. Küçük ve orta ölçekli bir sitenin mobil şeklinde ayrı bir yaptıracak ekonomisi ve buna harcayacak zamanı olmayabilir. Bu durumda temanıza responsive özellik ekleyerek bu dertten kolayca kurtulabilirsiniz.

SEO içinde çok önemlidir. Artık arama motorları sitenizin cihazlarla uyumluluğunada bakacaktır.

Artık mobil ve tablet cihaz trafiği günümüzde %50 seviyesine çıkmış, bazı web sitelerinde %80 seviyelerine ulaşmıştır.


RESPONSIVE DESIGN İÇİN EKRAN ÖLÇÜLERİ NELERDİR ?

Genel olarak responsive web siteleri 3 farklı ana boyut baz alınarak hazırlanmaktadır. Bu 3 ana kırılımda; desktop 1024px, tablet 768px ve mobil 480px olarak kullanılır.

Eğer daha detaylı bir tasarım yapmak isterdeniz; mobil için 320px, tablet için 720px, yatay tabletler için 900px olan ara kırılımları da kullanabilirsiniz.

Önemli bir nokta da hangi ölçüleri kullanırsanız kullanın, sitenizin maksimum 1024px olmasını sağlayın! Bu tüm ekranlarda düzgün bir görüntü elde etmeniz için çok önemlidir. Düşünün ki 4000px’den büyük çözünürlükte siteniz açıldı. Bu ekranın tamamını kaplaması hiç hoş bir görüntü oluşturmayacaktır.

 

@media screen and (max-width: 480px) {

//mobil cihazlar için css tanımlamaları

}

@media screen and (min-width: 480px) {

//tablet cihazlar için css tanımlamaları

}

@media screen and (min-width: 768px) {

//desktop cihazlar için css tanımlamaları

 

RESPONSIVE DESIGN İÇİN GEREKLİ META TAGLAR

Kod içerisinde yer alan width=device-width bölümü site genişliğini, cihazın genişliği ile eşitler.

 

<meta name="viewport" content="width=device-width, initial 

 

Bu kod bloğu içerisinde yer alan initial-scale=1.0 bölümü ise sayfanın zoom değerini belirlemektedir. Bu değer ile birlikte sayfanın zoom değeri belirlenir ve kullanıcı tarafından zoom yapılması engellenmiş olur.

WEB TASARIM İNDİR (PSD)

Beğendiğiniz PSD ÜCRETSİZ olarak PSD'leri indirebilirsiniz. Belirli zamanlarda PSD çalışmalar eklenecektir.


 

web-tasarim-psd-indir

web-tasarim-psd-indir 

web-tasarim-psd-indir

web-tasarim-psd-indir

      

 

  

Copyright © Ankara 2015 - Aslan ÖZGÜL


Yandex.Metrica