From Fedya With 💚
756 subscribers
533 photos
71 videos
2 files
225 links
Привет! Я - Катя Федяева @kate_stoltz , frontend и веб-дизайнер. Тут я делюсь своей жизнью, котами и немного работой.

А еще делаю сайты на тильде и webflow, люблю чистую верстку, веду стримы.
Download Telegram
У нас с Санёчком вышел новый кейс на behance и мне будет очень приятно, если вы поставите большой лайк 🥰

свежий как бабулины блины кейс, тык

Спойлеры:
— кейс для меня оказался душевнее проекта по ряду причин
— вместо привычных стоковых мокап у нас красивые фотографии в атмосфере проекта
— в конце моё коронное до/после на тильде

#работа
Please open Telegram to view this post
VIEW IN TELEGRAM
Новые награды в копилку наград (теперь их стало 11) 😳


Отдельное спасибо всем, кто голосовал за сайт. Благодаря вам получена грамота Special Kudos ❤️

#работа
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Мой первый сайт-портфолио готов 🤩


В процессе создания я поняла, что многие вещи хотела бы переделать. Потому что непрерывно узнаю новые черты себя и это отражается в том, что я делаю. Но всегда в таком случае есть риск увести правки в бесконечность (наверняка, вам это знакомо).


Что нравится:
x Фиксированный первый блок и белый градиентик снизу {я сделала его, когда это еще не было мейнстримом}
x Эффект с градиентной маской у меню
x Простая сетка работ {которую я переделала} и переключение на таблицу, в которой проектов больше
x Сочетание Arial и простого EB Garamond

Нужно еще заменить свои фотографии на странице и сверстать все страницы для проектов (не будем думать об этом пока). Главное, что я могу теперь скидывать сайт со своими работами 😏

смотреть тут >>>>
стрим с верстой проекта >>>>

#работа

в процессе я нехило страдала от мысли, что до сих пор не совсем понимаю себя: не знаю, что именно мне нравится и меня отражает, как это вписать в сайт. но для первого сайта пойдет, думаю. крутой потом сделаем еще
Please open Telegram to view this post
VIEW IN TELEGRAM
Обо мне пишут 😳🤩

Анна поделилась опытом нашего сотрудничества и мыслями о создании сайта. Я же совсем забыла рассказать вам, что проект взял рекордные в моей жизни 9 наград: 5 SOTD и 4 CSSDA (было бы приятно получить Honorable Awards, но я решила не отсылать сайт на AWWW). В MOT, ожидаемо, не попал (просто знайте, что дизайнеры тильды круче этих ваших жюри на CSSDA и отправляйте сайт на другие агрегаторы. потом еще плакать будут, что вы не там).

Сам кейс подробно можно прочитать по ссылке 🔗

#работа
Please open Telegram to view this post
VIEW IN TELEGRAM
Ко мне пришли много новеньких и хочется сделать пост с навигацией, а также кратким обзором на тему того, о чем я вообще вещаю 😎

Моему блогу чуть больше года и это не типичный блог дизайнера, который просто делится своим опытом и полезными советами для новичков {потому что я знаю, что мне самой еще стоит поучиться у моей аудитории и больше ощущаю себя разработчиком}. Тут я пишу о своих переживаниях, развитии в профессии, делюсь ссылками на полезные сервисы и запустила крутую рубрику с мини-решениями для тильды и не только.

Здесь можно пробежаться по тегам: #работа #халявное #стрим #катяучится #ссылки #уверстка #переверстка #личное

Подробнее обо мне можно прочитать в этом посте (или тык по закрепам), а тут прочитать о том, с какой проблемой ко мне можно обратиться. Но если кратко, то я очень стеснительный человек, который любит своих пятерых котов, вязать носки и шапки, уют и спокойствие и пытается разобраться как жить эту странную жизнь. Идентифицирую себя как разработчик, который разбирается в дизайне.

На данный момент я работаю над платными крутыми решениями для тильды (не типикал решения как у всех), переписываю полностью программу оптимизации сайтов на тильде, делаю закрытый канал по развитию блога и консультации по нестандартной вёрстке на тильде. А еще я, иногда, веду стримы, на которых делаю реальные проекты и очень хочу развить это направление чуть дальше. Будем знакомы, если не знакомы 😃
Please open Telegram to view this post
VIEW IN TELEGRAM
Сейчас я работаю над созданием сайта косметики для дома, которая кардинально отличается от привычных средств, стоящих на полках в супермаркете. Отличается всем: необычной упаковкой (я лично очень люблю коричневые флаконы, вспоминаю сразу мамину косметику аптечную из Германии которую я вымазала на себя как-то разом), стильной этикеткой не в духе каноничного средства для стирки, крутым составом и ароматами. Последнее вообще является яркой чертой бренда, делая упор на том, как важно нам не просто закинуть триканцы в стирку, но и ощутить приятный аромат средства для стирки.


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

Как думаете, обошлось в этот раз без кучи вариантов первого экрана или не они меня победили? 🤔

#работа
Please open Telegram to view this post
VIEW IN TELEGRAM
Пока новый пост уверстки на тестировании хочу рассказать вам о продвижении проекта косметики для дома.

[исследования]
Традиционно любой проект я начинаю с небольших исследований. Полноценные исследования провожу только с привлечением UX-дизайнера {но очень хочу сама стать немного дизайнером продукта}. В данном проекте я начала с изучения конкурентов на нашем рынке и поняла, что их нет: упор делается на отсутствии ароматов и экологичности 😥. После анализа нескольких брендов выделила минусы и какие тезисы мы можем взять с сайтов конкурентов (да, не всегда стоит просто обосрать конкурентов, у них можно и учиться).

Минусы: старые сайты с плохой структурой и визуалом, некрасивые упаковки средств {которые мы просто прячем по раковину или переливаем мыло для рук в свой дозатор}.

Что можем использовать:
✧ люди боятся ароматизаторов из-за риска аллергии и идентифицируют такую продукцию опасной — пишем, что составы безопасны и не аллергенны (у нас и фотография есть с милейшим ребенком)
✧ пишем, что разработка была во Франции — это устоявшийся паттерн того, что продукты лучше в качестве (в пример приведу Skinjestique, которые год делали спф в России и не сделали 😪)
✧ не скрываем качества продукта за семью замками

После анализа я зацепилась за слоган компании «Косметика для дома» и отправилась изучать сайты косметических брендов. Ассоциации по итогам можно увидеть на слайде. Если же мой рассказ был интересен и хочется увидеть следующую часть поста, то ставьте единорожек под пост 🦄

#работа
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Продолжу рассказ о проекте Aromenenage.

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

[мудборд]
Данному этапу я уделяю большое количество времени, ибо правильный подбор референсов уменьшит количество правок в дальнейшем (как нибудь я расскажу вам историю о том, как один клиент одобрял все этапы работ, а на этапе готовности концептов все развернул, ибо не смотрел референсы, концепты и вообще лень 🤡). После проведения исследований стало ясно, что делать ориентир на стандартные сайты бытовой химии нельзя. Поэтому в поиске референсов я ни разу обратилась к этой тематике. Из предложенных приемов мы выбрали: журнальный стиль, необычную композицию и капельку брутализма (уменьшить отступы, сделать все тексты lowercase).

[дизайн-концепты]
"делаем холст, ставим логотип и текст, понимаем что плохо получилось хуйня какая-то вышла и уходим страдать, что ничего не умеем".

Я начала с простой расстановки элементов и поиска вариантов, чтобы всё не просто красиво сочеталось друг с другом, но и было связано с продукцией бренда. Так появилась идея — перенести стиль этикетки в первый экран. В процессе я несколько раз отходила от компьютера, делала зарисовки на бумаге (сделав набросок, который в итоге был принят), просила мужа сделать отбор хороших вариантов за меня (галочки поставил он).

Были сделаны два варианта:
✧ симметричный вариант с отсылкой на этикетку
✧ ассиметричный вариант в стиле zara home. в этом варианте я добавила еще одну колонку в сетку, подчеркнула одну из силовых линий и добавила чуть больше текста

В итоге мы решили совместить два макета, взяв с первого header, а со второго сетку в 5 колонок и приступили к дорисовке главной страницы. Про которую нужно рассказывать отдельно (ибо синий цвет там не от балды нарисовался). Буду рада реакциям и комментариям ❤️ (иначе мне придется писать только про скандалы-интриги-переживания-расследования).

#работа
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🎄 Знаю, что многие уже ушли на новогодние каникулы. Но меня ждет работа даже в субботу и я просто не могу уйти на каникулы не рассказав о последнем кейсе в этом году.

Aroménage — это бренд косметики для дома из натуральных компонентов с очень крутыми ароматами. От себя отмечу потрясающую упаковку, которую точно захочется оставить когда средство кончится (я уже приспособила бутылку под воду для цветов).

Целью было создать стильный сайт отличающийся от стандартных сайтов с бытовой химией: стильный, минималистичный и эффектный. Помимо главной страницы мы сделали каталог, карточку продукта и страницу о компании. Сайт был сверстан на тильде и очень сильно кастомизирован {а я не умею иначе, простите ☺️}.

Посмотреть сайт тут


Что было сделано:
— эффект загрузки страницы с имитацией дозагрузки страниц
— вариативный эффект наведения для пунктов меню и немного стилей для анимации шапки
— стилизация стандартного мобильного меню
— стилизация футера и собственной модификации аккордеона
— кастомный слайдер на странице "Каталог" в Zero Block
— переделка стандартного блока магазина под сетку проекта
— переделка блока "карточка со ссылкой", превращение в слайдер и встраивание его в Zero Block (линейка ароматов)
— изменение стилей popup товара: сетки, перенос аккордеона, добавление кнопок, стили текста
— слайдер из блока "карточка со ссылкой" на странице "о компании"
— стилизация стандартного блока "блог": изменение сетки, добавление стрелки при наведении и временный ховер
— базовая оптимизация, чтобы сайт быстро грузился (попали в зеленую зону lighthouse)
— анимации на мобильном


Для этого сайта как раз был написан эффект искажения с этой страницы, но я не смогла победить шейпы в Zero Block и проблему с тем, что он выборочно отображается в Safari (ставлю цель накопить на macbook ради красивых эффектов ☹️). MOT традиционно не взят.

Перейдя по тегу #работа вы сможете почитать об этапах работы над этим сайтом, а также посмотреть несколько стримов с версткой: первый и второй.


#работа
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Я знаю, что вы любите До/После переделки блоков на тильде 😎

Нужно было сделать страницу для публикации новостей и стилизовать её под сайт. Что я сделала:
1. Переделала сетку потоков под ту, которая используется на всём сайте.
2. Сделала нормальный адаптив для сетки потоков.
3. Переделала убогие кнопки разделов в менее активные.
4. Самую малость поправила popup с новостью.

Но больше всего на этом сайте горжусь эффектом перехода по страницам, имитирующим переход без перезагрузки {когда очень хочется роутинг на тильде} 😍

Кстати, у ребят на Ozon очень милые обложки и появилось средство для мытья фруктов и овощей (поставь лайк, если терпеть не можешь отскребать воск с яблок 😭).

#работа
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🙂 🔡🔡🔡🔡🔡🔡🔡🔡🔡

За последнее время в канале появилось много новых постов и соответственно тегов. Я решила навести порядок в канале и организовать удобную навигацию.

#личное (жизнь, переживания, нытьё, семья, мысли)
#скотики (немного о жизни наших пятерых усатых 👊👊)
#работа (о проектах, кейсы, отзывы, переделки)

#уверстка (небольшие быстрые решения)
#переверстка (переделка стандартных блоков на тильде)
#халявное (решения для тильды)
#ссылки (полезные ссылки, подборки постов, агрегаторы и так далее)
#стрим (записи стримов, которые не находятся в открытом доступе)

#косметикос (посты про косметику от косметического задрота 😎)
#дайджест (обзоры нового в CSS, обнов тильды) {я обязательно продолжу этот тег как смогу}
#референсы (подборки интересных сайтов) {тоже продолжим, как сможем}
#бренныйфриланс (как продвигается мой фриланс честно и без мотивационных речей)
Please open Telegram to view this post
VIEW IN TELEGRAM
This media is not supported in your browser
VIEW IN TELEGRAM
Фрагмент Futuro, который мы делали с Машей на webflow.

Это первый проект, на котором было обнаружено столько проблем: начиная от непонимания "а чего картинка такая шакальная", заканчивая первым написанием такого количества строчек на GSAP и ошибками Swiper.js, о которых не знал Google {и даже форумы на github}. Мне впервые было настолько сложно во время разработки, особенно от того что не все работает как мне хотелось бы {не устану повторять насколько проще и экологичнее простая верстка без ограничений}.

Несмотря на эти проблемы, для меня webflow — удобный конструктор, который избавляет от написания разметки, быстро грузит страницы, имеет качественную валидацию и не превращается в 1000-lb Sisters при подключении сторонних библиотек.

И вообще, когда мне хочется разозлиться от какой-то проблемы конструктора — вспоминаю как делала первые сайты на тильде и вообще не понимала, как люди там что-то делают {а оказалось, что могу не сдерживаться и все переделывать}.


Ну и благодаря webflow я почти закрыла огроменный кредит за лечение и скоро смогу сеть за развитие своих проектов 😭

#работа
Please open Telegram to view this post
VIEW IN TELEGRAM
Сейчас я работаю одновременно над двумя интересными проектами {и самое важное, не конфликтными 🥺}.

Редизайн двух страниц косметики для дома

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

Создание проекта от и до есть по тегу ➡️ #работа. Кстати, их гель для стирки "капли розы" просто лучший. Подписавшись на рассылку можно получить промик на скидку.

Сайт для шале и коттеджа в Гудаури

Просто представьте, ребята привезли в горы Грузии сосну из Карелии и построили Шале. Я сразу вспомнила любимую передачу детства "Уникальные дома из дерева".

В ходе обсуждения стиля сайта были выбраны два совсем разных направления (что у меня случается редко):
с атмосферой лёгкости, стильный и аккуратный (c кучей отсылок на Грузию и лыжную тематику)
строгий, уверенный в духе старых лыжных постеров (ретро обработка фотографий и движение лыжника по пути).

Какой концепт выбрали попробуйте угадать самостоятельно 😤

#работа
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Сайт комплекса в Гудаури — горнолыжном курорте в Грузии.

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

[исследования]
Пусть самый конфликтный клиент в моей жизни и считает, что исследования вещь абсолютно ненужная херня из под коня, а дизайнеры созданы просто для рисования картинок — к отрисовке макета без изучения ниши не приступаю.

Этот проект я начала с изучения сайтов крупных и не очень отелей в Гудаури, найдя лишь пару действительно качественных, но устаревших сайтов. Поэтому в исследования попали сайты похожей ниши в России. Помимо этого я изучила отзывы на сервисах бронирования, чтобы выявить проблемы, с которыми сталкиваются посетители.

Минусы: большинство сайтов в Грузии либо устарели, либо не используются; на сайтах мало информации о номерах и нет правил проживания; не ясно какие услуги вообще включены в обслуживание; нет узнаваемого фирменного стиля {я нашла с десяток сайтов в Алтае, которые просто зеленые потому что в Алтае есть лес? }.

Какие выводы мы сделали {гипотезы}:
*️⃣Многие люди перед посещением какого-то места {или заказа услуги} переходят на сайт компании в поиске нужной информации, но вместо этого часто предлагается позвонить и уточнить все детали. Мы же подробно расскажем всё уже на первой странице.
*️⃣Вместо простого минималистичного сайта делаем яркий сайт-постер, прорабатываем детали и придумываем свои фишки (ребята привезли сосну из Карелии в горы Грузии, что очень нестандартно и сайт должен быть не обычным).
*️⃣Как показало исследование отзывов на системах бронирования — многие люди считают оскорбительным только правильные ракурсы и лучшие детали объектов. Мы решили не обрабатывать фотографии объектов и не пытаться подобрать исключительно выгодные ракурсы.


По тегу #работа можно почитать подробно про еще один проект. Если вам интересны такие моменты — ставьте моих любимых единорогов под пост.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM