1 урок. Дизайн в теории. Ознакомление с UI и UX. Кто такие веб-дизайнеры? Веб-дизайнер – популярная профессия, которая будет востребована и в будущем. Бизнес активно переходит в онлайн, растет доля продаж товаров и услуг в интернете, появляется все больше сайтов, лендингов, интернет-магазинов и веб-сервисов. На сегодняшний день работа web-дизайнера является незаменимой. Веб-дизайнер — это человек, который работает над внешним видом сайта. Он выбирает, какие элементы будут представлены на странице и в каком порядке они будут отражаться на мониторах пользователей. Например, он решает, что будет, если навести курсор мыши на определенный блок и в какой последовательности будет отображаться информация при прокрутке страницы вниз. В отличие от дизайнера одежды или интерьера, к работе веб-дизайнера нельзя физически прикоснуться, она существует исключительно в интернет-пространстве. И если дизайнер мебели должен уделять внимание тканям и материалам, из которых создается предмет, то веб-дизайнер думает о цветах, композиции и простоте использования сайта для пользователя. Что должен знать и уметь веб-дизайнер? Чтобы стать таким специалистом, т.е веб-дизайнером, потребуется широкий спектр навыков. Важно не только быть творческим человеком, но и уметь работать с рядом программ и обладать определенной базой знаний. В то же время важны и soft skills, поскольку работа веб-дизайнера неразрывно связана с общением с клиентами. Что же такое Soft Skills? — под этим термином подразумевают широкий спектр умений. Он включает умение организовывать командную работу, вести переговоры и договариваться с коллегами, креативность, способность учиться и адаптироваться к изменениям. Необходимые soft skills для веб-дизайнера: коммуникабельность и умение договариваться с клиентом; усидчивость: придется много времени проводить перед компьютером; самоорганизованность: особенно важна для фрилансеров, которые сами строят свой график; стремление к саморазвитию: для качественной работы стоит постоянно следить за последними тенденциями в профессии; внимание к деталям, поскольку при веб-дизайне важно все: от цветовых сочетаний до навигации. Что может потребоваться веб-дизайнеру? й б ф знание принципов дизайна: изучение основ поможет лучше углубиться в профессию; знание типографики и умение работать со шрифтами; понимание правил композиции, чтобы выстраивать визуальную гармонию; знакомство с цветовым кругом и понимание, как разные цвета работают вместе; умение пользоваться дизайнерскими программами, например, Adobe Illustrator, Photoshop и Figma и GIMP; умение работать в программах для адаптивного веб-дизайна: они позволяют проверять, как страницы смотрятся с разных устройств; навыки графического дизайна, которые помогут улучшить работу и расширить потенциальное число работодателей; понимание бизнес-стратегий. Важно знать, как дизайн сможет помочь целям клиента. Иногда при редизайне сайта достаточно изменить несколько настроек в навигации, чтобы привлечь поток посетителей. Кому нужны веб-дизайнеры? Любой интернет-проект направлен на привлечение внимания потенциальных покупателей. Чтобы продвинуть продукт, нужен красиво оформленный и удобный сайт. Его созданием занимается веб-дизайнер – специалист, наделенный художественным вкусом, навыками дизайнерского творчества и специализированным программным обеспечением. Как веб-дизайнер работает с заказчиками? Уникальный дизайн стоит дороже, но и предполагает отрисовку с нуля, полностью уникальную разработку под конкретный заказ. В зависимости от профессионализма и/или политики компании веб-дизайнер либо разрабатывает идею и концепцию дизайна полностью самостоятельно, либо получает ряд требований (цвет, стиль и тому подобное), ожиданий и идей от заказчика или творческого директора (арт-директора) и старается держаться этого направления при разработке макета. Большинство заказчиков ошибочно отождествляют веб-дизайнера и веб-мастера, поручая ему и публикацию сайта. Иногда дизайнер может предложить дизайн-решение на основе шаблонов (своих или даже чужих), это ускоряет работу и обойдётся заказчику дешевле. Некоторые дизайнеры даже специализируются на изготовлении дизайн-макетов для продажи в качестве готовых шаблонов, которые затем могут быть куплены и использоваться менее опытными дизайнерами или вебмастерами для изготовления типовых сайтов (по сути, без уникального дизайна). Иной раз разработкой веб-дизайна называют небольшую перекомпоновку и адаптацию такого шаблона под конкретный заказ. Конечным продуктом работы веб-дизайнера является дизайн-макет: картинка, представляющая предполагаемый будущий внешний вид страниц сайта. Картинка эта является многослойной, где, на усмотрение дизайнера, почти каждая деталь — отдельный слой, приложенный к другим слоямкартинкам, за счёт чего может легко выполняться доработка, замена, перекомпоновка и другие задачи. В зависимости от идеи и целей макет может включать фотографии, сложные коллажи, иллюстрации, текстовые слои, уникальные иконки. Для главной страницы и внутренних иногда рисуются отдельные макеты с дополнениями или изменениями в соответствии с тематикой страницы. Изображение первоначально может быть векторным или растровым, выполненным в GIMP или другом визуальном редакторе. Чем же отличаются векторные и растровые изображения? Векторная графика — это изображения, сформированные множеством точек, объединенных математическими соотношениями. Каждый объект — это визуализация математической функции. Векторное изображение имеет преимущество перед растровым по качеству: при любом увеличении оно сохраняет идеальную четкость. Растровое изображение — изображение, представляющее собой сетку (мозаику) пикселей — цветных точек (обычно прямоугольных) на мониторе, и других отображающих устройствах. А вот и пример на картинке: Как выглядит рабочий процесс веб-дизайнера? 1. Дизайнер получает данные от заказчика — почему нужен именно сайт, какую задачу он должен решить, как он будет работать, какие пользователи будут на него заходить. Также дизайнер должен сам расспросить у клиента о его задачах, чтобы точно понять, что и для чего он делает. 2. Создаёт наброски будущего сайта. На этом этапе они больше похожи на схемы, где указывается расположение основных элементов на страницах сайта и пользовательские сценарии. 3. Делает прототип сайта. Дизайнер работает над эстетикой, дорабатывает пользовательские сценарии и утверждает работу у клиента. 4. Готовит макет к разработке. Чтобы разработчики могли понять, как должен работать будущий сайт, дизайнер пишет подробное техническое задание. Также в процессе дизайнер остаётся на связи с программистами, отвечает на их вопросы и следит за итоговым результатом. Что же такое техническое задание? Техническое задание (ТЗ, техзадание) — документ, содержащий основные требования заказчика к дизайну логотипа, определяющие условия, сроки и цели, в соответствии с которым осуществляются оказание услуг и их приемка по разработке логотипа. В каком направлении можно дальше развиваться веб-дизайнеру? О мере развития дизайнер или углубляется в одно из направлений веб-дизайна, или учится работать над всем продуктом, применяя знания из разных сфер. Для начала советую обратить внимание на UX/UI-дизайн, моушн-дизайн, брендинг и создание логотипов. UX/UI — это дизайн интерфейсов. Притом не только для сайтов, но и для приложений и компьютерных программ. Вот как один из примеров: Моушн-дизайн. Помогает разрабатывать микровзаимодействия — короткие анимации на сайте или в приложениях, которые возникают как реакции на действия пользователей. Вот как один из примеров: Брендинг и создание логотипов. Помимо хорошего сайта, компании просят создать логотип или фирменный стиль. Чтобы работать в этом направлении, нужен творческий подход и умение рисовать. Вот как один из примеров: Где могут работать веб-дизайнеры? в дизайн-студиях; во всех организациях, имеющих свой сайт (банки, торговые компании, клиники, заводы и т. д.); во фрилансе. В каких программах работают веб-дизайнеры? Figma и GIMP — два популярных инструмента, которые веб-дизайнеры используют в процессе проектирования. Figma — это инструмент векторного проектирования, который широко используется для проектирования интерфейсов, прототипирования и совместной работы. GIMP, с другой стороны, представляет собой программное обеспечение для редактирования растровых изображений, которое используется для таких задач, как ретушь фотографий, композиция изображений и графический дизайн. И Figma, и GIMP обладают уникальными функциями, которые делают их идеальными для вебдизайна. Figma позволяет создавать адаптивные дизайны, которые можно легко адаптировать для разных размеров экрана и устройств. Он также имеет надежный набор инструментов для совместной работы, который упрощает совместную работу дизайнеров над проектами. GIMP, с другой стороны, имеет расширенные функции редактирования изображений, которые позволяют дизайнерам создавать потрясающую графику и визуальные эффекты для своих веб-сайтов. В этом курсе мы рассмотрим ряд тем веб-дизайна с использованием Figma и GIMP. Вы изучите основы этих инструментов, в том числе как создавать и редактировать основные фигуры, работать с типографикой и создавать каркасы и макеты. Мы также рассмотрим дополнительные темы, такие как редактирование изображений, создание пользовательских элементов интерфейса и экспорт ресурсов для Интернета и мобильных устройств. В заключение, веб-дизайн является важным аспектом веб-разработки, который включает в себя создание визуально привлекательных и удобных веб-сайтов. Figma и GIMP — это мощные инструменты, которые помогут вам создать потрясающий дизайн для вашего сайта. Дело не в таланте Был один человек, который много играл в Майнкрафт. Он смотрел на то, прекрасное, что создают другие, но когда пытался построить что-то своё, все получалось похожим на коробку. Ни красоты, ни стиля. Да и как можно вообще сделать что-то красивое в Майнкрафте? Потом он нашел одного видеоблогера на YouTube и построил копию того, что строил он. Через несколько недель он сформировал собственный стиль и мог создавать уже что-то своё. Внезапно его конструкции перестали выглядеть как непонятно что. Да что там говорить, он даже выиграл один конкурс. Собственно говоря, я рассказала эту историю к тому, что дизайн — это навык, и, как и в случае с любыми другими навыкам, дизайн можно освоить. Что такое веб-дизайн и с чем его едят? Веб-дизайн (от англ. web design) — отрасль веб-разработки и разновидность дизайна, в задачи которой входит проектирование пользовательских веб-интерфейсов для сайтов или вебприложений. В настоящее время под термином веб-дизайн понимают именно проектирование структуры вебресурса, обеспечение удобства пользования ресурсом для пользователей. Веб-дизайн постоянно меняется, каждый год появляются новые направления и технологии. Поэтому дизайнеру необходимо постоянно актуализировать свои знания — смотреть на то, что сейчас более востребовано и какие технологии появились, а ещё разбираться в нескольких смежных областях, чтобы создавать современные продукты. Почему веб-дизайн так важен? Не менее чем в 95% сайтов веб-дизайн используется для того, чтобы скрыть скудность контента сайта. Особенно важен дизайн сайта в тех случаях, когда контента сайта вообще нет. Когда владельцу сайта ничего о себе рассказать, или он не может рассказать о своих преимуществах, например, перед конкурентами, и т.д. В настоящее время профессиональное создание интернет магазина, сайта и лендинга является довольно перспективным бизнесом. Процесс подразумевает отличное знание психологии человека. Важно знать, какие графические параметры и цвета, привлекают пользователей, что весьма полезно при разработке сайта. Для того чтобы ресурс имел успех, стоит приложить много усилий в процессе его изготовления. Одним из важных моментов, который стоит учитывать в ходе разработки, является дизайн. Создание визуального оформления ресурса считается одним из главных этапов при формировании сайта. Именно от него зависит то, как его воспримут пользователи и захотят ли продолжить работу на нем. Первое впечатление происходит всего один раз. По этой причине эксперты советуют тщательно продумывать каждую деталь дизайна, которая поможет создать приятную атмосферу, а также настроит пользователя на полное восприятие информации, присутствующей на ресурсе. Что такое UI и UX а если быть точнее, как расшифровываются эти аббревиатуры? Аббревиатура UX расшифровывается как user experience ― «пользовательский опыт». Простыми словами, это то, каким образом пользователь взаимодействует с интерфейсом и насколько сайт или приложение для него удобны. UI ― это user interface, пользовательский интерфейс, проще говоря ― оформление сайта: сочетания цветов, шрифты, иконки и кнопки. Ну а если еще короче: UX ― это функционал интерфейса, UI ― его внешний вид. В современном дизайне UX и UI практически всегда идут рядом, потому что они очень тесно связаны. Да, действительно, в некоторых крупных агентствах пользовательские сценарии и визуальные интерфейсы продумывают разные специалисты. Но всё же результат будет гораздо лучше, если весь проект будет вести один дизайнер, поскольку так он будет строить работу комплексно. Работа над проектом всегда начинается с UX. Первым продумывается, какие пользователь будет использовать маршруты на сайте, какие у него могут возникнуть сложности во взаимодействии, как подвести его к целевому действию. Что нужно учесть при разработке веб-дизайна? Тщательный подбор шрифтов — это одна из тех мелочей, которые отличают хороший дизайн от плохого. Изображения — это важно. Постарайтесь, чтобы на ваших страницах использовались бы, хотя бы в небольших количествах, подходящие иллюстрации или фотографии. Выстраивайте визуальную иерархию элементов, используя оттенки цветов. Недостаточно использовать лишь пару цветов, один из которых является основным, а второй представляет собой цвет текста. Пустое пространство между элементами — это важный элемент дизайна. История, которую рассказывает веб-страница, должна строиться на достоинствах проекта, а не на его функциональных особенностях. Если вы чувствуете, что ваши идеи истощились — ищите вдохновение в других проектах. (О том, где можно взять вдохновение я вам расскажу на следующих занятиях) Разработчику, который привык работать с кодом, а не с визуальными образами, может быть непросто переключиться на волну дизайна. Но дизайн — это то, чему вполне можно научиться. Помните о том, что дизайн может быть конкурентным преимуществом вашего проекта, поэтому уделяйте ему внимание и создавайте привлекательные сайты, с которыми удобно и приятно работать. Типы сайта, какие они есть? Сайт - визитка Сайт-визитка –как правило, это одна или несколько страниц в интернете, размещенных по одному доменному имени, и несущая на себе информацию о владельце, основной перечень услуг, товаров, контактные данные и раздел с ответами на основные вопросы. Задача сайта-визитки – дать пользователю максимально полный перечень информации о компании или частном лице. Вот так вот выглядит один из примеров: Корпоративный сайт Корпоративный веб сайт это внешне ориентированный портал, который имеет определенный набор функций. Вся информация, размещаемая на таком ресурсе, имеет четкие функции. Сайт представляет собой своеобразную рекламную площадку, призванную привлекать новых клиентов. Аудитория здесь только целевая, которая получает исчерпывающие ответы на все свои вопросы. Вот так вот выглядит один из примеров: Каталог продукции Каталог— это вид коммерческого сайта, на котором представлен весь ассортимент компании с подробным описанием. Вот так вот выглядит одни из примеров: Интернет-магазин Интернет-магазин (англ. online store или e-shop) — сайт, торгующий товарами посредством сети Интернет. Позволяет пользователям онлайн, в своём браузере или через мобильное приложение, сформировать заказ на покупку, выбрать способ оплаты и доставки заказа, оплатить заказ. Вот так вот выглядит один из примеров: Лендинг Лендинг — это отдельная страница, созданная в маркетинговых или рекламных целях для повышения конверсий. Вот так вот выглядит один из примеров: Какие стили в веб-дизайне у нас существуют в наше время? Корпоративный сайт или classic Лаконичность и строгость, аккуратность и простота. Корпоративный стиль сайта — это одно из ведущих направлений. Классическое направление включает в себя аккуратную типографику и нейтральные цветовые решения (как правило один акцентный цвет). Стандартная сетка, размер заголовков и текстов соответствует всем правилам пользовательского восприятия. Логически построенная структура сайта, которую разрабатывают наши seo-специалисты, отвечает требованиям поисковых систем. Сюда же входит лаконичная анимация, простая навигация и понятное юзабилити. Вот так вот выглядит один из примеров: Минимализм Свободное пространство, акцент на контент и фото. Большим, а главное правильным количество воздуха между элементами можно легко управлять вниманием пользователя. Миссия минимализма: устранить беспорядок. Вариант для тех, кто устал от классики, но ценит все её преимущества. Вот так вот выглядит один из примеров: Flat дизайн Чем проще, тем лучше - знакомьтесь, стиль Флэт. Схож с минимализмом, однако в этом стиле отсутствует всевозможные текстуры, наложения, объемы, тени и градиенты. Один акцентный цвет, шрифты без засечек. Вот так вот выглядит один из примеров: Стиль МЕТРО Основы стиля впервые применила компания Microsoft для Windows Phone 7. Основной принцип стиля МЕТРО: квадратные плитки, которые демонстрируют текст, а не привычную подборку изображений, что значительно упрощает навигацию пользователя сенсорного устройства (телефона, лол). Нет градиентов, теней и обрамлений - только чистые цвета, которые не будут забирать лишнее внимание. Текст - только смысловая нагрузка, красота уходит на второй план, читабельность и структурированность. Анимация в МЕТРО приветствуется, а вот внедрение принципа квадратов на широкоформатные сайты - не очень. Вот так вот выглядит один из примеров: Назад в будущее Винтажный шик сейчас находится на пике моды во всех направлениях современной жизни. Несомненно, ретро-стиль в чистом виде подойдёт далеко не всем компаниям, только тем, чей фирменный стиль соответствует принципам направления. Геометрия или её отсутствие, яркие и напротив постельные элементы - часть стиля, но ключевую роль в винтажном стиле играет типография, смелые и декоративные шрифты. Конечно же, для полного легкого флера старины следует добавить потертости и шум. Вот так вот выглядит один из примеров: Organic & Natural Природные текстуры и цвета - основная фишка стиля. Основной акцент на и изображениях, шрифты лаконичные. В оформлении используются природные декоративные элементы: цветы, листья, животные и птицы. Organic & Natural подойдет цветочным магазинам, брендам одежды из натуральных тканей, в целом для любого эко-френдли бизнеса. Вот так вот выглядит один из примеров: Брутализм и необрутализм Брутализм - креативный, безумно яркий и неоднозначный стиль. Типичная логика и юзабилити сайта отодвигается на задний план. Кислотные оттенки, сочетание, казалось бы, несочетаемого (красный, зеленый и синий). Основной плюс стиля в том, что не нужно много времени уделять на ТЗ и структуру сайта :) Этот стиль в основном популярен в дизайне плакатов и графическом дизайне. Вот так вот выглядит один из примеров: В заключении могу сказать: Здесь перечислены не все стили, только наиболее актуальные для 2023 года. Постоянная череда сочетаний различных техник рождают новые направления, за которыми уследить практически нереально. Главное, чтобы вы или ваш подрядчик понимал и знал, как сделать оформление сайта цельным, актуальным и продающим. А сочетать несочетаемое не стоит, хотя у брутализма получилось :) Не бойтесь экспериментировать и доверяйте своим подрядчикам! Небольшое задание по стилям и типам сайта Нужно зайти на сайт: https://www.behance.net/ Выбрать 5 разных видов сайтов, не важно, какие вам понравятся, это может быть лендинг, интернет-магазин, сайт-визитка. Сделать презентацию на 7-8 слайдов и описать те сайты которые вы выбрали. Например: Это лендинг. Он в стиле минимализм. Здесь определенная цветовая палитра которая хорошо между собой сочетается. Есть определенное небольшое меню/навигация сверху что позволяет сразу привести нас к нужной информации, например стоимости товара. Этим самым мы учимся с вами определять стиль и тип сайта и его анализировать. А вот и классный лендинг о гусях:) Мне было приятно с вами познакомиться, благодарю вас всех за внимание! Надеюсь вы приобретете много навыков на этом курсе, все хорошо усвоите, а также я расскажу вам в дальнейшем про крутые источники которые очень круто помогут вам при создании веб-дизайна в будущем и на практике в целом, а также упростят работу! Всем до новых встреч в понедельник!