l
Gentle reader, I missed two days in my 30 day blogging challenge! Client work takes precedence, then sleep and health. I am back today with a design-focused post. Be back tomorrow!

I recently wrote a post about Shiny Object Syndrome. I am very tempted by the latest and greatest .. technology, app, device, tool. I like to be close to the cutting edge. This has led me to try a few different strategies for creating a website prototype designs both for my own design process, as well as for presenting to clients.

The most traditional way to design and then develop a WordPress website is to create a Photoshop file, with many layers and styles, which can then be used to present a PDF or jpg to show a client, and then given to a developer as a PSD file. The developer then takes the layers, styles and assets to guide them in recreating the design in css, html, php and javascript … in a custom theme for WordPress.

Design Software

I do not love Photoshop as a program, but it has its place in the design process and is the standard for many web designers. Other programs, like Adobe Illustrator and InDesign are a bit more user friendly when it comes to layout and working with vector images, in my experience. (I have also heard Sketch is a better option that Photoshop – but that is not a Shiny Object I have approached yet.)

Beyond Photoshop, prototyping options which are popular  include:

• Invision
• Webflow
• Page Builders, such as Beaver Builder

Coming from a print design background. I am very familiar with InDesign, as is my design partner. We have looked into a myriad of web design/prototyping options, but keep coming back to “what we know” which allows us to create great looking designs without the distraction of new things to learn. While we will probably adopt new techniques in the future and are always paying attention to new tools, we have discovered that our best work comes from what we are most comfortable working with.

Our favorite: Invision

To turn our designs into a working “prototype” for clients, we love Invision. Many major tech companies, including Twitter, Hubspot, Uber, Xero and many others use Invision – good testimonials underscore the many reasons it is a fantastic tool. Jeremy Wells wrote about 7 Reasons he loves Invision last year – and since then even more cool features have been added.

This tool allows us to upload jpg or pdf pages and quickly and easily create hyperlinks which show a client hover states and some sample linked pages. I tried some prototypes in Webflow, but the amount of time to build a prototype in webflow was almost the same as what it would take to build a prototype in a browser on a real WordPress install. InVision supports all major mobile, desktop, and wearable screen sizes.

On top of that, you can:

• Create custom moodboards, brand boards and style guides.
• Store, share, and easily access all your project assets.
• Collect comments and feedback within the app
• Live capture screens from live websites to add to your project for feedback, comments and ideas
• Create hotspot gestures for mobile prototypes (how cool is that!)
• Easily switch between previous versions of design to compare and contrast changes.
• Free, unlimited user testing, directly from an iPhone. Capture recordings of interactions with your prototypes while seeing users’ faces and hearing their voices.

And, because I am susceptible to shiny objects, Invision just launched a new tool that looks like it is worth checking out: Craft. Have you tried it yet? What are your favorite prototyping tools?

Craft Official from InVision on Vimeo.