Lesson 1 / الدرس 1

Design is decisions, not decoration / التصميم قرارات لا زخرفة

A page that feels right is not lucky. Every part of that feeling comes from a decision somebody made about size, space, order and contrast — and decisions can be learned, argued about and corrected. Taste cannot.

الصفحة التي تبدو صحيحة ليست محظوظة. فكل جزء من ذلك الشعور يأتي من قرار اتخذه أحدهم في الحجم والفراغ والترتيب والتباين — والقرارات يمكن تعلّمها والجدال فيها وتصحيحها. أما الذوق فلا.

Ask someone why a page looks bad and you usually get "I don't know, it just does". That answer is the problem this course exists to remove. What you are reacting to is almost always one of four things: you cannot tell what matters most, things that belong together are apart, edges do not line up, or there is not enough space for the eye to rest. All four are fixable, and none of them is about taste.

The job, stated plainly

A designed page answers three questions before the reader has to ask them: what is this, what can I do here, and what should I look at first? Everything in this course is a technique for answering one of those three faster. Decoration that does not answer any of them is not design — it is furniture, and furniture in a doorway is worse than an empty room.

<div style="font-family: system-ui">
  <p style="font-size:16px">Order #4471</p>
  <p style="font-size:16px">Delivery on Thursday</p>
  <p style="font-size:16px">Total 550 EGP</p>
  <p style="font-size:16px">Track this order</p>
</div>

<hr>

<div style="font-family: system-ui; line-height:1.5">
  <p style="font-size:13px; color:#666; margin:0">Order #4471</p>
  <p style="font-size:26px; font-weight:700; margin:4px 0 0">550 EGP</p>
  <p style="font-size:15px; margin:12px 0 16px">Delivery on Thursday</p>
  <a href="#" style="font-size:15px">Track this order</a>
</div>

The same four facts twice. Nothing was added, no colour, no image — only decisions about size, weight and space. The second one answers "what should I look at first" and the first one does not, and that is the whole difference.

Why "I like it" is not an argument

It cannot be answered. If your reason for a choice is that you like it, the only possible reply is that someone else does not — and now the loudest person wins.
It cannot be improved. "The heading is too small to be found in two seconds" tells you what to change. "It looks off" does not.
It does not survive a stakeholder. A reason grounded in what the reader has to do is a reason a manager can weigh; a preference is one they can simply overrule.

Try it live / جرّب بنفسك

<h1>What is wrong, and why</h1>

<p><strong>Page:</strong> </p>
<p><strong>Problem:</strong> </p>

<h2>Before</h2>
<div></div>

<h2>After</h2>
<div></div>

<p><strong>What I changed, and why:</strong> </p>

Preview / المعاينة

Check yourself / اختبر نفسك

1. A page "feels cluttered". What is usually the fix?

2. Why is "I like it" a weak reason for a design decision?

3. What three questions should a designed page answer before it is asked?

Your task / مهمتك

Find a page you think is badly designed and say why in the four terms from this lesson: what matters most is unclear, related things are apart, edges do not align, or there is too little space. Then rebuild one small part of it as HTML to show the fix.

ابحث عن صفحة تراها سيئة التصميم وقل لماذا بالمصطلحات الأربعة في هذا الدرس: الأهم غير واضح، أو المترابط متفرق، أو الحواف لا تصطف، أو الفراغ قليل. ثم أعد بناء جزء صغير منها بـHTML لتُظهر الإصلاح.

Names the page and states which of the four problems it has تذكر الصفحة وتحدد أيّ المشكلات الأربع فيها
No reason given is "I do not like it" ليس من الأسباب المذكورة «لا يعجبني»
One small part rebuilt, showing the before and the after جزء صغير أُعيد بناؤه، يُظهر ما قبل وما بعد