Why use the WordPress Site Editor for design and prototyping

[westnz]

Designing in the Site Editor and using it for prototyping. (theoretical introduction to the pros: save time on designer -> developer handover, get interactive preview, use the tool itself)

• The difference between web design and print design
• Web-related design principles (gestalt principles)

//lesson

[github-actions[bot]]

Lesson Development Checklist

• [x] Gather any relevant links to Support, Docs, or related material
• [x] Description and Objectives finalized
• [x] Lesson created and announced to the team for review
• [x] Lesson reviewed
• [ ] Lesson video submitted and published to WPTV
• [ ] Lesson created on Learn.WordPress.org
• [ ] Lesson video published to YouTube
• [ ] Lesson on Learn.WordPress.org updated with YouTube video
• [ ] Lesson published to Learn.WordPress.org

[westnz]

https://github.com/user-attachments/assets/4b38dbb8-de7c-475e-bc96-b9a695d4b746

[westnz]

//review

[github-actions[bot]]

This piece of content is ready to be reviewed. Copy and paste the following check list into a new comment and tick the items as you review them. This checklist can also be found on Guidelines for Reviewing Content.

Content Review Checklist

• [ ] Learning outcomes/objectives are clear.
• [ ] Technical concepts introduced in the content are accurate.
• [ ] The speed of demonstrations are easy to follow.
• [ ] The narration audio matches what is shown visually.
• [ ] Spelling and grammar are correct.
• [ ] Sound quality is consistent throughout the video.
• [ ] Brand Usage Guidelines and Promotional Guidelines are being followed.
• [ ] Media assets are all in the public domain (CC0).

Remember to also add a comment in your own words. This can be about something to improve in the content, or something you thought was really good about it.

[quitevisible]

Tutorial/Lessons Review Checklist.

Please tick all items you've confirmed:

• [x] Learning outcomes/objectives are clear.
• [x] Technical concepts introduced in the content are accurate.
• [x] The speed of demonstrations are easy to follow.
• [x] The narration audio matches what is shown visually.
• [x] Spelling and grammar are correct.
• [x] Sound quality is consistent throughout the video.
• [x] Brand Usage Guidelines and Promotional Guidelines are being followed.
• [x] Media assets are all in the public domain (CC0).

Leave an additional comment below with feedback. You can also share what you liked about this Tutorial.

---

@westnz felt like a bit of a quicker pace than usual on this one, but still wasn't too fast. I did have to pause/replay a couple of sections to make sure I was correctly understanding the process that was being explained.

But all the info fit well, and was relevant to the topic and objectives outlined.

A couple of notes on the Gestalt section:

• the first 2 visuals (Proximity and Similarity) were not immediately clear on what the discrepancies were. There was a red ✖️ and green ✔️ mark to indicate correct and incorrect but I had to pause the video to get a better look: -- On the Proximity slide it looks like spacing was the main difference.
  -- On the Similarity slide, the contrasting buttons appeared to be the issue.
• Perhaps highlighting or zooming in on the incorrect parts might help.
• or keeping the graphic up a little longer.
• or using different slides altogether

That was really it - great work!

[westnz]

Thank you for the helpful feedback @quitevisible!

[westnz]

//published