Learn UX: Wireframe and Prototype a Mobile App (2023)

Wireframes provide a low-fidelity, blueprint-like representation of a website or app to map layout, navigation, and placeholders, enabling quick iteration and stakeholder feedback to shape the design.

Learn how balsamiq enables rapid low-fidelity wireframes and prototyping with drag-and-drop components, letting you test ideas fast and avoid bad ones.

Explore the navigator panel and canvas to manage wireframes, mockups, and symbols, using the ui library and properties panel to organize, rename, duplicate, and create alternate versions.

Learn to navigate the UI library and properties panel to add, drag and drop controls, customize icons and symbols, and adjust position, size, color, and states for wireframe and prototype.

Master the Balsamiq toolbar on the dashboard, including navigator toggle, thumbnail grid, add wireframe, undo/redo, zoom, item selection and lock, search, comments, inspector, and prototype preview.

Start wireframing a workout app by using templates, crafting personas like Jennifer and David, and outlining a five-screen flow: account creation, profile setup, selecting workouts, workout detail, and video-driven workout.

Create a mobile wireframe for the iPhone eight (375 by 667) with a logo, title, first name, email, password inputs, terms checkbox, and create account button.

Create a profile setup wireframe by using the first name from the create account screen and collecting gender, height, fitness level, and preferred workouts to tailor the workouts list.

Design and prototype a workouts list screen with category filters, a top search bar, tab navigation, and image-text workout items that populate per category.

Master wireframing the workout details screen by designing back navigation, a clear title, workout title, image, and a descriptive block with a start button that launches the workout video.

Designs a workout video screen wireframe that shows duration and an end workout button. Creates a low-fidelity prototype with video controls and a flow from the workout detail screen.

Learn how to link wireframes into a low fidelity prototype and present it to design teams, users, or stakeholders, including exporting to PDF and full screen demos.

Review the low fidelity PDF prototype from the lesson, featuring account creation, profile setup, category-based workouts, and a workout video with a start button.

wireframe five screens and build a low fidelity prototype for a mobile app using Adobe XD, with an example project serving as a template to boost portfolios and job prospects.

Develop user personas and a user flow to guide wireframing a mobile app, using Jennifer and Chris as templates. Build five screens into a low-fidelity prototype for user testing.

Explore Adobe XD's design and prototype workflow, from drawing shapes and text to creating artboards, linking screens, and setting transitions for mobile, tablet, web, social media, and Apple Watch.

Design a create account screen using a premade wireframe ui kit, switch to greyscale, and place sign-up fields (full name, email, password, confirm password), terms, and a create account button.

Wireframe the profile setup screen by outlining the create account flow with name, email, password, and a profile summary, then capture gender, height, fitness level, and workout preferences.

Wireframe the list of workouts screen with a top search field, category buttons for hit, weights, and cardio, a workouts list, and a bottom tab bar.

Wireframe the workout details screen with a back button, a title, a placeholder video image, a description, and a start button. Navigate from a category to the detail and video.

Design and wireframe the workout video screen, including a play button, end workout control, and duration indicators, and set up a low-fidelity prototype linking all screens to test user flow.

Link wireframe screens to create an interactive prototype in Adobe XD. Preview and share a design review prototype link for user testing and stakeholder feedback.

Learn the importance of low-fidelity wireframes and prototypes using Balsamiq and Adobe, demonstrated through an example mobile app to show my process for the class project.