際際滷

際際滷Share a Scribd company logo

Wireframing

jamiecavanaugh
jamiecavanaugh

Wireframing is an important step in the design process that allows designers to plan the information hierarchy and layout of a screen before building visual or code elements. It acts as a blueprint by defining how users will interact with and process information on an interface. Effective wireframing involves observing other designs for inspiration, using tools to rapidly iterate designs, and starting simply by laying out boxes before adding typography and other details to refine the design. The wireframe provides the foundation for further visual design and app development.

Convert to study guideBETA

Transform any presentation into a summarized study guide, highlighting the most important points and key insights.

1 of 14
Downloaded 15 times
What is Wireframing?
What is it? What is wireframing? Wireframing is an important step in any screen design process. It allows you to define the information hierarchy of your design, making it easier for you to plan the layout according to how you want your user to process the information
Importance Why its important? It's like an architectural blueprint; you need to see it in two- dimensional black and white diagrams before understanding how to build your app. Know where information is going to go before building pixel layers in photoshop, or writing code. Wireframes are useful in determining how the user interacts with the interface. Wireframes can contain various states of button or menu behaviors.
Research Getting Inspired Observe what other designers or apps are doing for their wireframes, you will slowly get a picture in your mind of how a wireframe helps to organize information for the screen.
Process Designing Process Design is an organic process and thus different designers approach wireframing and its translation to visuals or code in different ways. Find the process that brings out your own strengths and you are most comfortable with.
Example Processes
Mobile Tools Balsamiq Balsamiq (http://balsamiq.com) is a paid product that allows you to rapidly make wireframes that look like sketches. Its obvious that the wireframe is not a finished product but a work in progress. There is a huge library of reusable components which you can drag and drop very easily to design your wireframes.
Mobile Tools JustinMind JustinMind (http://justinmind.com) enables you to create wireframes and interactive prototypes with rich interactions. FluidUI FluidUI (http://fluidui.com) for rapid prototyping and team collaboration on large projects.
Layout Layout Elements Start by drawing boxes on the grid. Think about the order of information you would like to present to your visitors, top to bottom is the easiest, followed by left to right.
Typography Typography integration After you are satisfied with how the boxes are laid out, start dropping in bits and pieces of your content to get a feel of whether the information is being well-structured. The rule of thumb is the same: the information you want to deliver to your audience has to be clear, even in a black and white wireframe.
by: Typography
by: High-def High-definition wireframes Making a wireframe high definition means simply adding more details, as much as possible, without going too granular into the visual details. It may mean filling in the actual copy into the wireframe and trying to determine the ideal font-sizes:
Visual Visual Translation As wireframe design concludes you will move towards designing the graphical user interface (GUI). Using Illustrator or Photoshop youll create the graphical elements that will be placed on top of the wireframe screens and eventually laid into the app development environment.
Recap Wireframes should be done prior to coding or UIdesign Wireframes are your apps architectural blueprint Research other apps and findinspiration Mobile wireframe tools enable rapid iterations Layout elements on screen and tie the app screens together Start simple before goinghigh-def

More Related Content

Wireframing

  • 2. What is it? What is wireframing? Wireframing is an important step in any screen design process. It allows you to define the information hierarchy of your design, making it easier for you to plan the layout according to how you want your user to process the information
  • 3. Importance Why its important? It's like an architectural blueprint; you need to see it in two- dimensional black and white diagrams before understanding how to build your app. Know where information is going to go before building pixel layers in photoshop, or writing code. Wireframes are useful in determining how the user interacts with the interface. Wireframes can contain various states of button or menu behaviors.
  • 4. Research Getting Inspired Observe what other designers or apps are doing for their wireframes, you will slowly get a picture in your mind of how a wireframe helps to organize information for the screen.
  • 5. Process Designing Process Design is an organic process and thus different designers approach wireframing and its translation to visuals or code in different ways. Find the process that brings out your own strengths and you are most comfortable with.
  • 7. Mobile Tools Balsamiq Balsamiq (http://balsamiq.com) is a paid product that allows you to rapidly make wireframes that look like sketches. Its obvious that the wireframe is not a finished product but a work in progress. There is a huge library of reusable components which you can drag and drop very easily to design your wireframes.
  • 8. Mobile Tools JustinMind JustinMind (http://justinmind.com) enables you to create wireframes and interactive prototypes with rich interactions. FluidUI FluidUI (http://fluidui.com) for rapid prototyping and team collaboration on large projects.
  • 9. Layout Layout Elements Start by drawing boxes on the grid. Think about the order of information you would like to present to your visitors, top to bottom is the easiest, followed by left to right.
  • 10. Typography Typography integration After you are satisfied with how the boxes are laid out, start dropping in bits and pieces of your content to get a feel of whether the information is being well-structured. The rule of thumb is the same: the information you want to deliver to your audience has to be clear, even in a black and white wireframe.
  • 12. by: High-def High-definition wireframes Making a wireframe high definition means simply adding more details, as much as possible, without going too granular into the visual details. It may mean filling in the actual copy into the wireframe and trying to determine the ideal font-sizes:
  • 13. Visual Visual Translation As wireframe design concludes you will move towards designing the graphical user interface (GUI). Using Illustrator or Photoshop youll create the graphical elements that will be placed on top of the wireframe screens and eventually laid into the app development environment.
  • 14. Recap Wireframes should be done prior to coding or UIdesign Wireframes are your apps architectural blueprint Research other apps and findinspiration Mobile wireframe tools enable rapid iterations Layout elements on screen and tie the app screens together Start simple before goinghigh-def