HTML Storyboard Nasıl Yapılır
Film şeridi, en çok hareketli görüntüler için kullanılırken, Web geliştiricileri ve iş danışmanları da film şeridi web siteleridir. Storyboard'lar, web sitenizin düzeni ve tasarımı gibi büyük bir grafik projeyi görselleştirmenize yardımcı olur. Süreç, siteyi gerçekten geliştirmeden önce web sitenizin nasıl görünmesi gerektiğine dair resimler çizerek web sitesinin akışını tasarlamak için etkili bir araç sunar. Kodlamaya başlamadan önce storyboard'lar, yeniden tasarımda size zaman ve para kazandırır.
1.
Storyboard'unuz için kaba bir rehber oluşturmak üzere web siteniz için kavramsal bir plan geliştirin. Blog, resim galerisi, biyografi sayfası, iletişim formu, mesaj panosu ve e-ticaret sayfası gibi sitenin içereceği içerik türünü belirleyin.
2.
Kağıt veya dijital bir çizim yüzeyi kullanarak web siteniz için bir kapsayıcının mockup taslağını çizin. Kap, Web sayfalarınızın çoğunda veya tamamında sürekli olarak görünen bir grafik öğeler kümesidir. Genellikle web sitesi banner'ınızı, gezinti menüsünü, sayfanın altındaki altbilgileri ve sütun düzenini içerir. Bir kapsayıcı kullanmak, sitenizdeki Web sayfalarını, çok farklı içerik gösterse bile tutarlı kılar. Bu tutarlı standartları Web sayfalarınız için ayarlamak, görüntüleyenlerin sitede gezinmesini kolaylaştırır. Aynı zamanda kendine özgü bir marka yaratman için sana daha fazla fırsat verir.
3.
Her tür içerik sayfasının mockup eskizlerini çizin. Kapsayıcınızı başlangıç noktası olarak kullanın, ardından sayfanın içeriğinin gerektirdiği grafik öğelerini yerleştirin. Örneğin, bir blog şablonu sayfasında, blog yazısı başlıklarının görünümünü, blog girişlerinin gövde metnini, içerilecek herhangi bir etiketi ve içerilecek diğer meta verilerin görünümünü, blog yazısı hakkında yorum yapmak için bağlantılar ve görsel olarak ayrı blog yazılarına ilişkin bölümleri tasarlayın. Sayfadaki öğelerin piksel boyutlarını ve konumlarını belirlerken ve renk şeması için renk kodlarını listeleyerek çok spesifik olun. Film şeridi sizin yararınıza veya işe alınmış tasarım ekibinizin yararınadır ve özgünlük ekledikçe daha kullanışlı hale gelir.
4.
Belirli içerik sayfalarının görünümünü veya işlevselliğini gereksiz yere kısıtlamadan tutarlılık sağlamak için tamamlandığında tüm storyboard'u inceleyin. Gerektiği şekilde revizyon yapın.
Gerekenler
- Çizim kağıdı veya dijital çizim yüzeyi
İpuçları
- Çizimlerinizin kusursuz bir şekilde tasarlanması gerekmiyor; Puanın karşısına geçmeye hizmet ediyorlar.
- Film şeridi oluşturma aşamasında hata yapmak ve yön değiştirmek, bir kez kod yazıp işaretlemeye başladığınızda olduğundan daha kolay ve ucuzdur.