Part 2: Wireframing

Abre Appathon

Wireframe Hero

Wireframing Defined

Our next step is wireframing. A wireframe is a layout of a webpage that demonstrates how various parts of the page will work. Multiple wireframes act as a storyboard for demonstrating the function of the app you are creating. It’s creating a conceptual app without needing to code. Your goal in this step is to create multiple wireframes that demonstrate how your app works.

Material Design

Abre uses Material Design in developing its user interface and user experience. Material Design is a design language developed by Google and used in their products (including many of the products used in education). Using a defined design language, especially one that’s most familiar with educators, has advantages in that it can simplify the design process. You may want to become familiar with Material Design.

Resources

You can use a variety of resources for creating wireframes. Some of the more advanced software application choices can create more detailed UI/UX wireframes (which can help with pitching your idea), but sometimes simple and low tech work just as well.

  1. Pencil and Paper (usually drawing paper). Simple and accessible. If you use this option you will want to take pictures and arrange them into a pitch deck.
  2. Google Slides (with Google Drawing). Slides allow you to create narrative structure.
  3. Mockflow (Free signups)
  4. Sketch (Mac only)
  5. Figma
  6. Adobe Illustrator

Pick what you feel comfortable learning or using.

Directions

You are designing how your app looks and functions.

  1. Create the screenshots of your app.
  2. Develop all necessary components (for example, buttons, cards, text fields, etc.).
  3. Arrange your screenshots to tell a story about the app will work.
  4. Feel free to include written narrative.
  5. Think intentionally about your app should work. The KISS principle is helpful here. Remember the problem you are solving.