bildirgec.org - TheMeskalin - beğendikleri

1981-2009 İşletim Sistemi Arayüzleri

TheMeskalin — Fri, 13 Nov 2009 11:40:00 GMT

Kullanıcı arayüzleri, kısaca GUI, kullanıcıların bilgisayar ile kolaylıkla iletişime girmelerini sağlar. örnek vermek gerekirse, bir dosya simgesini sürükleyip başka bir klasöre bıraktığınız zaman onu kopyalamış oluyorsunuz, ancak eskiden onu kopyalamak için tek satırlık da olsa belirli kodlar yazmanız ve bunları öğrenmeniz gerekiyordu.

Yıllar boyunca kullanıcı arayüzü sektörü oldukça gelişti ve bugün kullandığımız büyük işletim sistemi firmalarının vazgeçilmez simgeleri haline geldi. Kim apple'in o güzel yazı stillerini unutabilir ki, ilk çıktığında dünyayı sarsmıştı doğrusu.

Aşağıdaki resimler sayesinde, 1980'lerden günümüze kadar kullanıcı arayüzü değişimlerini görebilirsiniz. ancak şuna dikkat etmelisiniz, işletim sistemi değişikleri aşağıda yer almıyor, sadece kullanıcı arayüzünde meydana gelen önemli değişimler var.

Yeri gelmişken söylemekte fayda var; ilk kullanıcı arayüzü 1973 yılında PARC tarafından geliştirildi. ismi xerox alto.

xerox alto (1973)

xerox 8010 star (1981)

apple lisa office system 1 (1983)

Apple'ın doküman işleme istasyonu örneği.
-

visicorp visi on (1984)

Fare olmasına rağmen hiçbir icon olmaması garip bir yönü doğrusu.
-

mac os system 1.0 (1984)

Günümüz modern işletim sistemlerinin temelini oluşturan birçok özelliği mevcut. Pencere ve icon kullanıyor, pencereler etrafa tanışanabiliyor, dosyalar mouse yardımıyla kopyalanabiliyor ve taşınabiliyordu.
-

amiga workbench 1.0 (1985)

4 Renkli grafikler, öncül aynı anda birden fazla program çalıştırma, stereo ses ve çok şekilli simgeler.
-

windows 1.0x (1985)

Windows, mac'e yaklaşıyor ama geçemiyordu. Bu yıllarda bir mac sahibi olmak tamamen bir ayrıcalıktı. 32x32 pixel renkli iconlar ve ilk kullanıcı arayüzü temelli işletim sistemi. Kullananlar bilirler, en güzel özelliği simge olarak görünen ama hareket eden analog saatti, daha sonradan güncelleme ile kaldırıldı gerçi.
-

gem (1985)

Intel 8088 ve Motorola 68000 işlemcileri üzerinde çalışabilen bir işletim sistemi, daha sonraları dos'u da çalıştıracaktı. daha çok Atari ST bilgisayarı olarak tanınıyor, hiç popüler olamadı ne yazık ki.
-

irix 3 (1986)

geos (1986)

windows 2.0x (1987)

Windows üzerinde büyük gelişmeler yapıldı. Artık pencereler üst üste gelebiliyordu, tanışabiliyordu, büyütülüp küçültülebiliyordu.
-

os/2 1.x (1988)

Önceleri birlikte geliştirilen IBM ve Microsoft ayrılıyordu ve IBM kendi kullanıcı arayüzünü geliştirmeye başlıyordu. Sonraları "Sunum Yöneticisi" isimini alacaktı.
-

nextstep / openstep 1.0 (1989)

os/2 1.20 (1989)

windows 3.0 (1990)

640 KB RAM ve Disk alanı. 800x600 ve 1024x768 çözünürlük.
-

amiga workbench 2.04 (1991)

mac os system 7 (1991)

Mac ile steve jobs'ın yolları ayrılmıştı (1985) ve bu olay kullanıcı arayüzlerinden dahi okunabiliyordu, artık microsoft mac'i geçerek sektörün liderliğine oturmuştu.
-

windows 3.1 (1992)

TrueType yüklü olarak geliyordu. Bu özellik windows'u ilk kez fonksiyonel bir platform haline getiriyordu. Renk şemaları da ilk kez bu versiyonda kullanıldı. bu sayede belirli bir seviyeye kadar renk körü olanlar da zorlanmadan bilgisayar kullanabiliyorlardı.
-

os/2 2.0 (1992)

ilk Nesne Tabanlı (OO) işletim sistemi. bilgisayar mühendisleri ne dediğimi çok iyi anlarlar.
-

windows 95 (1995)

Her pencereye küçük bir kapat düğmesi eklendi. Ünlü "Başlat" düğmesi de ilk kez bu versiyonda ortaya çıktı. Microsoft için işletim sistemi ve kullanıcı arayüzünü birleştirmek için atılmış en büyük adımdı.
-

os/2 warp 4 (1996)

Çöp tenekesi simgesi vardı, ancak silinen her dosya anında siliniyordu, pek de kullanışlı değil değil mi?
-

mac os system 8 (1997)

ilk 3D simgeler burada çıktı. platinyum grisi arayüz sonraları apple'ın simgesi halini aldı.
-

windows 98 (1998)

Ev kullanıcıları için 256'dan fazla renk kullanımı mümkün oldu. Windows Explorer baştan aşağı değişti, "aktif masaüstü" ilk kez bu versiyonda yapıldı.
-

kde 1.0 (1998)

Linux için masaüstü yöneticisi olarak ortaya çıktı. Tamamen ücretsiz ve açık kaynak kodlu bir sistem.
-

beos 4.5 (1999)

gnome 1.0 (1999)

ilk başta Red Hat Linux için tasarlandı, sonraları ise diğer linux dağıtımları tarafından da başarıyla kullanıldı. Biraz mac'i anımsatıyor doğrusu.
-

mac os x (2001)

Steve Jobs'ın döndüğünü belli eden bir arayüz. Aqua arayüzünü duyurdular. 32x32 ve 48x48 icon setlerine 128x128 ve yarı-transparan icon seti eklendi. ilk başlarda kullanıcılardan çok büyük tepkiler aldı, ancak kısa kullanıcılar kısa sürede bu grafik deneyimine alıştılar. Günümüzde bu arayüz mac'in temelini oluşturuyor.
-

windows xp (2001)

Windows işletim sistemi, Thema sahibi olmaya başladı, sistemin tüm görünüşü bir anda değiştirilebiliyordu. 48x48 pixel iconlar var.
-

kde 3 (2002)

windows vista (2007)

aktif masaüstü, 3d ve widgets konusunda gelişemeler yaşandı.
-

mac os x leopard (2007)

3d dock uygulaması başladı, "gerçek bir masa" gibi düşünün dönemi.
-

gnome 2.24 (2008)

masa üstünün daha iyi görünmesi gerekliliği anlaşıldı ve grafiğe önem verilmeye başlandı.
-

kde 4.0 (2009)

KDE baştan yaratıldı. Simgelerinden, seslerine, thema'larından, widget'larına kadar. Artık windows ve mac üzerinde de çalışabiliyor.
-

windows 7 (2009)

Buradaki gelişmeleri sizin kelimelerinizle duymak istiyorum. Bana göre çok temel olmamakla beraber hoş bir değişim yaşandı windows'ta.
kaynak
Sizce nasıl??

Bu yazı TheMeskalin tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

40 adet yeni photoshop dersi

TheMeskalin — Fri, 30 Oct 2009 14:12:00 GMT

Arayüz tasarımı becerilerini geliştirmek ister misiniz? Eğer aradığınız Photoshop arayüzü tasarımı ile başlamak veya bu becerileri oluşturmak, sonra bu öğreticiler içine hemen atla!

kaynak>>

Bu yazı TheMeskalin tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

50 Gerçekten Yüksek Kaliteli Photoshop Navigasyon Menü Dersi

TheMeskalin — Tue, 11 Aug 2009 12:36:00 GMT

Photoshop, web tasarımı yaparken büyük kolaylıklar sağlıyor. Navigasyon, menü ve buton tasarımı için çok kaliteli derslere aşağıdan ulaşabileceksiniz.

Navigasyon bir site için çok önemlidir. Özellikle sitedeki bölümler arası geçişi sağladığından sık kullanılmaktadır ve görsel olarak iyi olması gerekmektedir.

Şimdi Parlak, temiz, şık, düzgün ya da 3d navigasyon tasarlamayı öğrenmeye başlayalım.

1.Content Box With Orange Banner Heading (Turuncu banner başlığı ile içerik kutusu)

Bu derste içerik kutusu benzeri benzeri menü tasarlamayı öğrenebileceksiniz.

2. Vista Styled Button Photoshop Tutorial (vista tarzı buton photoshop dersi)

Çoklu layer stili, araçları ve teknikleri kullanarak vista tarzı buton tasarlamayı öğrenin.

3. How to Create a Slick and Clean Button in Photoshop (Photoshop'da düzgün ve temiz buton nasıl oluşturulur?)

Bu photoshop dersi size basit ve temiz web 2.0 tarzı buton oluşturmayı göstermektedir. Ayrıca bazı temel css tekniklerini de göreceksiniz.

4. Blue on Black Navigation Bar (Siyah üzerinde mavi navigasyon bar)

Bu eğitici derste pek çok katman stillerini birleştirmeyi göreceksiniz.

5. Green Navigation (yeşil navigasyon)

Bu derste parlaklık efekti ile şık görünümlü yeşil navigasyon oluşturmayı öğrenebileceksiniz.

6. High-Detailed Plastic Navigation Bar (Yüksek detaylı plastik navigasyon bar)

7. Modernistic Navigation Module (Çağdaş navigasyon modülü)

Photoshop ile güzel navigasyon modülü oluşturun. Zarif tasarımlar oluşturmak için gerekli adımları görebilirsiniz.

8. Create a Nice Stylish Glossy Button in Photoshop (Photoshop'da şık ve düzgün buton oluşturmak)

9. Light Lime and Blue Navigation (Açık Limon ve Mavi Navigasyonu)

10. Stylish Dark Navigation Box (Şık koyu navigasyon kutusu)

Bu derste bazı efekt ve araçları kullanarak gelişmiş navigasyon kutusu oluşturmayı görebilirsiniz.

11. Creating A Cool 3D Web Design Effect (Harika 3d web tasarım efekti oluşturmak)

Geçiş ve katman efektlerini kullanarak kolay teknikleri göstermektedir.

12. Web Button Making Tutorial 1 (Web buton yapımı dersi)

Web buton setinin nasıl oluşturulduğunu bu derste ulaşabilirsiniz. Photoshop ile temel bilgileri bildiğiniz varsayılmaktadır.

13. Web Button Making Tutorial 2 (Web buton yapımı dersi)

14. Photoshop Tutorial: Designing a Unique Bookmark Box (Photoshop dersi: Tek yer imi kutusu tasarlamak)

Bu ders blog ve web siteniz için profesyonel şık yer imi kutusu oluşturmayı göstermektedir.

15. Volkswagen Inspired Navigation (Volkswagen'den esinlenilmiş navigasyon)

16. Professional Menu Button (Profesyonel menü butonu)

Bu derste adım adım ilginç profesyonel menüler tasarlamayı görebileceksiniz.

17. Design Watercolor Effect Menu (Suluboya efekt menüsü tasarlamak)

18. Professional header design for your website (websiteniz için profesyonel başlık tasarlamak)

Profesyonel başlığı kolayca görünür hale getirmek için hoş bir ders.

19. Glossy-Style Carbon Fibre Navigation Buttons (Düzgün stil karbon dokusu navigasyon butonu)

20. Interface Orbs (Gözbebeği arayüzü)

Standart arabirim ile bir teknik kullanarak gözbebeği tasarlamayı öğrenebileceksiniz.

21. How To Create a Stunning Vista Inspired Menu (Vista'dan esinlenilmiş çekici menü nasıl oluşturulur?)

Bu derste gölgeler kullanarak şık bir menünün nasıl oluşturulacağını görebilirsiniz.

22. Clean Vertical Navigation Interface in Photoshop (Photoshop'da temiz dikey navigasyon arayüzü)

Websiteniz için temiz dikey navigasyon arayüzünün nasıl oluşturulduğu yer almaktadır.

23. Clean White Navigation Bar (Temiz beyaz navigasyon bar)

Sadelik ve güzellik bir web sitesinin anhatarıdır. Photoshop'da güzel navigasyon bar çizimini öğrenin.

24. RSS button in Photoshop (Photoshop'da rss butonu)

25. Stylish Dark Navigation Menu (Şık koyu naviasyon menü)

Dikdörtgen aracı ile bazı hileler yaparak şık bir navigasyon kutusu dersi.

yazının devamı için buraya tıklayabilirsiniz.

ayrıca aşağıdaki yazılarda ilginizi çekebilir.

40 Gerçekten Kullanışlı Photoshop Metin Efekti Dersi

24 Hayran Eden Photoshop Dersi

3d Metin Efekti Oluşturmak İçin 25 Photoshop Dersi

Photoshop Kullanarak 29 Harika "Forum İmzası" Hazırlama Dersi

Web Tasarımı Oluşturmak İçin 16 En Hoş Photoshop Dersi (İngilizce)

Photoshop'ta Simge Oluşturmak İçin 30+ Şaşırtıcı Ders

75 Fevkalade Photoshop Fırça Seti

500+ Photoshop İçin Püskürme Fırça Seti

20 Güzel Klasikleşmiş Photoshop Fırça Seti

22 Fantezi Photoshop Dersi ve 125 Photoshop Fırçası

35+ Faydalı Photoshop Eklentisi

kaynak: 1stwebdesigner.com

yazılarımı takip edebilirsiniz.

blog | twitter | friendfeed | delicious | rss

Bu yazı TheMeskalin tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

1990'dan 2008'e Oyun Dünyası

TheMeskalin — Wed, 17 Dec 2008 20:54:00 GMT

Super Mario World

2008 yılını geride bıraktığımız şu günlerde oyun dünyası bir hayli gelişti. Artık yeni çıkan oyunlara en yüksek donanımlı bilgisayarlar bile zor meydan okuyor. Son çıkan oyunlar size eskisi gibi zevk veriyor mu bilemem ama ben yeni oyunlar yerine eski oyunları tercih ederim. Artık oyun oynamanın bir lüks haline geldiği şu zamanları biraz unutalım ve eski günlerimizi gözümüzün önünde canlandıralım. Super Mario oynarken mario zıpladığında bizde onunla beraber zıplar, Mortal Kombat'da "Fatality" yapmak için bütün tuşlara basar, Sabahlara kadar Diablo oynamaktan uykusuz kalmaz mıydık ? Gelin şimdi bu oyunları biraz hatırlayalım ve 90 lı yıllardan günümüze oyunlardaki gelişmelere göz atalım.

1990

Wing Commander
Super Mario World
Final Fantasy III
Commander Keen
1991

Civilization
Road Rash
The Legend of Zelda
Neverwinter Nights
1992

Mortal Kombat
Wolfenstein 3D
Dune II

Listenin devamına bakmak için şuraya bakabilirsiniz.

Bu listenin sonunda yazar arkadaşımız sormuş adet yerini bulsun biz de soralım. Sizin oyun geçmişiniz nasıldı ? Hangi oyunlarla başladınız bu zamana kadar hangi oyunları beğendiniz ?

Bu yazı TheMeskalin tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

E-Okul ' a Girişi Yasaklamak!!

TheMeskalin — Sun, 15 Feb 2009 16:25:00 GMT

Sözde Zararlı Bulunan Bir Çok Site Yasaklanıyor Bizde E-Okul 'a girmeyi yasaklıyalımda "KARNE HASARIMIZ" fazla olmasın :)
Ayrıntılı olarak anlatıma buradan ulaşabilirsiniz.

Windows için

1. “C:\\Windows\system32\drivers\etc” klasörüne gidin. 2. “host” dosyasını bir metin editörü(örn: notepad) ile açın. 3. Dosyanın başına(veya sonuna, veya herhangi bir boş yerine, önemi yok, ama sonra bulması kolay olur.) “ 4.3.56.1 e-okul.meb.gov.tr” satırını ekleyin. 4. Dosyayı kaydedip kapatın. 5. Başlat menüsünden çalıştır butonuna basın. Gelen penceredeki boşluğa “cmd” yazıp enter’a basın. 6. Ekrana gelen komut istemi penceresine “ipconfig /flushdns” yazıp enter’a basın. 7. Ekranda “DNS çözme önbelleği temizlendi” vb. bir yazı çıkması gerek doğru komutu verdiyseniz. 8. Bilgisayarı yeniden başlatın. 9. Modeminizi yeniden başlatın.

Linux için

1. Konsolu açın. 2. Önce “su” kullanarak root olun. Ya da Ubuntu kullanıyor iseniz “sudo -s” kullanabilirsiniz. 3. “"4.3.56.4 e-okul.meb.gov.tr">>/etc/hosts” komutunu verin. 4. Yapabiliyorsanız DNS önbelleğinizi resetleyin(Kullanımı dağıtımdan dağıtıma farklılık gösterir.). 5. Modeminizi resetleyin

Bu yazı TheMeskalin tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

anime ve manga çizim dersleri arşivi

TheMeskalin — Wed, 13 May 2009 17:16:00 GMT

manga sanatını sever misiniz?
peki manga veya anime tarzında çizimler yapmak ister misiniz?
cevabınız evetse birazdan sizi, bu tarz çizimler yapmanıza yardımcı olacak ders ve fırça setleriyle başbaşa bırakacağım. onun öncesinde birbiriyle bağlantılı olan manga, anime ve hentai ile ilgili şu güzel yazıya göz atabilirsiniz.

bildiride yer alan dersler yeni öğrenenler için gayet faydalı olmakla birlikte, manga karakterlerinin nasıl yaratıldığı kolay anlaşılsın diye bu dersler aşamalı bir anlatımla sunuluyor.

ayrıca bu derslerle birlikte farklı şekillerdeki anime tarzı gözlerin ve saç biçimlerinin nasıl oluşturulduğu ile ilgili anlatımları ve photoshopta kullanabileceğiniz fırça setlerini de bulabileceksiniz. bu kolay anlaşılabilir anlatımlar ve anime fırçaları derlemesi ile artık siz de kendi karakter çizimlerinizi yapabileceksiniz.

Drawing Anime Faces Tutorial

Anime Hair Shading Tutorial
(anime tarzı saç çizim dersi)

An Anime Eyes Tutorial
(anime tarzı göz çizim dersi)

Drawing Anime Hair

Anime Eyes Brushes

Anime skin colouring tutorial
(anime cilt renklendirme dersi)

Anime eye brush set

Anime - Drawing Tutorials

How to Draw Manga
(anime tarzı yüz çizim dersi)

Anime hairs brushes

Background Lighting Effects

Anime and manga brush

Anime eye Brush

Drawing Clothes And Folds

Anime Female Body Tutorial

Tutorial: Draw Eyes

Anime Eyes Photoshop Brushes

ve son olarak da vücut oranlarının nasıl ayarlandığı ile ilgili bir videolu anlatım.

Bu yazı TheMeskalin tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

Vektör Karakterler Nasıl Oluşturulur ?

TheMeskalin — Sun, 17 Feb 2008 12:03:00 GMT

Daha önce vektör sanatının ne olduğundan ve kullanım alanlarından bahsedilmişti. Şimdi de kendi hazırladığımız ya da hazır bulduğumuz bir karakalem çalışmasından nasıl bir karakter elde edeceğimize bakalım.

böyle bir karakteri yapmak çok da zor değil

Karakterimi yapmak için öncelikle daha önceden çizilmiş bir karaktere ihtiyacımız var bu bir kağıt üzerine kara kalemle çizilmiş olabilir tarayıcı sayesinde bilgisayara aktarabiliriz yada internette beğendiğimiz bir karakalem çalışması üzerinde bu işlemleri uygulayabiliriz.

karakterimiz hazır. İllustrator'da vektörleri vermeye başlanabilir

Bu karakterin nasıl illustrator da nasıl oluşturulduğu ve renklendirildiği burada anlatılmış.

Yine benzer bir uygulama da şurada yer alıyor. bu uygulamanın son basamağında dokulardan da faydalanılmış.

balık karakteri de aynı yöntemle oluşturuldu

Bu yazı TheMeskalin tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage

Web Tasarımında sıkça karşılaşılan hatalar

TheMeskalin — Thu, 09 Apr 2009 10:06:00 GMT

Bir site tasarlamak sanıldığı kadar kolay bir iş değildir. Tasarımın güzelliği ayrıntılarda gizlidir ve o ayrıntılar web tasarımında o kadar fazladır ki bazen gözümüzden kaçan hatalar başkasının gözüne çok batabilir. Bu makalede sıkça yapılan hatalara dikkat çekilmiş ve tasarımda bize kolaylık sağlayacak öğelere değinilmiştir.

Tipografi
Web sayfalarında en çok göze hitap eden öğeler yazı karakterleridir. Uygun font’ların kullanılması tasarımlarımızı daha da çekici kılar. Fontların değişik işletim sistemlerindeki görünüşüne buradan bakabilirsiniz. Buradaki listede kullanıcı memnuniyetini en üst düzeye çıkarmak için “yazı tipi ailelerini” (font family) nasıl ayarlamanız gerektiğini bulabilirsiniz.

İkiden fazla Font Kullanmayın!
Tasarımlarda çok fazla sayıda font kullanmak sakıncalı olmaktadır. Eğer farklı font kullanmak istiyorsanız, başlıklar için ayrı düz yazılarınız için ayrı olmak üzere toplam 2 font belirleyin ve kullanın. Örneğin Başlıklar için “IMPACT” yazılar için “ARIAL” kullandıysanız, diğer sayfalarda da bu seçimleri kullanın. Ayrıca her font değişik alt, üst değerler ve satır yüksekliği kullanmaktadır. Bu değerleri karşılaştırmak için TypeTester programını kullanabilirsiniz.

KÖTÜ

İYİ

sans ile serif düşman gibidir!
Aslında bu bir kural değil ama yine de güzel gözükmediği için kural gibi söylenebilir. Sakın sans ailesine sahip bir font ile sans-serif ailesine sahip bir font’u beraber kullanmayın. Hoş bir görüntü oluşturmuyorlar.

Gördüğünüz gibi iki farklı aileye ait karakterler arasında büyük bir görünüş farklılığı bulunmakta. Eğer kullanmak isteğiniz varsa en azından A List Apart’taki makaleye bir göz atın.

Doğru yazı boyutunu seçin
CSS ile genelde yüzde, em ve piksel ile boyutlandırma kullanmaktayız. Kendi boyutlarınızı belirlemek için testler yapın ve ideali bulmaya çalışın. Referans olarak bazı ölçüler verilebilir. Örneğin paragraflar için %62.5 kullanılabilir. Fakat bunun yerine em ya da piksel kullanırsanız daha çok verim alabilirsiniz. Burada bilmeniz gereken 10 pikselin 1 em’e karşılık geldiğidir. Bunu hesaba katarsak 14px yani 1.4em paragraflar için yeterli bir boyuttur. Başlıklar içinse nispeten daha büyük ve fark edilebilecek boyutlar kullanmalısınız. 14 piksel paragrafınız varsa 18 piksel ile 24 piksel aralığında bir başlık kullanmak çok uygun olacaktır. Tabi bu değerlerin font’tan fonta değişmesi gerektiğini unutmayın.
KÖTÜ

İYİ

Satır Aralarına Dikkat!
Satır aralarındaki dev boşluklar sizin de dikkatinizi dağıtmıyor mu? Siteler Photoshop’ta tasarlanırken anti-alias özelliği açık olduğu için satır araları gözümüze daha güzel görünebilir. Ama tarayıcılarda böyle bir özellik bulunmadığından sayfamız daha farklı görünür. Eğer genelde 16 piksellik karakter kullanıyorsanız aralığınızda 16 piksel ile 18 piksel arasında olmalıdır ki göze daha hoş gelsin.

Renkler iç dünyanın aynasıdır!
Renkler çoğumuzun en çok dikkat ettiği şeydir. Ama bir kez daha hatırlatmakta yarar var. Arka planları ayarladıktan sonra yazı rengini deneyin ve kesinlikle yakın tonlar seçmeyin. Arka plan ve yazı renginiz olabildiğince birbirine zıt olsun ki yazılarınız dikkat çeksin. Eğer renkler konusunda referans alacak bir kaynak istiyorsanız Adobe Kuler, ColorCombos ve ColourLovers’ı kullanmaktan çekinmeyin.
İYİ

KÖTÜ

Aman hizaya dikkat!
Öğelerin sayfa içindeki hizalamalarına çok dikkat edin. Sayfanın göze hoş gelmesi için öğelerin bir blok gibi birbiriyle ilişkili görünmesi tasarımı çekici kılar. Eğer Amerika’yı yeniden keşfetmeye ne gerek var diyorsanız hizalama konusunda kullanabileceğiniz birkaç CSS Çatısı (Framework) mevcut. 960 Grid Sistemi bu konuda tavsiye edilebilir.

KÖTÜ

İYİ

Aralıklara dikkat edin!
Aralıklar yani CSS dilinde konuşmamız gerekirse border ile içerik arasındaki aralığı belirten padding değerini en uygun biçimde kullanmaya çalışın. İçeriğiniz ne birbirine çok yapışık ne de birbirinden çok fazla uzakta olsun.
KÖTÜ

İYİ

Elemanlar bir arada dursun
Sayfada bulunan ve birçok elemanı kapsayan blokları birbirinden çok uzakta tutmayın. Bu davranış içeriğin bir bütünmüş gibi görünmesini engeller. Oysa Ufak aralıklar ile yerleştirilen bloklar sayfayı bir arada tutarak ilgi çekici olur.
KÖTÜ

İYİ

Aralıklar konusunda tutarlı olun
Bu kadar çok aralıklardan konuştuktan sonra son konu ise sayfanın genel görünümündeki aralıkların önemi. Örneğin sayfanızı Header, Nav, içerik, sidebar ve footer olarak bölmelere ayırdıysanız, bu bölmeler arasındaki boşlukların hep sabit olmasını sağlayın. Aksi takdirde düzensiz sayfalarınızın hesapları ile boğuşmak zorunda kalabilirsiniz. Eğer 960GS gibi bir çatı kullanıyorsanız, sistem aralıkları yönetmek konusunda size yardımcı olacaktır.

Bu makale, “Common Mistakes in Web Design” ismiyle Marko tarafından http://blog.themeforest.net için yazılmıştır.

Bu yazı TheMeskalin tarafından bildirgec.org adresli sitede yayımlanmak üzere yazılmıştır. Kaynak gösterilmeksizin kopyalanamaz.

Pilli Projeleri: Pilli.com: Kolektif Bağımsız İçerik | Sosyomat.com: Arkadaşını Etiketle | Put.io: Online Cloud Storage