I have been learning to create low and high fidelity wireframes for both mobile and web devices. There are a variety of different tools you can use to create these wireframes like Illustrator, Photoshop and Sketch ( only available on Mac ). I have been using Sketch 3 to wireframe as its a simple combination of both illustrator and photoshop.
More and more designers are using vectors for wire framing. The following tips will help you make the most of your wire framing experience.
Wire framing is about working rapidly and iterating quickly. The aim is not to create attractive interfaces; your number one priority is to design information and experience.
Below are 10 tips that i believe to be important when designing wire frames.
1. Start Sketching
Sketch them first with pencil and paper for a quick sanity check. This should take about 30 seconds and opens up the possibility of getting early feedback. This can save a lot of time and money. The feedback gained through peer review or, best of all, from some early and informal user testing (you may need to spend a little more than 30 seconds on sketches if they're for user tests).
2. Go Monochrome
Wireframes make clear the hierarchy on a web page; they visually demonstrate the order in which users should process the available information. If you want users to process the headline before hitting the "buy now" button, the headline needs to "trump" the button by demanding more attention.
This visual hierarchy can be defined in a number of ways. We could use size to make the headline more impactful, we could use positioning (by placing it before the button). We could use colour, contrast and a range of other things, but doing so in a wireframe only makes things more confusing.
By removing colour from the equation, the visual relationship defined by position, size and (if you want to go the extra step) contrast, is much cleaner.
We're not building pretty, pixel perfect UI kits here. Stick to a limited range of greys, then use color just for labels and notes.
3. Don't forget the goals of the page
Keep the goals of the page in mind when designing a wireframe. Focus on driving action. Organise the information into hierarchy that serves the goal of the page.
4. Pick Your End Point
Prior to commencement, work out who will be consuming the wireframes, how they'll consume and what what level of fidelity is required. Remember that theres a relationship between the level of fidelity and type of feedback. Will quick paper sketches suffice or will they need to be fully interactive with accurate dimensions? Keep in mind: the less precise the wireframes are, the more liberty and creativity a designer is going to take with them. On the other hand, if you think they look perfect designers may feel inhibited and merely "colour in" the wireframes, preventing the design process from really getting going.
5. Keep the rest of the team informed
Wire frames are not just for the client. All members of the web team should provide feedback on them, buying into the process at an early stage.
6. Use common elements
When designing a set of pages, use tools that allow you to make multiple changes to all common page elements at once. Moreover, as you're creating the wireframes, look out for design patterns that repeat. Leveraging these is key to gaining efficiency and consistency.
7. Consider the content
If your wireframe aren't sketches then be realistic about the amount of content that will be added to the page. This holds true also for number (and length) of links and navigation. If practical use accurate sized fonts, images and consider what will happen when more text then ideal is added. Nothing on the web should be etched in stone, so ask if the design will flow as required.
8. Draw on your experience
You do not need skills in design or development. All anyone needs is experience in using web apps or websites. Of course the more experience the better but you don’t need to understand relational databases to wireframe.
9. Keep it clean
If a particular page requires two text boxes and a button then it should have just that, no more, no less.
10. Get feedback
I have learnt not to be afraid to test your wireframes with a couple of informal user tests. Grab people from around the office and ask them to find various bits of information or explain what they think the function of the certain elements is.