Языковой проект Star English
Год: 2010
Адрес сайта: www.starenglish.ru
Главная страница - яркая подача материала
 
Прототип сайта - главная страница
 
Дизайн - процесс создания дизайна сайта
 
Внутренняя страница - обучение
 
Внутреняя страница - Language Lab
Описание
Star English - это казанский проект, направленный на тестирование и повышение уровня знания английского языка в молодёжной среде в связи с приближающейся Универсиадой 2013-го года.

Цели сайта:
- Поддержка программы Star English по обучению английскому языку;
- Создание он-лайн площадки для обучения с предоставлением аудио-видео материалов, тестов, обучающей литературы;
- Продвижение партнерских проектов LCCI и Language Lab, как наиболее современных методов тестирования и повышения уровня знаний английского языка.
Проделанная работа
Создание сайта:

1. Прототип сайта.
У заказчика уже были готовы предварительные макеты дизайна сайта, которые легли в основу прототипа и помогли точно определиться с тем, что именно нужно. Потратив несколько часов в работе над прототипом с заказчиком за одним столом, было найдено единое представление будущего сайта. В течение пары дней прототип был разработан до конца и утвержден.

2. Дизайн.
Главные задачи на этапе создания дизайна:
- Грамотная расстановка акцентов в соответствии с целями сайта;
- Отражение тематики сайта;
- Создание веб-версии логотипа, оригинал которого в большей степени предназначен для полиграфии.

Только с 4-й итерации (после вдохновения дизайном Mozilla.org) был достигнут результат, который был представлен заказчику и оказался достаточно близким к финальному варианту.

Основные идеи дизайна:
- Крупный задний план, задающий тематику сайта;
- Передний план - контент размещен будто на полупрозрачной пленке, аккуратно наклеенной на стекло;
- Адаптированный для использования на сайте логотип проекта Star English;
- Разделенное главное меню - наиболее важные вкладки налево, остальные - направо (идея родилась с сайта CNN, где некоторые рекомендуемые вкладки выделены фоном);
- Четкое отделение интерактивных элементов от статических при помощи цветовой схемы;
- Заголовки - с засечками, тексты - без.

Идеи дизайна, не нашедшие выражения в конечном варианте:
- Логотип в виде транскрипции;
- Вшивание английских букв в русские слова;
- Фон в виде карты, отпечатанной на старом советском учебнике.

Результатом стали не только отдельные красивые страницы, но и целый набор правил и приемов для гармоничного оформления любых страниц сайта, которые могут быть добавлены позже.

3. Верстка.
Быстрый отличный результат - работа грамотного и опытного верстальщика.

4. Программирование.
Реализованные модули:
- Новости
- Фотогалерея
- Анкета и отзывы.

Наиболее сложные модули:

- Видеоуроки - набор сгруппированных видеоматериалов, сопровождаемых текстовым описанием. Могут использоваться видеоролики с youtube, а также файлы в формате FLV. В качестве FLV проигрывателя используется FlowPlayer. Превью для youtube собираются автоматически, для генерации превью FLV-файлов используется утилита ffmpeg. В администраторской панели сайта для запуска утилиты разработан отдельный модуль.

- Аудиоуроки - набор сгруппированных аудиоматериалов, сопровождаемых текстовым описанием. Используются аудиофайлы в формате MP3, проигрываемые с помощью аудио-плагина для FlowPlayer.

Также в администраторской панели добавлены модули для обработки анкет, отзывов. Подключен модуль управления баннерами.
В ролях
Проект-менеджер:
Денис Кислухин

Дизайнер:
Ханна Томилова (студия рекламы DeltaPro)

Верстальщик:
Надежда Шошева

Программисты:
Денис Кислухин,
Камиль Гареев
 
Есть вопросы?
Задавайте:

info@svarga.biz
RU-CENTER NIC-D