Дизайн-печь 🔥 Ваня Емелюшкин pinned «Скриншоты хороших решений Я завёл новый телеграм канал со скриншотами сайтов и приложений. Туда я буду постить решения, которые мне показались интересными. Это не просто свалка скриншотов, там я пишу на что именно обратить внимание, как работает решение и…»
Доверяй глазу
В разных книгах по типографике авторы дают противоположные советы на счёт длинного тире внутри диапазона. Одни советуют его склеивать с цифрами, другие отбивать небольшими пробелами. Я же советую всегда доверять глазу и смотреть что будет.
Слева мы видим Штайнбек. Ему точно нужен волосяной пробел между тире и цифрой. А вот Робото не нужен. А вот в СФ компакт пробел такой длины, что ему явно нужен воздух.
Не стоит слушать правила, если с ними дизайн выглядит плохо.
Почитать про тире https://type.today/ru/journal/dash
Про пробелы https://kirillbelyaev.com/s/ru/
P.S. Я поставил длинное тире в примере для наглядности. Какое тире ставить в диапазонах тоже зависит от вас. Старая школа советует длинное, новая - короткое. На деле же всё зависит от шрифта. Эти правила не отлиты в железе, доверяйте глазу.
В разных книгах по типографике авторы дают противоположные советы на счёт длинного тире внутри диапазона. Одни советуют его склеивать с цифрами, другие отбивать небольшими пробелами. Я же советую всегда доверять глазу и смотреть что будет.
Слева мы видим Штайнбек. Ему точно нужен волосяной пробел между тире и цифрой. А вот Робото не нужен. А вот в СФ компакт пробел такой длины, что ему явно нужен воздух.
Не стоит слушать правила, если с ними дизайн выглядит плохо.
Почитать про тире https://type.today/ru/journal/dash
Про пробелы https://kirillbelyaev.com/s/ru/
P.S. Я поставил длинное тире в примере для наглядности. Какое тире ставить в диапазонах тоже зависит от вас. Старая школа советует длинное, новая - короткое. На деле же всё зависит от шрифта. Эти правила не отлиты в железе, доверяйте глазу.
❤9
Как сделать в iOS такое же расстояние между букв, как и в Фигме
Передавать в px
Если вы указываете расстояние в px, то оно будет соответствовать расстоянию в коде.
Если у вас в системе проценты, то пусть разработчики умножают это значение на размер шрифта.
Получается такая формула
tracking = fontSize*trackingFigma
Например
tracking = 27*0,185 = 4,995 , что как раз визуально равно значению трекинга в 5px
Если вы об этом не задумывались, вполне вероятно, что в вашем приложении разработчики либо забили на треккинг, либо строят его на глаз.
Передавать в px
Если вы указываете расстояние в px, то оно будет соответствовать расстоянию в коде.
Если у вас в системе проценты, то пусть разработчики умножают это значение на размер шрифта.
Получается такая формула
tracking = fontSize*trackingFigma
Например
tracking = 27*0,185 = 4,995 , что как раз визуально равно значению трекинга в 5px
Если вы об этом не задумывались, вполне вероятно, что в вашем приложении разработчики либо забили на треккинг, либо строят его на глаз.
🔥8
Дизайн-печь 🔥 Ваня Емелюшкин
Как сделать в iOS такое же расстояние между букв, как и в Фигме Передавать в px Если вы указываете расстояние в px, то оно будет соответствовать расстоянию в коде. Если у вас в системе проценты, то пусть разработчики умножают это значение на размер шрифта.…
Если вы Скетч-дизайнер или работаете в Фотошопе, то вам поможет статья от Редмадроботов. Ребята рассказывают как подружить значения из графических редакторов с кодом. Причём не только про трекинг, но и про интерлиньяж
Работать в фотошопе над интерфейсами — не стыдно. Например, игровые интерфейсы часто делают в фотошопе просто потому, что Фигма не умеет в нормальную работу с текстурами.
https://habr.com/ru/company/redmadrobot/blog/280029/
Работать в фотошопе над интерфейсами — не стыдно. Например, игровые интерфейсы часто делают в фотошопе просто потому, что Фигма не умеет в нормальную работу с текстурами.
https://habr.com/ru/company/redmadrobot/blog/280029/
Хабр
Как подружить iOS-приложение с типографикой
Случается, что готовый мобильный продукт отличается от того, что изначально было в макете. Конечно, все мы соблюдаем размеры и отступы, но этого не всегда дост...
👍3
Разбираемся в нативе, понимаем разработку
Лучший способ ускорить дизайн и разработку под мобилки — разбираться что можно сделать стандартными средствами, а что нет.
Почитать что такое нативные компоненты
https://designpub.ru/натив-и-кастом-318d83675553
Сейчас будет пачка годноты
Лучший способ ускорить дизайн и разработку под мобилки — разбираться что можно сделать стандартными средствами, а что нет.
Почитать что такое нативные компоненты
https://designpub.ru/натив-и-кастом-318d83675553
Сейчас будет пачка годноты
Medium
Натив и Кастом. Что это и как сделать верный выбор
Что это и как сделать верный выбор
👍4❤2
Для iOS
Ui Kit Lab
Самое кайфовое приложение со сборкой всех нативных компонентов. Можно тестировать их на прочность, добавлять свои тексты и стандартные иконки. Рекомендую всем там поиграться.
https://apps.apple.com/ru/app/uikit-lab/id1572751890?l=en
Interactful
Более сложное, но более подробное приложение. Однозначная годнота. Для каждого компонента есть описание кодом и ссылка на документацию. Можно даже выбрать на какую документацию ссылаться: для дизайнеров или разработчиков. Отдельно загляните на вкладку Foundations. Там шикарно показаны возможности настройки анимации, смешивания цветов и Если разберётесь с ними, сможете общаться с разработчиками на одном языке. Кроме того, есть версия на Mac OS
https://apps.apple.com/ru/app/interactful/id1528095640?l=en
Гайды Эппл
Они сильно обновились за последний год, стали куда подробнее и интереснее
https://developer.apple.com/design/human-interface-guidelines/foundations/overview
Ui Kit Lab
Самое кайфовое приложение со сборкой всех нативных компонентов. Можно тестировать их на прочность, добавлять свои тексты и стандартные иконки. Рекомендую всем там поиграться.
https://apps.apple.com/ru/app/uikit-lab/id1572751890?l=en
Interactful
Более сложное, но более подробное приложение. Однозначная годнота. Для каждого компонента есть описание кодом и ссылка на документацию. Можно даже выбрать на какую документацию ссылаться: для дизайнеров или разработчиков. Отдельно загляните на вкладку Foundations. Там шикарно показаны возможности настройки анимации, смешивания цветов и Если разберётесь с ними, сможете общаться с разработчиками на одном языке. Кроме того, есть версия на Mac OS
https://apps.apple.com/ru/app/interactful/id1528095640?l=en
Гайды Эппл
Они сильно обновились за последний год, стали куда подробнее и интереснее
https://developer.apple.com/design/human-interface-guidelines/foundations/overview
🔥2
Для Андроид
К сожалению, таких же годных приложений я там не знаю. Если есть что на примете — пишите в комментарии
Material Design Components
Неплохой сборник компонентов, но подглючивает
https://play.google.com/store/apps/details?id=io.materialdesign.catalog
Гайды Материал
Material 2. Старые гайды, актуально будет ещё лет 5, люди медленно переходят на новые андроиды https://material.io/design
Material 3. новые компоненты, новый дизайн, другая философия. Гугл добавляет персонализации и выглядит современнее
https://m3.material.io/
К сожалению, таких же годных приложений я там не знаю. Если есть что на примете — пишите в комментарии
Material Design Components
Неплохой сборник компонентов, но подглючивает
https://play.google.com/store/apps/details?id=io.materialdesign.catalog
Гайды Материал
Material 2. Старые гайды, актуально будет ещё лет 5, люди медленно переходят на новые андроиды https://material.io/design
Material 3. новые компоненты, новый дизайн, другая философия. Гугл добавляет персонализации и выглядит современнее
https://m3.material.io/
Google Play
Material Design Components - Apps on Google Play
This Components are interactive building blocks for creating a user interface.
Сначала к психотерапевту, потом к работодателю
Бывает дизайнер, когда выгоряет, первым делом идёт просить совета у работодателя. Что ему делать? Другие задачи? Уходить? Работать на 2 часа меньше? Работодатель не психотерапевт, он не знает что в голове у дизайнера. Может, дизайнер перфекционист или взял слишком много, а может закончился запал или не хватвет похвалы. Работодатель может помочь, предложить творческий отпуск или сменить род деятельности. Но, даже если это поможет, он уже не сможет относиться непредвзято. Дизайнеру уже могут не доверить важную задачу: вдруг не справится, хандра на катит, а задача важная. Работодатель может даже не отдавать отчёта в том, что в голове появитля ярлык ненадёжности. Но это хороший исход, а если не поможет?
Прежде, всего — идём к психотерапевту и разбираемся в себе. Узнаём почему выгораем или почему депрессия. Что делать? Какой план? Вот когда вы с психотерапевтом договорились, что нужно что-то менять в работе — идти и договариваться о новых условиях с работодателем.
Бывает дизайнер, когда выгоряет, первым делом идёт просить совета у работодателя. Что ему делать? Другие задачи? Уходить? Работать на 2 часа меньше? Работодатель не психотерапевт, он не знает что в голове у дизайнера. Может, дизайнер перфекционист или взял слишком много, а может закончился запал или не хватвет похвалы. Работодатель может помочь, предложить творческий отпуск или сменить род деятельности. Но, даже если это поможет, он уже не сможет относиться непредвзято. Дизайнеру уже могут не доверить важную задачу: вдруг не справится, хандра на катит, а задача важная. Работодатель может даже не отдавать отчёта в том, что в голове появитля ярлык ненадёжности. Но это хороший исход, а если не поможет?
Прежде, всего — идём к психотерапевту и разбираемся в себе. Узнаём почему выгораем или почему депрессия. Что делать? Какой план? Вот когда вы с психотерапевтом договорились, что нужно что-то менять в работе — идти и договариваться о новых условиях с работодателем.
👍7👎1
Как быть увереннее в тексте
Раньше я постоянно разбавлял текст своей неуверенностью, когда обсуждал свою работу. Постоянно вставлял слова «думаю, что», «мне кажется», «по моему мнению», «возможно», «может быть стоит». Будто пытался спрятать свои идеи под словестный мусор, чтобы сильно не били. Оно и логично: идеи лишь гипотезы. Нет уверенности, что они на 100% сработают. Но фишка в том, что в продукте ни у кого нет такой уверености. Даже если 300 раз протестировать прототип, решение всё равно может не залететь, потому, что изначально ошиблись с целевой аудиторией. Тестирование лишь повышает шансы на успех.
Все люди высказывают гипотезы с точки зрения своего опыта и фактов, которыми владеют. А раз так, то зачем все эти лишние слова? Итак ясно, что это мнение конкретного человека. Есть лайфхак:
Пиши текст как привык, а потом удаляй неуверенный мусор.
Так текст станет яснее, короче, а я человек будет звучать как уверенный профессионал. Ведь он и правда всё продумал, зачем эта мишура?
❌ Может быть стоит оставить только кнопку входа через Эппл? Мне кажется, что так мы быстрее запустимся и соберём обратную связь.
✅ Давайте оставим только кнопку входа через Эппл. Так мы быстрее запустимся и соберём обратную связь
Раньше я постоянно разбавлял текст своей неуверенностью, когда обсуждал свою работу. Постоянно вставлял слова «думаю, что», «мне кажется», «по моему мнению», «возможно», «может быть стоит». Будто пытался спрятать свои идеи под словестный мусор, чтобы сильно не били. Оно и логично: идеи лишь гипотезы. Нет уверенности, что они на 100% сработают. Но фишка в том, что в продукте ни у кого нет такой уверености. Даже если 300 раз протестировать прототип, решение всё равно может не залететь, потому, что изначально ошиблись с целевой аудиторией. Тестирование лишь повышает шансы на успех.
Все люди высказывают гипотезы с точки зрения своего опыта и фактов, которыми владеют. А раз так, то зачем все эти лишние слова? Итак ясно, что это мнение конкретного человека. Есть лайфхак:
Пиши текст как привык, а потом удаляй неуверенный мусор.
Так текст станет яснее, короче, а я человек будет звучать как уверенный профессионал. Ведь он и правда всё продумал, зачем эта мишура?
❌ Может быть стоит оставить только кнопку входа через Эппл? Мне кажется, что так мы быстрее запустимся и соберём обратную связь.
✅ Давайте оставим только кнопку входа через Эппл. Так мы быстрее запустимся и соберём обратную связь
👍11