Основные этапы работы над веб-проектом // Дизайн в цифровой среде

#1. Основные этапы работы над веб-проектом

Шесть шагов создания сайта, ссылки на нужные ресурсы и полезные советы

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

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

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

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

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

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

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

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

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

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

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

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

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

Роман Крихели

PROEKT AGENCY

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

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

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

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

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

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

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

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

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

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

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

Ярослав Шуваев

Product owner Альфа-Мобайл, подразделения Альфа-Банка.

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

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

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

Стоит помнить, что большинство исследований направлены в прошлое. Для создания новых идей и новых продуктов иногда лучше воспользоваться интуицией и различными креативными методиками (дизайн-мышление, прорывное мышление, ТРИЗ, латеральное мышление и т. д.)

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

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

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

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

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

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

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

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

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

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

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

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

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

Галерея изображений — перечеркнутый прямоугольник и управляющие элементы.

Видео традиционно обозначаем треугольником.

Ключевые особенности — схематичное изображение иконок и текст в колонках.

Отзыв — фотография и текст.

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

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

Содержание

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Дизайн

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

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

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

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

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

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

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

Александр Ковальский

креативный директор Creative People

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

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

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

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

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

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

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

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

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

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

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

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

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

Open Sans и Georgia

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

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

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

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

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

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

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

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

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

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

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

Реализация

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Подведем итоги

Идея и структура. Определите основную суть и задачу. Проанализируйте поле деятельности заказчика. Запишите структуру в виде списка, поделите на разделы при необходимости.

Исследование. Изучите сайты конкурентов и сайты из кросс-категорий. Рассматривайте и вдохновляйтесь примерами просто хороших сайтов, подмечайте интересные приемы.

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

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

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

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

Текст: Никита Обухов
Дизайн и верстка: Ира Смирнова

Введение

Задача и идея

Дизайн-исследование и фокусировка

Оcновы графического дизайна

Прототипирование

Контент