Page Design &
Development Process
How we design and develop new pages — home, collection, product, or any page that needs both design and dev. Mobile-first, always.
Designer
Developer
PM / QA
Client
1
Mobile Design
Designer
- 📋Read the Project Brief inside the Project Notes card on Trello.
- 📁Pull branding kit + lifestyle images from Google Drive.
- 🌐Review the Inspiring Websites card — sites the client shared.
- 🎨Study the selected Shopify theme — its native sections and layout.
- 📱Design the full page mobile-first in Figma:
[Client Name]
💡
Design = blend, not copyCombine theme structure + inspiring websites + client branding + lifestyle images into one cohesive design.
2
Client Design Review
PM → Client → Designer
- 📤PM notifies client that design is ready on Figma.
- 💬Client leaves feedback directly on Figma.
- 🔄Designer updates the design on Figma — all edits happen there.
- ❓If unclear, designer replies to client directly on Figma comments.
- ✅Once all comments resolved, PM confirms and we move to development.
⚠️
Revision roundsCheck Project Notes for the client's agreement. Fixed-scope = 1–2 rounds. Management (hourly) = no limit.
3
Mobile Development
Developer
- 🖥Active store? Duplicate/unpublished theme. New store? Live theme (password-protected).
- 🚀Build full page mobile-first. Must match Figma 100%.
- 🧩Use native theme sections. Max 2 custom sections per page — only if absolutely necessary.
- 📄Create the Markup file:
[Client] - Internal
●
Hard rule: Theme sections firstCustom code is the last resort. Confirm with the team before adding any custom section. Never more than 2 per page.
4
Mobile Internal Review
Designer → PM/QA
- 🔍Developer sends the mobile build. Designer reviews on Markup.
- 📝Designer adds comments for anything that doesn't match Figma.
- 🔧Developer fixes. Loop repeats until designer approves.
- 🔎Designer approves → PM/QA checks functionality, content, quality.
- ✅All good → move to desktop.
5
Desktop Adaptation
Designer → Developer
- 🖥No full redesign needed — Shopify sections adapt across devices.
- 🔍Designer reviews the desktop view directly on Markup.
- 📝If a section needs adjustment, designer comments or redesigns only that section in Figma.
- 🔧Developer adjusts. Designer re-reviews until approved.
- 🔎PM/QA does a final desktop check.
💡
Desktop = adjust, not redesignOnly individual sections that look off get redesigned. Page structure stays the same.
6
Client Design Approval
Designer → Client
- 📸Designer exports the final desktop page using the html.to.design Figma plugin and imports it as a design into Figma.
- 📤Share exported design on Figma:
[Client Name] - 💬Client reviews and provides feedback.
- ✅Minor feedback only (titles, a few images, small tweaks) → designer edits, dev reflects.
- 🔍Designer verifies. PM/QA checks. Page done.
●
No structural changes at this stageReplacing sections or changing their function breaks mobile. PM informs client — these get scoped as a new request.
🌐
Translation
After full site
- ⏰Translation happens only after ALL pages are designed, developed, and tested.
- 🚫We do not translate page-by-page. Wait until the full project is complete.
⚠️
Translating individual pages while others are in progress creates rework and inconsistencies.
✓
Final Client Review
Client
- 🔗Share
[Client Name] - ClientMarkup with client for final website review. - 💬Client can only flag things that don't match the approved design.
- ✅Edits must be very minor — a title, 2–3 images, small text fixes. No structural changes.
📄
Naming Conventions
| File | Name Format | Created By | Shared With |
|---|---|---|---|
| Figma | [Client Name] |
Designer | Internal team + Client |
| Markup — Internal | [Client Name] - Internal |
Developer | Internal team only |
| Markup — Client | [Client Name] - Client |
Developer (duplicate) | Client (at end of full project) |
⚡
The full process at a glance
🚀
After all pages are completeTranslation → Share Markup with client → Minor fixes only → Launch