spacenyash

spacenyash

пикабушник
пол: мужской
поставил 18379 плюсов и 56 минусов
отредактировал 0 постов
проголосовал за 0 редактирований
37К рейтинг 601 подписчик 278 комментариев 107 постов 32 в "горячем"
60

Мысли дизайнера: часть 1 / часть 2

Публикуем к ознакомлению мысли Арт-директора и сооснователя студии Flyphant Саши Тихонова

Мысли дизайнера: часть 1 / часть 2 Дизайн, Веб-Дизайн, Интерфейс, Длиннопост

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

Будет полезно дизайнерам, фрилансерам, людям профессий из смежных областей.

Мысль 1


Разрабатывая следующий интерфейс не забывайте о дальтониках: «Разной степенью дальтонизма страдают 2–8 % мужчин, и только 0,4 % женщин.». То есть просто изменения цвета ссылки в меню для текущего раздела будет недостаточно.

Мысль 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

Показать полностью
149

Экспорт векторных слоев из AI в PSD

Экспорт векторных слоев из AI в PSD Дизайн, Урок, Иллюстратор, Photoshop, Скрипт, Веб-Дизайн, Статья, Длиннопост

Как перенести иллюстрацию, дизайн сайта или UI из «Иллюстратора» в «Фотошоп», не используя копирование в виде смарт-объекта? При этом хочется сохранить объекты векторными после переноса. В этом должна помочь стандартная функция экспорта в PSD, но так ли это?


В «Иллюстраторе» в меню FileExportPSD есть опция «Write Layers» с пунктом «Maximum Editability», но результат — случайные растровые слои, в которые превращаются векторные объекты. Не похоже что-то на «максимум возможности редактирования» в «Фотошопе».

Экспорт векторных слоев из AI в PSD Дизайн, Урок, Иллюстратор, Photoshop, Скрипт, Веб-Дизайн, Статья, Длиннопост

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

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


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

Экспорт векторных слоев из AI в PSD Дизайн, Урок, Иллюстратор, Photoshop, Скрипт, Веб-Дизайн, Статья, Длиннопост

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

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

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

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

Экспорт векторных слоев из AI в PSD Дизайн, Урок, Иллюстратор, Photoshop, Скрипт, Веб-Дизайн, Статья, Длиннопост

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

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

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

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



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

Экспорт векторных слоев из AI в PSD Дизайн, Урок, Иллюстратор, Photoshop, Скрипт, Веб-Дизайн, Статья, Длиннопост

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

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

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

Исключения


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


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


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

Экспорт векторных слоев из AI в PSD Дизайн, Урок, Иллюстратор, Photoshop, Скрипт, Веб-Дизайн, Статья, Длиннопост

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

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


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


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


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


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


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


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

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

Экспорт векторных слоев из AI в PSD Дизайн, Урок, Иллюстратор, Photoshop, Скрипт, Веб-Дизайн, Статья, Длиннопост

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

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


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

Показать полностью 5
41

ТЕРМИНОЛОГИЯ ДИЗАЙНА. ЧАСТЬ 2

ТЕРМИНОЛОГИЯ ДИЗАЙНА. ЧАСТЬ 2 Дизайн, Статья, Терминология, Веб-Дизайн, Длиннопост

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



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



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

Линки


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

ТЕРМИНОЛОГИЯ ДИЗАЙНА. ЧАСТЬ 2 Дизайн, Статья, Терминология, Веб-Дизайн, Длиннопост

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



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



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


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

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



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


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

ТЕРМИНОЛОГИЯ ДИЗАЙНА. ЧАСТЬ 2 Дизайн, Статья, Терминология, Веб-Дизайн, Длиннопост

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

ТЕРМИНОЛОГИЯ ДИЗАЙНА. ЧАСТЬ 2 Дизайн, Статья, Терминология, Веб-Дизайн, Длиннопост

Разрешение


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

ТЕРМИНОЛОГИЯ ДИЗАЙНА. ЧАСТЬ 2 Дизайн, Статья, Терминология, Веб-Дизайн, Длиннопост

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


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


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

ТЕРМИНОЛОГИЯ ДИЗАЙНА. ЧАСТЬ 2 Дизайн, Статья, Терминология, Веб-Дизайн, Длиннопост

Резкость


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

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


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

Шум


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

ТЕРМИНОЛОГИЯ ДИЗАЙНА. ЧАСТЬ 2 Дизайн, Статья, Терминология, Веб-Дизайн, Длиннопост

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

ТЕРМИНОЛОГИЯ ДИЗАЙНА. ЧАСТЬ 2 Дизайн, Статья, Терминология, Веб-Дизайн, Длиннопост

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


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

ТЕРМИНОЛОГИЯ ДИЗАЙНА. ЧАСТЬ 2 Дизайн, Статья, Терминология, Веб-Дизайн, Длиннопост

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

ТЕРМИНОЛОГИЯ ДИЗАЙНА. ЧАСТЬ 2 Дизайн, Статья, Терминология, Веб-Дизайн, Длиннопост

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

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

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


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

ТЕРМИНОЛОГИЯ ДИЗАЙНА. ЧАСТЬ 2 Дизайн, Статья, Терминология, Веб-Дизайн, Длиннопост

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

Показать полностью 10
79

ТЕРМИНОЛОГИЯ ДИЗАЙНА. ЧАСТЬ 1

ТЕРМИНОЛОГИЯ ДИЗАЙНА. ЧАСТЬ 1 Дизайн, Веб-Дизайн, Терминология, Статья, Гифка, Длиннопост

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



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



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

ТЕРМИНОЛОГИЯ ДИЗАЙНА. ЧАСТЬ 1 Дизайн, Веб-Дизайн, Терминология, Статья, Гифка, Длиннопост

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

ТЕРМИНОЛОГИЯ ДИЗАЙНА. ЧАСТЬ 1 Дизайн, Веб-Дизайн, Терминология, Статья, Гифка, Длиннопост

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



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



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



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



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

ТЕРМИНОЛОГИЯ ДИЗАЙНА. ЧАСТЬ 1 Дизайн, Веб-Дизайн, Терминология, Статья, Гифка, Длиннопост

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



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 (красный, зеленый, синий). Любое изображение, которое вы видите на мониторе складывается только из этих трех цветов. Магия, правда?

ТЕРМИНОЛОГИЯ ДИЗАЙНА. ЧАСТЬ 1 Дизайн, Веб-Дизайн, Терминология, Статья, Гифка, Длиннопост

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

ТЕРМИНОЛОГИЯ ДИЗАЙНА. ЧАСТЬ 1 Дизайн, Веб-Дизайн, Терминология, Статья, Гифка, Длиннопост

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


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

ТЕРМИНОЛОГИЯ ДИЗАЙНА. ЧАСТЬ 1 Дизайн, Веб-Дизайн, Терминология, Статья, Гифка, Длиннопост

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


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


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

ТЕРМИНОЛОГИЯ ДИЗАЙНА. ЧАСТЬ 1 Дизайн, Веб-Дизайн, Терминология, Статья, Гифка, Длиннопост

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

ТЕРМИНОЛОГИЯ ДИЗАЙНА. ЧАСТЬ 1 Дизайн, Веб-Дизайн, Терминология, Статья, Гифка, Длиннопост

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



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


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


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


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


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


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

Источник wearegeek.ru

Показать полностью 7
109

Как выбрать шрифт: инструкция арт-директора «Медузы»

Как выбрать шрифт: инструкция арт-директора «Медузы» Дизайн, Типографика, Статья, Лайфхак, Полезное, Шрифт, Инструкция, Видео, Длиннопост

Часто приходится сталкиваться с ситуацией, когда нужно выбрать шрифт: для презентации, объявления, поздравления, резюме или для собственного сайта. Арт-директор «Медузы» Сергей Сурганов написал инструкцию о том, как и где найти подходящий шрифт и как его правильно использовать.

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

Показать полностью 3 1
71

50 оттенков RGB или как избежать мазохизма в отношениях с проблемными клиентами

50 оттенков RGB или как избежать мазохизма в отношениях с проблемными клиентами Дизайн, Веб-Дизайн, Статья, Интересное, Длиннопост

Публикуем очень интересную статью от 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% работ вообще лучше не показывать, если твое имя не Артем, а фамилия не Лебедев. Так себя вести может только он, остальные стесняются.



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



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



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



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

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

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

Как использовать анимацию для улучшения UX

Как использовать анимацию для улучшения UX Дизайн, Статья, Полезное, Интерфейс, Гифка, Длиннопост

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


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


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


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

Как использовать анимацию для улучшения UX Дизайн, Статья, Полезное, Интерфейс, Гифка, Длиннопост

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


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

Как использовать анимацию для улучшения UX Дизайн, Статья, Полезное, Интерфейс, Гифка, Длиннопост
Такие переходы не стоит делать

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

Как использовать анимацию для улучшения UX Дизайн, Статья, Полезное, Интерфейс, Гифка, Длиннопост

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


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


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

Как использовать анимацию для улучшения UX Дизайн, Статья, Полезное, Интерфейс, Гифка, Длиннопост

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

Как использовать анимацию для улучшения UX Дизайн, Статья, Полезное, Интерфейс, Гифка, Длиннопост

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


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

Как использовать анимацию для улучшения UX Дизайн, Статья, Полезное, Интерфейс, Гифка, Длиннопост

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

Как использовать анимацию для улучшения UX Дизайн, Статья, Полезное, Интерфейс, Гифка, Длиннопост

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

Показать полностью 6
333

Цвет для чайников. Обширное руководство для начинающих

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

Несколько дней назад в Дизайн-Кабаке появилась очень интересная статья от Андрея Гука о теории цвета. Он собрал в одном материале всю имеющуюся информацию по данной теме, в итоге получилась очень занимательная статья, которая обязательная для изучения начинающим. Вы поймете как устроен цвет, как мы его воспринимаем и как с ним работать.

__


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

1. Немного теории, для понимания основ.



Дисперсия света


Исаак Ньютон один из первых кто смог разложить белый солнечный свет на цветовой спектр — позднее это назвали “Дисперсией света”.


Опыт заключался в следующем: он пропускал солнечный свет через призму. В ней луч света расслаивался на цвета и выводился на экран.

Цвет для чайников. Обширное руководство для начинающих Цвет, Лайфхак, Дизайн, Длиннопост

Обложка альбома группы Pink Floyd “Dark Side of the Moon», отображающая дисперсию света.


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


Интересный факт, оказывается, количество цветов в радуге, зависит от страны проживания. Жители Китая считают, что в радуге пять цветов. Для жителей США типичным ответом будет шесть цветов, в то время как жители России насчитывают их семь (+голубой). На самом деле в радуге собран весь спектр, но мы можем увидеть только некоторые из них.

Если все эти цвета пропустить обратно через собирательную призму, то мы опять получим белый цвет.



Дополнительные цвета


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


(красный + оранжевый + желтый) + (зеленый + синий + фиолетовый) = белый


Даже если мы смешаем только отдельные противоположные цвета красный + зеленый, оранжевый + синий, желтый + фиолетовый то в результате получим белый.


Два цвета, объединение которых даёт нам белый цвет, называютсядополнительными цветами.



Пример: Если мы удалим из спектра один цвет, к примеру красный и с помощью линзы соберем оставшееся цвета: оранжевый + жёлтый + зеленый + синий + фиолетовый, то результатом у нас будет зеленыйцвет. Потому что зеленый является дополнительным цветом по отношению к удалённому нами красному. Почему именно такие соотношения “зеленый — красный” расписано ниже.



Вычитаемые цвета


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


Поглощаемые в физическом эксперименте цвета называются такжевычитаемыми.



Параметры цвета


Тон / Hue — это то, что мы имеем в виду, говоря «цвет». Синий, красный, зеленый, оранжевый, фиолетовый и тд.


Насыщенность / Saturation — параметр цвета, характеризующий степень чистоты цветового тона.


Яркость / Brightness — обозначает степень отличия цвета от белого или черного.

Цвет для чайников. Обширное руководство для начинающих Цвет, Лайфхак, Дизайн, Длиннопост

Что такое RGB, CMYK, HEX и чем они отличаются


RGB (Red, Green, Blue) — аддитивная (сложение) цветовая модель. Основные цвета которой красный, зеленый и синий. Это значит, что при сложении всех цветов у нас получится белый. Такая модель используется во всех электронных устройствах. Записывается в виде: rgb(0,0,0), каждый из цветов может варьироваться от 0 до 255 включительно, где (0,0,0) — черный цвет, (255,255,255) — белый. Дополнительно может добавляться четвертый параметр — аlpha канал, который означает насколько прозрачен цвет. Alpha канал может принимать значения от 0 до 1, к примеру rgba(31,104,2, 0.8).



HEX — это RGB в шестнадцатеричной системе. Выглядит таким образом #102945, первые две цифры отвечают за красный цвет, вторые за зеленый и третьи за синий. Каждый символ может принимать значения: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f. Где #000000 — черный цвет, а #ffffff — белый.



CMYK (Cyan, Magenta, Yellow, Key color) — субтрактивная (вычитание) схема формирования цвета. Состоит из голубого, пурпурного, жёлтого и ключевого — черного цвета. Эта модель используется в полиграфии при цветной печати. Бумага, как и все материалы, отражает свет, поэтому считают, какое количество света отразилось от поверхности. Несмотря на то, что чёрный цвет можно получать смешением в равной пропорции пурпурного, голубого и жёлтого красителей, по ряду причин (чистота цвета, переувлажнение бумаги, стоимость и др.) такой подход неудовлетворителен, поэтому используют отдельно черный цвет.

Цвет для чайников. Обширное руководство для начинающих Цвет, Лайфхак, Дизайн, Длиннопост

Почему мы видим цвета такими?


Световые волны сами по себе не имеют цвета. Цвет возникает лишь при восприятии этих волн человеческим глазом и мозгом.


Цвет предметов возникает, главным образом, в процессе поглощения волн. Желтый сыр выглядит желтым потому, что он поглощает все остальные цвета светового луча и отражает только желтый. Когда мы говорим: «этот сыр желтый», то мы на самом деле имеем в виду, что молекулярный состав поверхности сыра таков, что он поглощает все световые лучи, кроме желтого. Сыр сам по себе не имеет никакого цвета, цвет создаётся при его освещении.

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

2. Как мы воспринимаем цвета. Психология цвета


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

Цвет для чайников. Обширное руководство для начинающих Цвет, Лайфхак, Дизайн, Длиннопост

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


Пользователи не понимают нашего цветокодирования. Желтый значит «веселый» для вас, но для для других это может значить «не здоровый» или «блевотный». Каждый человек воспринимает цвета очень субъективно и зависит это только от его контекста. Он любит одни цвета, и ненавидит другие. И это в значительной степени непредсказуемо. Вы не сможете угадать.


Цвет не является вербальным или рациональным. Он контекстен и эмоционален. Цвет — сильный инструмент, но сам по себе он не имеет смысла.

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



3. Цветовая гармония


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


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

Цвет для чайников. Обширное руководство для начинающих Цвет, Лайфхак, Дизайн, Длиннопост

Цветовой круг по Иоханнесу Иттену (1961)



Композиционные схемы


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

Цвет для чайников. Обширное руководство для начинающих Цвет, Лайфхак, Дизайн, Длиннопост

4. Цветовой контраст


Существует семь типов цветовых контрастов:


1. Контраст по тону.


2. Контраст светлого и тёмного.


3. Контраст холодных(синий, фиолетовый) и тёплых(оранжевый, красный, желтый) цветов.  

(Зеленый цвет может относится и к теплым и к холодным цветам, в зависимости от того,

какого цвета в нем больше, желтого или синего).


4. Контраст дополнительных цветов (противоположные в круге Иттена).


5. Симультанный контраст — это создание иллюзии дополнительного цвета на соседнем

оттенке.


6. Контраст цветового насыщения (один цвет: яркий, а второй блеклый).


7. Контраст количества цвета по соотношению к другому цвету.



5. Как составить свою палитру цветов


Ниже описан лайфхак по выбору цвета от Лауры Элизабет. Всю статью можно прочитать тут.


Выбор основного цвета


В нашем распоряжении имеется 10 миллионов цветов, но нам необходимо выбрать всего один. Этот цвет будет основным для нашего бренда.


Необходимо обосновывать выбор цвета. Несколько советов, как выбрать основной цвет:


Используйте то, что у вас есть. Если у клиента уже есть логотип с установленным цветом, то обычно это и будет начальный цвет.


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


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


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


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


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


Далее перейдите на сайт Dribbble или Designspiration и нажмите на “Colors”, перед вами появится палитра цветов.

Цвет для чайников. Обширное руководство для начинающих Цвет, Лайфхак, Дизайн, Длиннопост

Цвета на сайте http://designspiration.net/


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


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

Цвет для чайников. Обширное руководство для начинающих Цвет, Лайфхак, Дизайн, Длиннопост

Создание палитры


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


1. Основной цвет (его мы уже выбрали)


2. Цветовой акцент (мы вернёмся к этому чуть позже)


3. Белый (нейтральный)


4. Темно-серый (нейтральный)


5. Светло-серый (нейтральный, необязательно)



Как найти цветовой акцент


Перейдите на сайт Paletton, введите свой цвет в специальное поле (внизу слева). И выберете одну из цветовых схем. Если вам совершенно не нравится, что получается, можете нажать на кнопку “randomize” и выбрать другие похожие оттенки.



Как найти серые оттенки


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


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



1. Создайте две формы и залейте их #424242 и #fafafa .


2. Создайте слой-заливку поверх этих двух фигур.


3. Измените её цвет на основной цвет.


4. Установите режим смешивания на “Overlay”, а непрозрачность установите

в промежутке от 5 до 40% .


5. Откройте палитру и скопируйте получившиеся значения.


Цветовая схема готова!



Как применять цветовую схему


Для начала создайте дизайн с помощью серых блоков. Только потом начните его разрисовывать.


Основной цвет используется как на больших фигурах, так и на иконках.


Акцент, выгодно выделяется на фоне основного цвета. Он используется в очень малых областях — кнопках и иконках. Чем меньше вы используете этот цвет, тем больше он будет выделяться.


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


Белый и светло серый цвета используются как фон.



Вывод


Теперь, когда вы знакомы с основами, начните составлять собственные палитры и схемы, экспериментируйте и практикуйтесь и тогда, у вас все точно получится!



Полезные ссылки


http://paletton.com/ — цветовой круг для составления палитр


https://color.adobe.com/ru/create/color-wheel/ — цветовой круг для составления палитр


https://coolors.co/ — отличный генератор случайных палитр


http://colorhunt.co/ — подобранные цветовые палитры


https://material.google.com/style/color.html — основные material цвета


https://www.materialpalette.com/blue/yellow — составление material палитр на основе 2 цветов


http://material.colorion.co/ — составленные палитры в стиле материал


http://www.flatuicolorpicker.com/all — цвета в стиле flat


http://swisscolors.net/ — подобранные цвета в швейцарском стиле


http://www.gradients.io/ — приятные градиенты


http://uigradients.com/ — подобранные градиенты


http://hslpicker.com/ — удобный конвертер цветов

Показать полностью 8
171

Грехи начинающего дизайнера

Грехи начинающего дизайнера Лайфхак, Дизайн, Статья, Полезное, Длиннопост

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


Безбрифность

Грехи начинающего дизайнера Лайфхак, Дизайн, Статья, Полезное, Длиннопост

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

Торопливость

Грехи начинающего дизайнера Лайфхак, Дизайн, Статья, Полезное, Длиннопост

Многие дизайнеры с которыми мне довелось поработать страдали этим «заболеванием». Вне зависимости от того являлся ли человек фрилансером или работал в штате. Скорее сделать, отправить клиенту, утвердить, забыть, взять новый заказ и так по кругу. Иногда скорость важна, но часто это приводит ко многим ошибкам и недочетам. Лучше не торопитесь, и если у вас не хватает времени, то попросите у клиента дополнительный час, чтобы закончить работу спокойно. В большинстве случаев клиент с пониманием отнесётся к этому и пойдёт к вам на встречу. Уделите внимание качеству вашей работы, так как в последствии только оно имеет значение, а не сэкономленный час. Уважайте себя и свой труд.

Невнимательность

Грехи начинающего дизайнера Лайфхак, Дизайн, Статья, Полезное, Длиннопост

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

Затягивание

Грехи начинающего дизайнера Лайфхак, Дизайн, Статья, Полезное, Длиннопост

Для многих это уже стало некой нормой работы. Дизайнеры изначально верят в то что успеют сделать в срок, но в итоге проваливают сроки по миллионам причин. Заказчики, которые набили уже шишки на этом закладывают это в тайминг. Ставьте себередлайн* и оставляйте в запасе 1–2 дня на то, чтобы уложится в срок и удивить заказчика своей пунктуальностью.



Редлайн* — срок сдачи продукта внутри компании. Другими словами это тот срок, к которому продукт уже готов на 100%

Дилетантство

Грехи начинающего дизайнера Лайфхак, Дизайн, Статья, Полезное, Длиннопост

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

Бессмысленность

Грехи начинающего дизайнера Лайфхак, Дизайн, Статья, Полезное, Длиннопост

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

Рыбность

Грехи начинающего дизайнера Лайфхак, Дизайн, Статья, Полезное, Длиннопост

Это же так просто — взял готовый lorem ipsum, взял готовые изображения из интернета и вставил в макет, главное же красиво получилось, и не важно, что не по смыслу. Клиент же это понимает и проигнорирует «рыбный» текст и картинки. На самом деле нет, клиент этого не понимает. Заказчик скорее придерется к тому что у вас картинки странные или текст не по смыслу стоит, чем к тому что кнопка отклонилась на 5px. Заказчик читает текст и смотрит картинки. Для него это важно, так что создавайте магию для него. Ему важно видеть картину целиком. Получите необходимый контент у заказчика, либо вставляйте тот, который будет ближе всего по смыслу. Если сайт о яблоках, то найдите подходящие фотографии яблок и вставляйте текст о яблоках.

Безмолвие

Грехи начинающего дизайнера Лайфхак, Дизайн, Статья, Полезное, Длиннопост

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

Непрезентабельность

Грехи начинающего дизайнера Лайфхак, Дизайн, Статья, Полезное, Длиннопост

Вот уже заканчивается второй день изнурительного труда, вы на последней секунде перед сроком сдачи проекта заканчиваете макет, сохраняете psd файл, поспешно экспортируете картинку для показа клиенту и отправляете в скайп. Казалось бы, работа окончена и теперь можно с легкостью вздохнуть и налить себе кофейку. Но в конце работы, вы сделали самую большую ошибку за эти мучительные два дня. Люди ещё не читают мысли и то что в макете вам кажется гармоничным и логичным, клиенту может показаться совсем не таковым. Обязательно возьмите за правило пояснять свои работы, особенно при первом показе клиенту. Ведь ваша работа это не только красивая картинка, но это и все ваши мысли во время проекта, решения, к которым вы пришли за время работы над макетом. Правилом хорошего тона является прикреплять описание к макету, а в идеале готовить полноценную презентацию. Это поможет донести все мысли до клиента и повысит ваш профессиональный статус.

Высокомерие

Грехи начинающего дизайнера Лайфхак, Дизайн, Статья, Полезное, Длиннопост

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



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

Делитесь своими мыслями в комментариях.

Автор: Dima Groshev (Не реклама)

Показать полностью 9
1776

8 каналов YouTube, которые помогут разобраться в Photoshop

Уже четверть века Adobe Photoshop заслуженно называют самым мощным инструментом для редактирования растровой графики. Долгие годы сделали программу отраслевым стандартом, образцом для подражания. Её название укрепилось в лексиконе последних поколений. В нашей статье — восемь каналов YouTube, которые помогут перейти с Photoshop на ты.


Реклама, веб-дизайн и профессиональная фотография — основные рынки, на которых хорошо зарабатывают с помощью Photoshop. С другой стороны, миллионы людей углубляются в тонкости графического редактора исключительно для себя: например, для качественной ретуши собственных снимков и наложения на них сложных эффектов. Не сомневайтесь, овчинка стоит выделки, правда, вам придётся усердно учиться и кропотливо практиковаться. Наша подборка YouTube-инструкторов поможет вам на старте.


Adobe Photoshop


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

Смотреть канал →


Tutvid


Авторский проект Натаниэля Додсона (Nathaniel Dodson) развивается на протяжении десяти лет. На своём канале tutvid бодрый фотограф делится собственным опытом обработки портретов, фотографий еды, изображений Apple Watch, а также рассказывает о трюках новых версий графического редактора или размышляет над смежными темами, например «Плагиат — это хорошо», «Когда использовать Photoshop, а когда — Illustrator». Некоторые уроки длятся около часа, однако раскрывают сложные темы сполна.

Смотреть канал →


PhotoGavin


Гэвин Хоя (Gavin Hoey) — победитель официальных соревнований Adobe, евангелист продуктов компании, а также активный тренер по обработке растровой графики. Громадный опыт и навыки работы с инструментами Photoshop и Lightroom, несомненно, будут полезны всем фотографам, несмотря на то, что последний выпуск был выложен больше года назад: автор занялся схожим проектом, связанным с постановкой фото.

Смотреть канал →


IceflowStudios


С 2006 года Говард Пинский (Howard Pinsky) выкладывает на канал IceflowStudios уроки по Photoshop и Lightroom. Большой список качественного видео разбит на тематические плей-листы, среди которых, как мне кажется, особняком стоят Minute Photoshop Tips — короткие ролики с максимальной пользой для тех, у кого времени в обрез. К слову, недавно Говард демонстрировал своё мастерство в режиме реального времени на Twitch. Надеюсь, ему понравилось и начинание приживётся.

Смотреть канал →


Blue Lightning TV


Марти Геллер (Marty Geller), владелец канала Blue Lightning TV, делится рецептами классических трюков и эффектов Photoshop, причём делает это очень скрупулёзно. Наверняка эти простые и доступные уроки понравятся прежде всего новичкам. Немаловажно, что Марти записывает новые видео с завидным постоянством и не обходит стороной животрепещущие темы, например Рождество или выход нового эпизода «Звёздных войн».

Смотреть канал →


Photoshop Tutorials


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

Смотреть канал →


Photoshop Training Channel


Название канала Photoshop Training Channel говорит само за себя: уроки Photoshop, трюки Photoshop, эффекты Photoshop и ничего более. Здесь принята особая мантра. Цитирую: «Просто покажи мне, как это делается».

Смотреть канал →


PhlearnLLC


800 тысяч подписчиков и 42 миллиона просмотров говорят о высочайшем классе PhlearnLLC. Это канал для молодых, продвинутых и опытных пользователей Photoshop от профессиональных фотографов и ретушёров. Помимо подготовки обучающих видео для YouTube, команда Phlearn Photoshop and Photography продаёт особые сборники уроков с исходными RAW-файлами, текстурами и детальными пояснениями по самым востребованным направлениям дизайна и фотографии, например созданию фото в стиле пин-ап или глубокой ретуши портретов.

Смотреть канал →

Показать полностью 7

Как оставить квартиру (или дачу) на время отъезда – и не беспокоиться. Гайд по современным системам безопасности

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

Лето — сезон отпусков для тех, кто весь год хорошо работал, и горячий период для домушников (так называют «квартирных грабителей»). Столько квартир остается без присмотра! Добавьте сюда риск протечек и пожаров – и уезжать будто бы уже не хочется. Чтобы во время отдыха не вспоминать все сюжеты из криминальных фильмов, вместе с Ростелекомом советуем, как защитить свой дом.


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


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


Переживаю, что в квартиру залезут воры


Для начала помните об азбучных истинах: не слишком распространяйтесь, когда, куда и на какой срок вы собираетесь уехать. Попросите кого-то забирать почту из ящика, чтобы торчащие из него объявления не показывали, что вы давно не появлялись. Здесь как раз лучше обратиться к соседям. Но это не все.

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

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


Не лишним установить датчики открытия окон и дверей. Сверлить ничего не нужно, монтаж простой: две детали устройства крепятся к раме. Если датчик сработает, вам придет уведомление. Например, сервис Умный дом от Ростелекома отправляет push, но при проблемах с интернетом вы получите SMS. В общем, точно узнаете, что дверь или окно открылись. Важно, что датчик фиксирует изменение температуры и уровня освещенности, так что даже если окно разобьют, а не откроют, он отреагирует.


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


А если свои? Тут бы помогло Видеонаблюдение, чтобы посмотреть, кто пришел. Сделать это можно из любой точки мира: не важно, едете ли вы на дачу за город или на остров в океане. Но важно, чтобы остров не был необитаемым, – нужен интернет. Сервис видеонаблюдения от Ростелекома умеет записывать происходящее и днем, и ночью. Видео в HD или Full HD качестве хранится в облаке до 14 дней, так что доказательства взлома сохранятся, даже если вор сломает камеру.


Дал ключи знакомым и переживаю, что они будут делать в квартире


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

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

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


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


Не помню, выключил и я утюг


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

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

Самое простое решение — перед выходом из дома проверять все розетки. Вот только от тревоги это все равно не спасает, можно проглядеть. А если у вас еще и плохая память… Здесь выручит умная розетка. Ее можно включать и выключать на расстоянии. Скажем, переживаете, что не выдернули вилку утюга — заходите в приложение и видите, что все в порядке. А если забыли – тут же выключаете розетку.


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


Боюсь, что прорвет батарею


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

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

А лучше всего зафиксировать протечку в самом ее начале, чтобы минимизировать ущерб. На этот случай есть датчики протечки. Устройство работает от батарейки, легко крепится и реагирует не только непосредственно на воду, но и на изменение влажности и температуры. Это позволяет заметить потоп на ранней стадии и быстро среагировать – вызвать соседей или попросить управляющую компанию срочно перекрыть воду. В общем, любыми способами спасти квартиру!


Всего так много, а как понять, что нужно именно мне?


Зависит от того, какие угрозы вы считаете самыми реальными. Например, по статистике МВД России за первые полгода 2019 года, каждое 44-е зарегистрированное преступление – это квартирная кража. Тут бы пригодился датчик открытия окон и дверей или камера.


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

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

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


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

Показать полностью 5
Отличная работа, все прочитано!