Personally I have found myself using Sketch more and more these days. In the past my toolbox always had OmniGraffle for wireframes and Photoshop for visual design. While I still rely on both aspects these days I find that Sketch allows me to work more seamlessly as I define the UX first and often jump straight into code within the browser, if a visual style is set, which often happens in product design. However, for a lot of work you can’t throw visual design out the window.
I find that depending on the project I design different visual assets. I often find myself doing a small bit of idea generation and visual work within Sketch, but then once I have a clear direction I move to code, polishing and iterating on that style as I build out different aspects.
By doing this I rely more on my wireframes for overall layout beyond just gray boxes showing where items might go. Things such as type hierarchy and such come into play as I want to make sure the layout is nailed down before I code. Because of this Sketch allows me to do some pretty hi-fidelity wireframes, without going overboard on the visual side. Remember, the goal of wireframes is to define your UX first, not your visual style.
I still find I can experiment with the visual style and iterate on ideas quicker within Sketch. This is where I start adding color, texture, contrast, and playing with type. Since I did the wireframe within Sketch, it’s easy to move forward based off what I already laid out.
Another great thing I love about Sketch is Artboards. Artboards allow you to have one document but with numerous areas for your work. This allows me to zoom in on one screen, but then zoom out and see the overall flow as I move from one page to the other.
Beyond Sketch If I’m demonstrating a flow to non-technical users or want them to experience it in a more realistic manner than “ok once you click this button fumbling through pages or a pdf go to page 3 of the document.” I export my wireframes as a PDF then create a clickable PDF within Adobe Acrobat. This allows users to experience the design flows without moving to code right away. A great app that takes this one step further is invisionapp.com. I’ve found inVision allows users to click through and experience the flows best, and leave comments/feedback as they go through things. While I try to move to the browser as quick as possible I find clickable PDFs and things such as inVision allow you to toss around tons of ideas before generating lots of HTML/CSS that could just get thrown away if the idea is garbage. This works really well when honing in on key features and other aspects of the project, but sometimes doesn’t scale to larger projects.
In the end the goal is always to create the best experience possible first by defining user flows and information hierarchy. Remember this is my own workflow, and I find myself tweaking it all the time. What might work for me, might not work for others. Project requirements might require a more refined prototype, in which code in the browser might be best, others might require a less refined one. Find what works for you and always be open to trying new techniques and tools.
As always, feel free to reach out with questions as I tend to get rambly and excited when talking process.