Project 3: Designing Web App Screens
Apply your knowledge to build something amazing!
Project 3: Developing Your Web Apps
:rocket: Project Overview
Objective: Create an interactive web app prototype based on your responsive website design from Lesson 15
What You'll Learn:
- How to transform website planning into functional web prototypes
- Responsive design implementation across devices
- Figma web prototyping tools and techniques
- User flow implementation for web applications
What You'll Create: A functional, responsive web app prototype that brings your website concept to life
:hammer_and_wrench: Your Assignment: Create Your Web App Prototype
:emoji: Build Your Interactive Web Prototype
You will be creating an interactive prototype for the web app you planned in Lesson 15. This prototype should bring your app concept, sitemap, responsive layout planning, and accessibility considerations to life through functional screens and user interactions.
:emoji: Learning Resource
Follow this video example to learn how to prototype:
Important: Make sure you develop your own app prototype based on the app you created in Lesson 15.
:clipboard: Prototype Requirements
Your web app prototype should include:
One. Core Pages
- Homepage/landing page
- Main navigation structure from your sitemap
- At least 4-5 key pages based on your Lesson 15 plan
- Contact or about page
2. Responsive Design
- Desktop version (1200px+)
- Tablet version (768px-1199px)
- Mobile version (below 768px)
- Smooth transitions between breakpoints
3. Interactive Elements
- Clickable navigation and buttons
- Form inputs and interactions
- Hover effects and micro-interactions
- Touch-friendly interface for mobile
4. Accessibility Features
- Text alternatives for images
- Keyboard navigation support
- Proper color contrast ratios
- Clear visual hierarchy
5. Website Implementation
- Apply your website concept from Lesson 15
- Implement your planned sitemap structure
- Use your responsive layout plans
- Follow your accessibility considerations
:white_check_mark: Before Submission Checklist
Make sure to complete all tasks and double-check your project before submission:
- Keep building on your web app prototypes, refining interactions, and improving the overall design
- Focus on incorporating feedback, ensuring usability, and maintaining responsiveness
- Test all navigation paths and responsive breakpoints
- Verify accessibility features are working
- Review that your prototype matches your Lesson 15 planning
:emoji: Getting Started
Reference Your Previous Work:
Use your Lesson 15: Responsive Website Design Planning work as the foundation for this prototype. Your app concept, sitemap, responsive layout plans, and accessibility considerations should guide your prototype development.
Tool:
You will be using Figma to create your interactive web app prototype.
:emoji: Submission
Once you've completed your interactive web app prototype:
Submit your prototype link on the dashboard for review and feedback.
Submit Your Work Here: Submission Form