Клиенты покупают у тех, кто вызывает у них доверие. Дизайн сайта, разработанный профессионалом это доверие вызывает. В этой статье мы расскажем, как малозначимые на первый взгляд детали оформления веб-ресурса сигнализируют пользователю «Это серьезные профессионалы, с ними можно иметь дело!». А поможет нам в этом старый добрый принцип дизайна — единообразие.
Почему так важно соблюдать единство стиля в дизайне сайта
В интернете полно шикарных шаблонов сайтов. Некоторые из них можно недорого купить, а другие и вовсе скачать бесплатно. Тем не менее, серьезные предприниматели обычно заказывают разработку дизайна сайта непосредственно под свой проект. И тут речь идет не об амбициях, а о трезвом расчете.
Стоит любителю скачать понравившийся шаблон сайта, добавить логотип своей компании, фотографии и другой контент, как изначальное очарование шаблона куда-то пропадает. Вроде все аккуратно, да вот что-то «не то». Причина проста — занимающийся созданием веб-ресурса любитель не учел принцип единообразия.
Суть этого творческого правила разработки дизайна сайта сводится к следующему — визуальные элементы должны быть объединены какими-то общими, повторяющимися особенностями. Только так дизайн будет восприниматься как нечто гармоничное и целое. Единообразие в дизайне может проявляться в повторении:
- геометрических фигур;
- цветов и их сочетаний;
- изгибов и толщины линий;
- фактуры и т. д.
И вот тут-то возникает загвоздка с «шаблонным сайтом». О каком единстве стиля может идти речь, если втиснутый в шапку логотип не имеет ничего общего с оформлением шаблона сайта, а иллюстрации понадерганы из разных фотосессий, иногда даже без наложения фильтров в профессиональных графических редакторах!
Именно поэтому сначала создается фирменный стиль компании и уже затем, отталкиваясь от него, проходятся этапы разработки дизайна сайта. Ну а если Заказчик не стал заморачиваться созданием фирстиля, отправной точкой для творчества веб-дизайнера может послужить логотип.
Разработка веб-дизайна — реальный кейс
А теперь давайте разберем это на примере из реальной жизни.
Обратился к нам недавно дистрибьютор лабораторного и производственного оборудования. Сайт требовался срочно. Дали нам всего две недели, однако в процесс совершенно не вмешивались. Это позволило нашим дизайнерам проявить свой профессионализм в полной мере, не размениваясь на реализацию непредвиденных «хотелок» клиента, которые часто разрушают саму суть изначального дизайнерского замысла. В итоге Заказчик получил веб-ресурс, разработанный в жестком соответствии с принципом единообразия и других правил дизайна. Это сайт компании Labomet, доступный для ознакомления в нашем портфолио.
Первым делом мы разработали логотип. Поскольку компания работает с новейшим высокотехнологичным оборудованием, мы решили использовать шрифт без засечек. Он выглядит современно и не «грязнит» даже на самых маленьких мониторах.
Логотип решили использовать комбинированный, то есть, включающий в себя и текстовое начертание названия компании, и иконку. Иконку поместили внутрь надписи, заменив ею букву «о».
Почему в качестве графического символа мы выбрали правильный шестиугольник, который часто называют гексагоном? Этот символ ассоциируются у большинства людей с точной наукой еще со времен школьных уроков химии.
Учитывая то, что наш Заказчик продает точное высокотехнологичное оборудование, ассоциации с выверенностью научных формул нам очень кстати!
Крупный шрифт логотипа хорошо читается, надпись легко рассмотреть даже при нанесении на самые малогабаритные носители.
Стиль созданного логотипа стал для нас отправной точкой в разработке дизайна всего сайта. Разберем, в чем это проявилось:
Номер актуального слайда выделен в форме гексагона.
В иконках, как и в кнопках, задействован тот же насыщенный синий цвет, что и в логотипе. Несмотря на то, что эти иконки совершенно непохожи друг на друга, в каждой из них можно рассмотреть очертания того же гексагона:
1. в драгоценном кубке, увенчанном лаврами;
2. в выноске с речью сотрудника колл-центра;
3. в группе изображений, символизирующих экспертный инжиниринг;
4. на кузове корпоративного авто;
5. в схематичном изображении шестеренки;
6. на экране корпоративного компьютера.
Обратите внимание на 3-ю иконку (экспертный инжиниринг). Казалось бы, она состоит из нескольких элементов, совершенно не подразумевающих гексагон. Тут кисть руки, три кружка с лицами людей и несколько входящих и исходящих линий. Однако, нетрудно заметить, что в их взаимном расположении все равно вырисовывается хорошо знакомый нам шестиугольник.
Тот же гексагон появляется в качестве кнопки, запускающей видео о компании:
В притягивающей взгляд иконке около номера телефона:
И в качестве фавикона в истории посещений вашего браузера:
По всему сайту мы используем тот же цвет, что и в логотипе, насыщенный ярко-синий. Это не только непосредственный цвет кнопок и иконок, но и подсветка некоторых элементов при наведении на них курсора. Это консервативное решение для корпоративных сайтов. Синий цвет — один из наиболее любимых людьми цветов, согласно исследованиям. Кроме того, он настраивает на успешное решение деловых вопросов, что уместно для сложных корпоративных закупок лабораторного и производственного оборудования (сфера деятельности Заказчика сайта).
Некоторые мелкие элементы мы выделяли изумрудным цветом. Этого сочетания — ярко-синий (vivid blue) + немножко изумрудного (emerald) мы неизменно придерживались при разработке дизайна сайта для этого Заказчика.
К слову, это модное и «незаезженное» цветовое сочетание, нашедшее признание не только в технологической отрасли, но даже и в индустрии красоты.
Вот так достигается стилистическое единообразие. Простые, но элегантные решения требуют от дизайнера не только выдумки, но и последовательности.
Другие принципы разработки дизайна сайта
Конечно, при разработке дизайна сайта «под ключ» мы руководствуемся не только правилом единообразия, то и другими принципами. Такими, как:
- баланс — уравновешивание визуальных объектов в рамках композиции;
- ритм — повторение элементов в предсказуемых шаблонах, в т. ч. с приданием ощущения движения;
- акцент — сосредоточение внимания наблюдателя на самом главном;
- выравнивание — придание элементам упорядоченного расположения относительно друг друга;
- контраст — совмещение противоположностей для придания выразительности.
Однако, каждый из этих принципов достоен отдельной статьи.
Мы пробежимся лишь по еще одному из них, контрасту. Казалось, бы разве он не противоречит принципу единообразия, который мы тут так прославляем?
Вовсе нет. Тут речь скорее о чувстве меры. Если вы зациклитесь на единообразии, то рискуете получить скучноватый дизайн сайта. Есть такая особенность человеческой психики: когда все одинаковое и ничего не меняется, мозг начинает «засыпать». А это явно не то состояние, в котором потенциальный клиент должен ознакомляться с аргументами в пользу покупки вашего товара. Поэтому, одновременно с соблюдением общей стилистики, важно обеспечивать глазам и мозгу пользователя некую «встряску».
В общем, элементы должны быть либо одинаковыми (единообразие), либо сильно отличаться друг от друга (контраст).
Учитывать такие тонкости сейчас важно как никогда. Современный интернет-пользователь искушен и избалован. Никогда еще люди не сталкивались с работой профессиональных дизайнеров так часто в своей повседневной жизни. Из-за этой «наметанности» глаз даже люди, малознакомые с законами дизайна легко отличают профессиональный дизайн от самоделок.
А по мнению экспертов международной консалтинговой компании McKinsey & Company, предприятия, пользующиеся услугами профессиональных дизайнеров в целом являются более коммерческими успешными.
Обратившись к нам, вы можете быть уверены, что разработка дизайна сайта будет осуществляться в соответствии с теорией и трендами современного дизайна!
Комментарии