Всем привет. Я начал заниматься веб-дизайном 6 лет назад (если считать от самого-самого первого кривого макета для несуществующей туристической компании). Первые 2 года я работал в маленькой студии, потом ушел на фриланс и пока что жив-здоров.
Рекомендации ниже вовсе не аксиомы, не правила, и не обязательны к исполнению. К некоторым я пришел сам, некоторые подсмотрел у других. Что-то я часто не могу сам себя заставить выполнять (отчасти поэтому я решил их выписать и структурировать). Если вы только начинаете заниматься веб-дизайном, вам, скорее всего, пригодится хоть часть и нижесказанного. Если вы уже в деле, ваше мнение приветствуется в комментариях.
1. Начинай работать с утра
После обеда голова уже варит хуже, поэтому разгоняйся утром. Да, есть люди, которые думают, что работают лучше по ночам. Можно попробовать так, а потом вернуться к дневному графику.
2. Никого не волнует, каким длинным путем ты дошел до конечного результата
Но умение делать все как можно быстрее не только экономит время, но и увеличивает шансы еще что-то успеть в жизни.
3. Не важно, как сильно ты старался — если результат хреновый, то надо переделывать
4. Всегда начинай с ручки и бумажки
Зарисуй идею, набросай макет, запиши словами, что нужно сделать. И да, используй именно ручку — карандаш не годится. Маркер тоже можно (это если хочешь потом похвастаться в интернете снимками своих красивых набросков).
5. Сначала прототип, потом красотулечки
А потом еще раз прототип.
6. Клиент всегда неправ, но иногда прав
7. Выучи типографику
Разберись, какие шрифты с какими можно сочетать, какая высота строки самая удобная для чтения, как компоновать абзацы с картинками, как собирать блоки с разными размерами шрифта, зачем нужен вертикальный ритм, почему надо использовать не больше 3х шрифтов в сайте. Потом это все можно будет неоднократно нарушить и спать спокойно.
8. Не заморачивайся слишком с подбором цветов
Палитру можно украсть с любой понравившейся тебе картинки. Но базовые цвета на твоей совести, а кнопка «Удалить» всегда будет красной.
9. Не бросай проект после сдачи
Каждый твой проект запустится с какими-нибудь недоработками. Дизайн может сломаться, верстка поехать, менеджер на стороне клиента закинет на сайт безобразные неграмотные тексты, анимация в приложении будет кривая… Вариантов много. Поэтому всегда старайся хотя бы поинтересоваться через пару недель после сдачи, как идут дела и не нужна ли твоя помощь.
10. Твои идеи не стоят ничего
Не переживай, что их украдут — никто не сможет реализовать их так, как бы сделал ты.
11. Научись верстать html
Попробуй полностью сделать сам себе сайт по своему же дизайну. Тебя ждет много открытий.
12. «Вы» с маленькой
С большой пиши только в личном письме конкретному знакомому тебе человеку, которого ты действительно очень уважаешь.
13. Попробуй для разнообразия поработать стоя
Это так же тяжело, как и сидя, просто болеть будет в других местах.
14. Пиши о своей работе
И не бойся раскрыть свои самые тайные рабочие знания — скорее всего, ты сам их у кого-то подсмотрел.
15. Раз в час вставай со стула на 15 минут
16. Не увлекайся Дриббблом сверх меры
Учитывай, что существуют специальные люди н азарплате, которые занимаются исключительно рисованием картинок в Дрибббл. К реальным интерфейсам такие картинки мало относятся и, очень вероятно, в жизни никогда не сработали бы.
Отдельной строчкой прошу: не рисуй приложение на айфон про погоду и карточку товара с анимацией.
17. Попробуй виндовс-фон и андроид — там тоже весело
18. Сетка — в последнюю очередь
Сначала придумывай дизайн без сетки вообще. Потом сможешь все подправить.
19. Переделывай свои старые работы
Можно и чужие тоже.
20. Когда учишься, читай все по теме
Не стоит ограничиваться стандартными списками типа «10 книг для начинающего дизайнера». Греби все подряд, по ходу дела сам сможешь разобраться, какие книжки и статьи имеют ценность, а какие ни о чем.
21. Послушай лекции Людвига для дизайнеров о дизайнерах
22. Добывай знания сам
То, чему ты научился сам, остается с тобой. То, что тебе насильно пытаются засунуть в голову, скорее всего, выпадет обратно.
23. Рисуй дизайн с реальными данными
Сразу же бери в работу настоящие тексты и фото. Или посочиняй по теме что-нибудь сам. Если будешь делать макет, где одни заглушки и «лорем-ипсумы», то велика вероятность, что на поле боя все развалится.
24. Плохой дизайн не сильно испортит хорошую идею. Хороший дизайн ничем не поможет провальному продукту.
25. Не занимайся творчеством на работе
Решай задачки.
26. Не демпингуй
Знай себе цену и держи в курсе клиентов.
27. Не участвуй в гонках
Если клиент хочет, чтобы ты соревновался с другим кандидатом на проект, можно смело разворачиваться и уходить.
28. Без паники
У тебя будут периоды, когда не будет проектов. Будет желание хвататься за любую работу, пусть даже за копейки. Это нормально, но это надо перетерпеть.
29. Стоимость своей работы можно изменять
… в зависимости от положения дел на рынке, своей загруженности, сложности проекта, вредности менеджера или погоды. Просто установи разумные пределы.
30. Конкурс — хороший повод поработать на свое портфолио
Не больше.
Пока что у меня все. Я, скорее всего, что-то по дороге потерял, поэтому вполне вероятно скорое обновление статьи (или вторая часть). Всем пока.
Комментарии (34)
Damik
01.06.2016 18:15+2>> Будет желание хвататься за любую работу, пусть даже за копейки. Это нормально, но это надо перетерпеть
Молодому фрилансеру опасно говорить такие вещи.
sashamorozov
01.06.2016 18:15-2Набор каких-то общеизвестных правил продуктивности с отдельными вставками для дизайнеров. Зачем это здесь?
artemmian
01.06.2016 18:51Да, отличная статья. Все известно и без того, но применяем ли мы это на практике…
Newbilius
01.06.2016 21:16+1В большей части пунктов можно заменить «дизайнер» на «программист», «интерфейсолог», «копирайтер» и много кто ещё. Смысл не потеряется ну ни капли.
Brasilio
01.06.2016 23:38+3C конкурсами на самом деле что-то. Лет 10 назад, выигрывая их, получал заказчиков на длительное сотрудничество. Нынче просто поглядываю — кидалово около половины или неадекватно заниженные цены.
splatt
02.06.2016 08:44Не понятная статья, часть пунктов ни к дизайну, ни к фрилансу ну совсем никак не относятся, а часть — так вообще антисоветы.
12. «Вы» с маленькой
С большой пиши только в личном письме конкретному знакомому тебе человеку, которого ты действительно очень уважаешь.
Не очень понятно, чем обоснован такой «совет дизайнеру-фрилансеру». Если я не ошибаюсь, правила русского языка позволяют писать «Вы» с заглавной буквы в качестве формы обращения в официальных текстах, в том числе к незнакомым людям. В любом случае, это тема для холивара, а не совет дизайнеру. Я бы наоборот посоветовал писать «Вы» с заглавной, но не потому, что я так предпочитаю (это исключительно тема личных предпочтений), а потому что какой-нибудь глупый заказчик может зацепиться глазом и оскорбиться, что написано с маленькой (мало ли какие заказчики бывают). Зато если напишете с большой буквы, то точно никого не обидите.
18. Сетка — в последнюю очередь
Сначала придумывай дизайн без сетки вообще. Потом сможешь все подправить.
Еще один какой-то вредный совет. Вы это серьезно? И как вы потом планируете «подправлять»? Я тут в корне не согласен — макет рисуется либо с полным пониманием того, как он будет сверстан и какое будет поведение на разных размерах, либо не рисуется вообще.
Могу добавить совет от себя — выкладывайте ссылки на сверстанные работы. Веб-дизайн «в фотошопе» — это рисульки, а не веб-дизайн. Тут я полностью согласен с автором — веб-дизайнер обязан знать HTML и понимать правила responsive-верстки, даже если не он будет это верстать.
К сожалению, в портфолио автора я нашел всего пару работающих ссылок на работы, и те — «сайты-скриншоты» с фиксированной шириной.
reznik_e
02.06.2016 09:19+1Ок, я понял, что со статьей вы не согласны, и это на самом деле очень хорошо.
Про «вы»: я имею в виду тексты на сайте, которые обращаются к неопределенному кругу лиц (ну да, к целевой аудитории, если в общем, но неизвестно, кто конкретно читает, как его зовут и сколько их вообще сейчас). А в личной переписке «Вы» с большой годится.
Финальный макет, конечно же, рисуется с полным пониманием. Просто начинается он не с сетки.
Мое портфолио никак не противоречит статье, но в любом случае спасибо, что зашли.splatt
02.06.2016 09:34+1С частью пунктов я согласен, другая часть мне просто показалось странной и не относящейся к дизайну. Согласитесь, пункты 1, 4, 13, 22, и то что я перечислил выше — это достаточно субъективные вещи, с которыми можно согласится, а можно не согласится.
Насчет портфолио — я и не говорил что оно противоречит. Однако я считаю, что один из важнейших пунктов именно для фрилансера — это дать ссылку на готовую и сверстанную работу, что бы потенциальный заказчик мог открыть ее в браузере, на телефоне, поменять ширину окна, посмотреть, как оно ведет себя на разных платформах.
Для меня, как для человека, который занимался фрилансом с обеих сторон, это — важнейшее условие. Мне необходимо видеть, что человек может не просто рисовать шаблончики в фотошопе/индизайне/иллюстраторе, а создавать рабочий и работающий дизайн, с учетом различных платформ, размеров экранов, responsiveness, и так далее. Именно в этом заключается один из основных скиллов веб-дизайнера, и в этом — основная сложность, как мне кажется.
Nekto_Habr
02.06.2016 12:52+1>>Еще один какой-то вредный совет. Вы это серьезно? И как вы потом планируете «подправлять»? Я тут в корне не согласен — макет рисуется либо с полным пониманием того, как он будет сверстан и какое будет поведение на разных размерах, либо не рисуется вообще.
На самом деле вредным советом является рекомендация рисовать сразу по сетке. Это в корне не правильно. Сначала нужно отдизайнить контент так, чтобы всё работало и выглядело хорошо, а потом уже вырабатывать под него сетку. Использование сетки в начале может сильно ограничить дизайн или же вовсе спрятать верное решение.
Другое дело — дизайн стандартных решений. Стандартный лендинг, стандартный блог, стандартный интерфейс — да, можно сразу по сетке. Но в таком подходе очень сложно (или невозможно) сделать шаг влево / шаг вправо и выдать что-то не стандартное (как и предполагается).Nekto_Habr
02.06.2016 12:57+1Авторитетное мнение: https://www.artlebedev.ru/kovodstvo/sections/178/
NLO
07.06.2016 09:49НЛО прилетело и опубликовало эту надпись здесь
Nekto_Habr
07.06.2016 10:28>>И вообще, любое категорическое мнение о «правильном» дизайне говорит не в пользу декларирующего.
Ну, действительно есть кое-какие вещи в дизайне, которые являются правилами «правильного» дизайна. Иначе о чём все книги и школы дизайна? Дизайн — не наука, конечно, но подобные заявления говорят как раз таки не в вашу пользу. Просто не знаете предмет.
kroshanin
02.06.2016 09:10Самый интересный для меня пункт:
5. Сначала прототип, потом красотулечки
Вот это как раз в самую точку. Жаль, что многие заказчики этого не понимают.
Бывает, показываешь очередной сделанный модуль, пусть «кривой», но функционирующий. И начинается: здесь кривенько, здесь неудобненько, а здесь нужна доп. проверка, и требуют все исправить как можно скорее. А на возражения «давайте сперва доделаем прототип, а потом уже будем красоту наводить» следует ответ вида «лучше сразу все хорошо делайте». И если идти на поводу, в результате получится, что время проект уже сдавать, а готово всего лишь несколько модулей, зато «красивеньких». В общем, этот совет я бы поставил на первое место.Nekto_Habr
02.06.2016 13:04Да, отличное правило, но *тяжко вздыхаю* работало бы оно еще. Утвержденный прототип не поможет защититься от правок и внезапных хотелок. В таком случае он просто сильно удлиняет и утяжеляет процесс. Я бы порекомендовал ситуационный подход: прочувствовать, нужно ли конкретно данному клиенту для конкретно этого проекта предлагать предварительное прототипирование. Иногда проще сразу делать конечный дизайн, прям совсем конечный. А иногда лучше прототипировать. А иногда — хуже. Вероятность у всех случаев одинаковая.
Sulin
02.06.2016 09:1211 пункт обязателен. и не только для дизайнеров, так же верстальщик должен хоть раз интегрировать вёрстку в CMS что бы понимать что и как будет происходить с вёрсткой дальше и как облегчить жизнь тем кто с ней будет работать.
Bellicus
02.06.2016 10:57Под какую из…
Не совсем равносильные пункты, на мой взгляд. HTML он и в Африке HTML. A CMS'ок сейчас — мама не горюй, и у всех свои нюансы.Sulin
02.06.2016 12:12разницы нет какая потом будет CMS, нужно просто что бы верстальщик знал что такое цикл например и как однотипные элеметеы выводятся в шаблоне уже на CMS. и т. д. Потому что верстальщики не видящие ни разу php в глаза часто лепят чушь в которой потом приходится бороться тому кто дальше с этим работает.
Bellicus
02.06.2016 16:01Ну, и тут можно поспорить. Определить что есть родительский элемент, а что дочерний и что пускать в цикл, все же должен тот кто натягивает. Со стороны верстальщиков же есть открывающиеся теги и закрывающиеся. И что-то нагородить, что может выбиться из логики, ну уж очень сложно представить.
Sulin
02.06.2016 17:12представьте себе сетку из товаров в интернет магазина, по 3 в строку и в несколько строк, а дизайнер взял и нарисовал разделитель между строками товаров в виде линии, если верстальщик засунит див что бы сделать эту линию, то праграмимст будет ломать голову как же ему массив разбивать по 3 товара и все это вывести в цикле. А для того что бы не ставить такие палки в колёса программисту, проще сделать эту полосу на css через :after например у :nth-child(3n). Но верстальщик понятия не имеющий о циклах и массивах сделает так как ему удобнее это будет див.
Bellicus
02.06.2016 18:20ну, мы используем самописец, и он нам позволяет каждую, например, третью итерацию вставлять левый код (тот же разделитель). И уж если собранная на коленке CMS это позволяет, то думаю «старшие братья» и подавно это могут
sxbxvx
02.06.2016 09:12>> И да, используй именно ручку — карандаш не годится.
Интересно, почему карандаш не годится?reznik_e
02.06.2016 09:21Когда рисуешь карандашом, всегда есть возможность что-то стереть и исправить. Из-за этого начинаешь блуждать-в-корридорах-творчества, а надо просто быстро придумать и быстро набросать. Поэтому надо что-то такое, что не позволяет возвращаться обратно и переделывать.
eoffsock
02.06.2016 09:12>> Не бросай проект после сдачи
Потому что дизайн — это не результат, а процесс. Обсудить идею с заказчиком — дизайн. Нарисовать — дизайн. Отдать разработчикам, проконтролировать выполнение, запустить и подкорректировать — это все еще дизайн.
Работа дизайнера заканчивается тогда, когда продукт запущен таким, каким он предполагался изначально.
Если работать именно так, не будет проектов с недоработками.
alexkbs
02.06.2016 10:30Пункт 12. Когда видишь "вы" с большой буквы — сразу думаешь не о том, что тебя уважают, а том, что тебя ни во что не ставят. А от фальшивого уважения зубы сводит.
"Вы" с большой буквы, как и весь остальной совок, должны остаться в прошлом.
despoth
02.06.2016 11:24+2Как фрилансер с 17-летним стажем скажу самое главное правило: не бздеть! Зачастую новички испытывают массу страхов. Страх пустого листа, страх сурового клиента, страх низких доходов, страх остаться без заказов, страх того, что сделают плохо, и все вокруг залошат и т.п. Страхов очень много, и вот так просто бросить офисную работу ради фриланса на дому опасаются реально многие. Но ничего страшного нету на самом деле. Да, поначалу ссыкотно. И конкуренция лютая, и заказов хороших мало, зато полно говна за копейки. Но нужно взять себя в руки, перестать ссать и начать делать. И все получится. НЕ БЗДЕТЬ!
Sild
02.06.2016 12:05Это вообще хороший совет по жизни. Не думаю, что стоит его конкретезировать только фрилансом или любой другой областью.
webinside
02.06.2016 16:53+1И не ВРАТЬ. Если что не умеешь или не можешь — ставь в известность прямо. Не надо придумывать больных бабушек, переломные ноги.
Все люди живые и поймут, а если не поймут то нечего с такими работать.
djagya
02.06.2016 17:347. Выучи типографику
А вот можете подсказать пару ресурсов, где это можно подучить? Никак не могу найти никакой информации, чтобы хотя бы базовые понятия подтянутьeoffsock
02.06.2016 18:34+1practicaltypography.com
shkola.readymag.com/fonts
artgorbunov.ru/projects/book-typography (стоит денег, но стоит тех денег, которые просят).
Xtray
03.06.2016 12:05>> artgorbunov.ru/projects/book-typography (стоит денег, но стоит тех денег, которые просят).
Причем у них же в «Советах» 99% содержания книги доступно бесплатно :)
Например: artgorbunov.ru/bb/soviet/20150705eoffsock
03.06.2016 12:07Верно. Просто в книге все собрано вместе. Я сначала читал «Советы», а потом оплатил подписку на книгу и пользуюсь ей, если что-то начинаю забывать.
То есть можно сэкономить и просто читать «Советы», да.
swpo
За 21, просто огромный плюс. Мне кажется его надо ставить первым пунктом, сначала Людвиг, потом все остальное.