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]

Lesson Development Checklist

• Gather any relevant links to Support, Docs, or related material
• Description and Objectives finalized
• Lesson created and announced to the team for review
• 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]

Why.design.in.the.Site.Editor.and.use.it.for.prototyping.mp4

[westnz]

//review

[github-actions]

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:

• 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).

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!