الأسبوع 8 · الدرس ١ «مبادئ تصميم واجهات احترافية شيقة للمواقع الإلكترونية» (٢): واجهة المستخدم UI ومبادئها والفرق بينها وبين UX · 3 دروس
2
Colours, fonts and layout
ICT Prep 2 Term 1, Unit 2, Lesson 1: pp. 46–53
GoalPlan colours, fonts and layout for an imaginary educational app and give reasons.
New words
harmonious colours · a small set of colours that look good togethercontrast · the difference between text colour and background colour, which makes text readablefont · the style of the letterssection · a clear part of a page, such as a header or a menu
Explanation
Design choices need reasons, because colour and style are partly taste. For colours, a small set such as blue and grey is calm; many bright, clashing colours tire the eyes. Contrast matters: dark text on a light background is easy to read, and it also helps people with weak sight. For fonts, use a simple, legible font for reading and keep decorated fonts for a short title. For layout, divide the page into clear sections, for example a header, a menu, the content and a footer, with space around them. A crowded page makes the eye jump. Write your choices on paper as a table and give a reason for each.
A
1
Header: app name
2
Menu: Home, Lessons, Help
3
Content: today’s lesson
4
Footer: small notes
Worked examples
Choice
Reason
dark blue text on light grey
calm, high contrast, easy to read
simple font for lessons
legible for long reading
three tidy sections
the eye knows where to look
Youssef plans an invented app called Little Scientists. Colours: dark blue, light grey and white (calm, good contrast). Fonts: a simple one for reading and a bolder one for titles. Layout: three tidy sections. He writes a reason for each choice in a table.
pale yellow on white→low contrast→dark blue on white→easy to read
A classmate wants pale yellow words on a white page. Nour explains that the contrast is too low, so many readers cannot see the words well. She suggests dark blue words on white instead. Reasons, not only taste, decide.
Class activity
Design your own paper screen for Little Scientists or an app of your own invention. Name three colours, two fonts and three sections in a table. Write one reason for each choice. Do not use colours that clash and do not use tiny letters.
Practice
1
Why is dark text on a light background a good choice?
High contrast makes it easy to read, also for people with weak sight.
2
When are decorated fonts fine?
For a short title, not for long reading.
3
Name four sections of a simple page layout.
Header, menu, content, footer.
4
Why do we give reasons for colour choices?
Colour is partly taste, so reasons like contrast and calm make the choice fair.
