Чт

23

янв

2014

Гармония визуального стиля

Гармония визуального стиля

В процессе планирования внешнего вида сайта приходится принимать во внимание множество аспектов и деталей. Разумеется, можно и не заострять внимание на мелочах, но мы позволим себе надеяться на то, что вы хотите сделать хороший web-сайт, а подход “и так сойдет” оставите конкурентам.

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

Графика

Самой распространенной ошибкой начинающих является использование совершенно разной по своим свойствам графики в рамках одного и того же сайта. Из соображений “я одену все лучшее cразу”, на сайте появляются и плоские плашки, и трехмерные выпуклости, и объекты с тенями, и пространственные многоплановые фотографии, и “вдавленные” заголовки. Сваленные вместе совершенно несовместимые друг с другом графические элементы никогда не создадут у посетителя впечатление того, что перед ним сайт серьезного человека, зато точно оставят ощущение гнезда сороки, куда запасливая птица снесла все блестящее, сверкающее и переливающееся, что смогла найти. Дело в том, что многие считают, что если им нравится какое-то изображение само по себе, то оно непременно украсит их сайт, тогда как в большинстве случаев получается прямо противоположный эффект.

Так что же делать? Единожды выбрав “фирменный стиль” для своего сайта, ни за что и никогда от него не отходите. Не смешивайте плоские и объемные элементы. Если у вас весь сайт плоский, то новый элемент оформления с объемом и тенью будет выглядеть абсолютно чужеродно — в точности как плоский объект на сайте, построенном из объемных элементов. Соблюдайте последовательность: если вы решили, что под основными элементами оформления будет тень, то тень должна быть под всеми — особенно родственными друг другу — основными элементами. Постарайтесь не делать никаких исключений и увидите, что ваш сайт начинает обретать ранее неизвестную ему гармонию.

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

Фотографии

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

В минималистичном дизайне интернет-магазина fruity-market.ru использованы качественные изображения фруктов и овощей.
В минималистичном дизайне интернет-магазина fruity-market.ru использованы качественные изображения фруктов и овощей.

Заголовки и шрифты

Текст – это один из главных элементов сайта, поэтому вся информация должна иметь безупречный и легко читаемый вид. И в основе этого вида снова лежат единство и гармония. Старайтесь не смешивать шрифты с засечками и без засечек, так как это довольно редко выглядит гармонично, и если вы не хотите ошибиться, лучше использовать либо то, либо другое. При этом старайтесь ограничиться одним-двумя шрифтами. Если вы захотите выделить цветом заголовки и подзаголовки, следите за тем, чтобы цвет текста был контрастен к цвету основного фона.

Больше информации по этой теме вы найдете в наших рекоменданиях по использованию шрифтов, а также 10 правилах написания текстов для сайта.

Сторонние виджеты

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

Надеемся, эта статья натолкнет вас на множество интересных и творческих идей и поможет улучшить ваш сайт!

Если у вас есть вопросы к дизайнеру, задайте их в комментариях! Мы постараемся рассказать о том, что вас интересует, в следующий раз.

Команда Jimdo

Комментарии: 27 (Дискуссия закрыта)
  • #1

    Владислав (Четверг, 23 Январь 2014 16:55)

    Спасибо!!! Без сомнения, полезная информация!)

  • #2

    leskdk (Четверг, 23 Январь 2014 17:24)

    спасибо!

  • #3

    liberta-decor (Четверг, 23 Январь 2014 17:52)

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

  • #4

    bazaadmiral (Четверг, 23 Январь 2014 17:58)

    "Если у вас весь сайт плоский, то новый элемент оформления с объемом и тенью будет выглядеть абсолютно чужеродно — в точности как плоский объект на сайте, построенном из объемных элементов" (отгадка - браузер).

  • #5

    Ольга Бурачкова (Четверг, 23 Январь 2014 18:11)

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

  • #6

    Иван (Четверг, 23 Январь 2014 18:31)

    как просто в 5 абзацев закрыть многовековую дискуссию о гармонии визуального стиля )) молодцы

  • #7

    musicantam (Четверг, 23 Январь 2014 18:48)

    Если пройтись по Российскому интернету, то может показаться, что 80% владельцев сайтов не знают даже таких основных вещей, о которых идёт речь в статье.

  • #8

    Сендерова Ольга (Пятница, 24 Январь 2014 04:09)

    Спасибо! Для меня, как новичка, очень полезная информация.

  • #9

    Бетон Краснодар (Пятница, 24 Январь 2014 15:39)

    Спасибо. Статья полезная, но наверное это не касается дизайнов строительных фирм. У нас должно быть все строго, лаконично.

  • #10

    Ирина (Пятница, 24 Январь 2014 19:35)

    Спасибо, стараемся, чтобы посетителю было комфортно.

  • #11

    adacoco (Пятница, 24 Январь 2014 20:56)

    спасибо

  • #12

    OrfoSchool 2014 Administration (Суббота, 25 Январь 2014 13:25)

    А я придумал, как сделать на своём сайте рекламу (не анимационную)! Берёшь фотку, Пишешь, например: "Майнкрафт-онлайн! Бесплатно!" или "Хочешь найти друзей? Кликай!" и вставь ссылку! Готово!
    (Хотя, у меня получилась анимационная после Google Фото!)

  • #13

    OrfoSchool 2014 Administration (Суббота, 25 Январь 2014 13:26)

    А где взять виджеты?

  • #14

    OrfoSchool 2014 Administration (Суббота, 25 Январь 2014 13:35)

    А персик подходит! Скопировал со страницы, убрал рамку в Photoshop, прелесть!

  • #15

    Павел Чуприков (Суббота, 25 Январь 2014 16:04)

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

  • #16

    historybrands (Воскресенье, 26 Январь 2014 00:40)

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

  • #17

    closedspace (Воскресенье, 26 Январь 2014 02:46)

    бю

  • #18

    Андрей (bekass-design) (Воскресенье, 26 Январь 2014 16:00)

    Бетон Краснодар (Пятница, 24 Январь 2014 15:39)
    Спасибо. Статья полезная, но наверное это не касается дизайнов строительных фирм. У нас должно быть все строго, лаконично.
    .......................................................................
    Вот тут вы не совсем правы. Лаконично-это не значит в дизайне строго. Надо делать стильно. Ну если конечно вы придерживаетесь старинных догм...


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

    Добавлю, что в скриншоте сайта, эффект тени можно делать на Джимдо. http://j-user.ru/ свежий пост.

  • #19

    Белкельме (Воскресенье, 26 Январь 2014 19:31)

    спасибо, полезно!

  • #20

    uriga (Вторник, 28 Январь 2014 04:34)

    лучшие шрифты

  • #21

    varfolomei (Четверг, 30 Январь 2014 11:16)

    Спасибо большое!
    Мне доставляет радость и удовольствие
    принимать Ваши новые предложения и использовать дизайн)))
    С теплом и уважением, Ваш Варфоломей)))

  • #22

    Зебуниссо (Пятница, 31 Январь 2014 09:23)

    Спасибо очень ценная информация!!!!

  • #23

    Мир Рассказов (Четверг, 06 Февраль 2014 10:46)

    Классно!

  • #24

    ПВСИиК (Четверг, 06 Февраль 2014 10:46)

    А что такое "Кнопка" вверх?

  • #25

    Jimdo-Team (Четверг, 06 Февраль 2014 12:40)

    ПВСИиК, в данном вопросе вам поможет наша статья по ссылке:
    http://ru-help.jimdo.com/настройки/веб-страница/кнопка-наверх

  • #26

    poselok-rostov (Понедельник, 24 Февраль 2014 19:23)

    Спасибо!!!!!!!!!!!!!!
    Все очень хорошо и понятно описано.

  • #27

    Наталия (Суббота, 08 Март 2014 23:22)

    Написано хорошо доступно и понятно