Инструменты для дизайнеров Vision Island

Тестовое задание: где норма, а где бесплатная работа Нормально: задача на 2–4 часа, вымышленный или учебный продукт, понятные критерии оценки, обратная связь в ответ. Тревожно: «сделайте главную для нашего нового сайта», срок неделя, никаких критериев, а через месяц эта главная появляется в сети. Что можно предложить в ответ: показать похожую работу из портфолио, сделать тестовое в урезанном объёме или попросить оплатить его по часовой ставке. Адекватные компании на это соглашаются. Те, кто нет, обычно и дальше вели бы себя так же. Vision Island: инструменты для дизайна

Размеры заголовков не надо придумывать H1 — 48? Или 56? А H2 тогда 32 или 36? Type Scale снимает вопрос. Задаёте базовый размер текста и коэффициент, и сервис строит всю лестницу: подписи, текст, шесть уровней заголовков. Коэффициент 1,25 даёт спокойную шкалу для интерфейсов, 1,333 или 1,5 — для лендингов с крупными заголовками. Тут же подключается шрифт из Google Fonts, чтобы посмотреть вживую. Результат отдаётся в CSS. Бесплатно. https://typescale.com/ Vision Island: инструменты для дизайна

Иконка и текст рядом: почему не сходятся Иконка 24 px, текст 16 px, выровняли по центру, а глазу кажется, что иконка висит выше. Причина в том, что центр текстового слоя считается вместе с выносными элементами, а видимая масса букв ниже. Два правила. Первое: размер иконки примерно 1,2–1,5 от кегля текста. К 16 px подходит иконка 20 или 24, но не 32. Второе: выравнивать не по центру слоя, а по x-высоте строчных букв, и при необходимости сдвинуть иконку на пиксель вниз. В auto layout это делается через отступы контейнера, а не ручным сдвигом слоя, иначе при замене текста всё разъедется. Vision Island: инструменты для дизайна

Промпт для текстов, которые в макете обычно пустые Ошибки, пустые состояния, тултипы, подтверждения — их часто оставляют как «Текст ошибки» и потом разработчик пишет что-то своё. Быстрее сделать черновик сразу: «Приложение: [доставка еды]. Напиши тексты для интерфейса, по 3–8 слов, без восклицательных знаков и без слов «упс» и «ой». Нужны: 1) ошибка сети; 2) пустая корзина; 3) пустая история заказов; 4) подтверждение удаления адреса; 5) успешная оплата; 6) подсказка к полю промокода. Для каждого дай два варианта: нейтральный и чуть теплее.» Дальше выбираете и правите под голос бренда. Главное, что в макете появляются настоящие слова, и сразу видно, влезают ли они. Vision Island: инструменты для дизайна

PT Sans и компания: бесплатные шрифты, сделанные для русского Семейство PT Паратайп выпустил ещё в 2009-м по госпрограмме, и с тех пор оно бесплатное, включая коммерческое использование. PT Sans для интерфейсов и текста, PT Serif для длинного чтения, PT Mono для кода и таблиц. Кириллица там не приделана к латинице задним числом, а нарисована первой: есть даже буквы для языков народов России. Отдельно стоит PT Root UI, он тоже бесплатный. Современный гротеск для интерфейсов, четыре начертания, ровно лежит в мелком кегле. Всё есть в Google Fonts и на сайте Паратайпа. https://www.paratype.ru/collections/free Vision Island: инструменты для дизайна

Тёмная тема — это не инверсия светлой Просто перевернуть цвета не получится, вылезет три проблемы. Фон. Чистый чёрный #000 с белым текстом режет глаз. Берите тёмно-серый, #121212 или около того. Тени. На тёмном они не видны. Вместо тени слои различают яркостью: чем ближе к пользователю, тем светлее фон карточки. Акценты. Насыщенный синий или красный на тёмном вибрирует. Цвета для тёмной темы делают чуть бледнее и светлее, чем для светлой. И проверьте контраст заново: он на тёмном фоне считается иначе. Vision Island: инструменты для дизайна

Проверить макет на дальтонизм можно без плагинов В Chrome есть встроенный симулятор. Открываете прототип или готовый сайт, нажимаете F12, дальше меню с тремя точками → More tools → Rendering. В самом низу пункт Emulate vision deficiencies. Там протанопия, дейтеранопия, тританопия и размытое зрение. Самое частое открытие: красная кнопка «Удалить» и зелёная «Сохранить» становятся неотличимы. Около 8% мужчин видят их именно так. Лечится подписью, иконкой или разной формой, а не только цветом. Vision Island: инструменты для дизайна

Сроки: считайте честно, потом умножайте Оценка «дня три» почти всегда означает пять. Не потому что дизайнер медленный, а потому что в трёх днях учтена только работа. Не учтены ожидание материалов, вопросы клиенту, второй круг правок и день, когда всё поехало из-за нового требования. Рабочий метод: посчитать чистое время, умножить на полтора и отдельно оговорить, что срок идёт от момента, когда все материалы получены. Если тексты и логотип приходят через неделю, дедлайн сдвигается на неделю, и это надо проговорить до старта. Сказать «пять дней» и сдать за пять приятнее, чем сказать «три» и извиняться. Vision Island: инструменты для дизайна

Excalidraw: схема за пять минут, которая не претендует на красоту Иногда нужен не макет, а набросок: как экраны связаны между собой, куда ведёт кнопка, где вопрос к клиенту. В Figma на это уходит время, и получается слишком аккуратно, будто уже готово. Excalidraw рисует нарочито от руки, стрелки кривоватые, шрифт рукописный. Никто не примет это за финальный дизайн, и обсуждать становится легче. Прямоугольники, стрелки, текст, всё в браузере. Есть совместная работа по ссылке и экспорт в PNG и SVG. Бесплатно, без регистрации, работает офлайн. https://excalidraw.com/ Vision Island: инструменты для дизайна

🧥 Жилетка — бот, которому можно выговориться Когда накрыло в 3 ночи, а поговорить не с кем. Когда уже не можешь объяснять близким что с тобой. Когда нужно просто выплеснуть — без советов и «соберись, тряпка!» Что умеет Жилетка: 💬 Слушает и отвечает — не как робот, а как понимающий собеседник. Задаёт вопросы, которые помогают разобраться в себе. 🙊 Не учит жизни — без советов, без «бывает и хуже». 📓 Ведёт дневник эмоций — записывай и анализируй свое самочувствие. 🕐 Работает 24/7 — хоть днём, хоть ночью. 🔒 Полная приватность — все, что было в «Жилетке», останется в «Жилетке». Попробовать бесплатно: @my_zhiletka_bot

Серый должен быть немного цветным Чистый серый #808080 на цветном сайте выглядит как чужой. Он ни к чему не привязан. Дизайн-системы поэтому подмешивают в серые оттенок основного цвета: у сайта с синим акцентом серые чуть холодные, у тёплого бренда чуть кремовые. Делается это просто. Берёте основной цвет, в HSL опускаете насыщенность до 5–10% и строите от него шкалу: от почти белого до почти чёрного. Текст, фоны, разделители, всё из этой шкалы. Разница едва заметна по отдельности, но целиком макет становится собранным. Vision Island: инструменты для дизайна

🎨 Ищешь вакансии? А можно наоборот: пусть заказчики находят тебя сами ДизайнБаза — канал с резюме дизайнеров. Заполняй анкету – опубликуется автоматически.

Шесть сочетаний клавиш, которые экономят по часу в неделю Shift+A — обернуть выделенное в auto layout. Ctrl+Alt+K — создать компонент. Ctrl+/ — открыть поиск по всем действиям, если забыли, где что лежит. Alt при наведении — показать расстояние до соседних объектов. Ctrl+Shift+H — спрятать слой и показать обратно. Ctrl+D — повторить последнее перемещение или копирование с тем же сдвигом. На Mac вместо Ctrl — Cmd, вместо Alt — Option. Последнее сочетание в списке самое недооценённое: дублируйте карточку, сдвиньте на нужный отступ, и дальше Ctrl+D расставит остальные ровно. Vision Island: инструменты для дизайна

Godly: лендинги, которые действительно запущены Ещё одна галерея сайтов, но с отличием: сюда попадают только живые страницы, а не концепты. У каждого сайта прямая ссылка, так что можно открыть и покликать, посмотреть, как сделаны анимации и адаптив. Фильтры по стилю, отрасли и типу страницы. Обновляется почти ежедневно. Бесплатно. Удобно для случаев, когда клиент говорит «хочу как у стартапов», а показать конкретно нечего. https://godly.website/ Vision Island: инструменты для дизайна

— Напиши текст для лендинга — Я же дизайнер... — Ну ты же фрилансер, разберёшься Знакомо? 🙃 🪶 НейроПеро — AI-копирайтер, который разберётся за тебя: — Тексты для сайтов и портфолио — Ответы клиентам по почте и в чате — Описания услуг для Behance и других площадок Работает в Telegram и в браузере — выбирай, где тебе удобнее. Без VPN.

Canva Dream Lab — генератор изображений в 2K с поддержкой текста и редактированием отдельных элементов. Vision Island: инструменты для дизайна

Промпт, который находит дыры в макете Чат-боты хорошо замечают то, к чему глаз уже привык. Скриншот экрана и такой запрос: «Это макет [экран оплаты в мобильном приложении]. Оцени его как строгий арт-директор. Ответь по пунктам: 1) что пользователь видит первым и правильно ли это; 2) где нарушена визуальная иерархия; 3) какие элементы можно убрать без потери смысла; 4) что непонятно без объяснения. Не хвали, только замечания.» Половина замечаний окажется мимо, вторая половина — вещи, которые правда стоило поправить. Работает и в ChatGPT, и в Claude, и в отечественных ботах, которые умеют смотреть картинки. Vision Island: инструменты для дизайна

Макет клиенту — не скриншотом в телеграм PNG в мессенджере открывается на телефоне, сжимается, и клиент смотрит на лендинг шириной 1440 пикселей в окошке 380. Оттуда и появляются «шрифт мелкий» и «всё какое-то серое». Лучше так. Ссылка на прототип в Figma, чтобы смотрели в браузере на нормальном экране. К ней три-четыре предложения: что решено, почему так, на что обратить внимание. И просьба посмотреть с компьютера, если макет для десктопа. Если без картинки никак, экспортируйте фрейм в 2x и добавьте подпись, что это превью, а смотреть надо по ссылке. Vision Island: инструменты для дизайна

Вариативный шрифт: один файл вместо восьми Обычная гарнитура — это набор отдельных файлов: Light, Regular, Medium, Bold, у каждого свой курсив. Вариативный шрифт хранит всё это в одном файле, и начертание крутится ползунком: вес 437, ширина 92, всё что угодно между крайними точками. Для сайта это меньше запросов и быстрее загрузка. Для дизайна — можно взять вес чуть тоньше Regular, если Light слишком бледный, и никто не запретит. В Figma ползунки лежат в настройках текста, раздел Variable. Из бесплатных с кириллицей так умеют Inter, Manrope, Geologica, Onest. Vision Island: инструменты для дизайна

Все иконки всех наборов в одном окне Lucide, Tabler, Phosphor, Iconoir хороши, но у каждого свой сайт, и «домик со стрелкой» ищется по четырём вкладкам. Icônes собирает больше 200 тысяч иконок из полутора сотен наборов на одной странице. Вбиваете слово, видите результат сразу из всех библиотек. Нашли нужную — копируете SVG или код для React, Vue, Svelte. Можно отобрать несколько и скачать пачкой. Лицензия каждого набора подписана прямо там. Бесплатно, без регистрации. https://icones.js.org/ Vision Island: инструменты для дизайна