Новый дизайн
- 17 мая 2016
- 5 мин
- 2 640
Когда в 2013 году мы только начинали проект Академии, дизайн был не самым важным элементом. Тогда сайт делали быстро и максимально просто. Взяли Бутстрап и на нём собрали первый вариант, чтобы проверить, работает ли идея.
Идея оказалась рабочей, но следовало приложить ещё усилий. И завертелось: подготовка новых курсов, запуск интенсивов, механизмы проверок заданий, рост команды, ещё больше механизмов проверок заданий. Но задачи обновить дизайн и вёрстку мы не забывали и наблюдали за ними в нашем трекере, надеясь, что они сами собой выполнятся.

Фирменный стиль
Первым делом мы определились с фирменным стилем. Уже тогда мы испытывали сложности с использованием первого логотипа. Его сложно было использовать в разных формах. Невозможно было использовать фон под логотипом. И на печатной продукции он смотрелся плохо.

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

Мы объединили страницы карты обучения и списка курсов в одну и назвали её «Программа обучения». На этой странице список курсов расположен в линейном порядке — так лучше проходить курсы, если вы только начинаете.

У нас 40 курсов и нам нужен был дополнительный вывод списка курсов, в котором легко будет найти то, что нужно. Мы разбили курсы по категориям и перемешали их порядок по смыслу, а не по этапу прохождения. Таким образом все курсы о препроцессоре LESS вы сможете легко найти в своей категории. А курсы о технологиях, с помощью которых строятся сетки — в своей категории. Этот механизм лучше всего подходит для учеников знающих, чего они хотят.

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

Эта кнопка всегда отправит вас на задание, на котором вы остановились. Если перейти по ней с главной страницы или со страницы программы обучения, то вы попадёте на следующее задание или на следующий курс в программе обучения. А вот в списке курсов она будет работать в рамках категории. Поэтому в категории «Построение сеток» эта кнопка будет переходить между курсами про сетки.
Все интенсивы и мои интенсивы
Нас давно просили дать возможность переходить на лендинги интенсивов. Ну и правда, что скрывать, у нас три интенсива: «Базовый HTML и CSS», «Продвинутый HTML и CSS» и «Базовый JavaScript». Теперь ссылки на них вы найдёте в шапке.
Также мы добавили ссылки на переход в интерфейс интенсива, в котором вы участвуете. Этот блок появится при оплате интенсива.

Адаптивный, резиновый, мобильный
Ну и конечно мы не могли себе позволить сделать новую вёрстку плохо. Все новые страницы адаптируются под мобильное и планшетное состояния, и все они полностью резиновые, поэтому хорошо будут смотреться на любом разрешении.
Мы будем стараться улучшать доступность сайта и следить за тем, чтобы Академия работала без JavaScript.
Что дальше?
Впереди нас ждут изменения профиля и страницы каждого курса, а потом самое сложное — интерфейс заданий.
Если вы нашли ошибку на новых страницах или хотите нам предложить, что улучшить — пишите в комментарии или сразу ставьте ишью в ё-моё.
Похожие статьи
Центр карьеры HTML Academy. Итоги 2020
189 вакансий, 94 новых разработчика, отзывы выпускников и компаний.
Обзор тренажёра «Знакомство с HTML и CSS»
Рассказали о заданиях и испытаниях тренажёра, рассмотрели особенности курса.
Как мы делаем тренажёры
Мы встроили браузер в ваш браузер, чтобы вы писали код, пока пишете код.