Design fundamentalsأساسيات التصميم

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.

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

A reader does not read a page, they scan it and stop somewhere. Hierarchy is you choosing where they stop — and it is built from four tools, of which size is the least interesting.

القارئ لا يقرأ الصفحة، بل يمسحها ثم يتوقف عند موضع. والتدرّج البصري هو أن تختار أنت أين يتوقف — وهو مبنيّ من أربع أدوات، أقلّها إثارةً الحجم.

Two rules explain most of the difference between a page that looks made and one that looks assembled: things that belong together must be closer to each other than to anything else, and every edge should line up with another edge.

قاعدتان تفسّران معظم الفرق بين صفحة تبدو مصنوعة وأخرى تبدو مركّبة: ما يجمعه معنى يجب أن يكون أقرب بعضه إلى بعض منه إلى أي شيء آخر، وكل حافة ينبغي أن تصطف مع حافة أخرى.

Most of the difference between typefaces is invisible at reading size. What matters is whether it has the weights you need, the characters your readers write, and — on a bilingual site — whether it has a partner in the other script.

معظم الفرق بين الخطوط غير مرئي في حجم القراءة. والمهم هو: أفيه الأوزان التي تحتاجها، والحروف التي يكتبها قراؤك، و — في موقع ثنائي اللغة — أله شريك في الكتابة الأخرى؟

Pick five sizes and use only those. A page built from a small fixed set looks composed; a page where every heading got whatever number felt right looks assembled, and no amount of adjusting individual values will fix it.

اختر خمسة أحجام واستخدمها وحدها. فالصفحة المبنية من مجموعة صغيرة ثابتة تبدو مؤلَّفة؛ والصفحة التي نال فيها كل عنوان الرقم الذي بدا مناسبًا تبدو مركّبة، ولن يصلحها أي قدر من تعديل القيم فرادى.

Two numbers decide whether a block of text is comfortable or exhausting, and neither is the font size: how long the lines are, and how far apart they sit. Both are usually wrong by default.

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

Most design advice is written by people who have never set two directions on one page. Here is what actually changes when your product has to work in both — and it is more than mirroring the layout.

معظم نصائح التصميم كتبها من لم يضبطوا اتجاهين في صفحة واحدة قط. وهذا ما يتغيّر فعلًا حين يجب أن يعمل منتجك بالاثنين — وهو أكثر من عكس التخطيط.

Every colour on an interface should be doing something a reader can name: this is a link, this went wrong, this is the thing to press. Colours chosen for atmosphere and then given jobs afterwards are where inconsistent products come from.

كل لون في الواجهة ينبغي أن يؤدي عملًا يستطيع القارئ تسميته: هذا رابط، وهذا خطأ وقع، وهذا ما يُضغط. أما الألوان المختارة للجوّ ثم المعطاة وظائف بعدُ فمنها تأتي المنتجات غير المتسقة.

Whether text can be read is measurable, and the measurement takes ten seconds. This is the one place in design where you can be objectively wrong, and where being wrong excludes real people from using what you built.

إمكان قراءة النص قابل للقياس، والقياس يستغرق عشر ثوانٍ. وهذا هو الموضع الوحيد في التصميم الذي تستطيع أن تكون فيه مخطئًا موضوعيًا، وحيث يُقصي الخطأ أناسًا حقيقيين عن استخدام ما بنيت.

A palette is not a set of colours you like. It is a small set of named roles, each with a value for every theme you support, each measured — and it is built from the neutrals outwards, not from the brand colour inwards.

اللوحة ليست مجموعة ألوان تعجبك. بل مجموعة صغيرة من أدوار مسمّاة، لكل دور قيمة في كل سمة تدعمها، وكلٌّ مقيس — وهي تُبنى من المحايدات إلى الخارج، لا من لون العلامة إلى الداخل.

Space costs nothing, adds nothing to the page, and fixes more problems than any other change. Like type sizes, it works when it comes from a small fixed set and falls apart when every gap is chosen on its own.

الفراغ لا يكلّف شيئًا، ولا يضيف شيئًا إلى الصفحة، ويصلح من المشكلات أكثر من أي تغيير آخر. وهو كأحجام الخط: ينجح حين يأتي من مجموعة صغيرة ثابتة، وينهار حين تُختار كل فجوة على حدة.

A grid is a small number of invisible lines that everything on the page agrees to start and stop at. It is not a rule about columns of text — it is the reason a page looks composed rather than arranged one element at a time.

الشبكة عدد قليل من خطوط غير مرئية تتفق كل عناصر الصفحة على البدء والانتهاء عندها. وليست قاعدة عن أعمدة النص — بل هي سبب كون الصفحة تبدو مؤلَّفة لا مرتَّبة عنصرًا عنصرًا.

You are not designing a page, you are designing a set of rules a page follows at any width. The habit that makes that manageable is starting from the narrowest screen, because narrow is where the real decisions are forced.

أنت لا تصمّم صفحة، بل تصمّم مجموعة قواعد تتبعها الصفحة عند أي عرض. والعادة التي تجعل ذلك محتملًا هي البدء من أضيق شاشة، لأن الضيق هو حيث تُفرض القرارات الحقيقية.

Almost every problem you face has a conventional solution that your readers already understand. Inventing a new one costs them learning time and costs you nothing to avoid — originality belongs in what a product does, not in where its close button is.

كل مشكلة تلقاها تقريبًا لها حلٌّ اصطلاحي يفهمه قرّاؤك أصلًا. واختراع حلّ جديد يكلّفهم وقت تعلّم ولا يكلّفك تجنّبه شيئًا — فالأصالة مكانها ما يفعله المنتج لا موضع زرّ إغلاقه.

Design work is reviewed by people who cannot draw, in meetings where the loudest opinion often wins. The skill that protects your work is not defending it — it is making the conversation about the reader instead of about anyone's preference.

عمل التصميم يراجعه من لا يرسمون، في اجتماعات يفوز فيها أعلى الآراء صوتًا غالبًا. والمهارة التي تحمي عملك ليست الدفاع عنه — بل جعل الحديث عن القارئ بدل تفضيل أحد.

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.

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