Открыть список
Как стать автором
Обновить

Комментарии 34

Circe хороший шрифт и популярность его растёт, хотя лично мне кажется сомнительным его применение на экране в мелких кеглях.

Но я другое хотел узнать — а «команда маркетологов» точно в курсе, сколько он стоит?
Безусловно, право на коммерческое использование у Viline есть!
Вы всё-таки уточните :) Пусть почитают полную лицензию Paratype, все её условия и подсчитают полную стоимость и офигеют.
мне показалось за ними стоят надёжные финансовые силы. сейчас подобные ресурсы без денежных выливаний запускать смысла нет в принципе, на мой взгляд…
Дело не в этом. Многие нарушают лицензии не по умыслу, а просто по незнанию, потому что полные условия неочевидны для людей не в теме. Если просто зайти на сайт и посмотреть цену — она будет соответствовать действительности только в малом проценте случаев. В остальных её нужно будет умножать в разы а то и десятки раз. Лично мне такие цены кажется неадекватными.

'выливаний' — мощно, оценил.
делов то, 13200 рублей стоит пак из 6 шрифтов, для нормальной компании это мелочи.
Вот-вот-вот! :) Ещё один человек, который не читал лицензию, а посмотрел рекламный ценник (который следует читать как «от X рублей»).
Circle весит под 400кб за один тип. А таких нужно использовать минимум 2, тонкий и жирный (дополнительные на усмотрение). Это же заставляет людей скачивать аж лишний мегабайт… два.

Учитывая наличие огромного количества фотографий… Жестокие вы люди.
Посмотрел сейчас у них на сайте — каждое начертание в формате woff около 160 кб. Если бы был woff2, было бы вероятно в районе 130 кб. Это больше среднего по больнице, но все же не 400.
Извините, может и так. Глянул просто на .otf файлы зачем-то :)
+1 вам за внимательность!
В макетах вы указываете отступы и другие растояния в пикселях.
Интересно узнать ваше мнение в свете 4К мониторов. Насколько актуально использовать жесткую привязку к пикселям при верстке? Есть ли смысл переходить на использование пунктов или другой отностительной единицы?
возможно это сильно бы усложнило масштабируемость интерфейса. тогда надо высоту и отступы всех элементов переводить в pt/sp и задавать между ними корректные пропорции и соотношения, чтобы и шрифты и элементы масштабировались параллельно
А смысл в этих pt/sp?
— нарисовали расстояние 10px в макете
— верстальщик сверстал 10px (если нет текста рядом, чтоб пересчитать в em)
— на экранах с плотностью 1:1 — будут в результате те же 10 физических px, на экранах двойной плотности — 20 физических px и т. д. (не смотря на то, что верстальщик указал 10 css px).
CSS-пиксели уже давно отвязаны от физических пикселей экрана — это виртуальная единица (хотя они и совпадают в некоторых частных случаях).
imho: Google не та компания, которая заслуживает того, чтобы к ней серьёзно прислушивались в вопросах дизайна, ибо ничем не заслужила такое право. Доминирующие положения на разных рынках ничего не меняет.
imho: они совершенствуются в данном вопросе, развиваются. это чувствуется, а дальше увидим

Какая-то безумная каша из адаптированных к тач-взаимодействиям и чисто мышиных контролов… Вы тут про популярность айфонов у молодых мамаш пишите, и тут-же предлагаете им попадать наманикюренными пальцами в микроскопические чекбоксы и текстовые ссылки… Всюду ховеры (это для айфонов то!), невнятные тоскливые контрасты… Радиусы скруглений, несмотря на все пожелания маркетологов, должны отличатся у контейнеров и содержимого… "Лорем ипсум" — это, конечно, дурной тон, а вот "Вся информация носит ознакомительный характер" — это уже совсем другой уровень, верно? В целом — весьма посредственная работа, совершенно не понятно чем тут хвастаться.

Вам полегчало?
Ну так напишите свой кейс про то как гайдлайны разрабатываете, сделайте это лучше чем я, расскажите секреты свои! А я с интересом поучусь у коллеги, чей опыт обширнее. Слабо? А камень бросить — это всегда очень просто…

Простите если задел, серьезно. Но Хабр — это не личный бложек и не ваша рекламная страничка с портфолио. Тут принято делиться чем-то полезным. В данном же случае я вижу пример того, как делать НЕ надо. А именно:


  • В современных адаптивных интерфейсах никаких ховеров быть не должно. Догадываетесь почему?
  • Шрифт Circe — ужасный выбор для набора блоков текста. Для заголовков — может быть, но тоже "не фонтан". И это не вкусовщина, его просто мучительно читать, такая уж у него структура символов.
  • У всех активных элементов должна быть очевидная "область контакта", достаточная по размеру для попадания в нее пальцем средней толщины. Это не касается только гиперссылок, но таковые могут иметь место только внутри текстовых блоков (как часть текста) и они не должны являться частью основной навигации (использовать на крайний случай, с пинч-ту-зумом).
  • Ваш визуальный язык общения с пользователем, по возможности, не должен содержать синонимов (минимализм рулит). Не стоит заставлять пользователя изучать разные виды контролов, которые делают одно и то-же — от этого интерфейс кажется сложнее чем он есть на самом деле (а мамаш легко напугать сложным интерфейсом, поверьте). Выберите что-то одно. К примеру, либо чекбоксы, либо тогглеры. У переключателей "on/off" есть своя специфика взаимоотношений с их лейблами, это довольно капризный элемент, без особой необходимости лучше его вообще не использовать.
  • Как будут выглядеть карточки, если "Имя" с "Фамилией" на них разрастается на две строки, а заголовок — на три? Такие карточки вообще работают только на статичном макете, в реальности они станут проблемой при подборе иллюстраций (замучаетесь кадрировать) и текст на них будет обрываться на самом неприличном месте (для выравнивания по высоте).
  • Чередование однопиксельных рамок со скругленными краями и с прямыми — выглядит беспорядочно.
  • Понимаю, что цвета подбирали не вы, но UX-дизайнер должен отстаивать принципы, а именно — достаточный уровень контрастов (минимальный и максимальный).
  • Таблицы без вертикальных разделителей ячеек должны иметь большие отступы между ячейками, поэтому их трудно сделать компактными и поэтому лучше так вообще не делать, если ячеек по горизонтали больше двух.
  • Помимо разрозненных UI-элементов в гайдлайне должны присутствовать принципы их взаимодействия: правила выбора элементов, построения тулбаров, группировки в блоки, вложенности блоков и т. д. Примеров выборочного применения шагов сетки для этого недостаточно. Почитайте гайды от ведущих вендоров: они все делают упор на это.
  • И нужно убрать все рамки и подчеркивания у элементов с заливкой на сером фоне, от них общая картина выглядит грязно. Если элемент без заливки — хорошо бы избавиться от прямых контактов серого с зеленым (болото и тоска). Так, при сохранении общей палитры, картинка будет куда аккуратнее.
«Имхо» забыли. Так что-нибудь из своего репертуара покажете?
PS: это прежде всего web гайдлайн, мобайл будет в следующих главах.
Реалии таковы, что зачастую веб просматривают на мобильных девайсах гораздо чаще.
Вы зря огрызаетесь на вполне конструктивную критику, гайды это конечно хорошо, но они делают работу лучше, чем она есть на самом деле. К сожалению, полностью согласен с автором выше
Добавлю немного:
  • Несбалансированные отступы (вертикальные/горизонтальные и внутренние/внешние).
  • Неединообразие в формах. Например, плейсхолдеры: «имя пользователя» и «введите пароль» (глагола нет/есть). И далее про глаголы: зарегистрироваться, войти (неопределенная форма) и тут же рядом введите пароль, войдите через соцсети (повелительное наклонение).
  • Пиксельные отступы (вот эти самые розовые кубики) бесполезны для верстальщика, потому что CSS не умеет откладывать расстояние от самого символа, а только от границ DOM-элемента.
  • Нездоровая тяга везде впихнуть хотя бы немножко MD, чаще всего неуместная.
Пиксельные отступы (вот эти самые розовые кубики) бесполезны для верстальщика
Тут наглядно видно что дизайнер не знает из чего состоит строка текста, отступ нужно делать с учётом интерлиньяжа.
Собственно из гайда вообще не ясно какими должны быть междустрочные интервалы.
Не соглашусь с вами. Вы выложили работу на публичный ресурс. Коллега отрецензировал вам её, пускай резковато, но по делу. А вы критику не можете принять спокойно и сразу отвечаете в лухе САМ ДУРАК. Непрофессионально. Не хотите слушать чудое мнение — не публикуйте. Хотели похвастаться — терпите и мотайте на ус. Вас за выподающие списки уже можно метёлкой наказывать. Ну и убило про то, что жегщины наши многоуважаемые, тем более МАМЫ молодые используют преимущественно Айфон. Откуда такая статистика? А можно как-то не в духе было придумывать а свой вариант который бы угождал пользователям всех платформ?

Уж очень напоминает старенький nvidia experiens

НЛО прилетело и опубликовало эту надпись здесь
Автор молодей! Хорошая статья.

Из личного опыта.
  • Обычно сначала составляем UI-kit — собирая в него все необходимые элементы (и для редакторов, т.к. все элементы всегда под рукой и для Axure для составления библиотек).
  • Далее анализируем от чего можно отказаться, что можно стандартизировать — на выходе получаем документ с перечнем всех изменений, правок и т.п..
  • Создаем (или правим существующий) гайд, где прописываем как какой элемент работает и его характеристики — это больше для дизайнеров. Соответственно для разработки можем из Axure выгрузить код.

Вообще, что для редакторов, что для Axure рекомендую юзать библиотеки — все всегда под рукой. Главное вовремя обновлять и актуализировать)
Раздел 2/15. Только у меня RGB(167, 167, 167) отображается зелёным цветом?
К шрифту Open Sans, который использовался в текущей версии сайта, у меня тоже возникали вопросы. Кажется, он всё реже встречается в повседневном мире.

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