← ALL WORKSHOPS
DAY_01 // 11 OCTOBER 2026
INSTRUCTOR // SHOUG ALOMRAN
LOCATION // E231
FORMAT // HYBRID (IN PERSON OR ONLINE)
TIME // 4:00 PM - 6:00 PM

Planning & Development Workflow

Turning a problem into a structured development plan before writing code.

Day 01 is about understanding the system before asking AI to build it. You will read a set of requirements, work out how the application should behave, and produce a plan you can actually build against.

What you will learn

STAGE 01

Understand the Requirements

Before development begins, your team identifies what is actually being asked for.

Who will use the application
What users need to accomplish
What information must be stored
What actions users can perform
How the different parts of the application should interact
The goal is to understand the system before asking AI to build it.
STAGE 02

Plan with Excalidraw

Create a simple functional diagram showing how the application works. This is a practical guide, not formal architecture documentation.

Main pages
User actions
Navigation
Authentication
Data storage
Important connections between components
>User → Sign In → Application → User Action → Firebase → Stored Data
You should be able to answer: when a user performs an action, what happens next?
STAGE 03

Design with Variant

Explore the visual design and user experience of your application.

Navigation
Layout
Responsiveness
Consistency
Accessibility
Usability
Excalidraw = How it works
Variant = How it looks and feels
Workshop Materials

Handouts

The HTML presentation contains the full teaching content, explanations, examples, and exercises. The PDF handout is a shorter printable checklist for following the workflow, recording progress, and confirming each step is complete.

Tools used on this day

// KEY PRINCIPLE

Understand the system before you ask AI to build it.