Методические указания для практических работ

Web-дизайн. Планирование и создание WEB узла

Методические указания для практических работ

для студентов направления 072500.62 "Дизайн"

очной и заочной форм обучения

 

Составитель Лукина О.Г.

 

 

Тюмень 2015

 

Web-дизайн. Планирование и создание web-узла.: метод. указания для практических работ для студентов направления 072500.62 "Дизайн" очной и заочной форм обучения/ составитель О.Г.Лукина; Тюменский нефтегазовый университет. – Тюмень: Издательский центр БИК ТюмГНГУ, 2015.- 26с.

 

 

Методические указания рассмотрены и рекомендованы к изданию на заседании кафедры гуманитарных наук

 

«___» июня 2015 года, протокол № ___

 

АНОТАЦИЯ

 

Методические указания по дисциплине Web-дизайн предназначены для студентов 4 курса, обучающихся по направлению 072500.62 «Дизайн». Данная дисциплина изучается 7-8 семестрах на практических занятиях.

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

 

 

 

СОДЕРЖАНИЕ

 

1. ОБЩИЕ ПОЛОЖЕНИЯ.. 4

1.1. Цели и задачи дисциплины: 4

1.2. Требования к результатам освоения дисциплины: 4

2. Содержание дисциплины... 6

2.1. Введение в Web-дизайн. 6

2.2. Принципы создания Web-узла. 6

2.3. Планирование Web-узла. 7

2.4. Система навигации по узлу. 9

2.5. Технология CSS. 9

2.6. Текст и графика. 9

2.7. Структура страницы.. 10

2.8. Мультимедиа и интерактивность. 10

2.9. Публикация Web-узла и дальнейшая поддержка. 10

2.10. Полезные ссылки бесплатных сервисов. 11

3. Примерная тематика и содержание курсовых проектов (работ) 16

4. Оценочные средства для текущего контроля успеваемости, промежуточной аттестации по итогам освоения дисциплины... 23

4.1. Критерии оценивания практических работ. 23

4.2. Рейтинговая оценка знаний студентов по курсу «WEB-дизайне». 24

5. Библиографический список.. 25

 

ОБЩИЕ ПОЛОЖЕНИЯ

1.1.Цели и задачи дисциплины:

Цель: научить студентов технологии Web-дизайна и Internet-программирования. В результате изучения дисциплины студент должен иметь представление (понимать и уметь объяснить) основные концепции и принципы Web-дизайна и Internet-программирования.

Задачи:

- овладеть навыками графической деятельности, обогащенной элементами проектного мышления;

- развить креативное мышление, конструктивную и комбинаторную изобретательность в сфере IT-технологий;

- знать и уметь использовать основные термины и понятия современного Web-дизайна и Internet-программирования.

 

1.2.Требования к результатам освоения дисциплины:

 

Процесс изучения дисциплины направлен на формирование общекультурных и профессиональных компетенций:

Таблица 1

Номер/индекс компетенций	Содержание компетенции или ее части	В результате изучения дисциплины студент должен:
Знать:	Уметь:	Владеть:
ОК-1	владеть культурой мышления, способностью к обобщению, анализу, восприятию информации, постановке цели и выбору путей ее достижения	основы web-дизайна, основы Web-технологий и средства создания Web-страниц. HTML. CSS. XHTML основы программирования сайтов различными программными средствами.	планировать Web-узел и его структуру; создавать удобную систему навигации; создавать структуру страницы с помощью таблиц; использовать мультимедиа и интерактивность; публиковать и поддерживать Web-узел	основными методами, способами и средствами получения, хранения, переработки информации
ОК-13	владеет основными методами защиты производственного персонала и населения от возможных последствий аварий, катастроф, стихийных бедствий
ОК-14	осознает сущность и значение информации в развитии современного общества; владеет основными методами, способами и средствами получения, хранения, переработки информации
ПК-3	разрабатывает проектную идею, основанную на концептуальном, творческом подходе к решению дизайнерской задачи; возможные приемы гармонизации форм, структур, комплексов и систем; комплекс функциональных, композиционных решений
ПК-5	Способен осуществлять и обосновывать выбор проектных решений по видам обеспечения информационных систем
ПК-10	Способен применять к решению прикладных задач базовые алгоритмы обработки информации, выполнять оценку сложности алгоритмов, программировать и тестировать программы

 

В результате изучения дисциплины студент должен:

Знать:

¾ основы web-дизайна,

¾ основы Web-технологий и средства создания Web-страниц. HTML. CSS. XHTML

¾ основы программирования сайтов различными программными средствами.

Уметь:

¾ планировать Web-узел и его структуру

¾ создавать удобную систему навигации

¾ создавать структуру страницы с помощью таблиц.

¾ использовать мультимедиа и интерактивность

¾ публиковать и поддерживать Web-узел

Владеть:

¾ основными методами, способами и средствами получения, хранения, переработки информации

 

 

2. Содержание дисциплины

Введение в Web-дизайн

Содержание лекционного материала:

Типы доступа к сети Интернет. Коммутируемый доступ. Выделенная линия. Кабельная линия. Использование локального кеша для сокращения времени загрузки. Типы Web-узлов. Персональная Web-страница. Узел организации. Тематический узел. Коммерческий узел. Web технологии и средства создания Web-страниц. HTML. CSS. XHTML. Переход от HTML к XHTML. HTML-редакторы. Роли в Web-дизайне. Творческие роли. Технические роли.

Практическая работа: 8/2 часов

Используя html и графические редакторы выполнить вёрстку основной и типовых страниц собственного сайта-визитки содержащих списки, таблицы, фрэймы, гиперссылки, графику.

СРС: 8/13 часов

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

¾ Adobe Fireworks

¾ Adobe Dreamweaver

¾ WYSIWYG WebBuilder

¾ Web Page Maker

¾ NVU

¾ NeonHTML

¾ WebSite X5 Evolution

¾ SyntextSernaFree

¾ CoffeeCupFreeHTMLEditor

¾ Yahoo SiteBuilder

¾ NamoWebEditor

¾ Sothink DHTML Menu

¾ AllWebMenus Pro

¾ CoffeeCup Flash Menu Builder

¾ PHP Processor 2.0.1.0 Beta 2

¾ Profit Protector 1

¾ Link Encoder

¾ Справочники HTML, CSS

Принципы создания Web-узла

Содержание лекционного материала:

Совместимость обозревателей. Создание страниц для разных обозревателей. Дизайн зависит от компьютерной среды. Создание содержимого для электронного отображения. Создание дизайна под разрешение экрана. Фиксированный дизайн. Гибкий дизайн. Различия в операционных системах. Создание дизайна для пользователя. Баланс и привязка. Взаимодействие пользователя с Web-узлом. Внимание пользователя. Глубина Web узла. Использование гипертекстовых ссылок. Специальные возможности.

Практическая работа: 8/2 часов

Разработка макета (шаблона) Web-страницы с определёнными параметрами. Отзывчивый (адаптивный) дизайн

СРС: 8/13 часов

Выбрать 5 понравившихся сайтов и выполнить анализ эргономичности (Юзабилити-тестирование). Отчёт предоставить в формате Microsoft Office Word. Скриншоты сайтов обязательны.

 

Планирование Web-узла

Содержание лекционного материала:

Определение назначения узла. Определение целей. Определение задач. Описание аудитории. Определение требований вашей аудитории. Создание профиля аудитории. Определение технических ограничений. Планирование содержимого. Типы Web-содержимого. Упорядочение содержимого Web-узла Планирование структуры. Имена файлов. Структура каталогов и URL-адреса. Относительные и абсолютные ссылки. Линейная структура. Произвольная структура. Иерархическая структура. Планирование Web-страниц. Домашняя страница. Страница-заставка. Остальные страницы Web-узла. Планирование навигации

Практическая работа: 14/2 часов

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

Бриф на дизайн сайта

Таблица 2

Название компании:
Адрес, телефоны, контактные лица:
E-mail:
Адрес существующего сайта (при редизайне):
Сфера деятельности компании:
Характеристика основных товаров, услуг (их количество):
География реализации товаров, услуг:
Кто является основным потребителем товаров, услуг:
Конкуренты, их веб-ресурсы:
Задача, которую должен решать сайт:
Тип сайта (сайт-визитка, корпоративный, интернет-магазин, др.):
Основные разделы сайта: ¾ О Компании ¾ Каталог ¾ Прайс-лист ¾ Новости ¾ Контактная информация ¾ Другие:
Частота предполагаемых обновлений сайта (раз в год, месяц, неделю, ежедневно):
Дальнейшее работа с сайтом, (внесение обновлений) самостоятельно или поручается разработчикам сайта:
Языковые версии сайта:
Название сайта:
Стиль сайта (солидно, строго, просто и т.д.):
Впечатление, которое должен произвести сайт на пользователя:
Какое основное сообщение необходимо довести до сознания потребителя:
Что вы хотите, чтобы пользователь в результате посещения сайта: ¾ Увидел: ¾ Сделал: ¾ Почувствовал:
Есть ли у Фирмы свой фирменный стиль, логотип, цвета которых надо придерживаться (логотип, образцы цвета, образцы фирменного стиля, отправить приложением к брифу):
Желаете заказать разработку логотипа компании:
В какой примерно цветовой гамме должна происходить разработка сайта:
На какую категорию пользователей должен быть ориентирован сайт:
На какие географические регионы должен быть ориентирован сайт:
Одобряете использование Flash-анимации:
Программные модули: ¾ Доска объявлений ¾ Новости ¾ Конференция (форум) ¾ Гостевая книга ¾ Почтовая рассылка ¾ Архив ¾ Анкетирование ¾ Электронный каталог ¾ On-line заказ ¾ Интернет-магазин ¾ интеграция магазина с бухгалтерской системой предприятия ¾ интеграция магазина с банковской системой оплаты ¾ Административная часть (полное управление сайтом сотрудниками компании). ¾ Сбор статистики ¾ Другое (чат и т.д.)
Регистрация доменного имени (какое):
Размещение сайта самостоятельно или на хостинге, предложенном исполнителем:
Предусматривать ли место под баннерную рекламу:
Предусматривать ли место для счетчиков посещений:
Сроки исполнения заказа:
По окончанию работы предоставлять заказчику исходные файлы разработки веб-сайта:

СРС: 10/20 часов

Разработка концепции сайта. Планирование и подбор контента для разрабатываемого сайта. Выбор типов Web-содержимого. Планирование структуры. Планирование навигации.

 

Система навигации по узлу

Содержание лекционного материала:

Создание удобной системы навигации. Местонахождение пользователя. Ограничение на перенасыщение информацией. Текст. Создание текстовой системы навигации. Создание ссылок на фрагменты внешних документов. Создание ссылок для перехода из раздела в раздел. Создание контекстных ссылок. Кнопки. Карты изображений. Использование атрибута alt. Функция поиска.

Практическая работа: 16/4 часов

Определение принципов построения навигации сайта. Разработка системы навигации сайта. Создание графических кнопок (по 5 вариантов). Pixelperfect верстка.

СРС: 12/23 часов

Разработка интерактивной инфографики с анимациями CSS и SVG

 

Технология CSS

Содержание лекционного материала:

Правила CSS-стилей. Применение CSS-правил в HTML-документе. Создание простой таблицы стилей. Приоритет CSS-правила относительно элемента. Использование ключевого слова limportant. Определение приоритета по источнику правила. Определение приоритета правила по его непосредственному влиянию на элемент. Определение приоритета правила по его порядку. Методы выбора элементов в CSS-правилах. Использование простого селектора. Группирование селекторов. Комбинирование описаний. Использование наследственных селекторов. Использование простых методов выбора элементов. Расширенные методы выбора элементов. Использование селектора атрибута class. Использование элементов <div> и <span>

Практическая работа: 18/4 часов

Разработка сайта. Создание простой таблицы стилей. Определение приоритета правила по его непосредственному влиянию на элемент.

СРС: 12/24 часов

Изучение литературы по HTML и CSS.

Текст и графика

Содержание лекционного материала:

Основы дизайна шрифтов. Основные требования к шрифтам. Создание удобного дизайна. Единицы измерения в CSS. Абсолютные единицы. Относительные единицы. Единица измерения em. Единица измерения ех. Пиксель. Проценты.CSS-свойства шрифтов. Указание семейства шрифтов. Определение размера шрифта. Определение начертания шрифта. Определение веса шрифта. Использование CSS-свойств для определения расстояний в тексте. Отступ текста. Выравнивание текста. Определение декорирования текста. Определение высоты строки. Определение выравнивания по вертикали. Определение межбуквенного интервала. Определение пробела между словами Принципы работы с графикой. Форматы графических файлов.PNG. SVG. Выбор правильного формата. Использование элемента <img>.Замена атрибутов элемента img свойствами таблицы стилей. Удаление гипертекстовой рамки. Выравнивание текста и изображений. Обтекание изображения. Добавление полей вокруг изображения Управление свойствами цвета с помощью CSS-стилей Определение значений цвета. Установка цвета текста по умолчанию. Изменение цвета ссылок. Определение цвета фона. Установка фонового цвета страницы. Создание инвертированного текста. Использование фонового цвета в таблицах. Свойство фонового изображения. Создание фона элемента. Управление дублированием фона. Указание местоположения фона.

Практическая работа: 12/2 часов

Подбор шрифтов, вёрстка. Разработка тематической, маркетинговой, структурной, контентной и иконной графики. Оптимизация изображений

СРС: 12/21 часов

Разработка вариантов шрифтовых знаков для сайта

 

Структура страницы

Содержание лекционного материала:

Создание структуры страницы с помощью таблиц. Использование элементов таблицы. Слияние столбцов. Слияние строк. Форматирование таблиц. Фиксированная и относительная ширина таблицы. Определение фиксированной ширины таблицы. Удаление стандартных полей таблицы. Удаление лишних пробелов. Центрирование таблиц. Стыковка таблиц. Создание вложенных таблиц. Примеры макетов страниц. Макет с двумя столбцами. Макет с двумя столбцами и баннером. Макет с тремя столбцами. Макет с тремя столбцами и баннером. Макет с тремя столбцами и разбиением на секции. Макет с тремя столбцами и разбиением главного. Создание структуры страницы с помощью CSS-блоков. Определение типа отображения элемента. Использование блочной CSS-модели. Использование свойств полей. Использование свойств отступов. Использование свойств границ. Определение стиля границы. Определение ширины границы. Определение цвета границы. Использование специальных свойств блоков Width, Height, Float. Clear.

Практическая работа: 20/2 часов

Разработка вариантов композиционного, цветового решения Web-страниц

СРС: 12/28 часов

Композиционные поиски. Работа над модульной сеткой. Адаптивная разметка.

 

Выбор цвета

· http://www.materialpalette.com Генератор и экспорт палитры цветов в стиле материального дизайна.

· http://www.flatuicolorpicker.com Лучшие цвета для интерфейсов в стиле flat.

· http://flatuicolors.com Красивые цвета в стиле flat.

· http://coolors.co Супер быстрый генератор цветовых схем для крутых дизайнеров.

· http://bjango.com/mac/skalacolor/ Необычный подбор цветов.

· http://couleursapp.com Простое приложения для определения цветов, которые вы видите на экране.

· http://www.materialui.co/colors Палитра цветов для Android, веба и iOS в стиле материального дизайна.

· http://colorfulgradients.tumblr.com Автоматическое создание градиентов.

· http://briangonzalez.github.io/jquery.adaptive-backgrounds.js/ Выделение доминирующих цветов из изображения.

· http://brandcolors.net Цвета, используемые знаменитыми брендами.

· http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF Создание цветовой схемы.

· http://www.0to255.com Простой инструмент поиска оттенков цвета.

· http://www.colourlovers.com Создавайте и делитесь цветами, палитрами и паттернами.

· https://color.adobe.com/ru/create/color-wheel/ Цветовые комбинации от сообщества Kuler.

· http://bootflat.github.io/color-picker.html Идеальные цвета в стиле flat.

· http://hex.colorrrs.com Конвертер из Hex в RGB.

· http://getuicolors.com Поиск подходящих цветов для интерфейсов.

· https://www.coleure.com Умный подбор цветов.

· http://colllor.com Генератор цветовой палитры.

· https://chrome.google.com/webstore/detail/palette-for-chrome/oolpphfmdmjbojolagcbgdemojhcnlod Создание палитры цветов из любого изображения.

 

Вдохновение

· http://www.materialup.com Ежедневное вдохновение материальным дизайном.

· http://fltdsgn.com Лучшие работы в стиле flat.

· http://www.siteinspire.com Вдохновение веб-дизайном.

· http://ui-cloud.com Самая крупная коллекция интерфейсов в мире.

· http://www.gomoodboard.com Создание красивых досок настроения (moodboard).

· https://www.crayon.co Вдохновение для маркетологов.

· http://land-book.com Галерея лэндингов.

· https://dribbble.com «Покажи и расскажи» для дизайнеров.

· https://dribbble.com Сообщество креативных профессионалов со всего мира.

· http://pttrns.com Вдохновение для создания мобильных интерфейсов.

· https://www.pinterest.com/warmarc/flat-ui-design/ Коллекция дизайнов в стиле flat, спасибо Эрику.

· http://www.awwwards.com Награды за дизайн, креативность и инновацию.

· http://www.thestarterkit.info Источник для программистов и дизайнеров.

· https://onepagelove.com Коллекция одностраничных веб-сайтов.

· http://www.uiparade.com Элементы интерфейсов.

· https://www.thebestdesigns.com Лучшее из веб-дизайна.

· http://agiledesigners.com Лучшие ресурсы для программистов и дизайнеров.

· https://niice.co Поисковик со вкусом.

 

Бесплатные стоковые фотографии

· http://www.sitebuilderreport.com/stock-up Лучшие бесплатные стоковые фотографии с разных веб-сайтов в одном месте.

· http://www.pexels.com Лучшие бесплатные фото в одном месте.

· http://allthefreestock.com Бесплатные стоковые изображения, иконки и видео.

· https://unsplash.com Бесплатные (делайте, что хотите) фотографии высокого разрешения.

· http://www.splashbase.co Поиск бесплатных фото и видео в высоком разрешении.

· http://startupstockphotos.com Вперед. Создайте что-нибудь.

· http://jaymantri.com Бесплатные изображения.

· http://moveast.me Путешествие португальца на восток.

· http://travelcoffeebook.com Красивые моменты путешествий.

· http://www.designerspics.com Бесплатные фотографии для коммерческого и персонального использования.

· http://deathtothestockphoto.com Ежемесячные бесплатные фотографии вам на почту.

· http://foodiesfeed.com Бесплатные фотографии еды в высоком разрешении.

· http://mazwai.com Бесплатные видео клипы и фотографии.

· http://jeshoots.com Стильные современные фотографии.

· http://superfamous.com Фотографии голландского дизайнера FolkertGorter.

· http://picography.co Бесплатные фотографии высокого разрешения.

· http://pixabay.com Бесплатные качественные фотографии.

· http://magdeleine.co Бесплатная качественная фотография на каждый день.

· http://snapographic.com Бесплатные стоковые фотографии для персонального и коммерческого использования.

· http://littlevisuals.co 7 фотографий высокого разрешения в ваш почтовый ящик каждые 7 дней.

· http://www.splitshire.com Качественные бесплатные стоковые фотографии.

· http://nos.twnsnd.co Винтажные фотографии из публичных архивов.

· http://littlevisuals.co Абсолютно бесплатные фотографии.

· http://www.lifeofpix.com Бесплатные фотографии высокого разрешения.

· http://www.gratisography.com Бесплатные фотографии высокого разрешения.

· http://getrefe.com/downloads/category/free/ Бесплатные фотографии.

· http://getrefe.com/downloads/category/free/ Коллекция бесплатных фотографий.

· http://cupcake.nilssonlee.se Фотографии от JonasNilssonLee.

· http://thepatternlibrary.com Бесплатныепатерны для вашего проекта.

· http://publicdomainarchive.com Новые бесплатные стоковые фотографии.

· http://isorepublic.com Высококачественные бесплатные фотографии для творческих людей.

· http://stokpic.com Бесплатные фотографии.

· http://kaboompics.com Лучший способ получить бесплатные изображения.

· http://wefunction.com/category/free-photos/ Бесплатные паки фотографий.

· http://mmt.li Бесплатные стоковые фотографии от JeffreyBetts.

· https://pjrvs.com/a/photos Бесплатные фотографии высокого разрешения.

· http://lockandstockphotos.com Бесплатные стоки для вас.

· http://raumrot.com Бесплатные фотографии высокого разрешения.

· http://photos.bucketlistly.com Коллекция фотографий из путешествий

· Еще немного источников: http://www.freedigitalphotos.net | http://morguefile.com | http://www.publicdomainpictures.net | http://www.stockvault.net | http://www.imagefree.com | http://www.dreamstime.com/free-images_pg1 | http://www.rgbstock.com | http://www.freeimages.com | http://freerangestock.com | http://freephotosbank.com.

Вручную отобранные коллекции бесплатных фотографий:

· → от Free Goodies for Designers: ( http://dealjumbo.com/freebies/the-ultimate-photo-pack-free-version/ | http://dealjumbo.com/freebies/people-places-and-things-photo-bundle/ | http://dealjumbo.com/freebies/30-free-photos-from-kaboompics/ | http://dealjumbo.com/freebies/12-free-nature-photos/ | http://dealjumbo.com/freebies/12-free-nature-photos-v-2/ | http://dealjumbo.com/freebies/12-free-nature-photos-v-3/ | http://dealjumbo.com/freebies/13-free-geometric-backgroundsshapes/ | http://dealjumbo.com/freebies/10-free-geometric-backgrounds/ | http://dealjumbo.com/freebies/free-hero-header-presentation-images/

· → от Dribbble: ( https://dribbble.com/shots/1659014-Free-Download-Nature-Photo-Pack | https://dribbble.com/shots/1584133-2014-workspace-free-photos | https://dribbble.com/shots/1561280-Free-Vintage-Photos | https://dribbble.com/shots/1093355-Free-Blurred-Backgrounds | https://dribbble.com/shots/609751-8-Backgrounds-Free-download | https://dribbble.com/shots/1671186-Hip-Bundle-mockups-collection | https://dribbble.com/shots/1789659-Freebie-Friday | https://dribbble.com/shots/1669946-Freebie-Hero-Image | и https://dribbble.com/shots/1619059-His-Mercies-Background-2x .),

· → от Graphic Burger: ( http://graphicburger.com/wood-forest-free-photos/ | http://graphicburger.com/iceland-free-photos-vol-1/ | http://graphicburger.com/iceland-free-photos-vol-2/ | http://graphicburger.com/5-bokeh-backgrounds-vol-1/ | http://graphicburger.com/5-bokeh-backgrounds-vol-1/ | http://graphicburger.com/5-blurred-backgrounds-vol-1/ | http://graphicburger.com/3-curved-wooden-backdrops-vol-1/ )

 

Бесплатная типографика

· http://www.typegenius.com Поиск идеальной комбинации шрифтов для вашего проекта.

· http://www.typegenius.com 100 % бесплатные коммерческие шрифты.

· http://www.fontface.ninja Расширение для браузера для отображения шрифтов, которые использует веб-сайт.

· https://www.google.com/fonts Бесплатные шрифты, оптимизированные для веб-сайтов.

· http://hellohappy.org/beautiful-web-type/ Лучшие примеры использования Google шрифтов.

· http://www.dafont.com Коллекция бесплатных шрифтов.

· http://www.dafont.com Огромный выбор бесплатных шрифтов.

· http://www.fontpark.net/en/ Самый большой архив бесплатных шрифтов в одном месте.

· http://font-to-width.com Сжимает тексты в контейнеры определенного размера.

 

Бесплатные иконки

· http://fontello.com Генератор шрифта из иконок.

· http://www.flaticon.com Поисковик по 16000+ векторным иконкам.

· https://github.com/google/material-design-icons/releases/tag/1.0.0 750 бесплатных иконок от Google.

· http://fortawesome.github.io/Font-Awesome/ Шрифт из иконок.

· http://glyphsearch.com Поиск пиктограмм в различных базах данных.

· http://makeappicon.com Генератор иконки различных размеров для приложения.

· http://www.endlessicons.com Бесплатные плоские иконки.

· https://icomoon.io 4000 + бесплатных векторных иконок, генератор иконок.

· https://thenounproject.com Тысячи иконок от различных дизайнеров.

· http://perfecticons.com Создание пиктограмм социальных сетей.

· https://www.iconfinder.com/free_icons Бесплатные иконки.

· Бесплатные круглые иконки: https://roundicons.com/doodle-icons-free-set/ | https://roundicons.com/free-icons/ | https://roundicons.com/free-vector-line-icons-set/

· http://iconsweets.com 60 бесплатных векторных иконок для Photoshop.

 

Строить вместе

• https://assembly.com/discover Создавайте новые идеи совместно с другими людьми.
• https://www.cofounderslab.com Поиск сооснователястарптапа в любом городе, любой индустрии.
• https://www.founder2be.com Поиск сооснователя для вашегостартапа.

 

Учиться

• http://www.skillshare.com Расскройте свою креативность вместе с бесплатными онлайн уроками.
• https://www.khanacademy.org Бесплатное образование международного класса.
• https://www.coursera.org Free Бесплатные онлайн занятия от 80+ топ университетов и организаций.
• http://www.codecademy.com Интерактивное обучение программированию, бесплатно.
• Как начать стартап: https://itunes.apple.com/us/podcast/how-to-start-a-startup/id922398209?mt=2 или https://startupclass.co.
• http://ffc2015.startupnotes.org Школа стартапов приглашает основателем рассказать свои истории успеха.
• http://how.co Учитесь у предпринимателей.
• http://launchthisyear.com Руководство к запуску онлайн бизнеса.
• http://closedclub.org Пролистывайте провалившиеся стартапы и узнайте причину их провала.
• http://startuptalks.tv Коллекция видео о деятельности стартапов.
• http://rocketship.fm Учитесь каждую неделю у успешных предпринимателях.
• http://resrc.io Бесплатные обучение программированию.

 

Полезные email рассылки

• http://email1k.com 30-дневный бесплатный курс, который поможет вам удвоить количество email подписчиков.
• http://designforhackers.com 12 недель обучения дизайну, прямо у вас в почтовом ящике.
• https://www.startupdigest.com Новостная рассылка о новейших стартапах.
• http://mattermark.com/app/Newsletter Новостная рассылка от инвесторов и основателей стартапов.
• http://doubleyourfreelancing.com/free-pricing-course/ Бесплатный курс научит вас взимать плату, которой вы достойны.
• http://www.productpsychology.com Изучение поведения пользователей.
• http://www.theuxnewsletter.com Рассказы об исследовании, дизайне и созидании.
• http://uxdesignweekly.com Лучшие статьи о дизайне и пользовательском опыте.

 

Полезные инструменты

• http://foundrs.com Калькулятор долей собственности стартапа.
• http://ad-spend-calculator.qwilr.com Должен ли я платить за рекламу стартапа?
• http://howmuchtomakeanapp.com/estimator Калькулятор стоимости создания мобильного приложения.
• http://howmuchtomakeanapp.com/build-a-website-vs-app/ Должен ли я построить веб-сайт или приложение?

3. Примерная тематика и содержание курсовых проектов (работ)

 

Примерная тематика курсовых работ:

• Дизайн и разработка сайта «Музей города Тюмень»
• Дизайн и разработка сайта «Интернет-магазин»
• Дизайн и разработка сайта «Зоопарк»
• Дизайн и разработка сайта кафедры
• Дизайн и разработка сайта союза художников
• Дизайн и разработка сайта союза дизайнеров
• Дизайн и разработка сайта-портфолио тюменского художника
• Дизайн и разработка кулинарного сайта
• Дизайн и разработка сайта туристического агентства
• Дизайн и разработка сайта «Филармония»
• Дизайн и разработка сайта драматического театра
• Дизайн и разработка сайта студии промышленного дизайна
• Дизайн и разработка сайта студии графического дизайна
• Дизайн и разработка сайта студии средового дизайна
• Дизайн и разработка сайта печатного издания (журнала)
• Дизайн и разработка промо-сайта
• Дизайн и разработка сайта библиотеки
• Дизайн и разработка сайта электронных средств массовой информации
• Дизайн и разработка сайта игрового портала
• Дизайн и разработка сайта некоммерческой (благотворительной) организации
• Дизайн и разработка блога
• Дизайн и разработка сайта энциклопедии

 

Курсовая работа должна способствовать углублению и систематизации знаний теоретического курса дисциплины «Основы производственного мастерства»; обеспечивать непосредственное и всестороннее изучение исследуемой темы; приобретению студентами навыков самостоятельного изучения отдельных вопросов по дизайну; ознакомлению с учебным и научно-практическим материалом.

Цели и задачи курсовой работы. Выполнение и оформление курсовой работы студентами формирует навыки использования специальной литературы, развивает умение успешно применять полученные теоретические знания при самостоятельном решении некоторых вопросов, навыки самообразования, приобщает к научно-исследовательской работе.

Основными задачами курсовой работы являются:

· освоить методику комплексного и системного проектирования;

· научиться формулировать концепцию общего решения и представить ее в виде проектно-графического материала;

· отразить в комплексе теоретические знания и практические навыки по специальности и смежным дисциплинам;

· продемонстрировать умение вести научный поиск в процессе выявления тенденций развития данной отрасли во всех аспектах (социально-культурном, организационном, конструктивно-технологическом, экономическом и др.) и в проведении проектно-сопоставительного анализа;

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

К курсовой работе предъявляются следующие требования, определяющие её особенности как учебно-научного документа:

¾ логическая последовательность изложения материала;

¾ убедительная аргументация;

¾ краткость и точность формулировок, исключающих возможность субъективного и неоднозначного толкования;

¾ конкретность изложения результатов работы;

¾ доказательность выводов и обоснованность рекомендаций.

 

Курсовая работа по дисциплине «Web-дизайн» должна складывается из отдельных взаимосвязанных частей и содержит:

¾ пояснительную записку;

¾ разработанный сайт.

 

Структура и порядок комплектации пояснительной записки:

Объем пояснительной записки составляет не менее 30 страниц печатного текста. Пояснительная записка должна включать все части и разделы в указанной ниже последовательности:

¾ Титульный лист

¾ Аннотация

¾ Содержание

¾ Введение.

1. Научно-исследовательский раздел

2. Проектно-композиционный раздел (Композиционно-концептуальный)

3. Технологический раздел

¾ Заключение

¾ Список используемой литературы

¾ Приложения, техническое задание, электронный вариант текстовой и эскизной части проекта (на диске).

Все части и разделы пояснительной записки должны логически обосновывать тему курсовой работы и быть оформлены в соответствии с требованиями ГОСТов 7.32-2001, 7.1-2003, 7.12-93, 7.82-2001. Страницы текста курсовой работы о НИР и включение в отчет иллюстраций и таблиц должны соответствовать формату А4 по ГОСТ 9327.

В аннотации описывают предмет, объект и методы исследования, источники творчества. Указывают количество страниц, иллюстраций, таблиц, приложений.

Во введении проводится предварительный анализ проектной ситуации и обзор практической деятельности дизайнера, направленной на создание дизайн-проекта. Обозначаются основные направления развития данной отрасли.

Формулируются исходные материалы для проектирования (техническое задание) и художественно-конструкторская проблема, цель и задачи проектирования, новизна работы, дается социальное обоснование необходимости разработки данного объекта, соответствие сайта общественным потребностям, необходимому уровню развития web-технологий. Особое внимание уделяется тем направлениям, которые подчеркивают актуальность темы данного проекта и будут решены в последующих его разделах. Объем раздела 1-2 страницы.

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

Цель данного раздела – изучение состояния визуальных направлений, последних лет, их ключевые отличительные признаки, а так же актуальные и прогнозируемые тренды веб-дизайна («материальный дизайн», эффекты «объема» при плоском дизайне, морфинг, принцип: одно действие — много взаимодействий, принцип: много действий — одно взаимодействие, авторские иллюстрации, авторизация через соцсети, сторителлинг, сайты-истории, горизонтальный скроллинг, анимированные ховеры, встроенные интерактивные 3D-объекты, акцент на типографику, SVG-графика, фоновое видео, встроенное на HTML5, большие фоновые фотографии, мобильная версия сайта, адаптивный сайт, настраиваемая адаптивность, анимированные иконки, микровзаимодействия, внимание к мелочам, проецирование опыта мобильных пользователей на десктопные интерфейсы, эффекты режимов наложения слоев на сайте (как в Photoshop), «карточный» дизайн (а-ля Pinterest), персонализированный UX, анимированная/интерактивная инфографика). В разделе освещаются все слагаемые изучаемого объекта на уровне научной проблемы. Исследуется тенденция социального развития объекта. Изучаются научные исследования и практические разработки в области web-технологий. Проводится анализ различных характеристик изучаемых объектов, даются сравнительные оценки параметров по различным характеристикам (внешнему виду, композиции, структуре и навигации, контенту, usability (эргономичности), соответствия главным целям дизайна и др.) и устанавливаются достоинства и недостатки. В разделе автором делаются выводы по изучаемому вопросу, помогающие сформулировать проблему. Раздел включает в себя скриншоты сайтов-аналогов, таблицы, аннотированные статьи, патентные материалы.

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

В качестве исходных параметров проектируемого сайта выбираются оптимальные характеристики внешнего вида, структуры, навигации, контента, удобства использования в рамках тех возможностей и средств, которые имеются для его создания, и эксплуатации. Этот перечень желательных характеристик web-сайта и составляет программу дальнейшей проектной деятельности (техническое задание), или функциональную спецификацию нового объекта.

Проектно-композиционный раздел (композиционно-концептуальный) должен содержать формулировку проектной концепции, которая является результатом анализа и осмысления проектных ситуаций, содержит выра