Теорія дизайну сайту для веб-розробників

21

Від автора: Спосіб, яким люди бачать наші композиції, сильно впливає на смисл, який з них витягають. Правило гештальта (цілого) вивчає цей феномен; по суті, це – один з основних принципів, який слід обміркувати кожного веб-дизайнера при розвитку свого задуму. Також ми розглянемо, як розуміння цілісності ідеї поліпшить хід вашої роботи!

Теорія дизайну і веб-розробка

Спроба запропонувати хорошу креативну розробку може здатися легкою того, хто відвідував школу дизайну, але не 90% веб-розробників, ніколи не ходили на дизайнерські курси чи у школу і виникають в основному або з розробників, або, як правило, з недизайнерской середовища. Питання залишається відкритим… що насправді визначає хороший веб-дизайн? Тільки талант? Людина, яка володіє певним «особливим» зором, якому відомо, що спрацює, а що? Або за всім цим є логічний і науковий підхід, який може призвести дизайнерів, критиків і навіть клієнтів до ідеї відмінного дизайну.

Ми загостримо увагу на найважливіших фундаментальних ідеях, які в кінцевому проекті можуть сильно відрізнятися.

Принцип гештальт

Гештальт – це німецьке слово, що означає «сутність або обрис загальної форми буття» і це визначення може стати одним з найважливіших правил дизайну.

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

Погляньте на зображення…

теория дизайна

З першого погляду ви побачили пару старечих голів, але пильніше придивившись, починаєте помічати деталі (яких багато спочатку могли навіть не помітити), з яких складаються ці зображення, і тепер вже бачите зовсім іншу картинку.

Тепер спробуємо побачити, що в дійсності деталі не мають ніякого значення; подивіться на ці два приклади:

теория дизайна

На перший погляд ці зображення можуть здатися однаковими; проте у дрібницях є 5 невеликих відмінностей, які дуже мало впливають на весь «дизайн»:

Чорна пташка у верхньому лівому куті дивиться у зворотний бік

Чоловік зліва в інший сомбреро (капелюсі)

Паличка чоловіки перевернута і трохи темніше

Камені тротуару внизу праворуч на другому зображенні більше

Жінка дивиться у зворотному напрямку

Тут ці відмінності насправді ніяк не вплинули на загальний вид зображення… давайте розглянемо інший простий приклад:

теория дизайна

Це дві версії автомобіля Volkswagen Beetle, моделі 1937 і 1973рр, і, незважаючи на деякі значні зміни деталей зовнішності за більш ніж 4 десятиліття, по суті дизайн залишається одним і тим же. Це відбувається із-за принципу роботи нашого мозку, ми бачимо цілісні картини і визначаємо загальну форму набагато швидше і легше, ніж бачимо або помічаємо зміни в деталях.

теория дизайна

Якщо подивитися на верхню картинку, то вона зображує далматинця, нюхающего землю в нависають тіні дерев. Спочатку собака невпізнанна, але ми потім робимо висновок про собаку, не ідентифікуючи його опознаваемые частині (ноги, вуха, ніс, хвіст тощо). Замість цього собака сприймається нами як єдине ціле, вся відразу.

Те ж саме відбувається з кожним окремим дизайном сайту, створеним нами: він ніколи не сприймається шляхом ідентифікації його окремих частин (заголовка, навігації, вмісту, кнопок, таблиць…і. т. д), дизайн з першого погляду сприймається як ціле.

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

Попросіть кого завгодно намалювати Біг Бен, або Ейфелеву вежу, або піраміди Гізи… вони всі зійдуться на загальному контурі кожної пам’ятки, тому що хоча ми можемо побачити їх по-різному (наживо, на фото, в кіно, в путівнику …і т. д.), ми всі бачимо один і той же визначає обрис.

теория дизайна

Додаток принципу цілісності до роботи над веб-дизайном

Нижче наведено вебсайти-приклади та відповідні силуети розмітки. Саме силует – те, що мозок ідентифікує як обрис сторінки. Спроба змінити щось інше, крім основного обриси, призведе до більш або менш того ж самого виду… а повертатися до клієнта з тим же дизайном після того, як він просив внести зміни, змусить її вважати, що нічого не було зроблено.

…дизайн буде виглядати однаково, поки ви не зміните структурний гештальт.

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

Гаразд, давайте поглянемо на деякі ідеї та їх силуети:

теория дизайна

теория дизайна

Зазвичай при проходженні перевіреного і в основному подібного квадрату дизайну (як у 4 нижніх розмітках в прикладах), підсумком буде звичайний дизайн, нічого особливо креативного. Завжди пробуйте експериментувати з «містить оболонкою» своїх задумів. Спробуйте розгорнути блок на кілька градусів або обрізати і змінити один з кутів… все це внесе у ваше ідею унікальність і творчості.

Завжди слід починати з контейнера, або загальної структурної оболонки дизайну; забудьте про деталі та окремих компонентах.

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

теория дизайна

Думайте про свою ідею як про арахісі в шоколаді, якщо починати з горіха, з вивороту, верхній шар, відомий всім (шар шоколаду), завжди буде залежати від обрисів арахісу і ви не зможете добре контролювати кінцевий результат.

теория дизайна

Однак, якщо ви поставитеся до дизайну як до шоколадному яйцю, спочатку попрацювавши над зовнішнім шаром, і додасте йому бажану форму – підженіть внутрішній вміст під зовнішню оболонку, тоді насправді все одно, чим ви його наповніть, дизайн завжди залишиться у формі яйця, як вам було потрібно.

киберсант-вебмастер

E-mail: [email protected]

P. S. Хочете опублікувати цікавий тематичний матеріал і заробити? Якщо відповідь «Так», то тисніть сюди.