Дизайн и 3D

Как изучить веб-дизайн с нуля

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

Обновлено
В этой статье

Какой ориентир по срокам#

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

Месяц 1: композиция и иерархия#

Каждый экран отвечает на вопрос «что здесь главное». Изучи базовые
принципы: близость (связанное стоит рядом), выравнивание, контраст,
повтор, свободное пространство. Упражнение недели: возьми три реальные
страницы, сделай их чёрно-белые скриншоты и обведи, куда падает взгляд
первым, вторым и третьим. Затем перерисуй одну страницу так, чтобы главным
стало другое.

Месяц 2: типографика и цвет#

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

Итог месяца — страница статьи, собранная только шрифтом и одним акцентным
цветом, без картинок, которая при этом читается легко.

Месяц 3: сетки, компоненты и адаптивность#

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

Месяц 4: UX и исследования#

Интерфейс проверяется людьми, а не вкусом. Изучи пользовательские
сценарии, карту пути и юзабилити-тестирование. Проведи тест своего
макета на пяти знакомых: дай задачу («найди доставку и оформи
заказ») и молча смотри, где человек запнулся. Запиши проблемы и
исправь макет. Этот цикл — задача, наблюдение, правка — и есть основа
профессии.

Месяцы 5–6: три кейса в портфолио#

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

Как понять, что этап пройден#

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

План по этапам

  1. Месяц 1 — композицияБлизость, выравнивание, контраст, повтор; разбор трёх реальных страниц и перерисовка одной.
  2. Месяц 2 — типографика и цветШкала размеров, одна-две гарнитуры, цвета по ролям и контраст; страница статьи без картинок.
  3. Месяц 3 — сетки и компонентыСетки для трёх ширин экрана, библиотека компонентов с состояниями.
  4. Месяц 4 — UXСценарии, юзабилити-тест на пяти людях, правка макета по наблюдениям.
  5. Месяцы 5–6 — портфолиоТри кейса разного типа с задачей, исследованием, черновиками и результатами.

Начать изучать эту тему у себя

План ляжет в твой репозиторий: отмечай этапы, веди конспект — история изменений покажет, как ты продвинулся.

Начать план

Источники

  • Nielsen Norman Group — статьиИсследования юзабилити и принципы проектирования интерфейсов, на английском
    бесплатно
  • Material Design 3Открытая дизайн-система: сетки, типографика, компоненты
    бесплатно
  • Apple Human Interface GuidelinesПринципы интерфейсов от Apple
    бесплатно

Было полезно?

Ещё темы

Дизайн и 3D Как изучить Blender с нуля Blender — бесплатная программа для трёхмерной графики, в которой есть моделирование, скульптинг, материалы, анимация и рендер. Новичков пугает интерфейс и обилие горячих клавиш, но за первые две-три недели он становится привычным. Эта статья — про саму программу: как в ней ориентироваться и в каком порядке проходить её разделы. Дизайн и 3D Как изучить Figma с нуля Figma — редактор интерфейсов, который работает в браузере и позволяет нескольким людям править один файл одновременно. Базовые функции осваиваются за пару недель, а уверенная работа с auto layout и компонентами — за месяц-полтора практики. Эта статья — про инструмент: какие функции учить и в каком порядке. Дизайн и 3D Как научиться 3D-моделированию с нуля 3D-моделированием называют очень разные занятия — от деталей для 3D-печати и чертежей до персонажей для игр и визуализации интерьеров. Прежде чем учить программу, стоит понять, какое направление тебе нужно: от этого зависят и инструмент, и порядок тем. Ниже — как выбрать путь и как пройти первые месяцы. Программирование и IT Как изучить Python с нуля Python хорош для первого знакомства с программированием: код читается почти как текст, а стандартная библиотека закрывает большинство бытовых задач. Этот план ведёт от установки интерпретатора до собственных скриптов, покрытых тестами, — примерно за четыре месяца при занятиях около часа в день. Программирование и IT Как изучить Linux с нуля Linux работает на большинстве серверов, в контейнерах и на множестве устройств, поэтому командная строка нужна разработчику, тестировщику, аналитику и системному администратору. Осваивать систему удобнее всего не чтением списков команд, а ежедневной работой в терминале и решением небольших практических задач. Ниже — последовательность тем на два-три месяца. Профессиональные навыки Как изучить 1С с нуля 1С — это не бухгалтерия, а программа, в которой бухгалтерию ведут. Освоить её самостоятельно можно за один-два месяца, если заранее понимать, что такое счёт и проводка, и учиться на учебной базе, а не на рабочей. Ниже порядок: от интерфейса и справочников до закрытия месяца и отчётов.

Ещё сценарии

Личная база знаний Личная база знаний — это не архив всего прочитанного, а набор твоих собственных записей, связанных между собой, к которым ты возвращаешься. Разберём, как её устроить, чтобы она работала, а не превратилась в свалку ссылок. СДО для сотрудников Классическая СДО — это курсы, назначения, отчёты и сертификаты. Skillok закрывает часть этих задач иначе — через репозиторий материалов, задачи-назначения и курсы с автопроверкой. Если тебе нужны отчёты по каждому сотруднику и совместимость со SCORM — честно скажем сразу, этого нет. Приложение для конспектов Хороший конспект нужно не только написать, но и перечитывать, дополнять и находить через год. Для этого подходят обычные markdown-файлы с формулами и схемами, разложенные по предметам и хранящие историю правок. Вот как вести конспекты у нас.