Академический Документы
Профессиональный Документы
Культура Документы
БИЗНЕС
Алексей Бычков
ФРИЛАНС
КАК ЗАРАБАТЫВАТЬ
БОЛЬШЕ, ЗАБЫВ ПРО ОФИС
И ДРЕССКОД
Издательство АСТ
Москва
УДК 004
ББК 32.973
Б95
Бычков, Алексей.
Б95 Фриланс. Как зарабатывать больше, забыв про офис
и дресс-код/ А. Бычков. — Москва: Издательство АСТ,
2019. — 320 с.: ил. — (Звезда Рунета. Бизнес).
ISBN 978-5-17-106708-3.
Эта книга в первую очередь для тех, кто решил связать свою профес-
сиональную деятельность с веб-дизайном. Простой, понятный, молодеж-
ный, местами жаргонный формат повествования о том, как продать заказ-
чику свой дизайн.
Когда вы будете читать эту книгу, представьте, что мы собрались за
пиццей обсудить новый проект и на все про все у нас несколько часов.
Поэтому предлагаю: по делу и без воды. Хотя нет, пожалуй, пицца лучше
зайдет с колой!
УДК 004
ББК 32.973
ISBN 978-5-17-106708-3.
3
плохо заходит. Днем поспать — милое дело — час-
то себя балую! Боюсь высоты и все проспать. Зна-
комые предлагают написать еще книгу, о том, как
я все успеваю, мне же кажется иначе: многое сделал
бы еще сегодня, а уже стемнело. Плохо отношусь
к Андроиду, хотя всю жизнь провел за Виндой. Поч-
ти всегда штормит от неграмотных, но и сам пе-
риодически допускаю ляпы, за которые стыдно.
Как-то совсем не очень отношусь к ребятам, кото-
рым лень поздороваться, но еще больше не нравит-
ся приветствие «Доброго времени суток».
А в дизайне меня совсем не радует популярный до
сих пор у многих других скевоморфизм, поэтому
я делаю клевый современный дизайн. Топлю за ми-
нимализм и клевые детали, хотя и у меня бывает
кривенько с прицелом.
4
Дальше у нас по плану три скучных разворота
о том, как «до этого» докатился. Можно проскролить,
а мы пока проверим работает ли звук.
Заметка на полях:
Ну, могут же 6 из 320 страниц быть скуч-
ными? :)
4 ГОДА РАБОТАЛ
БЕЗ ФОТОШОПА
5
Прокачал Скил быстро убегать, грустить и переклеи-
вать обои.
6
Что делал К слову, посещаемость универа стремилась
в район 1–3%. Кстати, если твоя смена, а у тебя
лабы, и подменить тебя некем, то — твои про-
блемы =). Официально-то вроде и был сотруд-
ником универа, но не все преподы это приветс-
твовали. И однажды пришлось попросить
директора по работе с молодежью попросить
дядю, чтобы тот все же поставил мне мою трой-
ку. Ну а корочка в результате все равно точно
такая же, как и у тех, кто не прогуливал и все
зубрил.
Должность Конструктор
7
Когда Но прогулявшись по производству, я понял, что
не могу отличить транзистор от резистора,
и понятия не имею, что такое конденсатор, хотя
по специальности я инженер-электроник, и по
идее на заводе микросхемы паять — это вот
мое. Но нет. Вспомнил, что на лабах в универе
было что-то связанное с автокадом, и я в нем
даже что-то нажимал. И через пару дней я уже
был конструктором (вопросы, как нарисовать
прямоугольник и что-то там еще, на собеседо-
вании я осилил). Так я начал чертить деревян-
ные дома / бани / беседки. Однажды «забожил»,
и строителям пришлось собирать дом с комна-
той без дверей. Не без этого. А весь каеф был
в том, что все это дело было через дорогу (ре-
ально на расстоянии одной выкуренной сигаре-
ты) от того самого моего клуба. Поэтому...
8
Периодически спрашивают, какое нужно образова-
ние для успешного фриланса, работал ли я в офисе,
а также задают другие вопросы из серии «откуда но-
ги растут». Поэтому постарался вкратце (а получи-
лось аж на 6 страниц, сорян) интерпретировать свою
карьерную лестницу в текстовом формате.
ЕСЛИ СКУКОТИЩА,
ПРОСТО СКРОЛЬ
К 14ОЙ СТРАНИЦЕ.
4 ГОДА ПОЛИГРАФИИ
9
Задачи Скорее техническая рутина — производство
же. Но зато я познакомился со всеми процес-
сами в полиграфии.
10
дизайна: проверял шаблоны других дизайне-
ров, заливал их в каталог, участвовал в разра-
ботке онлайн-печати фотокниг. В общем, все
было клево и все нравилось.
11
Причем, сам я даже не планировал искать ва-
кансию веб-дизайнера — ведь опыта веб-раз-
работок было ровно нисколько. Так вот, собе-
седования как такового не было. Помню еще
очки надел, думал это сразу +100 к зп =). Спро-
сили, умею ли в Фотошоп, какой мне нужен
комп и когда смогу приступить. Предложили
несколько дней поработать удаленно из дома,
глянуть, потяну ли я их задачи. А делать нуж-
но было в основном флеш-баннеры. Кое-как
сделал свой первый баннерок дома, помню,
еще поржали, что ни один текст прочитать
невозможно — слишком быстро менялись
слайды. Через пару дней сказали, что можно
в офис передислоцироваться и нужно трудо-
вую захватить.
12
Задачи В процессе еще освоил (по своей инициативе,
за что потом получил прибавку к зп) Axure
и начал делать динамические прототипы для
других проектов.
Через год понял, что уперся и расти больше
некуда. Все эти локализации и анимация бан-
неров изрядно надоели, интересной работу
назвать уже больше не мог. К тому же, парал-
лельно уже начал работать на Веблансере:
а там и логотипы, и дизайн сайтов, и всякие
конкурсы, а главное, что за свой второй месяц
на фрилансе я уже заработал свою офисную
зарплату, а за второй месяц — получилась
уже в два раза больше офиса, ну а в третий —
на бирже заработал три своих зарплаты на
проектах, которые уже выбирал сам: логоти-
пы, страницы сайтов, а не ждал очередной
джепег для локализации. Поэтому пришлось
поговорить с директором и решили, что пора-
ботаю у них еще три месяца, и если ничего
интересного не смогут мне предложить, то
разойдемся. Разошлись.
13
8 месяцев — дизайнил продуктовые лендинги
14
Плюшки Обратно — я отказался, так как у него рабочий
день заканчивался раньше моего, да и не всегда
же сразу домой. А через несколько месяцев я ку-
пил себе реношку. Второй плюс: фрилансил
в офисе, причем, не скрывал этого. Видимо, то,
что я делал, их устраивало на столько, что закры-
вали глаза. Главное же результат, да? Да и я от-
влекался на человеческие проекты, ведь эти пись-
ки-сиськи-похудашки достали довольно быстро.
Несколько часов стабильно занимался фрилан-
сом, поначалу просто чтобы не свихнуться. Полу-
чался неплохой $ профит: и фриланс, и фриланс
в офисе, и офис. Все равно достало. Когда в деся-
тый раз ты делаешь лендинг на одну и ту же те-
му, а она про «бубенцы» — плакать хочется и ты
этого не скрываешь: работа ацтой, надоело, сило-
чек больше нет. А скайп твой читает начальство.
Но предложить ничего не может: ну вот такой
у них бизнес, что ж поделать. Или терпи, или иди
на фултайм фриланс. В итоге уже через 8 меся-
цев такой работы я перестал просыпаться по бу-
дильнику на работу.
15
И ВОТ >5 ЛЕТ ФРИЛАНСА
НА ВЕБЛАНСЕРЕ
Категории проектов
13 сделанных логотипов
31 баннер
699 проектов в «дизайне сайтов»
Немного всего остального
0 проектов на других биржах
16
Отзывы
173 за первый год работы на бирже
170 за второй
128 в третий год мало завезли
149 четвертый
173 и пятый год
Общение
1600+ контактов в сервисе
28 300 личных сообщений
3745 самая длинная
1790 раз вставил 5 копеек на форуме
120 сообщений с тех. поддержкой
Всякое разное
17
ЧТО СТАРОГО?
Заметка на полях:
А вот маме моей первая книга очень даже понра-
вилась! Сказала, что несколько раз перечитала :)
18
зайдет любителям водоснабжения и канализации
деревянных загородных домов: «картинок много,
непонятные, по содержанию ничего важного не по-
черпнул». Да, это вам не технологии строительства
и реконструкции энергоэффективных зданий. А кар-
тинок, к сожалению, стало еще больше. Извиняйте(
Не раз упрекали про опечатки и вот эту историю.
В свое оправдание замечу лишь, что режим [поста-
райся ты уже наконец-то] включен. Да и это же не
сообщение на форуме — тут буковок сильно больше
и они замыливаются. Относитесь проще! Вроде не
делаю в слове «мама» пять ошибок, и чудно :)
ЧТО НОВОГО?
19
ТЫ / ВЫ
Заметка на полях:
Примерно из той же истории те, кто пи-
шет ИМХО заглавными буквами, чтобы через
дорогу заметно было.
К слову, «имхо» — старперский вари-
ант. Современнее писать «кмк» (как мне ка-
жется).
20
КАРТИНКИ
Заметка на полях:
Почувствуй разницу: сейчас я пишу «подгоре-
ло», а мог бы написать «разорвало в клочья
пушистый пердак». Вот что такое литера-
турный эмоциональный переборщ :)
21
дальше стадии черновика заметка не ушла. Решил
прекратить «военные» действия, так как отнимают
кучу времени и силочек. А главное, от этого легче
никому не становится. Написал в личку с предложе-
нием о перемирии. Сделал первый шаг, так сказать.
С тех пор, стараюсь даже в своих статьях использо-
вать в качестве плохих примеров скриншоты своих
работ. Благо, и их уже собралось достаточное коли-
чество. Поэтому за примером бронировать билет
в дальние края не приходится.
В общем, постарался использовать только свои кар-
тинки. Похоже, удалось, за редким исключением.
В любом случае извиняться не планирую, так как
в прошлый раз это все равно не помогло :)
ГЛАВА 1
ADOBE
НЕМНОГО
ОКОЛОАДОБОВСКОЙ
ИСТОРИИ
Заметка на полях:
На «Баше» как-то прочитал, что пик этике-
та: захомячить кулек семечек с помощью ножа
и вилки.
С тех пор в качестве фона для своих «пра-
вил» использую семечки.
23
И сейчас их там семь… или уже больше? Смотря,
когда ты это читаешь:
#1 Убери бренд.
#2 Сверни слои.
#3 Никакого липсума.
#4 Никаких секретов.
#6 Про панель слоев.
#7 Пронумеруй варианты.
#8 Сделай «спасибу».
А ПХТ #5 завезли в мою первую книгу «Дизайн
и фриланс. Начало»
В общем, вот еще немного «семак» отсыпаю.
Заметка на полях:
Ну, круто, да? Обещал без воды, а уже целая
страница ни о чем...
Зато фон клевый! :)
Ладно-ладно. Вдруг тебе будет не понятно,
почему 9-ка в названии на следующей страни-
це, а тут «хоп» — я все объяснил!
#9 СТРОЧНЫЕ БУКВЫ
24
Заметка на полях:
А если еще и шрифт — гротеск, то совсем хо-
рошо!
25
Хороший верстальщик не использует капс, а поль-
зуется CSS-стилем: «text-transform: uppercase», что-
бы озаглавить буквы. Представь, что его попросят во
всех кнопках этот капс убрать. Ему достаточно будет
просто изменить стиль, а не перенабирать все слова
вручную. Поэтому отдавай ему тексты строчными,
даже если в макете они заглавные, а он сам уже раз-
берется, что там да как.
26
и т.д. Как-то заметил, что не могу вспомнить, как дале-
ко отодвигал футер в конкретном проекте. И либо от-
крываешь уже сделанные страницы, чтобы посмотреть
расстояние, либо... отдаешь на верстку вот такое:
ОТОДВИГАЙ ФУТЕР НА
ОДИНАКОВЫЕ РАССТОЯНИЯ
В АДАПТИВАХ ОДНОГО
ПРОЕКТА!
27
Файл 768 px — отступ 80 пх
Чем меньше девайсы, тем меньше делаю отступ. Ну
и тоже легко запомнить: 768 заканчивается на во-
семь, а отступ начинается на восьмерку — «80».
Файл 480 px — отступ 80 пх
Снова легко 80 = 80.
Файл 320 px — отступ 60 пх
Перемножаем «3×2» + приставляем «0» = получаем 60.
Теперь вообще не парюсь: всегда знаю, на какое рас-
стояние отодвинуть этот ваш футер, не зависимо от
времени суток и количества параллельных проектов.
РЕГИСТР
28
Заметка на полях:
Даже если у тебя с английским не очень,
все равно лучше пользоваться «забугорным»
интерфейсом. Как минимум, потому что
во многих туториалах менюшки не переве-
дены на русский. Как, например, и в данном
случае :)
ХОТКЕИ
29
Так как в Иллюстраторе работаю только над икон-
ками, то:
30
Заметка на полях:
И да, не спрашивай, почему в Фотошопе
у меня [F2], [F3], [F4], а в Иллюстраторе
[F4], [F5], [F6]...
Я не знаю :)
31
Заметка на полях:
Да и просили другие читатели побольше по-
добного контента :)
Заметка на полях:
Еще одно быстрое решение подобной пробле-
мы (кроме «забить») — поставить в конце
точку.
32
• Если мы выделим ненужное предложение и жмяк-
нем [Delete], то на его месте покажется следующая
часть текста, которая была скрыта за фреймом. Так
придется удалять N раз в зависимости от длины на-
шей стены текста.
• А можем поставить курсор перед ненужным текс-
том и зажать [Delete] на, вероятно, продолжитель-
ное время.
• Либо растянуть весь текстый фрейм, удалить не-
нужное любым удобным способом и вернуть фрейм
в исходное положение.
33
Но есть более клевый способ избавления от не-
нужного:
• Выделяем нужный нам текст (который хотим
оставить).
34
CTRL [X] И ПУНКТЫ МЕНЮ
Заметка на полях:
Даже если все цветные, этот способ можно
применять. Правда, наполовину :)
35
• Перекрашиваем ранее черный пункт «сообщест-
ва» в синий.
• И перекрашиваем пункт меню «База знаний»
в черный.
Заметка на полях:
Когда открываешь цвет, фокус уже поле с кодом
цвета! Достаточно просто нажать [ctrl] + [x]
36
• Останется в черный пункт вставить из буфера
цветной код, чтобы перекрасить его. И все!
Вот так я постоянно в работе экономлю немного вре-
мени, через популярные сочетания Ctrl + [c][a][v][x]
Заметка на полях:
Давай еще одно сочетание глянем, которым я
пользуюсь очень часто.
Заметка на полях:
1. ctrl + Z; 2. правая кнопка; 3. select inverse;
4. новая маска
37
Чтобы починить — придется покликать…
Заметка на полях:
К слову, у меня мизинец левой руки практи-
чески всегда в районе левых ctrl-shifta обита-
ет. А пальцы расположены на [a][w][d][про-
бел]. Из такого положения любые сочетания
кнопок практически мгновенно нажимаются
не глядя.
Наверное, привычка после бессонных ночей
в Wow и CS сформировалась.
Ну и [f2] — [f5], про которые я тебе уже рас-
сказывал, как раз неподалеку.
38
а на [i] большим пальцем — хз, мне кажется это ме-
га-удобно.
39
Заметка на полях:
Не хочу заострять внимание на том, как луч-
ше вырезать волосы или брызги воды. Таких ро-
ликов полно на ютубе. Да и уверен, ты и так
умеешь в обтравку сложных объектов :)
Я же хочу научить получать кайф от ра-
боты, пользуясь хоткеями, а не мусолить
то, что рассказали уже по десять раз дру-
гие ораторы.
Ок?)
Заметка на полях:
Очевидно, что у растра можно просто сте-
реть ненужный элемент :)
1. Нажимаем [L] (лассо).
2. Обводим элемент.
3. Нажимаем маску (убирается, все кроме
этого элемента).
4. И сразу же [ctrl] + [i] (маска инвертирует-
ся, картинка возвращается уже без ненужного
элемента).
40
На все про все буквально три секунды. Реаль-
но, не больше :) Причем самое долгое в этой
истории — передвижение курсора к кнопке
«маска».
41
[ENTER] VS [SHIFT]+[ENTER]
42
[SHIFT] И СЛОЙ
43
Заметка на полях:
Скетч не проверял по сам догадайся какой
причине. Только Фигму и ХД.
Когда разработчики добавили «плюшку»
с шифтом, естественно, первым делом пошел
плеваться и вспоминать обидные слова. А че-
рез пару часов уже не мог понять, как раньше
без этого жил.
Чаще всего пользуюсь, когда нужно отпра-
вить слой вниз внутри своей группы: кидаю
его в название папки с шифтом, и он улетает
вниз. Так и удобнее, и быстрее.
ПОЧЕМУ ВСЕТАКИ
ФОТОШОП?
44
кеты, не объявляя ультиматум: или скетч, или ищи
другого на свои дизайны.
В общем как-то и нет особого смысла участвовать
во всех этих бурных холиварах — какая программа
лучше для дизайнера-фрилансера — пока работа
твоя работается, деньги платятся, отзывы ставятся.
Так зачем тогда переходить в программу, в которой
попросту меньше функционала?
Мы же говорим в первую очередь о фрилансе, вер-
но? У офисных дизайнеров есть одна опция, которую
на фриланс как-то не завезли — командная парал-
лельная работа над проектом. А для соло-дизайна
лучше Фотошопа пока ничего нет.
45
Все плаааавненько: Фотошоп + Иллюстратор +
АфтерЭффектс + пару десятков вкладок + ютубчик.
Опытным путем установлено (на «собственной шку-
ре», в смысле, что лучше всего увеличивает произво-
дительность лицензионная Винда, ну и, конечно же,
оператива. А вот хорошая видеокарта, процессор, ли-
цензия Фотошопа почти ничего не изменили. Про
диск SSD не пишу, так как это совсем «бородатая»
история и, вероятно, даже на компах наших бабушек
под систему уже установлен по умолчанию.
ФИГМА!
Заметка на полях:
Чуть выше про командный «офис» писал. Ко-
нечно, же, я лукавил. На самом деле, мы с вер-
стальщиками писаемся от восторга: не нужно
снова скидывать файлы на верстку после вне-
46
сенной правки — все в режиме онлайн. Причем,
верстальщик даже может посмотреть твой
экран, как ты все правишь! Красота же. Жале-
ем, что раньше не переехали.
Включил акселерацию курсора в драйверах
(ускорение) мыши — стало приятнее.
47
А вещаю про Фотошоп я по другой причине. Основ-
ная целевая — далеко не гуру дизайна, для которой
большая часть моих статей, заметок, или страниц
книг — бородатая инфа. Но даже они, скорее всего,
начинали свой путь именно с Фотошопа. Да чего та-
ить — автор сам заядлый фотошопист и до последне-
го не перепрыгивал в современную яхту с весельной
лодки. А многие, на кого рассчитаны эти страницы,
и вовсе Фигму и аналоги даже не открывали еще. По-
этому на примерах «синей» программы — если не
привычнее всем, то наглядее точно.
Заметка на полях:
Если интересно, в моем блоге есть обзор ра-
бочего места, т.н. рум-тур:
…/its-mine/workplace3/
Да, до последнего тянул и придумывал
100500 разных отмазок, почему мне хорошо
48
в Фотошопе. Наверное, уже 95% всех перешли
на Фигму, а я все сопротивлялся.
Заметка на полях:
На момент написания именно Фигма лучше
других аналогов: Скетча, Адоб ХД, Инвижн
студио.
По большому счету программы все эти плюс-
минус одинаковые. Но если смотреть на дета-
ли (не забыл еще, чем они отличаются от ме-
лочей?), то тут Фигма впереди планеты всей.
Даже со Скетча многие переходят.
Думаю, в конце-концов все они все равно
станут еще больше похожими в плане функ-
ционала.
49
Оффтоп
Рано или поздно всем придется перейти на Фигму /
ХД / Скетч / Инвижн / другие возможные аналоги.
И тяжелее всех придется скевоморфистам. Ну вот
этим любителям всяких текстурок, 100500 пнгшек
и прочей «веб 2.0» шелухи. Дизайн с каждый днем
становится все чище и клевее, а Фигма заточена
именно под современный веб. Поэтому олдскульни-
кам придется ой как нелегко.
Советую тебе (если ты еще не переехал) постепен-
но собирать вещички :) Какую из программ выби-
рать — дело вкуса. Вот только для Скетча на данный
момент необходима техника Эпл. Я свой выбор оста-
новил на Фигме.
КЛЕВЫЕ ПЛЮШКИ
Заметка на полях:
А еще лучше подпишись ко мне в ютубчик.
У меня там про Фигму очень много всего наме-
50
чается. И, в отличие от «палочки и трех
кружков», будут реальные «живые» проекты.
Жирные заголовки
Вспомни, как часто приходится в дизайне делать
толще заголовки, подзаголовки на странице или на-
звание плюшек в блоке перемуществ. В Фотошопе
приходится лазить в выпадающий список и выбирать
там жирное начертание. А Фигме достаточно просто
нажать [ctrl] + [b] (от слова «bold»)! Причем, рабо-
тает в обе стороны. Да только ради этой штуки мож-
но уже переезжать! К слову, подчеркнутый текст
сделать не менее просто: [ctrl] + [u] (от слова
«underline»). Ну и до кучи: наклонить текст: [ctrl] +
[i] (от «italic»). Клево же?
Заметка на полях:
Во времена работы в сфере полиграфии ди-
ректор по маркетингу мокрого места не оста-
вила бы за слово «не влезает». Правильно же
«не помещается». Хорошо, что теперь сам се-
бе барин: можно, например, смело написать
51
«лазить в выпадающий список» и никто тебя
не отругает :)
Для любителей архитектуры деревянных
домов тут тоже расшифрую: по-хорошему
нужно избегать дворовый сленг и гораздо луч-
ше было написать «открывать выпадающий
список». Так норм? Или тоже побежим поми-
дорами закидывать из-за непонятной форму-
лировки?
Пнг из гугла
Еще кучу положительных эмоций добавят пнг’шки
из гугла. Чуть ли не в каждом проекте есть блок
брендов: или производители в интернет-магазинах,
или «наши клиенты» в лендосике, или еще что. И да-
леко не всегда эти логотипы будут на белом фоне
в дизайне, а значит, просто джепеги не подойдут,
нужны именно пнг. Вставляем в Фотошопе:
52
Заметка на полях:
Хорошо хоть с джепегами обычное копирова-
ние правой кнопкой нормально работает.
Заметка на полях:
Или кто-то что-то не знает, и вставить
в макет png в Фотошопе — 1–2 клика? Даже
если так, Фигма лучше примерно в 8234 раза :)
53
В Фотошопе вроде и не долго такое адаптивить,
но в Фигме все, что нужно — это просто потянуть
правый край влево + потом (в данном случае) чуть
вниз опутить нижнюю грань. И все :) Только пред-
варительно нужно выставить привязки в фрейме.
В общем, все такие элементы: кнопки, всякие фор-
мы, поиск, аккордеоны и т.д. — адаптивить одно
удовольствие. Берешь за край — тянешь влево —
отпускаешь — готово.
Встроенный калькулятор
От этой штуки лично я кайфую. В обычный «около-
фотошоповский» день я запускал калькулятор в сред-
нем раз двадцать так точно. Какую ширину элемента
нужно сделать на 768, если в строке таких элементов
три? Открываешь калькулятор:
• 768 — 20 — 20 — 20 — 20 = 668 (отняли отступы
по краям и два промежутка между элементами)
• 668 / 3 = 229 пх (узнали ширину одного эле-
мента)
Заметка на полях:
Да, чуть другой пример, но суть та же.
54
И все! При этом треугольник уже на своем месте
будет стоять, его не нужно будет дополнительно ку-
да-то двигать.
55
довольно быстро. Но! Как это сделать в Фигме? Прос-
то добавить к параметру по оси Y еще 120:
И все! :)
Правки от заказчика
Давай без прелюдии про количество иттераций
и вот это вот все сразу к примеру? Есть у нас неболь-
шой проект из главной страницы и пяти внутренних
вот с таким хедером:
56
же: открыть файл, подвинуть меню, сохранить файл,
сохранить превью. Пустяк. Но потом он вспоминает:
57
твои правки (т.е. всего одна правка, а не шесть раз
делать одно и тоже)! При этом не нужно открывать/
сохранять кучу файлов — все в одном месте. Попро-
сит тебя цвет кнопки изменить — одну правишь,
еще десяток автоматом меняются. В общем, во всех
одинаковых элементах (кнопки, превьюшки ново-
стей, карточки товаров и т.д.) правку нужно будет
сделать только у одного элемента, чтобы обновить
все. Причем, у них может быть разный контент: раз-
ный текст на кнопке, разные картинки-превьюшки
новостей, разные названия и цена товаров в карточ-
ках — без разницы.
Заметка на полях:
С Фигмой к правкам полностью меняешь свое
отношение. Да, ты уже и так на них нормально
реагируешь и даже не агришься, если тебя
по четвертому кругу просят что, шесть раз
исправить. Но с Фигмой... мммм... Ты сам ждешь
новых правок! Да! Тебе даже смешно от того,
насколько легко теперь править и поддержи-
вать макет (предварительно в процессе пра-
вильно его подготовив — не без этого), что
ты хочешь новых и новых правок. Серьезно,
на первых порах ощущение будет именно та-
кое. Ну, и стоит ли говорить о повышении ско-
рости работы, если раньше все было «ого, как
быстро!!!», то что же будет с Фигмой?
58
Главное, разобраться с технической частью: как
что настроить, привязать, где лучше группу исполь-
зовать, а где в фрейм обернуть, как устроены компо-
ненты и т.д.
Похоже, один дизайнер был прав (не будем показы-
вать пальцем на него), утверждая:
ДИЗАЙНЕРУ В ПЕРВУЮ
ОЧЕРЕДЬ НУЖНО ТЕХНИ
ЧЕСКОЕ ОБРАЗОВАНИЕ,
А НЕ ХУДОЖЕСТВЕННОЕ.
Локальные стили
А еще часто заказчики просят изменить цвет,
к которому привязана куча элементов: и кнопки,
и заливки, и тексты, и обводки у элементов и икон-
ки и т.д.
59
В Фотошопе, конечно, недолго изменить
(ты же помнишь, мой лайфхак из первой
книги про [F2] и [F3] — скопировать /
вставить стиль слоя?). Но это относитель-
но недолго :) Если страница, скажем, одна.
А в Фигме без разницы сколько стра-
ниц — что одна, что тридцать восемь.
Достаточно изменить локальный стиль
в одном месте, и он поменяется у всех
привязанных элементов. Другими сло-
вами, поменять на всех страницах оран-
жевый на какой-нибудь бордовый — па-
ру кликов!
ПОВСЕДНЕВНЫЕ
ИКОНКИ
60
для электронной почты или твиттера / фейсбука для
социальных кнопок.
Однажды словил себя на мысли, что ищу одну и ту же
иконку на «Flaticone» уже в четвертый / десятый раз.
61
С тех пор, собираю все такие вот «повседневные»
пиктограммы в одельный файлик для быстрого досту-
па. Если речь про блок преимуществ или «как мы рабо-
таем», то да — есть смысл поискать иконку более инте-
ресную визуально и которой давно не было в твоих
макетах. А если речь про «каждый день» вроде сердеч-
ка для «любимых» товаров или крестика закрытия по-
папа, то такие пиктограммы добавляю себе в файл, как
только осознаю, что ищу их уже не в первый раз.
Подобная свалка иконок есть и в Фотошопе. Но вот
уже года два я ей пользуюсь только в двух случаях.
Во-первых, забрать курсор пальца (попробуй — это
реально быстро: открыл псд, перетянул «палец» в ра-
бочий макет, закрыл псд).
62
Заметка на полях:
Сначала кавычки добавил слову «свалка». По-
смотрел на файлик. Убрал кавычки...
Заметка на полях:
Как-то дизайнер одна заявила, что для каждо-
го своего макета всегда использует новые
иконки. Ну, мол, у нее они не повторяются
из макета в макет. Всегда другие!
Будем честными, никто не будет подбирать
200 разных пиктограмм лупы, и уж тем более
проверять на повторы.
А некоторые иконки и вовсе не изменить: ло-
го метро или яндекс.денег, например.
Поэтому, не парься!
63
(у меня они, например, в постоянно открытом Тотал
коммандере), то работать с такими повседневными
иконками станет еще веселее!
Заметка на полях:
С 1500 и 240 наборами не парился и просто
купил готовые. Но суть ты понял, да?
64
65
ГЛАВА 2
БУДЬ ПРОЩЕ!
ПРОФЕССИОНАЛИЗМ
ИЛИ
ПЕРФЕКЦИОНИЗМ?
МЕЛОЧИ И ДЕТАЛИ
66
• Снова Робото в макете?
• Сверху отступ 19 пх, а не 20?
• Прислал правки в 23:37 в пятницу?
• Курс бакса у заказчика не совпадает с твоим?
• «Идиотина» на форуме написала «ИМХО» заглав-
ными?
• Кавычки не елочки? Короткое тире?
Заметка на полях:
А я вот реально спать не мог после этих
ИМХОВ, орущих на всю ветку форума, что не-
кий барин соизволил свое мненее вывалить…
идиот я, да? :)
Надеюсь, одной деталью справа на картинке
получится передать в полной мере всю суть.
ЗАГОНЯТЬСЯ НА МЕЛО
ЧИ ТАК СЕБЕ ИСТОРИЯ.
А ВОТ РАЗБИРАТЬСЯ В ДЕ
ТАЛЯХ КАЙФ!
67
ПЕРФЕКЦИОНИЗМ УГНЕТАЕТ
68
потом казалось, что разработали PP не для издева-
тельства над кодерами, а чтобы вгонять в депрессию
дизайнеров-перфекционистов, скидывая им ссылку
на верстку.
Заметка на полях:
Pixel Perfect — расширение для Хрома, с помо-
щью которого можно на верстку наложить
макет с прозрачностью и увидеть разницу
вплоть до пикселя.
Со временем это стало чем-то большим,
чем просто расширением. Это стало подхо-
дом в верстке.
69
и «у тебя в портфолио совершенно другой уровень»,
«мы не это хотели», «все дизайнеры — козлы», бла-
бла-бла. В итоге возвращаешь предоплату, расстраи-
ваешься, настроения нет, становишься раздражитель-
ным, страдаешь сам, под раздачу попадают родные,
друзья, коллеги в скайпе. В общем, сомнительно.
70
Так что же делать? Клепать проекты «на коленке»?
Нет! Надо изменить отношение к происходящему.
Во-первых, давай различать перфекционизм и про-
фессионализм!
71
чит, его у вас нет! Лучше менять отрицание на
решение проблемы.
Гораздо эффективнее будет работать фраза «да-
вайте поможем с выбором!» и картинка с большим
количеством вариантов. Чем показать пустые
полки и написать «ничего не нашли? Ну, позвоните
нам, мы еще в одном месте глянем, вдруг там что-
то завалялось» )
Если принципиально — верну тексты из прото-
типа.
И такие формы можно делать с одним полем. Чем
меньше полей, тем лучше они работают. Имя мож-
но спросить и в разговоре. «Здравствуйте, вы ос-
тавляли заявку, бла-бла-бла, как к вам лучше обра-
щаться?»
72
Там я расписал два принципа.
Первый — удобные, красивые размеры элементов:
…СТАРАЙСЯ СЛЕДИТЬ
ЗА ТЕМ, ЧТОБЫ НЕ БЫЛО
ИНПУТОВ ДЛИНОЙ 334
И ВЫСОТОЙ 52 ПХ. ГОРАЗ
ДО ЛУЧШЕ СДЕЛАТЬ ПОЛЕ
ВВОДА 330 Х 50 ПХ…
Заметка на полях:
Высота, как правило, всегда получается кра-
сивой!
…НАПРИМЕР, СВЕРХУ
17 ПХ, А СНИЗУ 18 ПХ.
ЧТО СОВСЕМ НИКУДА НЕ
ГОДИТСЯ…
73
74
75
Во-первых, представь: ты заморачиваешься (тратишь
много времени) на все эти отступы, не смотря на то,
что визуально 17 пх от 18 или от 20 никто не отличит.
А потом заказчик просит изменить шрифт, и все! Сиди
снова медитируй на пиксели вымеряй все значения на
всех кнопках и не забудь в адаптивных макетах ис-
править, а то ведь ночью долго не заснешь!
Заметка на полях:
Если ты пользуешься Фотошопом, то беда.
А если Фигмой или Скетчем, то не все так
грустно: изменить все в макете сильно быс-
трее. Но речь не конкретно про кнопки, а про
любые элементы с подобным отношением
к паддингам.
76
будь халтурщиком! Аккуратный, ровный (даже если
не по сетке) дизайн — этого вполне достаточно в от-
ношении всяких там отступов и выравниваний.
Заметка на полях:
Сейчас во всех программах есть умные на-
правляющие, разные привязки к сетке и эле-
ментами, поэтому совсем не сложно делать
все аккуратненько.
Гениально придумал, да?
Сначала учишь, как надо делать, немного вы-
пендриваясь перед аудиторией своей «любо-
вью к пикселям», а потом вещаешь, что де-
лать так не надо :)
Ладно-ладно. Признавать свои ошибки тоже
важный скил. Каюсь.
НУ И ХРЕН С НИМ!
Заметка на полях:
Были времена, когда я банил, наверное, каж-
дого пятого заказчика еще на этапе первых
77
нескольких писем или сообщений друг другу.
Мой черный список был похож на банку шпро-
тов — там внутри уже места не было!
Неудачная шутка?
Ну, и хрен с ним! :)
78
Один знакомый тогда написал удивительную фразу:
79
нет... Все равно придет время сменить авто — на но-
вой не будет такой проблемы. А раз такие дела, то на-
фига две недели грузиться? Можно же было сразу про-
ще к этому отнестись и не изматывать себя морально.
Заметка на полях:
У него в тоже время была такая же история
с передней левой дверью. Въехали задом > от-
дал перекрасить > мастер не попал в цвет.
С той лишь разницей, что у него со второй по-
пытки в цвет попали — не отличить, как
будто и не было ничего, а у меня второго раза
в принципе не было...
80
чика — то что нужно. А для «постояльцев» — подбеши-
вает. И знаешь что? Через какое-то время она «расство-
ряется» и тебя больше «не трогает». При этом
по-прежнему выполняет свою функцию: манит взгляд
заказчика, который пришел на биржу разместить заказ.
Заметка на полях:
Каждый дизайнер должен попробовать сде-
лать карту метро и пережить период кавы-
чек-елочек с длинным тире. Иначе он плохой
дизайнер :)
81
• тире — [alt] + 0151 на цифровой панели (справа
на клаве)
• «елочки» — [alt] + 0171 и [alt] + 0187
Заметка на полях:
К слову, до сих пор пользуюсь только 0169,
чтобы поставить копирайт в футере © А так-
то поставил раскладку Бирмана, как ни как
удобнее.
82
забавнее и даже как-то быстрее
и при этом прекрасно
слышишь?! прекрасно себя чувствуешь
Намного лучше, чем раньше
когда ты корчил из себя
главного типографа в Сети
В чатиках давно уже забиваю на всю эту гипер-
типографику. Как-то заказчик попался, «поверну-
тый» на этом деле. Мне реально надоедало ждать по-
ка он там напишет и расставит все свои точки,
запятые, «елочки» изобразит и тире вместо дефисов.
Фраза «он печатает...» казалось никогда не пропа-
дет. Не сдержался, посоветовал перестать мучать
и других, и себя :)
Заметка на полях:
Естественно, какой бы длины строки не бы-
ли, количество ошибок по-прежнему должно
быть минимальным. Ну, какой заказчик захо-
чет работать с неграмотным дизайнером?
• Агенство
• Банер
• В течении
• Расчитать
• Оборудывание
Можно сразу писать «попа» вместо каждого
из таких слов. Эффект все равно будет та-
ким же :)
83
Конечно же, одно дело чатики и личная переписка
с заказчиком, а другое — книга. Поэтому я по возмож-
ности слежу за собой. Да и «елки» тут, в Индизайне,
ставятся автоматически вместо обычных кавычек :)
ВИСЯЩИЕ ПРЕДЛОГИ
84
но проклиная дизайнера. Ну, и в-третьих, верстка
в 99% все равно будет с «висяками». Особенно забав-
но это смотрится на сайтах, где в картинке авторы
учат предлоги переносить, а рядом в верстке — по-
фиг вьюга:
Заметка на полях:
Достаточно загуглить «типограф», чтобы
найти его на сайте Лебедева.
Рекомендую!
85
В общем, любой веб-контент прогоняю через него.
Вот, например, с его помощью перенес предлог «и»
на следующую строку и теперь мое объявление на
бирже нормуль!
ТЫ / ВЫ [REPLAY]
86
ИМХО
Заметка на полях:
Надо объяснить, что значит «коротыш».
А то решит тот вот любитель деревянных
бань и архитектуры почитать вторую книгу
про фриланс и дизайн и напишет потом, что
половину не понял, снова влепит 1/10 за кон-
тент.
Один абзац — всего семь строк = отсюда
и «коротыш». Почти как твит.
Не за что. Можно хотя бы 2/10 оценку те-
перь, а?
***
Давай все-таки обсудим что-то более околовебо-
вое. Например, шрифты? Тема большая и объемная.
И там тоже есть, где расслабиться.
87
КОЛИЧЕСТВО ШРИФТОВ
Заметка на полях:
Шрифтов было много. Очень. Несколько ты-
сяч. Еще распечатки делали с примерами фраз,
чтобы клиенты могли заранее выбрать пон-
равившийся, а не оплачивать поминутную ра-
боту с тобой над его макетом.
Заметка на полях:
Да, на каждый Новый год под мандариновое
пиршество переустанавливаю винду. Просто
потому, что все заказчики не пингуются
(ну почти все), и есть несколько по-настоя-
щему свободных дней :) В РФ и вовсе недели
на две каникулы, а большая часть клиентов
из России.
88
А пользуюсь из них я, наверное, десятком-другим.
При этом, если слышу слова «буклет», «открытка»,
«календарь» или «презентация», выключаю комп
и убегаю на другую сторону улицы.
Я не учу тебя тому, что шрифтов должно быть не боль-
ше двадцати / N-цати. Я пытаюсь донести мысль о том,
что с десятком-другим жить (читай фрилансить) гора-
здо приятнее. Ты же помнишь, что работа должна при-
носить удовольствие. Иначе ф топку такую работу!
Вот два утверждения:
89
1. Ты не используешь «comic sans» и «lobster»
Отлично! Молодец. Фразой «правила придумали для
того, чтобы их нарушать» тебя не удивить, но при этом
ты знаешь, что в вебе считается лютым зашкваром.
90
2. Ты не можешь выбрать шрифт с засечками для
макета: «Pt Serif» или «Lorа» — что же лучше?
Ты загоняешься на ерунду. Ну какая разница какие
там засечки, ей Богу! Не «ТаймсНьюРоман», и норм!
Бери любой! Понимаешь? Относись проще! Никто не
заценит твои заморочки по поводу выбора наиболее
клевых засечек. Перестань загоняться на всякие ме-
лочи и работай в кайф!
МЕНЕДЖЕР ШРИФТОВ
91
Заметка на полях:
А в случае с Фигмой все шрифты с фонтс.гугл
подтягиваются в программу даже без уста-
новки на комп!
Заметка на полях:
Если не брать во внимание историю с кривой
кавычкой у Робото, то у Гугла все хорошо рен-
дерятся во всех браузерах и достойно выгля-
дят в Фотошопе. При этом и подключаются
довольно просто.
ПОДБОР ШРИФТА
92
нился настолько, что сейчас хорошо читабельный
контент ценится больше, чем какой-нибудь нестан-
дартный шрифт.
Бывает по пять проектов подряд делаю одним
шрифтом. Серьезно! Главное, чтобы с темой не кон-
фликтовал особо (продажа шин, а шрифт с засечка-
ми, ага?) А когда меняю — зависаю на новом снова
на несколько проектов.
В целом, все достаточно просто:
• Если юридическая или банков-
ская тематика: беру тонкий
шрифт Roboto или Montserrat —
беспроигрышный вариант.
• Если доставка грузов или лю-
бая другая мужская брутальная
работа (ремонт авто, к приме-
ру) — жирные заголовки из любо-
го шрифта без засечек и профит!
• Игровая или молодежная те-
ма? Подойдут округлые Ubuntu
или Rubik!
• Нужна строчка написанная рукой? У гугла есть
Pacifico. Или вовсе наклоняешь текущий шрифт и все!
93
попросту выбрав максимально нецветочный шрифт.
При этом еще и из знака сделать «свадебный салон».
Заметка на полях:
Логотипы, визитки, отчасти баннеры —
вот тут нужна оправдана большая коллекция
шрифтов.
94
и на Робото не меняли. Тем более от конкурента от-
личаться будем еще сильнее.
А вот подобрал для дизайна карточной игры на
космическую тему и сайта для скачивания билда
с ней. Естественно, там же — на фонтс.гугл
Заметка на полях:
Русской версии игры в планах не было, поэто-
му выбор шрифтов был больше :)
FAVORITES
95
Вот, кстати, и Орбитрон (игра справа). У него нет
кириллицы, а значит, он уже не пройдет фейскон-
троль для постоянного размещения в этом списке.
ПЛАТНЫЕ ШРИФТЫ
ДЕНЮЖКА
ВСЕХ ДЕНЕГ
ВСЕ РАВНО
НЕ ЗАРАБОТАТЬ!
ПРЕДОПЛАТА
98
Не вижу особой разницы: получить 598 или
601 доллар. Гораздо важнее не начинать проект
с негатива из-за споров на тему «географического
расположения» курса бакса. Ну, во всяком случае,
я так считаю). От работы нужно получать только по-
ложительные эмоции. Помнишь, да?
Заметка на полях:
Словил себя на мысли, что за последние па-
ру лет ни разу не проверял, по какому курсу
Всю бакса
книгузаказчики присылают оплату. Визуаль-
автор запретил мне
но понимаю, что сумма плюс-минус
выкладывать, а если бы и выложил совпада-
– ее бы
ет в долларовом эквиваленте
удалили даже в Телеграме :( Поэтомуи норм :)
остальные 200 страниц этой книги – в
официальной купленной
И уж тем более не люблю все вами версии.«да-
эти разговоры:
вай зафиксируем сегодняшний курс?» — предлагает
С и заботой,
заказчик, ваш Книжный
а потом тянет с проектом Пират
неделями. Вот
например, заказчик ушел смотреть готовые страни-
99