Проектирование web-сайта

​

Соловьев Сергей

frontend-разработчик Qoollo

Контакты

​

sergey.soloviev@inbox.ru

+7 (967) 006-72-02

Проектирование web-сайта

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

​

• Результатом сегодняшнего занятия должен стать действующий прототип нашего будущего сайта в онлайн-редакторе Figma.

Основные этапы проектирования

• Генерация идей
• Выбор идеи и её дальнейшая проработка
• Поиск и анализ имеющихся аналогов
• Выбор названия проекта
• Разработка логической структуры сайта
• Выбор референса, формирование дизайн-языка
• Скетчинг
• Макетирование и прототипирование

​

​

Генерация идей

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

​

В течении 5 минут запишите на бумаге все мысли на тему возможного проекта, приходящие вам в голову.

​

​

Выбор идеи

Придумав как можно больше идей, проанализируйте их на предмет двух вопросов:

​

• «Что может быть полезно и интересно людям?»
• «Что интересно мне?»

​

Выберите одну (или две идеи)

​

Функционал

Когда идея выбрана, необходимо раскрыть её содержание.

​

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

Поиск имеющихся аналогов

• Нет смысла изобретать велосипед и тратить своё время на то, на что его уже успели потратить другие люди. Для поиска новых идей и получения вдохновения, нужно обязательно прочесать сеть на предмет имеющихся аналогов.
• Заходим в Гугл или любой другой поисковик и усердно ищем сайты на выбранную тему.
• Часто большую помощь оказывают подборки, топы и рейтинги. Например, «100 лучших сайтов и блогов про метал».

​

Найдите минимум 5 сайтов на выбранную или схожую тематику.

Анализ аналогов

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

Доработка идеи

Из отмеченных на других сайтах особенностях выберите наиболее полезные и интересные.

​

Добавьте ещё несколько пунктов к особенностям и функционалу вашего сайта.

Выбор названия проекта

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

​

Например, Metallum, Rumetal, web-metal, Metal-site, Чермет, Металстейдж, Метал о метал, Звон метала, Скрежет.

​

Придумайте не менее 10 названий и выберите наиболее подходящее.

Разработка логической структуры сайта

Логическая структура – это совокупность web-страниц и связей между ними. Проще всего её можно представить в виде схемы.

​

Структура сайта определяет ссылки, которые будут использоваться при навигации по сайту (роутинг)

​

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

Разработка логической структуры сайта

Выбор рефернсов

Для поиска рефернсов воспользуйтесь Pinterest, Behance, Dribbble. Полезные ключевые слова для поиска:

​

• Web design
• Landing page
• UI kit
• Web interface��Найдите не менее 5 подходящих референсов.

Формирование дизайн языка

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

• Красно-жёлтые градиентные кнопки
• Шрифты без засечек
• Белый текст на тёмном фоне
• Всюду закруглённые углы элементов
• Реалистичные тени блоков

Проанализируйте выбранный референс и сформулируйте основные положения своего дизайн-языка.

Скетчинг

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

​

Нарисуйте скетчи для каждой из страниц сайта.

Макетирование и прототипирование

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

​

• Прототипирование – создание анимированной интерактивной модели будущего сайта. Служит для проверки юзабилити и удобства использования.

​

Создайте макет или прототип будущего сайта (все разделы) в онлайн-редакторе Figma.

Порядок создания макета

• Сформировать цветовую палитру и заготовки шрифтов (из Google Fonts) на основе референса.
• Создать основные компоненты сайта, соблюдая правила вашего дизайн-языка.
• Создать базовый фрейм с хедером и футером.
• Используя подготовленные ранее компоненты, создать макеты всех страниц будущего сайта.
• Связать страницы ссылками при помощи инструментов прототипирования.
• Проверить интерфейс на удобство использования в режиме демонстрации.

Спасибо за внимание!

​

Соловьев Сергей

frontend-разработчик Qoollo

Контакты

​

sergey.soloviev@inbox.ru

+7 (967) 006-72-02