eduTrain

Lesson 16 / الدرس 16

Project: redesign one real page / مشروع: أعد تصميم صفحة حقيقية واحدة

One page, redesigned with every decision written down and defended. The writing is not documentation of the work — for a designer applying for a first job, it is most of the work, because it is the only evidence that the result was reasoned rather than lucky.

صفحة واحدة، أُعيد تصميمها وكل قرار فيها مكتوب ومدافَع عنه. والكتابة ليست توثيقًا للعمل — فلمصمم يتقدم لأول وظيفة هي معظم العمل، لأنها الدليل الوحيد على أن النتيجة معلَّلة لا محظوظة.

Choose a page that is genuinely doing a job badly — a form, a listing, a confirmation, a dashboard. Not a landing page, because a landing page can be improved by making it prettier and you will learn nothing. You want a page where a reader has something specific to do, so success is measurable in whether they can do it faster.

What to hand in

  1. The page as it is, and what it is for. One paragraph, and it must name the one thing a reader comes here to do.
  2. What is wrong, in the terms of this course. Hierarchy, proximity, alignment, space, contrast, colour doing too many jobs. Six problems, none of them a preference.
  3. The importance list — what should be first, second and third — written before you touch the layout.
  4. The redesign, built in HTML, working at 320px and wide, in both light and dark if you support both, and with the Arabic version if it has one.
  5. Every measured value: the type scale, the spacing scale, the palette with its contrast ratios. Numbers, not adjectives.

The part that is actually assessed

Anyone can produce a page that looks nicer than a bad one. What a reviewer is looking for is whether you can say why each change is an improvement in terms of what a reader has to do. A modest redesign with six well-argued decisions is a stronger piece of work than a beautiful one you cannot explain — and it is the one that survives the question "why did you do that?" 

<h1>Redesign &mdash; <em>(page)</em></h1>

<h2>What this page is for</h2>
<p>The one thing a reader comes here to do: </p>

<h2>What is wrong</h2>
<table>
  <tr><th>Problem</th><th>In which terms</th><th>What it costs the reader</th></tr>
  <tr><td></td><td>hierarchy / proximity / alignment / space / contrast</td><td></td></tr>
</table>

<h2>Importance, decided first</h2>
<ol><li></li></ol>

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

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

<h2>Measured values</h2>
<p>Type scale: &middot; Spacing scale: &middot; Palette and ratios: </p>
The skeleton. Note that the importance list sits above the redesign and the problems sit above that — the order of the document is the order the work was done in, and a reviewer can see that at a glance.

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

Preview / المعاينة

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

1. Why choose a page where the reader has a specific task rather than a landing page?

2. What is a reviewer of this project mainly assessing?

3. Why write the importance list before touching the layout?

Your task / مهمتك

The project. Redesign one real page where a reader has a specific task, and hand in the full document: purpose, six problems in the course's terms, the importance list written first, the rebuilt page working narrow and wide, and every measured value.

المشروع. أعد تصميم صفحة حقيقية واحدة للقارئ فيها مهمة محددة، وسلّم المستند الكامل: الغرض، وست مشكلات بمصطلحات الدورة، وقائمة الأهمية مكتوبة أولًا، والصفحة المعاد بناؤها تعمل ضيقًا وعريضًا، وكل قيمة مقيسة.

  • Purpose, six problems and the importance list — all before the redesign الغرض وست مشكلات وقائمة الأهمية — كلها قبل إعادة التصميم
  • The rebuilt page works at 320px and wide, with no content hidden الصفحة المعاد بناؤها تعمل عند 320 بكسل وعريضًا، بلا محتوى مخفيّ
  • Type scale, spacing scale and palette given as numbers with contrast ratios سُلَّم الخط وسُلَّم التباعد واللوحة معطاة أرقامًا بنسب تباين
  • No problem stated as a preference لا مشكلة مذكورة تفضيلًا
How do you want to submit? / كيف تريد التسليم؟