Rivalry2

HTML Diff

0 added 0 removed

Original 2026-01-01

Modified 2026-02-21

1 <a>#подборки</a>

2 <ul><li>17 янв 2023</li>

3 <li>0</li>

4 </ul>Собрали список скиллов, которые нужно освоить новичкам в профессии.

5 Пишет про дизайн в Skillbox. Рисует макеты и верстает страницы для клиентов.

6 Дизайнеру необходимо разбираться в типографике и вёрстке, теории цвета, понимать, чем отличается лендинг от интернет-магазина. Рассказываем, какие знания и навыки помогут начинающему дизайнеру стать первоклассными специалистом.

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

8 Чтобы сверстать страницу хорошо, можно пользоваться такими приёмами:

9 <ul><li>Группировать однородные элементы - ставить их ближе друг к другу, чтобы пользователю было легче воспринимать информацию.</li>

10 <li>Создавать контраст с помощью шрифтов, цветов, размеров. Так сайт не выглядит однообразным и монотонным. С помощью контраста выделяют главное, управляют вниманием и делают так, чтобы текст было интересно читать.</li>

11 <li>Строить сетку, чтобы выровнять элементы относительно друг друга, сделать страницу аккуратнее.</li>

12 </ul>Страницу, свёрстанную с помощью таких базовых приёмов, удобно и интересно читать, на ней видны логические связи между разными объектами, понятно, какую информацию изучать в первую очередь:

13 Изображение: Andrey Kamenetskiy /<a>Behance</a>Чтобы ваши макеты выглядели аккуратно, советуем научиться работать с сеткой. Она полезна, когда вам нужно всё выровнять, и при проектировании нескольких однотипных страниц, чтобы они выглядели единообразно:

14 Изображение: united by /<a>Behance</a>Помните, что сетка - это инструмент, который помогает сделать макет ровным и аккуратным. Она может диктовать правила вёрстки, только когда нужно добиться единообразия.

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

16 Дизайнер, который разбирается в типографике:

17 <ul><li>умеет правильно оформлять текст: ставит длинные тире, кавычки-ёлочки, а предлоги, союзы и короткие слова переносит на новую строку, чтобы они не висели в конце предыдущей;</li>

18 <li>подбирает хороший шрифт, который решает задачу - например, сделать чтение лёгким или поддержать настроение.</li>

19 </ul>Изображение: Toby Ng /<a>Behance</a>С помощью цвета дизайнер выделяет важные вещи, создаёт пользователям настроение и управляет их вниманием. Цвет оказывает большое воздействие на сознание, меняет отношение к предметам, заставляет людей реагировать на него и предпринимать определённые действия.

20 Для работы с цветом нужно знать, какие цвета сочетаются, какие - нет, что такое гармония.

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

22 Изображение: Skillbox MediaЦветовой круг - важный инструмент для работы с сочетаемостью цветов, который помогает грамотно смешивать цвета и показывает, как они связаны друг с другом.

23 Чтобы не ошибиться в выборе цветов, дизайнеры пользуются специальным палитрами.

24 <ul><li>Монохромная палитра основана на тонах и оттенках одного цвета. При работе с такой палитрой сложно ошибиться, макет всегда будет выглядеть хорошо.</li>

25 <li>Аналоговая содержит цвета, которые находятся рядом друг с другом на цветовом круге. Такие цвета используются там, где не нужно создавать контраст, например для фона страниц или баннеров.</li>

26 <li>Комплементарная состоит из цветов, которые на цветовом круге расположены друг напротив друга. Комплементарные цвета создают контраст и выделяют нужный элемент интерфейса.</li>

27 </ul>На протяжении долгого времени дизайнеры работали только в Adobe Photoshop - универсальном графическом редакторе. Со временем появились редакторы для веба: Sketch, Figma и Adobe XD, которые работают быстрее, чем Photoshop, у них простой интерфейс и нет лишних функций. Поэтому они хорошо справляются даже с большим количеством открытых макетов и их легко освоить.

28 Вот программы, которые пригодятся дизайнеру:

29 <ul><li>Sketch, Figma, Principle - для работы с графикой и создания макетов, создания прототипов и анимаций.</li>

30 <li><a>Adobe Illustrator</a> - для создания иконок и логотипов, а также для работы с любой векторной графикой.</li>

31 <li><a>Adobe Photoshop</a> - для редактирования растровых картинок.</li>

32 <li><a>Adobe After Effects</a> - для редактирования растровых картинок.</li>

33 </ul>Помните, что программы - это инструмент дизайнера. Не стремитесь в совершенстве овладеть всеми. Изучите основные возможности и выберите ту, что вам больше нравится. Мы рекомендуем начать с Figma.

34 <a>Самоучитель по Figma</a>

35 Самые полные и полезные инструкции, которые помогут вам освоить все функции графического редактора.

36 Можно сделать красивый дизайн сайта, подобрать иллюстрации, но заполнить его текстом lorem ipsum. Это значит, что дизайнер поработал над внешним видом сайта, но не думал над контентом в текстовых блоках. Скорее всего, такой сайт не будет выполнять своё полезное действие, потому что текст, который позже напишет редактор, будет оторван от дизайна.

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

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

39 Начинающим дизайнерам нужно знать:

40 <ul><li>какие типы сайтов существуют, чем отличается лендинг от интернет-магазина, как оформить блог или корпоративный портал;</li>

41 <li>как создают персонажей пользователя и сценарии поведения;</li>

42 <li>как расставлять акценты не для красоты, а для выделения важных блоков: кнопок, ссылок, цен, телефонов.</li>

43 </ul>Полезно будет понимать, как из нарисованного макета создают работающий сайт, какие есть технические ограничения. Изучить на базовом уровне основы HTML и CSS. Будет легче общаться с технологами и верстальщиками, ставить им задачу и понимать, какие идеи нельзя реализовать с помощью кода.

44 Простой способ узнать, как работает вёрстка, - познакомиться с кодом любого сайта с помощью веб-инспектора браузера.

45 Скриншот: Skillbox MediaДо этого мы говорили о навыках, которые непосредственно относятся к созданию новых проектов и их реализации. Но дизайнер работает не один и общается с заказчиками, с командой, с арт-директором, презентует свою работу.

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

47 * * *

48 Мы рассказали про основные направления и инструменты, которыми должен владеть дизайнер. Начните изучение с основ, постепенно углубляясь в интересные для вас области. И не забывайте применять полученные знания на практике - используйте новую информацию, отрабатывайте приёмы, учитесь анализировать чужие работы.

49 Больше полезных знаний для дизайнера

50 <a>Попробуйте бесплатно 4 топовые профессии в дизайнеПройдите бесплатный курс по дизайну. Добавьте 4 крутых кейса в портфолио и решите, в каком направлении развиваться дальше. Пройти курс→</a>