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.
Başlamaden önce malzemelerimizi hatırlayalım :
- Cetvel
- Kalem
- Defter
- Mac kullanıcıları için TextEdit
- Windows kullanıcıları için Notepad
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.
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.
Daha sonra menü ve logonun yerini belirleyelim.
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.
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.
Ş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.
Şimdi sırada Header ve Content’i birbirinden keskin renklerle ayırmak var.
Logomuzu ve menü itemlarımızı çizelim.
Slider için bir veya iki adet görüntü oluşturalım.
Resimler ve makale kısmını hazırlayalım.
Son olarak Footer’ı bir copyright satırı ve sosyal ağ ikonları ile tamamlayalım.
İş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.
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.
<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&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="http://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.
headerbackground-color:#fe7c7c;
header,navheight:100px;
header navdisplay: table;float:right
header nav ul
header nav uldisplay: table-cell; vertical-align: middle; list-style:none;
header nav ul lifloat:left;padding:0 30px;
header nav ul li acolor:white; text-decoration:none;
header nav ul li a:hovercolor:#3d4f63
Slider’a belirli bir hacim ve renk tanımlaması yapalım. Yön oklarını yerlerine oturtalım. Yazıları şekillendirelim.
.sliderposition:relative;height:350px;width:100%;display: table; background-color:#3d4f63;
.slider i.left, .slider i.rightposition:absolute; top: 50%; height:20px; margin-top:-20px; display:table; font-size:220%; color:white;
.slider i.left left: 20px;
.slider i.rightright: 20px;
.slider sectiondisplay: table-cell; vertical-align: middle;
.slider section h1color:white; font-size:210%; margin:15px 0 0 0; font-weight:300; text-align:center
.slider section pcolor:#fe7c7c; font-size:130%;text-align:center
Resim galerisi için bir stil atayalım.
sectionpadding:0; margin:0;
section figureposition:relative;display:inline-table; width:33%; padding:30px 15px 0 15px; margin:0;
section figure imgwidth:100%;
section figure figcaptiondisplay: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 figcaptiondisplay:table;
section figure:hover imgopacity: 0.7;filter: alpha(opacity=70);
Makalemiz için bir stil ekleyelim.
articledisplay:table;padding:30px;
article h1color:#fe7c7c ;font-size:210%;font-weight:300;margin:0px;padding:0px;
article pcolor:#3d4f63;line-height:190%;
Footer içerisindeki sosyal ikonları ve copyright metnini PSD dosyasında çizdiğimize benzer hale getirelim.
footerdisplay:table; width:100%; padding:20px;
footer .sosyal-aglardisplay:inline-table;
footer a.footer-yazidisplay:inline-table;float:right;color:#49aae1;letter-spacing: 5px; text-decoration:none
footer a.footer-yazi:hovercolor:#3d4f63;
footer .fadisplay: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:hoveropacity: 1;filter: alpha(opacity=100);
footer .fa-google-plusbackground-color:#4c4c4c;
footer .fa-twitterbackground-color:#75cef0;
footer .fa-facebookbackground-color:#547bbe;
footer .fa-youtubebackground-color:#e8644d;
footer .fa-linkedinbackground-color:#0e85c9;
Sonuç
Bütün bu çalışmalarımız sonucunda aşağıdaki gibi bir tasarım elde ediyoruz. Tebrikler!
Kapanış
Eğlenceli bir yazı oldu. Umarız sizler de eğlenmişsinizdir.
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.
Eskizden Kodlamaya Web Tasarımı
Hiç yorum yok:
Yorum Gönder