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

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

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

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

Попытка предложить хорошую креативную разработку может показаться легкой тому, кто посещал школу дизайна, но не 90% веб-разработчиков, никогда не ходивших на дизайнерские курсы или в школу и возникающих в основном либо из разработчиков, либо, как правило, из недизайнерской среды. Вопрос остается открытым… что на самом деле определяет хороший веб-дизайн? Только талант? Человек, владеющий неким «особенным» зрением, которому известно, что сработает, а что не? Или за всем этим имеется логический и научный подход, который может привести дизайнеров, критиков и даже клиентов к идее отличного дизайна.

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

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

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

Обычно разработчики больше сосредоточиваться на деталях веб-дизайна, чем на общем виде. Они заостряют внимание на закругленных уголках, тенях, шрифтах…и т.д., это все хорошо, но может на самом деле не иметь никакого значения, если клиенту с первого взгляда на понравится замысел; чего многие не понимают, это того, что мозг сначала видит общие очертания любой модели, а затем начинает фокусировать внимание и видеть частности…

Посмотрите на это изображение…

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

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

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

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

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

Черная птичка в верхнем левом углу смотрит в обратную сторону

Мужчина слева в другой сомбреро (шляпе)

Палочка мужчины перевернута и немного темнее

Камни тротуара внизу справа на втором изображении больше

Женщина смотрит в обратном направлении

Здесь эти различия на самом деле никак не повлияли на общий вид изображения… давайте рассмотрим другой простой пример:

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

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

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

Если посмотреть на верхнюю картинку, то она изображает далматинца, нюхающего землю в тени нависающих деревьев. Сначала собака неузнаваема, но мы затем делаем вывод о собаке, не идентифицируя его опознаваемые части (ноги, уши, нос, хвост и т.д.). Вместо этого собака воспринимается нами как единое целое, вся сразу.

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

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

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

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

Приложение принципа целостности к работе над веб-дизайном

Ниже приведены вебсайты-примеры и соответствующие силуэты разметки. Именно силуэт – то, что мозг идентифицирует как очертание страницы. Попытка сменить что-то другое, кроме основного очертания, приведет к более или менее тому же самому виду… а возвращаться к клиенту с тем же дизайном после того, как он просил внести изменения, заставит его считать, что ничего не было сделано.

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

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

Ладно, давайте взглянем на некоторые идеи и их силуэты:

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

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

Обычно при следовании проверенному и в основном подобному квадрату дизайну (как в 4 нижних разметках в примерах), итогом будет обыкновенный дизайн, ничего особо креативного. Всегда пробуйте экспериментировать с «содержащей оболочкой» своих замыслов. Попытайтесь развернуть блок на несколько градусов или обрезать и изменить один из углов… все это внесет в вашу идею уникальность и творчества.

Всегда следует начинать с контейнера, или общей структурной оболочки дизайна; забудьте пока о деталях и отдельных компонентах.

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

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

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

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

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

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

Автор: Ahmed Hussam

Источник: http://webdesign.tutsplus.com/

Редакция: Рог Виктор и Андрей Бернацкий. Команда webformyself.

E-mail: contact@webformyself.com

P.S. Хотите опубликовать интересный тематический материал и заработать? Если ответ «Да», то жмите сюда.

Хотите научиться создавать шикарные дизайны сайтов?

Получите бесплатную пошаговую обучающую систему по веб-дизайну

Получить

Метки:

Комментарии Вконтакте:

Комментарии Facebook:

Комментарии (65)

  1. Дима

    спасибо за статью. очень вдохновила и подтолкнула

  2. Татьяна

    Спасибо! Очень интересно

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree