Лого vc.ru

«Дизайн в цифровой среде»

«Дизайн в цифровой среде»

Создатель сервиса Tilda Publishing Никита Обухов запустил онлайн-курсы по веб-дизайну «Дизайн в цифровой среде». Как отмечает автор, опубликованные материалы научат создавать современные сайты для себя или для клиентов.

С разрешения Обухова vc.ru публикует первую лекцию курса — «Основные этапы работы над веб-проектом».

Поделиться

Каждый этап дизайн-процесса содержит две стадии: дивергентная (расширение) и конвергентная (сужение). Этап начинается с продуцирования большого количества вариантов, затем происходит отсеивание и фокусировка. В конце каждого этапа мы получаем промежуточный результат: структуру сайта, прототип, дизайн-решение и так далее. Из промежуточных итогов складывается конечный продукт.

Соблюдение этого сценария и выдерживание последовательности — некоторая гарантия получения удовлетворительного результата.

Рассмотрим каждый этап.

1. Идея и структура сайта

Основная идея и задача сайта. Одна страница или несколько? Структура сайта, основные блоки

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

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

Делаем вывод, что недостаточно просто хороших картинок с подписями, нужен текст — подробные описания исходных данных, процесса, объяснения и обоснования решений. Также понимаем, что проектов много, но показывать все необходимости нет. Концентрируемся на самых масштабных. И еще момент, нужно сделать акцент на команде, объяснить, почему они эксперты в своем деле.

Не уходите в сторону анимации, украшательств и спецэффектов, определите главную идею, суть — что затронет посетителя эмоционально, что его впечатлит и вдохновит.

Пример. Разработка лендинга для школы дизайна. Страница должна объяснить будущим студентам и их родителям кто такой дизайнер.

Проблема: Школьники хотят быть дизайнерами, но зачастую не понимают специфику профессии, какие есть направления в дизайне, чем они отличаются.

Задача: Помочь будущим студентам разобраться в специализациях и понять какая именно им подходит.

Идея: Что если выделить несколько основных направления дизайна: интерактивный дизайн, графический, промышленный и взять интервью у трёх самых крутых представителей? Личные истории очень эмоциональны и хорошо работают. Рассказать чем они живут, как добились успеха, добавить классные фотографии. Людям будет интересно прочитать, они для себя увидят, что это за человек, близок он, вдохновляет ли его образ жизни.

Откройте текстовый редактор и запишите структуру в виде списка. Оцените объем и подумайте можно ли будет уместить всю информацию на одной странице. Если информации много, то сайт нужно сделать многостраничным. В этом случае подумайте какие разделы вынести в меню.

Нюанс: не пишите главную страницу как начало «дерева». Пусть страница «контакты» будет иметь тот же уровень, что и «главная». Это поможет, когда вы будете делать навигацию.

Обычный текстовый редактор или лист бумаги — подходящие инструменты для того, чтобы написать структуру:

2. Исследование

Сайты конкурентов. Кросс-категории. Вдохновляющие примеры

Исследование — это способ превратить неорганизованный творческий процесс в технологичную цепочку действий, которые приводят к предсказуемому результату. Подробно мы рассказываем об этом в лекции «Виды исследований». Сейчас остановимся на ключевых моментах.

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

Кросс-категории. Если вы делаете сайт спектакля, посмотрите другие сайты спектаклей. Не находите хороший сайт спектакля, возьмите близкую категорию: сайт оперы или современного танца. Если нужно рассказать о футбольной команде, то можно использовать приемы, найденные на сайте хоккейной команды или регби.

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

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

Примеры главных и внутренних страниц хороших сайтов:

Прислушивайтесь к себе и разбирайтесь, что именно вам нравится. Может быть удачные фотографии, хорошая типографика или сочетание цветов. Ищите выразительные приемы, которые можно использовать в работе. Здесь нужно смотреть на все сайты подряд, без привязанности к специфике вашего бизнеса.

Ниже ссылки на ресурсы, где собраны хорошие образцы:

3. Эскиз сайта или прототип

Что такое прототип. Примеры прототипов. Как рисовать прототип, типовые элементы

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

Эскиз или прототип — это схематичное изображение блоков, из которых состоит сайт. Ваш визуальный сценарий.

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

Примеры того, как выглядят нарисованные прототипы

Чтобы нарисовать прототип, используйте базовый набор стандартных элементов. Текст изображается прямыми линиями, заголовок рисуем чуть толще. Картинка — прямоугольник с перечеркнутыми линиями, управляющие элементы — как маленькие кнопочки. «Шапка» — полоска сверху. Слева, например, штрих потолще — логотип, а справа пять штрихов — пункты меню.

Совет: не рисуйте прототип слишком большим. Например, на листе А4 ширина окна должна быть 5-6 см. Лучше рисовать компактно и схематично, а на полях написать комментарии.

Старайтесь рисовать аккуратно — будет легче воспринимать. Обычно идей много, поэтому сделайте несколько вариантов и потом обсудить с коллегами, какой лучше.

Обложка. Линия потолще — заголовок. Тонкие линии — краткое описание. Короткие полоски сверху — меню

Изображения обозначаются перечеркнутыми прямоугольниками. Текст — прямыми линиями

Если картинка будет во весь экран, то так и нарисуйте — от края до края

Текст в колонках. Жирные линии — подзаголовки

Подробнее для чего нужен прототип, как использовать его при разработке дизайна и при общении с заказчиком, читайте в лекции « Руководство по использованию прототипов в дизайне сайта».

4. Содержание

Где взять информацию для сайта. Как написать текст для сайта: ключевые пункты. Стиль текста

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

О новом подходе к подаче информации в интернете, читайте в лекции « Цифровой сторителлинг».

Прежде всего, ответьте на вопрос: «Почему я хороший?»

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

Расшифруйте запись сами или наймите исполнителя. Стоит это около 20 рублей за минуту, найти человека можно на youdo.com. За небольшую дополнительную плату, текст отредактируют и у вас, наконец, появится буква.

Совет. Пишите все тексты в текстовом редакторе, а не на сайте. Не занимайтесь написанием текста во время дизайна страницы или сайта. В текстовом редакторе намного быстрее редактировать: что-то вырезать, скопировать, переместить. Делать дизайн намного легче, когда текст готов.

Как написать текст для сайта. Если вы пишете текст самостоятельно, воспользуйтесь следующей схемой:

  • Напишите короткий текст о себе, своей компании. Это должна быть одна фраза, которая четко и ёмко формулирует, чем вы занимаетесь. Например, Tilda Publishing — сервис, который помогает создать впечатляющий сайт без технических навыков.
  • Напишите чуть более развёрнутый текст. Объясните, чем вы занимаетесь. Формулируйте просто — так, как если бы вы рассказывали это приятелю за чашкой кофе — максимально понятным языком.
  • Выделите три основных фишки — почему любят вас или ваш продукт.
  • Опишите преимущества. Расскажите, с помощью чего ваш продукт решает проблему клиента, дайте детали.
  • Подумайте о заголовках. Хороший прием — формальные заголовки, типа «Команда», «Контакты» и так далее поменять на эмоциональные. Например, вместо «Новости» написать «Будь в курсе», вместо «Контакты» — «Скажите привет».
  • Возьмите отзывы. Попросите ваших самых лояльных клиентов сказать пару слов о вас. Отлично работает.

Не пишите избитые фразы, типа: «молодая, динамичная, развивающаяся команда».

  • Придумайте три ключевых цифры, люди любят цифры. Но старайтесь, чтобы они были осмысленными, понятными и что-то сообщали пользователю. Избегайте абстрактных величин, типа: обслужили 1000 клиентов, выпили 200 литров кофе, продали 38 000 плюшевых медведей. Хороший пример: 7,5 — средний балл IELTS среди наших выпускников. 3 минуты — копируется фильм с одного устройства на другое при помощи приложения.
  • Покажите команду, если она сильная. Личность всегда интересна, реальным людям доверяют больше, чем абстрактной компании.
  • Расскажите о партнерах или заказчиках, если ими можно гордиться.
  • Укажите специализацию. Если в вашем баре большой выбор крафтового пива, отметьте это отдельно.

Стиль текста. Придерживайтесь информационного стиля. Не растекайтесь мыслью по древу — говорите коротко и только важное. Большой текст никто не читает. Используйте принцип обратной пирамиды — сначала скажите главное, потом добавьте детали. Тут хорошо работает связка заголовок и описание. Заголовок должен привлечь внимание и передать суть, описание — расширить и дополнить сообщение.

Смело убирайте вводные конструкции, избегайте клише и канцеляризмов. Используйте сервис glvrd.ru — он помогает очистить текст от словесного мусора, проверяет на соответствие информационному стилю.

Общий совет: если вы совсем не умеете писать, наймите копирайтера. Это стоит относительно недорого. Уже он будет брать у вас интервью и предоставит вам текст. Только не забудьте попросить сразу сократить его в три раза.

5. Дизайн

Утверждение дизайна с заказчиком. Где взять хорошие фотографии для сайта. Навигация на сайте. Что делать с логотипом. Подбор шрифта и шрифтовых пар. Как сделать сайт стильным

На этапе дизайна объединяются все предыдущие стадии. Прототипы оборачиваются в уникальный визуальный стиль и подход к коммуникации, наполняются контентом и продукт обретает свой финальный облик.

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

О том, как использовать законы композиции в дизайне сайта, как работать с цветом и как применять модульные сетки, читайте в лекциях:

С заказчиком, как правило, утверждается дизайн-решение главной страницы и двух-трех внутренних. После того, как утверждена основная концепция, начинается проработка деталей: рисуем иконки, заказываем фото и видеосъемку, корректируем тексты, согласно дизайну.

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

Ваша задача — сделать цельный продукт.

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

Пример удачного сочетания фотографии и заголовка на обложке. Скриншот с сайта bemyeyes.org

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

Лучше сфотографируйте себя и своих коллег, чем искать готовые картинки по запросу «успешный предприниматель». Наймите фотографа или иллюстратора. Известные иллюстраторы и фотографы стоят дорого, но на рынке много относительно недорогих профессионалов, они с удовольствием для вас поработают и у вас сразу появится хорошее наполнение для сайта.

Один из трендов современного веба — «плоский» дизайн, частью которого является флэт-иллюстрация. Иллюстрация отлично справляется с двумя функциями: она информативна (информацию удобно и легко воспринимать) и украшает проект, задает ему стиль. Подробнее читайте в лекциях:


Навигация. Рисуя меню, убедитесь, что оно визуально хорошее: не слишком большое, не перегружает всю страницу. Пунктов меню не должно быть много, лучше всего не больше 5. Смело укрупняйте разделы. Названия делайте короткими. Три слова как пункт меню явно не годится. Они должны считываться с первого взгляда.

Пять — оптимальное число для пунктов меню

Логотип должен быть горизонтальным. Вертикальные логотипы в вебе работают плохо. Как правило, логотип располагается в меню, а оно не должно занимать много места на экране.

Если логотипа у вас нет, то просто напишите название проекта каким-то не системным шрифтом, типа Proxima или Futura. Не мучайтесь, не заморачивайтесь с логотипом, если у вас ограниченный бюджет. Сейчас это так не так важно, как общее впечатление от сайта. Подумайте лучше о фотографиях и общем стиле.

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

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

Примеры удачных шрифтовых сочетаний:

Самое верное — взять разные гарнитуры из одного семейства, например PT sans и PT serif

Традиционное сочетание: шрифт без засечек для заголовков и с засечками для текста. Proxima Nova и PT serif

Иногда, в качестве приема, шрифт с засечками используют для заголовков. Georgia и Roboto

Подробнее о шрифтах, основах типографики и принципах верстки читайте в лекциях:

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

Подробнее об аккуратности читайте в « Одиннадцати правилах хорошей верстки».

Убедитесь, что на странице достаточно «воздуха» — вокруг текста и картинок есть пространство, они не слипаются и не мешают друг другу

Если используете дополнительные цвета, делайте это очень аккуратно

Обратите внимание на количество используемых стилей, их должно быть немного

Старайтесь быть аскетичным. Чем проще вы сделаете, тем меньше будет ошибок и сайт получится стильным.

Используйте фирменные цвета. Но это не значит, что нужно покрасить все в разные цвета. Наоборот, соблюдайте правило, что 90% — это черный и белый и 10% какого-то активного цвета. Один дополнительный цвет — лучший вариант. Три использовать нельзя. Два очень аккуратно.

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

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

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

6. Реализация

Современные инструменты для создания сайта. Этапы технической реализации. Что убивает ваш дизайн

После того, как макет нарисован, согласован и утвержден, его нужно превратить непосредственно в сайт — перейти к технической реализации.

Традиционный процесс технической реализации состоит из следующих этапов.

HTML-верстка. Верстальщик сначала в текстовом редакторе пишет код с помощью языка разметки HTML, а затем оформляет код с помощью каскадных таблиц стилей CSS. В результате вы получаете макет в html-формате. Его еще нельзя редактировать, но уже можно открыть в браузере.

Интеграция верстки в систему управления сайтом (CMS). Эту задачу выполняет программист. Верстка превращается в шаблоны, которые можно наполнять и редактировать. Готов сайт, который можно поддерживать. Вся функциональность готова.

Наиболее популярные CMS: WordPress, Bitrix, Drupal, Joomla.

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

Наполнение сайта контентом. Как правило, окончательное наполнение осуществляет контент-менеджер — сотрудник клиента, который в дальнейшем будет поддерживать сайт. Наполнение происходит с помощью админки системы управления сайтом через визуальные редакторы («визивиги», WYSIWYG — What You See Is What You Get).

Нужно быть готовым к тому, что на каждом этапе качество вашего дизайна будет теряться. Вы получили идеальную картинку на макете и чем больше у вас энергии и решимости, тем меньше потеряется в процессе реализации. Если нет сил, макет станет на 40% хуже. Если энергии очень много, то потеря будет 5%. Но в любом случае нужно настроиться что потери будут.

Техническая реализация — это борьба на выдержку.

На что обратить внимание, чтобы сохранить исходное качество дизайна

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

Интеграция. Во время интеграции часто выясняется, что какие-то решения просто невозможно реализовать технически.

Наполнение контентом. Сайт невозможно прорисовать от начала и до конца. Поэтому дизайнер подбирает и ставит фотографии и тексты только как образец. Например, заказчик продает деревянные дома. Дизайнер нарисовал страницу дома, поставил текст, качественные фотографии. Но таких страниц может быть 150. И если контент-менеджер неквалифицированный, то фотографии могут быть плохо обработаны, криво кадрированы. Это портит весь вид.

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

Дизайн должен быть устойчивым.

После того как макет сверстан, интегрирован в CMS и наполнен контентом, ваш проект закончен. Тем не менее, даже после окончания всех работ, старайтесь поддерживать отношения с клиентами. Не отказывайте в просьбе проконсультировать их о том, как правильно поддерживать сайт и наиболее эффективно развиваться в digital-среде. Бизнес во многих сферах часто строится на доверии. Индустрия веб-дизайна не исключение — лучшие клиенты чаще всего приходят по рекомендации.

Популярные статьи
Показать еще
Комментарии отсортированы
как обычно по времени по популярности

Наткнулся на Тильду несколько дней назад, а тут теперь статья от них.
Этот подход - это лучшее, что я видел в интернет-маркетинге за последнее время.

Видимо мы с автором читаем одни и те же книги, восторгаемся одними и теми же вещами.

От души респектую.

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

Сейчас обсуждают
Maga Abdurakhmanov

1. Google Authenticator на часах, очень удобно, что всегда под рукой. За телефоном обычно надо лезть
2. SMS коды, тоже самое что Google Authenticator
3. Нотифаи, настроенные в соответствии с важностью, не надо лезть за телефоном ты сразу видишь, особенно удобно с встречами
4. Не отвлекает людей вокруг звуки твоего телефона (я его всегда на тихом режиме держу теперь)
5. Будильник в часах будит только тебя виброй
6. Если забыл телефон дома и ушел, часы напомнят виброй
7. Управление музыкой, не надо искать телефон, погромче или на паузу поставить
8. Когда едешь на велосипеде, а тебе пишут смс/в телеграм, можно голосом ответить с часов, не доставая телефон
9. Тречит сон и шаги, так-как часы всегда на запястье (7 дней на зарядке)

Есть на рынке другие часы, которые это могут?

От $740 млн до $40 млн за один год
0
Nikolay Kachev
Tredwear

Как будто балтику 9 рекламируют, а не напиток для интеллектуалов. Типа наебенься с нами чувачок

Компания «Альянс» показала на бутылках своего сидра героев знаменитых картин в состоянии опьянения
0
Sp Soul
ITSys

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

Штаб-квартира: Петербургский офис игровой студии Playkot
0
Аркадий Мамулян

>сформирована за счет гос субсидии

а можно поподробнее?

ФСБ изъяла документы в офисе «Почты России» из-за премии гендиректору компании
0
Konstantin Kharitonov
Cerebro

Вот что написано в описании к видео - "Unfortunately, we couldn’t make it to TED, but we wanted to share one of the things that we’d planned to share at the talk. This is a game we’re playing around the office right now"
То есть вся соль - вета им делала контент для гаймплай или визуализировала файковый ролик?

The Information сообщило о подделке демонстрационного видео AR-очков Magic Leap
0
Показать еще