Спасибо, многое прояснилось) Посоветуйте аналогичный материал по правильному расположению элементов на странице
Как-то все однобоко, типа «делайте так, а не так». Без учета контекста и так далее. Тут как бы большая часть заявлений далеко не аксиомы
так нигде и не сказано, что это аксиомы)
Это именно то что нужно, и написано так, как нужно для нас, разработчиков: с логичскими доводами )
Поправьте меня, матёрые UX-специалисты, но написанное выглядит как катастрофическая мешанина плохих практик и субъективщины:
1 — хотелось бы каких-нибудь аргументов «за»
2, 3 — очевидное
4 — убирание границ у текстового поля делает его похожим на кнопку.
5 — даже на приведенном скрине видно, что к уменьшенным значкам приходится присматриваться, отчего они теряют свою главную функцию — возможность найти элемент «на лету»
6 — вкусовщина
7 — ИМХО, ужасная практика делать элементы одинакового типа (2 кнопки) разными по дизайну. Как пользователь должен понять, что слово, парящее в воздухе — активный элемент? Плюс это усложняет прицеливание. Дурацкая мода, которой все стали слепо следовать после iOS 6
Я бы ещё по пункту 4.3 добавил, как же бесят эти тройные поля между секциями и двойной интерлиньяж, порождённые нездоровым стремлением впихать как можно «больше воздуха», из-за которых на экран в 6" не влезает банальное меню в 10 пунктов.
Я далек от UI/UX, но п1 кажется таким же очевидным. По крайней мере в статьях, длинных постах на форумах, ну т.е. в тексте. Для заголовков еще куда не шло, но посмотрите на эти увеличенные $17 за которыми идет обычный текст. Все остальное не так очевидно, но по крайней мере использовать разные шрифты в одной строке это… некрасиво.

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

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



Модальное окошко выглядит красиво, содержание тонким шрифтом, кнопочки жирным. Красота. Но как начинаешь работать с дизайном, который должен поддерживать русский язык начинаются проблемы, найти хороший шрифт с кириллицей практически невозможно, а те что есть, например, Open Sans уже заезженный. А без правильного шрифта и картинка уже не та.

Cuprum, PT Sans/Serif?
github.com/adobe-fonts/source-sans-pro/releases
это не улучшение дизайна а современные тенденции. Имхо тени почти не заметны, а поповоду кнопок, вторичная кнопка на странице может иметь 3 вид а при наведении на неё 2. Было бы интересно от автора почитать такое же по анимации элементов

Это гайд по Material Design, вернее, кусками и в сокращённом виде. Вообще дизайн это не та штука, которую можно выучить по одному мини-гайду.


А гайд этот… для дизайнера — ок, можем так, а можем не так.


А для разработчика может превратиться в сборник "вредных советов":


  • использование жирных шрифтов вместо больших — так и представляю себе, как заголовки варьируются normal, bold, extra bold, black… в одном размере — 11px. Да и грузить придется несколько начертаний вместо одного. Я бы советовал использовать любую стандартную сетку размеров.


  • тесты очень даже стоит набирать лёгким начертанием типа 300-400. Это красиво и используется очень часто.


  • тени… не надо просить разработчиков делать тени. Совсем. Пусть делают отличные плоские контролы.


  • линии в таблицах — бывают лишние, а бывают очень нужные. А иногда нужны еле заметные, но без них никак. Я бы скорее советовал делать тонкие малозаметные границы, чем никаких.


  • иконки должны быть нормальное читаемы беглым взглядом. Уменьшать их сильно нет смысла — проще тогда заменить на буллеты.

А вообще у разработчика не должна болеть голова от этих вопросов — вместо этого долга был стандартная библиотека минимально приличных контролов из какого-нибудь FreshUI или другого скетч-редактора.


Ребята, вы крутые, его оставьте дизайн дизайнерам. Представьте себе, как мы начинаем кодить на С# по такому мини-гайду...)

использование жирных шрифтов вместо больших — так и представляю себе, как заголовки варьируются normal, bold, extra bold, black… в одном размере — 11px.


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

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

А что там у Бутстрапа? Там по умолчанию 16px. И разный размер только у заголовков.

В начале статьи довольно чётко заявлена её цель и это не переквалификация разработчика в дизайнера. Цель её помочь сделать, например, прототип приложения более привлекательным для заказчика. Статья по мне очень полезная и, что главное, понятная для не дизайнеров. Обязательно сохраню и буду пользоваться данными советами.
а у вас нет готовой библиотеки контролов/стилей, которой можно было бы пользоваться и не задумываться об этом всем? ну, что-то типа Bootstrap?
Конечно есть. Но во-первых хочется как то выделить своё приложение среди однотипных бутстрап сайтов. А во-вторых знаний много не бывает — когда-нибудь пригодиться. Да и просто интересно было почитать про дизайн с такой точки зрения.
Очень хорошая статья, но здесь речь идет об интерфейсе приложения (пусть даже веб-приложения), а не о странице сайта: со статьей, с графиком, со списком. То есть как реализовать более тонкие вещи, чем окошко с информацией, здесь не написано.
Мне кажется, статья будет неполной без ссылки на проект авторов этой статьи — utility-first CSS framework tailwindcss.com

Я не рекомендовал бы следовать советам про контрасты: ребята, которые писали эти советы, не думали про доступность этого дизайна для людей с проблемами зрения. Это бросается в глаза с первых же примеров. Они не пройдут WCAG AA (не говоря уже про AAA).

Ну не надо повторять древних ошибок, не надо пытаться слепить воедино два совершенно разных направления…

Дизайнер делает свою работу. Разработчик делает свою работу. Ни одна из этих работ не проще и не сложнее другой. Равно как и ни одна из этих работ не может быть выполнена специалистами из другой сферы. Это совершенно разные сферы знаний и совершенно разные сферы компетенции, соответственно.
Сколько ни давай такие вот «попытки помочь» – не работает, это просто совершенно разные парадигмы профессионального мышления (за крайне редкими исключениями отдельных реально универсальных специалистов). Именно по признаку такого мышления – кто-то становится дизайнером, кто-то становится разработчиком, кто-то становится вообще каким-нибудь политиком, и так далее.

Все прочие варианты – лишь для тех клиентов, кто пытается сэкономить методом «семь шапок из одной шкурки», ИМХО…

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

Ещё бы сервис, который показывает плохой дизайн и как сделать его лучше

Хорошие правила, постараюсь их придерживаться. Данные правила уместны для любых style guide'ов или это больше применимо в Material Design?

Спасибо за статью, пригодится непременно)

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


ЗЫ Пост добавил в закладки. Спасибо

Как дизайнер я выстрадал эти правила за долгие годы проб и ошибок. Нереально полезная статья.
Спасибо за перевод, мне понравилось, со многим согласен.
Только полноправные пользователи могут оставлять комментарии.
Войдите, пожалуйста.