Новый дизайн

Когда в 2013 году мы только начинали проект Академии, дизайн был не самым важным элементом. Тогда сайт делали быстро и максимально просто. Взяли Бутстрап и на нём собрали первый вариант, чтобы проверить, работает ли идея.

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

Фирменный стиль

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

Вместе с новым логотипом мы сразу же определились со стилем, шрифтами и другими нюансами.

Первые результаты

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

Программа обучения и список курсов

На этом мы не остановились и переделали список курсов и карту.

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

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

Продолжить обучение

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

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

Все интенсивы и мои интенсивы

Нас давно просили дать возможность переходить на лендинги интенсивов. Ну и правда, что скрывать, у нас три интенсива: «Базовый HTML и CSS», «Продвинутый HTML и CSS» и «Базовый JavaScript». Теперь ссылки на них вы найдёте в шапке.

Также мы добавили ссылки на переход в интерфейс интенсива, в котором вы участвуете. Этот блок появится при оплате интенсива.

Адаптивный, резиновый, мобильный

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

Мы будем стараться улучшать доступность сайта и следить за тем, чтобы Академия работала без JavaScript.

Что дальше?

Впереди нас ждут изменения профиля и страницы каждого курса, а потом самое сложное — интерфейс заданий.

Если вы нашли ошибку на новых страницах или хотите нам предложить, что улучшить — пишите в комментарии или сразу ставьте ишью в ё-моё.