Способ, которым люди видят наши композиции, сильно влияет на смысл, который они из них извлекают. Правило Гештальта (целого) изучает этот феномен; по существу, это – один из основных принципов, который следует обдумать каждому веб-дизайнеру при развитии своего замысла. В этой статье мы рассмотрим, как понимание целостности идеи улучшит ход вашей работы.
Теория дизайна и веб-дизайн
Попытка придумать хороший и креативный дизайн может показаться легкой тому, кто посещал школу дизайна, но не для 90% веб-дизайнеров, никогда не посещавших дизайнерские курсы или школу и возникающих в основном либо из разработчиков, либо, как правило, из недизайнерской среды. Вопрос до сих пор остается открытым… что на самом деле определяет хороший веб-дизайн? Разве только талант? Человек, владеющий неким «особенным» взглядом, которому известно, что сработает, а что нет? Или за всем этим имеется логический и научный подход, который может привести дизайнеров, критиков и даже клиентов к идее отличного дизайна.
Мы заострим внимание на важнейших фундаментальных идеях, которые в конечном проекте могут сильно различаться.
Принцип Гештальта
Гештальт – это немецкое слово, означающее «сущность или очертание общей формы бытия» и это определение может стать одним из важнейших правил дизайна.
Чаще всего, дизайнеры, как правило больше сосредоточиваются на деталях веб-дизайна, а не на общем виде. Они заостряют внимание на закругленных уголках, тенях, шрифтах…и т.д., это все хорошо, но может на самом деле не иметь никакого значения, если клиенту с первого взгляда на понравится замысел; чего многие не понимают, это того, что мозг сначала видит общую форму и только потом начинает сосредотачиваться на деталях.
Посмотрите на это изображение…
Рис. 1
С первого взгляда вы увидели пару стариковских голов, но тщательнее присмотревшись, начинаете замечать детали (которых многие поначалу могли даже не заметить), из которых состоят эти изображения, и теперь уже видите совершенно другую картинку.
Теперь попробуем увидеть, что в действительности детали не имеют никакого значения; посмотрите на эти два примера:
Рис. 2
На первый взгляд эти изображения могут показаться идентичными; однако в мелочах есть 5 небольших различий, которые очень мало влияют на весь «дизайн»:
- Черная птичка в верхнем левом углу смотрит в обратную сторону;
- Мужчина слева в другом сомбреро (шляпе);
- Трость мужчины перевернута и немного темнее;
- Камни тротуара внизу справа на втором изображении больше;
- Женщина смотрит в обратном направлении;
Здесь эти различия на самом деле никак не повлияли на общий вид изображения… давайте рассмотрим другой простой пример:
Рис. 3
Это две версии автомобиля Volkswagen Beetle, модели 1937 и 1973 гг., и, несмотря на некоторые значительные изменения деталей облика за более чем 4 десятилетия, по существу дизайн остается одним и тем же. Это происходит из-за принципа работы нашего мозга, мы видим цельные картины и определяем общую форму гораздо быстрее и легче, чем видим или замечаем изменения в деталях.
Рис. 4
Если посмотреть на верхнюю картинку, то она изображает далматинца, нюхающего землю в тени нависающих деревьев. Сначала собака неузнаваема, но мы затем делаем вывод о собаке, не идентифицируя его опознаваемые части (ноги, уши, нос, хвост и т.д.). Вместо этого собака воспринимается нами как единое целое, вся сразу.
То же самое происходит с каждым отдельным дизайном сайта, который мы создаем: он никогда не воспринимается путем идентификации его отдельных частей (заголовка, навигации, содержимого, кнопок, таблиц… и т.д.), дизайн с первого взгляда воспринимается как целое.
Когда я учился в колледже, один мой профессор резюмировал все это в простом предложении, он сказал «если вы видите дизайн, он вам нравится, а затем решаете доработать детали, тогда знайте, что это хороший дизайн, однако, если вы сначала начинаете дорабатывать его для того, чтобы он вам понравился… тогда знайте, что это плохой дизайн… не тратьте зря время на попытки его доделать… просто измените его в целом», этот профессор понимал основы волшебства любого дизайна… мы видим предметы как целое, а не сумму их частей.
Попросите кого угодно нарисовать Биг Бен, или Эйфелеву башню, или пирамиды Гизы… они все сойдутся на общем очертании каждой достопримечательности, потому что хотя мы можем увидеть их по-разному (вживую, на фото, в кино, в путеводителе …и т.д.), мы все видим одно и тот же определяющее очертание.
Рис. 5
Применение принципа Гештальта к работе над веб-дизайном
Ниже приведены несколько примеров сайтов и соответствующие силуэты разметки. Именно силуэт – то, что мозг идентифицирует как очертание страницы. Попытка сменить что-то другое, кроме основного очертания, приведет к более или менее тому же самому виду… а возвращаться к клиенту с тем же дизайном после того, как он просил внести изменения, заставит его считать, что ничего не было сделано.
…дизайн будет выглядеть одинаково, пока вы не измените структурный гештальт.
Вы удивитесь, как много дизайнеров совершают эту ошибку и почему клиенту все еще не нравится идея или он не видит изменений и добавлений, даже если они без устали работали над улучшением отдельных элементов.
Ладно, давайте взглянем на некоторые идеи и их силуэты:
Рис. 6
Рис. 7
Обычно при следовании проверенному и в основном подобному квадрату дизайну (как в 4 нижних разметках в примерах), итогом будет обыкновенный дизайн, ничего особо креативного. Всегда пробуйте экспериментировать с «содержащей оболочкой» своих замыслов. Попытайтесь развернуть блок на несколько градусов или обрезать и изменить один из углов… все это внесет в вашу идею уникальность и творчества.
Всегда следует начинать с контейнера, или общей структурной оболочки дизайна; забудьте пока о деталях и отдельных компонентах.
Когда это сделано и вы со своим клиентом довольны структурой, возьмите основные контуры и начните работать над деталями. Вы удивитесь, узнав, как часто задумка оканчивается тщательно раскрашенным каркасом, когда начинаешь работать с изнанки. Я знал несколько дизайнеров, которые сначала работали над заголовком и навигацией, затем начинали делать разметку компонентов, и, не успели глазом моргнуть, у вас уже готова аккуратно упакованная и отлично раскрашенная страничка, заполненная контентом, хорошо размещенная и правильная с точки зрения юзабилити, которая, однако, с точки зрения дизайна никогда не станет креативной или выдающейся.
Рис. 8
Думайте о своей идее как об арахисе в шоколаде, если начинать с ореха, с изнанки, верхний слой, видный всем (слой шоколада), всегда будет зависеть от очертаний арахиса и вы не сможете хорошо контролировать конечный результат.
Рис. 9
Однако, если вы отнесетесь к дизайну, как к шоколадному яйцу, сначала поработав над внешним слоем, и придадите ему желаемую форму – подгоните внутреннее содержимое под внешнюю оболочку, тогда на самом деле все равно, чем вы его наполните, дизайн всегда останется в форме яйца, как вам и было нужно.