Eskizden Kodlamaya Web Tasarımı

Vatanay Özbeyli CSS3, HTML5, Öne Çıkanlar

Eğlenceli bir makale ile yine sizlerleyiz. Bugün sizlerle deftere çizeceğimiz bir eskize hayat vereceğiz. Böylece web tasarımının en derinlerine dokunmuş olacağız. Biraz uzun soluklu olsa da gayet eğlenceli. Yukarıdaki gibi deftere karaladığımız tasarımları ilk Photoshop‘a, daha sonra da HTML ve CSS‘e dökeceğiz. Tabii bu işlemleri yaparken bütün bu teknolojilerin en son versiyonlarını ve en güncel tanımlarını kullanacağız. Herşey hazır olduğunda aşağıdakine benzer bir sonuç elde edeceğiz.

eskiz-web-tasarimi

Başlamaden önce malzemelerimizi hatırlayalım :

  • Cetvel
  • Kalem
  • Defter
  • Mac kullanıcıları için TextEdit
  • Windows kullanıcıları için Notepad

ÖRNEĞİ GÖRÜNTÜLE

Tasarım defterde başlar

Sizi rahatlatabilen veya özgür düşüncelere iten bir müzik çalabilir arkaplanda. Unutmayın, eskizler tasarımın sadece iskeletini oluşturmaz. Sanılanın aksine renkler değildir outputa ruh veren.

Rahatlıkla çalışabileceğiniz geniş bir alana yerleştiryseniz çizmeye başlayalım.
eskiz-web-tasarimi

Keskin renkler, sert geçişler ile güzel bir tasarım oluşturabiliriz. Bu demek oluyor ki belirgin bir wrapper ve header ile başlayabiliriz. İstediğiniz oranda, istediğiniz boyutta çalışın. Şimdilik piksellerle işimiz yok. Sadece kafamızdaki tasarım kağıda dökülmeli.

Header Çizimi

Az çok headerın görüntüsünü belirleyelim. Biz aslında aşina olduğumuz klasik yapıda bir tasarım hazırlıyoruz. Dolayısıyla içeriğin 4’de 1’i kadar header ve footer çizebiliriz.

eskiz-header-web-tasarimi

Daha sonra menü ve logonun yerini belirleyelim.

eskiz-header-logo-web-tasarimi

Wrapper Öğeleri

Bugünlerde çok popüler olduğu için basit bir slider çizerek devam edelim. Belki biraz da haber alanına ihtiyaç duyulabilir. 3 tane de görsel altta hali hazırda beklesin.

eskiz-slider-web-tasarimi

Bu arada sol ve sağda kalan boşlukları da yatay çizgilerle tasarımdan ayıralım. O bölümde keskin bir renk kullanabiliriz.

Eskizden Photoshop’a

Sırada tasarımımızı dijital ortama taşımak var. Artık renkleri ve genel hatları belirlememiz gerekiyor.

web-tasarimi-eskiz-renkler

Şimdi Photoshop‘u açalım ve geniş bir çalışma alanı oluşturalım. File > New alanından ya da CTRL+N kısayol tuşlarına basarak tasarımı çizeceğiniz projeyi oluşturun. Biz 815×900 piksellik bir çizim oluşturacağız.

İlk olarak arkaplanınızı oluşturun ve çerçevelerinizi rehber çizgiler ile belirleyin.

web-tasarimi-eskiz-photoshop

Şimdi sırada Header ve Content’i birbirinden keskin renklerle ayırmak var.

web-tasarimi-eskiz-header-content

Logomuzu ve menü itemlarımızı çizelim.

web-tasarimi-eskiz-header

Slider için bir veya iki adet görüntü oluşturalım.

web-tasarimi-eskiz-slider

Resimler ve makale kısmını hazırlayalım.

web-tasarimi-eskiz-content

Son olarak Footer’ı bir copyright satırı ve sosyal ağ ikonları ile tamamlayalım.

web-tasarimi-eskiz-footer

İşin Photoshop ayağı da bu kadar kolay.

PSD dosyasını indir

Yukarıda çizimini yaptığımız arayüzün PSD halini aşağıdan indirebilirsiniz.

DOSYAYI İNDİR

Dosyayı yukarıdan indirebilirsiniz.

Koda Döküm : HTML ve CSS Kodları

HTML Kodları

Dayanın! Son adıma geldik. Hızlıca HTML kodlarımız ile başlayalım. HTML5‘in yeni tanımlamalarını kullanmaktan kaçınmıyoruz. Başlangıç için tüm sayfayı çevreleyecek bir Wrapper’a ihtiyacımız var.

<!DOCTYPE html>
<head>
<title>Adobewordpress.com</title>
</head>
<body>
<div class="wrapper">
...
</div>
</body>
</html>

Şimdi Open Sans yazı tipi ve Font Awesome ikon setini yükleyelim. Bu kodları head elemanı içerisine ekleyebilirsiniz.

Bu da ilginizi çekebilir  Haftanın Ücretsiz Web Teması #24
<link href="http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" >
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300&amp;amp;amp;amp;subset=latin,latin-ext' rel='stylesheet'>

Header ile başlayalım. Logomuzu header içerisine ekleyip sağ tarafa yaslanacak bir nav elemanı tanımlayalım.

<header>
<img src="logo.png">
<nav>
<ul>
<li><a href="#"><i class="fa fa-home"></i> Anasayfa</a></li>
<li><a href="#"><i class="fa fa-paper-plane"></i> Fikirler</a></li>
<li><a href="#"><i class="fa fa-pie-chart"></i> Rakamlar</a></li>
</ul>
</nav>
</header>

Şimdi de slider alanını oluşturalım. Temel yapı section içerisinde barınacak ve içerisinde Font Awesome’ın sağ ve sol ok ikonları bulunacak.

<div class="slider">
<i class="fa fa-chevron-left left"></i>
<i class="fa fa-chevron-right right"></i>
<section>
<h1>ADOBEWORDPRESS.COM</h1>
<p>ESKİZDEN KODLAMAYA WEB TASARIMI</p>
</section>
</div>

HTML5‘in görsel tanımlamalarını unutmayalım! Sırada figure ve figcaption yapıları var.

<section>
<figure><img src="http://lorempixel.com/600/600/food/"><figcaption><i class="fa fa-search"></i></figcaption></figure>
<figure><img src="http://lorempixel.com/600/600/cats/"><figcaption><i class="fa fa-search"></i></figcaption></figure>
<figure><img src="http://lorempixel.com/600/600/people/"><figcaption><i class="fa fa-search"></i></figcaption></figure>
</section>

Makalemizi de ekleyelim.

<article>
<h1>Makale Başlığı</h1>
<p>Makale</p>
</article>

ve son olarak Footer :

<footer>
<div class="sosyal-aglar">
<i class="fa fa-google-plus"></i>
<i class="fa fa-twitter"></i>
<i class="fa fa-facebook"></i>
<i class="fa fa-youtube"></i>
<i class="fa fa-linkedin"></i>
</div>
<a class="footer-yazi" href="https://www.adobewordpress.com">adobewordpress.com</a>
</footer>

CSS Kodları

Ve şimdi stilimizi yedirelim. Başlangıç için tüm tanımlamalara box-sizing değeri atayalım. Ayrıca html ve body elemanlarına da genişlik, yükseklik ve display table türünü ekleyelim.

html,body{
display:table;
width:100%;
height:100%;
}

*{
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}

body{
background-color:#e7e7e7;
margin:0;
font:300 20px 'Open Sans', sans-serif;
}

Wrapper’ı tüm sayfayı kaplayacak ve 1200 pikselin üzerine çıkmayacak hale getirelim.

.wrapper{
background-color:white;
max-width:1200px;
margin:0 auto;
height:100%;
}

Header ve içerisindeki navigasyon menüyü stilize edelim.

header{background-color:#fe7c7c;}
header,nav{height:100px;}
header nav{display: table;float:right}
header nav ul{}
header nav ul{display: table-cell; vertical-align: middle; list-style:none;}
header nav ul li{float:left;padding:0 30px;}
header nav ul li a{color:white; text-decoration:none;}
header nav ul li a:hover{color:#3d4f63}

Slider’a belirli bir hacim ve renk tanımlaması yapalım. Yön oklarını yerlerine oturtalım. Yazıları şekillendirelim.

.slider{position:relative;height:350px;width:100%;display: table; background-color:#3d4f63;}
.slider i.left, .slider i.right{position:absolute; top: 50%; height:20px; margin-top:-20px; display:table; font-size:220%; color:white;}
.slider i.left {left: 20px;}
.slider i.right{right: 20px;}
.slider section{display: table-cell; vertical-align: middle;}
.slider section h1{color:white; font-size:210%; margin:15px 0 0 0; font-weight:300; text-align:center}
.slider section p{color:#fe7c7c; font-size:130%;text-align:center}

Resim galerisi için bir stil atayalım.

section{padding:0; margin:0;}
section figure{position:relative;display:inline-table; width:33%; padding:30px 15px 0 15px; margin:0;}
section figure img{width:100%;}
section figure figcaption{display:none; text-align:center; width:100%; position:absolute; top: 50%; height:30px; margin-top:-30px; font-size:300%; color:white; text-shadow: 0px 0px 15px rgba(0, 0, 0, 0.3);}
section figure:hover figcaption{display:table;}
section figure:hover img{opacity: 0.7;filter: alpha(opacity=70);}

Makalemiz için bir stil ekleyelim.

article{display:table;padding:30px;}
article h1{color:#fe7c7c ;font-size:210%;font-weight:300;margin:0px;padding:0px;}
article p{color:#3d4f63;line-height:190%;}

Footer içerisindeki sosyal ikonları ve copyright metnini PSD dosyasında çizdiğimize benzer hale getirelim.

footer{display:table; width:100%; padding:20px;}
footer .sosyal-aglar{display:inline-table;}
footer a.footer-yazi{display:inline-table;float:right;color:#49aae1;letter-spacing: 5px; text-decoration:none}
footer a.footer-yazi:hover{color:#3d4f63;}
footer .fa{display:inline-block; padding:10px; margin-right:20px; width:40px; height:40px; color:white; text-align:center;opacity: 0.7;filter: alpha(opacity=70);}
footer .fa:hover{opacity: 1;filter: alpha(opacity=100);}
footer .fa-google-plus{background-color:#4c4c4c;}
footer .fa-twitter{background-color:#75cef0;}
footer .fa-facebook{background-color:#547bbe;}
footer .fa-youtube{background-color:#e8644d;}
footer .fa-linkedin{background-color:#0e85c9;}

Sonuç

Bütün bu çalışmalarımız sonucunda aşağıdaki gibi bir tasarım elde ediyoruz. Tebrikler!

eskiz-web-tasarimi

Kapanış

Eğlenceli bir yazı oldu. Umarız sizler de eğlenmişsinizdir.

eskiz-adobewordpress

Klasik bir tasarım hazırladık çünkü sürecin daha basit ve anlaşılabilir olmasını istedik. Ancak HTML5 ve CSS3 elinizin altında olduğu sürece deftere karaladığınız her türden çizginin web tarafında eşdeğer bir karşılığı olabiliyor. Özetle yapılamayacak hiçbir şey yok. Bu yüzden hayal gücünüzü hiçbir engel sınırlamasın.

Şimdilik bu kadar.

İyi çalışmalar.