приготовьтесь ловить вдохновение с первых уроков и их оформления
Таплинк
на максималках
модуль 3. УНИКАЛЬНО ДИЗАЙНИ
3. Теория цвета
Учимся находить глубину и не работать с колхозными цветами
2. ШРИФТ И ТИПОГРАФИКА В ПРОЕКТЕ
80% проекта вытягивает шрифт
1. 4 кита дизайна - принципы оформления
Все о базе, на которой строится качественный дизайн
4. КОМПОЗИЦИЯ ПРОЕКТА
Как правильно располагать элементы, чтобы был воздух
5. урок по фигма (1)
Посмотрите, прежде чем выполнять домашнюю работу
6. урок по фигма (2)
Гладиенты, стрелки, шум
Это будет большой модуль!
Уроки буду открывать постепенно, разделю страницу модуля на логические подмодули.
Уроки буду открывать постепенно, разделю страницу модуля на логические подмодули.
ПОДМОДУЛЬ Основы дизайна
ПОДМОДУЛЬ
Вдохновение и насмотренность
Вдохновение и насмотренность
1. СТИЛИ И ТРЕНДЫ
В ВЕБ-ДИЗАЙНЕ
В ВЕБ-ДИЗАЙНЕ
Ищем свой стиль
3. РАБОТА С РЕФЕРЕНСАМИ
Особенности и как уловить стиль
2. НАСМОТРЕННОСТЬ
Про то, с чего вы должны начинать и чем заканчивать свой день
1. Решения html - кодом
Модифицируем проекты кодом
ВАЖНО!
Обязательно к прочтению, так как таплинк выкатил новые обновления
Уроки в этом подмодуле записаны в ином формате - запись моего экрана и голос на фоне, поскольку мы будем разбирать каждый код.
ПОДМОДУЛЬ Html-код
2. Меню и система якорей
Грамотно настраиваем скролл по сайту
Инструкция по установке шрифтов:
- Скачали шрифт
- Перетащили файл со шрифтом в папку "Fonts"/ "Шрифты" на компьютере (в каждой операционной системе такая папка есть)
- Шрифты автоматически подгрузятся в Фигму
ПОЛЕЗНОЕ:
ПОЛЕЗНОЕ:
Сolormind - генерирует цветовую палитру
Noise - плагин, который добавляет шум
Noise - плагин, который добавляет шум
Image Palette - плагин, который собирает цветовую палитру на основе изображения
ПОДБОРКА КНИГ ПО ИТОГУ ПРОХОЖДЕНИЯ ПОДМОДУЛЯ:
- "Дизайн для НЕдизайнеров" Р. Уильямс
- "Пиши ,сокращай" М. Ильяхов, Л. Сарычева
- "Сожги свое портфолио" Д. Майкл
- "Кради как художник" О. Клеон
- "Искусство цвета" И. Иоханнес
- "Искусство формы" И. Йоханнес
ГОРЯЧИЕ КЛАВИШИ ФИГМЫ, КОТОРЫЕ МОГУТ ПРИГОДИТЬСЯ:
Shift + R - показать направляющие
Ctrl + C - копировать
Ctrl + V - вставить
Ctrl + Z - отменить последнее действие
Ctrl + G - создать группу
Ctrl + C - копировать
Ctrl + V - вставить
Ctrl + Z - отменить последнее действие
Ctrl + G - создать группу
Подборка для насмотренности:
(анализируем преимущественно мобильную версию)
ДЗ К ПОДМОДУЛЮ:
- Создайте иерархическую композицию текста в документе ворда или в фигме (как вам удобно). Я хочу увидеть явные заголовки, подзаголовки и текст описание. Материалы для работы здесь.
- Отфильтруйте текст, убрав воду и не несущие смысла слова. Такие тексты присылают реальные клиенты. Обратите внимание, что некоторое повторяется, исключите повторы и сильно не смейтесь:DD Тексты находятся здесь по ссылке. Все относится к одному эксперту.
- По этой ссылке вы найдете 4 задания внутри фигмы. Ответ жду также ссылкой на получившиеся дз. Будьте творческими и создавайте то, что хотите.
ОБЛАСТЬ ВДОХНОВЕНИЯ:
Я сформировала для вас область вдохновения. Я советую каждому создать отдельный файл в фигме и заливать туда понравившееся. За основу возьмите мой файл.
Здесь все стили и тренды подряд, около 200 картинок.
Здесь все стили и тренды подряд, около 200 картинок.
ДЗ К ПОДМОДУЛЮ:
- Отберите с любой площадки вдохновения подборки картинок/сайтов по 3ем стилям: минимализм, брутализм, журнальный стиль (по 8-10 материалов)
- Проанализируйте мои референсы по этой ссылке. Подберите 3 своих по такому же стилю и настроению, поделитесь со мной ссылкой на результат.
- Найдите на площадках вдохновения по 5 достойных примеров-референсов для ниш (помните, что на референсах не обязательно должен быть фотограф/стилист/цветы и тд, нам важно настроение проекта, каким вы его видите)
- Дизайн-интерьера
- Эксперт-фотограф
- Эксперт-стилист
- Флористика
- Керамика, лепка, глиняные изделия
Как вы думаете, какие ассоциации каждая из ниш может вызывать?
Какое настроение может быть у этих проектов?
4. Поделитесь 5ю своими любимыми аккаунтами (либо кого нашли после просмотра урока) в инсте, давайте вдохновим друг друга и поделимся красотой!
ПОЛЕЗНОЕ:
ПЛЮШКА ДЛЯ ТИЛЬДОШНИКОВ - ПАК МЕСТ, ГДЕ БРАТЬ КОДЫ:
https://mo-ti.ru (690р/год)
мой любимый сервис, поддержка всегда отвечает
быстро и решает все проблемы с кодом
https://tildoshnaya.com (бесплатные модификации)
еще у Тильдошной есть чат в Telegram
https://varfolomeev.su/code (три самый популярных кода)
также есть шаблоны крутой анимации https://varfolomeev.su/animation
https://app.nolim.cc (390р/мес)
Есть удобное расширение, в тильде сразу выбираете нужный код
https://melkishev-web.ru/codes
мой любимый сервис, поддержка всегда отвечает
быстро и решает все проблемы с кодом
https://tildoshnaya.com (бесплатные модификации)
еще у Тильдошной есть чат в Telegram
https://varfolomeev.su/code (три самый популярных кода)
также есть шаблоны крутой анимации https://varfolomeev.su/animation
https://app.nolim.cc (390р/мес)
Есть удобное расширение, в тильде сразу выбираете нужный код
https://melkishev-web.ru/codes
В ТАПЛИНК ПОЯВИЛАСЬ ВСТРОЕННАЯ СИСТЕМА ЯКОРЕЙ
1. В настройках каждого блока можно присвоить Имя блока (настройки находятся в верхней панели блока, сперва открываете блок, увидите вверху "настройки").
2. А в блоке Баннер выбрать Действие — Перейти к блоку. Там, где мы делаем баннер ссылкой (об этом в уроках по верстке далее).
Если блок находится на другой странице, то сначала произойдет переход на страницу, а затем прокрутка к блоку.
Я не стала удалять уроки по системе якорей, так как вы должны знать все способы, обновление может отвалиться в любой момент. Сейчас преимущественно пользуемся уже встроенной в таплинк системой якорей.
НО! В МЕНЮ ВСЕ ОСТАЕТСЯ НЕИЗМЕННЫМ, ДЕЛАЕМ ПО МОЕМУ УРОКУ.
2. А в блоке Баннер выбрать Действие — Перейти к блоку. Там, где мы делаем баннер ссылкой (об этом в уроках по верстке далее).
Если блок находится на другой странице, то сначала произойдет переход на страницу, а затем прокрутка к блоку.
Я не стала удалять уроки по системе якорей, так как вы должны знать все способы, обновление может отвалиться в любой момент. Сейчас преимущественно пользуемся уже встроенной в таплинк системой якорей.
НО! В МЕНЮ ВСЕ ОСТАЕТСЯ НЕИЗМЕННЫМ, ДЕЛАЕМ ПО МОЕМУ УРОКУ.