в каком формате нужно предоставлять сайт на выходе
В каких форматах должен отдаваться верстальщику дизайн макета сайта?
Оценить 5 комментариев
Приходилось работать тупо с jpg. Надо ли говорить, что много неудобств. Ни размер шрифта нормально посмотреть, ни какие-то графические элементы в отдельную картинку получить без наложения других элементов страницы.
Скорее всего говорят о таких сервисах типа https://zeplin.io/ На последнем проекте дизайнер в него выкладывал как дизайны страниц так и сборки например всех возможных стилей кнопок, инпутов. Все это шариться. Идея ок. Во многом удобно. Показывает размеры, цвета. Позволяет определенные элементы скачать в виде отдельного файла. Но было нужно измерить какое-то растояние которое сервис сам не показывает. И непонятно что делать. Бывало нужно было иконку сукачать и нужно было просить дизайнера чтоб он что-то там в настройках сделал чтоб иконка стала скачиваемым элементом. Короче есть минусы, но идея ок. И это не один такой сервис. Думаю через пару лет большинство через них работать и будет.
Мы с моим дизайнером работаем в Figma. Это веб приложение с очень удобными инструментами для дизайнера и супер удобным способом переносить дизайн на верстку. Бесплатная версия имеет весь функционал, ограничение по количеству проектов в 3, и история версий макета хранится месяц. За 700р все эти ограничения снимаются, но это нужно только дизайнеру. Так что первое время можно без каких либо ущемлений обходиться бесплатной версией.
Там есть комментарии, что очень удобно. Можно любой элемент прокомментировать или задать вопрос дизайнеру, верстальщику, клиенту. Снимать все данные для элементов очень удобно, можно даже просто через ПКМ скопировать готовые стили, если кому так удобнее. Всю работу можно смотреть в лайв режиме, видно курсоры других людей кто на данный момент в проекте, видно какой элемент им выделен и он с ним работает. Есть очень удобнонастраиваемая система адаптивных сеток.
В общем мы уже несколько заказов на этом сервисе сделали и нам очень нравится.
Еще удобны программы такие как Sketch (для мака) и Adobe Experience Design. Adobe XD еще в бета версии, но уже годная программа с отличным прототипированием и возможность показать дизайн в действии. И я думаю она в скором времени обгонит скетч по функционалу и будет более предпочтительным выбором.
А иллюстратор, корел дро, фотошоп это программы для рисования непосредственно графики, которую потом можно, и так нужно делать в принципе, перенести в программы для разработки дизайнов сайтов и мобильных приложений. И использование фотошопа и других программ для создание дизайнов это была вынужденная мера, потому что других вариантов не было. Сейчас их используют только из-за массовой привычки и нежелания узнать а какие современные инструменты для удобной и быстрой работы с дизайном и для дизайнера и для верстальщика и для демонстрации клиента существуют на сегодняшний день.
Правильный редизайн сайта — пошаговый алгоритм, основные вопросы и нюансы
Дизайн — работа творческая, поэтому не всегда результат работы можно предугадать и не всегда он может нас устроить. Поэтому главное, составить грамотное и понятное ТЗ.
Интернет изменяется буквально каждый день, поэтому всегда необходимо следить за актуальностью и удобством своих интернет ресурсов. Технологии, которые были популярными 5 лет назад, сегодня могут полностью утратить свою актуальность и ваш сайт, может быть (и будет) неудобным для ваших посетителей и клиентов, соответственно, вы каждый день будете терять потенциальную прибыль. В силу чего, каждый из предпринимателей рано или поздно придет к вопросу редизайна своего интернет-магазина или сайта услуг.
Основные вопросы при смене дизайна сайта
Еще до начало каких-либо работ, необходимо четко понять нужен ли вам редизайн сайта.
Рекомендую ответить на следующие вопросы:
Если у вашего интернет-магазина хорошие позиции по региону, естественно, никто не хочет их потерять, поэтому, рекомендую вам, при редизайне сайта четко придерживаться следующих основных рекомендаций:
Все это хорошо, но стоит понимать, что это все внутренние ссылки которые передают свой вес, то есть, по факту имеем, что с данной категории магазина добавилось 6-7 (смотря сколько статей в карусели) ссылок на статьи (которые продвигать нам не нужно). Также, этот блок добавляет нерелевантный контент нам на страницу, что не хорошо.
Подобных «новых» блоков может добавиться очень много, поэтому рекомендую некоторые из них ставить в теги noindex и ссылки в атрибут nofollow, это обезопасит ваш сайт от изменений в поиске. Подобным образом поступаем со всеми подобными блоками.
По истечению некоторого времени (1-2) недели, рекомендую начинать постепенно убирать проставленные теги и смотреть на позиции сайта. Это нам даст возможность «Откатить изменения» при смене позиций в нежелательную сторону.
Подготовка прототипа будущего дизайна сайта
Это самая важная и основная часть нашей работы, так как прототип это главное и основное ТЗ, которое мы вышлем нашему дизайнеру.
Мысли дизайнера и ваши никогда не совпадут, дизайнер будет думать одно, вы другое, далеко не факт, что вы найдете действительно профессионала, который сможет вам что-то посоветовать, к сожалению, из опыта, дизайнер просто выполнит работу по ТЗ и ни шагу в сторону, выполнит, как ему это удобно и как ему это больше нравиться. В итоге, мы получим посредственный дизайн, у которого, при наполнении контентом съедет верстка, так как дизайнер это не продумал, может не быть эффектов наведения, да и вообще можем получить не то что мы хотели.
Поэтому самое главное сформировать грамотное ТЗ, после которого ни у вас, ни у дизайнера не будет вопросов и мы получим то что хотим.
Выбор программы для создания прототипа
На сегодняшний день подобных программ и сервисов существует очень много, поэтому не рекомендую на этом заострять внимание, просто берем ту, которая бесплатная и в которой нам комфортно работать:
1. Gliffy
Бесплатная версия есть, можно пользоваться.
В каком формате лучше размещать документы на сайте?
Часто так случается, что на сайте необходимо разместить какой-либо документ. И тогда перед хорошим веб-мастером встаёт дилемма. Всё дело в том, что есть несколько разных вариантов и у каждого есть свои минусы и плюсы. А потому нужно разобраться, переводить ли текст из PDF в Word, а может, просто поместить статью в готовом виде без какого-либо файла. Следует отметить, что всего есть три возможных варианта:
Что следует выбрать?
Архив – это достаточно удобно. Он занимает мало места, человек сможет скачать его в любой момент без каких-либо проблем. Но поисковики просто не индексируют архивы, а потому сайт будет терять своих посетителей.
Если выкладывать документы в одном из форматов, то они пройдут индексацию и их можно будет найти в Google или Яндекс. Но дело в том, что пользователи получат прямой доступ к документу и будут миновать сайт, а это приводит к потере клиентов и снижению доходов от рекламы. Так что данный вариант также не предпочтителен.
А вот если перевести документ в полноценную страницу и разместить всю информацию текстом, то это будет наилучшим решением. Но если документ слишком большой, то пользователи просто не справятся с его копированием и попробуют отыскать его на другом сайте, а вы потеряете клиентов.
В итоге, небольшие документы лучше выкладывать именно как полноценную страницу сайта. Если файл умеренного размера, то лучше предложить прямую ссылку на него, разместив в одном из индексируемых форматов (PDF, RTF, DOC и т.д.). И только крупные документы можно заархивировать, но обязательно поместить ссылку на сайт внутри, в названии файла или в качестве пароля к архиву.
Бриф в графическом дизайне: главные вопросы, которые нужно обсудить с заказчиком
От языкового барьера страдают не только иностранцы, но и узкие специалисты. Разберёмся, как дизайнеру и владельцу бизнеса понять друг друга.
В студиях общение с заказчиками частично берут на себя менеджеры проектов, а вот фрилансеру нужно налаживать контакт с клиентами своими силами. Давайте рассмотрим главные вопросы, которые стоит обсудить до начала работы, и соберём из них шаблон рабочего брифа.
Чем занимается компания?
Вероятно, это основополагающий вопрос. Если речь идёт о продуктовом магазине или парикмахерской, сфера деятельности понятна любому дизайнеру хотя бы на бытовом уровне. Но если клиент занимается изготовлением металлоконструкций или торгует кондитерским оборудованием, нужны детали, чтобы вникнуть в работу компании.
Сильнее всего проблема заметна в B2B. Специфика работы этих фирм не всегда знакома сторонним людям (и дизайнерам в частности), а вот реклама или логотип должны быть понятны специалистам в отрасли. Неверно понимая деятельность компании, можно допустить фактические ошибки в выборе визуальных решений.
Но даже если работа клиента кажется простой и понятной, есть смысл узнать больше подробностей. Чем глубже дизайнер понимает сферу деятельности бизнеса, тем больше возможностей для творчества. Можно сделать акцент на нюансах работы или найти интересные метафоры.
Итак, первый вопрос для брифа:
1. Чем занимается компания?
Пишущий дизайнер. Пришла в профессию, получив второе образование, ранее занималась когнитивными исследованиями, SMM и копирайтингом. Пишет о визуальных трендах, делится наблюдениями из отрасли и техническими лайфхаками.
Кто конкуренты и чем от них отличается заказчик?
Знать основных конкурентов и УТП продукта тоже весьма полезно. Обычно фирменный стиль и рекламу стараются сделать отличными от конкурентных компаний, чтобы выделиться. И именно уникальные преимущества бренда стоит отражать в дизайне — чтобы выделиться и запомниться среди конкурентов.
Уникальное торговое предложение – характеристика продукта или бренда, которая отличает его от конкурентов и определяет стратегию продвижения.
А иногда конкурентная борьба даже становится поводом для креатива:
Ещё пара вопросов, как обещали:
2. Укажите названия брендов-конкурентов.
3. Чем ваш продукт отличается от конкурентов, какое у него УТП?
Кто целевая аудитория и какая она?
Пенсионеры вряд ли проникнутся доверием к логотипу TikTok, а подростки не оценят фирменный стиль «Почта Банка». Дизайн во многом субъективен, он не будет нравиться всем; надо понять, кому он должен понравиться в первую очередь.
Описание целевой аудитории включает в себя возраст людей, образование, семейное положение, род занятий и доход. Вы сможете понять, кто эти люди, куда они ходят, с дизайном каких брендов взаимодействуют. Это будет подспорьем в работе.
Вопрос для вашего брифа:
4. Опишите, пожалуйста, свою целевую аудиторию: что это за люди, какие у них есть особенности и предпочтения.
Какие задачи должен решать дизайн?
Если клиент сам не понимает, для чего ему нужен новый логотип или баннер на сайте, угодить ему будет практически невозможно. Поэтому важно проговорить с заказчиком задачи дизайна.
Если задача рекламы в большинстве случаев — продать конкретные товары в определённый срок, то с фирменным стилем всё сложнее. Вот самые популярные причины, которые побуждают заказывать разработку айдентики :
Фирменный стиль от англ. identity — идентичность.
Список можно продолжать до бесконечности. Но лучше не гадать, а спросить напрямую у заказчика.
И наш следующий вопрос:
5. Какие задачи вы хотите решить с помощью дизайна?
Как сам клиент видит дизайн?
Некоторые клиенты не имеют чёткого представления, каким должен получиться дизайн, и предпочитают полностью довериться специалисту. Иногда это оправданный ход, но нередко с такими заказчиками работать труднее: если у них нет конкретных ожиданий, невозможно предсказать, какой результат им понравится. К счастью, большинство клиентов рады сформулировать свои пожелания — сами или с помощью наводящих вопросов.
Бесшовный узор, состоящий из повторяющихся элементов.
Чтобы лучше понять заказчика, можно показать ему несколько чужих логотипов, элементов айдентики или рекламных креативов, отличающихся по стилистике, и попросить их оценить. Также на этапе обсуждения полезно использовать мудборды — коллажи из картинок, демонстрирующие цветовую гамму и настроение проекта. На основе предпочтений клиента можно составить несколько таких коллажей и более точно определить вектор работы.
Чтобы узнать предпочтения клиента, надо задать сразу несколько вопросов:
6. В каком стиле вы хотите дизайн?
7. Какие образы вы хотите использовать?
8. Какая цветовая гамма предпочтительна?
9. Какие шрифты подходят вашему бренду?
В каком виде представить результат работы?
Возможно, вы решите презентовать элементы фирменного стиля в отдельных файлах pdf, а клиент ожидал получить полноценный брендбук. Или вы отправите дизайн-макет афиши под печать, а заказчик хотел, чтобы вы сделали мокап и показали, как плакат будет смотреться на его двери.
Часто фрилансеры до получения оплаты предпочитают показывать новым клиентам исключительно файлы jpeg в небольшом размере, чтобы обезопасить себя от кражи интеллектуальной собственности. Конечно, это сомнительная мера, ведь самое ценное в дизайне — концепция. Но презентация в jpeg как минимум спасёт от прямого воровства конкретно вашего макета. Если вы готовы согласовывать работу только в таком формате, это тоже лучше заранее обсудить с клиентом.
Возьмем отсюда ещё пару вопросов:
10. В каком формате подготовить для вас готовые макеты?
11. Согласны ли вы получить макеты в полном размере после оплаты заказа?
Сколько текста будет на макете?
Это очень важный пункт. Многие клиенты этого не понимают: предлагают начинать работу над макетом этикеток или рекламных листовок, просто оставив для текста несколько пустых строчек. Соглашаться на это нежелательно: велик риск, что работу придётся переделывать. Текст — часть дизайна, и вписать его в готовый макет крайне трудно по двум причинам.
1. Текст может не уместиться
Представим, что вы делаете дизайн совсем маленькой упаковки, наподобие спичечного коробка, и клиент просит оставить для текста три строчки. После согласования макета выясняется, что клиент хочет вместить туда текст на пять строк.
Это несложно сделать на мониторе, просто уменьшив кегль, но после печати в реальном размере прочитать текст будет невозможно. Придется двигать все элементы на макете, чтобы выделить больше места для текста, — но это будет уже совсем другой дизайн, который заново придётся согласовывать с заказчиком. И опять переделывать, если ему что-то не понравится. За это время заказчик может захотеть как-нибудь ещё изменить текст, и работа растянется на неопределённый срок.
Проблема особенно остро касается маленьких носителей. Но столкнуться с ней можно и в иных ситуациях: например, если все элементы на макете расположены очень плотно, а для текста отведена ограниченная площадка.
2. Текст может не вписаться в композицию
Работа с типографикой — это одна из задач дизайнера как при вёрстке буклетов в несколько страниц сплошного текста, так и при дизайне рекламного баннера или логотипа, в которых текст занимает одну-две строчки. Текст должен быть нужного размера, нужного цвета и занимать на макете уютное местечко.
Если бы в этот макет попросили добавить ещё несколько строк, пришлось бы просто начинать заново, потому что в этом подходящего места нет. А если бы клиент изначально не дал никакого текста, дизайн просто не мог бы быть реализован, потому что размещение надписей играет тут ключевую роль.
Нам нужно попросить заказчика предоставить текст для макета и согласовать его структуру:
12. Укажите, пожалуйста, текст, который будет использован на макете.
13. Укажите желаемое размещение текста или порядок текстовых блоков.
На каких носителях будут использовать дизайн?
Важно выяснить точные размеры, форму носителей, а желательно ещё и тип бумаги/материала, которые будут использованы. Если клиент просто присылал размеры нужных макетов единым списком, этого может быть недостаточно.
Например, если делать этикетку на гранёную баночку, о её шести гранях непременно надо знать. Зная только ширину и высоту макета, есть вероятность сделать слишком длинные строки текста, которые не будут читаться с одного ракурса. А для читаемости макет нужно также разделить на грани.
Такие нюансы важны для любых носителей. При дизайне сувенирного значка необходимо знать, плоский он или скруглённый. При дизайне пакета нужно уточнить, будет ли он из белой бумаги, крафта или прозрачной плёнки — потому что чисто-белые участки макета на крафте станут коричневыми, а на плёнке прозрачными. Если заказчик ещё не определился с носителями, стоит решить вместе с ним и упомянуть, что в других вариантах дизайн может измениться до неузнаваемости.
Крафтовая бумага, из которой могут делать упаковки, пакеты и так далее.
Вот наши следующие вопросы:
14. Приведите список носителей, для которых будет разработан дизайн.
15. Укажите, пожалуйста, для каждого из них точный размер, тип носителя и материал, из которого он изготовлен.
Сколько финальных вариантов требуется?
Нет единого правила, сколько готовых вариантов показывать заказчику. Возможно, дизайнер планирует сделать три или и вовсе один, а клиент рассчитывал на пять. Обычно это заранее обговаривается, но почти каждый дизайнер в своей жизни сталкивался с клиентами, которым понравилось что-то из предложенного, но они просят подумать над другими вариантами «на всякий случай».
Такая работа не всегда выгодна. Более того, в огромном количестве разрозненных концепций нет ничего хорошего: скорее всего, заказчик окончательно запутается в том, что ему нужно. Поэтому есть смысл показывать меньше вариантов, но более детально их прорабатывать, основываясь на подробном брифе.
Новый вопрос для брифа:
16. Согласны ли вы получить N готовых вариантов дизайна на выбор?
Каковы сроки и бюджет?
Это важно обсудить, чтобы потом избежать взаимных претензий. Здесь нужно выяснить пять вещей:
Вот последние вопросы для вашего брифа:
17. Когда вы готовы согласовать концепцию и эскизы?
18. Когда вы хотите получить готовые макеты?
19. Когда вы готовы внести предоплату и оплатить заказ полностью?
20. Готовы ли вы дополнительно оплачивать работу с правками?
Заключение
Проводить брифинг с заказчиком перед началом работы нужно со всей серьёзностью.
У вас может возникнуть иллюзия, что вопросы банальные, а ответы на них очевидны. Мол, вот же, есть закусочная, в целевой аудитории люди от 15 до 115 лет, и нужно сделать дизайн фартуков официантам — всё и так понятно. Но здесь масса нюансов. Что продают в закусочной? Какая там атмосфера? Какие именно люди туда ходят? И, наконец, какой формы будут фартуки? От знания всех этих деталей будет зависеть качество дизайна.
В итоге мы собрали примерный шаблон брифа: в него вошли все пункты, которые были затронуты в статье. Естественно, для конкретных заказчиков потребуется что-то убирать, добавлять или сформулировать чуть иначе. Но в целом этот перечень вопросов освещает все главные моменты и вполне годится для работы.
Пример заполненного брифа
Представим, что к вам обратился владелец фитнес-центра « Геркулес » за созданием логотипа.
1. Чем занимается компания? Предоставляет зал с тренажёрами для занятий спортом частным лицам, проводит групповые занятия и оказывает услуги персонального тренера.
2. Укажите названия брендов-конкурентов. Спорткомплекс « Аполлон » и тренажёрный зал « Гефест ».
3. Чем ваш продукт отличается от конкурентов, какое у него УТП? Мы находимся в каждом районе города, до нас удобно добираться.
4. Опишите, пожалуйста, свою целевую аудиторию. Главный сегмент нашей ЦА — мужчины 20–35 лет, со средним или высшим образованием, неженатые, со средним или высоким доходом.
5. Какие задачи вы хотите решить с помощью дизайна? У нас новый бренд и до сих пор не было логотипа, с его помощью мы рассчитываем повысить узнаваемость компании.
6. В каком стиле вы хотите дизайн? Контурную иллюстрацию без лишних деталей.
7. Какие образы вы хотите использовать? Хотим изображение человека со штангой на логотипе.
8. Какая цветовая гамма предпочтительна? Жёлтые, оранжевые, терракотовые оттенки.
9. Какие шрифты подходят вашему бренду? Мы хотим шрифты без засечек, чтобы логотип смотрелся современным.
10. В каком формате подготовить для вас финальные макеты? В формате pdf.
11. Согласны ли вы получить макеты в полном размере после оплаты заказа? Да.
12. Укажите, пожалуйста, текст, который будет использован на макете. Фитнес-центр « Геркулес ».
13. Укажите желаемое размещение текста или порядок текстовых блоков. На первой строке название бренда, на второй — тип заведения.
14. Приведите список носителей, для которых будет разработан дизайн. Нам нужно разместить логотип на абонементах и на брелках для ключей.
15. Укажите, пожалуйста, для каждого из них точный размер, тип носителя и материал, из которого он изготовлен. Абонемент — карточка 86 х 54 мм из пластика. Брелок — круглый, с диаметром 39 мм, из прозрачного пластика.
16. Согласны ли вы получить три готовых варианта дизайна на выбор? Нет, это мало, надо пять вариантов.
17. Когда вы готовы согласовать концепцию и эскизы? Давайте созвонимся в следующий понедельник и, при необходимости, в пятницу.
18. Когда вы хотите получить готовые макеты? Логотип и макеты носителей нужны 20 июля.
19. Когда вы готовы внести предоплату и оплатить заказ полностью? Готов внести предоплату сегодня и остаток в день принятия работы.
20. Готовы ли вы дополнительно оплачивать работу с правками? Да.
Хотите научиться не только работать в графических редакторах, но и грамотно общаться с клиентами? Эти навыки вы можете прокачать с нашими преподавателями. Записывайтесь на курс по графическому дизайну.