Design Principles: Hierarchy, Alignment, Contrast and White Spaceبنەماکانی دیزاین: پلەبەندیی بینراو، ڕێکبوون، کۆنتراست و شوێنی بەتاڵ

A page is well designed when its look helps people find, read and act. Before anyone reads a word, the eye has already judged the page in a fraction of a second: is it calm or crowded, what is the main thing, where do I click? Good visual design answers these questions without words. It is not decoration — the look follows the purpose.

لاپەڕەیەک دیزاینێکی باشی هەیە کاتێک ڕووخسارەکەی یارمەتی خەڵک دەدات بدۆزنەوە، بخوێننەوە و کار بکەن. پێش ئەوەی کەس وشەیەک بخوێنێتەوە، چاو لە بەشێکی بچووکی چرکەیەکدا حوکمی لەسەر لاپەڕەکە داوە: ئارامە یان قەرەباڵغ، شتی سەرەکی چییە، لە کوێ کلیک بکەم؟ دیزاینی بینراوی باش بەبێ وشە وەڵامی ئەم پرسیارانە دەداتەوە. ڕازاندنەوە نییە — ڕووخسار بەدوای مەبەستدا دێت.

This lesson follows one example from start to end: the home page of Shilan's Bakery in Erbil. The picture marks six principles on the finished page; each one has its own screen below. They work on Kurdish pages exactly as on English ones — only the direction flips. (The words for judging a website are in What makes a good website?.)

ئەم وانەیە لە سەرەتاوە تا کۆتایی یەک نموونە پەیڕەو دەکات: لاپەڕەی سەرەکیی (Home page) نانەواخانەی شیلان لە هەولێر. وێنەکە شەش بنەما لەسەر لاپەڕە تەواوکراوەکە نیشانە دەکات؛ هەریەکەیان لە خوارەوە شاشەی خۆی هەیە. لە لاپەڕەی کوردیدا وەک لاپەڕەی ئینگلیزی کار دەکەن — تەنیا ئاڕاستەکە پێچەوانە دەبێتەوە. (بۆ وشەکانی هەڵسەنگاندنی تۆڕگە (Website) بڕوانە چی تۆڕگەیەک باش دەکات؟.)

You build a hierarchy with five tools. Use few sizes — about three clear steps are enough (Nielsen Norman Group) — so that the differences are obvious:

پلەبەندیی بینراو بە پێنج ئامراز دروست دەکەیت. قەبارەی کەم بەکاربهێنە — نزیکەی سێ پلەی ڕوون بەسە ⁦(Nielsen Norman Group)⁩ — بۆ ئەوەی جیاوازییەکان ئاشکرا بن:

Give each screen one main action — a Call to action such as “Order for tomorrow” — and make it the strongest button on the screen. If everything is big and bold, nothing stands out.

هەر شاشەیەک یەک کاری سەرەکی پێ بدە — بانگەوازێکی کردار (Call to action) وەک «بۆ سبەی داوا بکە» — و بیکە بە بەهێزترین دوگمە (Button) لەسەر شاشەکە. ئەگەر هەموو شتێک گەورە و تۆخ بێت، هیچ شتێک دیار نابێت.

Step back, half-close your eyes or blur a screenshot. The details disappear and only the strong shapes remain. If you still see the heading and the main button, the hierarchy works; if the page turns into equal grey blocks, it does not. You can try it on any page in the browser's developer tools by adding filter: blur(4px) to the body (filters are explained in Effects).

دوور بکەوەرەوە، چاوەکانت نیوە دابخە یان وێنەیەکی شاشە (Screenshot) لێڵ بکە. وردەکارییەکان ون دەبن و تەنیا شێوە بەهێزەکان دەمێننەوە. ئەگەر هێشتا سەردێڕ و دوگمە سەرەکییەکە ببینیت، پلەبەندییە بینراوەکە کار دەکات؛ ئەگەر لاپەڕەکە ببێتە چەند بلۆکێکی خۆڵەمێشیی یەکسان، کار ناکات. دەتوانیت لە ئامرازەکانی گەشەپێدەری (Developer tools) تۆڕگەڕدا (Web browser) لەسەر هەر لاپەڕەیەک تاقی بکەیتەوە: filter: blur(4px) بۆ body زیاد بکە (فلتەرەکان (Filter) لە کاریگەرییەکان ڕوون کراونەتەوە).

Most visitors scan before they read. Eyetracking studies by the Nielsen Norman Group (2006, checked again in 2017) found the F-pattern on pages of plain text: a line across the top, a shorter line lower down, then down the start edge. It happens when the text has no headings or bold words and the reader is in a hurry — and such readers miss what is on the far side. On right-to-left pages the F is mirrored: in Arabic, and so in Kurdish, the eyes run from the right and down the right-hand edge.

زۆربەی سەردانکەران پێش خوێندنەوە چاو بە لاپەڕەکەدا دەخشێنن. لێکۆڵینەوەکانی شوێنکەوتنی جووڵەی چاوی ⁦Nielsen Norman Group (2006⁩، لە ⁦2017⁩ دووپاتە پشکنرایەوە) شێوازی Fـیان لە لاپەڕەی دەقی سادەدا دۆزییەوە: هێڵێک بە درێژایی سەرەوە، هێڵێکی کورتتر لە خوارتر، پاشان بە لێواری سەرەتادا بەرەو خوارەوە. ئەمە ڕوودەدات کاتێک دەقەکە سەردێڕ یان وشەی تۆخی تێدا نییە و خوێنەر پەلەیەتی — ئەم خوێنەرانە ئەوەی لە لای دوورەوەیە نایبینن. لە لاپەڕەی ڕاست بۆ چەپدا F ئاوێنەیی دەبێت: لە عەرەبیدا، بۆیە لە کوردیشدا، چاو لە ڕاستەوە دەڕوات و بە لێواری ڕاستدا دێتە خوارەوە.

Do not design for the F — design against it: headings and subheadings that start with the words that matter, short paragraphs, lists, bold key words and the most important point in the first lines. The Z-pattern is a rule of thumb for simple pages with little text, such as a landing page: logo → menu → down across the picture → the main button. It has much less research behind it than the F, so treat it as a starting idea only.

بۆ F دیزاین مەکە — دژی دیزاین بکە: سەردێڕ و سەردێڕەکانی لاوەکی کە بە وشە گرنگەکان دەست پێدەکەن، بڕگەی کورت، لیست، وشەی سەرەکیی تۆخ و گرنگترین خاڵ لە یەکەم دێڕەکاندا. شێوازی Z یاسایەکی ئەزموونییە بۆ لاپەڕەی سادە و کەمدەق، وەک لاپەڕەی ناساندنی بەرهەمێک: لۆگۆ ← مێنیو (Menu) ← بە سەر وێنەکەدا بەرەو خوارەوە ← دوگمە سەرەکییەکە. لێکۆڵینەوەی زۆر کەمتری لە پشتە بە بەراورد لەگەڵ F، بۆیە تەنیا وەک بیرۆکەیەکی سەرەتایی سەیری بکە.

Every element should line up with something else. Invisible lines tie the page together; a block that starts a few pixels off looks like a mistake. Use few alignment lines and keep long text aligned to the start — left in English, right in Kurdish (text-align: start, see Line length and alignment). Centre only short things such as a heading or a single button: centred paragraphs have a ragged start edge that is hard to read.

هەر توخمێک دەبێت لەگەڵ شتێکی تردا لەسەر هێڵێک بێت. هێڵە نەبینراوەکان لاپەڕەکە پێکەوە دەبەستنەوە؛ بلۆکێک کە چەند پیکسڵێک (Pixel) لە شوێنی خۆی لای داوە وەک هەڵە دەردەکەوێت. هێڵی ڕێکبوونی کەم بەکاربهێنە و دەقی درێژ بەرەو سەرەتا ڕێک بخە — چەپ لە ئینگلیزیدا و ڕاست لە کوردیدا (text-align: start، بڕوانە درێژیی دێڕ و ڕێکخستن). تەنیا شتی کورت لە ناوەڕاست دابنێ، وەک سەردێڕێک یان تاکە دوگمەیەک: بڕگەی ناوەڕاستکراو لێواری سەرەتای ناڕێکە و خوێندنەوەی قورسە.

Designers line up whole pages on a column grid: often 12 columns on a computer and 4 on a phone, with gaps called gutters. Each block spans a number of columns, so every edge falls on a column line. CSS Grid builds exactly this, and on a Kurdish page column 1 is on the right (CSS Grid, line 1 is on the right).

دیزاینەران هەموو لاپەڕەکە لەسەر ستوونەکانی grid ڕیز دەکەن: زۆرجار ١٢ ستوون لەسەر کۆمپیوتەر و ٤ ستوون لەسەر مۆبایل، لەگەڵ بۆشایی نێوان (Gutter) لە نێوان ستوونەکاندا. هەر بلۆکێک ژمارەیەک ستوون دەگرێتەوە، بۆیە هەموو لێوارێک دەکەوێتە سەر هێڵی ستوونێک. CSS Grid ڕێک ئەمە دروست دەکات و لە لاپەڕەی کوردیدا ستوونی ١ لە لای ڕاستە (CSS Grid، هێڵی ١ لە ڕاستە).

Our eyes group things before we think. The Gestalt principles — named after a school of German psychologists of the early 20th century — describe how. Four matter most on web pages:

چاومان پێش ئەوەی بیر بکەینەوە شتەکان گرووپ دەکات. یاساکانی گێشتاڵت — بە ناوی قوتابخانەیەکی دەروونناسانی ئەڵمانیی سەرەتای سەدەی بیستەم — وەسفی چۆنیەتییەکەی دەکەن. چواریان لە لاپەڕەی وێبدا گرنگترینن:

Nielsen Norman Group also lists closure, figure and ground, and symmetry and order. On a page the first rule is the most useful: put a heading closer to the text it introduces than to the text above it — more space above a heading than below it.

Nielsen Norman Group هەروەها تەواوکردن، شێوە و پاشبنەما، هەروەها هاوتایی و ڕیزبەندی لیست دەکات. لە لاپەڕەدا یاسای یەکەم بەسوودترینە: سەردێڕێک لەو دەقەوە نزیکتر دابنێ کە دەیناسێنێت وەک لە دەقی سەرەوەی — بۆشایی سەرەوەی سەردێڕ زیاتر بێت لە بۆشایی خوارەوەی.

Forms show proximity at its clearest. When the gap between a label and its own field is the same as the gap to the next label, readers have to guess which goes with which. Put each label right on its field and leave a bigger gap between the pairs; fields that belong together (street, city, postcode) can also share a <fieldset> box — common region. More in Form design.

فۆرمەکان (Form) نزیکی بە ڕوونترین شێوە پیشان دەدەن. کاتێک بۆشایی نێوان لەیبڵێک (Label) و خانەکەی خۆی بە قەد بۆشایی نێوان ئەو و لەیبڵەکە دواتر بێت، خوێنەر ناچار دەبێت مەزەندە بکات کامیان هی کامیانە. هەر لەیبڵێک ڕاستەوخۆ لەسەر خانەکەی خۆی دابنێ و بۆشاییەکی گەورەتر لە نێوان جووتەکاندا بهێڵەرەوە؛ ئەو خانانەی پێکەوەن (شەقام، شار، کۆدی پۆستە) دەتوانن چوارچێوەیەکی <fieldset>ـی هاوبەشیان هەبێت — ناوچەی هاوبەش. زیاتر لە دیزاینی فۆرم.

Contrast: things with different jobs should look clearly different, not almost the same. A main button and a second button that differ only a little look like a mistake. Repetition: things with the same job should look exactly the same on every page — the same button style, the same heading sizes, the same link colour. Readers learn the pattern once and then trust it.

کۆنتراست: ئەو شتانەی ئەرکی جیاوازیان هەیە دەبێت بە ڕوونی جیاواز دەربکەون، نەک نزیکەی وەک یەک. دوگمەیەکی سەرەکی و دوگمەیەکی دووەم کە تەنیا کەمێک جیاوازن وەک هەڵە دەردەکەون. دووپاتەبوونەوە: ئەو شتانەی ئەرکی وەک یەکیان هەیە دەبێت لە هەموو لاپەڕەیەکدا ڕێک وەک یەک بن — هەمان شێوەی دوگمە، هەمان قەبارەی سەردێڕ، هەمان ڕەنگی بەستەر. خوێنەر یەکجار فێری شێوەکە دەبێت و پاشان متمانەی پێ دەکات.

Write the repeated styles down once, as classes and custom properties: a primary button, a secondary button, a link. Such a set of shared rules and parts for a whole site is a Design system. Contrast between text and background is a separate thing that you can measure (Colour for the web).

شێوە دووپاتەکان یەکجار بنووسە، وەک کلاس و تایبەتمەندییە دڵخوازەکان: دوگمەیەکی سەرەکی، دوگمەیەکی دووەم، بەستەرێک. کۆمەڵێکی وا لە ڕێسا و پارچەی هاوبەش بۆ تەواوی تۆڕگەیەک پێی دەوترێت سیستەمی دیزاین (Design system). کۆنتراستی نێوان دەق و پاشبنەما شتێکی ترە کە دەتوانیت بیپێویت (ڕەنگ بۆ وێب).

White space is the empty space between and around things: margins, padding, gaps and the space between lines. It does not have to be white. It rests the eye, makes text easier to read and — through proximity — shows what belongs together. A crowded page feels cheap and stressful; the same content with more room feels calm and trustworthy.

شوێنی بەتاڵ ئەو بۆشاییە بەتاڵەیە کە لە نێوان و دەوری شتەکاندایە: پەراوێز (Margin)، بۆشایی ناوەوە (Padding)، بۆشایی نێوان و ئەو بۆشاییەی لە نێوان دێڕەکاندایە. پێویست ناکات سپی بێت. پشوو بە چاو دەدات، خوێندنەوەی دەق ئاسانتر دەکات و — لە ڕێگەی نزیکییەوە — پیشان دەدات چی لەگەڵ چییە. لاپەڕەی قەرەباڵغ هەستی هەرزانی و فشار دەدات؛ هەمان ناوەڕۆک بە بۆشایی زیاترەوە ئارام و جێی متمانە دەردەکەوێت.

Choose a few sizes and use only those: a Spacing scale, for example 4, 8, 16, 24, 32 and 48 px, written in rem so that it grows with the reader's text size. Keep the steps in custom properties (explained in Colour for the web) next to your type scale (A type scale). Small steps go inside a group, big steps between groups; margin and padding themselves are in The box model.

چەند قەبارەیەک هەڵبژێرە و تەنیا ئەوانە بەکاربهێنە: پەیژەی بۆشایی، بۆ نموونە ٤، ٨، ١٦، ٢٤، ٣٢ و ٤٨ پیکسڵ، بە rem نووسراو بۆ ئەوەی لەگەڵ قەبارەی دەقی خوێنەردا گەورە ببێت. پلەکان لە تایبەتمەندییە دڵخوازەکاندا هەڵبگرە (لە ڕەنگ بۆ وێب ڕوون کراونەتەوە) لە تەنیشت پەیژەی قەبارەی فۆنتەکەت (Type scale) (پەیژەی قەبارەی فۆنت). پلەی بچووک بۆ ناو گرووپێک، پلەی گەورە بۆ نێوان گرووپەکان؛ پەراوێز و بۆشایی ناوەوە خۆیان لە مۆدێلی سندووقـدان.

Every element has visual weight: big, dark, strongly coloured, busy or isolated things feel heavy. Visual balance is how that weight is spread around the middle of the page. A symmetric layout mirrors both halves — calm and formal, like an invitation card. An asymmetric layout puts different things on each side that still weigh about the same — for example a big, light photo against a short heading and one strong button. It feels more lively and is common on modern sites. Nielsen Norman Group also names radial balance, where things spread out from a centre.

هەموو توخمێک کێشی بینراوی هەیە: شتی گەورە، تاریک، بە ڕەنگی بەهێز، قەرەباڵغ یان جیاکراوە قورس دەردەکەون. هاوسەنگیی بینراو ئەوەیە کە ئەم کێشە چۆن بە دەوری ناوەڕاستی لاپەڕەکەدا دابەش دەبێت. ڕێکخستنێکی لاپەڕەی هاوتا هەردوو نیوەکە وەک ئاوێنەی یەکتر دەکات — ئارام و فەرمی، وەک کارتی بانگهێشت. ڕێکخستنێکی لاپەڕەی ناهاوتا شتی جیاواز لە هەر لایەک دادەنێت کە هێشتا نزیکەی هاوکێشن — بۆ نموونە وێنەیەکی گەورە و کاڵ بەرامبەر سەردێڕێکی کورت و یەک دوگمەی بەهێز. زیندووتر دەردەکەوێت و لە تۆڕگەکانی نوێدا باوە. Nielsen Norman Group هەروەها هاوسەنگیی تیشکی ناو دەبات، کە شتەکان لە ناوەندێکەوە بڵاو دەبنەوە.

On a Kurdish page the whole layout is mirrored, so the balance stays the same — the photo simply changes sides (what flips by itself).

لە لاپەڕەی کوردیدا هەموو ڕێکخستنی لاپەڕەکە ئاوێنەیی دەبێتەوە، بۆیە هاوسەنگییەکە وەک خۆی دەمێنێتەوە — وێنەکە تەنیا لای خۆی دەگۆڕێت (چی خۆی پێچەوانە دەبێتەوە).

Pictures are the heaviest parts of a page, both in visual weight and in kilobytes, so each one should earn its place:

وێنەکان قورسترین بەشی لاپەڕەن، هەم لە کێشی بینراودا و هەم لە کیلۆبایتدا، بۆیە هەر وێنەیەک دەبێت شایەنی شوێنەکەی بێت:

The first version of Shilan's page had every mistake at once: things scattered, equal gaps everywhere, a heading no bigger than the text, five colours and three button shapes, and no room to breathe. The animation fixes it in five steps — the order in which designers usually work.

یەکەم وەشانی لاپەڕەکەی شیلان هەموو هەڵەکانی پێکەوە تێدا بوو: شتی بڵاو، بۆشایی یەکسان لە هەموو شوێنێک، سەردێڕێک کە لە دەقەکە گەورەتر نەبوو، پێنج ڕەنگ و سێ شێوەی دوگمە، هەروەها هیچ جێگەیەک بۆ هەناسەدان. ئەنیمەیشنەکە (Animation) لە پێنج هەنگاودا چاکی دەکات — بەو ڕیزبەندییەی دیزاینەران زۆرجار کار دەکەن.