2/2019: Lecture 5

CMD364 : Web Design 2/2019 LECTURE 05

Content Inventory & Wireframe

Jitdhikorn Sundarasaradula จิตธิกร สุนทรศารทูล email: [email protected]

• Content Inventory • Wireframe

• Information Architecture (n.d.). In Wikipedia. Retrieved February 6, 2017, from https://en.wikipedia.org/wiki/Information_architecture • Information Architecture Basics (n.d.). Retrieved February 6, 2017 from https://www.usability.gov/what-and- why/information-architecture.html • Spencer, Donna (27 April 2010) Classification Schemes (and When to Use Them) Retrieved February 6, 2017 from http://www.uxbooth.com/articles/classification-schemes-and-when- to-use-them/ • Content Inventory (n.d.). Retrieved February 6, 2017 from https://www.usability.gov/how-to-and-tools/methods/content- inventory.html

Requirements Planning Design

Development

Maintenance Deployment Contents Layout Getting Information

Information Visual / UX Architecture

Analysis of Requirement Design Wireframe Elements

• Information Architecture (IA) theory . Organization Scheme . Organization Structure • Content Inventory • Wireframe

• A content inventory is a list of all the content on your site. Your inventory will typically include text, images, documents, and applications. To gain insight from your inventory, you will need to assess each piece of content. Doing so will help you understand what is on the site, if it is located properly, and whether content is up-to-date • Usually content inventory will follow by content audit process to analysis the contents of the website • However, at the beginning process of a website design, it is a good practice to list out all the content of a website to clarify and planning the design.

• The spreadsheet stores information about each ‘page’ on the website. It is a very handy tool as it allows you to get an understanding of all the content on your website, and see it all at a glance. • Typical information should include . Navigation title, page title and URL for every page . List of all media (sound, images, diagram, animation, clips) . List of all downloadable files (publications, resources, fact sheets etc) . Content relationships – usually the site hierarchy . Content owner . Date of last update (if any)

• Here are some samples of items in content inventory • Unique Content ID • Title • URL • File Format (HTML, PDF, DOC, TXT…) • Author or Provider • Physical location (in the content management system, on the server, etc) • Meta Description • Meta Keywords • Categories/ Tags • Dates (created, revised, accessed)

 How to Conduct A Content Audit by Donna Spencer https://uxmastery.com/how-to-conduct-a-content-audit/

 5 Content Inventory Tips for a Successful Website by Garenne Bigby https://dynomapper.com/blog/11-content-inventory/213-5-tips- for-content-inventories

 How to Conduct a Fast, Efficient, and Accurate Content Inventory by Garenne Bigby https://dynomapper.com/blog/11-content-inventory/223-how- to-conduct-a-fast-efficient-and-accurate-content-inventory

• A wireframe is a two-dimensional illustration of a page’s interface that specifically focuses on space allocation and prioritization of content, functionalities available, and intended behaviors. • Wireframes show what screen does not what it looks like. • Wireframes typically do not include any styling, color, or graphics. • Wireframes also help establish relationships between a website’s various templates.

• Connect the site’s information architecture to its visual design by showing paths between pages • Clarify consistent ways for displaying particular types of information on the user interface • Determine intended functionality in the interface • Prioritize content through the determination of how much space to allocate to a given item and where that item is located

• Low-fidelity wireframes help facilitate project team communication and are relatively quick to develop. They tend to be more abstract because they often use simple images to block off space and implement dummy content, or Latin (lorem ipsum) text as filler for content and labels. • High-fidelity wireframes are better for documentation because of their increased level of detail. These wireframes often include information about each particular item on the page, including dimensions, behavior, and/ or actions related to any interactive elements

The goal of wireframe is not to depict visual design so keep it simple. • Do not use colors. Use various gray tones to communicate the differences of color. • Do not use images. use a rectangular box sized to dimension with an “x” through it. • Use only one generic font. use generic font and resize the font to indicate various headers and changes in the hierarchy of the text information on the page.

Wireframes usually represents a layout design of a webpage. Three main design components of a layout are. • Information design: Show placement and prioritization of information/contents in a web page. How information is arranged according to the purposes and functions. • Navigation design: Display navigation systems of a website e.g. showing how to move from page to page through the website, or showing how users understand the navigation of a website. The navigation systems of a website typically contains multiple systems such as global navigation, local navigation, supplementary navigation, etc.

• Interface design: Present how users interact with the functionality of the system using interface elements. Interface elements of a web page are such as action buttons, text fields, check boxes, radio buttons and drop-down menus.

• Typical contents of wireframe: . Logo . Search field . Breadcrumb . Headers, including page title and sub level headings . Navigation systems, including global navigation and local navigation . Body content . Share buttons . Contact information . Footer

 A Beginner’s Guide to Wireframing by Winnie Lim https://webdesign.tutsplus.com/articles/a-beginners-guide-to- wireframing--webdesign-7399

 Website Wireframe from www.smartdraw.com https://www.smartdraw.com/website-wireframe/

 Wireframing for UX: What it is and how to get better at it By Ben Rowe from UX Mastery https://www.youtube.com/watch?v=8-vTd7GRk-w