Оффтоп Philipp Kontsarenko
31 637

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

#Интерфейсы #подготовка_макета #как_подготовить_макет #макет_для_верстки #советы_дизайнеру

{ "author_name": "Philipp Kontsarenko", "author_type": "editor", "tags": ["\u0441\u043e\u0432\u0435\u0442\u044b_\u0434\u0438\u0437\u0430\u0439\u043d\u0435\u0440\u0443","\u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u043a\u0430_\u043c\u0430\u043a\u0435\u0442\u0430","\u043c\u0430\u043a\u0435\u0442_\u0434\u043b\u044f_\u0432\u0435\u0440\u0441\u0442\u043a\u0438","\u043a\u0430\u043a_\u043f\u043e\u0434\u0433\u043e\u0442\u043e\u0432\u0438\u0442\u044c_\u043c\u0430\u043a\u0435\u0442","\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441\u044b","\u0434\u0438\u0437\u0430\u0439\u043d"], "comments": 28, "likes": 40, "favorites": 1, "is_advertisement": false, "subsite_label": "flood", "id": 6574, "is_wide": true }
00
дни
00
часы
00
мин
00
сек
(function(){ var banner = document.querySelector('.teaserSberbank'); var isAdsDisabled = document.querySelector('noad'); if (!isAdsDisabled){ var countdownTimer = null; var timerItem = document.querySelectorAll('[data-sber-timer]'); var seconds = parseInt('15388' + '59599') - now(); function now(){ return Math.round(new Date().getTime()/1000.0); } function timer() { var days = Math.floor(seconds / 24 / 60 / 60); var hoursLeft = Math.floor((seconds) - (days * 86400)); var hours = Math.floor(hoursLeft / 3600); var minutesLeft = Math.floor((hoursLeft) - (hours * 3600)); var minutes = Math.floor(minutesLeft / 60); var remainingSeconds = seconds % 60; if (days < 10) days = '0' + days; if (hours < 10) hours = '0' + hours; if (minutes < 10) minutes = '0' + minutes; if (remainingSeconds < 10) remainingSeconds = '0' + remainingSeconds; if (seconds <= 0) { clearInterval(countdownTimer); } else { timerItem[0].textContent = days; timerItem[1].textContent = hours; timerItem[2].textContent = minutes; timerItem[3].textContent = remainingSeconds; seconds -= 1; } } timer(); countdownTimer = setInterval(timer, 1000); } else { banner.style.display = 'none'; } })();
{ "id": 6574, "author_id": 4, "diff_limit": 1000, "urls": {"diff":"\/comments\/6574\/get","add":"\/comments\/6574\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/6574"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199791 }

28 комментариев 28 комм.

Популярные

По порядку

Написать комментарий...
6

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

Ответить

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

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

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

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

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

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

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

6

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

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

Ответить
4

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

Ответить
2

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

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

Ответить
1

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

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

Ответить
1

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

Ответить
0

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

Ответить
1

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

Ответить
3

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

Ответить
0

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

Ответить
2

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

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

Ответить
2

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

Ответить
0

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

Ответить
2

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

Ответить
2

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

Ответить
2

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

Ответить
1

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

Ответить
2

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

Ответить
1

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

Ответить
1

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

Ответить
0

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

Ответить
0

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

Ответить

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

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

0

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

Ответить
0

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

Ответить
0

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

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

Ответить
0

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

Ответить

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

0

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

Ответить
0

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Команда калифорнийского проекта
оказалась нейронной сетью
Подписаться на push-уведомления