КТО ТАКОЙ ВЕБ-ДИЗАЙНЕР И ЧЕМ ОН ЗАНИМАЕТСЯ?
Дизайн сайта (или web-design) играет одну из ключевых ролей в привлечении клиентов. Когда человек переходит на сайт, первое, что он видит — это его оформление, то есть дизайн. Дизайн сайта напрямую влияет на мнение клиента о бренде. Вряд ли вам понравится сайт, где нет контактной информации, цвета режут глаз, а удобство пользования на нуле.
- Для какой аудитории создаётся сайт?
- Какую информацию он содержит и какова его главная цель?
- Есть ли у бренда ценности, которые нужно транслировать через дизайн?
КАК РАЗРАБОТАТЬ ВЕБ-ДИЗАЙН С НУЛЯ?
Как стать веб-дизайнером. С чего начать?
- Определиться с типом сайта (авторский блог, сайт-визитка, онлайн-магазин, лендинг и т.д.) На этапе подготовки также стоит выбрать удобную для себя платформу, на которой вы будете создавать сайт.
- Обозначить цель. Например, привлечение новой аудитории и клиентов или продажа товаров.
- Найти примеры сайтов, которые вам понравились. На одном сайте вам мог понравиться шрифт. На другом — цветовая палитра или расстановка элементов. Соедините идеи в одном макете и дополните их своими. Но никогда не копируйте ничьи работы — создавайте собственные на основе референсов.
- Пройти короткое обучение. Прежде чем сделать полноценный сайт, вам необходимо просмотреть хотя бы базовые уроки по созданию дизайна на какой-либо платформе. Например, на своём авторском курсе я обучаю с нуля пользоваться бесплатным графическим редактором Figma (Фигма). Веб-дизайнеры пользуются им для разработки макетов и прототипов сайта. Переходите по ссылке за подробностями: https://goo.su/pbBNf.
КОНСТРУКТОР САЙТОВ: ПРЕИМУЩЕСТВА И НЕДОСТАТКИ ДЛЯ ВЕБ-ДИЗАЙНЕРА
- Работа с конструктором сайтов не требует навыков программирования и специального образования. То есть вы можете создавать не только веб-дизайн, но и предоставлять услуги по вёрстке сайта, что стоит в несколько раз дороже.
- В конструкторе сайтов много бесплатных функций. Конечно, на платных тарифах можно создать более интересный дизайн, так как открывается больше возможностей. Но стандартный веб-сайт реально сделать без вложений!
- Конструктор сайтов предполагает быструю разработку сайта при помощи готовых макетов. В зависимости от сложности работа может занять от нескольких часов до нескольких дней.
- Вы можете найти готовый шаблон (например, дизайн лендинга) и даже посмотреть его демо-версию. Новичкам в веб-дизайне так будет легче визуализировать варианты нужных ему сайтов, что является своего рода подсказкой. Также в конструкторах есть инструменты для исправления дизайна. Вы можете менять цвета, блоки и по итогу создать что-то совершенно своё.
- Готовые шаблоны являются минусом для веб-дизайнера, который стремится на этом зарабатывать. При помощи макетов вы никогда не создадите уникальный дизайн. А кто купит у вас то, что может сделать сам, без особых навыков, в том же конструкторе сайтов?
- Если возникнут какие-либо проблемы в работе сайта, вам придётся потратить немало времени на переписку с разработчиками конструктора или со службой поддержки.
- Бесплатный конструктор сайтов позволяет создать лишь небольшие сайты по типу одностраничных лендингов. А если вам нужен онлайн-магазин или многостраничный сайт — нужно заплатить.
Как стать ВЕБ-ДИЗАЙНЕРОМ с нуля в 2023 году / С чего начать?
СКОЛЬКО ЗАРАБАТЫВАЕТ ВЕБ-ДИЗАЙНЕР В 2023 ГОДУ?
Зарплата веб-дизайнера будет зависеть от его опыта работы, стажа и количества заказчиков. В среднем начинающие специалисты получают около 40 000 рублей в месяц. Более опытный дизайнер веб-сайтов зарабатывает от 60 000. А самым опытным веб-дизайнерам гарантируют зарплату от 100-150 000 рублей и выше. Главное помнить, что такой доход требует усилий и трудового стажа.
На стоимость вашей работы также будут влиять количество грамотно выполненных проектов, знания, навыки, пройденные курсы веб-дизайна, а главное — репутация и отзывы клиентов.
Веб-дизайн в 2023 году только набирает популярность. Если вас действительно заинтересовала профессия веб-дизайнер, то вам предстоит узнать много интересного и нового. Не забывайте собирать свои работы в портфолио, чтобы потенциальные клиенты видели, на что вы способны. А я желаю вам удачи в освоении дизайна!
Источник: ddesign.moscow
Веб-дизайнер: кто это, чем занимается и как им стать
Заходите вы на сайт и видите: приятные цвета, информация удобно разбита по блокам, шрифт легко читается. Понятно, куда нажимать, чтобы перейти в другой раздел или пролистать фотогалерею. К сожалению, бывает и по-другому. Например, когда на странице слишком много элементов, всё перемешано, кнопки сливаются с фоном.
Ещё и это постоянно всплывающее окно, которое перекрывает половину экрана. Хочется уйти и никогда не возвращаться.
Как начать работать веб дизайнером
Ярослав Шуваев
Product owner Альфа-Мобайл, подразделения Альфа-Банка.
Если подойти к вопросу теоретически, то можно сказать, что каждое решение должно быть подтверждено данными или исследованиями. Но не стоит увлекаться.
Стоимость исследований должна быть меньше, чем стоимости внедрения, иначе лучше проводить «проверку боем» — ставить эксперименты на реальных пользователях.
Исследования не должны значительно тормозить запуск продукта. Лучше довериться видению и запустить актуальный продукт, чем долго исследовать то, что не увидит свет.
Стоит помнить, что большинство исследований направлены в прошлое. Для создания новых идей и новых продуктов иногда лучше воспользоваться интуицией и различными креативными методиками (дизайн-мышление, прорывное мышление, ТРИЗ, латеральное мышление и т. д.)
Эскиз сайта или прототип
Что такое прототип. Примеры прототипов. Как рисовать прототип, типовые элементы.
Вы посмотрели на конкурентов, вдохновились классными образцами, и у вас в голове уже появились первые идеи. Теперь нужно эти идеи выразить графически — сделать эскиз.
Эскиз или прототип — это схематичное изображение блоков, из которых состоит сайт. Ваш визуальный сценарий.
Делается это просто: возьмите лист бумаги, два фломастера: чёрный и какой-нибудь контрастный, — и нарисуйте схему, что за чем будет идти. Не нужно все прорисовывать детально, только общую идею. Вам нужно получить сценарий вашей страницы. Думайте так, как будто вы делаете презентацию, мыслите экранами. Что вы хотели сказать?
Вероятно, сначала надо показать какую-то крутую штуку, которая всех просто впечатлит и даст понять, куда человек попал, дальше рассказываете коротко о себе, потом — три преимущества, команда, несколько самых классных работ и контакты. Теперь вам просто нужно нарисовать всё, как оно должно быть.
Примеры того, как выглядят нарисованные прототипы.
Чтобы нарисовать прототип, используйте базовый набор стандартных элементов. Текст изображается прямыми линиями, заголовок рисуем чуть толще. Картинка — прямоугольник с перечеркнутыми линиями, управляющие элементы — как маленькие кнопочки. «Шапка» — полоска сверху. Слева, например, штрих потолще — логотип, а справа пять штрихов — пункты меню.
Совет: не рисуйте прототип слишком большим. Например, на листе А4 ширина окна должна быть 5-6 см. Лучше рисовать компактно и схематично, а на полях написать комментарии.
Старайтесь рисовать аккуратно — будет легче воспринимать. Обычно идей много, поэтому сделайте несколько вариантов и потом обсудить с коллегами, какой лучше.
Обложка. Линия потолще — заголовок. Тонкие линии — краткое описание. Короткие полоски сверху — меню.
Изображения обозначаются перечеркнутыми прямоугольниками. Текст — прямыми линиями.
Если картинка будет во весь экран, то так и нарисуйте — от края до края.
Текст в колонках. Жирные линии — подзаголовки.
Галерея изображений — перечеркнутый прямоугольник и управляющие элементы.
Видео традиционно обозначаем треугольником.
Ключевые особенности — схематичное изображение иконок и текст в колонках.
Отзыв — фотография и текст.
Кнопки и формы изображаются примерно так, как они и выглядят.
Подробнее, для чего нужен прототип, как использовать его при разработке дизайна и при общении с заказчиком, читайте в лекции «Руководство по использованию прототипов в дизайне сайта».
Где взять информацию для сайта. Как написать текст для сайта: ключевые пункты. Стиль текста.
Прежде чем рисовать дизайн, вам нужно позаботиться о контенте, потому что без него придется всё переделывать. Сначала соберите все материалы, которые у вас есть: презентации, брошюры, публикации. Это послужит отправной точкой.
О новом подходе к подаче информации в интернете, читайте в лекции «Цифровой сторителлинг».
Прежде всего, ответьте на вопрос: «Почему я хороший?»
Если вы делаете сайт на заказ, то очень хороший ход — взять интервью у вашего клиента. Включите диктофон и просто поговорите с человеком, задайте вопросы — ничего специфического, просто проявите интерес, выясните, за что вашего заказчика любят клиенты.
Расшифруйте запись сами или наймите исполнителя. Стоит это около 20 рублей за минуту, найти человека можно на youdo.com За небольшую дополнительную плату текст отредактируют, и у вас, наконец, появится буква.
Совет. Пишите все тексты в текстовом редакторе, а не на сайте. Не занимайтесь написанием текста во время дизайна страницы или сайта. В текстовом редакторе намного быстрее редактировать: что-то вырезать, скопировать, переместить. Делать дизайн намного легче, когда текст готов.
Как написать текст для сайта . Если вы пишете текст самостоятельно, воспользуйтесь следующей схемой:
- Напишите короткий текст о себе, своей компании. Это должна быть одна фраза, которая четко и ёмко формулирует, чем вы занимаетесь. Например, — сервис, который помогает создать впечатляющий сайт без технических навыков.
- Напишите чуть более развёрнутый текст. Объясните, чем вы занимаетесь. Формулируйте просто — так, как если бы вы рассказывали это приятелю за чашкой кофе — максимально понятным языком.
- Выделите три основных фишки — почему любят вас или ваш продукт.
- Опишите преимущества . Расскажите, с помощью чего ваш продукт решает проблему клиента, дайте детали.
- Подумайте о заголовках . Хороший прием — формальные заголовки типа «Команда», «Контакты» и т. д. поменять на эмоциональные. Например, вместо «Новости» написать «Будь в курсе», вместо «Контакты» — «Скажите привет».
- Возьмите отзывы. Попросите ваших самых лояльных клиентов сказать пару слов о вас. Отлично работает.
Не пишите избитые фразы, типа «молодая, динамичная, развивающаяся команда».
- Придумайте три ключевых цифры , люди любят цифры. Но старайтесь, чтобы они были осмысленными, понятными и что-то сообщали пользователю. Избегайте абстрактных величин, типа: обслужили 1000 клиентов, выпили 200 литров кофе, продали 38 000 плюшевых медведей. Хороший пример: 7,5 — средний балл IELTS среди наших выпускников. 3 минуты — копируется фильм с одного устройства на другое при помощи приложения.
- Покажите команду , если она сильная. Личность всегда интересна, реальным людям доверяют больше, чем абстрактной компании.
- Расскажите о партнерах или заказчиках , если ими можно гордиться.
- Укажите специализацию. Если в вашем баре большой выбор крафтового пива, отметьте это отдельно.
Смело убирайте вводные конструкции, избегайте клише и канцеляризмов. Используйте сервис glvrd.ru — он помогает очистить текст от словесного мусора, проверяет на соответствие информационному стилю.
Общий совет: если вы совсем не умеете писать, наймите копирайтера. Это стоит относительно немного. Уже он будет брать у вас интервью и предоставит вам текст. Только не забудьте попросить сразу сократить его в три раза.
Утверждение дизайна с заказчиком. Где взять хорошие фотографии для сайта. Навигация на сайте. Что делать с логотипом. Подбор шрифта и шрифтовых пар.
Как сделать сайт стильным.
На этапе дизайна объединяются все предыдущие стадии. Прототипы оборачиваются в уникальный визуальный стиль и подход к коммуникации, наполняются контентом, и продукт обретает свой финальный облик.
Все работы начинаются с главной страницы — она ключевая. Сначала приходит понимание, как будет выглядеть главная страница, затем найденное визуальное решение тиражируется на внутренние страницы.
О том, как использовать законы композиции в дизайне сайта, как работать с цветом и как применять модульные сетки, читайте в лекциях:
С заказчиком, как правило, утверждается дизайн-решение главной страницы и двух-трех внутренних. После того, как утверждена основная концепция, начинается проработка деталей: рисуем иконки, заказываем фото и видеосъемку, корректируем тексты, согласно дизайну.
Не забывайте про мобильную версию, она рисуется после утверждения основных макетов.
Ваша задача — сделать цельный продукт.
Александр Ковальский
креативный директор Creative People
Любая работа укладывается в этапы, этапы упаковываются в схему, а схема становится процессом, который может быть красивым и понятным сам по себе. За любым сайтом стоят сотни часов работы и опыт нескольких специалистов. Поверьте, слаженность команды может творить чудеса — часы, которые тратятся на борьбу с хаосом, могли бы пойти на допиливание и улучшение. Только красивые процессы по настоящему эффективны. Научиться видеть эту красоту, использовать этот опыт — хорошее конкурентное преимущество.
Обложка (первый экран) заслуживает особенного внимания. Если там качественная фотография и небанальный, цепляющий заголовок, то первое впечатление будет удачным.
Пример удачного сочетания фотографии и заголовка на обложке. Скриншот с сайта bemyeyes.org
Где взять хорошие фотографии. Фотографии — это важно, без них ничего не получится. Нет фотографий — считайте, что нет сайта. Не используйте клипартные фотографии. Рукопожатия бизнесменов и улыбающиеся домохозяйки — вчерашний день, такие фото не работают. Лучше сфотографируйте себя и своих коллег, чем искать готовые картинки по запросу «успешный предприниматель».
Наймите фотографа или иллюстратора. Известные иллюстраторы и фотографы стоят дорого, но на рынке много относительно недорогих профессионалов, они с удовольствием для вас поработают, и у вас сразу появится хорошее наполнение для сайта.
Один из трендов современного веба — «плоский» дизайн, частью которого является флэт-иллюстрация. Иллюстрация отлично справляется с двумя функциями: она информативна (информацию удобно и легко воспринимать) и украшает проект, задает ему стиль. Подробнее читайте в лекциях:
Навигация. Рисуя меню , убедитесь, что оно визуально хорошее: не слишком большое, не перегружает всю страницу. Пунктов меню не должно быть много, лучше всего не больше 5. Смело укрупняйте разделы. Названия делайте короткими. Три слова как пункт меню явно не годится.
Они должны считываться с первого взгляда.
Пять — оптимальное число для пунктов меню.
Логотип должен быть горизонтальным. Вертикальные логотипы в вебе работают плохо. Как правило, логотип располагается в меню, а оно не должно занимать много места на экране. Если логотипа у вас нет, то просто напишите название проекта каким-то не системным шрифтом, типа Proxima или Futura. Не мучайтесь, не заморачивайтесь с логотипом, если у вас ограниченный бюджет.
Сейчас это не так важно, как общее впечатление от сайта. Подумайте лучше о фотографиях и общем стиле.
Шрифт. Обязательно подключите фирменный шрифт, это влияет на коммуникацию. Сейчас все держится на контенте, поэтому сам шрифт и задаст вам фирменный стиль. У каждого шрифта есть характер, поэтому постарайтесь подобрать такой шрифт, который соответствует содержанию.
Как правило, для сайта вполне достаточно одного шрифта. Но если вы хотите добиться эффектного контраста, используйте шрифтовые пары: шрифт без засечек и шрифт с засечками. Примеры удачных шрифтовых сочетаний:
Самое верное — взять разные гарнитуры из одного семейства, например PT sans и PT serif
Традиционное сочетание: шрифт без засечек для заголовков и с засечками для текста. Proxima Nova и PT serif
Иногда, в качестве приема, шрифт с засечками используют для заголовков. Georgia и Roboto
Open Sans и Georgia
Подробнее о шрифтах, основах типографики и принципах верстки читайте в лекциях:
Общий стиль и аккуратность. После того, как вы оформили все блоки, посмотрите, чтобы сайт выглядел приятно и аккуратно. Выровняйте отступы, сделайте заголовки единообразными, проверьте, что размер шрифта в тексте везде одинаковый. Убедитесь, что на сайте достаточно свободного пространства.
Убедитесь, что на странице достаточно «воздуха» — вокруг текста и картинок есть пространство, они не слипаются и не мешают друг другу.
Если используете дополнительные цвета, делайте это очень аккуратно.
Обратите внимание на количество используемых стилей, их должно быть немного.
Старайтесь быть аскетичным. Чем проще вы сделаете, тем меньше будет ошибок и сайт получится стильным.
Используйте фирменные цвета. Но это не значит, что нужно покрасить все в разные цвета. Наоборот, соблюдайте правило, что 90% — это черный и белый и 10% какого-то активного цвета. Один дополнительный цвет — лучший вариант. Три использовать нельзя.
Два очень аккуратно.
Когда закончите, попросите своего друга-дизайнера посмотреть и прокомментировать, что у вас получилось. Свежий взгляд всегда сразу же даст хорошую обратную связь.
Несмотря на разнообразие, в вебе существуют дизайн-паттерны, которые помогают сделать дизайн устойчивым.