Makale

Web Tasarım: Bir Başlangıç Rehberi

Web tasarım günümüzün olmazsa olmazlarından biri. İnternet bağımlısı bir dünyada ne amaçla olursa olsun web sitelerini kullanmak artık nefes alıp vermekten farksız. Web sitelerinin sadece kullanıcısı olmaktan çıkıp tasarlayıcısı olmaya karar verdiğinizde de karşınıza adeta koca bir evren karşınıza çıkıyor. Doğru internette web tasarım konusunda bir sürü kaynak var ama bu işe ilk defa başlayanların bilmeleri gereken kavramlar ve izlemesi gereken yollar var. Tabi ki burada yol deyince sabit bir yoldan bahsetmiyoruz, web tasarım öğrenmek isteyen herkes kendi yolunu oluşturabilir fakat web tasarımla ilgili kavramlar ve temeller bilindikten sonra tasarımcı olan kişilerin kendi yollarını çizmeleri gerekiyor.

Neden Web Sitesi Tasarlamayı Öğrenmeliyim? Hazır Web Tasarımlarını Kullansam Yeterli Olmaz mı?

Bu sorunun cevabı amaca göre değişir. Amacınız örneğin bir kurum, organizasyon veya başka bir durum bilgilendirme amaçlı bir site oluşturmaksa,veya sadece içerik yükleyeceğiniz bir blog sitesi oluşturmaksa veya amacınız için web sitesinin tasarımı, kod yapısı gibi hususlar çok önemli değilse web tasarım öğrenmenize gerek yok. Bir sürü hazır alternatif rahatlıkla işinizi görecektir. Wordpress, Wix, Joomla gibi değişik kategorilerde onlarca hazır tasarım sizi web tasarımı öğrenmeye muhtaç bırakmıyor. 

Fakat projenize göre özelleştirilebilir, istediğiniz biçimi vermek istediğiniz ve üzerinde tam hakimiyetinizin  olmasını istediğiniz bir web siteniz olsun istiyorsanız kendi web sitenizi kendiniz oluşturmanız gerekiyor. Çünkü hazır sistemler üzerinde tam hakimiyet sağlamanız çok mümkün değil. Tabi ki hazır web sitelerini gerek temalar, gerekse eklentiler yoluyla belirli bir düzeyde özelleştirebiliyorsunuz. Fakak hazır sistemlerde web sitesinin kodları üzerinde mutlak hakimiyet kurmanız çok kolay değil. Çünkü bu sistemleri profesyonel programcılar karmaşık tekniklerle oluşturdukları için derine inmek temel bir web tasarımcısı veya kodlayıcısı için çok mümkün değil.

Eğer kendiniz sıfırdan bir web sitesi tasarlamaya karar verdiyseniz bu yazı sizin için yönlendirici olacaktır.

Web Tasarıma nereden başlanır?


Web tasarıma başlarken dikkat edilmesi gereken başlıca faktörler sitenin amaçları, hedefleri, hedef kitlesi gibi unsurlardır. Web sitesi tasarımına başlamadan önce amaçların, hedefler ve hedef kitlenin özelliklerine göre tasarım şablonu oluşturulmnalıdır. Bu faktörlere göre sitenizin görsel hiyerarşisi, bağlantılar, kullanılacak teknolojilerin listelenmesi tasarım esnasında sizin için yol gösterici olacaktır. Bu aşamada kağıt üstü çizimler üzerinden uygun tasarım şablonunuzu oluşturabilirsiniz Yine bu aşamada yapacağınız siteye benzer kategorilerdeki siteleri inceleyip beğendiğiniz ve eklemek istediğiniz özellikleri ve tasarımsal yapıları belirleyebilirsiniz. Unutmamaktır ki web tasarımda özgünlük önemli bir husustur o yüzden birebir başka web sitelerini kopyalamaktan sakının.

Web tasarıma başlarken bilmemiz gereken iki kavram var bunlar Front-End ve Back-End. Front-End kavramı bir web sitesinin veya uygulamanın görünür yüzünü, görsel tasarımını, görsek hiyerarşisini ifade etmektedir. Başka bir deyişle daha çok son kullanıcıya bakan görsel tasarımsal yönü ifade etmektedir. Back-End kavramı ise web sitesi veya uygulamanın arka plandaki işleyiş kısmını ifade etmektedir. Bu işleyiş kısmı sitenin istenen işlevleri yerine getirmesi, verileri istenen şekilde yönetmesi gibi durumları ifade eder. Front-End ve Back-End kavramlarını açıklamak için bir örnek verecek olursak, bir alışveriş sitesini ele aldığımızda bu sitenin görsel tasarımı, menü yerleşimi, animasyonları gibi unsurları bu sitenin front-end unsurlarıdır. Bu sitenin müşteri kaydı, müşteri ve alışveriş ilişkileri ile iklgili veritabanı yönetimi kısacası işlevsel olaraka arkaplandaki "zekası" bu web sitesinin back-end kısmıdır. 

Web tasarımın genel olarak yukarıda behsettiğimiz font-end ve back-end olarak iki temel bileşeni vardır. Ve bu iki yapının birbiriyle uyumlu olarak tasarlanmasıyla iyi bir web sitesi ortaya çıkar. Web tasarım için bu iki bileşenin uyumlu biçimde tasarlanması gerekmektedir.

Web tasarımın front-end ve back end kısmı ile ilgili bazı kavramlar aşağıda listelenmiştir:

Front-end: HTML, CSS, Javascript, responsive ve diğerleri

Back-End: Php, Asp,.NET, Node.js, Ruby ve diğerleri 

Yukarıda belirttiğimiz front-end ve back-end unsurlarına başkaları da eklenebilir. Burada en yaygın ve temel kavramlar listelenmiştir. Şimdi konuyu biraz daha açalım:

Front-End Tasarımı

Front -End tasarımı cliend-side (istemci tarafı)  işlemleri ifade eder. Web tasarım yaparken işin front-end kısmında html-css-javascript üçlüsü mutlaka uyumlu bir şekilde tasarlanmalıdır. Bu kavramlardan;

HTML: Web sayfalarının temel iskeletini oluşturur. Html kodları sayfanın temel yapısını organize eden kodlardır. Örneğin sayfanın bölümlerinin neler olacağı temel unsur dizilimi html ile belirlenir. En son versiyonu HTML5'in yeni ve etkili özellikleriyle web tasarım iskeletinizi oluşturabilirsiniz.

CSS: Web sayfalarının görsel stillerinin oluşturulduğu kısımdır. HTML ile belirlenen bölgelerin görünüm özellikleri örneğin yazı tipleri, arka plan renkleri, arka plan resimleri, kenarlık türleri gibi görsel özellikler açılımı sıralı stil dosyaları olan css dosyalarında tutulur. HTML ile de sayfanın bazı görsel özelliklerini belirlemek mümkündür fakat bu işin css'e bırakılması gereklidir. Çünkü css dosyaları görsel stillerin hem daha kolay, etkili ve hızlı yönetilmesini sağlar ve sayfanın yükünü azaltır. Web tasarımcının Css'i etkili ve verimli bir şekilde kullanmayı bilmesi gerekmektedir. Css için kullanabileceğiniz Bootstrap, Skeleton, Pure.css gibi birçok hazır framework vardır. Ve kendiniz sıfırdan css kodu yazmadan bu frameworkleri kullanarak web tasarımda biçimlendirme işlemlerinizi yapabilirsiniz.

Javascript: Javascript aslında tarayıcıda yorumlanıp çalışabilen bir script dilidir. Web tasarımda front -end kısmın davranışsal ve animasyonel kısmınıoluşturmak için javascriptten faydalanılır. Daha net ifade etmek gerekirse örneğin bir haber sitesinde gördüğünüz kaydırmalı slider manşet sistemleri, etkili animasyonlar javascriptle yapılır. Etkili ve profesyonel web tasarım için mutlaka javascript kullanımı bilinmelidir. Javascript dosyalarını kendinizin oluşturmanıza da gerek yok, birçok amaca göre hazır birçok javascript sistemi bulabilirsiniz. Sadece bu javascriptleri web tasarımınıza entegre etmeyi bilmeniz gerekiyor. Javascript kullanırken amaç dışı kullanımlardan uzak durmak gerekiyor çünkü javascriptler gereksiz biçimde sayfaya eklendiğinde sayfaya yük olmakta ve sayfa hızlarınızı düşürmektedir.

Back-End Tasarımı

Günümüzde internet sitelerinin etkileşimsiz olması neredeyse imkansız gibi bir durum. En basitinden internet sitesindeki iletişim formu, yorum ekleme kısımlarının olması bile internet sitesinin back-end tasarımını yani arkaplanda işleyen bir kod yapısı  zorunlu kılar. Bu aşamada internet sitesinin amacına uygun biçimde çalışmasını sağlayacak bir back-end sisteminin oluşturulması gereklidir. Back-end işlemleri internet sitesinin veritabanı, sunucu yönetimi gibi server-side(sunucu tarafı) işlemleri içermektedir. Web tasarımın back-end kısmı için php, php frameworkleri, asp, asp.net, ryby gibi teknolojilerden birinin seçilerek uygulanması gerekir, ayrıca back-end tasarımı veritabanı yönetimi için vertabanının türüne göre My-Sql, Ms-Sql gibi sql dillerini de kullanmanız gerekir. Örneğin php tabanlı bir back-end tasarım için my-sql dilini, asp veya asp.net tabanlı bir back-end tasarımı için ms-sql dilini kullanmak durumundasınız. Seçeceğiniz back-end teknolojisi sizi daha başka dilleri öğrenmek durumunda bırakabilir. Örneğin seçeceğiniz teknoloji asp.net ise c# dilini de kullanmanız gerekebilir. Back-end tasarımda genel yönelim php veya asp.net tabanlı tasarımlardır. Php tabanlı profesyonel back-end tasarımları Laravel, Codeigniter, Symfony gibi frameworklerle tasarlanmaktadır. Asp tabanlı sistemler için de artık daha çok Asp.Net tabanlı tasarımlar tercih edilmektedir. Back-end web tasarım teknolojilerinin kendilerine göre avantajları veya dezavantajları bulunmaktadır ve hangisini seçeceğiniz size kalmıştır. Önemli olan kendinize uygun bir back-end teknolojisini seçerek onda uzmanlaşmanızdır.

Web tasarımın iki yüzü olan front-end ve back end tasarımlar ileri aşamada uzmanlık gerektiren bölümlere ayrılır. Ama tek başınıza web tasarım işine girişecekseniz bu alanlar konusunda öncelikle eğitim almalı ve deneme yanılma yoluyla projeler üretmelisiniz. Bu yolda mutlaka bir çok hata yapacaksınız.  Yapacağınız şey pes etmeden yola devam etmek. 

Web tasarım için hangi programlara ihtiyaç vardır?


Web tasarım için kullanabileceğiniz onlarca ücretli veya ücretsiz program bulunmaktadır. Öncelikle sırasıyla ne tip programlara ihtiyaç duyabileceğinize bakalım.

1. Kod editörü: Web sitesi kodlarını oluşturmak ve düzenlemek için öncelikle ihtiyacınız olan program iyi bir kod editörüdür. Kod editörleri html,css, javascript gibi bileşenler için oluşturulan kodları doğru olarak yazıp yazmadığınızı kontrol eden, kod bütünlüğü ve hiyerarşini gösteren, kodlardaki hataları gösteren, site dosyalarınızı bütünlük içinde organize etmenizi sağlayan yazılımlardır. Aslında kodlarınızı basit bir not defterinde oluşturup  kaydetmeniz de mümkün ama iyi bir kod editörü kullandığınızda biraz önce belirttiğimiz faydalarından ötürü kod editörü kullanmanız işinizi kolaylaştırılacaktır. Kod editörlerine örnek olarakta Visual Studio Code, Atom, SublimeText, Brackets, Notepad++ gibi programları örnek olarak verebiliriz.Bu konuda daha ayrıntılı içeriğe bu bağlantıdan ulaşabilirsiniz:

http://www.codeforyoungs.com/tr/subject_detail.php?sef=en-iyi-kod-editorleri-ide&id=194

2. Yerel(local) sunucu programları: Oluşturduğunuz web sitesinde kullandığınız php,asp gibi sunucu tabanlı işlem gerektiren kodları kendi bilgisayarınızda test etmek istiyorsanız yerel sunucu programlarını kullanmalısınız. Tabi doğrudan sunucunuza gönderip oradan da kodların çalışıp çalışmadığını kontrol edebilirsiniz fakat hızlı sonuç almak için yerel sunucu programlarını kullanmanız gerekebilir. Yerel sunucu programlarına örnek olarak Xaamp, Wamp, EasyPhp, Baby Web Server gibi programları verebiliriz.

3. Görüntü düzenleme programları: Gerek web sitesini tasarlarken gerekse de içreikleri oluştururken kullanacağınız resimleri düzenlemek,kırpmak, boyutlarını küçültmek gibi işlemler için görüntü düzenleme programlarını genellikle kullanırsınız. Bunun için bilgisayarınıza kuyrabileceğiniz programlar olduğu gibi internet üzerinden kullanabileceğiniz online programlar da mevcuttur. Bilgisayara kurabileceğiniz programlara örnek olarak Photoshop gibi ücretli programların yanında Gimp, Photoplus, Inkspace gibi ücretsiz alternatifler de mevcuttur. Online görüntü düzenleme araçlarına da Canva, Sketch.io, Remove.bg gibi örnekler verebiliriz. Örneğin Canva ile logo afiş banner gibi tasarımları oluşturabiliyorsunuz. Sketch.io ile çeşitli görselleri oluşturup düzenleyebiliyorsunuz. Remove.bg ile de görüntüleri beyaz arka planlarını kaldırıp saydamlaştıraniliyorsunuz. Bunun gibi çeşitli amaçları için kullanabileceğiniz onlarca online program mevcut.

Web tasarım yaparken yukarıda bahsetiğimiz programlar dışında başka programlara da ihtriyaç duyabilirsiniz. Fakat genel olarak yukarıdaki türden programlara mutlaka ihtiyaç duyuluyor.

Sonuç

Web tasarım eğlenceli bir yolculuk fakat bazan yola çıkan bazı engeller sizi yorabilir. Bazı şeyleri yapmak zor gelebilir. Ama profesyonelleşmek için pes etmemek ve amatörce hataları yapmak gerekiyor.

59 views
YORUMLAR