Как стать автором
Поиск
Написать публикацию
Обновить

Дизайн

Сначала показывать
Порог рейтинга

Опубликована база по веб-разработке от Microsoft. В учебном курсе от компании представлено 24 урока, где разбирается всё от основ веба, работы браузеров, сетевых протоколов до HTML, CSS и JS. Всё обучение ориентировано на практику. После каждого раздела есть тесты и интерактивные кодинг-задачи. Также есть несколько пет-проектов, которые можно реализовать после обучения и положить себе в портфолио.

Теги:
Рейтинг0
Комментарии0

Британское правительство потратило более £500 тысяч на обновление логотипа сайта gov.uk, ограничившееся сменой цвета и перемещением точки. Новое оформление, разработанное агентством M&C Saatchi, вызвало насмешки чиновников и критику со стороны общественных организаций.

Теги:
Всего голосов 3: ↑3 и ↓0+3
Комментарии2

20+ кейсов с изображениями в ChatGPT. Или экономим 100,000₽+ на дизайнерах

Так как в пост можно загрузить только одну фотографию, то я все упаковал в большую статью https://habr.com/ru/articles/920274/

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

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

Внутри статьи ⤵️

Мои примеры с лампой-кроликом — взял один объект из комнаты и показал 10+ способов его использования

  • Превратил в робота-маскота

  • Сделал комиксы про морковку

  • Создал стикерпак для Telegram

  • Нарисовал карточки товаров

  • Сгенерировал 3D-версии

В статье рассказал подробно, что все еще плохо работает в генерациях

❌ Плохо работает с кириллицей (артефакты в тексте)
❌ Галлюцинирует на сложных сценах
❌ Точечные правки работают коряво
❌ Лица меняются между итерациями
❌ Размываются мелкие детали

Так как в пост можно загрузить только одну фотографию, то я все упаковал в большую статью https://habr.com/ru/articles/920274/

Теги:
Всего голосов 3: ↑3 и ↓0+5
Комментарии0

Надоела плоскость. Прямоугольники, которые притворяются кнопками.

Слепил из света и тени во Flutter.
Слепил из света и тени во Flutter.

Код.

Теги:
Всего голосов 1: ↑1 и ↓0+1
Комментарии2

JavaScript, дизайн-системы и рок-н-ролл — что такое фронтенд в 2025 году? 

Что происходит, когда в одном месте собираются JS-еры, UX-дизайнеры и исследователи? Получается Frontend&UX Talks!

Без сложных интерфейсов в фронтенде сегодня никуда: продукты становятся все масштабнее, а требования – все выше. Для всего этого нужны свежие и эффективные решения, которые ускорят разработку, и помогут провести релевантные UX-исследования.

Чтобы обсудить эти темы, мы в МойОфис пригласили ребят из разных компаний: Alfa Research Center, Лаборатория Касперского и Контур.

Всего на митапе будет 7 докладов, где расскажем:

  • как реактивное программирование и RxJS меняет разработку – и какие у него есть нюансы;

  • какие свежие css-спецификации могут упростить ежедневный кодинг;

  • как «редизайнить» сложные интерфейсы: рассказ на личном опыте переосмысления визуала настольных редакторов практически с нуля;

  • что за методы UX-исследований использует финтех сегодня – и какие из них можете перенять и вы :)

и многое другое, что поможет в работе со сложными интерфейсами!

Если тебе близки эти темы — приходи 26 июня в 15:00. Регистрация и подробности по ссылке.

Теги:
Всего голосов 15: ↑15 и ↓0+15
Комментарии0

Обновил сайт знакомств для айтишников

Наконец-то!
Уже 13 лет бесплатно ищет половинки. И без рекламы.

Ушел с jquery и bootstrap - перешел на alpine и tailwindcss.
Поменял дизайн на более современный и удобный, как мне кажется.

Знакомства для айтишников - просто наберите в поисковике (он всегда первый), ссылку не буду давать.

Как было раньше можно посмотреть в архиве интернета, с 2012 года.

Теги:
Всего голосов 2: ↑1 и ↓1+1
Комментарии0

Часть 2: итоги недели разработки вайбкодинга с агентами

Прошлый пост тут

1️⃣ Текущий прогресс по xsoulspace.dev привел к тому, что обнаружил что есть закономерность какие именно модели хороши для использования в проектировании layout страницы (спойлер - не записал какие 🤦‍♂️ кажется использовал Claude 4.0 thinking + Gemini 2.5 Pro).

Что попробовал сделать : нарисовал простой wireframe image -> сконвертировал в ACSII art, и затем скормил LLM для более корректного восприятия layout.

Оказалось что так проще, но относительно (за счет убирания лишних элементов проще понять что где расположено), но с другой стороны LLM все так же тяжело воспринимать layout (если он чересчур кастомный).

2️⃣обновил все flutter библиотеки, last answer, word by word, budget app до flutter 3.8 - пользовался агентами в окошках. В некоторых случаях правил руками, но в большей части работал по принципу PDSA (Plan Do Study Act), где я разрабатывал план, а агент по нему шел, потому изучал результаты и т.д.
Вывод - нужно сильнее нарабатывать промпты.

3️⃣внезапно получил спам-рассылку-письмо с возможностью потестить on device API для того чтобы запускать модели. Чтобы потетстить решил запилить новое приложение для работы с промптами - действовал по принципу:

  1. Идея и этические принципы

  2. Палитра и дизайн система на основе идеи и принципов

  3. План работы

  4. Имплементация через агентов + доп ресерчи чтобы агенты понимали какую информацию брать.

Удалось собрать прототип за 12 часов (рабочую, включая все экраны и дизайн систему). Следующий этап - буду модифицировать чтобы можно было тестировать на реальных промптах в проектах.

Опыт: понял как создавать и работать с ролями (опишу в следующем посте про MVP), разобрался как запускать LLM на устройстве.
Недостатки: нужно более точно прописывать тех стак, особенно ключевые места, такие как - синхронизация данных, тип хранилища и т.д. И хорошо если изначально можно давать wireframes, или подгенеривать на основании дизайн системы.

Хотелось сделать нечто среднее между игрой и обычным интерфейсом, но пока не получилось.

4️⃣Создал детальный план и начал прорабатывать новую систему сохранения данных. Для меня это оказалось большой проблемой - потому что Hive, Isar на flutter перестали поддерживаться, а другие библиотеки неудобно использовать (где-то перешел на Sembast).

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

Поэтому решил объединить все идеи и написать одну библиотеку которая будет из коробки давать синхронизацию с гитом, github и папками. Так надеюсь удастся побороть проблему долговечности и надежности хранения данных.
Пока агенты имплементировали 4 этапа из 5 (основную логику провайдеров данных), и как итог - собрал отдельное тестовое приложение (todo), чтобы протестировать работу (отдельный скриншот), понять недостатки и как можно быстрее завершить библиотеку чтобы начать интеграцию во все проекты. Это важно, потому что при одновременной интеграции сразу будет понятно что работает, а что нет, и таким образом будет проще получать feedback и развивать библиотеку качественно.

Спасибо за ваше время и хорошего дня!

p.s.:

Бумаги которые claude нашел по теме и одновременно не по теме)

Теги:
Всего голосов 4: ↑2 и ↓20
Комментарии0

Как дизайнеру найти первую работу без опыта и связей

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

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

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

1. Найти подходящую компанию. Рекомендую обратить внимание на стартапы и компании, где еще нет дизайнера. Стартапы можно найти на Product Radar, а с неудобными сервисами мы сталкиваемся по жизни – им и можно предложить свои услуги.

2. Предложить свои услуги. Просто предложить свои услуги даже бесплатно – не всегда сработает, ведь не все понимают, что им нужен дизайнер. Нужно предложить улучшения интерфейса: это покажет вашу экспертизу и слабые места продукта.

3. Упаковка опыта. Не нужно ждать завершения проекта, чтобы упаковать его в портфолио. Лучше публиковать небольшие задачи сразу. Пример: доработка регистрации, улучшение личного кабинета, добавление фильтров в таблицу заказов. 

4. Параллельный поиск. Вместе с работой над проектом нужно делать по 10-20 откликов в день. Регулярно пополняемое портфолио в этом поможет. Откликаться можно на крупных площадках, как HeadHunter и LinkedIn, и более нишевых – Getmatch, каналы и чаты.

Благодаря этой стратегии вы сразу будете получать реальный опыт. Не только в дизайне интерфейсов, но и в работе с разработчиками, аналитиками и бизнесом, что не менее ценно. А если стартап будет развиваться или получит инвестиции – вам предложат повышение.

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

Теги:
Всего голосов 2: ↑2 и ↓0+2
Комментарии1

Попробую публиковать серию постов про мои новые эксперименты с вайбкодингом.

Не использую v0, bolt - так как они совсем почти no-code + генерят react приложения, а мне интересно сейчас проработать поработать с Dart проектами.

Начал с крафта нового сайта для xsoulspace.dev (мой основной сайт по проектам, давным давно писал на flutter и очень давно не обновлял).

Основная идея в том, чтобы:

  1. Как можно больше проработать паттернов вайбкодинга

  2. Как можно качественнее научиться работать с дизайнерской точки зрения

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

Пока что удалось сделать немного - восстановил навыки промптинга (которые прокачивал в прошлом году)

Восстановил часть промптов которые были раскиданы по проектам.

Частично удалось распараллелить работу (используя окна и табы агентов в cursor) и научиться давать относительно автономные задачи (по принципу PDSA (Plan Do Study Act))..

Исходный код открытый, поэтому буду делиться результатами когда завершу делать :) (надеюсь что скоро)

Пока что было две идеи:

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

  2. Каким-то образом придумать бенто..

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

Некоторый текст и данные на картинке ниже абстрактные.

Спасибо за ваше время и хорошего дня!

P.s.: почему-то на хабре нельзя загрузить больше одной картинки в пост:(

P.p.s.: почему-то нельзя опубликовать публикацию если хоть раз проставил галочку запланировать..

Теги:
Всего голосов 6: ↑0 и ↓6-6
Комментарии0

Сжимаем видое без потери качества — релизнулся топовый компрессор SqueezeVid:

  • Сжимает видео, не теряя ни единого пикселя — качество останется на высочайшем уровне.

  • Работает со всеми популярными форматами, включая MP4, MOV и AVI.

  • Можно конвертировать ролик в нужный формат и даже контролировать степень сжатия.

  • Вся обработка происходит локально, прямо на ПК пользователя

  • Без ограничений, без регистрации, бесплатно.

Теги:
Всего голосов 3: ↑2 и ↓1+1
Комментарии1

Почему мы решили делать именно Конструктор форм?

Т.к. мы пилим продукты и нам важна Обратная связь от пользователей - мы ее собираем в Google Forms, они оч крутые, но есть пара нюансов:

1) Обработка персональных данных по закону должна быть в РФ. Штраф до 500к рублей! И т.к. мы хотим делать бизнес на РФ - нам нужно использовать оператора из РФ. 

2)  Мы сейчас собрали таблицу куда приходят все “Данные” от наших иностранных пользователей. 

У нас сейчас 6 таблиц, только с 3 расширений, дальше будет больше. 

Ходить по страницам не так удобно как у всех топовых сервисов по созданию форм. 

Мы хотим видеть одну таблицу с сортировкой по последним и фильтрами по всем ответам/заявкам.

3) Уведомления в телеграм.

4) Встроить оплату и другие виджеты.

5) Кастомные домены.

Теги:
Всего голосов 1: ↑1 и ↓0+1
Комментарии4

Почему все сообщества инди-хакеров в России платные?

Давайте создадим свое бесплатное комьюнити для всех 👇👇👇

Теги:
Всего голосов 3: ↑1 и ↓2-1
Комментарии6

🖼 🚀 Я почти всегда выбираю ISR в Next.js для контентных сайтов.

Вот почему:

SSR:
- Каждый запрос = генерация страницы

SSG:
- Обновить контент = пересобрать весь проект
- При 1000+ страниц билдится часами

ISR - лучший вариант:
- Не генерит страницы сразу. Только по запросу.
- Ключевой параметр: revalidate - определяет, как часто Next.js должен перегенерировать страницы.

Например revalidate: 60 - страница обновляется раз в 60 сек, а между этим - юзер видит кэш из памяти.
Для некоторых контентных сайтов норма обновления данных 8-24 часа. Данные будут в оперативной памяти все это время.

💡 Фишка для SEO:
После деплоя (CI/CD) - страницы прогреваются скриптом, чтобы не ждать первого захода.
Это нужно чтобы поисковые боты видели всегда лучшую версию сайта, а не ждали прогрузки кеша.

📌 Вывод:
Если тебе не нужен real-time обновления сайта - ISR закрывает почти все потребности.

А чем пользуешся ты? Пиши 👇

Теги:
Всего голосов 9: ↑0 и ↓9-9
Комментарии2

Ближайшие события

Представлен сервис для удаления фона с необычным дизайном — ваша фотка буквально отправляется в стирку. Работает просто: закидываете картинку в машину, пару секунд наблюдаете за гипнотизирующим барабаном и забираете PNG-шку. Дизайнеры познают дзен — здесь.

Теги:
Всего голосов 2: ↑2 и ↓0+4
Комментарии1

Apple выпустила тактильный трейлер фильма F1, улучшенный с помощью вибраций iPhone.

Если у вас iPhone под управлением iOS 18.4 или более поздней версии, на вкладке Apple TV Plus приложения TV теперь есть трейлер предстоящего фильма Брэда Питта F1, который теперь улучшен с помощью вибраций, создаваемых современным компонентом Taptic Engine в iPhone.

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

Теги:
Всего голосов 2: ↑2 и ↓0+5
Комментарии0

«В одной компании я была свидетелем того, как сотрудник в свой первый день вышел перепарковать автомобиль и не вернулся. Причина: новичка не познакомили с командой, не назначили наставника, не объяснили, чем ему предстоит заниматься. Вместо этого HR-менеджер привел его в опенспейс и оставил на несколько часов без внимания… За это время сотрудник решил, что это не его компания. И я его не осуждаю😅»

Это история из статьи Гузель «Онбординг здорового дизайнера» — дизайнера внутренних продуктов в Альфа-Банке. Не так давно она сама стала наставником для новичка и чтобы ситуация из истории не повторилась, сделала онбординг-страничку, где собрала всё, что может помочь в адаптации.

И благодаря доке новичок не сбежал, а прошел онбординг весело и бодро. 

А в статье поделилась шаблоном этой странички.

Онбординг здорового дизайнера: шаблон для интеграции новичка в продукт
Всем привет! На связи Гузель — дизайнер цифровых продуктов в Альфа-Банке. В одной компании я была св...
habr.com

Заходите, читайте, берите на вооружение, шаблон работает.

Теги:
Всего голосов 3: ↑3 и ↓0+5
Комментарии0

Мега Bolt или как неройнка заменяет кучу разрабов

Разработка или Vibe Coding продолжается 3 день. Я все ещё использую Bolt и смог сделать вполне рабочий сервис. Вручную программисту потребовалось бы около 1-2 недель на такой функционал.

  • Авторизация

  • Редактор форм

  • Просмотр ответов форм с фильтрами

  • Выгрузка ответов в csv

  • Шаблоны форм

  • Загрузка файлов в хранилище

  • Публикация формы для клиента

Все уже работает и связано с БД

Остальные скрины и ДЕМО версию пришлось опубликовать в телеге т.к. тут лимит на 1 картинку.

Теги:
Всего голосов 10: ↑5 и ↓5+2
Комментарии4

Я попробовал Bolt. Мои первые шаги в Вайб-кодинге.

На связи Антон 👨‍💻

Мы выбрали идею нового продукта - Form builder. Простой и минималистичный конструктор форм на замену Google Forms.

Для разработки я пробую сервис Bolt.new. Я пишу в промтах ТЗ, нейросеть генерит код за меня.

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

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

А у вас какой опыт с вайб-кодингом? Писать про наш опыт с нейросетями в разработке?

Теги:
Всего голосов 2: ↑2 и ↓0+4
Комментарии8

Правда ли, что пользователи фанатеют по темному режиму? Проверяем в своем приложении

Много слышал о том, что темная тема ― это тренд и чуть ли не 100% пользователей на нее переедет.

Мы решили проверить, как обстоят дела с темной темой в нашем мобильном приложении системы управления проектами YouGile. Dark mode у нас просили еще с момента запуска мобильного приложения, темная тема входила в топ-10 запросов. Проверили ― оказалось, 40% регулярно использует dark mode. 

Так выглядит наше приложение YouGile в темной и светлой темах
Так выглядит наше приложение YouGile в темной и светлой темах

Похоже ли это на то, что светлая тема вообще не нужна? Видимо, нет. Пользователи из России предпочитают и то, и другое ― темную тему ставит 34% пользователей (данные 2023). Опрос Android Authority показывает, что dark mode предпочитает 81% респондентов, но опросу уже пять лет и выборка там менее 3 000 человек.

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

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

А вы на какой стороне?

Теги:
Рейтинг0
Комментарии12

Новый интерфейс карт Яндекс и глухонемой водитель.

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

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

Кажется, что процесс, описанный @kefiijrw в итоговой статье про выкатку нового интерфейса, не включал расширенное тестирование на некоторых специальных группах, для которых критически важна доступность интерфейса.

Изменения привычных цветов для тех, кто ориентируется только визуально, критически влияет на комфорт и безопасность. Поэтому резко менять, без переходного периода, как-то слишком оптимистично. В телефонии, например, тянут поддержку древних TTY релеев, потому что есть US Rehab Act Chapter 508 и попробуй ему не соответствовать принято думать о поддержке наработанного пользовательского опыта

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

Теги:
Всего голосов 5: ↑5 и ↓0+8
Комментарии2