4 заметки с тегом

дизайн

8 способов сэкономить на веб дизайне

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

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

Спросить у исполнителя «как можно сделать дешевле?»

В любой непонятной ситуации можно задать уточняющие вопросы. И в случае с ценой — этот вопрос тоже работает. Специалист с которым вы сотрудничаете сам подскажет что можно сделать дешевле и за счет чего. Иногда можно прийти к неожиданным результатам. А самым простым способом окажется следующий пункт.

Отсечь лишнее

Безопасный вариант, помогающий не потерять в качестве: отсечь лишнее и проработать только то, что важно для бизнеса. Разберем на примере:

Нужен интернет магазин для постоянных клиентов — чтобы те могли в любое время пересобирать корзину самостоятельно. Бюджет 30’000₽, оценили работы на 50’000₽. Потому что в стоимость вошли мобильная версия сайта, страница Акции, О компании, Блог, а еще Промо баннера и дизайн нескольких видов email писем.

Так как сайт нацелен в первую очередь на постоянных клиентов, то страницы «Блог» и «О компании» не нужны. Для большего сокращения трат можно обойтись без дизайна почтовой рассылки и не обрабатывать фотографии товаров для магазина.

Адаптировать купленный шаблон / UI-Kit под свои задачи

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

Разработать свою систему с UI-Kit

По мере того, как продукт будет развиваться и разрастаться, лучшим решением его поддержки будет сбор кита и использование в качестве стандартизации стилистики. UI-Kit тоже требует поддержки, но он содержит в себе все существующие элементы, их состояния, параметры и стили. А это помогает не тратить время на поиск «Стиля заголовка H1» и избежать ошибок при разработке дизайна новых страниц. Особенность кита в том, что он помогает получать одинаковый результат от разных дизайнеров, потому что все они будут опираться на прописанные в ките стили.

Скопировать подходящие решения

Это решение из области, когда дизайнер минимально участвует в проектировании структуры и подойдет не всем. Но для простых задач может стать выходом.
Вы находите несколько сайтов-доноров и говорите дизайнеру: Я хочу вот такую карусель в шапке сайта, вот такой каталог, такой подвал, и все это в стилистике как вот тут. Задача дизайнера сводится не к проектированию вариантов сеток и поиска наилучшей, а адаптация существующих решений к единой сетке, чтобы скомпоновать все пожелания в единую структуру.

Воспользоваться онлайн конструкторами

Онлайн конструкторы типа Wix, Tilda, Squarespace, Readymag и Webflow не панацея, но они понизили порог создания страниц сайтов и периодически ими пользуются успешно даже без участия специалистов. Даже больше скажу, часть дизайнеров сами пользуются такими конструкторами и обходятся без верстальщиков.

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

Подготовить материал и гипотезы решения задач самостоятельно

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

Не использовать платные или пиратские материалы

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

Например, разработка индивидуальных иконок или поиск бесплатных может выйти дороже, чем покупка уже найденных.

Говоря же о пиратских материалах, это всегда вопрос риска. Особенно со шрифтами, потому что есть множество способов отличить покупной шрифт от нелицензионного. Например, пиратские версии имеют другое название и далеко не каждый дизайнер об этом знает. Риск же состоит в штрафе и трате время на разбирательства.

Как правильно понимать задачу

Навык задавать вопросы — один из самых критичных навыков, который необходим дизайнеру. И самый болезненный, и тяжелый, и вообще. От того, правильно ли будет понятна задача, зависит 50% успеха.
Этот навык важен везде. И в жизни тоже. Но сейчас я расскажу больше именно про работу.

Если речь идет о фрилансе и агенстве, то отсутствие там навыка может лишь испортить результат работы из-за неумелой работы с ожиданиями клиента.
Если мы говорим о продуктовой работе, то половина задачи может быть решено за счет правильно заданных вопросов. Тут очень важен системный подход. Нужно уметь докопаться до основной сути задачи и проблемы, которую мы хотим решить. Понять — хотим ли вообще решить проблему? Почему? Зачем?

Можно отнести это умение к навыку переговоров. Поэтому для тех, кто ищет точку роста — это самая важная цель и психологическая привычка, которую нужно приобрести — способность задавать вопросы.

Базовые вопросы

Позволят собрать вводные, от которых можно будет отталкиваться и продолжать задавать вопросы:

Какую проблему пользователя решаем?

Что вызывает боль у пользователя, и откуда об этом знаем? Это самая большая боль? Насколько целесообразно и трудоемко решать именно эту проблему? Почему?

Какую проблему компании решаем?

Как повлияет решение пользовательской проблемы на компанию? Какие изменения за собой повлечет решение этой проблемы?

Какие есть ограничения?

  1. Например, переиспользуем существующие компоненты, чтобы сократить издержки работы
  2. Или может быть мы ограничены весом графики, чтобы сократить время загрузки и отображения страницы.
  3. Или... может бекэнд пока что не умеет собирать какую-то информацию и нужно предусмотреть два варианта отображения — как сейчас и как будет.

Какого эффекта ожидаем достичь?

Не путать с результатом. Результат — это заведомо поверхностное решение задачи без анализа. Например, результат — перекрасим текст номера телефона.
Эффект — Количество обращений по телефону удвоится. Нужного эффекта можно добиться множеством способов, иногда вовсе не очевидным. Сделать текст телефона больше или обратить на него внимание с помощью дополнительной графики. А может быть перенести в подвал, потому что там хранится вся ключевая контактная информация компании?

Критерии достижения?

KPI. То что можно измерить и сделать выводы. Критерии должны быть объективными. Вопрос вкусовщины дает больше пространства для маневра, но не всегда в вашу пользу.

И самое важное, — метрики нужно рассматривать как вспоминающий инструмент. Они не должны быть только самоцелью, иначе на выходе можно запросто получить ужасный дизайн, с замечательным CTR. Все должно быть в пределах разумного.

Менее очевидные вопросы,

Их нужно задавать самому себе во время работы

Насколько решение вписывается в глобальную картину?
Есть ли где-то ещё в продукте что-то похожее? Мы можем это взять за основу и переиспользовать? Чем используемое решение плохо? Как к нему в свое время пришли? Что было до этого?

Как это будет работать на мобильном?
Как будет выглядеть на самом малом разрешении (320×568)? А как на самом большом? Если делается дизайн для 1280, то как будет выглядеть на 1920? И т. д.

Как люди поймут как пользоваться новой фичей?
Как они ее найдут? Как часто будут с ней сталкиваться? Насколько это удобнее чем сейчас есть. Есть аналоги? Чем они хороши, чем плохи?

Базовые правила

Прилагаются к базовым вопросам, чтобы жить было проще :)

Задавайте как можно больше открытых вопросов
Задавая открытые вопросы, вы побуждаете рассказывать больше. Благодаря этому, вероятность услышать важную и полезную информацию о которой вы даже бы не задумались спросить возрастает. Если кратко, то на открытые вопросы нельзя ответить «Да» / «Нет» / «Возможно», такие ответы можно получить на закрытые вопросы.

— Вам нравится наш сервис?

Это вопрос закрытый и предрасполагает к краткому ответу.

— Как вы относитесь к нашему сервису?

Этот вопрос предлагает вести диалог и является открытым. Отсюда следует, что закрытые вопросы, как правило, всего лишь потеря времени.

Задавайте вопросы последовательно, один за другим
Не нужно кидать скоп вопросов, потому что каждый ответ на вопрос, вероятнее всего потребует уточнения или может вызвать новые вопросы. И не просто может, а должен. Если не быть последовательным, то такие «пасхалки» будут пропущены, а погружение в предмет разговора окажется поверхностным.

Убедитесь что получили однозначный и конкретный ответ
Часто приходится уточнять уже уточняемый вопрос. Нужно добиваться однозначного ответа как факта. Представьте что с вас спросят этот же вопрос и насколько убедительно будет звучать ответ «много» из примера ниже?

— Как много кликов совершают на эту кнопку?

— Много

— Это сколько?

— Больше чем на все остальные

— А в числах?

— ...



Но одного числа тут явно будет недостаточно, нужно ведь понимать услышанное число в сравнении с остальными. Понять почему так.

— 960 000 в день

— а сколько совершают кликов на вот эти кнопки?

— 137 000 и 69 000 кликов в день

— почему такая большая разница?

— это кнопка из основного сценария интерфейса. Остальными кнопками пользуются реже, потому что к операции возвращаются реже.



Здесь уже можно было бы остановиться, но кажется что вопросы «не по теме» не повредят:

— А есть другие кнопки, у которых мы хотим повысить количество кликов?

— Да, вот эта, благодаря ей повышается количество длинных сессий, а нам это важно.


Не стесняйтесь «глупых» вопросов
Вам может показаться, что вы знаете как поведет себя обсуждаемый элемент интерфейса в силу его простоты. Но при ближайшем рассмотрении выясняется что с изменением состояния элемента что-то где-то обязательно не влезает, отображается криво или вообще не уживается с вашей идеей. Если не задать вопрос, то вы придете к этому своими ошибками и потратите время впустую. Дешевле и правильнее было бы спросить.

Отсюда следующий совет — думайте на будущее

Спросите про все возможные состояния. «Что будет если...» — лучший вопрос на все случаи. Если документов будет больше чем планируем? А если меньше? А если документы будут без графики? А если они не вместятся? А как быть если имя документа будет слишком длинным? А если коротким? И т. д.

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

Хорошие слова
«Кто», «что», «когда», «где», «почему», «как» — замечательные слова. Они помогают задавать безопасные и эффективные вопросы, развивать переговоры и узнавать больше информации.

Вопросы с вопросительным словом в начале, или, другими словами, открытые вопросы, — ключевой инструмент исследования. Они выявляют подробности, гарантируют вхождение в предмет обсуждения.


Мысль, с которой нужно пожить

Задавая открытые вопросы, трудно ошибиться

Ещё по теме:

Совет Артема Горбунова
Совет Люды Сарычевой
Совет Максима Ильяхова

Все записи по теме:

Как правильно понимать задачу
Ежедневный план и отчет
Недельный план и отчет
Как назначать встречи
Как проводить встречи

 24   2018   вопросы   дизайн   переговоры

Продуктовый дизайн — это еще и забота о клиенте

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

На полках ниже продается черный хлеб, он по прежнему без упаковки

Это настолько круто, что первые 2 минуты я и не мог передать восторга словами:
Все таки было стрёмно покупать хлеб, который неизвестно сколько людей до тебя лапало грязными руками, чтобы понять понравилась ли им эта булка или нет. Проверять хлеб необходимо, потому что батон большой и есть 3-4 дня втородневный хлеб не так вкусно, как свежий.

Раньше алгоритм покупки был долгий: Выбрать булку хлеба, оторвать маечку и запихнуть туда батон. Иногда батон рвал пакет и приходилось повторять действия с упаковкой.
Теперь достаточно выбрать и забрать понравившийся батон не пачкая руки об мучную посыпку.

 10   2016   дизайн   продукты

Почему стоит работать именно в иллюстраторе?

cover!

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

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

Статья, написанная на Хабре от Turbomilk в 2012 году, актуальна и сейчас. Хотя в 2015 году уже и в фотошопе появились артборды, остальной инструментарий по прежнему не такой комфортный и грань между программами хоть и стала незначительной, но чувствуется и предпочтение все равно отдается иллюстратору. И тому 10 причин, которые можно считать дополнением записи 2012 года.

1. Артборды

Наглядная разница между фотошопом и иллюстратором до 2015 года.

Это самая веская и осознанная причина перехода на Иллюстратор, но не просто факт наличия Артбордов, а еще и возможность работать с горячими клавишами копирования объектов. Суть хранения целиком одного проекта в одном файле или как минимум одного раздела сайта — мегаудобна. Волокита с поиском нужного исходника из большого проекта отпадает. Отпадает и нужда держать кучу открытых исходников одновременно.Теперь каждый Артборд, это отдельная страница/экран проекта.

CTRL+F — вставить поверх выделенного объекта

CTRL+B — вставить под выделенный объект

CTRL+SHIFT+V — скопировать объект во все артборды

Продуктивность увеличивается, когда необходимо изменить утвержденный элемент на 20 страницах макетов. В таких случаях экономия времени начинается с сокращения сроков вдвое-втрое-вдофига раз.

Как это происходит:
Правлю 1 Артборд → Удаляю старые объекты на остальных → Вставляю правки

2.Режим (юнитной/модульной) сетки

Одна из самых важных и удобных функций, без которой вы вряд ли уже представите себе работу удобной. Чуть больше года работы в режиме «сижу на люстре» я всегда генерировал на сайте модульную сетку с нужным числом колонок. Теперь обхожусь без нее, за счет включения режима отображения сетки. Месяц назад во время сотрудничества Андрей Ревин открыл мне глаза на ее действительную необходимость. Но при условии настройки по своей методе.

CTRL+’’ — вкл./откл. отображения сетки

CTRL+SHIFT+’’ — вкл./откл. привязки к сетке

Таким образом я всегда уверен что объект вписанный в модуль занимает 100рх и все кнопки и картинки в макете выравниваю по юнитам. Работа с текстом тоже упростилась — сетка показывает и вертикальный ритм.

Для большего удобства работы, сетка настраивается на шаг «Юнита» 10рх, а «Модуля» 100рх.

Для более быстрой и удобной работы рекомендуется не только включать саму сетку, но и привязку к ней, хотя в отдельных случаях (например в работе с текстом) от привязки придется отказаться и передвигать объекты по пикселям.

3. Работа с шрифтом

Часть работы состоит в подборе шрифтов, поэтому в макете часто получается микс из разных наборов, который нужно «причесать». В таких ситуациях жизненно важно помогает инструмент пипетка. Простое нажатие копирует стиль (цвет, фонтфемили, размер), а игра с альтом и шрифтом копировать лишь часть параметров.
Гифки для наглядности:

Клик пипеткой копирует стили объекта: цвет, фонтфемили, стиль начертания, прозрачность.
Зажатый шифт — копирует лишь цвет. Стиль и фонтфемили остается прежним.
 
Зажатый альт — альтернальтива обычному режиму: взятый первым кликом стиль, применяется ко всем объектам, на которые применена пипетка.

Есть еще и возможность изменить написание слова/фразы/предложения через Type → Change case в строго строчные, каждое слово с заглавной буквы и т. д. т.п.

4. Режим просмотра Outline

Затеряться в куче слоев, достаточно сложно, особенно когда ими и не пользуешься. Это все таки иллюстратор, а не фотошоп. И на помощь приходят такие вещи, как режим просмотра Аутлайн. С его помощью можно найти потерявшейся текст или объект, который перекрыт картинкой или проверить где у тебя картинки, а где вектор, каких они размеров и  узнать, обводка ли это или уже патч. В общем, игнорировать эту фитчу категорически нельзя. Она обязательно пригодится и сэкономит много времени и нервов в сложной ситуации.

Переход в Outline — CTRL+Y

Слева показан обычный режим, справа аутлайн.

5. Группы объектов

Длительная работа в иллюстраторе показала наглядно, что вход в сгруппированные объекты — это та самая фишка, из-за которой слои не нужны.
Вся работа заключается в принципе, когда зайдя в группу, ты находишься в эффекте изоляции и объекты вне группы, становятся неприкасаемы.

Вход в группу изолирует от объектов, находящихся вне группы.

 
А для еще более удобной работы, можно использовать Direct Selection Tool. Белый курсор игнорирует группы и выделяет объект в прямой видимости.

Direct Selection Tool игнорирует группы и позволяет выделить один или несколько нужных объектов

6. SVG

Иконки и иллюстрации в SVG, это малый вес файла (а значит и быстрая его загрузка на сайте) да и безупречное (пользователи Retina оценят) качество.

7. Формат файлов

Можно работать и в формате ai. Но истинной ценностью для меня стал pdf. Исходник можно открыть даже не имея дополнительного ПО (Акробат стоит у всех, так как работа с ним связана даже у менеджера). Значит, мне как исполнителю не нужно сохранять дубликаты исходников в виде превью в jpeg, а клиенты всегда имеют возможность быстро найти нужный исходник и просмотреть его. Экономия времени, отсутствие бардака. Все счастливы.

8. Вес проекта

Иллюстратор позволяет работать с графикой, ссылаясь на местоположение файла. Дублирование «ссылки» по артбордам не увеличивает вес до размеров автобуса, так как физически мы по прежнему имеем только одну картинку, которая отображается на нескольких Артбордах проекта. При этом вес проекта сокращается с 2Гб, до 300Мб. Числа взяты из реальных примеров.

9. Экспорт множества артбордов

При работе с прототипированием и кучей экранов, команда File → Export облегчат жизнь и сократят время на сохранение материала в 3-4 раза, делая экспорт артбордов автономно без вашего участия. В больших проектах это как урок выживания.

10. Продуктивность

Большая часть пунктов, в первую очередь относятся к удобству работы, которая значительно влияет на продуктивность и скорость. Выполнять свою работу не только качественно, но максимально быстро и комфортно — цель и двигатель прогресса.
Подобная смена основного инструмента пугает или расстраивает, но в конечном счете доставляет радость и этим хочется делиться.

На скорость работы влияет и подход программы к обработке информации. Проект весит в десятки раз меньше и потому обрабатывается значительно быстрее.

И еще несколько приятных мелочей

  1. Иллюстратор более адекватно и приближенно к вебу отображает шрифты. Понятное дело что каждый браузер рендерит все по своему, но в отличии от фотошопа, люстра хотя бы не так сильно лжет.
    2. Иллюстратор корректнее (нежели фотошоп) сохраняет растровую графику, которая претерпела редакцию (искажение, масштабирование, поворот). Качество картинки на выходе может быть разительным. Кто бы мог подумать.
  2. Не смотря на всю направленность на «вектор», есть режим пиксельного отображения результата. Режим позволяет увидеть как будет выглядеть результат работ при экспорте проекта в растровое изображение.
  3. В версии CC есть функция работы с CSS стилями. Программист скажет спасибо.

Что еще почитать
Как верстать из иллюстратора

 1 комментарий    117   2015   illustrator   веб   дизайн