-
Notifications
You must be signed in to change notification settings - Fork 19
Getting Started Design
Mathew Storm edited this page Jul 29, 2025
·
1 revision
Welcome designers! Let's create interfaces that work for students everywhere - from bustling cities to remote villages.
As a designer for EduLite, you'll create:
- 🌍 Global-first interfaces that work across cultures
- 📱 Responsive designs from feature phones to desktops
- ♾️ Lightweight UX for unreliable connections
- 🌙 Accessible experiences for all abilities
- 💡 Simple, clear interfaces usable by even small children
- Design fundamentals (layout, typography, color)
- User empathy (understanding diverse users)
- Problem-solving mindset
- Collaboration skills
- Figma/design tool experience
- Accessibility knowledge
- Mobile-first design experience
- Cross-cultural design awareness
- Location: Gaza, Sudan, rural areas globally
-
Challenges:
- Intermittent internet (2G/3G)
- Power outages
- Old devices (5+ years)
- Shared devices
- Limited data plans
-
Needs:
- Fast loading
- Lightweight functionality
- Clear, simple navigation
- Low data usage
- Location: Urban areas, developed regions
- Advantages: Good internet, modern devices
-
Still need:
- Distraction-free learning
- Efficient workflows
- Beautiful, engaging UI
- Tech skills: Vary widely
- Time: Always limited
- Need: Simple tools that just work
Our constraints:
- Must work on 2G (50kb/s)
- Must load in <3 seconds
- Must be lightweight
- Must be accessible
- Must support RTL languages
- Must work on small screens
Turn these into strengths!
This is not a real feature or task within EduLite at the moment, but this section introduces a hypothetical issue, just to show you the usual workflow of a Designer within the EduLite Community.
Let's design a simple way for students to show their current status!
User Story: "As a student, I want to show my study buddies when I'm available to chat or study together, so we can coordinate better."
Statuses needed:
- 📚 Studying (Do not disturb)
- ☕ On Break (Available to chat)
- 💤 Offline (Not available)
- 🎓 In Class (Busy but may check messages)
Consider:
- Visibility: Where does status appear?
- Clarity: Icons + text or just icons?
- Accessibility: Color-blind friendly?
- Cultural: Do icons translate globally?
- Space: Mobile-first design
Mobile Version (320px wide):
┌─────────────────────────────────────────────┐
│ [👤] Ahmad K. [📚 Studying] │
│ "Working on math homework" │
└─────────────────────────────────────────────┘
Status Selector:
┌─────────────────────────────────────────────┐
│ Set Your Status │
├─────────────────────────────────────────────┤
│ ( ) 📚 Studying - Focus mode │
│ (•) ☕ On Break - Available to chat │
│ ( ) 🎓 In Class - May respond later │
│ ( ) 💤 Offline - Not available │
└─────────────────────────────────────────────┘
Colors (with accessibility):
- Studying: Blue (#2563EB) - Focus
- On Break: Green (#10B981) - Available
- In Class: Orange (#F59E0B) - Busy
- Offline: Gray (#6B7280) - Unavailable
Typography:
- Status text: 14px/20px
- Mobile: System fonts for performance
- Support Arabic/RTL rendering
Interactions:
- Tap to open selector
- Auto-save on selection
- Smooth transitions (if device supports)
- Works with keyboard navigation
Create a simple design doc:
## Study Status Feature
### Problem
Students can't see when friends are available to study together.
### Solution
Simple status indicator with 4 clear states.
### Design Decisions
- **Icons + Text**: Clear for all users, no ambiguity
- **Color + Shape**: Accessible for color-blind users
- **Persistent**: Shows in navbar for constant visibility
- **Quick Toggle**: One tap to change status
### Responsive Behavior
- Mobile: Icon + abbreviated text
- Tablet: Icon + full text
- Desktop: Icon + full text + custom message
### Accessibility
- ARIA labels for screen readers
- Keyboard navigable
- Color-blind safe palette
- Min touch target: 44x44px🎉 Congratulations! You've designed your first EduLite feature!
Every element must earn its place:
❌ TOO COMPLEX:
┌─────────────────────────────────────────────┐
│ 🏛️ EduLite Learning Hub 🎓 │
│ ┌─────────────────────────────────────────┐ │
│ │ Welcome back, Student! Today is a │ │
│ │ great day to learn something new! │ │
│ │ You have 3 assignments pending... │ │
│ └─────────────────────────────────────────┘ │
│ [Dashboard][Courses][Messages][More] │
└─────────────────────────────────────────────┘
✅ SIMPLE & CLEAR:
┌─────────────────────────────────────────────┐
│ EduLite [Ahmad 👤] │
├─────────────────────────────────────────────┤
│ │
│ 3 assignments due this week │
│ │
│ [Continue Learning →] │
│ │
└─────────────────────────────────────────────┘
Data Budget per Page:
- HTML: <30KB
- CSS: <50KB
- Images: <100KB total
- JavaScript: <100KB
Techniques:
- Use system fonts
- SVG icons (not icon fonts)
- CSS animations (not JS)
- Lazy load images
- Progressive enhancement
<!-- Responsive images -->
<picture>
<source
media="(max-width: 640px)"
srcset="hero-mobile.webp"
>
<source
media="(min-width: 641px)"
srcset="hero-desktop.webp"
>
<img
src="hero-fallback.jpg"
alt="Students learning together"
loading="lazy"
>
</picture>/* Mobile First */
320px - Minimum (old phones)
375px - Modern phones
768px - Tablets
1024px - Small laptops
1280px - Desktops❌ TOO SMALL:
[Edit] [Delete] [Share]
✅ PROPER SPACING:
[ Edit ] [ Delete ] [ Share ]
Minimum: 44x44px with 8px spacing
Text on Background:
- Normal text: 4.5:1 minimum
- Large text: 3:1 minimum
- Interactive: 3:1 minimum
EduLite Palette:
- Black on white: 21:1 ✅
- Blue on white: 4.5:1 ✅
- Gray on white: 4.0:1 ❌ (use darker)
/* Clear focus states */
:focus {
outline: 2px solid #2563EB;
outline-offset: 2px;
}
/* Skip to content link */
.skip-link {
position: absolute;
top: -40px;
left: 0;
}
.skip-link:focus {
top: 0;
}❌ English-centric:
"John Doe" placeholder
"First Name / Last Name" fields
MM/DD/YYYY date format
✅ Global-friendly:
"Example Name" placeholder
"Full Name" single field
ISO date format (2024-03-15)
-
Figma (Free)
- Collaborative design
- Component libraries
- Prototyping
- Developer handoff
-
Penpot (Open Source)
- Self-hosted option
- Privacy-focused
- SVG-based
-
Excalidraw (Sketching)
- Quick wireframes
- Collaborative sketching
- No account needed
coming-soon/
├── Colors/
│ ├── Primary (Blues)
│ ├── Semantic (Success, Warning, Error)
│ └── Neutrals (Grays)
├── Typography/
│ ├── Scale (12px to 48px)
│ ├── Weights (400, 600, 700)
│ └── Line heights
├── Components/
│ ├── Buttons
│ ├── Forms
│ ├── Cards
│ └── Navigation
└── Patterns/
├── Loading states
├── Empty states
└── Error handling
- Understand user needs
- Check technical constraints
- Review existing patterns
- Consider offline scenarios
- Mobile-first approach
- Test with real content
- Check accessibility
- Verify RTL layout
- Minimize cognitive load
- Loading states designed
- Error states designed
- Empty states designed
- Responsive behavior documented
- Interactions specified
## Feature: Study Groups
### User Research
- Interviewed 5 students
- Key finding: Need to see who's online
- Pain point: Coordinating across timezones
### User Flow
1. Student opens study groups
2. Sees list of their groups
3. Sees online members
4. Can start video/text chat
5. Can share resources
### Wireframes
[Mobile] → [Tablet] → [Desktop]
### Prototype
[Link to Figma prototype]Variants:
┌─────────────────────────────────────────────┐
│ Primary: [ Continue Learning ] │
│ Secondary: [ Save Draft ] │
│ Danger: [ Delete ] │
│ Ghost: [ Cancel ] │
└─────────────────────────────────────────────┘
States:
┌─────────────────────────────────────────────┐
│ Default: [ Click Me ] │
│ Hover: [ Click Me ] (elevated) │
│ Active: [ Click Me ] (pressed) │
│ Disabled: [ Click Me ] (grayed) │
│ Loading: [ ⏳ Loading... ] │
└─────────────────────────────────────────────┘
❌ BEFORE (Cluttered):
┌─────────────────────────────────────────────┐
│ ASSIGNMENT DETAILS - MATH HOMEWORK #3 │
│ Due: Tomorrow at 11:59 PM!!! │
│ Points: 100 | Category: Homework │
│ Submitted: No | Late: No | Grade: -- │
│ [View] [Download] [Submit] [Share] │
└─────────────────────────────────────────────┘
✅ AFTER (Clear hierarchy):
┌─────────────────────────────────────────────┐
│ Math Homework #3 │
│ │
│ 📅 Due tomorrow • 100 points │
│ │
│ [ Submit Assignment ] │
│ │
│ View details → │
└─────────────────────────────────────────────┘
❌ Don't use Lorem Ipsum!
✅ Use real content:
- Real student names (diverse)
- Real course titles
- Real error messages
- Real data examples
Simple → Detailed → Advanced
Example: Settings
1. Show common settings
2. "Advanced" expands more
3. Developer options hidden
Navigation:
- Always in same place
- Same icons throughout
- Predictable behavior
Forms:
- Error below field
- Required marked with *
- Success = green check
Empty States:
❌ "No data"
✅ "Start your learning journey! 🌱"
Error Messages:
❌ "Error 404"
✅ "Oops! We can't find that page. Let's get you back on track."
Success States:
❌ "Submitted"
✅ "Great job! Your assignment is submitted. 🎉"
- Design feedback: Discord #design channel
- Technical questions: GitHub discussions
- User research: Discord #research
- Quick questions: Twitter @edulite
## Feature: [Name]
### Problem
[What user problem does this solve?]
### Solution
[Your design approach]
### Designs
- [Figma link]
- [Screenshots for quick view]
### Questions
1. [Specific feedback needed]
2. [Technical constraints?]As a designer for EduLite, you're not just creating interfaces - you're:
- 🌍 Bridging digital divides
- 💡 Making education accessible
- ❤️ Empowering students globally
- 🌱 Growing the future
- 1 good design = Thousands of students helped
- 1 accessibility fix = No student left behind
- 1 performance optimization = Works in more places
- 1 clear icon = Less confusion, more learning
Design with empathy. Build with purpose. Create for everyone. 🎨
💚 Great design is invisible when it works, but life-changing when it helps a student in Gaza submit their assignment during a power cut, or a teacher in Sudan create lessons offline. That's the design that matters.