Welcome to the world of layout and composition! Today you're becoming a puzzle master, learning how to arrange design elements like a pro! It's like learning to organize your room, but way more fun and creative!
You've been hired by StudyBuddy, a new app helping students organize study groups and share notes.
The Challenge: Design screen layouts that help students quickly find study materials, connect with classmates, and stay organized during busy school days
Your Role: Junior Layout Designer
Target Audience: High school and college students juggling multiple subjects and activities
Success Criteria: Layouts that reduce cognitive load, improve study efficiency, and work seamlessly on mobile devices
You'll discover the secret rules of how to arrange text, images, and elements so they look perfectly balanced and beautiful! You'll learn that good layout is like a magic trick that guides people's eyes exactly where you want them to look!
By completing this activity, you will:
🖱 Access the File
Design Principles Part 3 - Layout and Composition
🛠 Complete the Tasks
Follow the instructions inside the file and complete the tasks.
📤 Submit Your Work
After completing the tasks, submit the file in PDF or DOCX format in this link.
Before creating your layout, consider:
- Who is your target user? How do students scan information when they're stressed or rushed?
- What emotions should your layout evoke? Calm organization? Energizing productivity?
- How will your layout adapt from mobile to tablet to desktop?
- What accessibility considerations ensure all students can navigate efficiently?
Rate your layout design on these criteria (1-5 scale):
When reviewing a classmate's work:
- Start with 2 positive observations about their layout choices
- Suggest 1 improvement for visual hierarchy or mobile usability
- Ask 1 question about their grid system or spacing decisions
- Think of layout like organizing your desk - where should the most important things go?
- Practice the "squint test" - squint your eyes and see which parts stand out most!
- Remember that empty space (called "white space") is just as important as the stuff you put in it!
- Concept Applied: Visual hierarchy, grid systems, and balanced composition principles
- Skills Developed: Layout organization, mobile-first design, and user flow optimization
- Tools Mastered: Figma grids, auto-layout, constraints, and spacing systems
- Portfolio Piece: Layout designs that showcase systematic thinking and user-centered organization
- Design Principle: Visual hierarchy guides users through content in order of importance
- Figma Tips: Use layout grids for alignment, auto-layout for responsive design, create spacing tokens for consistency
- Common Mistakes: Cramming too much content, ignoring mobile layouts, inconsistent spacing
- Pro Tip: Follow the F-pattern or Z-pattern for content layout - users scan in predictable ways