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-формат).

0
28 комментариев
Популярные
По порядку
Написать комментарий...
Стас Непрокин

Полезно, спасибо.

Ответить
6
Развернуть ветку

Комментарий удален

Развернуть ветку

Комментарий удален

Развернуть ветку

Комментарий удален

Развернуть ветку

Комментарий удален

Развернуть ветку

Комментарий удален

Развернуть ветку

Комментарий удален

Развернуть ветку

Комментарий удален

Развернуть ветку
Alexey Novov

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

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

Ответить
6
Развернуть ветку
Anry Renie

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

Ответить
4
Развернуть ветку
Roman Shamin

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

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

Ответить
2
Развернуть ветку
Mariya Tereshkova

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

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

Ответить
1
Развернуть ветку
Roman Shamin

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

Ответить
1
Развернуть ветку
Alexander Madyankin

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

Ответить
0
Развернуть ветку
Mike Kosulin
Ответить
1
Развернуть ветку
Mike Kosulin

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

Ответить
1
Развернуть ветку
Nikolay Talanov

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

Ответить
3
Развернуть ветку
Mariya Tereshkova

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

Ответить
0
Развернуть ветку
Sergey Ivanov

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

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

Ответить
2
Развернуть ветку
A.Malchenko

Официальный от Google вполне исчерпывающ, как по мне http://www.google.com/design/spec/material-design/introduction.html

Ответить
2
Развернуть ветку
Sergey Ivanov

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

Ответить
0
Развернуть ветку
Mariya Tereshkova

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

Ответить
2
Развернуть ветку
A.Malchenko

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

Ответить
2
Развернуть ветку
Alexander Romanov

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

Ответить
2
Развернуть ветку
Alexander Romanov

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

Ответить
1
Развернуть ветку
Alexander Pesenka

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

Ответить
2
Развернуть ветку
Alexander Romanov

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

Ответить
1
Развернуть ветку
Denis Germanenko

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

Ответить
1
Развернуть ветку
Shamil Daniyalov

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

Ответить
0
Развернуть ветку
Robert Garmaza

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

Ответить
0
Развернуть ветку

Комментарий удален

Развернуть ветку

Комментарий удален

Развернуть ветку
Юрий Ковалёв

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

Ответить
0
Развернуть ветку
Zhanna Aksonova

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

Ответить
0
Развернуть ветку
Юрий Ковалёв

Где создавать то я знаю)

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

Ответить
0
Развернуть ветку
Maxim Nawak

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

Ответить
0
Развернуть ветку

Комментарий удален

Развернуть ветку
Zhanna Aksonova

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

Ответить
0
Развернуть ветку
Читать все 28 комментариев
Наша статистика – это ваши поддержка и доверие
Безуспешные попытки подарить другу Яндекс Станцию на День рождения

Краткая предыстория: наша компания друзей на 5 человек из разных городов, мы дружим, но 90% времени общаемся онлайн (нет мы не 14-летний фан клуб по Майнкрафту — все взрослые дядьки, кому третий десяток идет, а кому уже и четвертый).

Режим Хеджирования
Сервис массового аутсорса несложных задач «джунам»: в Skypro придумали решение проблемы дорогих разработчиков Статьи редакции

Бизнес сможет не тратить время и силы на поиск специалистов, а сервис — трудоустроить своих учеников.

Что такое аномалии фондового рынка
Эксклюзивные промокоды для читателей виси на скидки до 75%

Видео-редактор Supa.ru, бот для ведения личных финансов Мобс бот, приложение для запоминания иностранных слов MemoWord и еще 20 полезных сервисов от читателей для читателей.

Как я решил производить велопарковки для Австрии
Кейс Pirelli: переводим станки на человеческий язык
Первый инвестиционный TikTok сериал от «Открытие Инвестиции»

Не пропустите первый сезон взрывного инвестиционного сериала в TikTok! Вас ждут 10 коротких серий о неординарном молодом инвесторе по имени Паша Баблос!

Я готов месяц счищать снег с тротуара перед зданием ЦБ РФ в костюме жабы

Вот уже полгода мы подстраиваем свою работу под требования 259 федерального закона, чтобы создать полностью легальную криптоплощадку на территории РФ. Я потратил несколько миллионов долларов на разработку платформы, работу юристов и оценщиков.

Доллар на бирже превысил 79 рублей впервые с 2020 года, ЦБ остановил покупку иностранной валюты на неопределённый срок Статьи редакции

Что происходит 24 января: в падении рубля виновата геополитика, но ему могут помочь высокие цены на нефть.

null