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

Interactive Advertising Resources

Designers and creative technologists should take note of a few great resources I’ve learned about in the past few years.

The most important is the Interactive Advertising Bureau (IAB). The IAB provides advertising professionals a way of determining what technologies to use for deliverables like banner ads, micro-sites and other marketing techniques.

Then there’s the World Wide Web Consortium (W3C). The W3C standardizes technology and helps to align different platforms by creating and approving drafts to be adopted as the point of record.

Along with the W3C and IAB there’s the Web Hypertext Application Technology Working Group (WHATWG). The IAB, W3C and the WHATWG often collaborate, determining the delta of front-end technology like HTML, CSS, JavaScript and other components like Adobe Flash. In short, they help to make tools available for us to be creative. There are many other groups, but I tend to gravitate toward these three for currents the most.

While working through problems I often use these indispensable knowledge bases:

Here are some tools for Open Source Software Development (OSS) to get you started:

Here are some good Responsive Web Design (RWD), data-binding, and other goodies:

Two CSS compilers:

Here are some compact JavaScript frameworks:

Like Compilers and strong typing? Try one of these JavaScript alts:

Here are some Content Management System (CMS) choices for MySQL and PHPMyAdmin/PHP, templating nerds:

Here are some good test guys:

A couple good code sharing services for debugging:

Debugging scary things:

Fiddler

There are a lot of choices out there, for instance… I’ve been working a lot with MVC .Net to use and deploy all the above (with the exception of the CMS choices), so remember to explore and have fun!

grinning face 

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

Prototyping Fresh Paint for Windows Phone

painting-close-up

In the World of prototyping there are many possible outcomes. Sometimes the prototype becomes an application, other times it becomes nothing. The prototype I’ve chosen to discuss is no exception. Sure it’s an application made for Microsoft, but they have changed much as a company in the past four years. I’ve found that the agile development process has been making the rounds on Microsoft’s Redmond Campus like never before, leaving everything up in the air. Not that it has ever been a walk in the park as a designer here at Microsoft, but the ship cycle used to be 3 years and now it’s every week.

The feelings of desperation, anxiety and uncertainty make for an exciting workplace indeed. Not to mention the people for whom I created this prototype are part of Microsoft’s research organization known as the start-up business group. The point being that I had a mere 48 hours to make the prototype and provide the development team – two guys – with the assets and the code necessary to move forward into production. Somewhere around the 14th hour I handed-off a rough prototype to be served as a demonstration to the stakeholders who would make or break the application as far as funding was concerned. Luckily for me as I was coding another designer was kind enough to generate the assets needed for the controls – from the composites. Kind of backwards, eh?

My experience building the Fresh Paint application prototypes reveal the difference between ideal app design process versus actual app design process. Let’s break the two down a bit, shall we?

An Ideal App Design Process

The business, design and technology triad come up with an idea for an app and a strategy

Sketch the UI’s golden path – what are the goals and personality? – and discuss it with the team

Create an app-flow diagram and discuss it with the team

Create wire frames of the UI, smoothing out the UX with functional specifications – functional “specs” cover what the different controls do, their behaviors, events actions and such and discuss these with the team

Create a few personas representing the apps intended users using models from Getty Images and give them names based on character from HBO’s “Game of Thrones” so colleagues chuckle and love you for it then seek compromise with the team

Design a few versions using sexy software like Sketch, Marvel, Pixate, Illustrator, Photoshop, 3D Studio Max and Cinema 4D and discuss them with the team

Put together a deck for presentation to the broader team, usually known as a stop-motion or “paper” prototype to solicit ideas and buy-in

Create motion comps using Adobe After Effects that demonstrate the physics of the UI and give context to the app flow diagram, sometimes using the personas as contacts within the app and discuss animation with the team

Start using the integrated development environment (IDE) of choice like Visual Studio, Eclipse, Source Insight or xCode, using a well-documented and intuitive software development kit (SDK) to generate the code and UI with regards to front-end development resulting in a draft of the prototyped application representing the culmination of efforts of the UX design team by yourself

Iterate and refine based upon feedback from the team

Present a bug-free prototype to the business decision makers within the company

Give high-fives all around when the app is approved for production

deliver the prototype, assets, functional specs and its source code to engineering

Listen to engineers throw chairs at each other whilst shopping for new fonts created by House Industries

FreshPaint_Mobile_App-01-472x266

Actual App Design Process (the order here doesn’t necessarily apply)

Come up with an idea for an app and a persona representing a fictional user, find a cheap stock photo or use family members to represent the user avatar.

Hastily draw the UI’s golden path on a white board and leave it up to serve as the app-flow diagram and wireframe adding as dead-ends occur and discuss it with the team as you code with the available IDE, using an under-documented and under-intuitive software development kit (SDK) as the design composites that will also serve as asset slicer conduits are created by you or a fellow designer

Put together a deck for presentation to the broader team, usually known as a stop-motion or “paper” prototype to solicit ideas and buy-in, use this as a functional spec for the prototype and make changes every day to adhere to good ideas that come from the team meetings

Add assets to the prototype as they become available, but use for placement only (FPO) assets in the meantime

Participate in way too many discussions with engineers and assure business decisions makers that the FPO assets aren’t the ones that will ship as they occasionally help and look over your shoulder

provide a prototype to be presented to the team and make changes based upon everyone’s feedback a couple of times

Give high-fives all around when the app is approved for production

deliver the prototype, assets and its source code to engineering and help integrate the markup

Listen to engineers disagree with each other whilst starting the next prototype with your team

I guess you could call the above comparison a good summary of what it takes to create an app from a design perspective nowadays. The prototype ended up serving as collateral to the PowerPoint presentation as it was more hands-on and could be toyed with as the presenter spoke to the stakeholders. Once we had the green light to move the prototype to engineering it served as a head start for the front-end UI as I coded it to be scalable for the devs – it was far from perfect, but at least they didn’t need to worry as much.

My part of the process involved not only creating the prototype, but all facets of the design process. It was a true team effort, with my main focus being the prototype. There were four designers involved and we worked together to bring Fresh Paint to Windows Phone. That was a busy week and one of the greatest experiences of mine at Microsoft!

Wireframing A Website

wireframe-650x421

What is a wireframe?

A Wireframe is a visual representation of content layout in the application.

Developer Perspective
Wireframes help developers visualize the entire product in a non-opinionated way.

Client / Business Perspective
Wireframes are an initial-stage deliverable that ensures both parties agree on the UX.

What are the benefits of wireframing?

Designers / Developers Perspective
Wireframes may inspire the designer, resulting in a more fluid creative process.
Wireframes give the developer a clear picture of the elements that they will need to code.

Client / Business Perspective
Wireframes provide the client an early, close-up view of the application (or a chance to get it re-designed).
Wireframes clarify any misunderstandings in the requirements

 

About Those Motion Studies…

Whenever I work on motion studies I rely on Adobe After Effects, but I’m just now discovering the power of Cinema 4D. Whilst researching a couple years ago I found this awesome blog called Greyscalegorilla. This group of 3D experts help keep me aware of current trends. Please watch the video tutorial about how to make a 3D app icon above to see what I mean. More tutorials may be found here, enjoy!