Вебфло, про тарифы

У Вебфло хитрая система цен. На их поддомене типа beladzed.webflow.io можно хоститься бесплатно и даже использовать возможности CMS. Правда на сайте будет бирка о том, что сайт на Вебфло и есть ограничения по количеству отправленных форм — до 50 штук.

Дальше идет базовый тариф, за $18 в месяц, там уже можно убирать бирки, но нет CMS. А это слишком мощная штука, чтобы от нее отказываться. Зато, там уже можно ставить свой домен и количество отправки форм расширяется до 500.

Дальше идет тариф за $29 в мес, который мне и пришлось выбрать. Туда входит всё из тарифа выше + CMS + по формам до 1000. Дорого, но я готов платить за прикольный продукт с которым работаю.

Цены, кстати, с учетом оплаты раз в месяц. Если платить наперед за год, то получается на 20% дешевле. Я пока не на 100% уверен, что останусь с концами на Вебфло, хочу еще попробовать Фреймер.

#webflow

Иногда бывает забавно себя погуглить, можно найти всякие статьи с моими фотками или людей с похожими фамилиями и другими жизнями 🙃

Специалист по красоте звучит как отличная строка в резюме

Неразрывный дефис

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

Сразу я пытался это починить с помощью цсс, промудохался час со свойствами hyphens, word-break и line-break, но ничего не вышло. Скорее всего из-за того, что сайт на русском, а внутрибраузерные словари оно как-то хитро тянет через другие свойства. Забил и подумал, что наверняка есть решение проще.

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

Но если опубликовать, то все работает так, как должно. Слова не ломаются, читать стало проще 🎉

P.S. Когда писал заметку, вспомнил про Типограф Лебедева. Обкатал на нем — тоже все работает. Главное в настройках выставить «вставлять готовые символы».

#webflow #типографика

Вы только не подумайте, что теперь все посты будут про Вебфло)

Про него сейчас проще всего писать, ибо что ни день, то открытие. А открытие потому что сейчас один из приоритетов — сделать минимально жизнеспособный сайт, которым будет не стыдно делиться.

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

Но в этом посте я хотел поделиться нашим недавним кейсом на Бихансе, который занял порядка 500+ часов, сменил несколько дизайнеров и, наконец, опубликовался.

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

И сделали классно) Я арт-директил, Саша Ревяко подсказывал, Стас Карпов рисовал, Женя Борисевич писала, Дима Хилькевич анимировал. И еще много-много людей участвовали в небольших кусочках.

🔗 Посмотреть можно по ссылке на Бихансе, а прокомментировать в комментариях к посту)

А вот побольше всяких картинок из кейса и репост со студийного акка. Если еще не подписаны — подпишитесь. Там не очень часто посты, зато можно смотреть чего интересного сейчас делаем)

Как быстро, бесплатно и просто сжимать картинки на маке

Фигма любит выгружать картинки в каких-то невероятных размерах, мой рекорд это картинка под 10мб.

Хороший тон сжимать их при отправке или заливке в веб. Многие используют всякие онлайн сервисы, например tinypng, но это сложно:
Скачать → найти куда скачал → закинуть на сервис → подождать → скачать архив → распаковать → закинуть куда нужно.

На маке я нашел идеальный, бесплатный и простой для себя способ сжимать картинки — ImageOptim. Это прилага для мака, которая работает довольно шустро и сразу подменяет исходные файлы.

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

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

🔗 Скачать для Мака

Сделал мобильное меню на сайте 📱

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

Основные критерии по которым я шел при разработке:

1. Меню должно быть сквозным, открываться с любого места на странице.

2. Под пальцем. Телефоны стали огромными, тянуться в правый, или не дай бог в левый угол, рисково для сохранности телефона.

3. Иметь одну точку открыть/закрыть. Напрягает, когда открываешь меню в одном месте, а закрываешь в другом.

4. Открытое меню может скроллиться. Хочу иметь возможность запихнуть туда всё, что захочу.

5. Скролл меню не должен спорить с фоновым скроллом страницы. Меню это слой поверх сайта и при скролле не должна изменяться точка чтения основной страницы.

6. При открытии меню не должно быть потери контекста. Если читатель отвлекся на что-нибудь, то вернувшись к открытому меню должен понять, где он и что происходит.

Больше всего потратил времени на понимание, как устроены тригеры и анимации в Вебфло, как строить зависимости и состояния. Для пункта 5 вообще пришлось расчехлить js, чтобы хитро добавлять классы при открытии.

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

Но это все мелочи, главное, что база и принципы заложены.

Потыкайте с телефона, напишите норм ли работает открыть/закрыть, хорошо ли работает скролл, насколько удобно расположение.

P.S. Добавил еще авку в мобильной версии и сделал верстку шапки поинтереснее относительно общей сетки)

🔗 Посмотреть все это работает

#webflow #portfolio

Согласился — делай как обычно

Бывают такие проекты, которые интересны, чтобы положить в портфолио, но абсолютно невыгодны по деньгам.

Я иногда беру такие, когда вижу, что могу не только дополнить портфель прикольным проектом, но и попробовать какие-то новые для себя штуки. И тут есть опасность.

«ой да пофиг, я все равно там копейки получу» — мысль, которая может появиться при очередном подходе к задаче.

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

У меня есть принцип для таких случаев — делать такие проекты как обычно. Как будто он не только мне интересен из-за задачи, но и с деньгами все в порядке.

Еще я постоянно держу в голове потенциал проекта. Часто бывало так, что клиент по завершении советовал меня кому-то и в итоге недополученные деньги окупали себя в несколько раз.

Согласился → делай так же как и всегда.

#принцип

Опа, получили очередную ленточку 🚀💥🍾

Добывать ленты становится все проще и проще. Осталось научиться кейсы делать быстрее)

Идеальный портрет кандидата при найме

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

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

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

Например, «Полностью самостоятельный, знает что, почему и зачем делает. Менеджерит свои задачи сам, не нужен постоянный надзор. Если что-то пошло не так — говорит максимально заранее об этом, предлагает пути решения».

После того, как составил файл — попросил всех посмотреть и откоментить. Через пару итераций мы зафиксировали, что да, именно такого дизайнера хотели бы найти в идеале.

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

Такой файл поможет составить структуру интервью и понять куда смотреть в портфолио. Для эйчаров отдельно еще сделал блок «Кто точно не подойдет», где расписал кто точно нет, а кто с меньшей вероятностью. Это сильно сократит моё время на отсмотр нерелевантных откликов.

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

#найм

Вернулся во времена фриланса или почему найм проще

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

Контракты, контрагенты, договоры, всякие разные ндсы, счета, зусы… голова идет кругом.

Всё это напомнило мне фрилансерское время. Только тогда у меня не было ИП, все было на русском и была мама, которая хорошо шарила в бухгалтерии и чего, когда и кому надо платить. Да и мне было всего 16-18 лет.

Сейчас я вырос и чувствую себя дедом. Никто ничего не знает, один говорит одно, второй другое, а третий четвертое. Все эти гос штуки офигеть неочевидны для человека, который никогда в жизни не сталкивался с чем-то сложнее «я Женя, хочу карточку и чтобы красивая».

В найме хорошо то, что за тебя все делает работодатель. Если ты ИП — делаешь всё сам. Сам себе бухгалтер, банкир, менеджер и много других веселых профессий. И вместо того, чтобы делать свою работу, ты делаешь десять других дел, которые нужны, чтобы делать свою работу. В итоге времени на саму работу становится меньше.

Фух, выговорился, полегчало) С доками по ИП более-менее разобрался, счета в банке открыл, осталось научиться выставлять фактуры и получать кэш 💸

Фотка из банка, где провел полтора часа с бумажками)

+1 ленточка Stock

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

Пока напрямую на Бихансе на студию падает не супер много толковых лидов, но льется нормально так трафика на сайт. А с сайта уже конвертятся в лиды.

Кстати, мы там еще один кейс запаблишили, но про него чуть позже расскажу)

🔗 Ссылка на кейс Delivery Docs, если пропустили)