Процесс создания макета для сайта можно разбить на несколько частей. На каждом этапе UI/UX дизайнер пользуется определенными ресурсами из интернета, либо собственными знаниями для успешного завершения текущего этапа разработки интерфейса. В данной статье мы разберем сайты, которыми пользуются дизайнеры в своей работе. А также ресурсы, которые могут помочь человеку, не знакомому с UI/UX, придумать дизайн для своего сайта. Итак, поехали.
Для начала вспомним из каких этапов состоит разработка интерфейса для сайта. Этапы разработки разбирались в этой статье, поэтому здесь мы не будем сильно углубляться в детали, а лишь перечислим эти самые этапы.
Разработка архитектуры
Разработка прототипа
· Создание библиотеки компонентов
· Размещение элементов на страничке
Разработка архитектуры
Результатом этого этапа должна быть определенная древовидная структура сайта. Давайте посмотрим, что поможет в ее создании. Прежде всего нам нужны 2 типа сайтов:
Конструкторы – для проектирования дерева будущего интерфейса.
Сайты, на которых собрана информация из чего должен состоять наш интерфейс. Здесь мы будем брать данный, из которых будет состоять наша древовидная иерархия будущего интерфейса.
Конструкторы
Как и всегда существуют платные и бесплатные приложения. Мы будем рассматривать только бесплатные, т.к, во-первых, если вы начинающий, то вряд ли готовы сразу платить за софт, особенно учитывая тот факт, что большая часть читателей из России. Во-вторых, и бесплатного софта достаточно для решения большинства задач.
FigJam – по сути представляет из себя простую рисовалку от разработчиков Figma. Можете создавать различные прямоугольники, добавлять к ним надписи и соединять их стрелками. Интерфейс максимально простой, с другой стороны для создания sitemap вам много и не потребуется. Достаточно прямоугольников, текста и коннекторов.
При этом тула позволяет разрабатывать карту сайта в команде и шарить результаты ваших наработок с коллегами. Это особенно интересно, если и сам макет сайта вы также будете делать в Figma.
Gloomaps – еще более простой инструмент, чем предыдущий. Это вызвано тем, что Gloomaps разработан исключительно для создания карты сайта. Поэтому что-то нарисовать здесь не получится. Однако всё необходимое для основной задачи есть. Проект также можно шарить с другими людьми, но разрабатывать совместно с кем то нельзя.
Пару слов про платные сервисы
Достаточно ввести в поиск “ux sitemap builder” и вы увидите огромное число похожих предложений. Большая часть из них будет платной, однако у каждого платного решения, есть бесплатный функционал. Он существенно урезан, но работать можно. Особенно если вам нужно спроектировать небольшой проект.
Сайты для сбора информации
Лучшим вариантом естественно будет взглянуть на сайты ваших конкурентов и взять их структуру за основу. Эти ребята давно работают и уже не раз меняли свой сайт. А значит были причины, почему их странички выглядят именно так. Естественно не нужно ограничиваться одним конкурентом, а взять некоторое среднее значение.
Несмотря на то, что предыдущий вариант будет предпочтительным, есть еще один способ собрать базовую структуры для карты сайта. Вы можете взглянуть на шаблоны для сайтов. Сейчас есть очень много конструкторов сайтов (Wordpress, Wix). Зачастую компании, предлагающие, инструмент по созданию сайта без написания кода, также предлагают варианты дизайна, которые вы можете использовать. Это и есть шаблоны. Обычно эти “варианты дизайна” довольно затасканные. Т.к находятся в свободном доступе и сайты на их основе делают все кому не лень. Так что уникальностью здесь не пахнет. Но у нас ведь сейчас другая задача. Нам нужна лишь структура. Вот только таким образом вы найдете шаблоны только для одностраничных сайтов.
Разработка прототипа
Теперь на основе созданной карты сайта, мы должны спроектировать дизайн каждой странички. Каждая страница сайта состоит из некоторого набора компонентов. При этом часть из этих компонентов имеют одинаковый дизайн для нескольких страниц. Примером такого компонента может быть кнопка. В таком случае лучше создать дизайн кнопки 1 раз, а потом переиспользовать эту кнопку на разных страницах. Набор таких повторяющихся компонентов, называется “библиотекой компонентов”.
В идеальном случае, вы должны сначала полностью создать библиотеку компонентов, а дальше на ее основе разрабатывать интерфейс страничек. На деле сделать это довольно сложно, т.к когда вы начинаете с нуля, то проблематично сразу понять скоуп всех элементов, которые будут у вас на сайте. Поэтому предлагаю начать с создания макета для каждой отдельной странички, в процессе добавляя компоненты к нашей библиотеке. Начнем с того, откуда брать идеи дизайна для отдельных страничек и сайта в целом.
Где брать идеи для дизайна страниц сайта
Ниже представлен список площадок, на которых представлено огромное количество готовых дизайнов. Вы безусловно также можете искать примеры интерфейсов напрямую через поиск, но как показывает практика, вам зачастую будут попадаться статьи с различных веб ресурсов, где списком будут идти “топ 20” сайтов (картинок) по дизайну. Куда лучше иметь в своем арсенале маркетплейсы, на которых собраны тысячи таких примеров. И не волнуйтесь, бесплатного контента там предостаточно.
99designs – есть возможность отфильтровать макеты по индустрии. Но не забывайте при выборе фильтров выставить, что вы ищите именно дизайн лендинга или веб страницы. Иначе поиск выдаст вам кучу мусорных примеров.
Figma community – выбранный дизайн сайта можно открыть в редакторе Figma и отредактировать под свои нужды.
Dribbble – Действительно очень большое число дизайнов, которыми вы можете вдохновиться. Зачастую этот сайт является первоисточником для других аналогичных ресурсов. Так вы спокойно можете найти какой-либо макет на Pinterest, который перебросит вас на Dribbble.
Pinterest – это целая социальная сеть, ориентированная на картинки. При этом изображения здесь по-настоящему высокого качества. Все благодаря жесткой модерации.
Awwwards – Некоторые макеты могут быть открыты как полноценный сайт. Это поможет вживую увидеть как будет выглядеть сверстанный дизайн. При этом некоторые из таких макетов, просто имеют ссылку на сайт. Другие интерфейсы открываются внутри самого Awwwards.
Elements Envato – много различных примеров и есть возможность скачать макет, НО только при наличии платной подписки. Но все таки возможность имеется.
Behance – Также имеется большой набор примеров, но для доступа к исходным фалам придется заплатить.
Webdesign Inspiration – Неплохой ресурс, но я так и не смог найти здесь форму для поиска. Напишите в комментариях, если найдете вы.
Идеи для дизайна компонентов
После того как вы определились с общим лаяутом для вашей странички (решили какие элементы будут располагаться на ней, их количество и расположение), пришло время заняться дизайном самих компонентов. Для этой цели можно использовать всё теже сайты из списка выше. При этом когда начнете “вдохновляться” чужими примерами, то выбирайте готовые UI Kit-ы, т.к компоненты должны не только быть красивыми, но и сочетаться друг с другом.
Искать такие киты можно по-разному. К примеру в Figma можно искать по тегу “designsystem”.
Правила веб-дизайна
Копирование чужих работ – это отличный способ получить достойный результат не имея опыта и знаний в проектировании интерфейсов. Но в тот момент, когда вы решите внести в дизайн что-то свое, вам обязательно понадобиться понимание, того как компоновать элементы, как подбирать цвета и т.п. Ниже приведен список тем, по которым вы можете расширить свои знания, чтобы понимать техническую часть проектирования дизайна.
Композиция в веб-дизайне
Юзабилити
- Создание модульной сетки
Шрифтовая пара
Правило внутреннего и внешнего
Якорные точки
Принцип доминанты
Сайтов, рассказывающих о дизайне и выше приведенных правилах больше чем даже нужно. Однако в большинстве своем, каждая новая статья это переписывание уже имеющегося материала. При этом большинство таких копий либо рассказывают все очень поверхностно, либо просто копируют контент с других отечественных или зарубежных ресурсов. Однако есть один интересный блог.
UX-Journal – На сайте собрано много курсов по веб-дизайну. Ссылка ведет на один из таких курсов, но далеко не единственный (поищите и найдете на сайте другие). Курс состоит из более чем 30 уроков, каждый из которых поэтапно дает введение в основы разработки интерфейсов. Уроки бесплатные, и являются “рекламой” для их платных курсов. Но от этого не становятся хуже.
Вместо резюме
Безусловно, можно было бы добавить еще 100500 сайтов про дизайн, т.к статей и блогов на эту тему сопоставимо с числом сайтов в интернете. Но большая часть таких ресурсов рассказывает базовую, абстрактную информацию, которая выглядит “очень умной“, но как ей в действительности воспользоваться неизвестно. В этой статье я собрал минимум инструментов, от которых точно будет толк. Я надеюсь)
Но если вы знаете что-то еще, то пишите в комментариях. С радостью добавлю. Если ресурс действительно полезный.