Дизайн для розробників

3 хв. читання

Навіщо розробнику, який працює з кодом розумітися в дизайні? Коли ви маєте досвід і в дизайні, і в розробці — це значно пришвидшує й поліпшує обидва процеси. Ваші прототипи будуть виглядати краще, а дизайни будуть побудовані так, що їх реалізація не займатиме 500 МБ оперативної пам'яті.

1. Простір

Священна концепція, яку дизайнери називають білим простором — це один з основних і найдієвіших компонентів веб-дизайну. В коді це margin та padding для блоків, і letter spacing та line height для тексту, це любий простір, що не має в собі елементів, котрі привертають увагу. Тобто зображення та візерунки також можуть бути частиною білого простору, поки вони не перехоплюють фокус.

Дизайн для розробників

Наприклад, цей блог має дуже багато білого простору. Ви можете подумати, що логотипи зверху та збоку не є частиною білого простору, але це не так. Вони виконані в неконтрастних тонах і в цілому не дуже акцентують на собі зір, а навпаки дають очам "перепочити" після перегляду основного контенту. Зауважте, що секції в сайдбарі мають великий розмір, хоча несуть досить мало інформації, що дозволяє краще її сприйняти.

До речі, у нас є ціла стаття про білий простір.

Поради:

  • Впевніться, що блоки тексту розділені високими параграфами, зображеннями, чи списками.

  • Використовйте спокійні текстури та зображення як частину білого простору, але не перестарайтеся, багато конфліктуючих елементтів збивають, і без різниці наскільки вони неконтрасні.

2. Контраст

Є багато способів досягти контрасту в вашому дизайну, але лише декілька з них слід використовувати в створенні сайту. Контраст кольорів: люди завжди краще помічають щось яскраве, користувач швидше помітить кольлорову кнопку, ніж з нейтральним кольором. Також ще є контраст форм та розмірів. Всі форми контрасту використовуються щоб виділити важливу інформацію та зробити статичну сторінку більш інтерактивною.

Дизайн для розробників

Цей сайт використовує всі три типи контрасту. Яскраві, плоскі блоки вигідно контрастують з світлими та текстурованими. Пишна форма лого контрастує з рештою сторінки, яка переважно прямокутної форми.

Поради:

  • Дотримуйтесь базових правил поєднання кольорів, користуйтеся кольоровим колесом.

  • Шрифти не повинні завжди контрастувати за формою і розмірами, але один з цих контрастів дуже допомагає в дизайні.

3. Баланс

Останньою великою концепцією в нашій статті буде баланс. Якщо сайт дуже нерівномірно побудований — він не буде виконувати свою функцію. Але якщо ж він буде ідеально відцентрований — це теж не спрацює, він буде здаватися якимось надто офіційним. Баланс виглядає ефективно коли широкому елементу протиставляється інший елемент з другої сторони.

Дизайн для розробників

Наприклад, цей сайт може здатися дизбалансним, адже банер та лого обидва вирівняні по лівій стороні. Але сусідство з великим фото та навігацією навпаки додає їм візуальної ваги.

Підказка:

  • Баланс не означає однакові розміри. Великий помаранчевий блок на одній стороні сторінки може бути збалансований помаранчевою кнопкою на іншій стороні
Помітили помилку? Повідомте автору, для цього достатньо виділити текст з помилкою та натиснути Ctrl+Enter
Codeguida 6.2K
Приєднався: 7 місяців тому
Коментарі (0)

    Ще немає коментарів

Щоб залишити коментар необхідно авторизуватися.

Вхід / Реєстрація