Hacker News Reader

Comment by alexgotoi | Hacker News Reader

Recommend any tool for wireframing? (for beginners)

Nothing beats pen and paper. Probably you already have it available, it lends itself to be low-fidelity (and high-fidelity if you have an artistic side) and very easy and fast to use.

There's also this: http://www.uistencils.com/ Full disclosure: founded by an ex-coworker.

Sketch is my personal favorite. Balsamiq can work and is commonly recommended, but IMO turn off the "hand drawn" effects. They're great for demoing rough things to clients in a way that says "this isn't final", but if you're actually trying to lay out a page at 100% resolution they're going to give you a wildly wrong sense of what things are what size.

I see Sketch put out there a lot for this and this is probably just my lack of knowledge (full disclaimer - not a UX designer), but I just have never understood how people are using Sketch for this?

My understanding of Sketch is that it is an alternative to Photoshop for hi-fidelity designs.

I don't understand is how are people using Sketch as an efficient wireframing tool in the early prototype phase as an alternative to something like Axure or Balsamiq?

Sketch is less like photoshop and more like illustrator, with all the non-UI stuff shaved off.

Sketch doesn't do nearly any of the advanced photo retouching stuff. It's mostly vector, mostly shapes. As flat UI gets more popular, sketch can increasingly do all the lifting on a hi-fi design, but depending on how crazy you get, photoshop is still king for that (anything involving texture, noise, pattern fills, etc has to be photoshop)

If you don't feel like learning a "real" workflow, balsamiq is quick because it comes with things like libraries of premade UI elements that you can just drop in without much of a learning curve.

If you're willing to learn sketch as a serious piece of software, it's very fast. Every design project I've worked on in the last 3 years or so has been 90% sketch. I drop back into photoshop for photo editing, or illustrator for advanced illustration (things with really complex paths or layer orders).

If you've got the interest, revisit sketch and try to put comparisons to photoshop out of your mind - sketch is UI first like photoshop is photo first, and it makes a big difference.

Thanks for the feedback. I'll have to give the trial version a spin and give it more of a chance. I mostly use Balsamiq for mocking things up since it's fast, but often I would like something that doesn't look so rough.

I have found https://balsamiq.com/ to be a great way to move fast; I prefer to work at first in the 'cartoony' mode of crooked lines etc.. then present straight edged wire frames to the stake holders.

You should ideally be able to skip using these tools if you are proficient enough in basic html/css. It's easier to share a deployed static website with stakeholders, easier to immediately see media queries in action, you can use partials, etc. I personally use Middleman as it's dead quick to get up and running. Once you establish a library of components you can plug and play in real code just like you could with these tools - with a little head start on building it out.

Once you get in the habit of building static sites as wireframe prototypes it's hard to go back to "wireframe only" tool.

Webflow - Really easy for mocking a site up, as well as more advanced design. Outputs the best code I've seen, so it could be used in production. https://webflow.com/

Pop - iOS app. Draw on paper, take photos, mock up the page interaction. Nice for early demos. https://popapp.in/

I usually start with pen/paper because I find it the fastest to get a bunch of ideas out. Then from there I'd go with whatever tool you think will be most efficient. I personally use Balsamiq because it's really quick & easy (drag/drop) and then if my first wireframes need drastic changes it's still quick to change. I'm then taking these wireframes to clients or teammates to review and improve before focusing on design. If you're going to end up using a design tool for a high-fidelity version you can use Sketch or Illustrator for wireframes, the only downside is getting too focused on pixel perfection at an early stage. I like keeping the process pretty flexible, sometimes you can pass a wireframe to a front-end dev if you've got a solid style guide, other times you want a high-fidelity design or a prototype.

Atomic is has been my choice for a long time now and they keep making it better. It's best used as the UI flow tool, complemented with something like Pixelmator and Sketch for asset creation and visual detail work.

If I have to show other people very early stage ideas I still use Balsamiq for the artificial lo-fi effect, but with other designers who have more control over their imaginations I'll just throw something together in Atomic.

Not sure if i'd call it a beginners tool but I much prefer just building things out in HTML. I prefer to have exacting measurements (something is 50% wid or whatever) and it's very easy to update man items from say a list after first iteration. A front end templating system helps a lot w/ this.

https://quant-ux.com/ is very promising . It allows for input fields and some basic logic, which can be pretty painful/impossible in other tools (e.g. invision, marvel,etc)

check out balsamiq. and perhaps go through their tutorial: http://www.uxapprentice.com.

Sketch is a more powerful tool (i use it most of the time now), but balsamiq is a great place to start.

I really love Precursor, you don't need an account to get started and it's simplicity makes it really quick to throw something together.

https://precursorapp.com/

Sketch / Omnigraffle.

Reply on news.ycombinator.com