19 апреля 2016 г. Примеры хорошего веб-дизайна
Профессиональный дизайн хорош не сам по себе, а только когда он соответствует задачам сайта. Он должен не столько привлечь, сколько удержать внимание нужного пользователя. Люди будут игнорировать дизайн, который игнорирует людей. В этой статье мы приводим примеры дизайна веб-сайта и рассказываем о последних тенденциях в этой сфере.
Советы по дизайну для успешного сайта
1. Наличие стратегии. Каким бы красивым не был сайт, если пользователю непонятно его предназначение, он полюбуется и уйдет, так ничего и не купив. Поэтому дизайн должен четко говорить посетителю о том, куда он попал, что здесь можно сделать и почему стоит задержаться.
Например, вот сайт магазина Tessemae’s, который продает приправы:
На нем представлены фото продукции, варианты сервировки и использованы яркие цвета, которые ассоциируются с чем-то острым. Посетителю стразу становится понятно, что за продукт ему предлагают приобрести.
А вот пример из сферы услуг — современный сайт архитектурно-строительной компании Kephart:
В дизайне выше используются качественные фотографии строений и людей, сочетание которых создает ощущение жилых помещений, а не просто холодной архитектуры.
2. Удобство использования. Юзабилити охватывает множество параметров, от скорости загрузки до удобства навигации и наличия поиска. Мы уже писали о принципах веб-дизайна интерфейса пользователя, но вот короткая выжимка:
- Знайте уровень своего пользователя (сайт, с помощью которого можно строить математические модели будет сильно отличаться по интерфейсу от онлайн-магазина с одеждой).
- Используйте уже известные модели (если пользователь не поймет, как пользоваться меню сайта, то он вряд ли уделит время его содержимому).
- Создавайте визуальную иерархию (покажите пользователю, что самое важное и четко разделяйте блоки текста, чтобы упростить просмотр).
- Не усложняйте (если что-то можно сделать еще проще — делайте).
Например, Wunderlist использует значки и принципы, которые знакомы пользователям по почтовым (перетаскивание дел в списке, inbox, чат) и офисным приложениям и календарям (оповещения, сортировка), а также стандартное для бумажных списков вычеркивание выполненных дел:
3. Наличие стиля. Хороший сайт соответствует уже существующим маркетинговым материалам компании, корпоративным цветам и ценностям. При этом на нем соблюдаются законы композиции и разумно использоваться пустое пространство. Он пробуждает у пользователя необходимые чувства: надежности, радости, уверенности, сострадания — в зависимости от целей компании.
Например, на сайте Starbucks использован фирменный оттенок зеленого и черный — цвет основного напитка, который компания продает в 67 странах мира:
4. Качество контента. Оно состоит из двух показателей: читабельности полезности. Если полезный контент будет нечитабельным, то пользователь никогда не узнает, насколько он был ценным. В то же время неинтересное наполнение, которое не несет пользы, не спасет даже самый лучший дизайн.
5. Можно ли доверять этому сайту? Корпоративный сайт, где в качестве средства связи указан только адрес электронной почты, вызывает недоверие у пользователей. Блоги, об авторах которых ничего не известно, кажутся ненадежными. Магазины, которые не рассказывают ничего о способах оплаты и доставки не получают заказов. Поэтому проверьте:
- Понятно ли, кому принадлежит сайт?
- Заметен ли логотип компании?
- Предоставляются ли подробные контактные данные: почтовый адрес, карта проезда, время работы, номера телефонов, адрес электронной почты.
- Есть ли на сайте раздел, посвященный сотрудникам компании? Наличие такого раздела создает ощущение уже состоявшегося знакомства.
- Имеются ли на сайте отзывы клиентов и портфолио?
- Что известно об истории компании? Как давно она существует? Кто основатель? Кто инвесторы? Какие у компании цели?
- Есть ли сведения о гарантийном возврате и обслуживании? Условиях использования и политике конфиденциальности?
На сайтах всех известных компаний имеются элементы, которые свидетельствуют об их надежности. Например, вот фрагмент сайта официального магазина Hewlett-Packard, в футере которого присутствуют все нужные ссылки, касающиеся условий использования, конфиденциальности пользователей, гарантийного обслуживания и повторной переработки продукции:
Также пользователю сразу показывают стоимость техники — это вызывает доверие.
Последние тенденции в дизайне сайтов
Кроме соблюдения перечисленных выше требований стоит учитывать актуальные тенденции веб-дизайна и использовать те из них, которые применимы в конкретном случае. Что же популярно сейчас?
Адаптивность
Если раньше для выхода в Интернет использовались только ПК и ноутбуки, то сейчас устройств с экранами разных размеров гораздо больше: смартфоны, планшеты и носимые девайсы. Чтобы пользователям этих устройств было комфортно просматривать сайт, стоит подумать о применении адаптивной верстки:
Плоский дизайн
Плоский дизайн сохранит позиции, поскольку ориентируется на конечного пользователя. Для него характерны простота, отсутствие лишних эффектов и несложная типографика:
Использование анимации и видео
Фоновые видео и анимация используются с целью сделать сайт более живым и интерактивным. Вот пример на странице нашего IT-ивента:
Распространение UI-паттернов
С появлением одностраничных веб-приложений, сайты становятся более унифицированными. Многочисленные примеры веб-дизайна свидетельствуют о широком распространении меню-гамбургера, короткой формы регистрации, входа с помощью аккаунтов в социальных сетях, длинной прокрутки и других. Например, вот окно регистрации, ставшее уже стандартным:
Чтобы понять, можно ли следовать той или иной тенденции, спросите себя:
- Повлияет ли она понимание цели сайта?
- Усложнит ли новый дизайн навигацию?
- Помешает ли она пользователям выполнять действия с сайтом? (Например, регистрироваться или оставлять отзывы.)
- Способна ли она исказить имидж бренда?
Мы надеемся, что приведенные в этой статье идеи для дизайна сайта электронной коммерции помогут вам определиться, что бы вы хотели видеть на сайте своей компании.
Заказывая мобильное приложение или сайт у студии stfalcon.com, вы получаете дизайн, который будет радовать клиентов и работать на ваш бренд.
Вам также может понравиться
Гайд по процессу разработки проекта с командой Stfalcon
Принципы веб-дизайна интерфейса пользователя
10 самых распространенных ошибок веб-дизайна
Примеры дизайна сайтов: 10 источников вдохновения для владельцев бизнеса
Если вы решили заказать разработку веб-сайта или лендинга, в брифе обязательно будет пункт с пожеланиями по дизайну. Ориентируясь на приведённые вами примеры, дизайнер сможет подбирать стилистику сайта.
Но где взять эти примеры? Смотреть сайты конкурентов — хорошая идея, но только для того, чтобы взять оттуда функционал. Копировать дизайн конкурентов точно не стоит — лучше, наоборот, отстроиться от них, если нет обратной задачи.
Но проблема в другом: если ориентироваться на сайты конкурентов или блуждать по сайтам в поисках более-менее вменяемого дизайна — можно и не найти ничего симпатичного. А чтобы найти самые трендовые и современные примеры дизайна, лучше искать в других источниках.
В статье поделимся с вами своими источниками вдохновения для будущего дизайна сайта.
Где брать примеры дизайна сайта?
Прежде чем мы начнём перечисление источников, хотим еще сделать одно уточнение: не обязательно подбирать примеры из вашей сферы. Потому что дизайнер возьмет из примера только стиль подачи информации, пример оформления, а тематика может быть любая.
Если у вас бетонный завод, можно подбирать примеры даже из бьюти-сферы — если попадется удачный пример. 🙂
1. «Золотой сайт» и «Золотое приложение»
Премия «Золотой сайт» и «Золотое приложение» проводится каждый год. Жюри на основании критериев анализирует и отбирает лучшие сайты и приложения за прошлый год.
Хороший дизайн не стареет — можно посмотреть сайты и более поздних лет.
2. Tagline Awards
Премия «Tagline Awards» — крупнейший digital-конкурс в Европе, как они сами пишут о себе. Отбираются не только проекты по веб-дизайну, но также и в других номинациях: чат-боты, сайты агентств, интранет-порталы, рекламные кампании и креатив и другое. Заходите посмотреть лучшие решения в индустрии.
3. Tilda Publishing
Сервис Tilda собирает лучшие примеры сайтов и одностраничников, сделанных на их платформе. Сайты разбиты по категориям: бизнес, события, медиа, портфолио и другие. Загляните туда, вдруг вам что-то приглянется для своего проекта.
Больше статей на схожую тематику:
- Лендинг для B2B и B2C: 7 глобальных отличий, которые важно учесть при разработке
- 10 эвристик юзабилити от Якоба Нильсена
- 6 способов определить шрифт на картинке
4. Рейтинг Рунета
«Рейтинг Рунета» с 2011 года проводит конкурс на лучшие сайты и приложения среди отечественных студий. Вы можете посмотреть итоги прошлых лет, номинантов в этом году, а если результаты уже подведены, то и победителей. Среди выставленных работ есть возможность подобрать референсы для вашего сайта.
5. Кириллица Дизайн
Сайт «Кириллица Дизайн» собирает интересные решения в веб-дизайне среди отечественных сайтов. Здесь представлены более экспериментальные примеры сайтов, чем в предыдущих источниках.
6. Land-book
Галерея Land-book — еще один источник, где вы сможете подобрать дизайн-концепцию для своего сайта. В отличие от других галерей, здесь собраны не только сайты на русском языке, но и зарубежные примеры.
7. Behance
На портале Behance дизайнеры со всего мира публикуют работы в разных стилях, а модераторы площадки отбирают лучшие, организуют их в галереи с соответствующим названием. Заходите и выбирайте примеры стиля вашего будущего сайта.
8. Uprock
Сайт Uprock собирает библиотеку кириллических сайтов с удачным дизайном. Сейчас доступно уже более 300 сайтов на русском.
9. The FWA
Проект The FWA отбирает лучшие сайты каждый день. Если вы хотели чего-то нестандартного — заходите и выбирайте удачные примеры.
10. Awwwards
И последний сайт Awwwards.com тоже собирает необычные примеры сайтов в разных стилях со всего мира. Плюс этого сайта — в удобном фильтре: сайты можно отфильтровать по цвету, направлению или стране.
Грамотная разработка дизайна сайта: выбираем визуальный стиль
В идеале подобранные вами референсы должны быть в одном или близком стиле. В веб-дизайне так же, как в интерьерном и ландшафтном, есть свои стили.
Стиль — это набор характерных, узнаваемых черт дизайна.
Из популярного можно перечислить: материал-дизайн, флэт-дизайн, скевоморфизм, классический (обычный), минимализм, брутализм и другие.
Стиль «скевофорфизм» по оформлению подражает объектам из реального мира. Был популярен примерно до 2012 года.
Когда скевоморфизм устарел, на смену ему пришла полная противоположность — flat design (плоский дизайн). У элементов полностью пропал объём, дизайн стал плоским.
Затем безликий flat design заменил material design от Google. В материал-дизайне осталось лучшее от флэт-дизайна, но вернулись тени и объем.
Дизайн в стиле «минимализм» обнажает функционал сайта, лишая его всяческих украшений, но зато создает ощущение чего-то простого, понятного и доступного.
Классический стиль — это те самые корпоративные сайты, которые мы привыкли видеть каждый день.
«Брутализм» — новый стиль, который пришел на смену аккуратным интерфейсам. Брутализм экспрессивен и не будет уместен для корпоративного сайта или блога, но хорошо подойдет для PR-акции или рекламы.
Если подобранные вами примеры сайтов в одном стиле, тогда дизайнеру будет легче работать, но если примеры в разных стилях, в таком случае дизайнеру придется выбрать один из них — максимально подходящий вашему бренду.
Не получится сделать сайт одновременно в нескольких стилях. Да, иногда можно смешать элементы из разных стилей, но есть и те, которые абсолютно невозможно увязать друг с другом в рамках одного проекта.
Нравится статья? Тогда смотрите наши курсы!
- Мини-курс «Создаем сайт, который будет продавать 24/7»
- Курс «Сайт на Тильде с нуля»
- Мини-курс «Дизайн и юзабилити»
Почему важно подбирать антипримеры и примеры дизайна сайта
Если вы заполните только бриф на разработку сайта и не приложите примеры и антипримеры для дизайна — тогда дизайнер подберет их сам, ориентируясь на свой вкус и на вашу задачу.
А если подобранный визуальный стиль вам не понравится — будет затрачено время на доработку сайта. И вам всё равно придется подбирать примеры, чтобы объяснить дизайнеру, какой стиль всё-таки вам ближе.
Поэтому лучше изначально подобрать примеры сайтов, так вы убьете сразу двух зайцев: существенно сэкономите время обеим сторонам и сможете говорить с дизайнером на одном языке, а значит, гарантированно получите то, что представляли.
Антипримеры
Кроме примеров, также важно приложить антипримеры. Антипример — не значит сайты с плохим дизайном, антипример — это стиль, который не подходит для решения вашей задачи.
Например, мы разрабатываем одностраничный сайт для ювелирного салона. В дизайне таких сайтов часто используются тонкие линии либо шрифты с засечками, потому что они задают нужное настроение дороговизны и эксклюзивности.
Но если вы например не хотите на сайте видеть антикву (шрифт с засечками), то стоит приложить сайт, где она используется, как антипример.
Примеры и антипримеры — это рамки, которые вы задаете дизайнеру для того, чтобы он знал в каком направлении работать.
UI-kit, как ориентир для дизайнера
Если вы внимательно смотрели предыдущие изображения с типичными стилями веб-дизайна, то наверняка заметили не сайт, не приложение, а просто набор элементов — это называется UI-kit.
UI-kit — это набор готовых и оформленных элементов, которые дизайнеры используют в работе.
Фишка в том, что UI-kit уже оформлен в определенном стиле! И вы можете поискать в поисковике вместо примеров сайта — UI-kit`ы, они вполне сойдут в качестве ориентира для дизайнера.
Увидев UI-kit, опытный дизайнер без труда определит, в каком стиле вы хотите дизайн.
Примеры роста кликов, конверсий, заказов и прибыли:
- Комплексный дизайн сайта с нуля для косметологической клиники
- Продающая страница для компании по продаже коммерческого транспорта
- Интернет-магазин с Индивидуальным дизайном
Вместо послесловия
Теперь вы знаете, где искать примеры для вдохновения, чтобы дизайн будущего сайта целиком и полностью отражал концепцию и идею вашего бренда и продукции.
А если вы уже подобрали примеры, обращайтесь к нам за разработкой сайта или лендинга, мы регулярно тренируем насмотренность, чтобы создавать для вас современные и удобные сайты.
12
1
0
0
0
Спасибо за реакцию, она бесценна! Обязательно подпишитесь на наш Telegram-канал, публикуем много интересных и актуальных материалов. Не пользуетесь Telegram, тогда познакомьтесь с Катей и подпишитесь на нашу рассылку. ×
9 критериев для оценки дизайна сайта: чек-лист
Вы решили создать свой сайт и заказали дизайн у профессионала. Следующий шаг — дать обратную связь по макету, который дизайнер пришлёт вам на согласование. Но не стоит оценивать визуал, ориентируясь только на собственные впечатления.
Наши коллеги из Travelpayouts, дизайнер Анвар Ризаев и проджект-менеджер Даниил Калекин, рассказали о 9 критериях, которые помогут оценить дизайн от специалиста, даже если вы никогда не занимались визуалом. Большая часть советов универсальна — относится не только к сайтам, но и к постам в социальных сетях, рекламным креативам и баннерам.
поделиться
Дизайн понятен целевой аудитории
Рекламный креатив попадёт точно в боль потребителя, а сайт – в его задачи, только если вы знаете свою целевую аудиторию.
Перед началом работы поделитесь с дизайнером своими исследованиями ЦА. Чтобы при создании визуала он учитывал желания, потребности, образ жизни читателей и потенциальных клиентов.
Когда вы будете принимать макет сайта, подумайте, как ваша аудитория отнесётся к дизайну. Например, люди, которые почти не сидят в социальных сетях, вряд ли смогут понять мемы. А активные интернет-пользователи с радостью воспримут шуточное оформление сайта или поста.
Внимание пользователя сконцентрировано на самом важном
Пользователи ежедневно посещают десятки разных сайтов, видят сотни публикаций в соцсетях и рекламных баннеров. Поэтому дизайн должен быть таким, чтобы человек мог сразу концентрироваться на вашем посыле.
Множество визуальных элементов в дизайне, которые не несут смысловой нагрузки, отвлекают внимание от конверсионных кнопок, призывов к действию и партнёрских инструментов.
Важно, чтобы в дизайне чётко разделялось главное и второстепенное. В первую очередь пользователь должен увидеть преимущества того, что вы предлагаете, а уже потом вникать в детали.
Элементы сайта выстроены по сетке
Сетка помогает выстроить скелет дизайна. Она отвечает за выравнивание и визуальный порядок: благодаря сетке в размещении элементов на странице (изображений, видео, текстовых блоков) есть логика, между ними соблюдаются одинаковые отступы.
За счёт этого сайт выглядит эстетичнее, а благодаря простой структуре посетители быстрее считывают информацию.
Когда вы принимаете дизайн от специалиста, следите за шириной блоков и отступами между ними. Контент не должен постоянно «прыгать»: становиться то уже, то шире. Это мешает восприятию пользователей.
В дизайне соблюдается стилистика
У любого сайта или публикации должна быть своя стилистика — типографика и общий дизайн, которые хорошо сочетаются между собой. Это позволяет сайту или креативу быть целостным и понятным для аудитории.
Например, если вы попросили дизайнера оформить сайт в нежных пастельных цветах и выбрали элегантные шрифты, вряд ли к ним стоит добавлять гранжевые рваные детали или динамичные неоновые элементы.
Цвета использованы грамотно
Цвет — важная составляющая любого дизайна. Оптимальной считается цветовая палитра из 2–3 цветов. Дизайн с бо́льшим количеством воспринимается тяжело. Использование одного цвета, напротив, сделают сайт или баннер скучным.
Также важно понимать, к какой механике относится тот или иной цвет. Из самого простого – зелёная кнопка ассоциируется у пользователей с «можно», действием (отправить заявку, купить, перейти на другую страницу и т. д.), а красная — с «нельзя», отменой действия (отозвать заявку, закрыть окно и т. д.).Если вы хотите внести изменения в цветовую схему сайта, но не можете объяснить дизайнеру, какие цвета вам нужны, воспользуйтесь специальными сайтами. Например, на ColorSpace вы можете ввести HEX-код понравившегося оттенка, и сервис сам подберёт удачные сочетания. Просто покажите дизайнеру палитру, которую вам хочется видеть на сайте.
В дизайне присутствует только одна шрифтовая пара
Чтобы не перегружать дизайн, лучше не использовать больше одной шрифтовой пары. Начертания, то есть наклон и контраст букв, не учитываются.
Более смелый и интересный шрифт лучше использовать для заголовков. Главная его функция – привлечь внимание пользователя, поэтому здесь могут быть буквы с необычными засечками или декоративными элементами. Для остального текста должен использоваться простой читабельный шрифт.
Если вас не устраивает шрифтовая пара, использованная дизайнером, предложите ту, которая нравится вам. Подобрать пару поможет один из специальных сервисов. Например, Type Genius от Canva.
Иллюстрации и фото качественные
Изображения помогают дизайну рассказать, что и для кого вы предлагаете. Идеально, если фотограф сделает серию снимков специально для вашего визуала. Но возможность поработать с хорошим специалистом есть не всегда.
Альтернатива – покупка фотографий и рисунков на фотостоке. Так и поступают дизайнеры. Поэтому следите, чтобы иллюстрации сочетались по стилистике и цветовой гамме друг с другом и самим сайтом. Также с фотографий должен чётко считываться смысл. Например, для продвижения полётов на воздушных шарах вряд ли подойдёт картинка с самолётом.
Все изображения должны быть эффективными. То есть привлекать внимание пользователя и вызывать у него желание отправиться в путешествие. Фото бескрайних пляжей могут передавать чувство свободы, картинки с национальными блюдами – вызывать аппетит, а изображения с красивыми закатами и рассветами – вдохновлять на новое путешествие.
Ну и, конечно, посмотрите, чтобы иллюстрации и фото были в хорошем качестве. Пиксельные, зернистые изображения или с водяным знаком формируют плохое впечатление о сайте и его авторе.
Сайт адаптирован под разные устройства
Представители платформы SlickJump рассказали CNews, что в 2021 году 83% интернет-трафика приходится на мобильный трафик. Поэтому попросите специалиста подготовить версию дизайна сайта для мобильных устройств.
Все блоки должны быть удобными, текст – читаем, а изображения – понятны без масштабирования при просмотре не только на десктопе, но и на телефонах, планшетах.
Когда вы получите уже итоговый сайт от верстальщика, проверьте, как страницы выглядят на экранах разных устройств. Это можно сделать с помощью режима разработчика. Например, в Google Chrome он вызывается правой кнопкой мыши → посмотреть код → Toggle device toolbar.
Механика элементов понятная и логичная
Если вы хотите, чтобы на сайте при скроллинге появлялись дополнительные элементы, попросите дизайнера учесть их в макете сайта. Важно, чтобы на этапе создания дизайна вы видели: фотографии, видео и поп-апы соответствуют стилистике сайта, будут отображаться в той части экрана, на которой сосредоточено внимание пользователя, не перекроют основной контент.
Популярная и важная механика элементов сайта — их различные состояния. Например, когда при наведении или клике на кнопку, её цвет меняется, пользователь понимает: кнопка рабочая. Оценивая макет сайта от дизайнера, проверьте, учёл ли специалист эти моменты. Чтобы на этапе дизайна вы видели, какие цвета и формы предусмотрены для разных состояний элементов, и при необходимости могли скорректировать их.
Что делать, если оценить дизайн самостоятельно всё ещё трудно?
В процессе оценки и комментирования макета ваши с дизайнером взгляды могут разойтись. Он лучше разбирается в визуале, поэтому может долго отстаивать свой креатив. Но при этом вы лучше знаете свой проект и аудиторию.
Если прийти к согласию не получается, попросите о помощи знакомых и друзей. Главное, чтобы они входили в вашу целевую аудиторию.
Также можно попросить разбор дизайна у комьюнити. Найдите группы или каналы тех, кто занимается дизайном и попросите их подписчиков оценить работу. Некоторые профессионалы сами разбирают чужие визуалы. Например, такие ревью можно найти в видео Алексея Бычкова.
Попробуйте добавить работу на тематические сайты: Behance или Pollskll. В комментариях пользователи часто дают обратную связь, раскрывая плюсы и минусы внешнего вида страницы.
Дизайн сайта: понятия «красиво» не существует
Можно я ударю Вас в лоб? Причём так сильно, как когда-то я получил этот удар. Готовы? Дизайн сайта не влияет на конверсию сайта. Точнее так, красота не всегда положительно влияет на показатели. Больно?! Я когда увидел это в аналитике, был просто шокирован.
Но и не всё так просто, как кажется. Поэтому разберём подробнее тему визуальной разработки landing page.
Красота — понятие размытое
Почему одни считают блондинок самыми красивыми созданиями на свете, а другие говорят, что только брюнетки достойны любви.
А потому что нет такого понятия, как “Красиво”, есть понятие “Мне нравится” и “Стандарты”. Получается, что с точностью нельзя быть уверенным, каким должен быть дизайн сайта. Красивый он у Вас или страшный, как моя жизнь?
Поэтому самое главное, что Вы сейчас должны усвоить перед тем, как мы перейдём к делу, это то, что любой сайт является по дизайну хорошим, только нравится он не всем. И Вам главное, чтобы он нравился Вашему аватару клиента.
В нашей практике мы замечали как “страшные” сайты с очень-очень крупными/мелкими шрифтами, стоковыми изображениями и хаосом в цветах давали маркетинговые показатели выше, чем его сородичи в идеальном (по мнению большинства) виде.
Возвращаясь к нашим баранам, сайт должен соответствовать желанию целевой аудитории.
И если взять для примера бабушек (яркий пример), то им совсем не нужны Ваши тенденции 2017 года, навороты в анимации и наслаиваемых объектах. Им нужен максимально простой сайт с крупным текстом и белым фоном для удобства изучения.
Не забудьте установить на сайт систему комментирования. Так пользователи смогут делиться своим мнением и даже подталкивать к покупкам других посетителей (а еще это положительно влияет на SEO). Кликайте и узнавайте подробнее -> Сackle
Что важно для дизайна
Владельцы не очень приятных глазу сайтов сейчас выдохнули, подумав, что можно сэкономить десятки тысяч на редизайне. И зря так сделали. Так как им всё равно нужно понять, что разработать дизайн сайта — это не только подобрать цвета.
Ниже представлены основы, которые очень важны, если Вы создаете новый дизайн проект или же думаете, как изменить дизайн сайта.
1. Стандарты
А вот понятие “Стандарты” очень даже измеримо, и это касается в том числе красоты мужчин и женщин. Нельзя сказать “страшный мужчина”, а можно сказать “не стандарт”. То есть рост меньше 180, фигура не спортивная, улыбка на троечку и т.д.
В сайтах тоже есть своего рода стандарты дизайна для специалистов. И их обязан знать каждый дизайнер, который прикладывает свою руку к мастерству.
Таких стандартов сотни, поэтому если Вы желаете в них разобраться, то увы, за эту статью этого сделать невозможно.
К тому же я уверен, не Вы собираетесь самостоятельно делать продающий дизайн сайта для своей компании, так как Вы всё-таки владелец. И Ваша основная задача состоит в том, чтобы быть уверенным, что Ваш подрядчик или дизайнер понимает базовые знания и элементы дизайна. Для теста можете использовать три вопроса (правильные ответы тоже на них написал):
- Как можно выделить ссылки на сайте? (синим или подчёркиванием);
- В какой размер нужно уложить элементы сайта, если не делаем адаптив? (до 1280 пикселей (самый популярный размер экрана);
- Можно ли деформировать шрифты текстовых элементов? (нельзя).
Кто-то может поспорить и сказать, что стандартов нет в веб-дизайне. Но я считаю иначе. Есть каноны, которые не режут глаз и привычны для потребителя, а значит ими нужно пользоваться для создания удобства. К нему и переходим.
2. Структура и расположение
Вы меня извините, но я прям из кожи рвусь, когда наш потенциальный клиент говорит, что он отдаст разработку правильной структуры лендинга — дизайнеру. Я в этот момент “кричу и взрываюсь” (единственный случай, когда я это делаю).
Важно. Нужно чётко понимать, дизайнер — не маркетолог. Это разные люди, с разным образованием, с разными мозгами и разными взглядами на жизнь.
Маркетинг — это анализ и цифры. А дизайн — это творчество и фантазия (+ капелька стандартов).
Поэтому, если Вы решили самостоятельно сделать лендинг, то, пожалуйста, не отдавайте полностью это дело дизайнеру. Сделайте это лучше сами. И да, дизайнер не виноват в своём желании заработать больше денег, соглашаясь выполнить эту задачу по Вашей просьбе.
Единственное, что можно частично доверить дизайнеру, точнее прислушаться к его мнению, это расположение элементов для более удобного перемещения по landing page.
Прислушаться, это не значит отдать. Это значить сделать самому и получить обратную связь.
Кстати. Создайте собственный сайт через конструктор. В арсенале любой сайт от лендинга до интернет-магазина, готовые шаблоны, мобильная версия, корзина, платежи и еще +10 инструментов. Кликайте и тестируйте -> Mottor
Как сделать дизайн сайта
С базовой теорией разобрались, пора переходить к делу, а именно к тому, как создать дизайн сайта. Для этого разберем, какие этапы создания нужно пройти.
Этап 0. Шаблоны или уникальность
Довольно часто этот вопросы дизайнеры и заказчики не поднимают, так как заказчик априори надеется получить уникальный продукт, а дизайнер, ради экономии времени, взять нечто готовое.
Конечно, это не значит, что все Вас хотят обмануть. Но желательно этот момент определить для себя и поднять его в разговоре со специалистом.
Не стоит забывать, что за уникальный дизайн лендинга Вы отдадите в несколько раз больше, чем за шаблон в бесплатном конструкторе сайтов, но при этом не попадёте в неудобную ситуацию, так как не встретите такой же сайт (может даже десятки) на просторах интернета.
Поэтому личное моё мнение, в наш век актуально использовать только уникальный шаблон или полные права на шаблон, который кроме Вас никто больше не может использовать.
ВКЛЮЧАЙТЕСЬ В СОЦСЕТИ УЖЕ 40 000+ С НАМИ
Екатерина
Сергей
Иван
Елена
Екатерина
Этап 1. Прототип
С чего начать делать дизайн сайта? Конечно, всё начинается с идеи. Но создание дизайна сайта начинается с прототипа, то есть схематично изображённого Вашего будущего сайта. Как Вы помните, делаете это Вы лично. И данный этап нельзя пропускать, иначе.
Либо заранее приготовьтесь к тому, что будете ругаться с исполнителем.
Реализовать прототип Вы можете как на листке бумаги с помощью ручки, так и с помощью специальной программы. Лично мы используем Balsamiq, это некий конструктор, который позволяет быстро и удобно перемещать блоки, тексты и т.д..
Ведь в процессе создания дизайна сайта постоянно приходят новые идеи и на бумаге можно разориться. Ниже представлен пример прототипа и его воплощения:
Чаще всего уже на этапе прототипа Вам нужно продумать, как будут располагаться блоки и элементы дизайна, хотя бы ориентировочно. Например, изображение — слева, текст — справа (ещё один стандарт). Основываясь на этом, дизайнер будет всё реализовывать.
Но не загонять его в тупик, рекомендую добавить заметку “Возможны изменения расположения блоков и текстов”.
Этап 2. Фирменный стиль или “мне нравится”
Вот из-за отсутствия этого шага часто затягивается добрая половина проектов и встает разработка дизайна сайта. Так как заказчик видит под словом “Красный” — цвет граната, а дизайнер — закат солнца.
Поэтому идеально, если у Вас есть возможность отправить свой фирменный стиль и гайдлайн. В минимальной версии нужно скинуть сайты, которые Вам нравятся.
И не нужно мыслить словами “Ты же дизайнер, сделайте красиво!”. Если мы ещё раз внимательно прочитаем первую главу статьи, то вспомним, что нет такого понятия. Для всех “красиво” выглядит по-разному. Запомните. Либо фирменный стиль, либо сайты, которые нравятся (+ изображения).
На правах рекламы
Этап 3. Первые два экрана
Даже при наличии этапа 2, всё равно могут быть проблемы. Поэтому для того, чтобы клиенту не использовать зря своё ограниченное количество переделок (которые обсуждаются заранее и прописываются в договоре). А дизайнеру не тратить своё личное время, Вам нужно сначала согласовать первые 2 экрана, а уже затем двигаться дальше.
Уже потом дизайн кнопок для сайта, дизайн всплывающих форм, поп апов и так далее.
Почему именно два первых? Первый экран, как правило, является большим фоновым изображением с заголовком и несколькими психологическими триггерами. А второй экран уже идёт в отличающемся формате от первого, за счёт другой структуры, которая не всегда является типовой.
Этап 4. Реализация и правки
Вам, как владельцу, не особо должно быть интересно, как происходит создание дизайна сайта, как выглядит весь процесс. Но для общего понимания, дизайн landing page создается в Photoshop. Либо как сейчас любят делать это продвинутые специалисты в zeplin.io.
На этом этапе хочу большое внимание остановить на правках. И сказать о том, что создавая дизайн лендинг пейдж, не нужно уходить в перфекционизм, так как это может длиться бесконечно.
Сайт можно доделывать вечно, вплоть до того, что и Вашим правнукам хватит. Идеальной стратегией будет убрать все крупные ошибки, запустить проект и далее уже в процессе докручивать, опираясь на аналитику или вебвизор.
И вот Вам видео в тему, про детали, которые сделают Ваш сайт более эффективным. Не пугайтесь, что все примеры из оффлайн. Знания подойдут и там, и тут.
Проще всего сделать сайт на конструкторе из подборки
Коротко о главном
Дизайн лендинга безусловно важен, но не настолько, как многие думают. Мы вывели у себя в компании очень интересную фразу “Главное, чтобы дизайн сайта не отталкивал”, она очень хорошо описывает всю ситуацию.
По программе максимум, Ваш дизайн должен нравится Вашей целевой аудитории, а не Вам и Вашим сотрудникам.
Выписать конкретные пункты, которые будут критериями оценки сайта, невозможно. Так как хоть и есть стандарты, дизайн — дело творческое, поэтому без чувства прекрасного здесь не обойтись. Если у Вас его нет, то попросите оценить других, но не забывая, что самое важное это мнение Ваших клиентов.
Чтобы Вас не отпускать на “водянистой ноте”, дам несколько советов, которые помогут Вам хотя бы концептуально понять, куда двигаться, если чувство прекрасного не Ваш конек:
- Во всём сайте должен проглядываться общий стиль (в заголовках, иконках, изображениях, переходах);
- Продающий дизайн сайта должен акцентировать внимание на текстах и изображениях, а не на себе;
- Шрифты должны быть не стандартные (Arial, Times New Roman, Verdan и т.д.);
- Пространства между элементами должно быть достаточным для удобного изучения.
Нашли ошибку в тексте? Выделите фрагмент и нажмите ctrl+enter