Site maps and wireframes

 What are Sitemaps

Sitemaps is a list of pages of a web site within a domain . There are three primary kinds of sitemaps:         Sitemaps are used during  the planning of a web site by its designers . Human-visible listings , typically hierarchical , of the pages on a site. Structured listings intended for web crawlers such as search engines

                                   EXAMPLE 

  Used during planning of websites by designers 

Sitemaps that’s available for viewing online by those visiting a website 

 The home page is at the top 

The lines in inbetween each one indicate the links between each tab 

The function is to login/sign up 

Tabs and sub-tabs 

Disadvantages no design info structure could become complicated 

Advantages info regarding on how different webpages link to return home 

Three main types 

1 those used during planning of a website by design 

2 the Sitemap available for viewing online by those visiting a website 

3 a structure (coded) list designed for search engines 

What are wireframes 

A wireframes is a two dimensional illustration of a page interface that specifically focuses on space allocation , and prioritisation of content functionalities available and intended behaviours.                                                 For these reasons , wireframes typically do not include any styling , colour , or graphics 

                                 EXAMPLE

A wireframe is a diagram or a set of diagrams that consist of simple lines and shapes representing the skeleton of a website or an applications user interface (UI) and core functionality 

A visual representation of the framework of a website phone or tablet 

To help arrange the site for a specific purpose 

Shows the websites layout - could be a homepage or any website page 

Shows how different elements (features) of the site interact with each other 

Doesn’t focus on colours , style or graphics , however these should be discussed through annotations 

Focus = functionally- what it does , not how it looks 

It also can be hand drawn sketches

Created by business analysts user experience designers , developers and visual designers 

Expertise required: interaction design information architecture and user research 

Keywords you need to use if asked to design or discuss a wireframe 

Logo placeholder 

Header and footer placeholders 

Primary image placeholder 

Secondary image placeholders 

Sample text or body copy 

Hex codes ( these are codes that define colours for a designer) 

Button paths ( show a user/client/team what content appears when pressing on a button 

Advantages 

it can help you arrange a website for business aims 

Helps your website layout be efficient 

Help ur site to be able to interact with people for business enquiries 

Disadvantages 

Doesn’t focus on the appeal of your website 

It can be time consuming