Setup for Functional Prototyping on OSX

1. Open Terminal.
2. Install Ruby: https://www.ruby-lang.org/en/
3. Install Homebrew: http://brew.sh/
4. Install node.js by running the command: brew install node
5. install coffee script: npm install -g coffee-script
6. Install grunt.js: npm install -g grunt-cli
7. Make sure your Dropbox is synced
8. Open Terminal  and navigate to ‘Source’ in your dropbox and run: npm init
9. install these packages:
npm install grunt-contrib-sass –save-dev
npm install grunt-contrib-watch –save-dev
npm install grunt-autoprefixer –save-dev
10. Install git: https://git-scm.com/downloads
11. Install Jekyll:  sudo gem install jekyll -v 2.5.3
12. Running Jekyll: http://jekyllrb.com/
13. Install Sublime text: https://www.sublimetext.com/3
14. Install SourceTree: SourceTree (commit using SourceTree)
15. Add http://github.com to Keychain Access
16. push changes to github using terminal (from the source dir) by running command: git push master

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.

TreeStructure

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

SingleFrameStructure.png

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!

NetStructure.png

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

JumpLineStructure.png

Jump-line

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

linearStructure.png

Linear

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

P4NH_Sitemap-650x392.jpg

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

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.

P4NH_wireframe.jpg