Wireframing

Vocabulary for this unit:

• Wireframes are a low fidelty copy of your design. These are done before you code. This helps you think through all aspects before you spend too much time coding and then later realize there are mistakes.
• Opposite of this a mockup. This is a high fidelity version of your app or website.
• Prototype is an animated mockup.

Workflow

• Check out other people's websites to see layout and structure.
• Look at design patterns on UI Patterns. Think about the problems you are trying to solve. They list problems, possible solutions and rationales for their solutions.
• Create a simple, sketched wireframe on paper or computer.
• Optional: Create a mockup using Photoshop or Sketch.
• Optional: Create a prototype, which is an animated mockup.

If you're looking for inspiration head over to Dribbble, and check out some examples of designer's work. Once on the website you will go below the jumbotro and find Web Design and look at what has been designed and is on showcase. You can also narrow down the results by choosing a color.

Resources

• SneakPeakIt has a bunch of templates that look like computer screens, phones, ipads, etc. that you can download, print, and drawn on by hand.
• Balsamiq is a fast, approachable, collaborative wireframing website. It is free for 30 days, and then plans start at $9/mo. It's useful because you can share your design right from the site with the person that commissioned the design or just friends.
• Wireframe.cc is a simple, minimalistic wireframing tool for mobile apps and websites that's easy to learn. Basic is free; Premium: $16 per month
• Figma is a cloud-based design platform great for sharing and collaborating among team members. Starter is free (three projects); Premium $12/mo.
• Pencil project Pencil Project is an open source GUI prototyping tool that's available for all platforms.