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

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

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


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

Попытка предложить хорошую креативную разработку может показаться легкой тому, кто посещал школу дизайна, но не 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. Степан

    Дааа….. , ОБАЛДЕННАЯ статейка !
    Спасибо.
    С уважением, Степан.

    P.S.(не нашёл кнопочку [ошибка], и решил написать сюда)
    То же самое происходит с каждый отдельным дизайном вебсайта
    … …. ………. …………….. . каждым ……………. …………… ………….

  3. Талгат

    Здорово! Я о таком подходе даже и не подозревал!

  4. Марат

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

  5. Иван

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

  6. kody

    Ошибочка: ….чтобы она вам понраВИЛСЯ… тогда знайте…..

  7. Александр

    Отличная статья.
    читал и смотрел с удовольствием.

    Молдцы ребята!

  8. Vadim Shariy

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

  9. Людмила

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

    • RohViktor

      Мы будем очень рады, если Вы будите рекомендовать данную статью!

      Спасибо, за Вашу внимательность и преданность нашему проекту.

      Для меня это очень хороший подарок в мой день рождения;)

      • Александр

        Затвитил статью.

        А Вас, Виктор, с Днём Рождения!

      • Людмила

        Добрый вечер, Виктор. Благодаря Вашей очередной информации узнала о празднике. Поздравляю Вас с Вашим днем. Пусть в Вашей жизни будут только ясные, счастливые и радостные дни, а удача станет Вашей постоянной спутницей. Спасибо Вам и Вашей команде за такую информацию. Если я достигну хороших результатов в своем деле, не без Вашего участия. Будьте здоровы, живите богато, дарите радость от хаты до хаты!

  10. Владимир

    Спасибо, Андрей и Виктор! С удовольствием читаю ваши материалы!!!

  11. Владимир

    Виктор с Днём Рождения! Счастья и Успеха во всем!!!

  12. Алексей

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

  13. Михаил

    Отличная статья!!! Обязательно учту советы при создании своего сайта(все никак не могу родить)))) Ну и С ДНЕМ РОЖДЕНИЯ!!! Успехов во всех начинаниях!!!

  14. Галина Шибанова

    Андрей и Виктор!
    Спасибо за статью. Вы ведь рассказали не только об условиях качественного дизайна блога, но и необходимости каждому из нас развивать возможности своего мозга. О чем я? Детали видит наше левое полушарие, а образ целиком — правое. К большому сожалению, правополушарных людей значительно меньше (не они в этом повинны), а тех, у кого оба полушария развиты в равной степени… Вы побуждаете нас быть гармоничными.
    Как редко встретишь таких авторов на «просторах интернета»!
    С уважением, Галина Шибанова.

  15. TRSteep

    С теорией понятно…. побольше бы примеров на «живых» сайтах

  16. Анрей

    Спасибо ! Очень интересная статья . Прочитал с большим удовольствием !

  17. Виктор

    Увы, видеть картину в целом, дано далеко не каждому. Это как в шахматах — видишь всё поле или один участок. Поэтому, ИМХО, желательно вычленять ключевые места более явно. В конце-концов, люди в сеть приходят не на один дизайн посмотреть.

    • Олег

      Это все из серии «Встречают по одежке, а провожают по уму».
      Вот представьте: заходит в магазин дорогой одежды человек в одежде ниже среднего, кто на него обратит внимание?, пока он не достанет из кармана «пресс» и не попросит переодеть его. К сожалению бывает и наоборот. Поэтому все в меру должно быть. И креативный дизайн, что бы задержать посетителя, и качественное наполнение, чтобы посетитель остался сейчас и еще вернулся в следующий раз.

  18. Виталий

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

  19. Степан

    RE: ..Уважаемый, Виктор Рог! С Днём Рождения, Вас!

  20. Наталья

    Господа разработчики, статья отличная! Спасибо!
    У меня возникло желание поделиться ею с друзьями на Twitter & Facebook, но я не смогла это сделать, и Вы знаете почему. Не проработаны детали, и очень существенные.
    Желаю успехов!

  21. Олег

    Да! Действительно статья полезная.

  22. Олег

    Честно говоря мне очень понравилось. Картинки прикольные и впечатляют. Смысл понятен.
    Виктора с Днем Варенья!:))))))))))))))))

  23. Вадим

    Статья супер-важная. Виктор, с днём рождения!

  24. Света

    Почитайте лучше «Ководство» Лебедева. Нельзя научить обезьяну создавать эффективный дизайн. Это как вкус, на него можно повлиять, но нельзя развить. Чувство вкуса либо есть, либо его нет.
    Бесполезная статья.

    • RohViktor

      Ваша точка зрения вполне имеет право на жизнь, но все же некоторые правила никто не отменял!

    • Надежда

      Чувство вкуса можно и нужно развивать!!! Знаете что такое талант? Совсем немножко способностей и огромный труд. Так и чувство вкуса. Оно воспитывается созерцанием шедевров искусства. Труд немалый, но все возможно.

  25. Светлана.

    Статья понравилась.Познавательно.

  26. Виктор

    Собираетесь что то продавать с сайта или покрасоваться?

  27. Елена

    Отличная статья. Спасибо большое. Очень просто, доступно и интересно написано.

  28. Вадим

    Статья супер, спасибо за полезную инфу.

  29. Максим

    Классная статья, много нового для себя открыл!

  30. Александр

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

  31. Екатерина

    Легко читается и всё понятно даже тому, кто в дизайне не на высоте. И главное запоминается -так много поясняющих картинок.

  32. Ринат

    Замечательная статья! Мне, как «технарю», очень интересно было почитать!

  33. Галина

    Спасибо! Полезная и приятная статья.

  34. Владимир

    Есть , конечно, интересные моменты, но на теорию, по-моему, статья не тянет.

  35. Русаков Вячеслав

    Отличная статейка. Спасибо автору. Взял основный принципы себе на заметку ))

  36. Алексей

    Классная статейка!!! огромное спасибо! много что интересного узнал!

  37. Максим

    А мне не понравилось. Не нашел ничего существенного. Значение дизайна преувеличивается. Это как с книжкой, имеющей бесценную пользу- в ней заложен некий смысл, а картинок и узоров может и не быть совсем. Инет переполнен всякими «пестрыми» сайтами с бегущими строками, мерцающими картинками, всплывающими окнами и т.д. Они красивые, профессиональные, но пользы от них нет никакой. Телевизоры- это «зомбоящики» и интернет- это то же самое, за некоторыми исключениями. Люди «виснут» там и сами не понимают, зачем. Живой мир искусственным не заменишь.

  38. Николай

    Отличная статья! Спасибо!

  39. Лев

    Статья отличная!
    Правда на второй паре рисунков женщина смотрит в одну сторону!
    И, конечно, с Днем Рождения! Здоровья и Энтузиазма!

  40. Андрей

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

  41. Игорь

    Спасибо, действительно интересно и полезно.

  42. Михаил

    Полезный и наглядный совет, бывает тянешь из заказчика, что же ему не наравиться, и никак не поймёшь, а он сам толком объяснить не может

  43. Ольга

    Плиз, плиз, подскажите, что за яйцо такое шоколадное, кто производитель?

  44. Dima

    Спасибо! Хорошие наглядные примеры.

  45. Надежда

    Спасибо за статью!

    У Вас там ошибочка)) «все равно, чем вы его наполните, дизайн всегда останется в формУ яйца, как вам и было нужно» — в формЕ яйца
    =)

    Там писали про неважность дизайна сайта. А это далеко не так. Дизайн сайта — это визитная карточка фирмы, ее лицо. Оттого насколько приятен и грамотен сайт, зависит имидж фирмы. Много раз видела сайты из серии «на заре становления веб-дизайна» — в такие фирмы обращаться не хочется, даже до портфолио не дохожу. Если такой ужасный сайт, дающий ассоциации с сельским клубом, то какого уровня услуги могут предложить? Создается впечатление что ровно такие же — все по шаблончику, без души и без современного подхода. Сюда входят и сайты с переизбытком дизайна и сверканием по всему экрану — это уже безвкусица.
    Дизайна должно быть не много и не мало, ровно столько, чтобы захотелось ознакомиться с разделами)))

    Еще раз спасибо за Ваши рассылки и статьи! =)

  46. Богдан

    Это вообще в тему! Реальный совет, абсолютно правы как с моей стороны!
    СПАСИБО!!!

  47. Мария

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

    Мария, дизайнер-иллюстратор, более 5 лет опыта работы в данной области.

  48. Волокитина Татьяна

    Я тоже прочитала с интересом. Спасибо за статью!

  49. Нина

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

  50. Артем

    Класс — стоящая статья! Не много текста и по существу — я похоже для себя уяснил, то чего не мог понять так долго. Спасибо огромное!

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