Bir web sitesi ağaç diyagramı, bir web sitesindeki sayfaların nasıl düzenlendiğini gösterir. Ana sayfalar, web sayfaları arasındaki ilişkileri ve bunlara nasıl erişildiğini gösteren alt sayfaların üstünde veya solunda gösterilir. Web geliştirme ekipleri, web sitelerini oluştururken veya yeniden tasarlarken diyagramları kullanır. Web sitesi ağaç diyagramları, web sitesinin boyutuna ve geliştirme ekibinin ihtiyaçlarına bağlı olarak basit veya ayrıntılı olabilir.
Aşama 1
Web sitesinin içerdiği veya içereceği web sayfalarının bir listesini oluşturun. Listelenen her öğenin web sitenizde bir sayfa olacağından emin olun. Web sitenizin boyutuna bağlı olarak, site diyagramınızı oluşturmanıza ve web sitenizi geliştirirken ilerlemeyi izlemenize yardımcı olması için her sayfaya sayısal bir referans atayın.
Adım 2
Madde işaretli listeleri kullanarak, anahattı web sitenizdeki her sayfa arasındaki ebeveyn-çocuk ilişkilerini gösterecek şekilde düzenleyin. Örneğin, bir çevrimiçi giyim mağazasının web sitesinde, erkek, kadın ve çocuk giyimine yönlendiren üst düzey ana sayfalar olabilir. Bu sayfaların her birinde, anahatta altlarında listelenen gömlek ve pantolon gibi giyim türleri bulunur ve sonunda bireysel ürünler için sayfalara yönlendirilir.
Aşama 3
Bir belgenin üst kısmına her kategori için bir dikdörtgen çizerek diyagramınızı oluşturmaya başlayın. Diyagramınıza her üst düzey web sayfası için kısa bir başlık ekleyin. Diğer web sitesi planlama belgelerinizde sayfayla ilgili ek ayrıntılara bakabilmeniz için sayfanın referans numarasını ekleyin.
4. Adım
En üst düzey kategorilerinizden birinin altındaki her alt kategori için dikdörtgenler çizin. Örneğin, gömlekler, pantolonlar, şortlar ve montlar için en üst düzey erkek giyim kategorisinin altına dört dikdörtgen çizin. Temsil ettikleri sayfaların web sitenizin yapısında aynı seviyede olduğunu göstermek için bu dikdörtgenleri yan yana hizalayın.
Adım 5
Alt kategori sayfalarını, bir organizasyonun hiyerarşi şeması oluşturuyormuşsunuz gibi ait oldukları üst düzey kategoriye bağlayın. Örneğin, erkek giyim ebeveyn kategorisine gömlek, pantolon, şort ve mont sayfalarından çizgiler çizin. Site diyagramınızın okunabilirliğini artırmak için kuruluş şemasındakilere benzer düz çizgiler yapın.
6. Adım
Ağaç diyagramı web sitenizi etkili bir şekilde geliştirmek için ihtiyaç duyduğunuz ayrıntı miktarını içerene kadar diyagramınızı alt kategorilere ayırmaya devam edin. Örneğin, erkek giyim kategorisinin gömlekler bölümünün altına elbise gömlekleri ve gündelik gömleklerden oluşan kutular çizin. Bununla birlikte, site diyagramınıza her gündelik erkek gömleğinin sayfasını eklemeniz gerekmeyebilir.
7. Adım
Web sitenizin tüm üst düzey kategorileri için diyagram bölümlerini aynı şekilde tamamlayın. Örneğin, giyim web sitesinin kadın ve çocuk bölümlerini tamamlayın.
Ekibinize iletmeniz gereken bilgileri belirtmek için ağaç diyagramınızda kullanılan sembolleri değiştirin. Örneğin, dinamik web sayfaları için yuvarlatılmış dikdörtgenler ve tek tek listelenmeyen bir grup benzer web sayfasını göstermek için birlikte yığılmış birkaç web sayfasının bir çizimini kullanın. Konvansiyonlarınızı açıklamak için diyagramınıza bir açıklama ekleyin.
