ВВЕДЕНИЕ 3
ГЛАВА I. ТЕОРЕТИЧЕСКИЕ ОСНОВЫ ВЕБ-ДИЗАЙНА. ВЕБ-ДИЗАЙН КАК УЧЕБНАЯ ДИСЦИПЛИНА 7
1.1 История возникновения и развития веб-дизайна 7
1.2 Классификация веб-сайтов и основные термины 10
1.3 Сравнительные характеристики графического и веб-дизайна 14
1.4 Компетенции обучающегося, формируемые в результате освоения
дисциплины/модуля 17
1.5 Средства обучения и формы наглядного представления учебной
информации в рамках дисциплины «Веб-дизайн» 20
ГЛАВА II. РАЗРАБОТКА МАКЕТА ВЕБ-САЙТА ДЛЯ СПОРТКЛУБА «КВОН» 23
2.1 Анализ аналогичных сайтов 23
2.2 Дизайн-концепция веб-сайта спортклуба «КВОН» 26
2.3 Основные этапы разработки сайта спортклуба «КВОН» 32
ЗАКЛЮЧЕНИЕ 37
СПИСОК ИСТОЧНИКОВ И ЛИТЕРАТУРЫ 40
СПИСОК ИЛЛЮСТРАТИВНОГО МАТЕРИАЛА 44
СЛОВАРЬ ТЕРМИНОВ 48
ПРИЛОЖЕНИЕ
В настоящее время, когда компьютерные технологии развиты настолько, что стало практически невозможно представить человека, не имеющего смартфон или компьютер, компаниям, предлагающим свои услуги, очень важно иметь представительство в сети Интернет. Любая организация или частное лицо, стремящиеся продать свои услуги, предоставляют возможность обратной связи через Интернет, будь это аккаунт/сообщество в социальной сети или персональный веб-сайт. Представительство в сети Интернет на данный момент - самый мощный инструмент в конкурентной борьбе за потенциальных клиентов, так как является эффективным каналом коммуникации с потребителем, доступным практически каждому. Наличие аккаунта или сообщества у той или иной компании дает больше возможностей для связи с клиентами, но, если у компании есть свой веб-сайт, это скажет клиентам о том, что они нашли серьезную организацию, которой можно доверять.
С каждой минутой подобных ресурсов становится всё больше, и цель каждого ресурса - привлечение потенциальных клиентов для приобретения предоставляемых услуг. На этом фоне происходит настоящая борьба за аудиторию, в которой нужно выделиться и заявить о себе, грамотно изложив нужную информацию и подав её достойным образом. Именно поэтому профессия веб-дизайнер становится всё более востребованной на рынке, а изучение дисциплины «Веб-дизайн» соответственно является наиболее актуальным.
Однако, технологии развиваются с каждым днём, а вместе с ними и возможности веб-дизайна. Эта дисциплина развивается настолько быстро, что любая печатная литература устаревает буквально через год после публикации. И здесь возникает вопрос: как можно подготовить достойных специалистов в этой области, если информация и программное обеспечение становятся неактуальными через такой короткий срок? В данной работе рассмотрены некоторые варианты решения данной проблемы.
Объектом исследования является веб-дизайн, как учебная дисциплина. Предмет исследования - специфика преподавания дисциплины «Веб-дизайн». Целью выпускной квалификационной работы является: разработать веб-сайт.
Основные задачи:
1. ознакомиться с историей развития веб-дизайна в России и за рубежом;
2. изучить основные термины, использующиеся в веб-дизайне, классификацию и виды веб-сайтов;
3. выявить сходства и различия между веб-дизайном и дизайном графическим;
4. выяснить, какие компетенции должны сформироваться у обучающегося по итогам прохождения курса;
5. рассмотреть методы представления учебной информации для эффективного изучения дисциплины;
6. проанализировать аналоги для разработки веб-сайта;
7. разработать дизайн-концепцию;
8. разработать макет веб-сайта, следуя основным этапам разработки макетов.
Информационной базой исследования является учебная и оригинальная литература, а также Интернет-ресурсы. В ходе работы были изучены:
1. Труд Лебедева А. А., где предоставлена информация о графическом и промышленном дизайне, проектировании интерфейсов, типографике, семиотике и визуализации;
2. Труд Макнейла П., где автор рассматривает основные классификации и виды веб-сайтов, говоря об особенностях каждого из них, демонстрируя наглядные примеры веб-страниц;
3. Национальный стандарт РФ «Эргономика взаимодействия человек — система», ч. 210 «Человеко-ориентированное проектирование интерактивных систем» [30], где представлены определения главных терминов веб-дизайна и веб-разработки;
4. Труд Смикикласа М., где подробно изложена вся информация, необходимая для работы с инфографикой и эффективным её применением.
В качестве источников мы рассмотрели:
1. Учебная программа дисциплины «Веб-дизайн», составленная Яруллиным И. Ф., где изложены цели обучения и компетенции обучающихся веб-дизайну;
2. Работы студии Артемии Лебедева на официальном сайте студии [3]. На данный момент студия Лебедева является одной из самых популярных и известных в России, она работает с крупнейшими компаниями и создает креативные и интересные проекты. Мы обратились к его работам, т. к. на данный момент они отражают, в какую сторону движется веб-дизайн, являются современными и актуальными. А в разделе истории в портфолио хранятся проекты ещё с конца 90-х годов, что помогло нам в написании параграфа, посвященного истории веб¬дизайна;
3. Веб-лаборатория «CyberZ» [4]. Данный ресурс возможно заброшен, однако там мы нашли определение коммерческого сайта;
4. Официальный сайт Британской Высшей Школы Дизайна [5], где идет набор на курс «Веб-дизайн» и подробно описано, какие компетенции приобретут обучающиеся по итогам прохождения курса, а также как будут проходить занятия;
5. «Нетология»: университет интернет профессий [6]. Образовательный портал с платными курсами в формате вебинаров, где также описаны компетенции и процесс обучения в курсе «Веб-дизайн»;
6. «Хабрахабр»: статьи для дизайнеров и веб-разработчиков [7]. На этом ресурсе ежедневно публикуют статьи и новости, посвященные как графическому, так и веб-дизайну. Здесь мы воспользовались статьей крупного барнаульского агентства Сибирикс, посвященной определению термина «moodboard».
Также в ходе исследования мы обращались к Интернет-ресурсам со статьями, информацией и изображениями по теме «Веб-дизайн». Все источники и литература опубликованы не ранее 2013 года и являются актуальными на сегодняшний день.
Веб-дизайн в России, начиная с 1996 года сделал резкий скачок и активно развивался в течение 10-15 лет, до неузнаваемости преобразившись. По мере своего развития, от самого простого до самого сложного, внешний вид сайтов снова вернулся к упрощенной версии. Но возможности веб-дизайна расширились настолько, что ограничением в процессе разработки сайта может послужить лишь предел фантазии дизайнера. Сложно сказать, повлияли ли технологии на развитие веб-дизайна, или веб-дизайн с новыми решениями повлиял на развитие самих технологий. Например, сложно сказать, подстроился ли веб-дизайн под увеличение размера дисплеев мобильных устройств, или же размер дисплеев увеличился, чтобы пользователю было удобнее просматривать обновленные сайты.
Отличие веб-дизайна от графического заключается в том, что перед веб-дизайнером ставятся задачи совершенно другого рода, чем для графического дизайнера. Соответственно, подходы к их решению, приоритеты при выполнении не похожи на то, чем занимаются графические дизайнеры. Веб и графический дизайн имеют общее начало, но несмотря на это являются отдельными сферами со своими особыми задачами и подходом к их решению. Если графический дизайнер может беспокоиться только о качестве и визуальной составляющей макета, веб-дизайнер должен учитывать большее количество факторов, влияющих на проект, начиная с технических возможностей веб-разработки и заканчивая вопросом о том, с какой стороны экрана пользователю будет удобно нажать на кнопку. По этой причине невозможно сказать, в какой сфере проще и комфортнее работать, т. к. в каждой из них есть свои преимущества, сложности и ограничения.
Веб-дизайнер может считаться таковым, если он владеет общей методикой дизайн-проектирования и технологиями художественного оформления web- сайта, способен поэтапно грамотно разработать дизайн-макет сайта; умело использует инструменты для создания прототипа; способен протестировать взаимодействие с пользователем; имеет навык использования растровых и векторных изображений в контексте как статичного, так и адаптивного сайта; знает основы композиции и работы с цветом, а также особенности веб - типографики; знаком с актуальными возможностями веб-разработки и терминами, которыми апеллируют верстальщики, веб-разработчики и программисты.
В процессе изучения дисциплины «Веб-дизайн» нужно предоставлять как можно больше наглядного материала. От схем и примеров работ других дизайнеров до демонстрации процесса разработки веб-сайта в реальном времени, а также материалов, которые помогут изучить программы, необходимые для разработки макетов. В наше время веб-пространство занимает очень важное место в жизни каждого человека. Каждая компания, предприниматель стремятся иметь свое представительство в сети Интернет. Сейчас сложно найти человека, не имеющего профиль в какой-либо социальной сети. Поэтому профессия веб-дизайнер на данный момент является одной из самых востребованных, а изучение дисциплины «Веб-дизайн» становится наиболее актуальным.
Опираясь на информацию, которую мы получили, мы приступили к разработке сайта спортклуба «КВОН». Мы изучили ряд аналогов и отметили, что сайты в тематики спортклубов либо секций восточных единоборств для детей рассчитаны на небольшое количество постоянных посетителей, поэтому их владельцы не беспокоятся об актуальности дизайна и структуры своих сайтов. Большинство из них было создано примерно 5-10 лет назад и выглядят точно также как в день своего запуска. Такой подход неверен.
Получив информацию о том, что сейчас происходит в интересующей нас сфере, мы можем двигаться дальше и начать работу над дизайном веб-сайта для спортклуба «КВОН». Концепция дизайна финальной версии сайта реализована в стиле флэт-дизайн. Мы отразили азиатский стиль без явных элементов, а лишь намекнув цветовой гаммой и применением минимализма и аскетичности в дизайне. Дизайн сделан таким образом, чтобы вызывать доверие у родителей, а ребят, членов клуба, чувствовать, что к ним относятся как ко взрослым, серьезным людям, когда они заходят посмотреть расписание или почитать новости.
Сайт разработан в несколько этапов: разработка прототипа, разработка макета, техническая часть: верстка и далее программирование (в нашем случае оба этих шага объединила в себе программа Adobe Muse), запуск сайта. В более крупных высокобюджетных и сложных проектах есть также дополнительные этапы: оптимизация в поисковых системах, настройка Яндекс. Директа и Google.Adwords для повышения конверсии, популярности ресурса и потока посетителей, альфа-бета тестирование (запуск двух версий одного сайта с небольшими различиями, для определения, какая версия наиболее привлекательна), СЕО-оптимизация и другие. Однако описанные здесь этапы являются основными для разработки сайта любого типа и сложности.
Помощь студентам и аспирантам в выполнении работ от наших партнеров
