Web sayfaları tasarlamak ve oluşturmak istiyorsanız, önceden plan yaparsanız bu işlem çok daha kolay olacaktır. Planlama aşamasında tasarımcı ve müşteri, ihtiyaçlarına uygun bir format ve yerleşim planı bulmak için birlikte çalışabilir. Planlama süreci sitenin stilini veya stilini etkiler, özellikle iş amaçlı ise bunun web tasarımında en önemli yönü olduğunu söyleyebilirsiniz.
Adım
Bölüm 1/4: Temel Yapıyı Oluşturma
Adım 1. Web sitesinin işlevini belirleyin
Kişisel bir site oluşturuyorsanız, muhtemelen cevabı zaten biliyorsunuzdur. Ancak başka bir kuruluş, şirket veya kişi için site oluşturuyorsanız, onların ne istediğini ve sitenin işlevselliğini bulmanız gerekir. Burada belirttiğiniz her şey web sayfası bittiğinde geçerli olacaktır.
- Web sitesi Storefront gerektiriyor mu? Kullanıcı yorumları yapılmalı mı? Kullanıcının daha sonra bir hesap oluşturması gerekecek mi? Web sitesi makale odaklı mı? Yoksa görüntü odaklı mı? Tüm bu ve diğer sorular siteyi tasarlamanıza ve tasarlamanıza yardımcı olacaktır.
- Bu planlama süreci, özellikle büyük bir şirket içinse ve bu projeyi oluştururken birçok kişi dahilse, bir çizime çekilebilir.
Adım 2. Bir site haritası diyagramı (site haritası) oluşturun
Site haritası diyagramı, kullanıcıların bir sayfadan diğerine nasıl geçtiğini gösteren bir akış şemasına benzer. Bu aşamada bir web sayfasına ihtiyacınız yok, sadece genel bir kavram akışına ihtiyacınız var. Diyagramlar oluşturmak veya kağıt üzerinde kendi çizimlerinizi yapmak için bir bilgisayar programı kullanabilirsiniz. Hiyerarşik düzenleme ve web sayfası bağlantısı kavramlarını göstermek için bu diyagramı kullanın.
Adım 3. Kart hazırlama yöntemini deneyin
Grup web geliştirmenin popüler bir yöntemi, herkesin beklentilerini öğrenmek için bir dizi kart kullanmaktır. Birkaç not kartı alın ve bir web sayfasının temel içeriğini her birine ayrı ayrı yazın. En iyi konsepti bulmak için bu kartları ekibinizle birlikte düzenleyin. Bu yöntem, web sayfalarının oluşturulmasında başkalarıyla işbirliği yaptığınızda kullanıma uygundur.
Adım 4. Kağıt ve bülten tahtası veya beyaz tahta kullanın
Bu, küçük bir bütçeyle özgün bir planlama yöntemidir, içeriği hızlı bir şekilde silebilir veya kaydırabilir ve akışı değiştirebilirsiniz. Web tasarımınızı kağıda çizin, ardından kağıtları iplikle birleştirin veya tahtaya çizgiler çizin. Bu yöntem beyin fırtınası oturumlarında kullanım için çok uygundur.
Adım 5. Bir içerik envanteri oluşturun
Aslında, yeni web tasarımlarından ziyade web'leri yeniden tasarlamada kullanmak daha uygun olma eğilimindedir. Biten her içerik parçasını veya web sayfasını bir elektronik tabloya ekleyin. Nelerin kaldırılacağını ve nelerin tutulacağını belirlemek için bu listeyi kullanarak her bir içerik veya sayfanın amacını not edin. Web'in yapısını basitleştirebilir ve daha sonra yeniden tasarım sürecini basitleştirebilirsiniz.
Bölüm 2/4: Temel Bir HTML Anahattı Oluşturma
Adım 1. Web sayfası hiyerarşisini oluşturmak için bir tel kafes oluşturun
Temel HTML şablonu, yalnızca en temel etiketleri ve örnek (bloklar/şablonlar) içeriğini kullanarak oluşturacağınız sitenin planıdır. Bu çerçeve, “Web'de ne görünür ve nerede?” sorusuna cevap verir. Bu taslağın oluşturulmasında biçimlendirme ve stil gerekli değildir.
- Bir stil ayarı seçmeden önce içeriğin yapısını ve akış şemasını temel bir taslakla görebilirsiniz.
- Temel HTML şablonları, PDF'ler veya resimler gibi statik değildir, yeni yapılar oluşturmak için örnek içeriği hızlıca kaydırabilirsiniz.
- Temel çerçeve, hem web geliştiricilerine hem de müşterilere fayda sağlayan etkileşimlidir. Bu temel çerçeve basit HTML koduyla yazıldığından, yine de içinde gezinebilir ve web sayfası değiştirmenin nasıl çalıştığını bilirsiniz. Bu PDF ile yapılamaz.
Adım 2. Gri Kutu yöntemini deneyin
Gray Box'ta web sayfası içeriğinizi engelleyin veya vurgulayın, en önemli içerik en üsttedir. İçeriği bir sütunda sıralayın. Örneğin, sayfa "Şirket Hakkında" ise, şirket hakkında ayrıntılı bilgiler en üstte, ardından bir personel listesi, ardından iletişim bilgileri vb.
Bu, üstbilgileri ve altbilgileri içermez. Gri Kutu, web'de görünecek içeriğin görsel bir temsilidir
Adım 3. Temel bir anahat oluşturucu programı deneyin
Temel bir web çerçevesi oluşturma sürecinde kullanabileceğiniz çeşitli programlar vardır. Ustalaşmanız gereken web programlama kodu (dili) miktarı her program için farklıdır. Oldukça popüler olan programlardan bazıları şunlardır:
- Desen Laboratuvarı. Bu site "atomik tasarıma" adanmıştır, her içerik daha büyük bir web sayfası oluşturan bir "molekül" olarak kabul edilir.
- Jumpchart'lar. Bu web sayfası, web tabanlı planlama ve çerçeveleme hizmetleri sağlar. Bu siteler ücretlidir ve bir abonelik gerektirir, ancak çok fazla web programlama koduna hakim olmak zorunda kalmadan hızlı bir şekilde web çerçeveleri oluşturabilirsiniz.
- Kablosuz. Wirefy, “atomik tasarım” sunan başka bir sitedir. Web geliştiricileri aracı ücretsiz olarak alabilir.
Adım 4. Basit HTML işaretlemesi kullanın
İyi bir temel şablon, orijinal siteye kolayca dönüşecektir. Bu şablonu oluşturma sürecinde web stili hakkında çok fazla düşünmeyin. Kolayca anlaşılabilen ve değiştirilebilen işaretleme kullanın.
Basit bir temel çerçeve çok daha iyidir. İşaretleme oluşturmanın amacı bir yapı oluşturmaktır. Görsel görünüm daha sonra CSS ve gelişmiş işaretleme ile ayarlanabilir
Adım 5. Her web sayfası için temel bir taslak oluşturun
Her web sayfasını tek bir temel anahatla eşitlemeye cazip gelebilirsiniz. Aslında, bu yalnızca sitenizi sade ve sıkıcı hale getirecektir. Her sayfa için farklı bir taslak oluşturun, her sayfanın kendi tasarımına ihtiyacı olduğunu anlayacaksınız.
Bölüm 3/4: İçerik Oluşturma
Adım 1. Bir web sayfası oluşturmadan önce içeriği hazırlayın
Örnekler veya yer tutucular kullanmak yerine gerçek içeriğiniz varsa, web görünümünüzü önizlemeyi çok daha kolay bulacaksınız. Çok fazla içeriğe sahip olmanıza gerek yok, ancak orijinal görüntünün bir kopyasını kullanırsanız maketiniz çok daha iyi görünecektir.
Tüm makale materyaline sahip olmanız gerekmez, ancak en azından gerçek bir başlığı olmalıdır
Adım 2. Harika içeriğin sadece metin olmadığını unutmayın
İnternet, basit bir metin web sayfasından çok daha karmaşıktır. Ziyaretçileri çekmek ve davet etmek için harika bir web sitesi oluşturmak için çeşitli farklı içeriğe ihtiyacınız var. Örneğin:
- Resim.
- Ses.
- Videolar
- Web iletimi veya web akışı (Twitter)
- Facebook Entegrasyonu
- RSS
- Web beslemesi
Adım 3. Yardım için profesyonel bir fotoğrafçıdan yardım isteyin
Sitenize fotoğraf eklemek istiyorsanız, profesyonel fotoğrafçılıkla dolu olması durumunda web sitenizden alacağınız ilk izlenim çok daha iyi olacaktır. İyi bir fotoğraf, yirmiden fazla düşük kaliteli fotoğrafa bedeldir.
Uzun süredir bu işte olan profesyonel bir fotoğrafçıdan daha ucuz bir çözüm olarak fotoğraf sanatının yeni mezununu arayın
Adım 4. Kaliteli makaleler yazın
Web sayfasındaki yazılı içerik, web trafiğinizin miktarını belirleyecektir. Bu tasarım sürecinde içerik oluşturma konusunda çok fazla endişelenmenize gerek olmasa da, siteniz çalışır duruma geldiğinde düzenli olarak içeriğe ihtiyacınız olacağından, bunu düşünmeye başlamaktan zarar gelmez.
Makale içeriğine ek olarak, bir web sayfasını derleme sürecinde de sahip olmanız gereken yazılı materyaller vardır. Örneğin iletişim bilgileri, şirket adı veya sitede birden çok kez kullanılacak başka herhangi bir şey
Bölüm 4/4: Kavramları Web Sitelerine Dönüştürme
Adım 1. Temel öğeleri düzenleyin
Bu öğe düzeni, başlıklar, dipnotlar ve gezinme menüleri gibi sitenizdeki her sayfa için geçerlidir. Tüm sayfaların nasıl göründüğünü kontrol edebilmeniz için çok basit bir tarzda ayarlayın. Bu, özellikle web düzeni sürecine ilerlerken kullanışlıdır.
Ayrıntılar hakkında çok fazla endişelenmeyin, başlığın nasıl göründüğünü önizlemeye (önizlemeye) çalışın
Adım 2. Basit bir düzen oluşturun
Saat konumunu temel anahat sütunundan sayfadaki gerçek konuma kaydırarak başlayın. Örneğin, örnek gezinme menüsünü sayfanın soluna ve başlıklar listesini de sağa taşımak isteyebilirsiniz.
Bir sonraki adıma geçmeden önce birden çok sayfa için web mizanpajları denemeye devam edin. Oluşturduğunuz düzenin canlı hissedip hissetmediğini görmek için başkalarının ona bakmasına izin verin
Adım 3. Bir maket oluşturun
Web sitenizin maketlerini veya örnek sayfalarını oluşturmak için Photoshop gibi bir program kullanın. Derlediğiniz düzeni kılavuz olarak kullanın. Bir görüntü işleme programı ile maketleri daha hızlı yapabilir ve istediğiniz sonuçları alabilirsiniz. Bu görüntülerin sonuçları daha sonra web programlama kodunun yazılması sürecinde referans olarak kullanılabilir.
İyi görünmesi için asıl içeriği modele yerleştirin
Adım 4. Örnek konsepti orijinal içerikle değiştirin
Web sayfalarına içerik ve öğeler ekleyin. Şimdilik web stili ayarlarıyla uğraşmayın, her şeyi doğru yere istifleyin. Bu, daha sonra yaptığınız web stili değişikliklerini gözden geçirmenize yardımcı olacaktır.
Adım 5. Bir web stili kılavuzu oluşturun
Özellikle büyük siteler için stillerin bir karışımını korumak çok önemlidir. Site iş amaçlıysa ve zaten kendi markası veya stili varsa, bu site tasarımına entegre edilmelidir. Bir web sayfası stil kılavuzu oluştururken göz önünde bulundurulması gerekenler:
- Navigasyon
- Baş not
- Paragraf
- italik karakter
- kalın karakter
- Bağlantılar (etkin, etkin değil, üzerine gelin)
- Görüntü kullanımı
- Simge
- topuz
- liste
Adım 6. Web stilini uygulayın
Doğru stili ve tasarımı bulduğunuzda uygulayın. CSS, stilleri bir web sayfasında veya site genelinde uygulamanın en kolay yollarından biridir. CSS kullanmanın ayrıntılarını daha iyi anlamak için aşağıdaki talimatlara bakın.
