Исследовательский проект на тему: "Создание графических объектов средствами Web-дизайна"

Министерство образования и науки Российской Федерации

МБОУ

«Лицей №6»

«Информатика и ИКТ»

ИССЛЕДОВАТЕЛЬСКИЙ ПРОЕКТ

на тему:

«Создание графических объектов

средствами Web-дизайна»

Разработал: Жижков А.В.,

ученик 11 класса «Б»

Руководитель: Попова Е.Г.,

учитель информатики и ИКТ

Рубцовск

2022

Введение 3

1. Основная часть 5

1.1. Понятие Web-дизайна 5

1.1.1. Основы Web дизайна 6

1.1.2. Использование правил Web-дизайна для построения сайта 7

1.2. Инструменты Web-дизайнера 10

1.2.1. Графический редактор Фигма 10

1.2.2. Графический редактор Adobe PhotoShop 12

1.2.3. Графический редактор Adobe Illustrator 14

2. Практическая часть 19

2.1. Рецепт успешного кейса 19

2.2. Ключевые блоки кейса 20

2.3. Советы и технические особенности 23

2.4. Создание 3D-модель в графике 26

3. Самооценка 32

Заключение 34

Список литературы 35

Приложение 36

Что такое дизайн? В широком смысле дизайн – это прежде всего зрительный образ всего, что нас окружает, - домов и мебели, предметов быта и украшений , автомобилей и детских игрушек… Удобно, просто и красиво – вот три кита, на которых держится дизайн и наше отношение к нему. В большинстве стран мира под дизайном пронимают проектирование и конструирование. Это касается строений, товаров, любого промышленного оборудования, оформления книг, журналов и газет.

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

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

Актуальность данной темы заключается в значимости данной профессии в будущем.

Цель проекта: создание кейсов средствами графических редакторов.

Задачи:

1. Узнать, что такое Web –дизайн.

2. Познакомиться с его основными элементами.

3. Изучить графические редакторы, используемые Web-дизайнерами.

4. Создать кейс при помощи графических редакторов.

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

Объект исследования: разработка кейса с использованием правил графического и Web-дизайна

Методы исследования:

• Изучение (Изучить веб-дизайн: определение, как используется в современном обществе).

• Эксперимент (создание кейса).

• Наблюдение (смотрю, что получилось и оцениваю результат).

• План исследования:

• Изучить проблему из различных источников.

• Провести эксперимент.

• Сделать вывод.

1. Основная часть

   1. Понятие Web-дизайна

В 1989 году исследователь из Европейской лаборатории элементарных частиц Тим Бёрнерс-Ли разработал простую систему гипертекста. В целях объединения разрозненных работ по физическим исследованиям Бёрнерс-Ли разработал прототип системы для связывания информации. Система состояла из трех основных частей: способа унификации адресов, протокола для передачи связанных частей информации и языка кодирования информации. Также вместе с Майклом Сендаллом Бёрнерс-Ли создал и сервер для хранения разрозненной информации, и клиентскую программу для ее просмотра. Они назвали свою систему Worldwideweb, разместили ее на сервере NeXTи стали распространять программное обеспечение, специально разработанное для нее.

Рисунок 1. Серверы и линии связи

В результате получилось то, что Бернерс-Ли описал как «Всемирная паутина». Поначалу на Web-страницах была текстовая информация, но постепенно Web-страницы доросли до Web-сайтов, заполненных информацией всех видов. Web сайты просматриваются с помощью специальной программы-браузера. Он загружает содержимое Web-сайта, хранящегося на удаленном компьютере. Пользователи переходят с одной страницы на другую с помощью гиперссылок - слов или зон, которые можно активизировать с помощью щелчка мыши.

Рисунок 2. HTTP – протокол передачи гипертекста, который используется во Всемирной паутине для передачи информации с веб-сайтов.

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

1. Основы Web дизайна

Web-дизайн – это процесс производства web-сайтов, который включает техническую разработку, структурирование информации, визуальный (графический) дизайн и доставку по сети. Детальное понимание процесса создания сайта даст возможность определить, кто чем занимается на каждом этапе и кого, исходя из этого, называть Web- дизайнером. Исходя из четкого понимания цели, для которой создается сайт, объемов сайта, его функциональности, задаются основные параметры 5 визуального представления и структуры сайта. Этап заканчивается после утверждения технического задания заказчиком. Сюда входят форма и организация содержимого сайта. Включает широкий ряд вопросов от продумывания логической структуры Web-страниц до выбора наиболее удобных форм подачи информации. В графическом редакторе компонуется визуальное пространства сайта с помощью графических элементов в качестве украшения или навигации. Дизайн страницы представляет собой графический файл. На этой стадии графическая картинка нарезается на отдельные элементы и с использованием технологий HTML и CSS трансформируется в код, который можно просматривать с помощью браузера. На этой стадии осуществляются действия, способствующие распространению и эффективной доставки сайта по сети. Включает размещение на хостинге и поисковую оптимизацию.

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

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

1. Использование правил Web-дизайна для построения сайта

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

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

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

Основные принципы дизайна – просто, удобно и красиво. Как этого добиться?

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

Размер. Чтобы заставить обратить внимание на какой-либо элемент, надо сделать его крупнее второстепенных. Например, изображение предлагаемого товара в Интернет-магазине всегда увеличено.

Цвет. Грамотное использование цветовой гаммы улучшает восприятие цветовой информации. Используются теплые и холодные цвета, также важны тон, насыщенность и светосила. Однако, чем меньше цветов используется в оформлении сайта, тем комфортнее этим сайтом пользоваться. Лучше использовать 3-4 цвета – основной, вторичный, акцентирующий и цвет заднего фона.

Рисунок 3.Теория цвета в веб дизайне — теплые и холодные цвета

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

Рисунок 4. Типографика

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

Свободное пространство. Сайт не должен быть перегружен информацией

Паттерн. Схема восприятия информации должна соответствовать схемам написания букв «F» или «Z»

Математическая формула дизайна – «золотое сечение». Если придерживаться определенных пропорций при создании сайта, можно правильно выстроить пропорции объектов и улучшить восприятие информации человеком.

Какие популярные тенденции – тренды – используются в современном Web-дизайне? Каждый год тренды в дизайне меняются. Например в прошлом были популярны на иконках приложений IOS объёмные фигуры,а уже с выпуском IOS 15 этот тренд сменился на плоские. Сейчас ценится простота в дизайне и понятность для потребителя.

Стекломорфизм, намеренное упрощение, 3D-типографика, оптические иллюзии, мультипликация, классика, пухляшки – это современные иллюзии,

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

Дизайн сайта предпочитают в основном делать в этих программах: Фигма, Аdobe  Photoshop, Adobe Illustrator, …

И стоит понимать: совсем идеального дизайна сайта просто не может быть.

1. Инструменты Web-дизайнера

   1. Графический редактор Фигма

Фигма (Figma) — это инструмент Web-дизайна, способный создавать: макеты; прототипы; интерактивную анимацию.

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

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

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

Рисунок 5. Создание макета сайта в программе Figma

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

сайта, дизайнер «отрисовывает» экраны и создаёт связи между ними.

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

Элементы интерфейса — это внешний вид продукта. В Фигме можно создать кнопки, иконки, формы обратной связи и настроить эффекты: сделать кликабельные кнопки, раскрыть списки, создать анимацию для блоков и попапов.

В Фигме есть основные инструменты для работы с векторными объектами, она позволяет экспортировать дизайн в формат SVG, импортировать векторные объекты из Adobe Illustrator или редактора Sketch.

Три причины выбрать Фигму для совместной работы

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

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

Рисунок 6. Облачные технологии работы с данными

• Обратная связь. К макету в Фигме участники могут оставлять комментарии и получать фидбек от коллег. Согласования пройдут быстрее, а история переписки не затеряется в почте.

Функции: Как и любой графический редактор Figma имеет схожий набор функций.

Для того, что начать создавать шедевры нам понадобятся знания в таких вещах, как: Frame, Text, Figures, Columns, Shadows, Prototyping.

Frame - определенная область в графической структуре, которая имеет собственные параметры. Figure/block позволяет создать стрелочки, блоки, квадраты, звезды, треугольники и т.д

Имеет такие же свойства, как и Frame , за исключением того, что является фигурой, а не областью.

Text позволяет создавать и редактировать текстовый блок.

Effect, оно же Shadow применяется как к фигурам, так и к фреймам. Создает тень,придающую блокам особый эффект, помогает в создании кнопки.

Сolumns помогает наиболее правильно располагать блоки на странице, чтобы это смотрелось красиво.

Можно установить их цвет, количество, отступы.

Пожалуй, главнейший плюс Figma, относительно других редакторов - интегрированное Прототипирование.

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

1. Графический редактор Adobe PhotoShop

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

Назначение Adobe PhotoShop. Как и любой редактор изображений, Adobe PhotoShop предназначен для внесения изменений в изображение. Программа позволяет ретушировать изображение и подвергать его спецэффектам, переносить детали одного снимка на другой, вносить текст, менять соотношение цветов и даже добавлять цвет в изображения, выполненные в оттенках серого. Можно создавать новые изображения. AdobePhotoshop лучше всего подходит для создания и редактирования следующих видов изображений:

- сканированные фотоснимки;

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

типа;

- логотипы и эмблемы с нечеткими границами, бликами и тенями;

- спецэффекты с применением фильтров и коррекции цвета.

Рисунок 7. Пример создания макета сайта в AdobePhotoshop

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

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

Строка состояния. Находится над панелью задач Windows, в ней указываются выбранные (активные) инструмент и изображение.

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

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

Цветовые модели:

· цветовая модель RGB

· модель HSB

· цветовая модель LAB

· CMYK

1. Графический редактор Adobe Illustrator

Adobe Illustrator — вторая по популярности программа из пакета Adobe после знаменитого Photoshop и на самом деле она пригодится не только иллюстраторам. Основная её функция — это действительно создание иллюстраций, лаконичных картинок c однотонными заливками. Но, помимо этого, здесь верстают макеты для печати, создают логотипы и иконки для сайтов, делают картинки в изометрии. Illustrator нужен не только представителям одноимённой профессии, но и гораздо более широкому кругу специалистов.

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

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

Помимо однотонных заливок, в программе доступны градиенты, разные уровни прозрачности, возможность добавлять эффекты. Также в Illustrator очень удобно работать с текстом: легко перемещать надписи, редактировать параметры шрифта, а при желании буквы можно перевести в кривые и работать с ними как с обычными векторными фигурами.

Рисунок 8. Векторная графика в Adobe Illustrator

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

Современные фирменные знаки — векторные. Это нужно для удобства масштабирования без потери качества: логотип любой компании можно в два клика растянуть на размер огромного билборда или, напротив, разместить на шариковой ручке. А в интернете простые векторные логотипы не тормозят загрузку Web-страниц, что тоже очень ценно.

Лаконичные логотипы строят по модульным сеткам, а сложные рисуют с нуля с использованием референсов — и то, и другое удобно делать в программе. Даже детализированные логотипы рисуют в Illustrator.

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

Детализированная иллюстрация в векторе — это кропотливое дело, хотя работу в программе можно оптимизировать: группировать фигуры, просматривать изображение в контурном виде без заливок, автоматически заменять конкретные цвета. С графических планшетов удобно работать кистями: они здесь такие же, как в Photoshop, только вместо растровых линий получаются сразу векторные.

Визуализация данных помогает проще и быстрее усваивать информацию. Поэтому   нас везде окружает инфографика: на сайтах, в соцсетях, в рекламе, в презентациях. Иногда это обыкновенные плоские картинки, а иногда — изометрия. Но основное отличие инфографики от простой иллюстрации — это сочетание картинок с небольшими блоками текста. Очень редко одних картинок достаточно для точной передачи смысла. Бывает инфографика с фрагментами фотографий — в этом случае без Photoshop не обойтись. Но если нужны только рисунки и текст, удобнее всего это делать в Illustrator: здесь легко двигать картинки и надписи туда-сюда, автоматически их масштабировать, перекрашивать и выравнивать по направляющим линиям.

В Illustrator делают макеты мерча, упаковок рекламных листовок, флаеров, вывесок. Здесь можно сверстать всё, что не крупнее 5,7 метра, — это приблизительный размер максимальной рабочей области в программе. Также редактор не очень годится для создания многостраничных макетов — тут нельзя автоматически настроить единообразное форматирование страниц, а текст не будет автоматически передвигаться по листам при внесении изменений.

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

Основное преимущество Illustrator — возможность легко двигать изображения и надписи, перекрашивать их и менять порядок наложения. Также готовый макет удобно вставлять на мокапы в Photoshop: можно вносить изменения в дизайн в векторной программе, и они автоматически будут переноситься на финальную картинку.

Макет любой полиграфии обычно делается в векторном редакторе — а дальше можно показать его клиенту на мокапе или сразу отнести в типографию.

Рисунок 9. Изометрия – имитация трехмерной графики

Главный минус Illustrator — ограниченный размер рабочей области: дизайн билборда на шесть метров в нём сделать не удастся. Поэтому для особенно крупных макетов всегда используют Corel.

Но в остальных случаях дизайнеры нередко выбирают Illustrator, потому что он интегрирован в экосистему Adobe. Можно легко переносить иллюстрации в программу InDesign для вёрстки книги или логотипы — в Photoshop для создания презентации заказчику. Изменения всех файлов будут синхронизироваться, это значительно ускоряет работу. И, поскольку большинство дизайнеров и художников работает сразу в нескольких программах, это большое преимущество Illustrator.

Существуют  онлайн-платформы, например, Behance, где представители творческих профессий оформляют профили и презентуют свои работы. Такие презентации проектов называют кейсами. Задача кейса — показать не только финальный результат, но и процесс, который за ним стоит. Заказчик не разбирается в дизайне. Когда он смотрит на голый макет, то не понимает, почему тут такие цвета, кнопки, иконки и фотографии. При наличии кейса клиент понимает, как работает дизайнер и формулирует представление о нем, как о компетентном специалисте. Кейс можно считать целой историей выполнения работы, и если всё сделать грамотно, эту историю будет интересно изучать, а результат будет вызывать доверие потенциальных работодателей и уважение коллег.

Я покажу процесс создания кейса на примере моих работ.

2.1. Рецепт успешного кейса

Иногда создание кейса может занимать не меньше времени, чем работа над самим проектом. Вот простой совет, который поможет упростить и ускорить процесс:

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

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

Начните с исследования/идеи

Рисунок 10. Кейс для рекламы загородного дома отдыха

Выберите содержимое, которое хотите показать/выделить.

Набросайте несколько эскизов, макетов на бумаге.

Создайте вайрфрейм (макет, черновой эскиз проекта).

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

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

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

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

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

Вот список самых универсальных блоков, которые можно найти практически в каждом кейсе:

1. Первый экран кейса

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

Рисунок 11. Иллюстрация к кейсу

2. Описание проекта

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

Рисунок 12. Описание кейса «Загородный лагерь»

3. Описание задачи и цели

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

4. Блоки подготовительной работы

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

5. Разные визуальные решения

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

Рисунок 13. Дневной план

6. Видео и GIF-анимации

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

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

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

7. Результаты работы

Рассказав о проекте, о его сложностях и обо всех самых интересных и важных этапах работы, покажите финальный результат. Например, если кейс на тему пользовательских интерфейсов или Web-дизайна, это должны быть макеты: десктопные и мобильные версии сайтов или экраны приложения.

8. Техническая информация

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

Рисунок 14. Завершающий экран кейса

Формат кейса

Максимальная ширина кейса — 1400 пикселей. То есть даже если вы загрузите макет шириной 1920 пикселей, Behance всё равно будет отображать его в 1400. При этом внутри кейса на изображение можно нажать, и оно откроется в максимально доступном разрешении. Так что в некоторых случаях есть смысл экспортировать изображения из графического редактора в полуторном или двойном размере

Высота кейса может быть различной. Но нежелательно загружать весь кейс одной картинкой — любой Behance-кейс строится из отдельных смысловых блоков.

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

Длина кейса

Количество блоков в кейсе обычно зависит от размера проекта. Среднее их число — от пяти до 15. Меньше пяти точно делать не стоит — это уже сложно будет назвать полноценным кейсом. А вот больше 15 блоков — распространённая практика, особенно когда речь идет о UI/UX-презентациях.

Хорошая длина совокупности всех блоков — около 20 000 пикселей. Если получается значительно больше, вы должны быть уверены, что оно того стоит.

С чего начать дизайн Behance-кейса

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

Составьте список смысловых блоков будущей Behance-презентации.

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

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

Форматы изображений

Каждый статичный блок стоит загружать на Behance как отдельную картинку в формате PNG или JPG.

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

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

Видео или анимация?

У GIF-изображений есть преимущество: их создание требует меньших навыков, усилий и ресурсов в производстве, чем создание видео.

Анимацию загружать в кейс так же просто, как обычные картинки. Однако, например, у Behance есть ограничения на допустимый размер загружаемых изображений, включая GIF, — 50 МБ.

Если же для кейса принципиальны высокое качество и плавная анимация, больше подойдёт видеоформат. Для того чтобы добавить видео в кейс, его лучше всего предварительно загрузить на видеохостинг Vimeo, YouTube, либо просто загрузить видео прямо на Behance. Это даёт дополнительные возможности настройки.

Мы всё чаще встречаем 3D-графику среди трендов UI-дизайна. А значит, всё больше дизайнеров используют ее в своих работах. Их можно понять: часто разработка сайта с 3D-элементами стоит не на порядок дороже обычных шаблонных сайтов, а эффект гораздо круче.

Начнем с теории

3D-модель — это объемное изображение объекта в цифровом пространстве. Любая 3D-модель состоит из полигонов — плоских многоугольников. Чаще всего это четырехугольники.

Полигоны формируют полигональную сетку, а она определяет форму объекта. Ее еще называют топологией — то, как именно полигоны формируют 3D-объект.

Если топология правильная, объект будет смотреться реалистично при анимации. Простой пример: мы хотим согнуть модель человека в локте или колене. Если топология сделана неправильно, сгиб будет выглядеть неестественно.

Рисунок 15. 3D-модель

Чтобы 3D-модель стала реалистичной, нужны текстуры и освещение.

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

Рисунок 16. Текстура 3D-модели

Для шейдеров развертка не нужна. Да, еще одно сложное слово. Шейдеры отвечают за физические свойства объекта — шероховатость, прозрачность, блики. Например, чтобы сделать стол деревянным, нужна текстура, а чтобы показать его шероховатость, неровности — шейдер.

Текстуры отвечают за материал. А шейдеры — за физические свойства. Здесь это неровности и шероховатости предмета.

Рисунок 17. Фактура 3D-модели

Освещение — один из факторов, почему 3D-объект выглядит реалистичным. Если правильно подобрать освещение, оно создаст контрасты между объектами, сделает материалы более яркими и выразительными и позволит настраивать тени объектов.

Как использовать 3D в веб-дизайне

3D используют в веб- и мобильных интерфейсах, играх, видеороликах, анимациях, иллюстрациях. В отличие от плоского двухмерного дизайна 3D-модели объемные и интересные. Пользователю хочется взаимодействовать с ними: изучать, приближать, вращать на 360°. Например, как тут.

В 3D можно показать то, чего еще не существует. Без этой технологии не обходится ни один застройщик. Она создает спрос на объект еще до его реализации и демонстрирует пространство, внешний вид здания, его территорию (например, так). Иногда дизайнеры создают в 3D интерактивные интерьеры — настолько крутые, что в них можно открыть каждую дверь и даже каждый ящичек.

3D помогает визуализировать и то, чего увидеть просто нельзя: например, как объект устроен внутри. Никто не будет разбирать корабль, чтобы показать, как работает двигатель. Или например, чтобы показать работу смазочных материалов внутри двигателя. 3D отлично с этим справится.

Интерактивные карты. Для сайта промышленно-продовольственного кластера «Максимиха» мы создали такую карту. Если кликать на помещения, можно рассмотреть их в деталях и узнать подробности о каждом.

Рисунок 18. Интерактивная карта

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

Рисунок 19. Сайт зернового холдинга 

Кажется, что дизайн россииского саита Actimel — тоже в 3D. Но перед нами секвенция: покадрово разложенная анимация, где каждый кадр — это отдельная картинка. Секвенция — тоже классный вариант для дизайна сайта.

Рисунок 20. Дизайн российского сайта Actimel

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

Где еще можно применить: webAR

Как использовать 3D в дополненной реальности (или AR) и какие там ограничения, мы уже рассказали тут. Классные примеры webAR:

Victoria: День мертвых. В честь праздника бренд пива Victoria заколлабился с художником Грувом Джонсом. Результат — атмосферные 3D-работы художника в AR, которые пользователи могли увидеть, наведя камеру смартфона на этикетку бутылки.

AR-примерка с Samsung. Бренд дал пользователям возможность «примерить» виртуальную технику прямо в интерьере. Нужно было просто отсканировать QR-код во время прямой трансляции — и техника из новой коллекции Samsung появлялась у вас дома.

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

Рисунок 21. Дизайн сайта Хеллоуин от Amazon

Какие есть ограничения

При создании 3D-модели важно помнить об оптимизации. Чем меньше и «легче» 3D-визуализация, тем лучше она будет воспроизводиться. Рассмотрим, какие есть ограничения.

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

Текстуры. Здесь та же история. Нужно соблюдать баланс между качеством текстуры и тем, сколько она «весит». Текстура должна быть качественной и при этом не «тяжелой», чтобы нормально загружаться.

Освещение. Если вращать объект вокруг источника света, его освещение и тени будут меняться. Но если объектов много — например, как в игре для РОЛЬФ, — процесс будет тормозить. Поэтому освещение в таких сценах обычно «запекают»: делают статичным.

«Железо». Представьте, что вы сделали «тяжелую» игру с 3D-элементами. Если пользователь установит игру на компьютер, она обратится к видеокарте через «мостик» — драйвер. Драйвер передаст информацию на видеокарту, «железо» задействуется на полную, и игра будет «летать».

Но в браузере эта игра будет зависать: там такого «мостика» нет. Один и тот же 3D-объект или сцена могут быстро загружаться на компьютере, но тормозить в браузере. Поэтому 3D-объекты важно оптимизировать и по возможности делать «легче».

3D в веб-дизайне — не такое уж дорогое и энергозатратное удовольствие. Оно может обойтись не космически дороже обычных блочных сайтов, за которые заказчики отдают сотни тысяч. Но у 3D есть огромный плюс: объемная графика и интерактив привлекут внимание пользователя, он запомнит вас и расскажет другим.

Код для браузеров со встроенной поддержкой WebGL:
doctype html