Group Activity - Wireframes

# Group Activity - Wireframes Today's activity is centered around visualizing your app's flows and screens though the creation of a wireframes. You'll start by sketching wireframes by hand, using your app spec as a guide. For a bonus challenge, try creating digital wireframes using a web based prototyping tool and creating an interactive prototype. When finished, you'll send your wireframes to submissions@ontraq.org. ## Activity Agenda (60 min) 1. Review your product spec for your app: 1. User stories 1. Screens in your app 1. Navigation flows 1. Hand sketch wireframes 1. [Bonus] Create digital wireframes 1. [Bonus] Create an Interactive Prototype that allows you to click through various screens using a tab bar. ## 1. Review your product spec for your app Review your User Stories, [Screens](https://guides.codepath.org/android/Mobile-Screen-Archetypes) and Navigation Flows. When creating wireframes, you'll translate your app's spec into a visual format that depicts how all your screens are connected and flow together. You may want to also review the [the product spec guide](https://hackmd.io/s/H1wGpVUh7) for reference. ## 2. Hand sketch low fidelity wireframes Starting off with pen and paper wireframes is the fastest and most intuitive way to get your thoughts down. There are 2 main goals for this activity. The goal of this activity is *NOT* to create high fidelity mockups, it's simply to outline the various screens, how they flow together, what information will be displayed and how a user will interact. <img src="https://i.imgur.com/ee7uHxx.gif" width=600> ### i. Sketch the basic screens and navigation flow Focus on the basic screens you identified for your app in your [product spec](https://hackmd.io/s/H1wGpVUh7), ignoring elements like input fields, buttons and data for this step. 1. Sketch out and label the core screens of your app. 1. Identify the core flow between screens and indicate the relationships using arrows. - For **Tab Navigation**, sketch a screen with a tab bar and draw arrows from each tab bar button to the screen it's associated with. - For **Flow Navigation**, draw lines between screens with arrows that represent the direction of the flow. For screens that allow the user to navigate back and fourth. ### ii. Add view elements and controls Map out the basic layout for each screen by adding view elements like labels, input fields, images, buttons, etc.. This will help you get an idea about how you'll present certain information to the user and how the user will interact with each screen. Identifying all the *things* (i.e. profile image, post comments, etc.) will help inform your schema design in the following unit. 1. Sketch in the key elements of each screen (i.e. input fields, list item display, data shown) 1. Take a picture of your wireframes and add the image file to your project repo on Github. 1. Show the image in your README or provide a link to the file in your repo ^^^ How do I show an image in my README? ^^^ There are a few ways to show images in MarkDown. The 2nd option uses standard HTML image tags and, among other things, allows you to specify image size. - **Option 1:** `![](YOUR_IMAGE_URL_HERE)` - **Option 2:** `<img src="YOUR_IMAGE_URL_HERE" width=600>` ^^^ ## 3. [Bonus] Create digital wireframes There are lots of digital tools that combine wireframing, high fidelity mockup design and interactive prototyping. Figma is a good place to get started as it has a free tier and allows online collaboration between team members. ^^^ Links to Figma resources ^^^ - [Figma Resources](https://www.figma.com/resources/) - [Free Figma Resources](https://www.figmaresources.com/) - [Export Options Guide](https://help.figma.com/importing-and-exporting/exporting-from-figma/export-options) - [Importing and Exporting video](https://www.youtube.com/watch?v=cpG3foCWX-E) ^^^ 1. [Sign up for a FREE Figma Account](https://www.figma.com/) 1. Check out this **[Basic Figma Wireframe Video](https://www.youtube.com/watch?v=pgYR9zTaiWI&list=PLrT2tZ9JRrf47FItHCM8iV16PsK592vrv&index=3)** to get started. 1. Create a new Figma document. 1. Add a *Frame* to represent each of your screens in the Figma canvas. 1. Create tab and navigation bars using rectangle shapes. 1. Add text for buttons an other view elements using the text tool. 1. Want to create high fidelity mockups and flex your design skills? There are tons of free image assets online for use in Figma. Try going to [figmaresources.com](https://www.figmaresources.com/) and searching **iOS** or **Material Design** for **Android**. <img src="https://i.imgur.com/lYHn37F.jpg" height=250> ## 4. [Bonus] Create an interactive prototype Use your Figma wireframes as a basis to create an Interactive Prototype. This will allow you to click through various screens of your app using a tab bar. - Check out this **[🎞 Creating an Interactive Prototype Video](https://youtu.be/pgYR9zTaiWI?t=200)** to get started. ^^^ More Figma interactive prototyping resources here ^^^ - [Figma Prototyping Tool intro](https://www.figma.com/prototyping-tool/) - [Prototyping Written Guide](https://help.figma.com/prototyping/prototyping) - [Prototyping Video Tutorial](https://www.youtube.com/watch?v=-sAAa-CCOcg) ^^^ <img src="https://i.imgur.com/AiKfE5g.gif" width=150>