Mükemmel Web Tasarımının Yapılması ve Yapılmaması Gerekenler

Takip edildiğinde, bu kılavuz oldukça değerli bir web tasarım kaynağı olacaktır, özellikle de kullanmayı planlıyorsanız. web sitesi geliştirme yazılımı gelecekte. Deneyimsizinden deneyimlisine kadar bu rehberde herkes için bir şeyler var.

Mükemmel Web Tasarımı Süreci Hepimizin aynı fikirde olduğundan emin olmak için “web tasarımı”nın temel tanımıyla başlayalım. Wikipedia'ya göre web tasarımı:

“Web tarayıcısı tarafından yorumlanmaya uygun ve Grafiksel kullanıcı arayüzü olarak görüntülenmeye uygun İşaretleme dili biçiminde İnternet aracılığıyla elektronik medya dağıtımının kavramsallaştırılması, planlanması, modellenmesi ve yürütülmesi süreci” .

Web tasarımı sürecini bir araştırma makalesi yazma sürecine benzetebiliriz. Kavramsallaştırma/planlama aşamasında web sitenizin gezinme yapısını gösteren akış şemaları (anahat) oluşturulur. Modelleme aşamasında, web sitenizin her bölümü için iskelet düzenini gösteren statik tel çerçeveler oluşturulur (kaba taslak). Tel çerçeveler oluşturulduktan sonra grafikler, renkler ve metinler kullanılarak web sayfalarınızın tasarımı tel çerçevelerin düzenine göre oluşturulur. Yürütme aşamasında tasarımınız web tarayıcıları tarafından desteklenen bir formata dönüştürülür, metin ve içerik eklenir ve son olarak web siteniz tüm dünyanın görmesi için internette canlı olarak yayınlanır (son taslak).

Tasarım sürecinin her üç aşaması da eşit derecede önemlidir. Çoğu web tasarımcısı zamandan tasarruf etmek için veya bunun gerekli olduğunu düşünmediği için bir aşamayı atlar. Ancak amacınız başarılı bir tasarım ve saygın bir web sitesi oluşturmaksa her üç aşama da gereklidir. Bu üç aşama kullanılsa bile, web tasarımcılarının yapabileceği, kalitesiz, kullanıcı dostu olmayan web sitelerine yol açacak birçok hata vardır. Kötü web tasarımı uygulamaları dolabını temizlemenin ve iyi olanlarla yeniden doldurmanın zamanı geldi.

Aşama 1: Kavramsallaştırma ve planlama
Bu aşama diğer iki aşamaya göre daha sık atlanır. Çoğu yazar, araştırma makaleleri için taslaklar oluşturmayı sevmez ve çoğu web tasarımcısı da akış şemaları oluşturmayı sevmez. Tembel olmayın. Eğer çaba gösterir ve web sitenizi planlarsanız, web tasarım sürecinin daha az hatayla sorunsuz bir şekilde ilerleyeceğini göreceksiniz.

Web sitenizi etkili bir şekilde kavramsallaştırmak ve planlamak için ihtiyacınız olacak birkaç şey vardır:

• beyin
• bir kalem ve kağıt
• (isteğe bağlı) akış şeması yazılımı
• web sitenizin farklı bölümleri hakkında genel bir fikir

Başlamak için kaleminizi ve kağıdınızı alın veya favori akış şeması yazılımınızı başlatın. Mac OS X için lisans başına 150 ABD Doları tutarındaki OmniGraffle Professiona'yı kullanıyoruz, ancak düzenli olarak web siteleri oluşturuyorsanız buna değer. Eğer PC kullanıyorsanız SmartDraw kullanabileceğiniz harika bir ÜCRETSİZ akış şeması yazılımıdır. Yine de bir kalem ve kağıt gayet iyi çalışıyor.

Akış şemaları oluşturmanın birçok yöntemi vardır. Bu makalenin uzunluğu ve zaman açısından size bunu yapmanın en temel yolunu göstereceğiz. Akış şemaları hakkında daha fazla bilgi edinmek istiyorsanız Google veya Yahoo'da akış şemalarını arayın.

Kromatik Siteleri kavramsallaştırırken oluşturduğumuz akış şemasını görüntüleyin. (1) Akış şemasının en üstünde web sitemizin adını listeliyoruz. (2) Daha sonra web sitemizin her bir ana bölümünü dahil ediyoruz: Ana Sayfa, Hakkında ve Hizmetler. Bu bölümler web sitenizin ana navigasyonudur. Her bölümün adlarının ne olacağı tamamen web sitenizin içeriğine bağlıdır. Ziyaretçilerinizin web sitenizde gezinirken bunalmamaları için mümkün olduğunca az bölüm kullanmaya çalışın.

(3) Daha sonra, birincil sayfaların her birinde listelenecek tüm ikincil sayfaları (alt bölümleri) ekleyin. Ev için Profesyonel Web Tasarımı, Web Geliştirme ve Arama Motoru Optimizasyonunu dahil ettik. İkincil gezinmenin, birincil gezinmeden daha açıklayıcı olması gerekir. Web sitelerinizin gezinme hiyerarşisi ne kadar derin olursa, her etiketin o kadar açıklayıcı olması gerekir.

Dos

• Az ama öz; Birincil bölümlerin sayısını minimumda tutun. Web sitemizde fazlasıyla yeterli olan 6 bölüm kullanıyoruz
• İster kalem ve kağıt ister akış şeması yazılımı kullanıyor olun, işleri mümkün olduğunca temiz ve düzenli tutun. Akış şemasını yalnızca siz (ve sizinle çalışan herkes) kullanacak olsanız da, bunun yine de anlamlı olması gerekir -Birincil bölümleriniz daha geniş terimler kullanmalı, ikincil ve üçüncül terimler ise daha açıklayıcı olmalıdır.

Yapılmayacaklar
Bir akış şeması oluşturmak oldukça basittir; ancak kolaylıkla yapılabilecek birkaç hata vardır:

• Web sitenizin tamamı tek bir dar konuya odaklanmadıkça, ana gezinmenizde çok açıklayıcı terimler kullanmayın. -Birden fazla konuyu aynı sayfada toplamaya çalışmayın. Bu konular için genel bir bölüm oluşturun ve bu bölümden alt bölümler oluşturun. Bu, alt bölüm (açıklayıcı) web sayfalarının arama motorlarında (Google, Yahoo, MSN, Ask) daha iyi sıralamalara sahip olma olasılığını artıracaktır. Kısa ve açıklayıcı bir akış şeması oluşturduktan sonra ikinci aşamaya geçmeye hazırsınız. web tasarım süreci:

Aşama 2: Modelleme
Modelleme aşamasında statik “wireframe” maketleri oluşturulur. Her maket, web sitenize dahil edilecek her web sayfasının düzeninin temel bir iskeletini gösterir. Bu aşama önemlidir çünkü bize tasarımımızda farklı unsurların nereye yerleştirileceği konusunda fikir verir. Bu unsurlardan bazıları şunlardır:

• logo
• navigasyon menüsü
• içerik
• resimler, videolar

Bu maketleri oluşturmak için kalem ve kağıt veya tercih ettiğiniz maket yazılımını kullanabilirsiniz. Geçmişte Photoshop kullanıyorduk ama son zamanlarda OmniGraffle Professional kullanıyoruz. OmniGraffle, Photoshop kadar kaynak yoğun değildir ve tel çerçeve modellerimizi çok daha hızlı bir şekilde oluşturmamıza olanak tanır.

Ayrıca, web sitenizde görünecek tüm sayfaları taklit ettiğinizden emin olmak için zaman zaman bunlara başvurmanız gerekeceğinden, oluşturduğunuz akış şemalarının yakınınızda olduğundan emin olun.

İşte bir tel çerçeve maketinin nasıl görünmesi gerektiğine dair örneğimiz. Gördüğünüz gibi hiçbir renk veya grafik bulunmuyor. Tel kafes maketi tam olarak böyle olmalıdır; tasarımınızın iskelet düzeni. Amaç, web sayfasının öğelerinin her birinin nereye yerleştirileceği konusunda genel bir fikir sahibi olabilmektir.

Genellikle sol üstten başlayıp aşağıya doğru ilerliyoruz. Bir tel çerçevenin görünmesi gereken belirli bir yol yoktur. Hayal gücünü kullan. Ancak tel çerçevelerinizi oluştururken bir web sitesinin en önemli öğelerini (logo, gezinme menüsü, içerik yerleşimi, resim/video yerleşimi) dahil etmeyi unutmayın.

Sayfalarınızdan bazıları aynı düzeni kullanacaksa, o zaman bu sayfaların tamamını taklit etmenize gerek yoktur (ancak bunu kesinlikle yapabilirsiniz). Web sitenizin sahip olacağı benzersiz düzenin modelini oluşturduğunuzdan emin olun. Daha sonra kendinize teşekkür edeceksiniz.

Yapılacaklar

• tüm benzersiz sayfaların maketini yapın
• önemli öğeleri ekleyin (logo, gezinme, içerik yerleştirme, görseller/video yerleştirme) -en baştan başlayın ve aşağıya doğru ilerleyin -herhangi bir sayfanın modelini yapmayı unutmamanız için 1. aşamada oluşturduğunuz akış şemasına başvurun -kaydedin, kaydedin, kaydet – bilgisayardaki herhangi bir şeyde olduğu gibi, modellerinizi yaklaşık her 10 dakikada bir kaydedin
• temiz, kullanıcı dostu düzenlere odaklanın -öğelerinizi etiketleyin, böylece 3. aşamada onlara referans verdiğinizde ne olduklarını unutmazsınız -diğer web sitelerini ilham kaynağı olarak kullanın; diğer sitelerden öğeler alıp kendinize ait hale getirmenin yanlış bir yanı yoktur (bkz. “yapılmaması gerekenler”)

Dont'lar

• grafik veya renk eklemeyin (bu bir sonraki aşamadır) -modellerinizi çok "meşgul" etmeyin; Temiz, iyi organize edilmiş, kullanıcı dostu düzenlere odaklanın; bu aşamayı atlamayın; bu da en az ilki ve sonuncusu kadar önemlidir -eğer başka web sitelerinden öğeler alıyorsanız, intihal yapmadığınızdan emin olun; tasarımınızın belirli unsurlarını oluşturmak için başka bir web sitesinden ilham almak ile bunların düzenini ve renklerini bariz bir şekilde yırtmak arasında bir fark var

Aşama 3: Yürütme
Üçüncü ve son aşamada, uygulama ve 1. ve 2. aşamalardaki planlama, canlı, etkileşimli bir web sitesi oluşturmaya yardımcı olmak için birleştirilir.
Üçüncü aşama açık ara en fazla zaman harcayan aşamadır, çünkü 1) grafikleri oluşturacaksınız 2) içeriği oluşturacaksınız ve son olarak 3) web tasarımlarını resimlerden web tarayıcılarının web sitenizi dünyaya sunmak için kullandığı koda dönüştüreceksiniz.

Üçüncü aşamaya ulaştığınızda aşağıdaki konularda net bir fikre sahip olmalısınız:

• ziyaretçilerinizin bir yerden diğerine nasıl gidecekleri (1. aşama, akış şeması) -web sayfalarınızın nasıl düzenleneceği (2. aşama, tel çerçeve maketleri)

Bu iki şey hakkında net bir fikriniz yoksa birinci ve ikinci aşamalara geri dönün ve bunları geliştirmeye devam edin. Web sitenizi tasarlamak için açık ve kısa bir savaş planı oluşturduğunuzda üçüncü aşamanın en kolay olduğunu göreceksiniz.

Kalemi ve kağıdı bırak
3. aşamada, web sitenizin düzenini oluşturmak için renkleri ve grafikleri kullanacağınız için Photoshop veya başka bir resim düzenleme programı kullanmanız gerekir.

Genellikle ilk önce “ana” sayfayı (dizini) oluşturmaya başlarız. 2. aşamada oluşturduğunuz tel çerçevelerinizi, oluşturduğunuz her sayfa için şablon olarak kullanın. Ancak katı kutular kullanmak yerine grafikler, renkler ve metin kullanın. Bu, tasarım sürecinin son aşaması olduğundan, her sayfanın internette tam olarak nasıl görünmesini istediğiniz gibi görünmesi gerekir.

Gezinmeniz için arka planı eklediğinizden emin olun (ancak aslında metni resminize eklemeyin). CSS (basamaklı stil sayfaları) kullanılarak dönüştürüldüğünde, gezinmeniz resim değil metin biçiminde olmalıdır. Görseller, arama motorları tarafından taranamaz (gezinmenizde kullanılan anahtar kelimeler, arama motoru sonuç sayfalarında dizine eklenmez, bu da daha az kişinin web sitenizi bulabileceği anlamına gelir).

Tasarımlarınızdan memnun olduğunuzda ve internete koyulmaya hazır olduklarını hissettiğinizde, CSS tabanlı bir düzen oluşturabilmek için tasarımları parçalara ayırmanın zamanı gelmiştir. Düzenlerinizi CSS'ye dönüştürme veya web sitenizi CSS'de işaretleme hakkında daha fazla bilgi için w3schools.com adresini ziyaret edin. İnternette dolaştıktan sonra, görüntüden CSS'ye uygun bir eğitim bulamadık; bu nedenle önümüzdeki haftalarda bizden bir eğitim bekleyin. Tablo düzenleri geçmişte kaldığı için tasarımlarınızı CSS'ye dönüştürmek son derece önemlidir.

İşte 2. aşamada oluşturduğumuz düzenin neredeyse tamamlanmış bir web sitesi örneği. Bu doğrudan web tarayıcımızdan alındı ​​ve görebileceğiniz gibi artık bir logo, renkler, güzel bir navigasyon sistemi, bir altbilgi var. ve en önemlisi temiz, düzenli bir düzen.
1. ve 2. aşamalardaki planlama sayesinde düzenimiz iyi organize edilmiş ve kullanımı kolaydır.

Dos

• 2. aşamada oluşturulan şablonlarınıza referans verin; Orijinal düzeninizden sapmak sorun olmasa da, bunu yapmanıza gerek yoktur.
• gerçek tasarımınızı oluşturmadan önce biraz araştırma yapın; Diğer sitelerden fikir alın ve bunları kendinize ait yapın (intihal yapmadan)
• web sayfalarınızın son görünümünü oluşturmak için renk ve grafikler ekleyin -tasarımlarınızı resimlerden web tarayıcıları tarafından anlaşılabilecek biçimlendirmeye dönüştürmek için CSS (basamaklı stil sayfaları) kullanın -sayfalarınızı köprülerle kodlarken aşama 1'deki akış şemanıza başvurun; Her sayfada web sitenizdeki bağlantıların tamamını (veya çoğunluğunu) içeren bir açılır menü kullanmak daha iyidir; bu, gezinmeyi kolaylaştıracak ve ayrıca arama motoru örümcekleri uğradığında sayfalarınızın taranmasını kolaylaştıracaktır; CSS açılır menülerini almak için harika bir yer DynamicDrive.com'dur; Photoshop'ta veya kullandığınız görüntü düzenleme yazılımında çalışırken tasarımınızı sonlandırın; tasarımınız işaretlemeye (koda) dönüştürüldükten sonra değişiklik yapmak zor olabilir

Yapılmayacaklar

• CSS'ye dönüştürürken metni gezinme menülerinize dahil etmeyin; Resim metni kullanmak yerine arama motoru örümcekleri tarafından okunabilen normal metin kullanın
• dönüştürürken tabloları kullanmayın; CSS üzerine bir kitap satın almanız gerekse bile buna değecektir; masalar ölü
• Zaman kazanmak için ilk iki aşamayı atlamayın; Web tasarım sürecinin başından başlarsanız (sonundan ziyade) web siteniz daha iyi OLACAKTIR.
• Resimlerinizi CSS için keserken sıkıştırmayı unutmayın; Büyük resim dosyaları nedeniyle yavaş yüklenen bir web sitesinden daha kötü bir şey yoktur; Photoshop'ta “Web İçin Optimize Edilmiş Kaydet” seçeneği bulunur (CS3 – “Web ve Cihazlar için Kaydet”)

Süreç Mükemmelleştirir
Bu makalede gösterilene benzer bir web tasarım sürecini takip ederek, iyi organize edilmiş, kolayca gezinilebilen ve son derece kullanıcı dostu bir web sitesi oluşturma şansınızı artırırsınız. Kabul edelim; eğer ziyaretçiler web sitenizde gezinmeye çalışırken kaybolursa veya kafaları karışırsa, geri düğmesine basabilir ve daha kullanıcı dostu bir web sitesi arayabilirler. İnsanlar web sitelerinde yollarını bulmaya gelince düşünmekten hoşlanmazlar. Onları düşündürmeyin. Web sitenizi 1. aşamadan 3. aşamaya kadar planlayarak düşünürsünüz ve daha fazla kişinin web sitenizi ziyaret etmekten keyif alacağını göreceksiniz.