Лого vc.ru

14 советов дизайнеру: Как подготовить макет для верстки

14 советов дизайнеру: Как подготовить макет для верстки

Мария Терешкова, арт-директор российской компании-разработчика мобильных приложений InfoShell, написала для ЦП колонку о том, как дизайнеру подготовить макет для верстки, чтобы избежать лишних вопросов и конфликтов с разработчиками.

Поделиться

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

Первые почти в каждом проекте утыкались в «грязные» psd-файлы, кривую нарезку, а порой и в полное непонимание дизайнерами специфики верстки. Вторые же часто приходили в свирепый рёв от того, что в конечном счете сверстанный интерфейс даже близко не был похож на отданный в работу дизайн.

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

Я кратко приведу 14 «золотых» правил хорошего дизайна, выработанных мною за эти годы, на примере одного из наших мобильных приложений.

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

2. Для интерфейсов iOS — соблюдайте кратность всех расстояний и элементов для @3x (для этого рекомендуется работать по сетке в 6 пикселей). Для интерфейсов Android — соблюдайте кратность всех расстояний и элементов для XXXHdpi (для этого рекомендуется работать по сетке в 12 пикселей).

3. Комфортная область кликабельных элементов должна составлять не менее 44x44 пикселей.

4. Не забывайте о правиле «большого пальца»: приложение должно иметь возможность управления экраном только за счет большого пальца руки, в которой находится телефон.

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

6. Не злоупотребляйте количеством цветов интерфейса и размеров шрифтов. Обычно для создания одной темы оформления хорошего дизайна достаточно всего трех - пяти цветов. Не стоит и злоупотреблять большим количеством разных размеров шрифта. Порой достаточно всего четырех: крупные заголовки, заголовки, текст контента и дополнительный мелкий текст.

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

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

9. Предоставьте screenflow (навигационная схема по экранам).

10. Соблюдайте порядок в psd-файлах. Разберите все аккуратно по папкам, при этом избегая глубоких иерархий и скрытых папок внутри папок. Подпишите слои, не теряйте логику расположения элементов. Проверьте наличие всех состояний кликабельных элементов (active, hover и так далее). В панели слоев цветами стоит помечать наиболее важные элементы или элементы действий.

Не стоит закрашивать все цветами, иначе ваш psd-файл превратится в радугу, на которой будет тяжело сфокусировать взгляд и найти нужные детали интерфейса. Если вы используете эффекты наложения слоев или самого слоя, то лучше склейте их или переведите в smart-объекты. Разные версии Photoshop, и тем более другой софт, могут сыграть против вас и не отобразить данные эффекты.

11. Покажите анимацию работы интерфейса, если она требуется по вашей задумке.

12. Приложите архив всех размеров иконки приложения для устройств и магазина.

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

14. Для сайтов: не забывайте про 404 страницу и favicon, адаптивную верстку и экраны устройств повышенной плотности пикселей на дюйм (для последнего необходимо просто предоставить элементы интерфейса более высокого качества или, по возможности, перевести их в масштабируемый svg-формат).

Популярные статьи
Показать еще
Комментарии отсортированы
как обычно по времени по популярности

Забыли в конце: Выделить достаточно времени на доведение верстки к макету, сидя рядом с разработчиком.

Даже если все условия выше выполнены.

Я бы еще добавил "не используйте 3123124124 кастомных шрифтов"
Я тут недавно получил макет лендинга на руки, дак там юзается около семи разных шрифтов (естественно речь идет об отдельно подгружаемых шрифтах), причем два шрифта я нашел буквально вчера. Не удивлюсь если сегодня я найду ЕЩЕ один шрифт. Причем юзеры от этого существенно страдают.

Да, действительно, упустила этот момент))

0

Из заголовка непонятно, что речь именно о мобильной разработке. А в целом хорошо. Спасибо.

medium.com/@sergeyminkin/psd-8c4073155f7d вот тоже полезная статья про псдшки, чуть более подробная и которую дизайнеры друг другу рекомендуют

для андроида никто не делает ldpi, необязательно, там с mdpi отлично преобразовывается) только если нужен жесткий пиксель перфект, конечно

хотя актуально и про другие разрешения тоже, некоторые элементы у приложений гугла только в xxhdpi, например :D

Ребята, вот у меня есть отличный гайд до дизайну для iOS iosdesign.ivomynttinen.com/

Есть у кого-то такой же практичный и для Android?
В инете везде много воды, а нужная именно конкретика как в примере :)

Это все хорошо, но я не могу найти конкретных разрешений экранов под которые надо рисовать :(

0

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

Я рисую под 1080х1920. Есть проблема в том что у гугла все размеры в dp/sp, но эту проблему можно решить можно при помощи этой тулзы - angrytools.com/android/pixelcalc/
Ставишь xxhdpi(1080x1920) и конвертишь. Еще удобно для этого разрешения 24px сетку использовать - все по гайдам становиться.

спасибо, очень пригодится...

0

Пиктограммы лучше держать в SVG-спрайтах, а не шрифтом. Преимуществ больше, недостаток один — ИЕ.

А лучше использовать готовые наборы иконок. Например, наши Evil Icons: evil-icons.io

так почему ИЕ недостаток?
для 8ого ие костыль, да его доля не так уж высока.

"Для приложений: создайте шрифт с svg-иконками интерфейса"

причем тут ИЕ, когда речь о приложениях?)

Веб-приложения тоже приложения.

0

Маша, вы правы. Подумал, что коммент прочтут и дизайнеры веб-приложений, решил упомянуть.

Хорошая статья. Все по делу.

0

А не подскажите какую-нибудь литературку, для человека, который только начинает свое знакомство с веб-дизайном?

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

Есть дизайнеры, сами создающие svg-шрифты? o_O

0

glyphter.com/ чтоб создать свой svg шрифт

0

Где создавать то я знаю)
Моя мысль в том, что обычно эта работа ложится на верстальщика.

0

Спасибо за материал. Нужная штука.

0

glyphter.com/ чтоб создать свой svg шрифт

0

Возможность комментирования статьи доступна только в первые две недели после публикации.

Сейчас обсуждают
Дмитрий Кубитский
kotobotov.ru

аукцион нужно проводит, кто меньше всего затребует за свою "любовь" тот и получит бабки, остальные не получат ничего.

Бывший глава Google затруднился ответить на один из традиционных вопросов компании на собеседованиях
0
Ilyes Garif

кому нужно? и для чего?

«Добро пожаловать в 2030 год»: член датского парламента о счастливой жизни без приватности и личных вещей
0
Artem Agafonov

Аудитория у поисковиков разная. Это примерно как аудитория Одноклассников и Фейсбука.

«Клиенты хотят, чтобы агентство отвечало за прибыль»: что такое performance-маркетинг и как с ним работать
0
Yury Molodtsov

То есть вы еще и с Analytics и Метрикой все успели перепутать?)

«Яндекс» создал платный поисковик информации для бизнеса
0
Антон Лапшин
МИЛИ

а я давно уже говорю, что киберпанк наступил, только не все это ещё приняли

«Добро пожаловать в 2030 год»: член датского парламента о счастливой жизни без приватности и личных вещей
0
Показать еще