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

Photoshop, gimp, illustrator, figma, inkscape или paint - какая разница? Это нарисовано на графическом редакторе, каким удобно пользоваться, таким и рисуйте.

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

Где взять простые макеты для практики верстки?
Где взять макеты для верстки?
Где взять PSD макеты с исходным кодом?
Где взять макеты?
Где взять макеты psd, сверстав которые можно показать в портфолио?
Где взять макет для тренировки верстки на Bootstrap?
Где взять дизайны (,psd) для практики верстки?
Где взять простые psd макеты по bootstrap сетке?
Где взять качественные макеты в .psd для практики?
Где взять бесплатные адаптивные psd макеты?
Где взять проектов под портфолио верстальщика?
Где взять полноценные макеты интернет магазинов (не лендинги)?
Где брать многостраничные PSD?
Где можно взять psd макеты для Wordpress?

Растрировать SVG? Зачем? Ведь в векторе он будет качественней, и в верстке и на макете. И что значит "управлять как обычной картинкой"? Поместите SVG в группу и управляйте им.

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

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

Грубо говоря:
Блок 1
62px
Блок 2
-- Заголовок
24px
-- Описание
54 px
-- Кнопка

Все значения относительные и написаны ради примера.

А какую роль, на вашем сайте, играет профиль? В каком контексте он вставляется на ваш сайт? О чем вообще ваш сайт? Какую роль на этом сайте играет информация о пользователе?

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

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

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

Вот тут кстати можно посмотреть, как люди оформляют профили: https://www.behance.net/search?field=102&content=p...

1. Контентную область баннера - минимальное разрешение, при котором содержимое баннера будет понятно.
2. В баннере должны использоваться или векторные, или высокого качества изображения, чтобы произвести экспорт в 2x, и баннер качественно отображался на ретине.
3. Баннер изначально должен рисоваться в самом большом разрешении, и сетка должна учитывать контентную область. Некоторые элементы не будут видны на маленьких экранах, но важно, чтобы основной посыл всегда был доступен для просмотра.

Ну и в принципе, больше ничего учитывать не нужно.

Invision Studio - мощный, но достаточно сырой инструмент, только-только вышел по Windows.

Adobe XD- слабая анимация, работают только переходы, но может выполнить большинство задач, связанных с переходами на мобилках, есть под windows.

Principle - Самая мощная и доработанная из всех перечисленных, плюс есть интеграция с Figma и Sketch - что является большим плюсом. Минус - нет под windows, только macOS

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

Haiku - пока сложно про него что-то говорить, но в нем есть интеграция с Figma и Sketch, пока только MacOS , но разрабатывается под windows.

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



Верстальщик тоже будет верстать на основе этой линии.

Почитать о базовых линиях и вертикальных ритмах можно тут: https://habr.com/ru/company/edison/blog/340670/

1. Создавать документ 300dpi и в цветовом профиле CMYK
2. Сохранять (особенно для демонстрации) все в том же CMYK - так как этот результат будет максимально похож на тот, что будет при печати.
3. Не в коем случае не работать с RGB с самого начала, потому что ожидаемый результат будет совсем другой.

В этой всей схеме вообще не должен участвовать RBG, как просматриваете проект - так и передаете, все в цвете CMYK.

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

Хотите крутого дизайнера - зайдите на Behance or Dribble, посмотрите кто делает реально крутые приложения и напишите ему, сделайте ему заказ на 1000$, он вам сделает ооочень крутое приложение, и вы не вкините деньги на ветер.

И да... крутые ребята из Behance и Dribble не участвуют в конкурсах, у них работы и без этого хватает, скорее всего в конкурсе будут участвовать те, у кого нет работы и они хотят себя проявить - то есть новички.

Разница есть и она очевидна, развею несколько ваших мифов:
1. Нет единого каталога всех проектов, их нельзя найти в гугле или получить каким-либо другим путём.
2. Вы не можете найти какого-либо пользователя и посмотреть его проекты.\

Но вот какие минусы есть у бесплатного плана:
1. Вы не можете поставить пароль на проект, и вашу ссылку могут передавать из рук в руки.
2. Если вы передали ссылку на "прототип", заказчик получает ссылку и на исходник.
3. Вы не можете контролировать количество пользователей, которые могут просматривать ваш проект, имея ссылку - на него могут зайти все, и все могут получить ссылку на исходник, и потом скопировать ее к себе.

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

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

В дизайне есть определенные вещи, делая которые, вы сможете расти в уровне постоянно:

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

2. Behance.net - ваш самый первый сайт, который вы посещаете при открытие компьютера. Я бы рекомендовал 40 минут в день выделять на то, чтобы просматривать топовые и не топовые работы, чтобы сравнивать их, давать им устную критику, пытаться вдуматься в логику (почему так сделано так, а не иначе) - это все, сформулирует в вас культуру веб-дизайна, вы поймете как делать красиво, и со временем будете делать все лучше и лучше. Плюс, смотря на другие работы, у вас в голове отложатся шаблоны разного вида функционала, и вы сможете решать одну задачу несколькими путями.

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

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

Ну и если нужны советы - можете писать мне, мои контакты указаны в профиле.

Четких правил на счет цветов нет и никогда не было, но есть некоторые теории, относительно восприятия цвета. Чтобы понять, как правильно построить цвета, я бы рекомендовал ознакомится с теорией о том, как человек реагирует на цвет, тут можно почитать отличные статьи:
https://habr.com/ru/post/202966/
https://habr.com/ru/post/209738/
https://habr.com/ru/company/SECL_GROUP/blog/316938/

Теперь когда вы знаете, как люди воспринимают цвета, нужно почитать о том, как их использовать в графике, для этого есть крутые книги:
Иоханнес Иттен. “Искусство цвета”
Брайд Виллен «Гармония цвета»

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

Писал про это подробно тут: В каком разрешении нужно делать макет сайта?

Веб-дизайнер должен знать:

• Свой стак инструментов, обычно это: Adobe Photoshop, Adobe Illustrator, Sketch или Figma, или Adobe XD, invision или principle (для анимации интерфейсов)/
• Уметь проводить юзабилити тестирование.
• Уметь работать с графикой (хотя бы как-то)
• Уметь проводить интервью с пользователями, получать фидбэк.
• Уметь работать с дизайн системами, понимать что такое UI-kit, паттерны, уметь ими пользоваться.
• Иметь тонкие навыки типографики, понимать что такое акценты, как сделать текст читабельным и т.д. и т.п.
• Уметь собирать интерактивные прототипы (figma, invision, adobe XD)
• Иметь чувство прекрасного
• Уметь обрабатывать изображения

Это минимум, а дальше по мере надобности и возможностей. Еще сейчас часто требуется UX/UI дизайнер, который умеет рисовать и сайты, и мобильные приложения.

Так что это вам не просто "рисовать сайты" - это уже давно никому не нужно...

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

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