Прочие бесплатные инструменты

· http://uinames.com Генератор имен для использования в мокапах и дизайнах.

· http://uifaces.com Генератор простых аватарок для интерфейсов.

· http://ww1.uiblurbs.com Быстрая биография пользователя для вашихмокапов.

· http://copypastecharacter.com Нажми, чтобы скопировать.

· https://chrome.google.com/webstore/detail/window-resizer/kkelicaakdanhinjdeammmilcgefonfh/details?hl=en Отображение веб-сайта на экранах различного разрешения.

 

→ Делать открытия и учиться ←

 

Узнавать новые инструменты и стартапы

• http://www.producthunt.com Новый продукты и услуги, каждый день.
• https://angel.co Место, где мир знакомится со стартапами.
• http://betalist.com Открывайте для себя и получайте доступ к стартапам.
• http://startupli.st Ищите. Следуйте. Рекомендуйте стартапы.
• http://www.startups-list.com Коллекция лучшихстартапов.

 

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

• 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-сайта и составляет программу дальнейшей проектной деятельности (техническое задание), или функциональную спецификацию нового объекта.

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

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

Как правило, формулируется дизайн-концепция в виде какого-либо парадоксального тезиса, неожиданной метафоры, наиболее выпукло отражающей смысл дизайнерского предложения (например: «перетекающее пространство», «сцена вокруг зала», «гуманное пространство», «столкновение мнений», «острота ощущений», «мир часов», «океан удовольствий», «чистая линия», «солнечная чистота», «сила природы» и т.п.).

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

На этом этапе работы необходимо составить обобщенные композиционные схемы (шаблоны адаптивной разметки) и обозначить основные формообразующие принципы, что помогает избавиться от накапливающихся по ходу работы ошибок и искажений и проясняет положительные и спорные стороны идеи. Дело в том, что в процессе «обрастания» дизайн-концепции реальными размерами, деталями и т.д. исходная идея часто искажается, заслоняется случайными впечатлениями и подробностями. Условные схемы и модульные сетки, составленные по уже наработанным материалам проекта, выявляют эти искажения. Составление и применение таких схем особенно полезно для достижения согласованности (колористической, ритмической и т.д.), целостности впечатлений, а значит композиционной гармонии.

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

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

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

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

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

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

· выравнивание – это упорядочение элементов таким образом, чтобы они максимально близко подступали к естественным линиям или границам, которые они образуют. Сделав это, вы унифицируете элементы. Данный процесс часто называют работой с сеткой. Не выровненные элементы имеют тенденцию отбиваться от общей группы и требовать унификации, к которой мы часто так стремимся. К примерам выровненных элементов можно отнести расположенные по одной линии заголовки двух столбцов, либо левые края находящихся друг над другом элементов, выровненных относительно друг друга.

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

· уравновешенность частей целого (условное «равновесие» разных фрагментов общей картины относительно осей композиции);

Принцип балансировки крутится вокруг идеи о том, как распределены элементы в дизайне и как они соотносятся с общим распределением визуальной нагрузки в рамках веб-страницы. От этого зависит то, насколько уравновешенным окажется дизайн в визуальном плане. Группирование элементов в дизайне создает визуальную нагрузку.

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

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

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

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

Когда вы будете обдумывать, как обеспечить удобство восприятия, не забывайте о естественном порядке вещей. Согласно исследованиям, люди склонны осматривать те или иные вещи в предсказуемой манере. Обычно человек скользит взглядом слева направо и сверху вниз. Именно поэтому сайты, которые навязывают пользователям изучение содержимого справа налево, отталкивают тех, кто привык это делать слева направо.

В том, чтобы идти против естественного порядка вещей, нет ничего неправильного; нужно лишь принимать во внимание возможные последствия подобного решения. Каждый сайт обеспечивает для пользователя определенное восприятие, которое может быть как удобным, так и неудобным. Но как понять, что сайт не будет обеспечивать удобство восприятия своего содержимого? Наверное, предпочтение будут иметь те сайты, которые обеспечивают плавный, комфортный и максимально естественный процесс восприятия.

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

· синтез предыдущих признаков в единстве визуальной организации web-сайта.

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

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

При оценке выбранного проектного решения необходим учет:

¾ обзора, т.е. оптимальных условий зрительной работы, что обеспечивает быструю и легкую зрительную ориентацию на сайте, хороший обзор;

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

¾ читаемость надписей;

¾ оснащения, т.е. удобно размещаемых для человека средств отображения информации;

¾ эстетики, т.е. художественное решение (по форме и цвету) должно вызывать положительные эстетические эмоции и приятные эстетические чувства.

После согласования с руководителем сопоставительный анализ новых решений завершается выбором одного из вариантов.

Графическая часть проектно-композиционного раздела должна быть представлена в приложении и содержит:

¾ обобщённые композиционные схемы

¾ разработка концепции дизайна и интерфейса web-сайта- поисковые эскизы сайта (предлагаемые варианты 3-4 шт.)

¾ отрисовка дизайн-макетов (технический дизайн) разделов, страниц, интерфейсов, модулей;

¾ создание графических и стилистических элементов для сайта (логотипа, кнопок, иконок, инфографики), дизайн баннеров и промостраниц, создание презентаций)

При создании графических эскизов и анимации можно использовать разные графические редакторы:

¾ AdobePhotoshop,

¾ CorelDRAW,

¾ AdobeIllustrator,

¾ AdobeFlash(ранее Macromedia Flash),

¾ AdobeInDesign

¾ Adobe Fireworks

¾ Adobe Dreamweaver

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

В разделе фиксируется принятое решение и дается краткое описание:

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

· цветовой гаммы (основанной цвет, цвет меню, цвет выделения элементов меню и так далее) с учётом утвержденной цветовой гаммы корпоративного стиля (если такой имеется), технические характеристики цвета по цветовой модели RGB,;

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

 

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