UI Presentation and Structures

There are five main types of UI structures that I like to call “navigation paradigms”. Here’s a brief overview of the structures supplemented by their characteristics.


Tree (Most commonly used in web design – think WordPress, Drupal, Joomla and SharePoint)

The branches offer various navigation possibilities like breadcrumbs, secondary nav, et cetera.
Logical hierarchical structure


Single Frame (think parallax or other highly interactive sites that animate from section to section)

Experienced as a single page by users – fancy!
No hierarchies – hip and trendy!


Net (More commonly used in application and OS design than web design – think multitasking and accessing contact lists)

No clear hierarchy
Smaller, interlinked subsidiary systems
Nodes correspond with the home page



Linear screen arrangement
User can reach any page from the homepage
Little interactivity



Linear screen arrangement
no active user intervention possible
each item of information built on others

To create compelling UI architecture one should ask themselves the following questions that entertain certain criteria:

1. Is the information presented in a simple fluid manner?
2. Is the content essential?
3. Is the logical structure manageable?
4. Is the structure intuitive and useable?
5. Is the design consistent?
6. Is the design visually pleasing and delightful?
7. Is the information delivered quickly?

So there you have it! Now go have that conversation with UX with your head held high!

Designing Site Architecture and Wireframes


After a project kick-off meeting the first steps involve creating a document that encapsulates all the shared ideas. What we’re doing as designers is taking any visual, verbal and documented feedback and summarizing key points, laying out a framework for the project.

A good initial document should contain the following sections:

  • A branded cover with relevant project and contact information
  • Design approach including a summary of the UX/UI problems and their solutions
  • Inspirations – a mood board of sorts – keep it succinct
  • Concepts and thumbnails that give weight to the chosen navigation paradigm and depth to the drafted design
  • The site architecture
  • Wireframes

Though all these sections are important, I’d like to summarize the last two and why these are critical to any UX/UI process.

Site Architecture

A visual site map reveals the bigger picture making sure that the user is never at a dead-end. It also helps developers envision how they are to build the site. It’s a visual representation of the site that is probably based on the chosen navigation paradigm. The example above demonstrates the architecture by grouping pages into a drop-down navigation system commonly used in many sites today.


Wireframes are just that, wireframes. They should include little to no detail and are meant to show how the information is organized. Technically, the more “designed” the wireframes become, they serve more as a distraction than a useful tool. Some customers are different from others so the level of detail depends on what they can handle while considering the overall scope of the project. Visual composites are the next step, but that’s another subject. The example below should give some context.