С чего начать дизайн сайта
Как сделать дизайн сайта, если вы новичок
Рассказываем, как сделать сайт красиво, если у вас нет опыта в веб-дизайне. Главные принципы и общие рекомендации.
Многие новоиспечённые фрилансеры думают о том, как получить заказ и сделать хороший дизайн. Тоже из их числа? На практике всё не так страшно, как кажется на первый взгляд. Первое, что нужно сделать, — начать действовать.
А если знаний пока маловато, то запишитесь на курс «Веб-дизайн с нуля до PRO», где из новичка вас переведут в профессионалы. В университет ходить не придётся. Всё обучение онлайн.
Пишет про дизайн в Skillbox. Работает директором по маркетинговым коммуникациям, изучает рекламную графику и 3D.
Определитесь с целью
Для начала поймите, зачем вашему клиенту нужен сайт. Пусть он ответит на несколько простых вопросов:
Чем подробнее клиент ответит, тем понятнее станет, каким должен быть результат. Лучший вариант — это предложить заполнить бриф одной из ведущих дизайн-студий.
Каким бы странным, длинным и подробным он вам ни показался, заполнение брифа — один из важнейших этапов создания сайта, так как помогает понять и специфику, и сложность проекта. Есть десятки брифов на создание сайтов, но я рекомендую бриф от CreativePeople.
Определитесь с типом сайта
Следующий шаг — понять, какой именно сайт необходим. Типов сайтов очень много, но чаще всего требуется лендинг, корпоративный сайт или интернет-магазин.
Лендинг
Цель одностраничного сайта — быстро и эффективно продать товар или услугу. Как правило, лендинги отличаются ярким оформлением и наличием одного или нескольких блоков, в которых пользователю предлагается оставить контакты для связи.
Корпоративный сайт
Отличается размером и возможностями — и зачастую содержит непростые для дизайна и технической реализации инструменты. По сложности корпоративные сайты могут быть самыми разными, всё зависит от требований заказчика и размера бизнеса.
Сайты банков — классический пример корпоративных сайтов
Интернет-магазины
Эти сайты знакомы каждому: AliExpress, OZON, «М.Видео» и десятки других аналогичных. Главный вызов дизайнеру здесь — в объёмах информации и товаров, а также в проектировании страницы заказа.
Изучите конкурентов
Когда определились с тематикой, типом и целью сайта, самое время внимательно изучить конкурентов. Каждый из них в своё время размышлял, как сделать сайт, и смог попасть в топ поисковой выдачи.
Изучая сайты конкурентов, уделите внимание тому, где и как расположена информация, какая у сайта структура и какие возможности реализованы. Проанализировав пару десятков сайтов, вы наверняка увидите общие черты и закономерности.
Даже если в вашей нише по каким-то причинам нет конкурентов, не пропускайте этот шаг. Попробуйте изучить сайты смежной ниши, составьте майндмэп в программе XMind или сервисе MindMeister, сделайте зарисовки будущего интерфейса и не забывайте анализировать каждый свой шаг, ведь любой элемент интерфейса должен отвечать какой-либо цели.
Найдите референсы
Визуальная часть сайта — одна из важнейших задач дизайнера, ведь сайт должен быть не только удобным, но и красивым. Нужно подобрать шрифты, главные цвета, подумать над оформлением блоков, организацией информации на странице.
Если вы новичок в дизайне, делать это в одиночку — сомнительное решение. Лучше найти примеры сайтов, которые вам нравятся, и перенять некоторые идеи. Только не перерисовывайте их от шапки до футера — это уже откровенный плагиат.
Рекомендуем сделать подборку из пары десятков сайтов смежных тематик, оформление которых вам понравилось, и приглядеться к деталям, разобрав макеты на составные части.
Подборку референсов вы можете смело показать заказчику. Так вы вместе выберете подходящий стиль, что избавит от ненужных правок в дальнейшем. Найти множество хороших примеров можно на Behance, Awwwards и Pinterest.
Этапы разработки дизайна сайта с нуля до готового макета
Хороший дизайн начинается не с рисования в графическом редакторе, а с проектирования и анализа. В этой статье я расскажу вам про основные этапы разработки дизайна сайта, благодаря которым вы сможете создавать рабочие дизайн-макеты.
Очень часто, начинающие дизайнеры теряются, когда заказчик просит их создать дизайн сайта. Они впопыхах открывают графический редактор и начинают судорожно рисовать дизайн из головы. Потом получают миллион правок, и вся работа сводится к бесконечным исправлениям.
Совсем другое дело, когда вы четко знаете и понимаете все основные этапы создания дизайна сайта и следуете этому плану. Каждый этап вы согласуете с заказчиком и всегда можете аргументировать свои дизайн-решения. Таким образом вы избавляете себя от многочисленных правок и выглядите в глазах заказчика настоящим профессионалом своего дела.
Этапы разработки дизайна сайта
Первое с чего начинается разработка любого дизайна сайта — это бриф, поэтому с него и начнем.
Этап 1 — Бриф
Бриф — это определенный список вопросов, которые вы задаете заказчику, чтобы понять, чем он вообще занимается и какой дизайн хочет по итогу получить. На этапе брифа никто никому ничего не обязан. То есть это просто ваше знакомство друг с другом. На этом этапе вы можете легко отказаться от работы над проектом заказчика, или заказчик может отказаться от работы с вами.
Обычно в бриф включены вопросы по типу:
По этой ссылке я оставлю пример брифа, который вы можете адаптировать под себя. Брифовать (опрашивать) клиента лучше всего через созвон (например, в skype). Так вы сможете ближе познакомиться с клиентом и проникнуться доверием друг к другу.
Но если у вас живое общение вызывает дискомфорт, то можно отправить заказчику на электронную почту файл с брифом и попросить его заполнить. А после, попросить переслать вам обратно уже заполненный бриф.
Помимо брифа есть еще такое понятие как ТЗ (Техническое Задание). Оно составляется на основе брифа, то есть там прописывается вся структура будущего сайта и все требования к дизайну. Кто-то разделяет эти два этапа, но можно их объединить и на этапе брифа сразу проговорить все необходимые моменты.
Когда у вас на руках уже есть заполненный бриф, где все подробно прописано какой сайт и дизайн хочет заказчик, то вам осталось его еще раз согласовать с заказчиком и двигаться дальше.
Согласовывайте значимые этапы с заказчиком, чтобы потом между вами не было недопониманий.
Бриф актуален тогда, когда вы фрилансер и работаете сами на себя. Если вы работаете в компании, то брифовать клиента будут другие люди (скорей всего менеджер проекта).
Этап 2 — Анализ ниши и конкурентов
После согласования брифа и переходу ко второму этапу вы уже вступаете в коммерческие отношения со своим заказчиком. То есть здесь вы уже несете ответственность за всю последующую работу, поэтому на этапе брифа вы должно четко определиться — работаете над проектом или нет.
Если да, то обговариваете сроки и процесс оплаты и начинаете анализировать нишу и конкурентов. Этот этап является одним из наиболее важных, потому что при грамотном его выполнении он облегчит вам последующую работу.
Ваша задача — погрузиться в бизнес заказчика и понять, хотя бы примерно, как там все устроено. Далее — проанализируйте 5-10 ближайших конкурентов и выделить их слабые и сильные стороны. Посмотрите на структуру их сайтов, какие они используют блоки и каким образом преподносят информацию.
Где брать конкурентов? Во-первых, ваш заказчик может указать их в брифе. Во-вторых, можно зайти на Яндекс и вбить в поиск нишу клиента (например, аренда строительной техники в Москве). В выдаче у вас появятся сайты конкурентов их и анализируйте.
Все данные записывайте на какой-нибудь носитель (бумага или Word/Excell), чтобы ничего не забыть. Если в ходе анализа у вас будут возникать вопросы, то спрашивайте их у заказчика. Заказчик 100% знает свой бизнес лучше, чем вы, поэтому диалог только приветствуется.
Зачем вообще нужен этот анализ? Затем, чтобы не изобретать велосипед, потому что до вас 100% кто-то уже разрабатывал подобные проекты. Ваша задача, как дизайнера, сделать продукт своего клиента лучше, а не наоборот. Поэтому нужно опираться на чужой опыт и улучшать его.
По итогу второго этапа вы должны примерно понимать специфику бизнеса и у вас должны быть записи с анализом ближайших конкурентов.
Этап 3 — Проектирование
На этом этапе вы начинаете проектировать будущие блоки сайта, опираясь на бриф и конкурентный анализ. Здесь вам не нужно ничего рисовать. Ваша задача описать основные блоки сайта и какой контент в них будет находиться.
Выглядеть это может примерно так:
По-другому это можно назвать информационной архитектурой. Важно понимать, что при разработке финального дизайна вы в каких-то местах можете отступать от вашего изначального проектирования.
Этот этап нужен для понимания того, что вообще должно находиться на сайте. Как и в какой вариации это будет выглядеть в конечном дизайне — дело десятое. Проектировать можно как в графическом редакторе, так и на обычном листе.
В редакторе, конечно, удобней, потому что при дальнейшей разработке сайта у вас будет все в одном месте. Но если под рукой нет компьютера, то вполне можно обойтись обычным листом бумаги.
По итогу третьего этапа у вас должна быть спроектирована вся структура будущего сайта.
Этап требует согласования с заказчиком.
Этап 4 — Сбор референсов
После того, как со структурой вы закончили, самое время немного вдохновиться для дальнейшей работы. В этом нам помогут референсы, то есть работы других дизайнеров.
Сбор референсов можно разделить на 2 этапа:
В первом случае, референсы по нашей теме будут помогать нам в составлении будущей стилистики нашего дизайна. Это стоит делать если в брифе клиент оставил этот пункт на усмотрение дизайнера.
Если же в брифе клиент расписал будущую стилистику до мелочей (шрифты, цвета, формы и так далее), то тогда все исходные данные берите из брифа. Если нет, то с помощью референсов по вашей теме вы сможете определиться со стилистикой.
Например, если взять 5 сайтов из fashion индустрии, то можно заметить, что на 4 из них в дизайне используются шрифты с засечками, формы кнопок и других элементов выполнены в строгом стиле, а цветовая палитра — преимущественно пастельных тонов. Соответственно вам можно придерживаться именно такой стилистики, если разрабатываете дизайн для fashion проекта.
Помимо этого, вы можете брать референсы по любой другой теме и искать наиболее удачные дизайн-решения, которые можно адаптировать под ваш проект. Таким образом вы вдохновитесь на работу и у вас будет примерная картина того, какая композиция будет в вашем дизайне и каким образом будут скомпонованы элементы друг с другом.
Этап 5 — Прототип
С готовыми реферансами можно начинать разработку прототипа будущего сайта. Прототип — это промежуточный вариант между финальным дизайном и спроектированной структурой. Он уже имеет вид готового сайта, но без детальной проработки.
Во время создания прототипы вы уже работаете непосредственно с композицией и компоновкой, подбираете шрифты.
Выглядеть прототип может примерно следующим образом:
Это достаточно детализированный прототип, которому осталось только добавить цвета и картинки, и финальный дизайн будет готов. Но такой детализированный прототип совсем не обязателен, можно делать немного попроще.
В прототипе вы можете:
Все это можно доработать в финальном дизайне. Прототип нужен для того, чтобы можно было наглядно увидеть, как примерно будет выглядеть конечный дизайн.
Этап требует согласования с заказчиком.
Этап 6 — Финальный дизайн
Вот мы и подошли непосредственно к самому дизайну в его привычном понимании. Как видите, работа дизайнера — это 80% анализа и проектирования и лишь 20% самого дизайна.
На этом этапе вам нужно добавить цвета в ваш прототип, выровнять все строго по сетке и подкорректировать отступы, добавить картинки и иконки туда, где они должны быть.
В процессе финального дизайна вы можете немного отступать от прототипа в пользу каких-то более эстетически привлекательных дизайн-решений. Но не сильно, потому что предыдущий этап у вас согласован с заказчиком, и он рассчитывает примерно на тот результат, который с ним согласовали.
Результат преображения от прототипа к финальному дизайну может выглядеть примерно вот так:
Этап требует согласования с заказчиком.
После того, как у вас готов финальный дизайн вы можете сделать небольшую анимацию интерфейса, чтобы лучше «продать» готовый дизайн заказчику. Этот пункт не обязателен, но он очень хорошо создаст wow-эффект.
После согласования вам осталось подготовить ваш дизайн для передачи его в разработку.
Этап 7 — Подготовка дизайна для разработки
На этом этапе вам нужно максимально упростить работу для разработчика, чтобы он не обращался к вам с кучей вопросов. Таким образом вы сэкономите время и себе и разработчику.
Во-первых, подготовьте небольшой стайл-гайд (UI-kit) вашего дизайна. Укажите какие цвета вы использовали в дизайне, какие шрифты и их начертания, различные UI-элементы и их состояния. То есть, чтобы разработчик не гадал, как будет вести себя кнопка при наведении и так далее.
Вообще стайл-гайд (UI-kit) следует формировать еще на этапе прототипа, чтобы потом вам было проще работать. В зависимости от проекта, стайл-гайды могут быть простенькими (как на фото выше), так и более объемными (при разработке сложных интерфейсов).
Во-вторых, подготовьте все картинки и фотографии, которые вы использовали на сайте. Заранее позаботьтесь о том, чтобы уменьшит их вес, потому что чем «легче» картинки, тем быстрее грузится сайт.
Во-третьих, подготовьте для скачивания все иконки, которые вы использовали в дизайне. Иконки должны быть в формате svg.
В-четвертых, там, где вы задумывали какие-то анимации или другие поведения объектов — опишите их в комментариях или в отдельном файле. Это даст разработчику четкое понимание того, как должны вести себя элементы в дизайне.
Подготовленный дизайн отправляете заказчику, получаете свое вознаграждение за работу и на этом можно сказать, что вы выполнили свои обязательства. Вы можете еще предложить клиенту дизайн-поддержку, в рамках которой вы будете вносить какие-то изменения в дизайн на протяжении определенного периода.
Естественно, это будет как отдельная услуга и оплачиваться будет отдельно. Здесь уже решайте сами.
Заключение
В этой статье мы с вами рассмотрели основные этапы разработки дизайна сайта с нуля до рабочего макета. Следуя этому плану, вы сможете создавать дизайн и аргументировать каждый свой шаг заказчику. Таким образом заказчик будет видеть в вас профессионала своего дела, и вы можете избежать кучу лишних правок.
Надеюсь, статья была для вас полезной. Если остались вопросы — пишите в комментариях.
Не забудьте подписаться на мой YouTube и Telegram. Там еще больше полезного материала про дизайн интерфейсов.
Как разработать дизайн сайта
10 минут на чтение
В этой статье — все о дизайне сайтов. Поговорим, почему дизайн — это не просто красивая картинка, как его разработать и какие примеры дизайна сайтов можно считать хорошими.
Дизайн сайта: подготовка
Давайте сразу договоримся — мы будем рассматривать дизайн сайта в первую очередь как функциональный инструмент, и только потом как внешний вид. При разработке дизайна сайта вы должны отталкиваться именно от задач ресурса и того, как людям будет удобнее его использовать. Тогда вы не накрутите лишнего и сделаете юзер-френдли сайт, который будет приносить трафик и конверсии.
Прежде чем разрабатывать дизайн сайта, нужно подготовиться: поставить цели, выбрать его тип и платформу для создания. Разберем каждый шаг подробно.
Постановка целей для будущего сайта
Определяемся с целью, например:
Чтобы дизайн сайта эффективно работал на эти цели, надо в первую очередь подумать о пользователях. Например, покупатель на сайте интернет-магазина хочет выгодно потратить деньги. Прежде чем решиться на покупку, он собирает всю информацию: смотрит характеристики, фото и видео, читает отзывы, выбирает размер и комплектацию, изучает гарантии, сравнивает товары и откладывает в избранное. Значит, в дизайне карточек товара вы должны учесть все эти действия.
Карточка на «Леруа Мерлен» позволяет удобно изучить, сравнить и купить товар
Еще пример — потенциальный заказчик пришел посмотреть ваше портфолио. Он хочет видеть решение конкретных задач: небольшое количество лучших работ и их результативность для бизнеса, отзывы клиентов. У него нет времени листать бесконечную галерею всех ваших работ и читать биографию со времен школьных достижений.
При создании дизайна сайта думайте о людях, которые будут им пользоваться. Они должны плавно и удобно идти по сайту до обозначенной вами цели. Не забывайте, что ваша цель должна совпадать с потребностями ЦА. Наша статья поможет разработать функциональный дизайн сайта — сохраняйте в закладки.
Выбор типа сайта
Когда вы установили для себя цели, можно выбирать тип сайта, для которого нужно создать дизайн. Выбор небольшой: лендинг или многостраничник.
Лендинг, или посадочная страница — это такой моносайт, который посвящен одному предмету и имеет всего один CTA. Например, страница конференции с кнопкой «Зарегистрироваться». Скорее всего, в содержании будет описание конференции, список спикеров и докладов и основные тезисы, почему стоит прийти.
Пример дизайна сайта-лендинга конференции SendPulse и eLama
Лендингом можно обойтись, если у вас один продукт. Такая страница подойдет для продажи вебинаров, консультаций, курсов, одного типа товара. Лендинг также спасет, если есть потребность в сайте, а денег нет — это будет дешевле и быстрее, чем верстать многостраничник. На лендинге можно кратко описать, чем занимается компания, дать контакты или встроить заказ обратного звонка.
Мы составили полную инструкцию, как создать лендинг своими руками с нуля. Забирайте в закладки и создавайте свои лендинги с крутым дизайном.
Многостраничник — это сайт в классическом понимании, с иерархической структурой. Есть главная страница, разделы, подразделы и так далее. Многостраничник пригодится во всех остальных случаях: корпоративный сайт, интернет-магазин, сайт компании, блог, портфолио, новостной портал.
Автоматизация email рассылок
Отправляйте цепочки триггерных сообщений приветствия, брошенной корзины, реактивации, совмещая внутри одной цепочки email, SMS и web push.
Выбор платформы для создания сайта
Теперь предстоит выбрать платформу для создания сайта. Конечно, можно заказать разработку сайта под ключ или найти программиста, скооперировать его с дизайнером, заказать самописную платформу и арендовать хостинг для размещения сайта. Тогда ресурс будет полностью управляемым — сможете воплощать любые дизайнерские идеи и делать сайт любой структуры, чего иногда нельзя сделать на готовых CMS. Но вам придется решать все проблемы самостоятельно — закончилась аренда хостинга, полег сервер, поломался код. Этот способ подходит крупным компаниям, у которых есть хорошие бюджеты на создание и поддержку сайта.
Скорее всего, вы предпочтете потратить деньги на продвижение, а не на дизайн и разработку сайта, и это нормально. Есть куча конструкторов, в которых можно создать сайт с любым дизайном, и не надо быть программистом. При этом сайт будет лежать на хостинге сервиса, а это снимает головную боль по поводу аренды и технических проблем.
Мы собрали 12 известных конструкторов, которые подойдут для создания лендингов и многостраничных сайтов. Изучили плюсы и минусы каждого и спросили читателей, каким пользуются они сами.
Как сделать дизайн сайта
Расскажу, как пошагово разработать дизайн сайта и каким правилам следовать в работе.
Как сделать макет сайта
Соберите референсы — примеры дизайна сайтов, которые вам понравились. Представьте, что делаете дизайн-проект квартиры. Наверняка вы найдете фото нужного диванчика, симпатичную вам кухню, примеры сочетания обоев и паркета и приложите к проекту, чтобы не держать все в голове. Так и с сайтом: собирайте понравившиеся примеры шрифтов, цветов и их сочетаний, элементов, интересных кнопок, форм подписки — все, за что зацепится глаз.
Референсы — это необязательно что-то привлекательное на вид. Вы можете собирать идеи функционала: структуру сайта, подсказки для пользователей, переходы между страницами, попап-формы и так далее.
Создайте карту сайта (это касается многостраничников). Карта сайта — это схема того, как связаны между собой его страницы. Например, есть главная страница, это первый уровень. Она ведет на второй уровень — к разделам, те — на третий, к подразделам, и так далее.
В основном карту сайта делают в целях SEO: продумать URL для страниц, распределить перелинковку, ключевые слова и так далее. Но для задач дизайна тоже пригодится. Во-первых, с картой легче моделировать пользовательский опыт — откуда и куда пойдет пользователь, а это первая задача любого дизайна. Во-вторых, вы увидите, какие страницы находятся на одном уровне или тесно связаны между собой, и сможете продумать для них перекликающийся дизайн.
Если от руки рисовать сложно, найдите сервис для создания структуры сайта. Можете использовать один из этого списка:
Создайте макеты страниц. Это черновики, которые помогут определиться с взаимным расположением элементов, цветовыми сочетаниями, структурой страниц в целом. Макеты можно рисовать от руки на бумаге — подойдет для первых набросков. Если умеете работать в Photoshop или Illustrator — прекрасно, используйте их.
Откройте для себя чат-бота
Выстраивайте автоворонки продаж и отвечайте на вопросы пользователей с помощью чат-бота в Facebook, VK и Telegram.
Те, кто не умеет рисовать или работать в редакторах, могут найти онлайн-конструктор интерфейсов. Большинство из них построено по принципу drag-and-drop. Пользоваться такими просто: находите шаблон нужного элемента, перетаскиваете его на макет и редактируете под себя.
Создание макета сайта в онлайн-сервисе Moqups
Вот несколько таких редакторов (все на английском, но интуитивно понятны):
Тут можно представить себя художником, который сначала набрасывает контуры, а затем прорисовывает детали — от общего к частному. Для начала распределите по странице крупные блоки: например, где будут хедер и футер, элементы основного содержимого, какого размера будет пустое пространство между ними. Затем начинайте работать с более мелкими блоками.
Чтобы продумать все мелкие детали и их расположение, думайте в первую очередь о том, как люди будут использовать страницу. Постарайтесь разработать дизайн сайта так, чтобы пользовательский путь был комфортным и стимулировал клиента вернуться снова. Аналогично поступайте со всеми прочими страницами: продумайте, как люди будут их использовать, и соответственно разрабатывайте дизайн.
Полезный и красивый дизайн сайта: советы
Собрала для вас восемь правил, которые помогут разработать дизайн сайта.
Задавайте ожидания. От строителей ждут точности и аккуратности, от юристов — строгости и пробивного характера, от ветеринаров — любви к животным. Дизайн сайта должен соответствовать ожиданиям клиентов.
Строгое оформление страницы на сайте юридической фирмы
Используйте модульную сетку в дизайне сайта. Для этого нужно разбить область страницы на прямоугольники. Каждый из них будет либо элементом, либо пространством между ними.
Нашла для вас реальный сайт и расчертила его модульной сеткой. Обратите внимание, как сохраняется геометрия: элементы отцентрованы, поля между ними примерно одинаковой ширины, и в целом видно, что композиция ритмичная.
Пример использования модульной сетки в дизайне сайта
Не переборщите. Избегайте обилия шрифтов, цвета, множества геометрических форм. Всегда проверяйте — а нужна ли здесь эта кнопка, линия, фон? Если элемент не несет никакого смысла, смело убирайте. Мы давно переросли нулевые годы и стиль «дорого-богато», пусть дизайн сайта будет в первую очередь функциональным.
Учитывайте адаптивность. Сайт будут смотреть на разных устройствах — компьютерах и ноутбуках, телефонах и планшетах. Важно, чтобы пользоваться сайтом было удобно на любом из этих устройств. Следите за тем, чтобы не было маленьких нечитаемых элементов, все кнопки удобно нажимались, а важные части не уезжали за края экрана.
Помните о правиле близости. Элементы, стоящие рядом, воспринимаются как связанные. Если вы будете следовать правилу близости, читателю будет проще — сравните два примера ниже. В примере справа подзаголовок легко считывается. В примере слева сложно понять, относится ли он к одному из блоков текста или вообще находится там сам по себе
Располагайте рядом объекты, которые связаны друг с другом по смыслу
Оставляйте достаточно воздуха. Это правило работает в паре с правилом близости. Соблюдайте пространство между элементами, не лепите блоки друг на друга, иначе страницу будет сложно читать.
Выделяйте CTA. Почти каждая страница на сайте ведет посетителя к определенному действию — купить товар, оставить заявку, посмотреть работу в портфолио, почитать статью на блоге. Все содержимое страницы должно подводить читателя именно к этой кнопке.
CTA кнопка призывает пользователя оставить заявку
Избегайте фотостоков. Когда делаешь сайт, всегда есть соблазн пойти на фотосток и найти нейтральных изображений под главную страницу. Это опасно, потому что самые удачные картинки с первых страниц уже много раз использованы до вас, и посетители сайта наверняка увидят их не в первый раз. Стоковые иллюстрации создадут ощущение «подержанного» сайта, ненастоящего. Лучше сделайте свои фотографии — пусть будет не глянцево, зато по-настоящему.
Совет! Многие правила в дизайне можно применить к разным форматам — не только сайтам, но и к письмам, баннерам, иллюстрациям. Сохраните себе наш гайд по оформлению email рассылок и заглядывайте в него, когда нужна будет подсказка.
Примеры красивого дизайна сайтов
Подобрала десятку сайтов с хорошим дизайном из разных сфер. Смотрите, вдохновляйтесь, делайте свои.
Начнем с простого — дизайн сайта для небольшого магазина одежды. Главная страница лаконичная: слева меню с разными предметами гардероба, основные разделы дублируются в виде карточек. Карточки разбиты по несимметричной модульной сетке, смотрится интересно.
Дизайн сайта по продаже одежды
А такой дизайн сайта для себя создал дизайнер интерьеров. Простой лендинг, где можно узнать об опыте, методике работы, расценках, посмотреть портфолио. Хорошо, что специалист добавил сюда свое фото — это внушает доверие.
Сайт дизайнера интерьеров
Номер три в подборке — дизайн сайта юридического сервиса. Хорошо подобрана цветовая гамма: черно-белая основа с темными малиновыми акцентами. Присмотритесь к форме кнопок — ровно срезанные углы вписываются в строгий дизайн сайта, но оживляют его. Хорошо продуман момент с CTA кнопками, они есть в каждом блоке с информацией и дублируют основной посыл блока.
Дизайн сайта юридического сервиса
Следующий дизайн — сайт косметической компании. Цвета подобраны в яркой фруктовой гамме в цвет упаковок товара и логотипа, прямоугольные блоки перемежаются с абстрактными цветовыми фигурами.
Дизайн сайта косметической компании
Следующий дизайн сайта не совсем обычный — это сайт инновационного города Иннополис в Республике Татарстан. Главная страница представлена в виде майндкарт, элементы которых оживают при наведении курсора. В подразделах — аккуратная блочная верстка с яркими фотографиями.
Дизайн сайта инновационного города в Татарстане
Застройщик в Санкт-Петербурге выбрал для продажи ЖК нестандартный сайт с горизонтальным скроллом. При создании дизайна явно вдохновлялись темой природы и сказок: яркая, но спокойная цветовая гамма, много фотографий парков и зеленых дворов. Отметьте, как здесь работает шрифт заголовков: это классическая жирная антиква, похожая на заглавные буквы книг со сказками.
Дизайн сайта для продажи квартир в ЖК Санкт-Петербурга
Магазин чая и чайных напитков подобрал яркие, летние, неоновые цвета для дизайна своего сайта. Движение элементов при скролле и покадровая анимация продуктов добавляют динамики.
Дизайн интернет-магазина по продаже чая и чайных напитков
Это сайт известного американского издания Time. В дизайне этого сайта нет ничего необычного, но он выглядит отлично. Возьмите на заметку, как можно оформить новостную ленту — прямоугольные блоки разного размера чередуются с круглыми элементами, красными и черными линиями отбивки. Благодаря такой верстке читатель не устает от долгого скролла.
Дизайн сайта издания Time
Это сайт башни Space Needle — главной достопримечательности американского города Сиэтла. Здесь круто поработали с фото: большое изображение в шапке сайта погружает в атмосферу вечернего города. Градиентный фон имитирует цвет неба на закате.
Дизайн сайта американской достопримечательности — башни Space Needle
Последний дизайн сайта в этой подборке больше похож на искусство, чем на коммерческий инструмент. Стильные анимации, плавный скролл, крутое чувство композиции, воздух, цвет — здесь все прекрасно.
Дизайн сайта креативного маркетингового агентства
Когда смотрите на такие невероятные сайты, помните две вещи. Во-первых, они очень требовательны к скорости интернета и устройства просмотра. Если со скоростью плохо — эффект теряется. Во-вторых, вы можете достичь своих KPI и без миллионных трат на сайт, просто работайте под свою ЦА и постоянно анализируйте результаты.
Дизайн сайта: где искать вдохновение
Брать чужие идеи — не стыдно, но нужно брать их с умом. Просто копаться в интернете в поисках сайтов с красивым дизайном — задача на несколько дней. Но вы можете зайти на дизайнерские сайты с подборками работ и найти примеры гораздо быстрее.
Вот сайты, на которые можно заглянуть:
Дизайн сайта: что стоит запомнить
Дизайн сайта — это не просто красивые шрифты и странички. Это создание удобного ресурса, который параллельно решает задачи и пользователей, и своего владельца.
Начните создание дизайна сайта с подготовки, она состоит из трех шагов:
Непосредственно при разработке дизайна сайта следуйте этим трем шагам:
Помните о восьми правилах в дизайне сайта:
Начните с малого — сделайте простой лендинг по нашей инструкции. Он поможет собрать базу email адресов, пригласить людей на мероприятие, собрать заявки на ваши услуги и не только. И обязательно регистрируйтесь в сервисе рассылок SendPulse — сайт в комплексе с рассылками и чат-ботами работает гораздо эффективнее.
Рассказываю, как делать по-настоящему крутые email рассылки. Помогаю найти баланс между заботой о клиенте и успешными продажами.