Profesyonel Bir Web Sitesi Tasarımı Yapalım

Bu yazı ile birlikte en başından başlayarak Digital Arts Dergisi için hayali bir web sitesi hazırlayacağız. Dersimiz, web sitesi için ön hazırlık, taslak oluşturma, tasarımı gerçekleştirme, dilimleyip sayfalara dönüştürme ve internet ortamına aktarma gibi aşamalardan oluşacak.



Ön Hazırlık



Bir web sitesi tasarımı gerçekte pek çok aşamadan oluşur. Bu aşamalardan ilki müşterilerinizi iyi tanımak ve ne iş yaptıklarını iyi anlamaktır. Bu kısım pek "tasarımsı" gibi gelmeyebilir, ancak bu hususta bilgi toplamak, uygun ve etkileyici bir tasarım yapmanın tek yoludur. Müşteriniz ne iş yapar, şirketinin logosu veya markaları var mıdır, ağırlıklı kullandığı renkler nelerdir, tasarımlarında ne tür bir yol izliyor, web sitesini hangi amaca istinaden yaptırıyor, bir web sitesinden neler bekliyor, hedef kitlesi kimlerdir, daha çok kimlere hitap ediyor, rakipleri kimlerdir gibi soruların cevaplarını elde etmiş olmak elbette ki işinizi son derece kolaylaştıracaktır.



Bu aşamadan sonrası, internet üzerinde ciddi bir araştırmaya geçmektir. Farklı bir ara yüz oluşturmanın en önemli yolu internette aynı sektöre hizmet veren web sitelerini incelemek ve notlar almaktır. Büyük community sitelerindeki portfolio'ları incelemek de başlangıçta kafanızda bir fikir oluşması için iyi bir yoldur.



Ön hazırlıkta yapmanız gereken diğer bir iş de, tasarımda kullanabileceğiniz tüm unsurları temin etmektir. Firma ile ilgili logolar, fontlar, kullanabileceğiniz lisanslı veya firmaya ait lisans sorunu olmayan resimler, varsa çizimler elinizde hazır olmalıdır.



Biz de bu nedenle Digital Arts logosunu Arial fontu yardımı ile hazırlıyor ve Kerem Beyit'in "Innocent Cover" isimli digital çalışmasının bir kısmını header'da kullanmak üzere bir kenara alıyoruz. (Resmi buraya tıklayarak temin edebilirsiniz.)








Taslak Oluşturma



Bir web sitesi için taslak oluşturmak çoğu tasarımcıya göre farklılık arz eder. Bazıları tasarım öncesi bir kâğıt üzerinde sitede kullanacağı yerleşimi belirleyip taslak oluştururken, kimi de direkt olarak bilgisayarda programını açar ve çalışmaya başlar. Bu da artık tasarımcının alışkanlığı ve becerisiyle ilgili bir durumdur.



Ben çalışmayı hazırlarken şunları belirledim:

- Bir logo kısmı olacak.

- Menü başlıklarımız Ana Sayfa, Yazarlar, Tutorials, Portfolio, Etkinlikler, Forum şeklinde olsun, bunlar öne çıksın, ancak Site Haritası, Abonelik, Hakkında, Künye, İletişim başlıklarını da biraz daha arka planda kullanmalıyım.

- Yeni sayıyı vurgulayabileceğimiz bir bölüm ve onun yanında bir header (sayfa başı görsel grafik) olsun, burada dergide o sayıda yer alan güncel bazı başlıklar resimler eşliğinde geçiş yapsın.


- Haberler & Gelişmeler isminde Digital Arts etkinliklerinin yer aldığı bir bölüm olsun.

- Dergiye abone olmayı teşvik eden bir reklam grafiği ve dergide yer alan tutorial'ların başlıklarının bulunduğu bölümü de ekleyebilirim.



Artık kafamda az çok bir şablon oluştu sayılır. Tasarım aşamasına geçebiliriz.



Tasarımı Gerçekleştirme



Tasarımımı Fireworks'te hazırlayacağım. Ancak logo kısmı için Illustrator'den ve resim düzenlemeleri için de Photoshop'tan yararlanmam gerekecek.



Site hazırlarken sayfa boyutları konusunda pek çok şey duymuşsunuzdur. Yapılan araştırmalar sonucunda, artık 800x600 ekran çözünürlüğünün pek fazla kullanılmadığı, insanların daha ziyade 1024x768 ve üstü çözünürlükleri tercih ettikleri tespit edilmiştir. Bu nedenle yatay sayfa boyutumuzun 800 px üzerinde bir boyut olmasında sakınca yoktur. Ancak 1000 px'i geçmemesi daha iyi olur.




Şimdi Fireworks'e geçelim ve 1000x1000 boyutunda, arka plan rengini de #666666 ayarlayarak yeni bir sayfa açalım. Dilerseniz rehber çizgiler kullanabilirsiniz. Zaten çalışmanın ilerleyen kısımlarında rehber çizgilerden de faydalanmak işimizi kolaylaştıracaktır.



Açtığımız sayfaya öncelikle Photoshop logosundaki mavi tonlarından oluşan bir arka plan çizelim. Mavi kullanmamızın nedeni dergide Photoshop ağırlıklı tutorial ve çalışmaların öne çıkmasıdır. Bunun için 1000x325 büyüklüğünde bir dörtgen çizerek dolgusunu linear yapıyoruz. Linear 4 kademeli olsun ve renk kodları resimdeki gibi yapabilirsiniz.







Şimdi logo kısmını hazırlamak için Illustrator kullanıyoruz. Bunun sebebi de Fireworks'te hazırladığınız vektörel çizimli grafikleri Rotate (döndürme) yaptığınız zaman kalitenin bozulmasıdır. Ancak Illustrator'de hazırladığınız bir grafiği Kopyala Yapıştır mantığı ile Fireworks'a aktardığınızda böyle bir sorun olmayacaktır. Illustrator'de aşağıdaki gibi bir grafik hazırlayalım:







Kenarları oval bir şekilde çizdiğiniz 2 dörtgeni üst üste getirin ve ortalayarak sağ yukarı hafif bir eğim verin. İç kısmın renk tonları (turuncu): #F6B537 - #CC3300, dış kısmın renk tonları (gri-beyaz): #FFFFFF - #CCCCCC. Digital Arts yazı fontu Arial, boyut 35, renk: #FFFFFF, logo açıklaması Myriad Pro Condensed, boyut 14, renk: #333333. (Renklendirmeleri dilerseniz Fireworks'te yapabilirsiniz)




Şimdi logo bölümünü Fireworks'te sayfamızın sol üst kısmına aşağıdaki gibi yerleştirelim. Dörtgenlere gölge verebilir, turuncu dörtgene  oranında texture efekti uygulayabilirsiniz. (Ben Line-Diag 1 isimli efekti kullandım). Hizalama işlemlerini ileriki adımlarda tekrar gözden geçirebilirsiniz.







Şimdi Rectangular aracı yardımıyla 545x230 boyutunda bir dörtgen çizelim. Roundness kısmına 7 değerini girelim. Dolgu çubuğunu resimdeki gibi ayarlayarak #BFBFBF renginden #FFFFFF değerine geçiş içeren linear dolgu verelim.







Bu dörtgenin üzerine yerleştirmek üzere 544x188 boyutunda bir dörtgen daha çizelim. Roundness değerini 4 olarak belirleyin. Tam üstüne aşağıdan hizalı olacak şekilde yerleştirelim. Ortalamada Align panelinden yararlanabilirsiniz. Bu kısmın içine resim yerleştireceğimiz için dolgu renginin bir önemi yok.







Kerem Beyit'in kullanmak üzere en başta temin ettiğimiz resmini aşağıdaki gibi ikinci çizdiğimiz dörtgenin tam üzerine yerleştiriyoruz.








Edit > Cut (Ctrl X) ile resmi kes yapıyoruz ve en son çizdiğimiz şekli seçerek Edit > Paste Inside (Ctrl Shift V) diyoruz. Resmimiz bu şeklin içine maskelendi. Eğer resim tam oturmamışsa orta kısımdaki yıldıza benzer şeklin üzerine geldiğinizde mouse beyaza dönüşür ve bu şekilde sadece maske içindeki resmi sağa sola hareket ettirebilirsiniz.







Şimdi üstte kalan boşluğa menü için belirlediğimiz yazıları yerleştireceğiz. Font olarak Myriad Pro Bold Condensed, boyut 16 ve renk olarak siyahı seçiyoruz. Ortalı bir şekilde yerleştiriyoruz. Yazılar arasına boşluk vermeyi unutmayın.








Menü düzenlemesinde son adım olarak aralara rengini beyaz olarak belirlediğiniz çizgiler yerleştirmek kalıyor. Orantılı bir şekilde yerleştirelim:







Sıra diğer menü başlıklarına geldi. Bunları da üste yerleştiriyorum. Kullandığım font Tahoma, boyut 11, "No Anti-Alias" seçili olacak, "Auto Kern" işaretli olmayacak. (Auto kern özelliği harfler arasında otomatik boşluk oluşturmakla ilgilidir. Bu özellik Türkçe karakterlerde harf aralarının fazla açılmasına sebep olmaktadır.)







Sol yana geçiyoruz şimdi. Yeni sayıyı vurgulayacağımız bölümü hazırlayalım. Daha önce Photoshop'ta 3 boyutlu hale getirdiğim Digital Arts'ın ilk sayısına ait kapak resmini yerleştiriyorum. Sol tarafına da iki cümle ve bir buton ekliyorum.







Üst kısmı bu şekilde hallettikten sonra alt kısma başlayabiliriz. Rectangle aracıyla 835x550 boyutunda bir dörtgen çiziyorum. Roundness değerini 3 yapıyorum. Align panelini kullanarak sayfada ortalıyorum, üstteki header'ın sağdan bu dörtgenle hizalanmış olmasına dikkat ediyorum.








Haberler ve Gelişmeler bölümünü hazırlayalım. Bunun için Myriad Pro Bold Condensed fontu, boyut 17 ve ilk kelimeyi #A50200 rengini kullanarak yazalım. Hemen altına #CCCCCC renginde 500 px uzunluğunda 1 px kalınlığında bir çizgi çizelim.







Haber girişleri için bir resim bölümü bir de haber özetinin yer aldığı bölüme geçelim. Kullanacağımız resim için boyutu 170x85 olan, 3 px kalınlığında bir dörtgen çiziyorum. Dış hat rengi için #CCCCCC kullanıyorum. Hemen yanına başlık için Tahoma, 12, bold, renk #A50200, No Anti-alias özelliklerini kullanıyorum. Özet için Tahoma, 11, siyah ve No Anti-alias yapıyorum.







Akabinde aşağı doğru dört haber olacak şekilde ayarlıyorum ve aralara 500 px uzunluğunda 1 px kalınlığında, çizgi için texture Hatch1 seçiyor ve bunun değerini 0 yapıyorum.








Bu gibi içerikleri doldurmak için http://tr.lipsum.com adresini kullanabilir, rastgele içerik üretebilirsiniz. Ancak benim önerim, gerçekçi bir şekilde doldurmanızdır. Grafik aşamasında gerçekçi içeriklerle hazırlanan tasarımlar daha hoş duracaklardır. Ben de en azından başlıkları değiştirip içerik konusunda da dergi ile ilgili bir yazı yazıyorum.



Haberlerin en altına sayfalandırmayı belirtmek için bir yazı ekliyorum.







Sonrasında Haberler için resimler ekleyebilirsiniz. Bunun için uygun şekilde resimleri boyutlandırın ve yukarıda header'i yaparken uyguladığımız gibi şeklin tam üzerine getirip Ctrl V ile kesip Ctrl Shift V kısa yolları ile resmi dörtgenin içinde maskeleyin.







Sıra geldi sağ kısımdaki boşluğu doldurmaya. Aşağıdaki gibi 270x120 boyutunda, roundness değeri 7 girerek bir dörtgen çiziyorum.








Üzerine dilediğiniz bir grafik çalışması yapabilirsiniz. Ben aşağıdaki gibi bir ilan ekliyorum.







Hemen altına #DBDBDB renk kodu ile 270x400 boyutunda bir dörtgen hazırlayıp yerleştiriyorum.







Bu kısma dergide yer alan tutorial'lardan seçmeler olsun diye düşündüm. Bunları da ilgili dersin logosu ile vermek etkili olabilir. Sonrasında aşağıdaki gibi yazıları yerleştirip aralarına da yukarıda haberlerin arasında kullandığımız noktalı çizgiyi ekledim. En altına da "hepsini göster" şeklinde bir link eklemek iyi olacaktır.








Footer diye tabir ettiğimiz en alt kısma Digital Arts'ın dâhil olduğu kuruluşun ve kardeş dergilerinin logolarını koyalım. Sağ kısma Copyright gibi bir yazı da ilave edebilirsiniz.







Sitemizin genel anlamda tasarımı bu kadar. Ancak tekrar gözden geçirerek bazı eklemeler yapabilirsiniz. Siteyi biraz daha ilgi çekici kılabilecek eklemeler her zaman iyidir. Hatta mümkünse tasarımı tamamladıktan sonra bir iki gün nadasa bırakıp tekrar bakmanız yararlı olacaktır.



Ben header'a yazı ekledim, arka plana mavi kısmın bittiği yere beyaz bir çizgi ilave yerleştirdim, ayrıca ortadaki beyaz alanın başına ve sonuna küçük bir hat koydum. Sitenin tasarım aşamasındaki son hali aşağıdaki gibi oldu.







Tasarım aşaması bu kadar. Bundan sonraki aşamalarda dilimleme, CSS kullanarak HTML haline dönüştürme ve web'te yayınlamaya hazır hale getirme kısımlarını ele alacağız.



Sizler daha farklı bakış açıları ile daha iyi tasarımlara imza atabilirsiniz. Programı iyi kullanmayı bilmek yalnız başına hiçbir zaman yeterli değildir. Tasarım tamamen hayal gücü ile ilgili bir hadise olduğundan ne kadar çok farklı araştırmalara girer, bilginizi, becerinizi ne kadar artırırsanız o nispette hoş ve etkileyici tasarımlar ortaya koyarsınız. Bunun için çok meraklı olmak, bu işi sevmek, ilgili her şeyi "ben biliyorum" önyargısına girmeden tekrar gözden geçirmek ve sürekli kendimizi geliştirmek zorundayız.




Hepinize başarılar diliyorum.