Category: Prototype

Designing in Browser (Part 2): A Real Workflow

I want to dive a little deeper on some real-world design-in-browser instances. I’m designing in browser with my team on a current philosophie project — but there’s a twist: a mobile web application meant to have the look, feel, and behavior of a native iOS application.

It took us some time to figure out the best workflow for this project, but in the end, we chose to go with a happy medium of some traditional design exploration and Adobe Photoshop work mixed with in-browser iteration.

source

The When, Why and How of Designing in Browser (Part 1)

Rather than spending hours, days, weeks and months designing those pixel-perfect comps in Photoshop, a mainstay in a waterfall-oriented development process, designing in browser allows you to take whatever sketches and preliminary work you’ve conducted and enables you to jump right into the text editor and emerge with shippable code.

…There are many articles in the tech community that sing the praises of designing in browser — it’s future of web design, we should Kill Photoshop — to name a couple.

source

Treejack – online tree testing software

Know where and why people get lost in your content.

Take the guesswork out of information architecture with Treejack – the usability testing tool you can use to test your IA without visual distractions. Treejack helps you prove your site structure will work before you get into interface design.

Tree testing is a usability technique for evaluating the findability of topics in a website. It’s also known as ‘reverse card sorting’ or ‘card-based classification’. Tree testing is done on a simplified text version of your site structure – without the influence of navigation aids and visual design.

source

Designer’s Toolkit: Road Testing Prototype Tools

So, what tool should I use?

None of these tools will become my go-to tool for all of my prototyping needs. I see valuable aspects of each for different circumstances.

For a fast turnaround
If I need something created in a pinch that doesn’t need to communicate much interactivity, I would use a tool like InVision (or Flinto if it is for an iOS app).

For complex interactions
If I am prototyping a complicated desktop application with a lot of dynamic content or interactivity between elements on a screen, I might try using a more robust tool like Axure, Protoshare or Justinmind, with the understanding that I will need to invest some time to learn how to use it. If I needed to prototype complex interactions for a website design I would use Easel because of how easily you can generate CSS/HTML.

For usability testing
If I need to run usability testing on a click-through prototype and collect a significant amount of feedback, I would try Solidify, which is specifically designed to support user testing.

Although some of these tools have overlapping capabilities, I was surprised to discover that they each offer distinct enough features to be useful in different scenarios. The chart below should help you pick the best tool to try for your particular needs.

(open below image in new tab for larger view)

summaryChart-prototype

source

Build a Swift App

Learn Xcode Storyboard, Auto Layout and Designable Views

Swift made code simpler and it quickly became one of the top languages used. Xcode 6 introduced a number of new features such as Playground, Vector Assets and Designable Views. Ultimately, it made Adaptive Layouts an essential skill because of the iPhone 6 and 6 Plus.

Mobile continues to grow exponentially, raking the majority of the profits for its developers. Apple paid $10 Billion in 2014. Prototyping became one of the most sought-after skills for designers.

swift design

source