8 ошибок веб-дизайнеров, от которых волосы встают дыбом

8 (499) 504-41-69 Услуги и цены Портфолио О компании Обучение Партнерам Блог Контакты 1PS.RU Блог Создание сайтов 8 ошибок веб-дизайнеров, от которых волосы встают дыбом 8 ошибок веб-дизайнеров, от которых волосы встают дыбом 5 мая 2020 Создание сайтов 1.2K 5 мин. 0 Прочесть позже Как правило, дизайнер и верстальщик работают в тандеме, ведь у них есть общая цель. Но бывают случаи, когда вместо дружбы и взаимопонимания возникает настоящая война. Если вы дизайнер, люто ненавидящий верстальщиков, и хотите знать, как превратить их жизнь в бесконечную череду боли и страданий, читайте дальше. Ни в коем случае не используйте сетки! Ох уж эти ваши Бутстрапы да вертикальные сетки и направляющие. Они заполонили всю планету и не оставляют никакого простора для творчества. Нет! Не будем настолько упрощать жизнь и ускорять работу верстальщикам, пусть помучаются, измеряя каждый элемент, кнопку и отступы. А если элемент шириной в 293 пикселя, а высотой 241 пиксель, просто замечательно. Хм, а как же отступы? Не проблема! Отступ слева – 9 пикселей, отступ снизу – 12 пикселей. Великолепно! пример макета без сетки Никакого единообразия Что у нас здесь? Ряд из трех однородных элементов? Хм, лучше всего будет сделать их максимально разными. Для начала они ни в коем случае не должны быть одинаковой ширины (и занимать по 4 колонки сетки, которую мы не используем). Ну а во втором ряду сделаем внутренний отступ сверху больше, чем у двух остальных. Идеально! пример вопиющего нарушения принципа единообразия Адаптивность Рисовать отдельные макеты для планшетной и мобильной версии не нужно (чаще всего и правда не нужно, нам, верстальщикам, проще и быстрее самостоятельно решить, как адаптировать ту или иную страницу под мобильные устройства, мы опытные), но если и делать это, то перетасовать элементы так, чтобы верстальщику пришлось писать дополнительные элементы для отображения только в мобильной версии. пример макета для планшетов пример макета для телефонов И давайте максимально усложним макет! Добавим элементам фигурные фоны, разместим элементы как попало, искривим их до неузнаваемости, пусть верстальщик посидит и подумает, как все это великолепие адаптировать под самые популярные разрешения экрана. Не прикладывайте шрифты Список «безопасных шрифтов» – не наша тема. Скудный GoogleFonts, где можно найти шрифты и цвет на любой вкус, тоже не удовлетворяет наших потребностей и мешает полету фантазии. Дайте возможность верстальщику пуститься в увлекательное путешествие по интернетам в поисках нестандартных шрифтов, скачивания их по отдельности и конвертации во все необходимые форматы. И не важно, что после конвертации и подключения шрифт может выглядеть не так, как в макете, просто искать нужно лучше. нестандартные шрифты Не используйте SVG Не нужен нам этот ваш SVG! У нас же есть PNG. А если все-таки используете, то пусть это будет «как бы» SVG! Особая дизайнерская магия легко и непринужденно превращает реальный SVG в SVG с PNG внутри: растровый элемент пытается мимикрировать под векторный Скопируем код, откроем в редакторе мимикрия не удалась Стайлгайд Не прикладывайте и никак не отражайте в макете то, как должны выглядеть те или иные элементы и их состояния при наведении/клике/фокусе. Верстальщик не только в состоянии сам подобрать нужные цвета, наложить тени, но и очень любит это делать. А если у него по какой-то причине не получится сделать это с первого раза, то во второй раз, когда получит задачу с правками клиента, подбирать будет тщательнее. И полюбит это дело еще больше. пример грамотного стайлгайда Pixel Perfect Пиксель влево, пиксель вправо – расстрел! Вкупе с элементами шириной в 293 пикселя, а высотой 241 пиксель и отступами в 9 и 12 пикселей эти два слова в ТЗ превратят день (а то и пару, которые будут потрачены на верстку этого великолепия) во всем известную субстанцию. Не изучайте верстку Вам это не нужно, вы же дизайнеры. Гель для душа, английский для начинающих, верстка для верстальщиков. А теперь серьезно Верстальщикам Частично решить созданные дизайнерами вышеобозначенные проблемы нам помогает приложение под названием Avocode. В нем намного проще измерять ширину и высоту элементов, а также отступы. Авокод генерирует свойства CSS для элементов, в том числе тени, интерлиньяж и градиенты. Он покажет, какие цвета и шрифты используются в макете, а также где эти шрифты можно найти. Всем верстальщикам, до сих пор использующим Photoshop для чтения макета, рекомендую прийти в сознание и скачать Авокод. А если вы перейдете на Avocode прямо сейчас, то тут же убедитесь, насколько комфортнее вам станет работать с макетами. Продвинутым верстальщикам, использующим препроцессоры, Авокод тоже сильно облегчит жизнь, предоставив возможность выбрать, в каком виде представлять сгенерированные свойства: SASS, LESS, Stylus. В общем, Avocode значительно упрощает и ускоряет верстку. окно сгенерированных свойств в Avocode Также всем верстальщикам рекомендую расширение для браузера под названием PerfectPixel. Он позволяет накладывать макет поверх страницы и здорово сокращает время верстки. Теперь не нужно высчитывать интерлиньяж и вертикальные отступы, с расширением PerfectPixel подогнать их – считанные секунды! идеально сверстанный благодаря PerfectPixel макет Дизайнерам Пожалуйста, примите к сведению прочитанное выше. Вы сильно упростите жизнь верстальщикам, если будете прикладывать шрифты к макету, рисовать состояния элементов, использовать сетки (в том числе вертикальные) и если забудете такое явление, как Pixel Perfect. И главное – не усложняйте макеты, подумайте, как сайт должен выглядеть на мобильных устройствах. А теперь самый важный совет: выучите верстку. Да, вы должны знать основы верстки, если называете себя веб-дизайнерами. Вам не нужно знать все, изучите блочную модель, позиционирование элементов и принцип работы циклов вывода элементов. Незнание основ верстки веб-дизайнерами – самая большая ошибка и самая распространенная причина увеличения количества ошибок в макетах. А также основная причина уменьшения количества нервных клеток у верстальщиков. Если знаний или опыта мало, есть какие-то вопросы, перед согласованием макета с клиентом покажите его верстальщикам. Всем будет лучше, и никто не пострадает. К счастью, в нашей компании разногласия дизайнера и специалистов по верстке случаются редко. Поэтому вы смело можете заказывать услуги, касающиеся оформления и размещения элементов/страниц на сайте. # верстка # создание сайта # дизайн © 1PS.RU, при полном или частичном копировании материала ссылка на первоисточник обязательна. Алексей Лиханов Веб-технолог сервиса 1PS.RU Понравилась статья? 8 1 Инфографика «Идеальный дизайн сайта: что указать в ТЗ для дизайнера, чтобы не возникло недомолвок» 6 обязательных условий, которые нужно прописать в ТЗ для дизайнера, чтобы получить макет мечты. Получить бонус Популярные статьи 12.7K 7 мин. 12 Примеры геймификации: 10 игр для вашего сайта Давайте поиграем? Да не во что, а с кем – с посетителями вашего сайта. Ведь они тоже люди и далеко не всегда такие серьезные, какими хотят казаться. Чем разбудить ребенка в своих пользователях и как увязать игру с контентом сайта – смотрите в статье. 22 ноября 2018Создание сайтов 9.2K 12 мин. 2 Форум или комментарии: что лучше для бизнеса? В статье разберемся, кому будет полезен форум на сайте, а кому хватит и обычных комментариев. А кому и вовсе всё это не надо (спойлер: таких мало). 27 апреля 2018Создание сайтов 159.7K 17 мин. 26 Сколько стоит создать сайт: сравниваем различные способы разработки Желаете создать сайт, но от ценника глаза лезут на лоб? Тогда эта статья для вас! Поможем понять принципы ценообразования разработки и определиться, к какому способу лежит душа и кошелек. 25 мая 2020Создание сайтов Все популярные статьи » Комментарии (0) Правила комментирования блога Поиск ТЕМЫ ТЕГИВсе статьи Кейсы (81) Продвижение, SEO (409) Создание сайтов (87) Интернет-реклама (144) Повышение продаж (86) Тексты и контент-маркетинг (120) SMM и SMO (74) SERM, крауд-маркетинг (39) Бизнес о бизнесе (21) Подкасты Проверить позиции сайта Адрес вашего сайта Запросы для проверки Например: рюкзак школьный рюкзак для девочки школьный ранец Регион для проверки Россия ЗАПУСТИТЬ ПРОВЕРКУ ПОСЛЕДНИЕ КОММЕНТАРИИ Jooker5 дней назад 21:20 Кончилась программа. Печалька... Как анализировать сайт с помощью «Сайт-аудитора»? Плюсы и минусы данной программы nycmoma26.08 10:32 Хорошая статья. Со всем сказанным согласен. Заодно хоть узнал, как называется вид продвижения, который несколько лет успешно практикую сам ) Мифы про крауд-маркетинг Ольга Анурьева25.08 04:01 Константин, здравствуйте! Насколько я знаю, нет. По крайней мере в бесплатной версии приложения такая фишка точно не предусмотрена. Как сделать красивое оформление бизнес-профиля в Инстаграм с приложением Canva Константин18.08 19:08 Здравствуйте, Ольга! Подскажите пожалуйста, возможно ли писать текст по дуге в Canva? Как сделать красивое оформление бизнес-профиля в Инстаграм с приложением Canva Оставить коммент к статье Летим с нами в ТОП Подписывайтесь на рассылку и получайте практические советы по продвижению сайта Ваш email Подписаться Нажимая на кнопку «Подписаться», вы соглашаетесь на обработку персональных данных Я уже с вами Услуги и цены Поисковое продвижение SEO-сопровождение Продвижение молодых сайтов Крауд-маркетинг Аудит сайта, аналитика SMM и SMO Реклама в соцсетях Продвижение в Инстаграм Реклама в Яндексе и Google Контент-маркетинг SEO-копирайтинг Регистрация в каталогах Работы по оптимизации Адаптация под мобильные SERM-сопровождение Создание сайта Способы оплаты Акции и бонусы Программа лояльности Партнерство Реклама на сайте Блог Обучающие курсы 1PS Полезно бизнесу Контакты Справка О компании Отзывы о нас Наши гарантии Правовая информация Условия предоставления услуг Портфолио Вакансии Оставляя свои личные данные, вы принимаете Соглашение о конфиденциальности Для повышения удобства сайта мы используем cookies. Оставаясь на сайте, вы соглашаетесь с политикой их применения. × © ООО «ВИНС», 1999-2020ИНН 3812080862 / ОГРН 1053812002034

Здравствуйте! Хотите создать сайт? Мы подберем Вам оптимальный вариант, просто укажите свои пожелания и контактные данные. Мы свяжемся с Вами в ближайшее время!

Обратная связь

Ваше сообщение было успешно отправлено

© 2006-2021. Создание сайтов недорого
Яндекс.Метрика


Мы свяжемся с Вами в ближайшее время!

Обратная связь

Ваше сообщение было успешно отправлено