Структура идеального лэндинга Продающий сайт

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

Опубликовал: Realarts    Категория: Art-Блог / Дизайн
Дата: 27 февраля 2015, 17:10
Просмотров: 1157    Оценок: 3


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

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

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

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

14 «золотых» правил хорошего дизайна. На примере мобильного приложения.


1. НЕ ИГНОРИРУЙТЕ ГАЙДЫ
Не стоит без особой на то нужды усложнять жизнь пользователям и разработчикам, которые уже привыкли к логике и стандартам устройства, заданными ОС.

2. СОБЛЮДАЙТЕ КРАТНОСТЬ ВСЕХ РАССТОЯНИЙ И ЭЛЕМЕНТОВ
Для интерфейсов iOS — соблюдайте кратность всех расстояний и элементов для @3x (для этого рекомендуется работать по сетке в 6 пикселей). Для интерфейсов Android — соблюдайте кратность всех расстояний и элементов для XXXHdpi (для этого рекомендуется работать по сетке в 12 пикселей).

3. КОМФОРТНАЯ ОБЛАСТЬ
Комфортная область кликабельных элементов должна составлять не менее 44x44 пикселей.

4. ПРАВИЛО «БОЛЬШОГО ПАЛЬЦА»
Не забывайте о правиле «большого пальца»: приложение должно иметь возможность управления экраном только за счет большого пальца руки, в которой находится телефон.

5. РАЗМЕР ТЕКСТА
Не мельчите с размером текста, особенно при использовании нестандартного шрифта, который зачастую бывает мельче обычного.

6. КОЛИЧЕСТВО ЦВЕТОВ
Не злоупотребляйте количеством цветов интерфейса и размеров шрифтов. Обычно для создания одной темы оформления хорошего дизайна достаточно всего трех - пяти цветов. Не стоит и злоупотреблять большим количеством разных размеров шрифта. Порой достаточно всего четырех: крупные заголовки, заголовки, текст контента и дополнительный мелкий текст.

7. ДЕМОНСТРАЦИЯ СЕТКИ
Демонстрация сетки экрана необходима для ускорения верстки. Разработчикам будет достаточно посмотреть на этот файл, чтобы увидеть шрифты, цвета и размеры элементов, а также отступов между ними.

8. НАЛИЧИЕ ЭКРАНОВ ВСЕХ ДЕЙСТВИЙ
Не забывайте о состоянии ошибок, дополнительных окнах поиска, фильтрации, изменения фотографий и прочего. Убедитесь, что у вас есть ответ на любой кликабельный элемент и поведение интерфейса.

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

10. ПОРЯДОК В ФАЙЛАХ
Разберите все аккуратно по папкам, при этом избегая глубоких иерархий и скрытых папок внутри папок. Подпишите слои, не теряйте логику расположения элементов. Проверьте наличие всех состояний кликабельных элементов (active, hover и так далее). В панели слоев цветами стоит помечать наиболее важные элементы или элементы действий.

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

11. АНИМАЦИЯ РАБОТЫ ИНТЕРФЕЙСА
Покажите анимацию работы интерфейса, если она требуется по вашей задумке.

12. ИКОНКИ ПРИЛОЖЕНИЯ
Приложите архив всех размеров иконки приложения для устройств и магазина.

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

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

Примерно те же самые действия относятся и к разработке сайта, которые Вы создаете или программируете сами.скачать dle 10.3фильмы бесплатно
Источник
Похожие материалы: