Кейс: Создание Личного Портфолио на Tilda
Основная информация:
Ссылка на сайт: xeyrors.com
Срок разработки: 15 дней
Инструменты: Figma, стандартные блоки Тильда, CSS
Срок разработки: 15 дней
Инструменты: Figma, стандартные блоки Тильда, CSS
Введение:
Каждый проект разработки сайта – уникальная историю. Для меня собственное портфолио было вызовом создать функциональный сайт, полностью используя стандартные блоки Тильда и немного CSS. Чтобы при этом сайт выглядел современно и лаконично.
Платформа Tilda предоставляет широкие возможности для создания эстетичного и функционального портфолио на базе Zero-блоков, но стандартные блоки не отличаются вариативностью. При этом, практически в каждом проекте на Tilda сложно уйти от функциональности "Потоков" или "Магазина".
Мне кажется, что использование стандартных блоков с их функциональной начинкой совместно с кодом для трансформации в нужный дизайн – это удобный формат для любого проекта.
Платформа Tilda предоставляет широкие возможности для создания эстетичного и функционального портфолио на базе Zero-блоков, но стандартные блоки не отличаются вариативностью. При этом, практически в каждом проекте на Tilda сложно уйти от функциональности "Потоков" или "Магазина".
Мне кажется, что использование стандартных блоков с их функциональной начинкой совместно с кодом для трансформации в нужный дизайн – это удобный формат для любого проекта.
I этап: дизайн в Figma:
Изначальный дизайн делался без цели вёрстки на стандартных блоках. Я сделал главную страницу вместе с адаптивами, а также страницу блога.
Файл можно посмотреть по ссылке.
Это вторая версия макета, без особого тюнинга. Первая не сохранилась.
При создании я вдохновлялся рефференсами сайтов с темными темами и лаконичным строением. Также на будущее планировал сделать боковое меню, но пока решил использовать универсальное. В остальном, практически всё перекочевало на свёрстанный сайт.
Также с помощью Dalle я сделал себе логотип, и вручную векторизировал его, убрав лишнее.
II этап: вёрстка в Tilda:
Сначала я подобрал подходящие структурно к дизайну стандартные блоки несколькими ревизиями, выбирая лучшие. Перенёс контент из макета и дописал то, чего в макете не доставало.
Далее была самая интересная часть истории – попытка приручить стандартные блоки в нужную сторону. Процесс занял несколько дней. То там, то тут выскакивали подводные камни. Но в целом сейчас я доволен результатом, хотя останавливаться на нём точно не буду, стараясь улучшить.
В самом редакторе главная страница выглядит так:
Далее была самая интересная часть истории – попытка приручить стандартные блоки в нужную сторону. Процесс занял несколько дней. То там, то тут выскакивали подводные камни. Но в целом сейчас я доволен результатом, хотя останавливаться на нём точно не буду, стараясь улучшить.
В самом редакторе главная страница выглядит так:
Результат:
В итоге получилось сделать портфолио, с удобным наполнением проектов через "Потоки", возможностью быстро менять контент, не переделывая по сто раз адаптив. И в целом проект получился близким к макету и изначальной задумке. И за исключением прелоудера, который реализован в Zero.
На дизайн ушло 4 дня, еще 11 на вёрстку и игры с CSS.
На дизайн ушло 4 дня, еще 11 на вёрстку и игры с CSS.
Спасибо за внимание!
Если у вас есть вопросы, пожелания или хотите вместе поработать, пишите в мой телеграм.