Как создать дизайн сайта?

У Вас нет никакого опыта, но нужно сделать «красиво»? Важность дизайна сложно переоценить. Хорошо выполненный design отражает уровень компании и разработчика. Но, симпатично — не всегда значит удобно и многофункционально. Поэтому, любой начинающий проект мы видим так: не кричащие и не режущие глаз цвета, простой и понятный функционал, читаемый с первого раза. Это значит, что зайдя на “главную”, посетитель быстро сориентируется и за два-три клика найдет нужный товар.

Итак, если Вы:

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

то Вам точно будет интересно прочитать эту статью.

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

Определяем цель

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

• Какой теме он посвящен?
• Какой контент будет размещаться?
• Какие задачи Вы перед ним ставите?
• Какая дальнейшая стратегия продвижения?
• Какая структура Вам максимально подойдет
• Есть ли брендбук или определенные корпоративные требования (ограничения)?
• Какой тип ресурса нужен (лендинг, информационный, визитка, полноценный интернет-магазин)

Чем подробнее Вы сможете ответить, тем понятнее будет направление работы и четче прорисуется результат.

Маленький совет: Все еще сложно определится? Скачайте подробный бриф для клиента из какой-нибудь дизайн-студии.

Типы веб-сайтов

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

Landing page

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

Вот наглядный пример LPage — яркий краткий одностраничник.

Корпоративный веб-сайт

Это более серьезный по задачам ресурс, у которого есть разделы, блоки, серьёзный продуманный дизайн и технически сложные решения. Он должен быть информативным и функциональным. Конечно, уровень сложности напрямую зависит от желания заказчика и масштабов компании.

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

Онлайн-магазин

Интернет-магазины знакомы каждому из нас. От серьезных платформ типа Яндекс.Маркета, OZON и Алиэкспресс до скромных проектов. В этом случае дизайнеру придется столкнуться с огромным количеством страниц, контента, а также разработкой прощающего стиля и страницы заказа.

Как пример, показываем OZON.ru — один из гигантов рунета в этом направлении.

А что у конкурентов?

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

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

Даже если у Вас нет конкурентов (бывает и так), посерфите смежную тему, но ни в коем случае не отказывайтесь от этого шага и не игнорируйте чужой успешный опыт. На основании результатов можно создать майндмэп в Xmind или MindMeister.

Нужны ли референсы?

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

Кстати, на этом этапе можно дополнительно использовать такой ресурс как Pinterest. Там Вы найдёте сотни скетчей, примеров, готовых дизайнов, цветовые палитры по сочетанию и много другого визуального контента.

Как создать красивый проект?

К этому моменту у Вас должно сложится чёткое понимание всех составляющих элементов от шрифта заголовков до функциональности корзины. Теперь пришло время нужно поразмыслить о том, как применить все это на практике.

Если раньше самой удобной программой для этого считался исключительно AdobePhotoshop, то сейчас выбор программ стал побольше и читать огромный том «Фотошоп для чайников», если Вы не умеете им пользоваться — не придётся.

• Readymag. Вполне себе простой и удобный инструмент для незамысловатых задач или лендингов. Он представляет собой онлайн-конструктор, с помощью которого проект создаётся напрямую в браузере. Это удобно, потому что экономится время на вёрстке, и Вы сможете обойти стороной такой сложный этап, как самостоятельное программирование. Плюс — сразу видно, как выглядит будущая страница.
• Tilda. Это, наверное, самый популярный конструктор для начинающих. Он поможет создать не только простейший одностраничник, но и более сложные варианты без помощи верстальщика и привлечения спеца по программированию.
• Photoshop. Если Вы планируете не просто создать одноразовый пробный веб-проект, а заниматься этим постоянно и серьезно, то без него не обойтись. Это серьезный инструмент, который обеспечивает максимальный контроль над изображением и предлагает широкий инструментарий для его коррекции или создания с нуля.
• Sketch. Программа, доступная для пользователей iOS. Особо ничем не примечательна, но если Вы фанат Apple, то должны о ней знать.
• Figma. Это относительно новая платформа, которая уже стала востребованной благодаря легкости и доступности, удобному функционалу, возможности удаленной совместной работы и тд.

Выбор программы лучше всего основывать на целях создания веб-страницы. Если у Вас легкая задача, которую требуется выполнить через неделю — стоит ли ради этого изучать Фотошоп? И наоборот — если Вы планируете смену профессии, то без углубленных знаний всех баз и основ не обойтись. Выше мы рассказали про самые основные принципы на пути самостоятельного создания дизайна сайта. Если в результате хочется получить топовый продукт, то предстоит изучить ещё очень много нюансов из верстки и программирования. А если нет возможности — то можно обратится к нашим специалистам, которые могут создавать проекты любой сложности на высокопрофессиональном уровне.