How I work: Wireframes.
A little text about my tools and a few resources to get you started.
WTF – Wireframe that First
When it comes to my workflow, I am mostly using the same tools I have been using 10 years ago, when I started out in the UX sector. I am still a vivid fighter for Wireframes and the magic of Pen and paper Layouts before anything else. As a concept designer I understand it as my primary job to think about user-centric functionalities and how a digital product still bridges the gab to the client strategy – not about whether the color scheme needs to be "poppin`". That´s the work for much more aesthetically talented interface designers.
As mentioned before, I really like to start ugly. Wireframes are not the most beautiful way to showcase a digital product, but they are certainly the most efficient.
How I use Wireframes
When I talk to other UX Designers, we usually end up talking about how we present our projects to clients. Some colleagues are somewhat taken aback, when I tell them that I present clients with Wireframes, before they get to see any design.
I like to think that one of the many benefits of wireframes are their simplicity and a really straightforward way of showcasing functionality. Yes, they are ugly and yes, they are not pretty to look at, but that´s a feature, rather than a bug: When presenting wireframes, the discussion will never be about fonts, about color-schemes, headlines or images, because it all looks dummy-like. Instead, the discussion will be about functionalities, hierarchy, modules, usability, strategy and content. In the wireframing-phase, these aspects are much more important
My Tools
Depending on the work at hand, I like to wireframe with either of two programs: Axure and Omnigraffle.
Axure
Axure is a beast of a program. Not are you able to produce grade A wireframes for different viewports, you can transform them into interactive prototypes, extract word- or html-documentation and share everything on their internal cloud AxShare. Here, you can also share projects with colleagues in order to work together on one single Axure project. The collaboration works like a repository, where individual members are able to extract certain parts, do their work and check them back into the whole project when they are done.
I usually use Axure for bigger web projects such as platforms and multi-level pages. Their detailed documentation also comes in handy whenever I work with third-party developers: When done right, the extractable documentation is so efficient, that the developer usually can gather all the needed information from one document.
In addition, Axure has added tons of new libraries to their collection which you can mostly download for free and simple enter into your projects. You can find an overview about all available library resources here: Axure Widget Libraries. In the most recent version, Axure has become much more creative as you can create your own custom shapes, though.
Omigraffle
Omnigraffle on the other hand, is the smart and flexible brother. You can draw custom shapes, they have tons of libraries and the wireframes usually look much more "designy" than the ones done with Axure.
There are less added features compare to Axure, so I usually use it for designing user journeys or sitemaps because Omnigraffle has an amazing "connector" tool that is customizable and works really efficiently. I also use it for simple web projects or smaller apps where I just need a "quick sketch" or a single landingpage and want to work in a "one page layout" with all states in an overview.
In general, Omnigraffle feels more like a design-program, than an UX tool because you can work in layers, define canvases and you are generally create elements more freely. It has had these features since the beginning and therefore years before Sketch and Photoshop adapted them..
Conclusion
In my opinion, all UX design should start with a wireframe of some form. It gives you space for messing up, re-doing and getting the basics of a project right. It is much easier to throw away an idea and starting over when you are working with pen and paper than making a frontend design work that you have spent five hours on already.
I hope this article has given you an idea of how i work with wireframes and why I really like them so much. If you have any further questions, please comment below.