I usually just use Photoshop but it takes to long. Is there any free, online tools out there?
If you already have creative suite, then you might want to give illustrator a try. It's much faster than photoshop, and the multiple artboards, symbols palette, and precise pixel measurements make it a really great tool. Plus you can export your artboards as pngs, throw them into InVision and have a clickable prototype in less than 30 minutes.
This is helpful to get started in Ai (but there are some more changes and improvements since this article): http://www.smashingmagazine.com/2011/01/17/productive-web-design-with-adobe-illustrator/
I have been using Photoshop and Axure for years but never found them really comfortable for a variety of reasons.
I only realized recently that the answer was in front of my eyes all this time... I do all my wireframes in Illustrator now. The lightweight vectors make it so easy to duplicate items and the flexible art boards allows you to do responsive versions, longer pages or simply to export all your pages so much quicker than Photoshop.
Made the same realization & switched just months ago
+1 for illustrator
If you're working with a framework that has set breakpoints, its super nice to make three or four art boards and then just drag and resize and reorder content to progress up (or down) screen sizes.
If you're going the Adobe route, I've used InDesign in the past. Not perfect, but it has the functionality built in for master pages so it's easy to keep global elements consistent across frames.
But - PowerPoint has the same capability and is more lightweight.
I'm also a fan of just doing paper/pencil wireframes.
Paper and a Pencil
^ This. Plus a camera phone if my audience needs a digital version.
POP is fantastic for this
Sketch, too. I haven't needed to prototype a ton of interaction, so it's perfect for me.
I actually use Indesign. It's flexible and even though I'm not a print designer, I work very quickly inside it.
Same here - I love using InDesign, as I can quickly set things up, move them around, fill them with text, and even have "templates" that I use across the document.
I primarily use OmniGraffle for wireframing. While not free, the one-off cost more than justifies itself. The community surrounding it is also very active at constantly pushing out stencils. Definitely worth trialling if you haven't already!
I used to switch between Axure and OmniGraffle.
OmniGraffle for beautiful documentation, and Axure for occasions when I needed rougher prototypes.
Now, I use Sketch and Invision with a Dropbox sync. Super easy to draw, move, export, and connect.
Balsamiq is pretty good. Cuts out the clutter.
http://uxpin.com is really good. Pretty easy to start up a little trial and give it a go for a month. We really like it at our agency and its helped a lot with site mapping, interactions, user personas, and client feedback commenting.
However, it is sadly not Free :(
We use a mixture of paper, whiteboards, and Sketch at the moment. We used Omnigraffle, but it seems Sketch is the 'go-to' now, and our designers prefer it.
I used Adobe Illustrator since the beginning of time. Now I endorse Sketch app.
whatever works. At the moment:
- whiteboard sketches for product ideation and workshops
- sketch paper and pen for product idea refinement
- Sketch app for small projects
- Illustrator for big projects
- Omnigraffle for projects with diagramming or sitemaps (the autolayout for diagrams is excellent)
- Photoshop and Pagelayers for minor touchups to existing sites
I use Invision to make prototypes or collect feedback on the wires, and then we add the designs to the prototype as we progress.
Use Powerpoint, and here's a loaded gun too…
No but seriously, Powerpoint and Keynote can be used in quick wins situation.
I hate wireframing in the formal sense. I typically like to work in black/greys/whites and basic shapes in my PSD...then start filling it out as the layout gets clearer. This way I can actually use my wireframe and layers for the actual final version.
This, except I use Sketch
Mostly Omnigraffle. Currently testing the waters again with Axure (after hating it a couple years ago) to try to utilize some of the interactivity. So far still not sold. Lots of improvements and some nice features, but I've been encountering tons of bugs and things just just function oddly. Feels like beta software which is not at all what I want out of something so pricey.
For free stuff I have used lucid charts in the past, but it seems they knocked wireframing off of their free plan.
We use Axure where I work.
I've also seen UX consultancies use InDesign.
I switch between Omnigraffle, and Balsamiq.
I love the feature improvements in Omnigraffle, but the UI is a pain in the butt sometimes.
Balsamiq is quick and fast if you want to prototype and wireframe on the fly.
I always start with paper and pencil first, still the fastest way to wireframe.
Then I use Google Drawings: https://docs.google.com/drawings/
Highlights: It does just enough for me. Too many of these other tools might as well be design tools or are already design tools, so you get too easily caught up in UI details, which aren't relevant at this stage of the process.
Everyone can access it and they don't need specific installed software (paid or free) or hardware (windows vs mac) can even be viewed on mobile (either browser or with the drive app). Good for mixed international teams (designers, managers, developers, etc).
It has a lot of the collaboration features other paid services have right out the box for free. Different permissions for different people, realtime collaboration, commenting, etc. again also good for mixed international teams (designers, managers, developers, etc).
Every change is automatically saved and indexed and can be reverted at any point.
Exportable as PNG, SVG, PDF and shareable online of course.
This is all for free, I think every google account comes with like 15GB of space?
After the wireframe is approved then I jump into the design tools (sketch for me personally) for the UI.
May I ask why you say Photoshop takes too long? In my experience, wireframing in Photoshop is extremely fast, and very robust.
Based on my experience and research, here are the best wireframing tools out there today:
Balsamiq, super easy and intuitive wireframing.
I was using InDesign and was able to make wireframes really quickly with it. We dropped it because we needed something more pixel based and something that clients could easily make comments to.
We've moved onto UXPin which is okay. It's a little buggy and rough around the edges but still pretty impressive considering what it's doing. It's (obviously) better at making things interactive than InDesign too.
I'm going to look at Axure next ... and I'm looking at making something on my own :/
I use Axure to create wireframes and prototypes. It's pretty robust, and it does a good job of allowing me to create high-fidelity wires without over-designing (a symptom I've associated with Illustrator). Plus, it gives me the ability to create pretty robust prototypes, using conditional logic to show/hide/animate components, lending itself well to creating usability tests that are closer to what the finished product would be, and thus yielding better results. Also, I have a pet dinosaur named François who likes durian and lasers.
Haven't found a free tool worth using but as others have said, Illustrator works pretty well. That being said, there's other tools and it really depends on speed, quality of the deliverable and ultimately what you're familiar with.
Here's a few tools I use that you might want to look into:
Balsamiq: provides some fairly rough tools to work on quick lo-fidelity mockups. I consider it a sketching tool to get conversations going.
Indigo Studio: Great product out of the box with a library of components to drag and drop onto the story board. Also has tools for responsive and prototyping.
Illustrator and Indesign are great tools - I have a predefined set of library items in Indesign and have templates established with proper documentation. I always end up reverting to Indesign eventually in the workflow since it provides great control over multi-page documents.
I still find myself using Balsamiq, $80 for desktop version. The UI components are getting a little stale, but I haven't seen anything better.
This looks quite promising. I guess if you want decent software, it'll come at a price - Although pretty good value.
I use Balsamiq also. On the iPad I use iMockups, which I can then export to a Balsamiq format if I need to add more details on my desktop.
https://wireframe.cc/ is great
I like the UI of this but it seems to be lacking in functionality. I might give this a go though, thanks!