Skip to content

Latest commit

 

History

History
60 lines (43 loc) · 3.83 KB

README.md

File metadata and controls

60 lines (43 loc) · 3.83 KB
Raw

Week 2 - Conceptual Plans

A Plan For Success

Conceptual plans are the blueprints for any design project. Conducted early in the design process, they can include any number of documents and exercises that will be helpful in communicating ideas to all stakeholders and instrumental in insuring a quality end product and user experience. The primary goal is to map out the project using a user-centered approach. Planning documents should try to be style/design independent, with a focus on the user's experience, goals, & tasks to help determine the best possible site structure and content hierarchy.

Purpose of site map and wireframes

  • Map out the site architecture, structure, navigation, page hierarchy
  • Categorize the site content into logical groups, which will have meaning for the user
  • Organize the order of the pages of the site, to create logical paths
  • Easy to understand diagrams, useful tool for communicating how the website works
  • Keep your client focus
  • Avoid gaps
  • Visualize what you need. Images, content, etc.

Site Map

A site map is a list or diagram which represents the hierarchy & structure of the html pages in a website. It lets you take a closer look at the pages in your site and how they lead into each other.

Site Map Screenshot

Wireframes

A wireframe is a grayscale block diagram that illustrates the overall navigation and the blocks of elements such as content, function, and more. Represents a skeletal framework of a website.

Wireframes Screenshot

Interactive Wireframes

Traditional wireframes (flat images) and paper prototypes are great tools to communicate to both clients and internal team members how an interface might look structurally, but they can potentially fall short in both determining and communicating the user experience. One quick and efficient tool is to create interactive wireframes. They have multiple advantages, such as acting as an early prototype to help designers and developers determine best practices for increased usabiltity.

InVision

InVision allows designers to build interactive, high-fidelity, realistic web and mobile mockups and prototypes.

Interactive Wireframes with InVision

Homework:

Please add links to the following on your class art249 website.

  • Site Map – Due: Monday, September 07, 2015 11:59PM
  • Wireframes – Due: Monday, September 07, 2015 11:59PM
  • Interactive Wireframes – Due: Monday, September 07, 2015 11:59PM

Reference