5. Концепция дизайна
Надеюсь, с текстом для сайта у вас получается. Сегодня мы с вами будем думать над концепцией дизайна нашего будущего сайта.
В чём заключается эта задача. У нас есть каркас в виде текстового документа. Теперь нам нужно этот текст каким-то образом разместить на сайте и разработать дизайн.
Для этого нужно попытаться представить, как бы вы хотели, чтобы выглядел ваш сайт. Но для новичков это абстрактное «представить» может оказаться довольно сложной задачей, поэтому я рекомендую вам пользоваться простым способом — подсмотреть.
Да, именно подсмотреть. Задача — найти в сети макет дизайна сайта, который вам нравится, чтобы, глядя на него уже создать свой собственный дизайн. Я не призываю вас слепо копировать найденный макет. Подобных макетов может быть множество и у каждого можно взять какой-то элемент, какую-то идею, и уже собрать свой уникальный сайт.
Помните, что совершенно не обязательно пытаться придумать что-то новое и что-то своё. Поверьте, 99% того, что вы можете придумать — уже придумано, просто вам ещё не встречалось. «Всё новое — это хорошо забытое старое» в дизайне работает безотказно.
Так же помните, что дизайн — это всегда субъективно. То, что нравится мне, может не нравиться вам, и наоборот. И это абсолютно нормально. У каждого человека есть свой вкус.
Осваивая web-дизайн, первое время я только и делал, что пытался повторить. Я искал примеры сайтов, которые мне очень нравились внешне или в отдельных элементах, и старался повторить. Так я набивал руку во владении инструментами и технологиями. И вам я рекомендую заниматься тем же самым, если вы только начинаете свой путь в этой сфере. Ищите примеры красивых работ на Pinterest, Behance, Dribbble и т. п.
Разглядывая профессиональные работы, вы прокачаете вкус и так называемую «насмотренность».
Добавлю, что дизайн в первую очередь классный тогда, когда выполняет свою функцию, когда он понятен пользователю и, попав на ваш сайт, он точно знает, что вы ему предлагаете и что от него требуется (целевое действие). А уже потом идёт эстетическая составляющая.
Закончим с лирическим отступлением и перейдём к поиску. Нам нужно придумать дизайн сайта-портфолио с вами в главной роли. Идём на выбранную площадку для вдохновения и ищем «portfolio web design» или что-то в этом роде.
Я остановился на вот таком варианте.
Я не буду его копировать 1 в 1, но общую концепцию определю так:
- светлый фон,
- моё лицо, фон удалён (вырежем в Photoshop'е),
- на фоне используем фигуры неправильной формы,
- используем яркие цветовые акценты.
С концепцией внешнего вида мы определились. Что дальше. Нужно подготовить материалы для страницы.
- Ваше фото. Желательно профессиональное, на однородном фоне, чтобы было легче убирать фон. Если подобных нет, выберите любую, которая лично вам очень нравится, я расскажу, как можно использовать своё фото по-другому.
- Фото или рендеры ваших работ, если вы связаны с дизайном. Цифры с показателями и результатами, если вы предлагаете услуги, например, в сфере SMM или рекламы.
- Подходящий клипарт. Фотографии / иллюстрации, иконки, подходящие по смыслу, с помощью которых мы оформим блоки текста.
Для подбора всего необходимого я обычно использую несколько бесплатных стоков. Если при работе с клиентом есть бюджет, можно использовать платные стоки.
Но помните, что самый лучший контент — это тот, который был создан специально для сайта. На этапе разработки прототипа вы можете взять стоковый контент в качестве референсов, чтобы показать клиенту идею и подробно описать, что нужно отснять, как обработать, чтобы получить «вау-результат». К сожалению, такое случается не часто в нише массового производства сайтов, т. к. получается и дольше, и дороже. Поэтому мы с вами пока остановимся на бесплатных стоках.
Фотографии и иллюстрации:
Иконки:
Видео:
Так же не забываем про Яндекс и Google, которые способны помочь в любой непонятной ситуации.
Что я подобрал для будущего макета
Вот такой набор получился у меня. Иконки я скачал с flaticon.com, иллюстрации с freepik.com, ну а фотку вытащил из старых архивов.
Поиск ведите по ключевым словам. Например, при поиске иконок я применял ключевые слова под соответствующие блоки:
Многие утверждают, что современные социальные сети вполне способны заменить частичный функционал сайта и заявляют о том, что сегодня нет необходимости иметь полноценный сайт. Но так ли это и стоит ли отказываться от неисчерпаемого источника поискового трафика из сети?
Для этого блока текста я искал иконку по ключу «social network».
Мы считаем, что нет! Обрубить себе отличный канал коммуникации и продаж, как минимум глупо, к тому же вашим клиентам будет намного удобнее посмотреть ассортимент товаров и услуг в чётко структурированном каталоге, нежели листать километровые ленты социальных сетей.
А для этого блока нашлась иконка по ключу «online shopping».
И так далее. Смотрите, о чём блок текста, к которому вы хотите подобрать иконку, выделяйте из него что-то главное и ищите. Только in english :)
Домашнее задание
Ну что ж, ваше домашнее задание будет подумать, каким вы хотите видеть ваш сайт, поискать чужие работы и взять для себя на заметку какие-то моменты, либо концепцию в целом.
И начинайте подбирать графику. На следующем занятии мы начнём собирать наш прототип в Adobe XD. Помимо этого мы поработаем с Photoshop и Illustrator, приводя к нужному нам виду фото, иллюстрации и иконки.