{"id":206,"date":"2015-01-27T19:02:31","date_gmt":"2015-01-28T02:02:31","guid":{"rendered":"https:\/\/rmu.andrewyames.com\/?page_id=206"},"modified":"2021-09-15T11:33:04","modified_gmt":"2021-09-15T15:33:04","slug":"wireframes-and-prototypes","status":"publish","type":"page","link":"https:\/\/rmu.andrewyames.com\/?page_id=206","title":{"rendered":"Wireframes and Prototypes"},"content":{"rendered":"\n
\n

 <\/p>\n

Moving from the strategy, and scope we shift onto designing the structure<\/strong> and skeleton<\/strong> for Project 1. At this stage we begin to decide how content and pages are connected and where content (i.e. various levels of navigation, copy, pictures, video, etc.) live. This is done using information architecture and wireframes.<\/p>\n

Information Architecture<\/h1>\n

An information architecture simply shows how your pages are connected using one of four architectural types: Hierarchical<\/strong>, Matrix<\/strong>, Organic<\/strong> or Sequential<\/strong>.<\/p>\n

\n

Hierarchical Structures<\/h3>\n<\/div>\n
\n

In Hierarchical Structures, also known as tree structures, there is a top down approach or parent\/child relationships between pieces of information.  Users start with broader categories of information (parent) and then drill further down into the structure to find narrower, more detailed information (child).<\/p>\n<\/div>\n

\n
\n
\n

Matrix Structures<\/h3>\n

A Matrix Structure allows users to determine their own path since content is linked in numerous ways. This type of structure takes full advantage of the principles behind hypertext.  For example, one user could choose to navigate through a set of content based on date while another navigates based on topic or catagory.<\/p>\n

Organic<\/h3>\n

An Organic Structure encourages users to explore, and like Matrix takes full advantage of the principles behind hypertext. Pages are connected based on content but have no hierarchy and are not categorized.<\/p>\n

Sequential Structures<\/h3>\n

Websites with Sequential Structures require users to go step-by-step, following a specific path through content.<\/p>\n

Archicture Examples<\/a><\/p>\n<\/div>\n<\/div>\n<\/div>\n

Wireframes<\/h1>\n

These are simple drawings that indicate where content and interface elements go. The gallery shows a few examples.<\/p>\n

\n

<\/p><\/div><\/div>\n\n\n\n