GoalWrite the design, colour and page commands for the garden club site and tell UX from UI.
New words
design style · the general feeling of a design: modern, playful, professional or creativepage · one screen of a website with its own contentimage gallery · a page or part of a page that shows many picturessample · a stand-in picture or text that you replace later
Explanation
A website command is built step by step. Step one: say the type and name of the site. Step two: the design and colours: a style such as modern, playful, professional or creative, and two or three harmonious colours. Clashing colours are hard to read, remember Week 8. Step three: the basic pages: home, about us, blog or articles, gallery and contact. Step four: the content of each page; the first text the AI writes can always be edited. Step five: a picture gallery, for example a grid, a slideshow or a big-picture view, with sample pictures that you will replace. Step six: a contact form. This lesson writes steps one to three on paper for the invented Garden Club. Pages and menus are UX; colours and fonts are UI.
1 type and name→2 design and colours→3 basic pages→4 content of pages→5 picture gallery→6 contact form
Worked examples
Part of the command
UX or UI?
three pages: Home, About us, Contact
UX (how to move around)
dark green, white, light brown
UI (colours)
calm, playful style
UI (look)
Command one for the Garden Club: “Make a simple website for a school Garden Club (example) that shows what we grow. Use a calm, playful style, with dark green, white and light brown. Add three pages: Home, About us and Contact.”
red on dark green→hard to read→dark green on white→easy to read
Karim’s command asks for red text on a dark green background. His group tests it on paper and sees that it is hard to read. They change the command to dark green text on white. Colour choices follow reasons, not only taste.
Class activity
On paper, write the first three commands (type and name, design and colours, pages) for a Garden Club or an invented club of your own. Mark each part with UX or UI. Keep the words invented and free of personal data.
Practice
1
Name the six steps of writing a website command.
Type and name, design and colours, basic pages, content, picture gallery, contact form.
2
Name two design styles.
For example modern and playful (also professional, creative).
3
Is choosing the pages UX or UI?
UX, because it is about how people move around.
4
Why do we choose two or three harmonious colours?
They look calm and are easier to read than many clashing colours.
