Как стать профессионалом в веб-дизайне?

Question

[Qudas Madas]

Здравствуйте всем!

Я с 13 лет увлекаюсь веб-разработкой, освоил более-менее HTML и CSS, благодаря бесплатным конструкторам. Во время обучения в колледже, у нас были занятия по дизайну, на которых мы изучали программы Photoshop, Illustrator, InDesign, после чего меня заинтересовал больше веб-дизайн, чем верстка сайтов. Последние 2 года я посвятил изучению этого направления дизайна: учился создавать лэндинги в Фотошопе и XD, смотрел туториалы на Ютубе, читал статьи, следил за трендами и вдохновлялся чужими работами на Behance, Dribbble, Pinterest. За эти 2 года даже выполнил несколько заказов от 3 до 25 тысяч рублей за проект. Конечно, ушло слишком много времени, а я толком не продвинулся в веб-дизайне. Наверное, потому что относился я к этому несерьезно, как к хобби. Но сейчас я настроен на то, чтобы заняться профессионально дизайном сайтов.

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

1. Какое ПО использовать для дизайна? Мне очень понравилась Figma. Работал с XD и Фотошопом, но XD еще оооочень неудобная программа, некоторые функции отсутствуют. Фотошоп - есть Фотошоп, он не предназначен для дизайна, но боюсь, что отвыкну от ФШ, а многие заказчики или работодатели требуют PSD. Как вы думаете, стоит ли упор делать на работу в Фигме? Ведь этот сервис - идеальный вариант для дизайна сайтов и интерфейса.
2. Если использовать Фигму, то как происходит передача проекта верстальщику или заказчику? Удобно ли будет верстальщику, который работает с бутстрапом, верстать сайт по фигмовскому формату? Какие есть нюансы?
3. В фотошопе при создании макета лэндинга я использую ширину 1400 пикс. и сетку бутстрапа, так как часто видел в туториалах от западных дизайнеров именно такое разрешение. Но вот в Фигме или XD всегда по-разному: кто-то использует 1280х800, кто-то 1440 / 1400 на 800, другие 1920 на 1080 + сетку 12 колоночную, а не 8-ми. Какое разрешение ставить лучше всего и как правильно настроить сетку?

Заранее большое спасибо вам за ваши ответы и за то, что уделили время чтению моих вопросов.

Comments

[tendkuh]

Помимо фигмы и PS или XD есть куча других инструментов которые часто используют для создания сайтов, например Avocode, Sketch, Readymag etc.

[cehka]

tendkuh, Avocode? Это не графический редактор

[Владимир]

tendkuh, В авокоде не порисуешь, туда как раз грузять макеты с фотошопа и скетча.

[Rustam Bainazarov]

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

[tendkuh]

Владимир, cehka, знаю, но для меня между дизайнером и версталой по старинке нет разницы) я ещё "тех" времён)) когда это всё было одно и тоже))) что сейчас называется web developer

Answer 1

[Михаил Проскурин]

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

Сейчас перед вами стоит вопрос - как стать лучше, а для этого, у меня есть короткая формула, которая более менее, поможет подтянуть скиллы:

1. Ютуб-контент - не лучший способ получать знания, с учетом того, что весь нынешний контент предназначен для старта, более сложные вопросы обычно там не обсуждают. Я рекомендую подписаться на нескольких крутых дизайнеров в Medium, Habr и Твитере. Читайте, что они говорят, какие методы они применяют, не ленитесь использовать новые методики в дизайне - тестируйте, пока не придете к тому, который будет вам удобен.

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

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

4. Книги по UX - обязательный этап любого проектировщика интерфейсов, список полезных книг я публиковал сюда: Какие книги посоветуете начинающему web-дизайнеру?

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

Что касается ваших вопросов:

1. Любое, я использую Figma два года, у меня не было проблем с клиентами, хотя долгое время я работал на фрилансе.

2. Кидаете ему макет на просмотр и все, Figma сделала удобный интерфейс для верстальщика, он разберется.

3. Если контентная область определена, какая разница, какое разрешение вы поставите? Рекомендую ставить 1920 - так верстальщику легче будет видеть полную картину.

Comments

[Kadzi]

Михаил Проскурин,

Я рекомендую подписаться на нескольких крутых дизайнеров в Medium, Habr и Твитере

если не трудно, можно ссылки на дизайнеров если есть?

[tendkuh]

Kadzi,

если не трудно, можно ссылки на дизайнеров если есть?

Плюсую, и мне тоже надо

[Михаил Проскурин]

https://uxdesign.cc/
https://ux.pub/
https://habr.com/ru/users/kamushken/posts/
https://habr.com/ru/users/jvetrau/posts/
https://playbook.uie.com/
https://playbook.uie.com/
https://medium.com/@GilBouhnick
https://sidigital.co/blog

Лишь часть - все что пришло в голову.

[Модератор]

VoronVewo, критика должна быть аргументированной.

[tendkuh]

Модератор,

критика должна быть аргументированной.

там видимо какието личные счёты

[VoronVewo]

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

[tendkuh]

VoronVewo, не обращайте ниначто внимания

Answer 2

[Олег Степанов]

1. Используй Figma, если нравится. Когда XD разовьётся достаточно, можно будет перейти на него без особых сложностей. Принципы работы те же. Рисовать макеты в Photoshop сейчас смысла нет. Разработчики с удовольствием переходят на фигму, если им показать как с ней работать, она гораздо удобнее фотошопа для всех, кто работает над проектом.
2. Разработчику кидаешь ссылку на проект и всё. Клиенту можно так же, можно экспортировать макеты в png.
3. Разрешение зависит от целевой аудитории. Сетка зависит от проекта, универсальной нет, зато есть много учебных материалов на данную тему.

Comments

[Qudas Madas]

Спасибо за ответ! Можете посоветовать учебные материалы? Желательно не только по сетке, а вообще, что будет полезно почитать начинающему дизайнеру UI и Веб

[Олег Степанов]

Dmitry Moritz,
про веб
Алан Купер об интерфейсе

про модульные сетки, и зачем они нужны
Йозеф Мюллер-Брокманн «Модульные системы в графическом дизайне»

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

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

Answer 3

[McBernar]

1.
>многие заказчики или работодатели требуют PSD
Они просто о другом не слышали. Покажите им Фигму и все. С другой стороны, ФШ не уйдет никуда, потому что фотки коллажить нужно постоянно, и ни Скетч ни Фигма с этим не справятся.

2. Верстальщику нужно отправить ссылку на проект.
Бутстрап не имеет никакого отношения к Фигме.

3. Я делаю 1280 или 1440 — смотря на каком мониторе работаю. Это неважно.
Не надо быть заложником сетки и уже тем более заложником сетки Бутстрапа. Делайте дизайн, а не пляшите под геометрию сетки.

Answer 4

[cehka]

Какая разница какая программа? Когда нужно нарисовать, использую XD, все нужные функции для веб-дизайна там есть. Лично мне Фигма не зашла.
Сейчас существуют программы, которые облегчают работу дизайнерам и верстальщикам - Zeplin/Avocode, в них можно кинуть и .psd и .xd и другие, и там верстальщики смогут сделать всё что нужно.
Почему ты опираешься только на Bootstrap? Хочешь прикол? Есть сайты построенные и без него. И сетки на этих сайтах не всегда есть.

Comments

[tendkuh]

Какая разница какая программа?

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

[cehka]

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

[tendkuh]

cehka, если вы не умеете в достаточной мере пользоваться фотошоп, то это вовсе не означает что это "пенсия" как вы выразились. Из фотошопа можно экспортирвоать артборды куда угодно, чтобы продолжить над ними работать. Никто не иной, как фотошоп заточен под рисование что говорится от руки.
Хороший дизайнер, дизайнит руками, а не алгоритмами.

на Bootstrap?

Бутстрап решает целую кучу дефолтных ишьюз на разных браузерах

[cehka]

tendkuh, Умею в достаточной мере пользоваться фотошопом. Слишком много функций в нём. Тот же XD предлагает ВСЁ что нужно для современного веб-дизайна.
"Выходят подозрительно отнотипные" -> "Защищает bootstrap"
Какие алгоритмы дизайнят? Что за тупость ты пишешь я не понимаю.
Ты представь! Уже давно есть Flexbox на котором и написан бутстрап, и на нём можно делать всё что хочешь, а не ограничиваться бутстрапом.

[tendkuh]

cehka,
не тыкайте, бутстрап решает СSS/HTML ишьюз, помимо предоставления сетки для разработки адаптивного дизайна.
На сетке бутстрап далеко не ограничивается своим функционалом, или китах элементов

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

Если вы думаете что Bootstrap это только сетка, и киты, то вы не знаете Bootstrap. В виду низкой квалификации, и отсутствующей компетенции. И этот факт, не даёт вам никакого права переходить на экспрессивную лексику

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

[tendkuh]

cehka, картинка в тему:


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

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

[Qudas Madas]

tendkuh, почему это однотипные? Фигма и Скетч - лучшие программы для дизайна ui и web. Я могу взять любой макет с Бихайнса и повторить его в Фигме.
А то, что сайты однотипные причина скорее в нынешнем тренде - минимализм, который так популярен в ui, web и промдизайне. Те же смартфоны или ноутбуки все на одно "лицо".

[tendkuh]

Dmitry Moritz, чаще если делали фотошопом выглядят вообще как чумовые, а те которые в фигме и скетче то такое

Answer 5

[Вячеслав Абрамов]

1. Много работать
2. Искать профи и работать с ними
3. еще раз много работать! Ну и еще больше смотреть ( :