Портфолио Сергея Китина

Стилизованная надпись Дизайн и создание сайтов

Для роста бизнеса вам необходимы дизайн и стратегия
Позвольте мне вам помочь

Три причины начать работать со мной

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

-1-
UI - UX
Создам дизайн сайтов, приложений, презентаций, оформление соцсетей и брендинг.
-2-
TILDA
Создам продуманные и полноценные сайты на платформе Тильда, используя уникальные решения.
-3-
GLIDE, ADALO и BUBBLE
Создам приложение для мобильных устройств, целевой аудиторией для которого являются все владельцы смартфонов. Создам в ADALO Мобильное приложение для магазинов Apple Store и Google Play.

Успех проекта складывается из сильного UX и красивого UI

Имею опыт работы в различных сферах бизнеса, пойму Ваши потребности

Аргументирую свои предложения

Представляю на выбор несколько вариантов

Открыт новому

Слежу за трендами в дизайне и No-Code

Ответственно отношусь к дедлайнам, пунктуален.

Процесс работы. Этапы

Давайте обсудим Ваш проект!

Мои работы

Одностраничные сайты и
Landing Page

Интернет-магазины

Многостраничные сайты

Дизайн в Figma

Приложения для мобильных устройств в Glide

Интернет-магазины

Мобильные приложения на ADALO для магазинов Apple Store и Google Play

Кейс: интернет-магазин

Действующий сайт: https://tort-moscow.ru

Цель проекта:

О проекте:

Коммерческий проект

Увеличить число продаж через сайт

Требования:

Для кого:

Для заказчика-кулинара

Удобный и интуитивный интерфейс с конструкторами тортов "на свой вкус", позволяющими после выбора ингредиентов сориентироваться по цене торта и сделать заказ.

Сайт интернет магазина "Торты и тарты в Москве"

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

Создать простую форму заказа с калькулятором и с выбором торта по 3 параметрам.
Создать альтернативную понятную форму заказа торта с калькулятором и возможностью выбора вкуса и оформления заказа по 7 параметрам, (некоторые параметры представлены с большим разнообразием и предполагают выбор из 14-ти наименований возможных бисквитов или видов мусса).

Встроенный в форму заказа калькулятор предоставляет возможность покупателю сразу оценить стоимость заказа в зависимости от его выбора ингредиентов.

Цветовое решение

Типографика

C3EEE1

37D750

86963E

BEEBC2

E9DD77

A5A1A1

Circe Rounded

Rounded Mplus 1c

-заголовок

-текст

-заголовки H1 и H2

Вишневое муссовое пирожное

Вишневый компот

Вишневое муссовое пирожное

Кули Вишня

Шоколадный мусс

Вишневое муссовое пирожное

Вишневый компот

Шоколадная глазурь

Кули Вишня

Вишневый компот

350 р.

Шоколадный мусс

Кули Вишня

Шоколадная глазурь

Шоколадный мусс

Заказать

350 р.

Шоколадная глазурь

350 р.

Заказать

Муссовое пирожное Лемон-
Лемонграсс, вес 95 гр.

Миндально-лимонное сабле

Заказать

Взбитый лимонный ганаш

Лимонное кремю с лемонграссом

Шоколадная глазурь

Ванильная намелака

350 р.

Заказать

Малиновое муссовое пирожное

Шоколадный бисквит

Малиновый джем

Шоколадный мусс

Зеркальная глазурь

Хрустящий слой

350 р.

Заказать

Тарт Кокос Карамель

Хрустящий слой с миндальными лепестками

Карамелизированные миндальные лепестки

Кокосовое кремю

Кокосовая карамель

Взбитый кокосовый ганаш

Кокосовое сабле

400 р.

Заказать

Муссовое пирожное Мандарин

Мандариновый джем

Бисквит Джаконда с штраузелем

Мусс из молочного шоколада

350 р.

Заказать

Тарт Маковый

Мандариновое сабле с маком

Маковый франжипан

Лимонный ганаш

Лимонная меренга

400 р.

Заказать

Дизайн страниц сайта адаптирован к различным устройствам

Тарты и муссовые пирожные

Вид страницы каталога тартов на планшете

Для телефонов карточки товаров располагаются в столбик

Взбитый лимонный ганаш

Вид страницы каталога тартов на экране компьютера

Дизайн страниц сайта адаптирован к различным устройствам

Вид страницы каталога тартов на планшете

Для телефонов карточки товаров располагаются в столбик

Предлагаем Вам на выбор 14 вкусов.

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

Состав:
Ванильный бисквит с хрустящим слоем
Начинка: Компот Клубника с кусочками клубники и клубничная намелака
Клубнично-ванильный мусс
Ягодная глазурь

2. Торт Клубничный взрыв
(белый и клубничный шоколад)

Торт Карамельное яблоко

(карамелизированный шоколад)

Состав:
Карамельный бисквит с бобами Тонка и хрустящим карамельным слоем
Начинка: Яблочный компот с кусочками яблок и карамельный ганаш
Карамельный мусс
Карамельная глазурь

3. Торт Кофе-шоколад
(темный, белый и молочный шоколад)

Состав:
Шоколадный бисквит с орехом пекан
Начинка: Взбитый шоколадно-кофейный ганаш и кофейное кремю
Шоколадно-кофейный мусс
Шоколадная зеркальная глазурь

Состав:
Фундучный бисквит с йогуртовым хрустящим слоем
Начинка: Смородиновый джем и взбитый смородиновый ганаш
Йогуртовый мусс со смородиной
Ягодная глазурьелака
Клубнично-ванильный мусс
Ягодная глазурь

4. Торт Смородина Йогурт

5. Торт Пина-Колада
(белый шоколад,ром)

Состав:
Кокосовый бисквит с хрустящим слоем
Начинка: Ананасовый компот с

6. Торт Груша Боб Тонка
(темный шоколад, молочный шоколад)

Состав:
Морковный бисквит
Начинка: Грушевый компот с

Предлагаем Вам на выбор 14 вкусов.

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

Каталог тортов

Фильтр: Все торты

Свадебные торты

Торты скульптуры

Детские торты

Праздничные торты

Окно заказа. Заказчик может сделать индивидуальный выбор вкуса и декора в трех выпадающих окнах

Выбор декора для торта

Отдельный каталог для выбора элементов оформления торта

Окно корзины и подтверждения условий заказа

Велюр

Желтый

Нежный мусс с пюре манго

Конфи манго-маракуйя с кусочками манго + Креме
экзотик с пюре кокоса

Хрустящая песочная основа

Форма Айсберг

Создайте свой рецепт муссового торта в Конструкторе

Выбор формы и размеров торта

Выбор покрытия торта

Выбор дополнительного декора

Шаг

Фрезия

Выбор мусса

Выбор цвета

Шаг

Выбор бисквита

Шаг

Выбор начинки

Шаг

Конструктор торта по индивидуальному заказу

Здесь вы сможете создать свой неповторимый торт.

{"0":{"lid":"1666625044489","ls":"10","loff":"","li_type":"ri","li_name":"form","li_title":"Выбор формы и веса торта","li_req":"y","li_defselitem":"1","li_radcb":"rb","li_gallery":"[{\"img\":\"https://static.tildacdn.com/tild6331-6538-4737-a365-386662366265/Aisberg.jpg\",\"alt\":\"Торт форма Айсберг, вес 1,2 кг = 1.2\"},{\"img\":\"https://static.tildacdn.com/tild6331-3765-4461-b962-306664323064/Group_70_1.jpg\",\"alt\":\"Торт форма Волны, вес 1.1 кг = 1.1\"},{\"img\":\"https://static.tildacdn.com/tild6331-6464-4263-b332-633435393233/__3.jpg\",\"alt\":\"Торт Любовь, вес 0,59 кг = 0.59\"},{\"img\":\"https://static.tildacdn.com/tild6362-3162-4135-a231-383266616139/__3_1.jpg\",\"alt\":\"Торт Облака, вес 1.8 кг = 1.8\"},{\"img\":\"https://static.tildacdn.com/tild3964-3033-4335-b637-653563663938/__4.jpg\",\"alt\":\"Торт круглый, вес 0.65 кг, диаметр 14 см. =0.65\"},{\"img\":\"https://static.tildacdn.com/tild3362-6461-4634-b465-643134353163/__4.jpg\",\"alt\":\"Торт круглый, вес 1,1 кг., диаметр 18 см. = 1.1\"},{\"img\":\"https://static.tildacdn.com/tild6232-6237-4362-b833-613865333865/__4.jpg\",\"alt\":\"Торт круглый, вес 1,8 кг., диаметр 22 см. =1.8\"},{\"img\":\"https://static.tildacdn.com/tild3830-6332-4434-b361-326562616638/__4.jpg\",\"alt\":\"Торт круглый, вес 2,6 кг., диаметр 26 см. =2.6\"}]","li_imgratio":"1_1","li_nm":"form"},"1":{"lid":"1666626550906","ls":"20","loff":"","li_type":"ri","li_name":"cover","li_title":"Покрытие торта","li_defselitem":"1","li_radcb":"rb","li_gallery":"[{\"img\":\"https://static.tildacdn.com/tild3764-3337-4664-b166-386238333466/Aisberg.jpg\",\"alt\":\"Велюр\"},{\"img\":\"https://static.tildacdn.com/tild6366-6362-4764-b832-303635393039/__5.jpg\",\"alt\":\"Глазурь\"}]","li_imgratio":"1_1","li_nm":"cover"},"2":{"lid":"1666629405242","ls":"30","loff":"","li_type":"ri","li_name":"dekor","li_title":"Дополнительный декор","li_defselitem":"1","li_radcb":"cb","li_gallery":"[{\"img\":\"https://static.tildacdn.com/tild6464-3762-4431-b463-366136386333/_-5.png\",\"alt\":\"Сахарный цветок. Роза = 350\"},{\"img\":\"https://static.tildacdn.com/tild3034-6366-4862-b065-303565633333/_-3.jpg\",\"alt\":\"Сахарный цветок. Ландыш = 450\"},{\"img\":\"https://static.tildacdn.com/tild3334-6464-4133-b236-653463303364/_-4.jpg\",\"alt\":\"Сахарный цветок Ранункулюс = 500\"},{\"img\":\"https://static.tildacdn.com/tild3564-6664-4264-a337-316238326364/Cvetok5.jpg\",\"alt\":\"Сахарный цветок Фрезия= 600\"},{\"img\":\"https://static.tildacdn.com/tild6633-6433-4835-b534-653830386365/Cvetok.jpg\",\"alt\":\"Сахарный цветок Камелия= 500\"},{\"img\":\"https://static.tildacdn.com/tild6264-3638-4462-b634-313463333331/Bant2.jpg\",\"alt\":\"Шоколадный бант = 500\"},{\"img\":\"https://static.tildacdn.com/tild3566-3832-4132-b666-633365386237/Gnezdo12.jpg\",\"alt\":\"Декор шоколадное гнездо = 600\"},{\"img\":\"https://static.tildacdn.com/tild6164-3766-4230-b538-326262646433/cvetok33.jpg\",\"alt\":\"Шоколадный цветок Георгин = 500\"},{\"img\":\"https://static.tildacdn.com/tild6233-3937-4266-a363-346138316633/cvetok35.jpg\",\"alt\":\"Сахарный цветок Гортензия = 500\"}]","li_imgratio":"1_1","li_nm":"dekor"},"3":{"lid":"1666626837176","ls":"40","loff":"","li_type":"rd","li_name":"color","li_title":"Цвет торта","li_req":"y","li_variants":"Белый\nЖелтый\nКрасный\nСиний\nЧерный\nЗеленый","li_defselitem":"1","li_radcb":"rb","li_nm":"color"},"4":{"lid":"1666626704005","ls":"50","loff":"","li_type":"rd","li_name":"vkus","li_title":"Мусс","li_req":"y","li_variants":"Нежный мусс с пюре манго = 3500\nМусс кофейно-фундучный = 3500\nФисташковый мусс = 3500\nМусс на темном шоколаде = 3500\nКарамельный мусс = 3500\nЛимонно-черничный мусс = 3500\nМусс с молочным шоколадом = 3500\nМусс малиновый = 3500\nКарамельный мусс = 3500\nКлубнично-ванильный мусс = 3500\nШоколадно-кофейный мусс = 3500\nВзбитый лимонный ганаш = 3500\nШоколадный мусс = 3500\nКокосовый мусс = 3500\nСырно-сливочный мусс с бобами тонка = 3500\nМедово-йогуртовый мусс = 3500","li_defselitem":"1","li_radcb":"rb","li_nm":"vkus"},"5":{"lid":"1666628997984","ls":"60","loff":"","li_type":"rd","li_name":"nachinka","li_title":"Начинка","li_subtitle":"nachinka","li_req":"y","li_variants":"Конфи манго-маракуйя с кусочками манго + Креме экзотик с пюре кокоса\nАбрикосовая начинка + Крем-мусс с маскарпоне\nЯгодная начинка (малина,клубника)\nНачинка из бананов, компотированных в карамели\nАбрикосовая начинка + Сливочный слой\nЛимонное конфи с кусочками манго + Черничный крем\nКлубничная начинка + Креме манго-маракуй\nКонфи Клубника-малина + Лимонный крем\nЯблочный компот + Сливочная карамель\nКомпот Клубника + Клубничная намелака\nКофейное кремю + Взбитый шоколадно-кофейный ганаш\nЛимонное кремю с лемонграссом + Ванильная намелака\nВишневый компот + Кули Вишня\nАнанасовый компот + Ганаш Пина Колада\nГрушевый компот с бобами тонка + Грушевое кремю\nКомпот Черника-Чернослив ","li_defselitem":"1","li_radcb":"rb","li_nm":"nachinka"},"6":{"lid":"1666629164397","ls":"70","loff":"","li_type":"rd","li_name":"biscuit","li_title":"Бисквит","li_subtitle":"biscuit","li_req":"y","li_variants":"Хрустящая песочная основа\nОснова –восстановленное сабле с пралине фундука\nФисташковый бисквит\nБрауни с молочным шоколадом и орехом пекан\nКарамельный бисквит\nЛимонное сабле\nБисквит Дакуаз с темным шоколадом\nБисквит дакуаз шоколадный\nКарамельный бисквит с бобами Тонка с Хрустящим карамельным слоем\nВанильный бисквит с Хрустящим слоем ( сублимированная клубника, вафельная крошка, взрывная карамель и шоколад)\nШоколадный бисквит с орехом пекан\nМиндально-лимонное сабле\nКокосовый бисквит с Хрустящим слоем\nМорковный бисквит\nМедовый бисквит с грецким орехом","li_defselitem":"1","li_radcb":"rb","li_nm":"biscuit"},"7":{"lid":"1666633207513","ls":"80","loff":"","li_type":"nm","li_title":"Имя","li_ph":"Иван Петров","li_req":"y","li_nm":"Name"},"8":{"lid":"1666633246474","ls":"90","loff":"","li_type":"em","li_title":"Ваш Email","li_ph":"example@gmail.com","li_req":"y","li_nm":"Email"},"9":{"lid":"1668228022130","ls":"100","loff":"","li_type":"ph","li_name":"phon","li_title":"Ваш телефон","li_ph":"+79857777777","li_req":"y","li_nm":"phon"},"10":{"lid":"1668228383139","ls":"110","loff":"","li_type":"ta","li_ph":"Укажите к какой дате выполнить заказ","li_rows":"2","li_nm":"Textarea"},"11":{"lid":"1668228135546","ls":"120","loff":"","li_type":"tx","li_text":"Срок исполнения Вашего заказа не менее 3-х дней"},"12":{"lid":"1666630159640","ls":"130","loff":"","li_type":"fr","li_title":"Стоимость заказа","li_subtitle":"Сумма заказа","li_expr":"form*vkus+dekor","li_postfix":" руб","li_nm":"Стоимость заказа"}}

Вы выполнили
7 шагов и выбрали свой вкус и дизайн торта.
Вам осталось заполнить заказ и наши специалисты свяжутся с Вами.

Кейс: двухстраничный сайт с анимацией

Сайт с анимацией "Автомобили Тесла"

-Вращение объектов
-Движение объектов при скроле
-параллакс-эффект
Эффекты использовать
обоснованно по
сценарию

Эффекты анимации:

TildaSans

Типографика:

Georgia

Future of Driving

Tesla cars come standard with advanced hardware capable of providing Autopilot features, and full self-driving capabilities—through software updates designed to improve functionality over time.
Tesla's Autopilot AI team drives the future of autonomy of current and new generations of vehicles. Learn about the team and apply to help accelerate the world with full self-driving.

На первой страничке сайта используется нейтральный и не отвлекающий от эффектов дизайн.

Главная страница сайта

Страницы с движением автомобиля при скроле

Автомобиль движется по дороге и подъезжает к автостраде по которой проносятся автомобили

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

Страницы с информацией дополнены анимацией и параллакс эффектом

Вторая страница сайта отправляет нас в путешествие на марс. Анимация создает необходимую атмосферу

Экскурсия на Тесламобиле на Марс.
На кадрах 1 и 2 видно вращение планеты.
А на кадрах 3,4 и 5 используя параллакс-эффект достигается 3D эффект так как при скроле видна разноудаленность планет от автомобиля, серая планета “обгоняет” остальные.

Эффект движения при скроле и парралакс-эффект на примере сайта в видеоформате

She has been nominated for an Academy Award, two Grammy Awards, and the Mercury Prize

Кейс: сайт Тесла-шоу

Цель проекта: Создать сайт для продвижения услуг по проведению тематических шоу

Для кого: Для заказчика-организатора шоу

Требования: Удобный и интуитивный интерфейс с увлекательным повествованием о шоу и возможностью выбрать свой вариант представления его продолжительности, сориентироваться по цене и отправить заказ

Двухстраничный сайт "Тесла шоу"

Создать сайт и заложить элементы фирменного стиля.
Обеспечить адаптацию страниц к различным устройствам.
Использовать эффекты анимации.

Задача:

Типографика:

CirceRounded

Цветовые решения:

#efecea

#2bc24b

#2501d3

У сайта две связанных темы:
Первая - коммерческая, с возможностью ознакомиться с представленными программами и их техническими требованиями к площадке, заказать шоу или согласовать индивидуальную программу шоу для мероприятия.
Вторая - научно-познавательная, об электричестве и о великом и загадочном Николе Тесла

О проекте:

#09111e

Главная страница сайта

Электрические разряды-главный элемент шоу и оформления сайта

С детства вы видели молнии во время грозы

На Тесла шоу Вы сможете на несколько минут перенестись в самый эпицентр грозы и увидеть молнию буквально в нескольких сантиметрах от себя.

Молнии на экране

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

Анимация на сайте

Пример использования анимации для электрических разрядов

Нажав на кнопку Вы увидите другие примеры анимации сайта

Посмотри ещё

Пример адаптации на различных устройствах страницы с возможностью перейти к заказу

Экран 1280х844

Экран 834х1194

Экран 438х844

Страница с представлением одного из шоу

Шоу "PREMIUM"

Шоу с оригинальными художественным решениями, синтезом смысла и формы.

Шоу с двумя и более артистами "под ключ" и интерактив "Клетка Фарадея". Шоу для искушенной публики с участием нескольких артистов специально под тематику мероприятия.
В стоимость входит логистика оборудования и людей, дизайн и пошив специальных под программу костюмов, создание уникального музыкального контента и постановка.
Это шоу для тех, кто хочет удивить зрителей не только настоящими молниями, но и оригинальными художественным решениями, синтезом смысла и формы, для тех, чья фантазия выходит за рамки привычного представления.
Время: индивидуально.
Технический райдер: Мощность - 10 кВт (380 Вольт, необходима одна трехфазная розетка 32А)
Площадь - 9х5 м2

Страница о безопасности с шоу с дополнительной информацией в выпадающих окнах

Несмотря на то, что мы каждый день имеем дело с многометровыми разрядами молний и напряжениями до 3х МИЛЛИОНОВ Вольт, наши зрители и мы находимся в ПОЛНОЙ безопасности. Сейчас объясним почему:

Почему наше Тесла-шоу полностью безопасно?

Главная страница музея

Пример страницы информационного блока с цитатами

Трудно найти человека, который не был бы знаком с электричеством. А вот найти того, кто знает историю его открытия, гораздо сложнее. Кто открыл электричество? Что представляет собой это явление?
Существует предположение, что люди изучали электричество еще в Древнем Китае и Индии, Однако подтверждений этому нет. Более достоверно считать, что открыл статическое электричество древнегреческий ученый Фалес.
Он был известным математиком и философом, проживал в городе Милет, примерно в VI-V веках до нашей эры. Считается, что Фалес обнаружил свойство янтаря притягивать мелкие предметы, например перо или волос, если натереть его шерстяной тканью.
Никакого практического применения такому явлению не нашлось, и его оставили без внимания.
В 1600 году англичанин Уильям Гилберт публикует труд о магнитных телах, где приводятся факты о родственной природе магнетизма и электричества, а также приводятся доказательства, что наэлектризовываться, кроме янтаря, могут и другие минералы, например, опал, аметист, алмаз, сапфир. Тела, способные наэлектризовываться ученый окрестил электриками, а само свойство – электричеством. Именно он впервые предположил, что молния связана с электричеством.

Музей Теслаториум ответит на Ваши вопросы

ВАМ ЗНАКОМО ВЫРАЖЕНИЕ "ВЫШЕ ГОЛОВЫ НЕ ПРЫГНЕШЬ?".
ЭТО ЗАБЛУЖДЕНИЕ. ЧЕЛОВЕК МОЖЕТ ВСЁ

Никола Тесла

Кейс: Сайт он-лайн курсов английского языка