- Роль UX/UI дизайнер и UI разработчик
- Дата запуска Май 2019
- Сайт kagesoft.com
Контекст
Kagesoft занимается разработкой программного обеспечения на рынке США с 2012 года. За это время компания существенно расширила список своих услуг и сервисов и в конце 2018 года получила обновленный логотип и фирменный стиль.
Задача
На тот момент сайт компании уже слишком устарел, и требовал обновления согласно новому стилю. А также необходимо было расширить список услуг и добавить на сайт новый раздел «Портфолио» с описанием выполненных проектов.
Решение
Поэтому ко мне обратились коллеги из Kagesoft с просьбой сделать современный дизайн сайта, используя новый фирменный стиль.
Новая версия сайта должна выполнять задачу привлечения потенциальных партнеров и клиентов для компании.
Моя роль
Моя зона ответственности на проекте заключалась в разработке информационной архитектуры и навигации сайта; в создании адаптивного дизайна сайта; и в разработке HTML/CSS/JS-кода в соответствии с требованиями WCAG 2.0 и стандартам W3C.
Я сделал полностью новый сайт с нуля, который получил максимальную оценку в тесте Google PageSpeed Insights — 100 баллов.
Кратко об итогах работы
Свою работу над проектом я начал с небольшой подготовки: просмотрел новый фирменный стиль и текущий сайт компании, ознакомился с пожеланиями/требованиями клиента к новому сайту, провел быстрый анализ сайтов компаний-конкурентов.
В результате этого рисерча я детально ознакомился с нюансами проекта и решил, что действительно смогу реализовать все задачи клиента, с которыми он ко мне обратился. Поэтому наша дальнейшая работа проходила по таким этапам:
- Первичное анкетирование клиента (список конкурентов, референсы, описание целевой аудитории, список KPI). Анализ сайтов конкурентов. Составление технического задания на разработку нового сайта.
- Разработка информационной архитектуры и навигации. Подготовка контента на сайт. Прототипирование. Дизайн главной страницы и презентация новой концепции. HTML/CSS/JS реализация главной страницы.
- Дизайн всех внутренних страниц сайта. HTML/CSS/JS реализация внутренних страниц. Тестирование, проверка текстов. Запуск сайта.
- Работа над этим проектом была завершена и новый сайт был запущен 21 мая 2019 года в публичном доступе на домене kagesoft.com.
Сделав ребрендинг компании, мы обратились к Артему для разработки нового вебсайта. Это был наш первый проект с Артемом, поэтому до подписания договора мы провели значительное время, обсуждая наши требования и предложенный Артемом подход.
В процессе разработки Артем открыто принимал отзывы о проделанной работе, отвечал на вопросы, предлагал новые решения.
Огромное количество времени у нас ушло на согласование элементов дизайна, особенно фотографий для всех страниц сайта (потому что это весьма субъективный аспект), и Артем очень терпеливо работал с нами над поиском устраивающих нас вариантов.
В целом, мы остались довольны проделанной работой и рекомендуем Артема как хорошего профессионала!
Анализ конкурентов
Перед составлением подробного технического задания на разработку нового сайта, нужно было провести анализ сайтов конкурентов. С помощью запроса «Custom Software Solutions» в гугле, были выбраны семь сайтов конкурентов для аудита.
Я составил сравнительную таблицу по основным критериям: структура главного меню, выделенная кнопка «Contact Us» в шапке сайта, наличие большого фото/видео на первом экране, блок на втором экране, наличие каталога услуг, логотипов клиентов, блока с проектами в портфолио, наличие текста о компании, наличие формы контактов перед футером. Кроме этого, подсчитал общее количество блоков на главной странице каждого сайта, количество пользовательских экранов, которое она занимает.
В последней колонке этого документа я добавил новый сайт Kagesoft и совместно с клиентом мы утвердили список того, что необходимо добавить на новый сайт.
Таким образом, на данном этапе у меня и у клиента сформировалось четкое понимание какой будет новая версия сайта и какие акценты мы сделаем на новой главной странице.
Навигационная структура
После анализа сайтов конкурентов была составлена информационная архитектура нового сайта. Также разработан документ со списком всех категорий и страниц на сайте. Для каждой страницы были заполнены самые основные поля (name, url, title), а чуть позже и другие поля (description, keywords).
Главная навигация сайта будет расположена в шапке сайта справа от логотипа. Поэтому там будут размещены ссылки на основные категории (Services / Portfolio / Company), и будет реализовано выпадающее меню со списком внутренних страниц для каждой категории. Такое решение очень удобно и понятно для пользователей, а также его реализация не займет много времени, что было важно для клиента.
Также отдельно от главной навигации я проработал меню навигации в футере каждой страницы. Здесь будут показаны все категории и подстраницы, т.к. их не слишком много и они все помещаются в одном экране десктопа.
Путь пользователя
Итоговая схема движения пользователя по сайту выглядит вот так:
Из особенностей тут можно отметить, что:
- Страницы услуг дополнительно связаны между собой ссылками в тексте страниц.
- Страницы с описанием выполненных проектов перелинкованы со страницами использованных услуг в этом проекте. И наоборот, на страницах услуг есть ссылки на проекты в портфолио.
- Форма обратной связи для заполнения заявки находится на каждой странице — тем самым побуждает посетителя сайта отправить запрос на разработку проекта и стать клиентом компании Kagesoft.
Бумажные скетчи и прототипы
Имея четкое представление структуры сайта и описанных пользовательских сценариев я начал рисовать первые скетчи просто на бумаге. Через несколько итераций у меня получилось прийти к лучшему варианту расположения блоков и их последовательности.
Потом на основании этих скетчей, я создал несколько версий прототипа главной страницы сайта для экранов разной ширины (1400 px, 1000 px, 320 px).
Я специально использовал в прототипе только оттенки серого цвета, без каких-либо ярких акцентов, чтобы максимально сконцентрироваться на контенте.
На мой взгляд порядок изложения в тексте и порядок блоков на главной странице сайта очень важен при первом знакомстве посетителя с компанией. Мне хотелось сделать так, чтобы просматривая и читая главную страницу, посетитель сайта (а это будущий клиент или партнер) как бы погружался в историю развития компании, узнавал ее преимущества и переходил на страницы описания услуг и сервисов, на страницы выполненных проектов с отзывами клиентов.
Дизайн-принципы
Эти три принципа дизайна легли в основу всего проекта:
Вовлекающий дизайн
Каждая страница начинается с уникальной фото-метафоры, которая связана по смыслу с последующим текстом на странице. Кроме этого все текстовые описания услуг и проектов дополняются схемами и графиками, выполненными в едином стиле для поддержания общего визуального кода на сайте.
Свободный дизайн
Каждый блок и схема на сайте «живые» и адаптируются как под мобильный экран так и под большой десктопный монитор. Тексты и изображения на каждой странице имеют большие поля и отступы, они могут легко сжиматься либо расширяться, чтобы гармонично выглядеть на экране любого устройства.
Масштабируемый дизайн
Каждая страница сайта состоит из отдельных независимых блоков, в которые можно добавлять новые единицы контента. В будущем, на сайт легко можно будет добавить новые страницы услуг, новые проекты в портфолио. Также создан общий гайдлайн стилей, соблюдая который, сайт может быть масштабирован легко и просто на сколько это будет необходимо.
Дизайн-процесс
1/ Персональное фото для каждой страницы сайта
На главной странице в первом экране расположена карусель с ссылками на страницы услуг. Чтобы сделать сайт более запоминающимся я решил создать для каждой услуги персональное визуальное решение, в основе которого лежат фотографии из реального мира. Например, для страницы Web Application Development я выбрал фотографию производственного процесса в настоящем цеху на заводе, где изображено множество искр и работает промышленное оборудование. Ведь разработка любого программного продукта совмещает в себе множество искр от менеджеров и клиентов, благодаря которым создается этот продукт. Еще, например, страница Enterprise Integration получила фотографию с видом на небоскребы, чтобы визуально передать атмосферу индустрии, для которой эта услуга предназначена.
Такой подход намного лучше воспринимается посетителями сайта, в сравнении с использованием обычных стоковых фотографий, например, по ключевому запросу «Software development» на Shutterstock. Сравните два варианта:
После утверждения этой концепции с клиентом, я решил использовать фото-метафоры также и на страницах услуг, как фоновое изображение под заголовком страницы. Таким образом, у посетителя формируется ощущение целостности дизайна всех страниц сайта.
Для остальных страниц я также подобрал фоновые изображения и фотографии, чтобы следовать принятой концепции.
В итоге, чтобы на сайте появилась вся необходимая графика потребовалось пересмотреть, наверное, тысячу фотографий и около 200 штук из них я пробовал использовать в дизайне сайта. Этот этап занял почти треть всего времени работы над проектом. Это был настоящий челлендж!
2/ Адаптивные схемы и графики
В подготовленном тексте для сайта были графики и схемы практически для каждой страницы. Некоторые из них можно было сделать с помощью последовательных карточек в формате «Иконка+заголовок+текст». Но для нескольких страниц я отрисовал абсолютно новые варианты.
В процессе работы над ними я учел тот факт, что каждая схема должна быть читаемой и понятной на маленьком мобильном экране (шириной всего 320 пикселей).
3/ Концепция последовательных текстовых описаний
Идея концепции связанных между собой текстовых блоков на странице родилась в процессе подготовки контента для сайта.
Дело в том, что процессы или методологии работы команд разработки очень часто описываются в виде последовательных этапов. И тут получается сухой обычный текст — абзац за абзацем.
Моя задача состояла в том, чтобы дополнить такое описание иконками или графикой, а также явно показать смысловую связь между абзацами текста. И кроме этого, я сделал эти блоки адаптивными и не теряющими смысла даже на мобильных экранах.
Например, блок Build vs Buy на странице Custom software solutions.
Например, страница ADA compliance вся состоит из последовательных блоков с большими графическими элементами.
Например, страница Company и блок с описанием Engagement and Support Models.
4/ Акцентные блоки
Использование ярких фоновых изображений в дизайне блоков — это прием, который добавляет веселое настроение на каждую страницу сайта. Такие блоки расположены практически в самом конце страницы и делают акцент на важном тексте либо привлекают внимание к другим разделам сайта.
К тому же, в процессе работы над первыми двумя-тремя страницами родилась идея использовать в этих блоках фотографии из живой природы: зеленые растения и листья. На мой взгляд, получилось очень интересно и ярко, учитывая что это корпоративный сайт компании разработчика программного обеспечения.
Создание GUI
После того, как был готов дизайн главной страницы я сделал общий гайд по стилю сайта (шрифты, цвета, заголовки, иконки, блоки), который крайне важен для разработки (HTML/CSS/JS).
В этом макете я показал дизайн всех интерактивных элементов таких как ссылки, кнопки, элементы форм. Кроме этого оформил их разные состояния (hover/active/focus).
Особенно важно было проработать все состояния меню в шапке сайта:
- Два бекграунда: прозрачный фон (в самом верхнем положении страницы) и белый фон (в момент когда страница немного проскролена вниз).
- Два вида адаптивного меню:
- Первый вид для экрана 320 пикс — меню скрыто под иконкой гамбургера и показывается на белом фоне только по клику на иконку.
- Второй вид меню для экрана шире 768 пикс — меню полностью показывается в шапке сайте, а иконка гамбургера скрывается.
- Внешний вид выпадающих подменю для разделов Services, Portfolio, Compliance.
- Выделение активных пунктов меню, чтобы визуально показать пользователю на какой странице он сейчас находится.
HTML/CSS/JS реализация
1/ Общая схема сборки
Автоматическая сборка сайта была реализована с помощью таск-менеджера Gulp по следующей схеме:
- Вся svg-графика в виде отдельных иконок автоматически собирается в одном файле sprite.svg (и sprite.png для старых браузеров).
- Стили из Sass-файлов генерируются и минифицируются в один CSS-файл.
- Все файлы с Javascript-кодом тоже собираются в один файл и минифицируются.
- Для каждой страницы сайта создается файл с критическими CSS-стилями.
- Фреймворк Mozilla Nunjucks генерирует готовые HTML-файлы со всеми критическими CSS-стилями и JS-кодом.
- Вся остальная графика (jpg/png-файлы) для сайта оптимизируется перед публикацией.
2/ Bootstrap + JQuery
По требованию клиента в верстке сайта использовалась библиотека Bootstrap 4.0 с JQuery. Это даже позволило ускорить время разработки, потому что за основу я взял заготовку с сайта getbootstrap.com.
Так как это полностью статический сайт, то конечно на Гитхабе статистика показывает 70% HTML-кода. Полностью весь сайт занимает объем 18,5 МБ на сервере (из них 14 МБ — это графика).
3/ Загрузка веб-страницы за 0.5 секунды
С помощью метода lazy load после загрузки HTML-кода все внешние CSS/JS-файлы и картинки никак не блокируют рендеринг браузером веб-страницы. Это положительно влияет на время отрисовки первого контента и на общий индекс загрузки веб-страницы.
4/ Кастомный шрифт
Отдельно стоит сказать про шрифт. Согласно фирменному стилю компании на сайте необходимо использовать кастомный шрифт Lato. Он подключается на каждой странице без блокировки отображения контента, и применяется к документу только после полной загрузки (метод FOUT, подробнее на css-tricks.com).
5/ Как успеть «загрузить» большую картинку в первый экран за 0 секунд
Отдельно стоит рассказать, как был решен вопрос с загрузкой больших изображений в первом экране каждой страницы. Дело в том, что обычный lazy load метод не подошел для картинки в первом слайде (на главной странице) и для фоновых картинок в первом экране на внутренних страницах. Потому что веб-страница со встроенными стилями загружалась и показывалась в браузере практически мгновенно, но при этом загрузка главной картинки длилась пару секунд, из-за этого первый экран страницы выглядел пустым и не совсем красивым в эти две-три секунды.
Решение оказалось совсем не сложным. В атрибут «src» для этих картинок, которые показывались сразу после загрузки я вложил base64-код, который был сгенерирован с уменьшенной JPG-версии каждой картинки с показателем качества «0». Таким образом удалось достичь небольших размеров base64-кода на каждой странице (около 20-40 КБ).
И отдельно для карусели слайдов на главной странице была написана логика предварительной загрузки фотографий для соседних слайдов, которые еще не отображаются на экране, но уже готовы показаться либо автоматически либо по клику пользователя на стрелку-ссылку.
Валидация кода от W3C
Готовый HTML/CSS-код успешно прошел валидацию на сайте всемирного консорциума W3C.
Реализация правил WCAG 2.0
WCAG — это документ с рекомендациями и руководством по обеспечению большей доступности контента веб-сайтов для более широкого круга пользователей с ограниченными возможностями.
Новый веб-сайт Kagesoft следует всем требованиям второй версии этого документа и проходит тесты без ошибок.
Самый интересный момент, о котором я хотел бы рассказать подробнее, был в реализации карусели со слайдами услуг на главной странице согласно требованиям WCAG.
Дело в том, что следуя этим требованиям посетитель должен иметь возможность управлять перемещением по контенту веб-сайта с клавиатуры, например, с помощью клавиши Tab.
Ошибки в карусели «из коробки» на Bootstrap
И оказалось, что стандартная карусель в Bootstrap/JQuery не может правильно обеспечить передвижение по слайдам. Что я имею ввиду:
- В момент когда фокус попадает на один из элементов карусели автоматическая смена слайдов должна останавливаться. Но этого не происходит.
- Фокус переходит на контент внутри первого слайда (например, кнопку или ссылку), а затем на стрелки (элементы управления каруселью). Клик по стрелке меняет слайд внутри карусели, но нет возможности кнопкой Tab поставить фокус на контент в открывшемся слайде. Остается возможность только листать слайды вперед-назад, либо вынести фокус из карусели.
- Стрелка «Назад» всегда первой попадает в фокус. Это противоречит обычному направлению смены слайдов в карусели (справо-налево). Правильнее делать, чтобы стрелка «Вперед» первой получала фокус, ведь посетитель ожидает увидеть следующий слайд, а не предыдущий.
Ошибки в работе карусели на сайте W3C
К сожалению, на сайте W3C показан пример, который имеет такие же проблемы. И добавляет еще одну — нет возможности быстро пропустить карусель и перейти к следующему блоку, установив на нем фокус.
Если представить ситуацию, когда в карусели находится более 10 слайдов, то это будет настоящий UX-ад для пользователя, чтобы «перескочить» через карусель на следующий контент.
Решение для kagesoft.com
Я детально разобрался в механике работы карусели и разных пользовательских сценариях работы с ней (с помощью кнопки Tab). В результате, я пришел к выводу, что посетитель сайта должен иметь возможность:
- Поставить фокус на карусель (то есть на первом слайде) и она перестанет автоматически прокручивать слайды.
- Отпадает необходимость устанавливать фокус на стрелки, управляющие каруселью с помощью мышки, потому что в этом случае нет возможности установить фокус обратно со стрелки на контент в слайде (т.к. на экране появился новый слайд, а прошлый скрылся).
- При перемещении фокуса с контента слайда, он последовательно попадает на кнопки «Следующий слайд» и «Предыдущий слайд». Выбор любой из этих кнопок меняет слайд в нужном направлении и сразу ставит фокус на контент появившегося слайда.
- Если посетитель сайта не выберет ни одну из этих кнопок навигации в карусели, то фокус перейдет к следующему элементу на странице. Такое управление для пользователя намного проще и удобнее в сравнении с другими реализациями, о которых я рассказал выше.
Вот как у меня получилось сделать карусель на главной странице, чтобы ею было просто и удобно пользоваться с помощью кнопки Tab.
Google PageSpeed Insights: 100 баллов
Я уделяю максимум внимания качественному результату своей работы. Считаю, что сайт должен быть не только удобным и красивым, но особенно важно, чтобы он был быстрым. Я создаю сайты, которые получают оценку 100 баллов в тесте Google PageSpeed Insights.
Согласитесь, вам тоже приятно пользоваться сайтами, на которых страницы загружаются и показываются на экране менее чем за 1 секунду.
🤗
Спасибо за ваше внимание!