Blank page

КАРМА

СТАРТ

От идеи до готового сайта — без скучной теории и бесконечных лекций. Ты разработаешь концепцию собственного мерча, создашь графику, оформишь проект в Figma и запустишь промостраницу на Tilda.

Бесплатный практикум
по графическому
и веб-дизайну

Бесплатный практикум
по графическому и веб-дизайну

Бесплатный практикум по графическому и веб-дизайну

Создай свой первый дизайн-проект

шага

за

4

начать бесплатно

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

создашь реальный проект

Не просто посмотришь уроки

найдёшь идею
разработаешь визуальную концепцию
подготовишь презентацию проекта
превратишь её в работающий сайт.

Обучение проходит в телеграм или ВКонтакте

За время обучения ты пройдёшь путь, который дизайнеры ежедневно проходят при работе над реальными заказами:

Обучение проходит
в телеграм или ВКонтакте

«Карма Старт» — практический интенсив от дизайн-студии и школы KarmaWeb.

Специально для выпускников интенсива - честный мастер-класс о коммерческой стороне дизайна

На мастер-классе ты узнаешь:

Как продавать комплексный брендинг и сайт одним чеком
Где искать первых клиентов без бирж фриланса и демпинга
Пошаговую программу нашего большого профессионального курса Karma Junior

ЗАРЕГИСТРИРОВАТЬСЯ НА ИНТЕНСИВ

Сертификат лицензированной образовательной организации

готовый проект для портфолио

Проверка заданий дизайнерами студии

4 практических урока

Четыре шага

от идеи до готового сайта

Скрипт слайдера

id:

Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить

Для настройки слайдера перейдите в окно настроек, для этого выделите этот блок или блок с кодом или любой элемент слайдера, кнопка настроек появится на панели инструментов справа.

Создайте карточки для слайдера, для этого объедините содержимое карточек в группы типа Object.
Задайте каждой карточке класс slide
Объедините все карточки в одну группу типа Object и задайте ей свойство Autolayout и присвойте класс tf_slider
Настройте gap (расстояние между карточками) и ширину видимой части слайдера tf_slider. Сколько карточек попадет в эту ширину, столько и будет одновременно видимы.
За счет изменения ширины tf_slider вы можете настроить разное количество карточек на разных брейкпоинтах.
Задайте классы для кнопок слайдера: для кнопки «назад» tf_slider-prev, для кнопки «вперед» tf_slider-next
Для счетчика текущей страницы слайдера задайте класс у текстового поля tf_slider-current, для счетчика общего количества страниц задайте класс tf_slider-total
Добавьте точку (страницы), присвойте им класс dot. Вы можете использовать точку в виде объекта Tilda-кнопки, тогда активное состояние будет определять вид активной точки.
Объедините точки в общую группу, задайте ей свойство Autolayout, группе задайте класс tf_slider-dots
Все элементы навигации можно располагать в разных частях экрана, или удалить, если не нужны (оставить только стрелки)
Если в одном Зероблоке больше чем один слайдер, последующим слайдерам задавайте имя

Слайдер: tf_slider-1
Кнопки: tf_slider-prev-1, tf_slider-next-1
Точки: tf_slider-dots-1
Счетчики: tf_slider-current-1, tf_slider-total-1
Для второго/третьего слайдера: tf_slider-2, tf_slider-3 и т.д.

12. Используйте панель Tildify Elements для настройки свойств слайдера. Для этого выделите элементы слайдера или конфиг слайдера (блок Скрипт слайдера), панель управления появится справа на панели настроек Zero Block.

начать бесплатно

Учишься в своём темпе

но не остаёшься без поддержки

наш бот

1

СТАРТ И ПРОВЕРКА ПОДПИСКИ

Чтобы получить доступ к нашему курсу - подпишись на наши ресурсы. Мы проверяем это автоматически.

Ты получил доступ к уроку!
Все полезные материалы: чек-листы, идеи и конспект урока уже ждут тебя на странице под видео.

Доступ
к урокам

2

3

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

домашнее задание

4

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

обратная связь

загляни внутрь обучения

Скрипт слайдера

id:

Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить

Для настройки слайдера перейдите в окно настроек, для этого выделите этот блок или блок с кодом или любой элемент слайдера, кнопка настроек появится на панели инструментов справа.

Создайте карточки для слайдера, для этого объедините содержимое карточек в группы типа Object.
Задайте каждой карточке класс slide
Объедините все карточки в одну группу типа Object и задайте ей свойство Autolayout и присвойте класс tf_slider
Настройте gap (расстояние между карточками) и ширину видимой части слайдера tf_slider. Сколько карточек попадет в эту ширину, столько и будет одновременно видимы.
За счет изменения ширины tf_slider вы можете настроить разное количество карточек на разных брейкпоинтах.
Задайте классы для кнопок слайдера: для кнопки «назад» tf_slider-prev, для кнопки «вперед» tf_slider-next
Для счетчика текущей страницы слайдера задайте класс у текстового поля tf_slider-current, для счетчика общего количества страниц задайте класс tf_slider-total
Добавьте точку (страницы), присвойте им класс dot. Вы можете использовать точку в виде объекта Tilda-кнопки, тогда активное состояние будет определять вид активной точки.
Объедините точки в общую группу, задайте ей свойство Autolayout, группе задайте класс tf_slider-dots
Все элементы навигации можно располагать в разных частях экрана, или удалить, если не нужны (оставить только стрелки)
Если в одном Зероблоке больше чем один слайдер, последующим слайдерам задавайте имя

Слайдер: tf_slider-1
Кнопки: tf_slider-prev-1, tf_slider-next-1
Точки: tf_slider-dots-1
Счетчики: tf_slider-current-1, tf_slider-total-1
Для второго/третьего слайдера: tf_slider-2, tf_slider-3 и т.д.

12. Используйте панель Tildify Elements для настройки свойств слайдера. Для этого выделите элементы слайдера или конфиг слайдера (блок Скрипт слайдера), панель управления появится справа на панели настроек Zero Block.

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

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

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

Твоя библиотека полезных материалов

Больше, чем просто уроки

СОБРАТЬ СВОЮ БИБЛИОТЕКУ

Отзывы

наших учеников

Скрипт слайдера

id:

Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить

Для настройки слайдера перейдите в окно настроек, для этого выделите этот блок или блок с кодом или любой элемент слайдера, кнопка настроек появится на панели инструментов справа.

Создайте карточки для слайдера, для этого объедините содержимое карточек в группы типа Object.
Задайте каждой карточке класс slide
Объедините все карточки в одну группу типа Object и задайте ей свойство Autolayout и присвойте класс tf_slider
Настройте gap (расстояние между карточками) и ширину видимой части слайдера tf_slider. Сколько карточек попадет в эту ширину, столько и будет одновременно видимы.
За счет изменения ширины tf_slider вы можете настроить разное количество карточек на разных брейкпоинтах.
Задайте классы для кнопок слайдера: для кнопки «назад» tf_slider-prev, для кнопки «вперед» tf_slider-next
Для счетчика текущей страницы слайдера задайте класс у текстового поля tf_slider-current, для счетчика общего количества страниц задайте класс tf_slider-total
Добавьте точку (страницы), присвойте им класс dot. Вы можете использовать точку в виде объекта Tilda-кнопки, тогда активное состояние будет определять вид активной точки.
Объедините точки в общую группу, задайте ей свойство Autolayout, группе задайте класс tf_slider-dots
Все элементы навигации можно располагать в разных частях экрана, или удалить, если не нужны (оставить только стрелки)
Если в одном Зероблоке больше чем один слайдер, последующим слайдерам задавайте имя

Слайдер: tf_slider-1
Кнопки: tf_slider-prev-1, tf_slider-next-1
Точки: tf_slider-dots-1
Счетчики: tf_slider-current-1, tf_slider-total-1
Для второго/третьего слайдера: tf_slider-2, tf_slider-3 и т.д.

12. Используйте панель Tildify Elements для настройки свойств слайдера. Для этого выделите элементы слайдера или конфиг слайдера (блок Скрипт слайдера), панель управления появится справа на панели настроек Zero Block.

Кому будет особенно полезен

Карма.старт

Для начинающих дизайнеров

Соберёшь комплексную работу, в которой объединены графический и веб-дизайн.

Для тех, кому
не хватает практики

Для тех, кому не хватает практики

Не просто изучишь инструменты, а применишь их в проекте с конкретным результатом.

Для новичков

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

Для тех, кто боится чистого листа

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

Минимум инструментов

максимум практики

На нём ты будешь создавать графику и собирать свой первый сайт.

обычный ноутбук

1

Большая часть работы проходит прямо в браузере — не нужно устанавливать сложные программы.

интернет и браузер

2

Не нужно уметь рисовать, знать Figma или разбираться в веб-дизайне. Практикум создан специально для новичков.

интерес
и желание

3

ЗАРЕГИСТРИРОВАТЬСЯ НА ИНТЕНСИВ

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

доступ к телеграм
или вконтакте

4

Figma — программа, в которой работают современные дизайнеры. Она открывается прямо в браузере, ничего скачивать не нужно.

бесплатный
аккаунт в figma

5

Именно здесь ты соберёшь свою первую промостраницу.
Бесплатного тарифа будет достаточно для выполнения всех заданий.

бесплатный
аккаунт на tilda

6

Твои работы проверяют

практикующие дизайнеры

САЙТ ДИЗАЙН-СТУДИИ

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

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

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

Подробнее о нашей студии — на сайте KarmaWeb.

Все домашние задания проверяются вручную командой дизайн-студии KarmaWeb.

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

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

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

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

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

Мы всегда на связи

напиши нам

Если во время обучения или до начала практикума появятся вопросы — напиши нам.

САЙТ ШКОЛЫ

МЫ ВКОНТАКТЕ

НАШ ТЕЛЕГРАМ

УЧИСЬ У ПРАКТИКОВ

Скрипт слайдера

id:

Инструкция будет автоматически скрыта при публикации. Либо можно оставить только один HTML-объект, а инструкцию удалить

Для настройки слайдера перейдите в окно настроек, для этого выделите этот блок или блок с кодом или любой элемент слайдера, кнопка настроек появится на панели инструментов справа.

Создайте карточки для слайдера, для этого объедините содержимое карточек в группы типа Object.
Задайте каждой карточке класс slide
Объедините все карточки в одну группу типа Object и задайте ей свойство Autolayout и присвойте класс tf_slider
Настройте gap (расстояние между карточками) и ширину видимой части слайдера tf_slider. Сколько карточек попадет в эту ширину, столько и будет одновременно видимы.
За счет изменения ширины tf_slider вы можете настроить разное количество карточек на разных брейкпоинтах.
Задайте классы для кнопок слайдера: для кнопки «назад» tf_slider-prev, для кнопки «вперед» tf_slider-next
Для счетчика текущей страницы слайдера задайте класс у текстового поля tf_slider-current, для счетчика общего количества страниц задайте класс tf_slider-total
Добавьте точку (страницы), присвойте им класс dot. Вы можете использовать точку в виде объекта Tilda-кнопки, тогда активное состояние будет определять вид активной точки.
Объедините точки в общую группу, задайте ей свойство Autolayout, группе задайте класс tf_slider-dots
Все элементы навигации можно располагать в разных частях экрана, или удалить, если не нужны (оставить только стрелки)
Если в одном Зероблоке больше чем один слайдер, последующим слайдерам задавайте имя

Слайдер: tf_slider-1
Кнопки: tf_slider-prev-1, tf_slider-next-1
Точки: tf_slider-dots-1
Счетчики: tf_slider-current-1, tf_slider-total-1
Для второго/третьего слайдера: tf_slider-2, tf_slider-3 и т.д.

12. Используйте панель Tildify Elements для настройки свойств слайдера. Для этого выделите элементы слайдера или конфиг слайдера (блок Скрипт слайдера), панель управления появится справа на панели настроек Zero Block.

Узнай, кто создал практикум

наши ученики

веб - и графический дизайнер, основатель KarmaWeb.

Практикум ведет Дарина

Дизайнер с опытом более 10 лет, спикер, куратор.
Среди клиентов студии: АльфаСтрахование, Минпромторг, Моя реклама, Яндекс, Академия ПСБ и другие.
Куратор более 500 студентов.
Веб-дизайн, работа с нейросетями, создание дизайн-систем, портфолио и карьерное развитие.

веб - и графический дизайнер, основатель KarmaWeb.

Практикум ведет Дарина

Дизайнер с опытом более 10 лет, спикер, куратор.
Среди клиентов студии: АльфаСтрахование, Минпромторг, Моя реклама, Яндекс, Академия ПСБ и другие.
Куратор более 500 студентов.
Веб-дизайн, работа с нейросетями, создание дизайн-систем, портфолио и карьерное развитие.