Стек технологий взаимодействия дизайна и...
Post on 03-Mar-2017
23 views
TRANSCRIPT
Почему верстальщики не любят дизайнеров
или как сделать не только красиво, но и удобно
Работа команды online
Прототипы, исходники
Axure - прототипы
https://www.axure.com/
Invision - прототипы
https://www.invisionapp.com/
Zeplin - исходники
https://zeplin.io/
Avocode - исходники
https://avocode.com/
Логика работы сайта
PDF - сетка, переходы
● Облегчает понимание сетки, как перестраивается между разрешениями
● Нет необходимости отрисовывать все разрешения
● Дает возможность показать общую схему передвижения элементов
Video - анимации
● Красиво :)● Заставляет задуматься, а реально ли оно
так можно и нужно?● Нет недопонимания, всё наглядно
показано● Сразу видно не только “как должно”, но
и с какой скоростью и т.д.
UI-kit и все состояния
Одним из основных макетов должен быть ui-kit. Именно там собирается вся информация по кнопочкам/ссылочкам/иконочками. Обычное состояние, при наведении, при нажатии, меню при скролле…
Когда количество макетов переваливается за пару десятков, практически нереально отслеживать в каком именно макете был показан тот или иной ховер, вид кнопки.
Но это не значит, что все остальные страницы рисуются “как получится”, они должны соответствовать уи киту.
Ui-kit дисциплинирует и дизайнера, и верстальщика!
Ссылки на похожие проекты
Если уже есть готовое и верное решение, то зачем изобретать велосипед?
Аналитика блоков дизайна
Бизнес процессы
Подготовка макета
Иконки в svg (причем правильные)
Плюсы
● не зависит от разрешения● поддерживается во всех
современных браузерах● актуален в будущем (W3C
стандарт)● легко создавать и
редактировать● изменяется с помощью CSS & JS● поддается сжатию
Что сделать
● перевести текст в кривые● Перед тем как сделать экспорт,
необходимо проверить, все ли изображения находятся в целочисленной пиксельной сетке (то есть, например не 23.3px × 86.8px)
● разместить по сетке, убрать лишние точки
● удалить все ненужные перекрытия
Проверять в браузере
В конце концов, возьмите себе за привычку проверять, что в итоге у вас получилось.
Откройте иконку в браузере, увеличьте/уменьшите масштаб.
Иногда бывает очень больно смотреть на иконки :(
Нормальные шрифты
Сейчас редко встретится макет, где используются только стандартные шрифты. Часто это платные шрифты.
Разработчику должны они попадать уже в готовом виде. Конечно есть много сервисов, через которые можно прогнать шрифт и получить “что-то на выходе”.
Разработчик не должен разбираться, что тут не так. Что на разных устройствах шрифт показывается по-разному. А потом на это тратятся многие часы переговоров и доказывания, что это не мы не можем сделать по пиксель перфекту, а это шрифт пляшет, изменяется в размерах и тд.
Адекватные разрешения
Существует не так много стандартных разрешений, как для десктопа, так и для мобильных устройств и планшетов. Не нужно для веба рисовать баннер непонятных размеров, чтобы потом верстальщик физически не мог реализовать это.
Не забывайте, что помимо разрешения экрана существуют тулбары и сайт будет занимать не всю площадь экрана. Особенно это относится к страницам, которые встают в размер экрана.
Проверка на большие тексты
Не забывайте, что информация на сайте может изменяться.
Если вы нарисовали 10 товаров, то у этих 10 товаров должно быть описание с разным количеством строк.
Если сайт может быть на разных языках, то проверяйте, чтобы тексты на всех языках влезал в выделенный для него блок.
Имена могут быть не только Иван Иванов, но очень длинные с составными фамилиями и тд
Что касается файлов
● Нормальная структура и названия. Интуитивно понятная структура, названия файлов с указанием страницы и разрешения. РАЗРЕШЕНИЕ указывать то, где это должно быть показано!! Если вы делаете для разрешения 768 но в 2х, то в название 768 а не 1520.
● Все исходники: папки с иконками в svg, логотипы, шрифты и т.д.● Правильные версии файлов. Никаких main-copy● Название по-английски. главная страница.psd после разархивации на маке станет
???????.psd● Используйте zip. Rar не рулит )● Постоянная ссылка на исходники. Если выкладываются исходники в онлайн
хранилищах, не удаляйте ссылки до конца проекта, не плодите по 80 разных ссылок только из-за того, что добавилась новая страница
Что касается самого psd
● Layer 1, 2 - это не информативно. Называйте слои нормально, разделяйте по папкам, раскрашивайте папочки.
● Удаляйте ненужные слои. Если у вас скрыта нужная информация (попап) и пара десятков ненужных слоев, то разработчик не сможет найти необходимые слои.
● Все скрытые, но нужные моменты (попапы, всплывающее меню) выносите наверх. ● Создавайте библиотеки и используйте одни стили на всем сайте. Разнообразие из 10
черных цветов никому не нужны.● Все размеры должны быть указаны целым числом, а не 13,8. Это относится и к
размерам блоков, и к размеру кегля шрифта.
Дизайнеры!
Мы вас не всегда понимаем, но всё равно любим!
С уважением, .
Булавин Сергей
Телефон: +7 (917) 605-05-90
E-mail: [email protected]
https://www.facebook.com/murdoc3862