spacenyash

Мысль 2

Заметки после посещения OFFFspb:

1. Не забывать заниматься своими личными проектами хотя бы раз в неделю.

2. В питчах желательно показывать две концепции. Один вариант — то, как считаешь нужным.  Второй — в качестве альтернативы.

3. Дополнительная работа для клиентов — не страшно. Главное, чтобы было приятно ее 

делать.

4. К черту ЦА (имеется ввиду, что целевая аудитораия — это те ребята, кого хотелось бы  видеть, например, в посетителях сайта, но это не означает, что именно они в большинстве  своем и будут основной массой посетителей сайта).

5. Пробовать в каждом новом проекте что-то новое, иначе о росте и не стоит говорить.

Мысль 3

Недавно меня попросили посоветовать что почитать по UX. Специально какие-либо ресурсы не посещаю, так как все добавлено в Feedly. А ресурсы такие:

smashingmagazine.com

usabilitypost.com

inspireux.com

uxbooth.com

uxmastery.com

uxmovement.com

Мысль 4

Разработчики мобильных сайтов, вам пишу: а вы знаете, что на свете существует гораздо больше неретина/неайос/ненэксус пользователей мобильного интернета, чем обратных? Это касается не только России, но и Европы (за Америку не отвечаю, там не был).

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

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

Мысль 5

Не заставляйте пользователя сомневаться в работоспости интерфейса. Нажал поиск и ждет пока загрузится контент. А тем временем страница несколько секунд белая, пустая. И не понятно то ли ничего не найдено, то ли сломалось. Хоть какой-то прелоадер нужен.

Мысль 6

Многие считают, что свое дело — это круто, легко, сразу прибыльно и т.п. Так вот: это не так. Это невероятно тяжелый труд по сравнению с тем, что происходило при работе в офисе в качестве наемного сотрудника. По крайней мере год или два это довольно-таки тяжело. Особенно без стартового капитала и если это первое свое дело. Поначалу это может быть куда менее прибыльно, чем работа наемником.

Очень важно за этот стартовый период не потерять запал.

А потом как-то все потихонечку встает на рельсы.

Мысль 7

При разработке мобильного приложения для меня важно его видеть от начала и до конца, важно соблюдать настроение пользователя, его видение на протяжении всего сеанса использования приложения.

Поэтому частенько, когда вся структура и схемы интерфейса мобильного приложения готовы, я начинаю отрисовку экранов с Splash screen (или с другого экрана, который увидит пользователь при первом запуске). Именно отсюда задается весь тон приложения, первое впечатление. А дальше стараюсь его поддерживать на протяжении всех оставшихся экранов: просто иду дальше по структуре.

Мысль 8

Не разрабатывайте интерфейс сначала под iPhone 6 и 6+. Доля iPhone 5, 5S и 5C все еще очень велика. Рассчитывайте сначала на те дисплеи, что поменьше, чтобы все уместить и чтобы без проблем вся информация на экране считывалась и нажималась.

А адаптировать под большие экраны будет куда проще и быстрее, чем информацию с больших экранов уместить на маленьких.

Если кто сталкивался с понятием «mobile first», то здесь похожий случай :)

Мысль 9

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

Мысль 10

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

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

У меня во время такой работы на столе лежат 3 устройства: iPhone, iPad и телефон Android (у всех троих ощутимо разные размеры экрана).

Как только появилось обновление верстки, беру каждое устройство, смотрю на нем, не забываю про альбомный вид (повернуть экран).

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

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

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

Мысль 11

Не доверяйте Photoshop в вопросе отображения шрифтов.

При работе над дизайном сайта, ни один из встроенных режимов сглаживания шрифта не отразит реальной картины — той, которую вы увидите в браузере. Даже не так давно появившиеся режимы Mac и Mac LCD (это для версии под OS X) не покажут, как действительно будет смотреться текст на страничке.

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

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

Когда работаете над дизайном сайта, проверяйте как будет выглядеть шрифт в браузере, а не в Photoshop. Именно в браузере все-таки его будут смотреть :)

Мысль 12

Когда работаю над анимацией приложения, то в After Effect создаю Composition длинной не более 2 секунд (ну, ладно, иногда не более 3 секунд). Это помогает сделать короткую не затянутую анимацию, что будет только плюсом при использовании приложения. Так же этого хватает для небольшой задержки перед началом анимации и после ее окончания.

Мысль 13

Частенько при разработке интерфейса (какой-либо сложной системы или простенького сайта) клиент просит оформить все сопутствующие теги: QUOTE, UL, OL, P, H1, H2, H3 и прочее. Вот об этих H и пойдет речь.

Как обычно просят: «Нужно оформление H1, H2, H3, H4, H5, H6». Просят все эти заголовки ввиду того, что просто не знают, что на самом деле нужно и что пригодится. Вот в этот момент у вас появляется власть повлиять на то, как будет выглядеть будущий контент в интерфейсе, который вы разрабатываете.

Уже давно не секрет, что большое разнообразие форматирования текста только затрудняет восприятие контента. Многие мэтры типографии предлагают ограничиться 2 или 3 заголовками (в Vignelli Canon предлагается использовать 3). Хоть это и ограничит возможности в оформлении текста, но это позволит больше сосредоточиться на самом контенте, от чего выиграют все. Его прийдется сделать таким, чтобы не было каких-либо сложных структур в пределах одной страницы.

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

Мысль 14

Если вы готовите анимацию интерфейса приложения в After Effects, то обязательно делайте это для максимально возможного разрешения экрана.

Допустим, вы рисовали интерфейс приложения под iOS на примере экрана iPhone 5 (это до сих пор самое популярное разрешение среди iOS устройств). Далее со всем этим материалом вы переходите в After Effects. Готовите анимацию. Утверждаете ее. А потом оказывается, что еще есть и экраны iPhone 6, где уже не 2x, а 3x. И тут вам приходится переделывать проект.

В Photoshop перейти из 2x в 3x очень просто: достаточно изменить значение dpi, скажем, с 144 до 216 (при условии, что все элементы на экране либо векторные, либо в Smart Object с огромным внутренним запасом). Так вот в After Effects это сделать совсем не так же просто.

Делайте анимацию для больших разрешений: минимум для максимального разрешения экрана устройства. А лучше — для в два и более раз большего максимального разрешения экрана устройства.

Мысль 15

У меня есть один критерий проверки работы перед отправкой клиенту… Даже не критерий, а условие: подождать следующего утра.

Если утром, днем или вечером работа завершилась и можно отправлять, то лучше взять паузу до следующего утра. Утром голова чистая, взгляд уже не такой замыленный, потому что был перерыв. Частенько такой подход спасал. Бывает вечером под конец рабочего дня, когда мозг уже не мозг, думаешь, что вот оно, круто сделано! А утром смотришь и хвалишь богов, что не отправил. Буквально пару штрихов — и результат стал гораздо лучше.

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

Источник: designpub.ru

Несмотря на опции экспорта, два квадрата стали одним растровым слоем в PSD

Поиск решения

Надо бороться с несправедливостью. Ищу русскоязычные, западные статьи (попадается интересная статья 2011 года у Турбомилк), уроки, видео на Ютюбе. Почти везде все сводится к группировке объектов в иллюстрации, сортировке по слоям (порядок в слоях полезен для работы, а не только для экспорта) и дальнейшей ручной растеризации через Object → Rasterize в самом «Иллюстраторе» либо автоматической при экспорте. Но мне хочется сохранить объекты векторными в PSD.

Экспорт из AI по статье Турбомилк. Порядок в группах, слоях, но все растровое

Попадается вариант использования связки «Иллюстратор» → «Файерворкс» → «Фотошоп», когда исходный AI файл открывается сначала в «Файерворксе», а затем экспортируется в PSD с похожими опциями. Лишние действия: создавать иллюстрацию в одной программе, использовать вторую для экспорта в третью. Так еще с 2013 года Эдоуб не выпускают «Файерворкс», проверять плюсы и минусы такого способа нет возможности.

И тут попадается интересный трюк в статье 2010 года на Tutsplus: если к объектам применить Make Compound Shape в панели Window → Pathfinder, то при эскпорте объект будет векторным шейпом.

Проверяю способ на нескольких объектах

Слои после экспорта в PSD

Зеленый квадрат при открытии в «Фотошопе» сохранил цвет и остался векторным шейпом, соседние объекты растрировались. Беру на заметку, что программы по-разному работают со свойствами «градиент», «обводка».

Хорошо. Но что если у нас файл содержит десятки, сотни объектов? Вручную применять к каждому объекту Make Compound Shape долго, если записывать Экшн, то появляется проблема последовательного перебора объектов — команда перехода Select Next Object будет перескакивать сгруппированные объекты и не сможет переходить автоматически на следующий слой.

Автоматизация

Так спортивный интерес подтолкнул к написанию скрипта, автоматизирующего подготовку векторного файла для экспорта в PSD.

Требуется «Иллюстратор» версии CS6 и выше

Cкрипт проводит проверку всех объектов в документе, в независимости от того, на каком они слое или в группе. Найдя объект с однотонной заливкой, он применяет к нему Экшн с операцией Make Compound Shape. Для сохранения векторных обводок к объектам нужно применить Object → Path → Outline Stroke.

Если у вас есть группа из сотен мелких объектов, например, кистью нарисованы волосы, шерсть или текст, переведенный в кривые, лучше перед выполнением скрипта объединить такие элементы в Compound Path клавишами Cmd + 8 (Ctrl в Виндоус), чтобы скрипт каждый объект, букву отдельно не обрабатывал.

Исключения

Если в файле присутствуют объекты, к которым применены Photoshop effects (тень, свечение, шум и т.д.), то их перед запуском скрипта надо вручную растрировать в режиме Type Optimized.

В силу специфичности некоторых видов объектов (градиенты, паттерны, меши и ряд других) по результатам тестов не все они могут экcпортироваться из AI в PSD, оставшись векторными, но их можно сделать отдельными растровыми слоями без долгой сортировки по группам и слоям в «Иллюстраторе».

Для этого применяется еще одна хитрость, скрипт по отдельности делает из каждого такого объекта отдельную группу.

2 квадрата в AI в отдельных группах после экспорта в PSD

Краткие итоги

-  При экспорте из AI в PSD у нас сохраняются параметры прозрачности, режимы наложения слоев.

-  Применение Make Compound Shape позволяет сохранить векторные объекты в PSD.

-  Градиенты, паттерны, меши, объекты с растровыми эффектами, фигуры с обводками растрируются.

-  Преобразование каждого растрируемого объекта в группу позволяет сохранить его после экспорта отдельным слоем в «Фотошопе».

-  Флет иконки, UI элементы, иллюстрации — их можно после подготовки получить в PSD файле полностью в векторной форме.

-  Автоматизация подготовки файла на экспорт скриптом помогает снизить количество ручной работы для файлов с большим количеством объектов.

И для примера векторная иллюстрация, которая прошла обработку скриптом и была экспортирована в PSD формат.

173 объекта в AI обработалось за 40 сек. В итоговом PSD все слои — векторные шейпы

Скачать скрипт можно отсюда.

Источник: sergosokin.ru

Профессиональные термины простым понятным языком.

Курс 2, углубленный (курс 1). После прочтения вы сократите время на словесный пинг-понг.

7 терминов, 4 минуты 52 секунды на прочтение.

Линки

Есть такая программа: «Adobe Illustrator». С большой вероятностью дизайнер работает в ней: в этой программе очень удобно готовить макеты т.к. есть возможность подлинковывать внутрь одного файла другие файлы. Подлинковать — это поместить сторонний файл, другого формата, внутрь программы.

Т.к. физически файл лежит отдельно — веса готового макета в самой программе он не увеличивает и программа быстро работает. Макет хранит только ссылку на нужный файл — линк. Не будет линка = программа не сможет ничего разместить в этом месте макета. Как показать то, что не лежит по указанному адресу?

Поэтому, если вы отдаёте в работу иллюстраторовский (.ai) файл, следите, чтобы в папочке links были приложены все линки, которые используются в макете.

*Макет может вообще не содержать линков, если это простой векторный файл, но лучше всё-таки уточнить.

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

Исходник или файл, сбитый (слитый) в один слой

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

Слои в исходнике:

Файл, сбитый в один слой:

Разрешение

А теперь загадка, о чём здесь речь?

Конечно, о разрешении. Разрешение — это количество маленьких точек при печати на дюйм: dpi («dots per inch — точек на дюйм»). Чем выше разрешение, тем больше можно увеличить картинку, а она будет оставаться в хорошем качестве. Однако не стоит гнаться за неоправданно огромными числами в файлах. К чему вам качество внутри компьютерного файла 3 000 dpi, если принтер в лучшем случае способен выдать картинку в 300 dpi? Это лишь лишний вес файла.

Оптимальное разрешение для полиграфии = 300 dpi,

для наружки = 72 dpi (хотя сами печатники признаются, что и того меньше, эти макеты смотрят на расстоянии, высокое качество здесь не требуется, главное — сделайте перед итоговой печатью цветопробу, типография предоставляет её бесплатно).

Резкость

Понятие «резкость» плотно связано с разрешением. Если очень упрощённо, то резкость отвечает за различимость деталей на изображении. Степень контрастности между соседними точками. Особенно это важно при работе с текстурами ткани. Как раз на воспринимаемую резкость изображения влияют два фактора: разрешение и чёткость.

Фокус/расфокус

Чтобы после обработки получить картинку отличного качества, нужно позаботиться о высоком качестве самого снимка. Ретушь только «вытягивает» и украшает уже данное кадру. Косметика, а не пластическая хирургия. Коммуникации требуют и высокого разрешения (бОльшего количества точек), и высокой чёткости (чёткие границы между этими точками). Однако камера имеет ограничение и может сфокусироваться (сделать резким) только конкретный план (близкий объект, средний, дальний). Если часть изображения в фокусе (на нём хорошая резкость), то часть уходит в расфокус (потеря резкости, размытость), как быть в таком случае? Когда нужен полностью резкий кадр, фотографы создают композитное изображение. Поочерёдно взяв в фокус разные планы, а затем объединив изображение в одну картинку, где взяты самые резкие детали.

Шум

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

Такое происходит из-за несовершенства техники и недостатка света. Обычно шум негативно влияет на изображение, словно бы невпопад «бьёт» его на мелкие кусочки, однако небольшое количество шума может повысить ощущение резкости (картинка ниже). Такое сознательное добавление шума могут использовать для искусственного повышения резкости, борьбы с «замыленными» текстурами не очень хорошего качества (трава, кирпичи, картон), или при ретуши, когда пришлось убрать средние частоты и появилось слишком большое ощущение гладкости и пластика.

Припуски/поля под обрез/вылеты

Вы видите готовые визитки вот так:

а печатник и дизайнер видят макет так:

Видите сколько макета добавилось по периметру? Ровно по 5 мм с каждой стороны. Добавленное — и есть поля под обрез. Они же припуски. Они же вылеты. Если после печати визитки будут разрезаны неровно (а так и будет), это не бросится в глаза: по краю не останется противной белой полосочки: ведь мы печатали фон с запасом.

Какими поля должны быть, точно укажет в технических требованиях типография, но обычно в пределах 5 мм. Информация важная, нужная, её лучше уточнить.

Обрезной формат

То, что остаётся после того, как поля срежут. Он же — размер готового изделия.

Источник: wearegeek.ru

Когда вам говорят : «Пришлите исходник в растре в слоях!» вы слышите : «!@#$%&`»?

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

Применяйте их и вам обеспечены респект и уважуха от заносчивых дизайнеров и неразговорчивой типографии! :)

Кроме стандартных — комбинированных, логотипы еще бывают текстовые и символические.

Среди них нет плохих и хороших. Они все — рабочие инструменты. Все они нужны и важны для своей сферы бизнеса или задачи.

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

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

Символические же логотипы подходят творческим организациям, свободным художникам, артистам. Отличный инструмент для вирусного маркетинга — нарисовали трафаретом или в граффити необычный лого и рядом телефон или адрес сайта. И радуемся эффективной рекламе.

Паттерн = Орнамент = Узор — это фирменный фоновый рисунок. Палочка-выручалочка. Не знаете, что разместить на макете или макет нужен очень срочно — используйте паттерн!

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

Guideline = Гайдлайн = Руководство по использованию фирменного стиля — документ, в котором подробно объясняется как именно использовать разработанный дизайн.

Содержание:

1. краткая философия бренда;
2. краткая легенда, обосновывающая дизайн-концепцию;
3. логотип, шрифты, цвета;
4. шаблонные элементы оформления (паттерн, фотографии и прочее);
5. примеры построения макетов (квадратные, вертикальные, горизонтальные, а также на 

большом и маленьком форматах).

Кому нужен? Компаниям с филиалами. Компаниям, изготовление\дизайн рекламы которой делает более чем 1 подрядчик. В этих случаях нужен единый документ с четкими инструкциями: как и что делать. Компания без этого документа рискует узнаваемостью! Каждый исполнитель непременно будет использовать свой шрифт, свой оттенок цвета, располагать элементы и подбирать фотографии на свой вкус. Итог — ваш бренд изменится до неузнаваемости.

Чтобы бренд всегда оставался собой,а не пал жертвой очумелых ручек печатника, нужен этот документ — Гайдлайн (Guideline).

Brand Book = Бренд Бук = Брэнд Бук — это полноценный фирменный стиль, оформленный в один многостраничный красивый документ. Отличие от гайдлайна в наличии уже готовых для печати макетов. Как правило, более глубоко прописывается маркетинговая часть.

Содержание:

1. философия и позиционирование бренда, его ценности и принципы;

2. легенда, обосновывающая дизайн-концепцию;

3. логотип, шрифты, цвета;

4. шаблонные элементы оформления (паттерн, фотографии и прочее);

5. далее по выбору Заказчика готовые макеты. Может быть что угодно: визитка, наружка, сайт, интерьер и т.д.

Рекламная коммуникация — как правило, это серия макетов для наружной рекламы. Сейчас модно употреблять термин именно так.

POSm = ПОСм — это сувенирка (ручки, блокноты, кружки и т.д.) и раздатка (буклеты, визитки, листовки, презентации и т.д). Расшифровка аббревиатуры — point of sale materials. Для торговых точек — это стаканы, салфетки, коробки, пакеты, наклейки.

Точка контакта — термин известного маркетолога Игоря Манна. Это многочисленные и разнообразные ситуации, места и интерфейсы соприкосновения клиента с компанией. Каждый раз, когда клиент любым способом, в любое время контактирует с компанией, возникает точка контакта.

SKU — это один тип товара. Модное слово! Расшифровка аббревиатуры — stock keeping unit. Например, йогурт с черникой — SKU номер раз, йогурт с клубникой — SKU номер два-с, йогурт с персиком — SKU номер три-с!

ЖЗЛ: из жизни замечательных людей!

Реальные фразы. Осторожно, не для слабонервных!

— Ну вы же можете взять это фото хот-дога, добавить соленые огурцы, убрать горчицу и изменить угол зрения?!

— Я вам там картинку в ворде прислал, она же подойдет для билборда?!

— Почему такой дорогой логотип? Это же просто иконка и шрифт!

Технические термины

Чем дальше в лес, тем толще партизаны.

RGB — цветовая модель, которая создает изображение на мониторах. Расшифровка: RGB — red, green, blue (красный, зеленый, синий). Любое изображение, которое вы видите на мониторе складывается только из этих трех цветов. Магия, правда?

CMYK — цветовая модель которая создает изображение на печати (баннер, визитка, буклет и тд). Расшифровка: CMYK — cyan, magenta, yellow, key color (голубой, пурпурный, желтый, черный). Любое изображение, которое вы видите в реальности (кроме как на мониторе) складывается только из этих четырех цветов. Для того, чтобы изображения были яркими и сочными при печати, наша студия не использует key color (черный) и делает макеты только в 3 цветах из 4 возможных.

«Пришлите исходник в векторе!» — вас просят прислать файл с одним из разрешений .ai, .eps, .cdr, .pdf. В таком файле поверх картинки накладывают текст или создают несложный макет полностью. С таким файлом работают в программах Adobe Illustrator или CorelDRAW.

Векторный файл состоит из точек и линий. Выглядят это вот так:

Его преимущество — можно делать изображение сколько угодно большим и оно будет в хорошем качестве.

«Пришлите исходник в растре!» — вас просят прислать файл с одним из разрешений .psd, .tiff. В таком файле обработанная фотография или сложный макет (картинка) с множеством эффектов. С таким файлом работают в программе Adobe Photoshop.

Растровый файл (любая картинка), состоит из пикселей. Выглядит это вот так:

«Пришлите исходник по слоям!» — вас также просят прислать файл с одним из разрешений .psd, .tiff. Это нужно, чтобы изменять элементы в файле независимо друг от друга — убирать/добавлять текст, перемещать картинки или их части, изменять размер и тд. Когда дизайнер делает макет, он накладывает разные изображения и эффекты (это и есть слои) друг на друга. Это выглядит вот так:

ЖЗЛ: из жизни замечательных людей!

Реальные фразы. Осторожно, не для слабонервных!

— Ни в зуб ногой, ни пальцем в пиксель!

— Фотошоп, мотошоп… да я ТАКОЕ в пеинте нарисую!

— Вот вы дизайнеры любите заморачиваться… возьми картинку в яндексе, сверху слоган, и готово!

— Мы физически не можем изменить макет не имея исходника в слоях.

— Божечки, я так и знал, что с вами работать будет просто невозможно…

Источник wearegeek.ru

1. Разберитесь в видах шрифтов

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

Антиква — это шрифт с засечками, а гротеск — без засечек.

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

Есть две основные группы шрифтов — антиквы и гротески. Антиквы — это шрифты с засечками, гротески — без засечек.

2. Используйте шрифт с засечками для длинных текстов

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

Если вы пользуетесь Windows, среди антикв хорошим выбором будет Georgia (такой шрифт используется на сайте The New York Times) или Garamond (классическая антиква, которая идет в комплекте с Microsoft Office). На Mac OS тоже есть Georgia, а также прекрасные Iowan Old Style (один из шрифтов в читалке iBooks), Charter (который хорошо подходит для печати в маленьком размере) и PT Serif (его можно бесплатно скачать для Windows).

Шрифт с засечками хорошо подходит для набора длинных текстов. На Windows используйте Georgia или Garamond, а на Mac OS — Iowan Old Style или Charter.

3. Используйте шрифт без засечек для коротких текстов

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

Для пользователей Windows можно порекомендовать стандартные Verdana, Tahoma и Segoe UI (и, пожалуйста, никакого Arial и Calibri!). У пользователей Mac OS к уже упомянутым Verdana и Tahoma также добавляются Helvetica Neue и Helvetica (про этот шрифт даже сняли целый фильм). А вот отличный San Francisco, новый фирменный шрифт Apple, который используется во всех интерфейсах, упаковке и с недавних пор на официальном сайте, почему-то недоступен для использования внутри системы по умолчанию, поэтому его приходится скачивать и устанавливать отдельно.

Используйте шрифт без засечек для всего, что не является длинным текстом. На Windows используйте Verdana или Tahoma, а на Mac OS — их же или Helvetica Neue.

4. Скачивайте бесплатные шрифты

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

Самое очевидное место, где стоит искать бесплатные шрифты, — это, конечно же, Google Fonts, где на данный момент доступно 76 кириллических шрифтовых семей (каждая семья включает в себя несколько начертаний). Неочевидное место для поиска бесплатных шрифтов — акции и распродажи в крупнейшем интернет-магазине MyFonts, где с помощью расширенного поиска можно найти более сотни бесплатных кириллических начертаний.

Большой выбор бесплатных кириллических шрифтов в Google Fonts

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

Качайте бесплатные шрифты на Google Fonts, MyFonts или ищите их в интернете. Бесплатный шрифт может оказаться некачественным. Читайте лицензию, если собираетесь использовать шрифт в коммерческих целях.

5. Купите шрифт, если хотите чего-то большего

Самый богатый выбор шрифтов у тех, кто готов за них платить. Наиболее популярный интернет-магазин шрифтов — это MyFonts, в котором одних только кириллических шрифтов можно найти почти две тысячи штук. Также можно посоветовать посетить сайты словолитен (так называются компании, которые делают шрифты): Parachute, Colophon, Radim Pesko, Commerical Type, Grilli Type. Среди российских компаний можно отметить: «Паратайп», Студию Лебедева, Letterhead, Type Today и Brownfox.

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

Фрагмент промосайта шрифта GT America gt-america.com

Обычно одно начертание шрифта стоит около 3000 рублей (бывает и дешевле, и дороже). И да, за жирное или курсивное начертание придется заплатить столько же, сколько и за обычное. К счастью, часто можно сэкономить, купив всю шрифтовую семью разом — оптом дешевле.

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

Купить шрифты можно на MyFonts или на сайтах конкретных производителей. Обычно одно начертание шрифта стоит около 3000 рублей.

6. Учитывайте контекст применения шрифта

Если набрать этот абзац шрифтом Comic Sans (или любым другим «веселым» шрифтом), ничего страшного, конечно же, не произойдет. Правда, стоит знать, что изначально этот шрифт был вдохновлен надписями из комиксов и использовался для реплик виртуального помощника от Microsoft. Вне этого контекста Comic Sans выглядит несколько странно. Хотя, как мы знаем, при правильном использовании этот шрифт подходит буквально для всего (шутка).

Проект по переделке известных логотипов с использованием Comic Sans

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

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

7. Помните, что не все зависит от выбора шрифта

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

Можно запомнить простое правило: чем проще, тем лучше. Причем это касается не только оформления, но и самого содержания — как правило, чем проще структура исходного текста (наличие разного рода выделений, заголовков и вставок), тем проще его сверстать.

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

Источник: designmojo

Публикуем очень интересную статью от MAD RABBIT, которая была опубликована на designpub.ru

Когда я только начинал заниматься дизайном, я слышал про клиентов всякое. Потрепанные фрилансом коллеги как один строчили в своих блогах «Клиенты=пидорасы». Но мне было интересно. Интересно иметь своё мнение.

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

Но в один непрекрасный день мой позитив спустились с небес на землю, получили российский паспорт и начал излучать аромат утреннего перегара. На моем пути появился он: эксперт по всему на свете, демиург продающего дезайна и креативности, человек, который любит логотип побольше, а предоплату поменьше, тот самый представитель отряда заказчиков-пидорасов, с которыми я сталкивался только на сайте «Адовые клиенты». Впоследствии за первым проблемным клиентом длинной шеренгой, как в СССР за колбасой, выстроились его собратья. Черный список, состоящий из одного человека, пополнился еще тремя интересными экземплярами.

Знакомство с ними было как стакан холодной воды, вылитый прямо в лицо. Я поставил себе цель: понять, как можно безболезненно вести с ними дела.

Для этого я завел на компьютере отдельную папку, где хранил все записи диалогов. Сперва я назвал папку «Пидарасы», но потом переименовал ее в «Вадим» (в честь «первого» клиента). Учитывая многолетний опыт общения со Вадимами, я считаю смысл поменялся не сильно.

А теперь к сути.

Кого мы будет называть Вадимом

Вадим — это клиент, который всячески создает сложности дизайнеру и лезет в процесс разработки, не понимая задачи. В спорных вопросах предпочитает прибегать к аргументации уровня детей дошкольного возраста, типа: «Я так хочу», «Мне так нравится» или «Таковы были последние слова моего попугая». Вадимом может быть человек с любым именем, доходом и образованием.

Как устроен мозг Вадима

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

Где обитают Вадимы

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

Разработать логотип или макет сайта (точнее то, что теоретически похоже на логотип или макет сайта) может 15% населения земного шар в отличии от, например, написать игру под АйОС или сделать анимационный ролик с использованием Афтера и Синемы. Чем больший промежуток времени проходит между началом изучения сферы и статусом Вконтакте «Принимаю заказы на …», тем меньше вероятность нарваться на Вадима. Но вероятность есть всегда.

Так же Вадимы предпочитают не водиться там, где цена выше рыночной. По этому параметру Вадимов объединяет не отсутствие денег (я знаю много Вадимов у которых все ок в этом плане), а общий вопрос «За что тут платить?». Поэтому, если взять двух логомейкеров с ценником 5 т. руб. и 100 т. руб., то лишь первый признает черты Вадима в целевой аудитории своих клиентов.

Как работать с Вадимами

Прочитав все переписки с Вадимами, я выделил несколько пунктов, на которых допускал фиаско.

1. Работай по системе: предоплата 50% в начале проекта, 50% в середине

Это минимизирует риск того, что Вадим тебя кинет. Еще лучше: предоплата 100%. Но, Вадим бы не был Вадимом, если бы платил все сразу, поэтому снимаем розовые очки и читаем дальше.

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

Учуяв в клиенте Вадима, обязательно страхуй себя от финансовых рисков. Перебдеть лучше, чем недобдеть.

2. Всегда прописывай в отдельном файле: объемы работ, сроки выполнения, условия, референсы и пожелания Вадима

Работать по договору или нет — выбор каждого, лично я считаю, что в нашей стране ими можно подтираться. Важно иметь отдельный файл, где прописаны все согласованные условия и объемы работы на понятном человеческом языке: если возникнет конфликтная ситуация, есть куда ткнуть пальцем (или Вадима носом). Порой доходит до смешного: клиент заказал веб-дизайн, а ты только в конце работы узнаешь, что в его представлении услуга веб-дизайн включает в себя разработку логотипа. Если пренебрег советом номер 1, то прими мои поздравления: помимо возможности попрактиковаться в отрисовке фирменных знаков, ты приобретешь неоценимый жизненный урок. Или останешься без пост-оплаты.

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

3. Дай Вадиму возможность выбора

Вадим №2: «Я считаю, что логотип в левом верхнем углу нашего сайта, это не круто, давайте поставим его по центру и сделаем на пол экрана».

Это было в 01:00. Моя первая реакция вычислить его по айпи, приехать в гости и залить зеленкой ему лицо. Пораскинув мозгами, я пришел к выводу, что разбазаривать зеленку в неполитических целях глупо. Попробовал более гуманный способ: пойти безумцу на встречу и сделать его вариант компоновки. Трясущимися руками я провел акт вандализма над своим макетом, затем сохранил его в новом файле с говорящим за себя названием Eto_prosto_pizdec.psd, экспортировал жпг и выслал Вадиму (самое главное в таких ситуациях не забывать переименовывать жпг’и). До него дошло, что первоначальный вариант был более выигрышным. Мы еще немного подискутировали в скайпе и на этом заканчили издеваться над макетом.

У Вадима плохо развито воображение: понять, что лучше, а что хуже он может лишь увидев это.

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

4. Никогда не спорь с Вадимом

При общении с Вадимами главное правило — не спорить. Вадимы считают, что все знают (в отличие от дебилов типо Сократа, которые ничего не знают). Любого, кто рискнет сказать, что он не прав, Вадим считает глупцом. Верно и обратное утверждение: если человек не спорит, то Вадиму он сразу кажется умным.

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

Не спорь с Вадимом, а просто эксплуатируй пункт 3. Если поможет, спасешь дизайн, если нет — хотя бы на доширак заработаешь.

5. Вовлекай Вадима в процесс

Ранее было сказано, что единственная возможность донести до Вадима, что он не прав — это согласиться с ним, а затем ненавязчиво продемонстрировать более удачное решение. Один момент: говорить «МОЕ решение» нельзя, надо говорить «НАШЕ новое решение». Вадиму очень важно считать себя незаменимым звеном в дизайн-процессе. Если хочешь получить свою пост-оплату вовремя, важно постоянно подчеркивать значимость участия Вадима.

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

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

6. Подробно объясняй все Вадиму

Вадим нихрена не понимает в дизайне.

Из-за этого ему будет тяжело решиться сказать твердое «ДА». Скорее ты услышишь что-то вроде: «Давайте попробуем другие варианты». Или получишь от него любопытный прототип.

Твоя задача предвосхищать вопросы Вадима и отвечать на них в презентации. Это не займет много времени и положительно скажется на ваших взаимоотношениях. Подойдут подробные отчеты в Microsoft Word с доказательствами каждого решения, ссылками на реально действующие проекты, где использованы подобные фишки, и отсылки к статьям профессионалов по схожим проблемам. Главное — без воды. Жирный плюс можно поставить тем, кто может презентовать анимацию работы своего интерфейса — половина вопросов сразу исчезает.

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

7. Когда Вадим глух, притворись, что ты слеп

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

Смирись, не все проекты пойдут в портфолио. Даже больше, чем не все. 70% работ вообще лучше не показывать, если твое имя не Артем, а фамилия не Лебедев. Так себя вести может только он, остальные стесняются.

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

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

Сдавай макет. И беги. Только побыстрее: Вадим может догнать.

В то непродолжительное время, что мне довелось проработать в студии, арт-директор сказал мне фразу, которую я запомнил навсегда:

«Дизайн как бухло. Мой друг, например, любит самогон. Представь, приходит он в магазин, чтобы его купить. А продавец ему говорит:— “Нафиг тебе самогон? Возьми лучше водку”. Вот так же и с клиентами. Им надо давать то, за чем они приходят».

Я бы добавил к его словам еще одно предложение: продавай самогон тем, кто не хочет пить водку. А тем, кто хочет водку, никогда не впаривай самогон.

Здравствуйте, хватит проходить мимо, сохранять пост и говорить себе, что Вы его обязательно прочтете "Потом". Прочтите его именно сейчас, уделите всего несколько минут! Удачи Вам в творческой работе!

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

Загрузка не должна быть скучной

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

Разнообразить экран загрузки можно как показано на примере слева:

Более плавный переход между страницами

Анимация может быть использована для более плавной подгрузки сайта или приложения.

Такие переходы не стоит делать

И использование анимации в том же меню

Помогает объяснить взаимоотношения между элементами

Анимация может повысить чувство непосредственной работы с приложением.

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

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

Обозначьте анимацией обратную связь

Анимация может быстрее обратить внимание человека на то, что что-то пошло не так.

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

Источник: say-hi