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

​

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

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

Контакты

​

sergey.soloviev@inbox.ru

+7 (967) 006-72-02

О чём будем говорить

• Инструменты разработчика Google Chrome
• Жизненный цикл проекта
• Разработка идеи и формирование видения
• Анализ целевой аудитории
• Design-research и поиск референсов
• Формирование стиля
• Скетчинг
• Макетирование в Figma

Инструменты разработчика Google Chrome

• Инструменты разработчика позволяют в окне браузера просматривать HTML структуру веб-страничек, изучать применяемые к различным элементам правила стилей CSS, читать и отлаживать привязанный JS код.
• Если на каком-либо сайте заметили интересное дизайнерское решение Dev Tools всегда поможет вам выяснить как это сделано.
• Посмотреть, что за шрифт используется, что за цвет стоит в качестве background-color, какие к элементам применяются анимации и т.д.
• Также Dev Tools экспериментировать с оформлением, изменять страничку и применять новые стили прямо внутри браузера.

F12 или Ctrl + Shift + I

Эмуляция мобильного устройства

Стили выбранного элемента

Фактические значения свойств, вычисленное на основе CSS

Область просмотра иерархической структуры HTML

Кнопка интерактивного выбора элемента

Жизненный цикл проекта

https://webflow.com/blog/the-web-design-process-in-7-simple-steps - статья на английском

User eXperience (UX)

Опыт пользователя, опыт взаимодействия (англ. User eXperience, UX) — это восприятие и ответные действия пользователя, возникающие в результате использования и/или предстоящего использования продукции, системы или услуги (ISO 9241-210)

• Эмоции
• Предпочтения
• Убеждения
• Предшествующий опыт
• Физические и психологические реакции

​

5 уровней проектирования UX

1. Уровень стратегии — абстрактный уровень представленной модели. Список чётких ответов на вопросы, касающиеся желаний и ожиданий относительно будущего продукта, как со стороны потенциальных пользователей, так и заказчика.
2. Уровень возможностей представляет перечисление функциональных возможностей, которые будут доступны для пользователей.
3. На уровне структуры описывается взаимное расположение страниц веб-сайта, программных форм, окон и др. Ответы на вопросы «откуда», «куда» и «как».
4. Уровень компоновки. Реализацию абстрактной структуры продукта. Решение вопросов наиболее эффективного расположения различных элементов UI.
5. Уровень поверхности представляет собой внешний вид продукта с точки зрения конечного пользователя, то есть набор текста, картинок, ссылок, форм, вкладок, кнопок и прочего.

​

Value Proposition Design

Empathy Map

Визуальное оформление

​

"Все, что хорошо сказано, - моё"

Сенека Л.А.

Насмотренность

• Насмотренность — это ваш визуальный опыт. Благодаря ей в вашей голове формируется большая "библиотека" идеальных образцов, с которыми вы можете сравнивать всё остальное и откуда вы можете черпать вдохновение для создания своего дизайна.
• Референс – это пример сайта, образец, на который полностью или частично опирается ваш сайт.

​

https://cantunsee.space/ - тест по насмотренности

https://dribbble.com/shots/2908321-Nicole-Manson-Clothing-Design

https://dribbble.com/shots/5298824-K-R-A-I

https://dribbble.com/shots/5414524-Ocean-scrolling-animation

https://dribbble.com/shots/5495178-Message

Источники референсов

https://dribbble.com/

Dribbble

https://www.pinterest.com/

Pinterest

https://www.behance.net/

Behance

Мой аккаунт Pinterest

• 2018 Web Design�https://www.pinterest.ru/solovevserg/2018-web-design/
• Web Design�https://www.pinterest.ru/solovevserg/web-design/
• Generative Design�https://www.pinterest.ru/solovevserg/generative-design/
• Design�https://www.pinterest.ru/solovevserg/design/
• Complex Web Apps Design�https://www.pinterest.ru/solovevserg/complex-web-apps-design/

​

Награды в области web-дизайна

На этих сайтах можно посмотреть много примеров хорошего web-дизайна.

​

• https://www.awwwards.com/
• https://www.siteinspire.com/
• https://www.thebestdesigns.com/
• https://bestwebsite.gallery/

Скетчинг

• Скетчинг – создание зарисовок, визуальных схем вашего будущего сайта, с целью продумать композицию и наглядно выразить своё представление о его внешнем виде.
• Скетчи позволяют лучше представить процесс работы с вашим сайтом, позволяют на самом раннем этапе выявить неудобные моменты и проблемы UX.

Мой скетч :)

Выбор шрифтов

• А оформлении сайта как правило используется 2 гарнитуры (шрифтовая пара) в нескольких начертаниях – одна для заголовков, другая – для основного текста.
• Никогда не используйте на сайте больше 7 шрифтов с учётом гарнитуры, начертания и размера.

https://fonts.google.com/

Выбор цветовой палитры

• Цветовая палитра задаёт сайту тон и настроение, позволяет подчеркнуть специфику вашего продукта/занятия, решающим образом влияет на восприятие сайта.
• Выбрать цветовую схему для сайта можно несколькими способами:
• Подобрать цвета на основе цветового круга
• Выбрать одну из готовых палитр
• Заимствовать цветовую схему какого-либо существующего сайта

http://paletton.com/#uid=33E0a0kZLr7TtVOYRzMZOlyZEfl

https://colorhunt.co/

Выбор цветовых градиентов

• 300 Beautiful Color Gradients For All Your Design Needs

https://digitalsynopsis.com/design/gradients-for-photoshop-background-ui/

https://bearideas.fr/en/

Figma

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

Основные инструменты Figma

• Рамка (F)
• Фигуры: прямоугольник, эллипсы, линии, произвольные многоугольники (R)
• Текст (T)
• Перо (P)
• Комментарии (C)

Направляющие и автонаправляющие

• Направляющие служат для выравнивания элементов, позоволяют точно настроить отступы и расстояния между элементами.
• Автонаправляющие возникают сами во время выделения и перемещения элементов.
• Для создания постоянной направляющей нужно схватить за линейку слева или сверху и потянуть курсор на холст.

Виды макетов и приёмы вёрстки

Типы лейаутов

• Five boxes
• Featured graphics
• Cards
• Table

Карточный дизайн

Holy Grail Layout

Лейауты

• Flexbox-based
• Position: absolute
• Section-based

​

Tricks

• Full-screen background image
• Parallax effect
• Video-background
• Responsive features
• Media-requests
• Flexbox
• SVG
• Popup-menu

​

​

About And Inspiration

• https://digitalsynopsis.com/
• https://medium.com/tag/web-design
• https://ecomm.design/
• https://www.pinterest.ru/

​

Интересненькое

• https://digitalsynopsis.com/design/every-website-nowadays/ реальный ux

​

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

​

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

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

Контакты

​

sergey.soloviev@inbox.ru

+7 (967) 006-72-02