5 ms·

Recommend any tool for wireframing? (for beginners)

redorb 10y ago
I have found https://balsamiq.com/ 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.
darushimo 10y ago
check out balsamiq. and perhaps go through their tutorial: http://www.uxapprentice.com 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.
6DM 10y ago
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/ https://precursorapp.com/
diggan 10y ago
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.
- pault 10y ago
  There's also this: http://www.uistencils.com/ http://www.uistencils.com/ Full disclosure: founded by an ex-coworker.
harkmylord 10y ago
Sketch / Omnigraffle.
RickS 10y ago
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.
- bigtunacan 10y ago
  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?
  - RickS 10y ago
    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.
    - bigtunacan 10y ago
      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.
macandcheese 10y ago
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.
kylejlarson 10y ago
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.
TACIXAT 10y ago
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/ https://webflow.com/ Pop - iOS app. Draw on paper, take photos, mock up the page interaction. Nice for early demos. https://popapp.in/ https://popapp.in/
arstin 10y ago
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.
cobalt 10y ago
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.
goertzen 10y ago
https://quant-ux.com/ 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)

I have found https://balsamiq.com/ 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.

darushimo 10y ago

check out balsamiq. and perhaps go through their tutorial: http://www.uxapprentice.com 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.

6DM 10y ago

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/ https://precursorapp.com/

diggan 10y ago

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.

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

harkmylord 10y ago

Sketch / Omnigraffle.

RickS 10y ago

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.

bigtunacan 10y ago
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?
- RickS 10y ago
  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.
  - bigtunacan 10y ago
    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.

macandcheese 10y ago

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.

kylejlarson 10y ago

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.

TACIXAT 10y ago

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/ https://webflow.com/ Pop - iOS app. Draw on paper, take photos, mock up the page interaction. Nice for early demos. https://popapp.in/ https://popapp.in/

arstin 10y ago

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.

cobalt 10y ago

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.

goertzen 10y ago

https://quant-ux.com/ 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)