Дизайн сайта дизайн с чего начать
Пошаговый гайд, который поможет сделать дизайн сайта с нуля. Часть первая: разбираемся, какой сайт вам нужен
Авторизуйтесь
Пошаговый гайд, который поможет сделать дизайн сайта с нуля. Часть первая: разбираемся, какой сайт вам нужен
дизайнер группы разработки карты рассрочки «Совесть» (QIWI)
Должны ли разработчики знать основы дизайна или дизайнеры должны уметь программировать? Это спорный вопрос, на который каждый сам для себя находит ответ. Однако с учётом растущего тренда у работодателей на кросс-функциональность специалистов, несомненным плюсом для программиста будет понимание того, как использовать и сочетать графические элементы, шрифты и цвета на сайте. Да и во фрилансе это позволит реализовывать более сложные и высокооплачиваемые проекты, где качество нередко оценивается не только с точки зрения функциональности, но и креатива.
Гайд состоит из трёх частей. Эта посвящена сбору необходимой информации, следующая рассказывает о разработке визуальной концепции сайта, а в заключительной собраны инструменты для проектирования макета.
«Это бессмысленно», — сказал разум.
«Это нелепо», — заметил опыт.
«Это бесполезно», — отрезал здравый смысл.
«О, вот так красиво!» — обрадовался заказчик.
Брифинг
В процессе разработки сайта оформление — не самая первоочерёдная задача. Сначала необходимо провести бриф с заказчиком и определить основную цель. Это, как минимум, защитит от возможных переделок, когда сверстал уже половину сайта, а клиент говорит, что не это имел в виду (хотя от мелких правок всё равно никуда не деться). Но дизайн тесно переплетается с концепцией сайта и его функциональным направлением. Поэтому прежде, чем садиться за разработку макетов и сочетание шрифтов, рекомендую узнать детально:
Конечно, когда заказчик даёт вам готовый и качественно прописанный брендбук, ваша задача — просто разобраться с ним (какие цвета, какие шрифты, какого рода будут картинки, фотографии и даже композиция). По сути, визуальный стиль сайта уже сделали за тебя, осталось спроектировать, грамотно всё расположить и сверстать. А вот если брендбука нет, то подбор шрифтов, цветов, да и визуального стиля в целом ложится на ваши плечи. Если, конечно, заказчик не приложил к ТЗ дизайнера. 🙂 Но не стоит паниковать, разделите слона на части и действуйте пошагово.
Дизайн сайта определяет его цель
Представьте, какой сайт решит задачу сбора заявок на концерт, а какой — онлайн-продажу товаров для дома? Явно у первого должна быть форма заявки, а у второго — карточки товаров, корзина, фильтрация, онлайн-оплата и так далее. Такую разную функциональность невозможно сделать по одному шаблону. Существуют определённые категории сайтов, которые помогут не только понять, чего хочет заказчик, но и оценить трудоёмкость проекта и его функциональность.
Ниже рассмотрим наиболее распространённые типы сайтов.
Сайт-визитка (landing page)
Одностраничник, который обычно имеет одно целевое действие — подать заявку/заказать звонок. Самый простой в техническом исполнении, содержит всякие описания, преимущества, партнёров и пр. Здесь есть где разгуляться дизайнеру — одностраничник должен быть красивым, запоминающимся и с wow-эффектом, чтобы посетитель оставил-таки заявку.
Первые шаги в веб-дизайне
В этой статье Максим и Катя расскажут о всем пути новичка в веб-дизайне. Именно они изучают резюме и проводят собеседования с начинающими дизайнерами в Digital Lab.
Шаг 1: Выбираем путь профессионального развития
Максим Зайцев, Head of Digital
Сегодня новички чаще всего выбирают такие варианты профессионального роста:
Онлайн-школы, университеты и курсы
Подходят для обучения дизайну с нуля. Здесь вам расскажут о сетках, композиции, научат работать с графикой и анимацией, готовить макет к верстке, расскажут, что такое UX, как и где искать работу, помогут составить портфолио и т. д.
Работа джуниор-специалистом в студии
Не все готовы брать сотрудников совсем без опыта с целью их обучения. Важно так презентовать себя, чтобы зацепить работодателя и показать ему свой потенциал. Многие ребята пишут в резюме, что готовы работать хоть бесплатно, лишь бы обрасти скилами.
Саморазвитие
Саморазвитие и самообучение никто не отменял, но при трудоустройстве их сложно будет подтвердить. Хороший вариант – набить руку дома и создать классное портфолио. Минус самообучения – отсутствие наставника, который направит, укажет на ошибки и даст ценные советы.
Фриланс
Сразу выйти на фриланс могут только очень уверенные в себе люди. Для получения хороших заказов на биржах тоже нужно портфолио. Без него вам придется начать с маленьких задач с минимальной оплатой или вообще без нее.
Самый лучший вариант – сразу идти работать, а в идеале – комбинировать все четыре способа. Так вы повысите насмотренность, получите базовые навыки, попадете в комьюнити коллег, научитесь общаться с клиентами, работать в команде и т. д.
Катя Журавлева, арт-директор
Если у вас профильное образование, и вы в поиске первой работы, то сценарий развития более менее понятен – у вас уже есть студенческие наработки и базовое понимание рынка. Многие будут готовы взять вас стажером.
Если вы переходите в новую профессию, то, скорее всего, уже успели понять зачем и почему. Узнали чем занимается веб-дизайнер, примерно понимаете, каких знаний и опыта вам не хватает.
В обоих случаях для начала составьте виш-лист компаний и расставьте приоритеты. Изучите вакансии и нужные скилы, чтобы определить, что вы уже умеете, а чему предстоит научиться.
Определитесь с тем, что вам важно, а чем можно пожертвовать. Кто-то выбирает известную компанию, а кто-то ориентируется на список своих обязанностей и вес проектов, кому-то важны стабильная ЗП, соцпакет, разные бонусы, а кому-то – формат работы (удаленный или офисный).
Задайте вектор движения и помните, что деньги не должны быть главным критерием, ведь возможность развития для новичка гораздо важнее.
Тут можно посмотреть вакансии:
Шаг 2: Прокачиваем hard и soft скилы
Катя Журавлева, арт-директор
Портрета идеального сотрудника не существует, но мы ждем от новичков базовых вещей:
Не нужно бояться показаться глупым, задавать вопросы и говорить о своих проблемах. Мы понимаем, что не знать все – нормально.
Шаг 3: Создаем хорошее портфолио
Катя Журавлева, арт-директор
Заявите о себе на популярных площадках: Behance, Dribbble, Templatemonster, HeadHunter. Лучше не лениться и создать аккаунты на всех доступных площадках. Шансы, что вас заметят, значительно вырастут.
Если прикладываете портфолио к резюме, уделите особое внимание формату: соберите работы в один документ, не давайте ссылку на архив или «ЯндексДиск» с кучей папок.
В идеале – соберите свой сайт на тильде и разместите везде ссылку на него. Еще несколько советов:
Максим Зайцев, Head of Digital
Учтите основные моменты:
Создайте разноплановое портфолио
Не нужно указывать три сайта застройщиков или приложений доставки еды, лучше добавить работы из разных областей и направлений.
Постарайтесь выделиться
На онлайн-курсах всех учат одному и тому же (например, созданию сайта цветочного магазина, который мы видим из резюме в резюме). Чтобы получить работу, нужно выделиться среди потока желающих.
За 16 дней (с автоподнятием!) вакансию руководителя проектов просмотрели 469 человек, 100 – откликнулись. За 2 дня вакансия дизайнера интерфейсов набрала 594 просмотра и 137 откликов.
Большинство из 137 откликов – люди с одинаковыми работами и шаблонными резюме, которые в итоге сливаются в одного человека. Да, все заполнено нормально, но это поток. Поэтому тупо действовать по скрипту – не ок.
Проработайте детали
Мы понимаем, что у джуна вряд ли были реальные проекты, но можем оценить подход к портфолио.
Например, вы решили создать сайт вымышленного автосервиса. Можно проработать все аспекты и детали: придумать историю клиента и название сайта, цели и задачи, которые перед вами стояли, рассказать, как (и почему именно так) вы их решили, добавить отзывы с реальных сайтов автосервисов.
А можно создать сайт с названием «Сайт автосервиса» без описания, а на отзывах к нему разместить то же фото, что и в вашем резюме.
Гораздо интереснее, когда человек заморочился и проделал огненную (пусть даже ненастоящую) работу.
Сделайте упор на качество
Не создавайте многостраничный маркетплейс с миллиардом элементов. Так выше шанс допустить кучу ошибок. Мы понимаем уровень джуна и выберем из огромного потока именно того, кто сделал небольшой сайт чище и правильнее. Но и слишком простой лэндинг делать не надо: найдите золотую середину.
Учтите сферу
Адекватно оцените, в чем вы хорошо разбираетесь, что вам ближе. Не делайте сайт для «Фортнайта», если не имеете представления об игровой сфере. Делайте то, что понимаете.
Покажите больше
Постарайтесь показать не только конечный продукт: не стоит прикладывать по 5–7 главных страниц сайтов. Мы хотим увидеть весь процесс работы, сетку, шрифты.
Оформите презентацию, рассказав о поставленной задаче и выбранном решении. Не нужно писать «Войну и мир», тезисов будет достаточно. Так вы покажете комплексный подход к работе.
Шаг 4: Размещаем портфолио
Максим Зайцев, Head of Digital
Подготовьте список компаний, которые вы рассматриваете. Найдите их сотрудников, занимающихся наймом дизайнеров, и разошлите им портфолио.
Учтите, что работа в студии сложнее работы на стороне клиента, но там вы научитесь выполнять более разноплановые задачи и взаимодействовать со множеством коллег.
Если хотите попробовать себя на фрилансе, обратите внимание на популярные площадки, где тусуется комьюнити. Туда точно заглядывают и ваши потенциальные работодатели.
Шаг 5: Составляем резюме и пишем сопроводительное письмо
Максим Зайцев, Head of Digital
1. Не используйте шаблонные фразы (готов обучаться, целеустремленный и т. п.).
2. Указывайте только релевантный или смежный опыт (графический дизайн, иллюстрация), не перечисляйте все предыдущие места работы.
Такая информация будет лишней для того, кто ищет веб-дизайнера:
Хороший пример резюме практически без профильного, но со смежным опытом:
4. Перечисляйте ваши скилы, подходящие именно для этой должности.
5. Прикладывайте подтверждение пройденных обучений.
6. Пишите резюме и сопроводительное письмо на русском, а желаемую зарплату указывайте в рублях.
7. Ставьте ссылку на портфолио в самое начало резюме. Проверьте, что она работает и все отображается корректно.
8. Указывайте профильные хобби: стрит-арт, художественное вязание, посещение выставок и т. д. Это даст понимание, что вы живете креативом и творчеством и в свободное время.
Плохой пример – много слов, но нет ссылки на портфолио:
Еще один плохой пример – сразу отказ:
Неплохой пример – все четко и по делу, смущают только ошибки в тексте:
Катя Журавлева, арт-директор
Пример «живого» и ёмкого сопроводительного письма:
Хорошие примеры портфолио:
Шаг 6: Готовимся к собеседованию
Максим Зайцев, Head of Digital
На собеседовании джуниор-дизайнеров мы в первую очередь будем смотреть на человеческие качества.
Покритикуем работы из портфолио, чтобы увидеть, как вы воспринимаете критику. Из-за отсутствия опыта джунов первое время направляют, дают советы, указывают на ошибки. Важно понять, как человек на это реагирует.
Спросим, почему сделано именно так и как еще можно было решить эту задачу. Мы не ждем конкретный ответ, но хотим узнать, как человек рассуждает.
Советуем выдохнуть: вы пришли просто пообщаться, поэтому будьте собой.
Катя Журавлева, арт-директор
Подготовьте небольшую речь о себе и своих работах (на 10 минут). Заранее продумайте ответы на частые вопросы. Расскажите, почему решили пойти сюда, что ожидаете от работы и как представляете обычный рабочий день. Подготовьте вопросы со своей стороны.
Напомню базовые вещи:
Шаг 7: Начинаем работать
Максим Зайцев, Head of Digital
Работа начнется под менторством старшего дизайнера. Вам придется делать все подряд: презентации, оформления, что-то для внутренних нужд компании, адаптивы. Эта работа, с которой трудно не справиться, а в случае неудачи не случится ничего страшного.
Постепенно задачи будут становиться сложнее. Не стоит забывать и о самообучении: развивайте насмотренность, читайте – свежие идеи нужны всегда.
Катя Журавлева, арт-директор
В первые дни мы знакомим новичков с командой и проектами, рассказываем о процессах, даем возможность привыкнуть и освоиться.
Затем начинаем погружать в работу и давать небольшие задачи, курируя все этапы их выполнения. Мы не бросаем джунов и не заставляем их разбираться во всем самостоятельно. Продолжаем развитиеКатя Журавлева, арт-директорНесколько советов тем, кто хочет продолжать свое профессиональное развитие:
Как стать веб-дизайнером – пошаговое руководство
В статье план развития в веб-дизайне. Рассмотрела вопросы: с чего начать, что знать и уметь, к чему стремиться, как оформить портфолио, а также затронула зажигательные моменты профессии веб-дизайнер 👇🏻
Продуктовый дизайнер (UX/UI), веб-дизайнер и бренд-дизайнер. Опыт проектов в международных компаниях Omega-R (агентство), iSpring Solutions (продуктовая) и со стартапами по всему миру. Преподаватель курсов «UI-дизайн и анимация интерфейсов» и «Веб-дизайн» в Институте программных систем и godesign.school.
Сен 30, 2020 · 23 мин читать
Современный веб-дизайн – это сплав бренд-дизайна (графики с учетом характера, ценностей, пристрастий и порывов бренда), сторителлинга (жизненных историй и презентаций) и дизайна интерфейсов (навигации, элементов управления, созданных на основе данных). Как это все вместе работает? В этой статье мы достаточно глубоко занырнем и изучим в деталях как стать веб-дизайнером.
Содержание:
Фокус этой статьи: траектория, в которой больше практики и интенсивный рост навыков в веб-дизайне за кратчайший период. Старалась сделать так, чтобы статья стала для вас прямым путем в профессию веб-дизайнер. Чтобы вы получили опыт смелых и известных веб-студий, диджитал-агенств и экспертов международного уровня за приемлемый бюджет, да еще и сэкономили время. Давайте посмотрим, что у меня вышло 👇
Сила и ценность веб-дизайна для бизнеса
В чем ценность веб-дизайна для бизнеса
Веб-дизайн работает на продвижение товаров в интернете и популяризацию бренда. Как упаковка. Чем меньше команда, в которой вы работаете, тем большим количеством навыков нужно владеть, чтобы помочь решить задачу распространения упаковки и культуры потребления бренда в интернете.
Веб-дизайн от Focus Lab для калифорнийского кафе Gordo Taqueria
С помощью веб-дизайна можно добиться увеличения количества целевых действий на сайте, узнаваемости бренда, а значит и продаж.
Чем полезен веб-дизайнер
Веб-дизайнер — работает на пересечения творчества и коммерции. Он архитектор комфортных, функциональных, выразительных и коммерчески эффективных веб-пространств: сайтов, блогов, интернет-магазинов, социальных сетей. Если бренд как страна в диджитал, то именно веб-дизайнер помогает сделать так, что в ней было приятно находиться, ориентироваться, путешествовать и интересно возвращаться.
Выращивание сайта: вайрфреймы, стилизация и UiKit
Веб-дизайнер помогает клиенту передать идею визуальными средствами, да так, чтобы это еще и вызвало доверие и отклик у покупателей, а еще увеличило продажи.
К дизайнеру обращаются за опытом, вкусом и пониманием того, как сделать «хорошо» для бизнеса и клиентов заказчика.
by Bill S Kenney for Focus Lab in Assembly: информационная архитектура и вайрфреймы
Что такое хороший веб-дизайн
Хороший веб-дизайн эмоциональный и отвызчивый: на телефонах, планшетах, широкоформатных мониторах – во всех точках контакта. Хороший веб-дизайн вызывает у посетителей положительные эмоции. Удовольствие, радость, удивление, предвкушение в сочетании с яркой индивидуальностью. А еще он коммерчески эффективный, полезный и удобный в работе.
Работы для веб-дизайнеров все еще очень много. Повсюду вокруг нас типовые и однообразные интернет-магазины, информационные порталы, сервисы и т.п. Однообразие — не лучший инструмент для привлечения клиентов. Альтернатива ему выразительность, но попытки веб-разработчиков выделиться приводят к откровенно провальным результатам и вызывают у пользователей лишь раздражение. Чтобы делать лучше, требуется особая культура работы, чувственный опыт потребления товара и понимание культурного контекста клиента, с которым требуется установить контакт.
В современном веб-дизайне подчеркивают четыре ключевых компонента:
Чек-лист качеств хорошего веб-дизайна:
Кто такой веб-дизайнер и чем на самом деле он занимается
Какие задачи решает веб-дизайнер и чем зажигает эта профессия
Веб-дизайнер создает лендинги, корпоративные сайты и промо-подачу. Он боец в команде диджитал-маркетинга. Есть еще UX/UI-дизайнеры – это ребята из продуктовой команды и больше работают над веб- и мобильными приложениями, приложениями для смарт-часов, TV и автомобилей.
Веб-дизайнер помогает организовать и подать информацию так, чтобы пользователи получили желаемое — например, нашли и купили товар, черпанули свежих статей для работы или приятно провели время за просмотром новостей. А так как сайт веб-проект – это упаковка бренда, идеально, если веб-дизайнер разбирается в графическом дизайне, чтобы смелее работать на эмоциональном слое и создавать атмосферу с помощью уникальной графики.
Каждый сайт – система. На него ежедневно залетают потоки пользователей из поисковых машин, соцсетей, рекламы. Веб-дизайнер вместе с командой диджитал-маркетинга также ежедневно повышает коммерческую эффективность этой системы.
Основные этапы работы над веб-проектом
Дизайн – итеративный процесс. Кратко его можно описать по формуле: исследуй, делай, проверяй. Предмет исследования определяется стратегией:
Особенности работы в компании, агентстве и на фрилансе
Веб-дизайнер решает задачи на трех фронтах: фриланс, агентство и компания. В каждой точке требуется свой подход. Сейчас расскажу.
Фриланс. В мире огромное количество компаний. От вас их отделяет только сила вашего портфолио, настойчивость, смелость и желание показать результат раньше, чем получить оплату (особенно если вы новичок и только собираете сильное портфолио). На фрилансе вы сами выбираете проекты, но и искать проекты и продвигать себя вы тоже будете сами.
Агенство. Хороший способ получить опыт работы под руководством опытного наставника во множестве стилей, на множество проектов. Здесь обилие разноплановых проектов с высокими требованиями к креативности (если работать на международный рынок).
Компания. Здесь больше возможностей по глубине аналитической проработки дизайн-решения. Плюс, если в компании развита аналитическая культура и регулярно проводятся A/B-тесты, то ваше решение может быстрее оказаться на живом и начать работать.
Какой бы вариант работ вы не выбрали, главное – не попасть в ловушку нулевого портфолио – это когда все ваши труды вы не можете использовать для повышения своей известности, к примеру, залить на dribbble, behance, на свой сайт. Т.е работать на перспективу увеличения вашего благосостояния и финансовой устойчивости и мобильности.
С кем в команде работает веб-дизайнер
Сайт помогает привлекать клиентов из интернета 24/7, рассказывая о пользе товаров/продуктов/услуг. Коммерческие сайты разрабатывают в команде.
Focus Lab | We Build Brands That Lead And Inspire
Минимальный состав команды:
Обязанности веб-дизайнера
Обычно работа веб-дизайнера начинается с брифа заказчика, ведь узнав «на берегу» все его пожелания и хотелки, не придется мучительно долго переделывать готовый макет. А еще это помогает выстроить понимание задачи — чтобы и заказчик, и дизайнер твёрдо знали, к какому результату придут.
Какими знаниями, личными качествами и навыками обладает веб-дизайнер
Какие инструменты веб-дизайнер использует в работе
В запуске сайта с нуля есть минимум три digital-стратегии:
Идеальный заказчик тот, кто уже решил вопросы связанные с интернет-маркетингом и диджитал-стратегией. Т.е заказчик изучил рынок и решил насчет того, каких клиентов и с какими потребностями и из каких каналов (SMM, PPC, SEO) он будет привлекать на старте. И ему требуется помощь в создании эффективной и полезной интерактивной витрины и поток клиентов будет приходить из поисковиков Yandex/Google.
Основные инструменты работы над веб-проектом по готовой диджитал-стратегии (то, что любят веб-дизайнеры):
Напомню, что дизайн создает не программа, а вы. Если вы владеете дизайном, то сможете сделать работу качественно в любой программе. Полный обзор инструментов веб-дизайнера вот здесь в статье.
Какие инструменты помогут проверить диджитал-стратегию заказчика и скорректировать курс:
Если заказчику нужен просто лендинг и клиентов будут привлекать из соцсетей, то все эти инструменты не нужны. В этом случае клиент, частенько, уже подыскал опытного таргетолога и нужно запросить заполненный бриф на целевую аудиторию.
А вот клиентов, которые стартуют сайт с нуля, лучше проверить хотя бы по базовым параметрам SEO. Все инструменты из разряда: просто закинь ссылку или задай вектор куда копать.
Какими концепциями должен владеть веб-дизайнер
6 способов стать веб-дизайнером: онлайн, бесплатные и платные
Смотреть ролики на YouTube, брать уроки Photoshop на мастер-классах или все же поступить на специальность в вуз? Узнаем, как стать веб-дизайнером, когда все вокруг стремительно развивается.
Способ 1. Онлайн-университет
Поступить в онлайн-университет по профилю «веб-дизайн» или «графический дизайн» и два года получать классическое онлайн-образование. Кроме специальных предметов, бренд-дизайна, дизайна интерфейсов, веб-дизайна, анимации, аналитики не будет ничего лишнего. Может даже показаться, что это плюс, только есть нюанс.
Плюсы
Минусы
Способ 2. Самообразование
Самый сложный путь. Чтобы двигаться по нему, нужно сначала найти процесс работы веб-дизайнера (например подглядеть в разделе услуг и в блогах ТОП дизайн-агентств) и затем под каждый этап работ найти подборки книг и видео, а также промежуточные образцы продукции.
Плюсы
Минусы
Способ 3. Онлайн-курсы
Хороший вариант для старта. Если внимательно изучить преподавателей, их работы и подход. Пройти бесплатный кусочек и потом решить.
Плюсы
Минусы
Способ 4. Мастер-классы и практикумы онлайн
Такой подход хорош для обмена опытом. Этот как вместо того, чтобы изучать книгу с методологией, а потом экспериментировать на проекте, вы сразу получаете самое главное, прыгаете в проект и начинаете делать и корректировать с учетом обратной связи.
Плюсы
Минусы
Способ 5. Фриланс
На рынке очень много клиентов, которым просто нужно помочь. На кону часто не стоит чья-то жизнь или бизнес, просто требуется помочь с дизайном (проверить идею за дешево). Идеальной для работы и обучения.
Плюсы
Минусы
Способ 6. Сбалансированный подход: серия разноформатных курсов с выходом на тестовое задание/стажировку
Размяться в инструментах на боевых проектах. Далее наработать кругозор и смелость через серию краткосрочных курсов от известных дизайн-агентств и компаний. И упаковать портфолио. А затем начать оставлять заявки на тестовые задания прикладывая портфолио и логотипы агентств, где учились (покажет ваш серьезный настрой).
Плюсы
Минусы
Как я начинала в веб-дизайне
В веб-дизайн я пришла через веб-разработку. Иногда, верстая сайты, мне казалось, что дизайн пришел какой-то не такой, в общем я исправляла ошибки дизайнера и искала пути как сделать лучше, понятнее и удобней для пользователя (по крайней мере мне так казалось). В общем считаем, что глубина исследований у меня тогда была не запредельная, но мои версии сайтов вполне нравились клиентам, так как в них что-то да было поудобнее 🙂 Тогда я и поняла, что что хочу создавать действительно удобные полезные и интересные сайты. Ну, чтобы сочненько было в общем.
Однажды я наткнулась на видео Юзабилити лаб с Дмитрием Сатиным и заинтересовалась темой юзабилити исследований. Мне нравилось, как разбирают кейсы и находят точки по улучшению сайтов. Тут я и поняла, что в этом деле есть все-таки система, а значит это можно вполне себе изучить за какой-то конкретный срок. Но все-таки в то время все равно не могла понять почему сайт Apple в 2009 году был крайне странным.
Так совпало, что в тот момент, когда меня зажгла тема веб-дизайна, в городе как раз открылись курсы по Веб-дизайну, и я быстрее туда и побежала. Так и завертелось.
Очный курс веб-дизайна помог мне собрать свое первое портфолио. Хоть это и был всего 1 сайт, зато сделан он был системно и по всем канонам, да с творческой жилкой. В общем, я захватила с собой все этапы, как делала его по шагам и презентовалась на собеседовании. Ну и дальше завертелось.
С чего лучше начать изучение в Веб-дизайне – первые 10 шагов в Веб-дизайне
Шаг 1. Погрузитесь в международную культуру веб-дизайна с помощью курса Рафаля Томаля
У Рафаля хороший бодренький и бесплатный курс по веб-дизайну. В нем особенности профессии, обзор актуальных навыков, современная культура веб-дизайна и подборки инструментов от дизайнера с международным опытом:
Шаг 2. Начните посещать ежедневно самые популярные веб-ресурсы
Регулярно посещайте сайты и соцсети известных брендов в РФ и глобалии: блоги, интернет-магазины, лендинги, сайты продуктовых компаний.
Изучайте как полезное действие сайтов, так и уникальную графику бренда в разных нишах: развлечения, финансы, покупки, образование, доставка, маркетплейсы и т.д. Пройдите регистрацию или сценарий покупки по наполнению корзины. Обращайте внимание, насколько легко находить нужную информацию или какие блоки доверия помогают покупателям сделать выбор в пользу этого продукта. Не старайтесь сразу закрывать все всплывающие окна, обращайте внимание на баннеры и стройте гипотезы об их целях, чем они помогают.
Вот несколько сайтов для разбора: mailchimp, intercom, ozon, stripe, airbnb, apple, тинькофф журнал, inmyroom.
Шаг 3. Повышайте насмотренность
Собирайте дизайны на доски в Pinterest. Так вы сможете повысить насмотренность. А еще попробуйте делать чуть больше. Возьмите сайт, который вам нравится, схватите руками и помните его, порежьте на части, попереставляйте блоки, предложите альтернативный вариант композиции из обрывков. Затем возьмите лист A4 и перерисуйте оригинальный сайт и сделайте разбор плюсов и минусов.
Развивайте привычку каждый день лазить на land-book.com нырять в 5 разных сайтов, восстанавливать по ним скетчи. Дополняйте скетчи цветовыми пятнами, как в оригинальном дизайне. Это задание можно выполнять в своем скетчбуке или на планшете. Всего 5-7 минут в день и через месяц вы уже набьете руку более чем на 100 сайтах и станете смелее в композициях.
Как станете смелее в скетчах, возьмите сайт с уникальным дизайном и повторите его во всех деталях в Figma. Старайтесь добиться полного сходства, обращайте внимание на стили и пропорции элементов, как строится работа со свободным пространством. Восстановите сетку и доску стиля, проработайте состояния для элементов (наведенные и активные состояния для кнопок и полей ввода). Проработайте навигацию, типографику, работу с цветом и палитру.
Шаг 4. Возьмитесь за первый проект по веб-дизайну и сделайте его вместе с наставником
Подыщите курс с легким стартом и ассортиментом интересных и жизненных проектов. К примеру курсы UX/UI на Breezzly. Задизайните промошапку, затем попробуйте себя в интерактивном дизайне эффектной промошапки магазина скейтов и соберите эффектную карусель транзишн-переходом, а затем уже погружайтесь дальше через очные курсы с командной работой (поможет сильнее прочувствовать весь дух профессии).
Шаг 5. Изучите процессы и портфолио ТОП-диджитал агентств
Следите за работами диджитал-агентств, многие из них делятся своими кейсами и процессом работы. Вот некоторые из них: Focus lab, Ueno.
Старайтесь пройтись по всем этапам при работе над проектом от погружения в задачу и исследования до интерактивных страниц в конструкторе. Не забывайте щупать свои сайты в живом контексте с планшета на диване или с телефона в метро.
Пример дизайн-кейса Braze
Шаг 6. Изучите ТОП-3 книги по веб-дизайну (международный ТОП)
Сейчас я рекомендую всем следующую подборку книг для старта:
Эти книги хороши живой подачей, обилием иллюстраций, алгоритмами, схемами, кейсами и проверенными боем на международном рынке советами. В этих простых книгах серьезный международный опыт, поэтому возьмите на заметку.
Шаг 7. Выпишите TOP-10 навыков дизайнера и поразмышляйте о графике тренировок
Не пытайтесь взяться сразу за все, определите с чего хотите начать и что в первую очередь пригодится в ваших проектах, распланируйте изучение материалов и тренировок и наращивайте постепенно навыки.
Например, начните прокачивать навык ведения проектов и распланируйте свою работу. Разбейте работу на этапы, распишите задачи в этапах и распределите задачи по дням. В ход могут идти и канбан-доски на холодильнике дома, и мобильные приложения с напоминаниями, и доска трелло. Этот же навык пригодится для планирования прокачки новых навыков.
Шаг 8. Вступите в самые популярные сообщества по дизайну и задайте самый волнующий вопрос
Есть три самых насыщенных информацией сообщества в рунете на тему веб-дизайна. И задайте самый волнующий вопрос. Вступайте же:
Шаг 9. Пройдите практику на настоящем сайте под руководством наставника
Первые 8 шагов – это предподготовка. А вот эти три проекта могут стать хорошим планом ближайших серьезных высот. Каждый пункт – это серьезный профессиональный рост.
Важно: в проектах используйте только живой контент, забудьте о “Lorem Ipsum” и генераторах бессмысленного контента. Не знаете где взять тексты, посмотрите на сайтах конкурентов или сайтах смежных тематик, тексты всегда можно позднее заменить или доработать вместе с заказчиком.
Шаг 10. Опубликуйте портфолио
Упакуйте свои наработки в портфолио и доработайте подачу по обратной связи от практиков в сообществе или руководителей в компаниях, где хотите работать (можно через мессенджеры, а лучше личные встречи). Такой шаг поможет вам почувствовать себя увереннее и пойти к новым высотам (Минутка мотивации!).
Вы можете собрать подробное портфолио в Readymag, Tilda или Webflow:
Или поделиться примерами работ, кусочками процесса прямо в dribbble: https://dribbble.com/NewWingsAsya
Очень важно. В портфолио фокусируйтесь на презентации навыков, умений и подхода, а не только на клевом и интересном визуале. Следуйте принципу “один экран/слайд – одна мысль”.
Раскройте идею, концепцию и как вы к ним пришли, на каких жизненных эмоциях стоит идея, покажите процесс творческих поисков в виде мудбордов, скетче, коллажей. Добавьте щепотку эффектных анимаций и вы сами удивитесь как хорошо теперь все смотрится.
Изучайте портфолио топовых студий. Берите новые практики и качайте под них навыки, чтобы ваше портфолио тоже стремилось в точку, где лучшие. Так вы сможете расти очень быстро. Например, где-то сделайте акцент на эффектных анимациях, а где-то раскройте историю проработки концепции сайта от идеи до видеопрезентации. Избегайте однотипных подач и проектов в портфолио.
А еще Readymag, Tilda и Dribbble поддерживают установку счетчика веб-аналитики, так вы сможете видеть из каких стран/регионов и в каком количестве каждый день к вам заходят новые клиенты и чем они интересуются.
Что дальше изучать по веб-дизайну: качайтесь в бренд-дизайне, анимации и иллюстрации
Весь секрет обучения веб-дизайна в том, что нет одного университета, где вы найдете максимом творческой практики. За время работы веб-дизайнером я собрала следующий список ресурсов, которые теперь рекомендую всем для старта. Все они вместе взятые стоят 5% от стоимости любой годовой или двухгодовой программы по веб-дизайну.
Держите вызов: попробуйте изучить их все до старта в любом учебном заведении мира и удивитесь, что получили в разы больше. Только выполняйте практику на каждом из этих курсов.
Вывод и рекомендация
Если вас интересует творческая сторона веб-дизайна и быстрый системный ответ на вопрос «Как стать веб-дизайнером», то вы можете пройти сначала практику в проектах на курсах Breezzly, затем изучить копирайтинг и основы работы с клиентом у Ильяхова, основы типографики, бренд-дизайна и работы с клиентами в Controforma, а затем уже подбирать следующую серию курсов.