Нубы по дизайну спрашивают: как влиться в дизигн и клепать сайтики в фотошопчике? Отвечает эксперт (я)

Продолжаю рубрику «На тостере часто спрашивают», чтобы потом давать ссылку на эту статью вместо ответа. Итак, урок первый.

 

БЛЯДЬ ЗАБУДЬТЕ ФОТОШОП. 

Я хуею с того факта, насколько живуч фотошоп в вебдизе. Это сродни живучести корела в полиграфии и айдентике; сука куда не сунься (в России, как минимум) — в подавляющем большинстве контор требуется корел. Хотя какая нахуй разница, в какой пиратской программе работать? Но почему-то исторически он блядь прижился так, что уже напалмом не выжгешь из типографий и рекламных фирм. Так же и фотошоп удивительным образом выживает в качестве основного формата макетов для дизайна интерфейсов (к которому относится и вебдиз).

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

Есть редкие исключения, где весь бизнес выстроен вокруг фотошопа, например стоки. Хз, может ситуация там сейчас поменялась, но как минимум год назад чтобы залезть в стоки, на которых барыжат шаблонами веб-дизайна, надо было работать исключительно в фотошопе. Бизнес на стоках — отдельная, благородная и очень амбициозная затея, эта тема заслуживает отдельного поста, НО НА ЭТОМ БЛЯДЬ ВСЁ! Больше хороших исключений нет!

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

В центре процесса создания интерфейса находится Figma.

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

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

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

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

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

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

Что еще есть в процессе создания интерфейса?

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

— Фотки, картинки, коллажи и прочая растровая графика: а вот тут как раз вам поможет старичок Фотошоп, и только он.

————

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

————

Постскриптум. А что же скетч?

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

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

 

 

 

Нубы по дизайну спрашивают: как влиться в дизигн и клепать сайтики в фотошопчике? Отвечает эксперт (я): 11 комментариев

  1. Ахуенная статья! А как быть, если я не гуру в рисовании? Ну то есть, все проф.разработчики уже имеют в багаже знание в плане рисования? Я конечно поинтересовался темой, но там пиздец дохуя чё надо учитывать. В tuts+ я читал про, как рисовать Pixel Perfect иконки. Как быть то? Это ж просто пиздец. Взрыв мозга получается. Да и всю жизнь не хватит всё это досконально изучать. Как ты думаешь про это?

    1. Спасибо)

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

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

      1. Про API ты сказанул. У тебя был реальный опыт с ним? Ради интересно конечно я посмотрел их. Круто они реализовали эту фичу! Там даже на билборде и сразу в 3x устройствах всё это изменятся в реальном времени.

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

    –Ну приехали, бля!
    –Бля, ну пиздец!

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

    А по теме – всё правильно написал, но я скетчееб. Можно сказать, что скетч — это одна из первых причин перейти на мак была (давно еще). Но в-целом, поддерживаю полностью. Фотошоп для дизигна сайтов — dni6e e6an0e. Спустя несколько лет, если просят сверстать из ФШ или самому рисовать — глазик дергается.

    Еще инвижен запиливают свою апликуху, да никак не запилят — она кроссплатформенная будет, тоже всё по уму сделано, почти как в скетче

    1. Да, тоже жду не дождусь инвижена, так он вроде под мак-то уже доступен? А под винду уже пилят.

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

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

      Вот насчёт бляди не соглашусь. Понятно, что твои рассуждения логичны, и возможно так оно все и было, но — когда-то. Сейчас (и уже достаточно давно), и блядь, и бля используются как междометия. Язык живет своей жизнью, короче) Но я рад, что в блоге завёлся граммар-наци — веселей будет) В контакте еще и паблик есть, там уже активная движуха в постах, присоединяйся.

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

    А Фигма работает без интернета? Умеет экспортить иконки в PDF?

    1. Да у нас Тесла тоже доступна, если у тебя есть двадцать миллионов рублей) Я даже реально в своём убогом мухожопске её видел — проезжала мимо.

      Фигма может работать без интернета, но это не её стезя — с фигмой нужно работать в условиях постоянного интернета, это факт… Насчёт экспорта в PDF — нативного экспорта нету. Есть решения от третьих сторон, которые хуй знает как работают. Во всяком случае, у фигмы очень мало кейсов, когда PDF понадобится. Это не та программа. Эта прога нужна чтобы хуярить интерфейсы. Вот для интерфейсов там всё заебись, и всего хватает. Ну если чё спрашивай)

  4. Не, ну ёпт, был повод поржать))) Всё написано правильно, хоть и хромает речь))) Я тоже ненавижу как огрызок, так и его программы. Это не просто дискриминация, это какой то нонсенс, пля)Хотя вот столкнулась с тем, что надо было купить монитор для работы и вот выбор пал на DELL и, как оказалось, не зря. Ну и нах ентот огрызок, типа с его наворотами)))) DELL уже сейчас обогнал яблоко по характеристикам, да и работает стабильнее и дольше) Поэтому был сразу приобретён и ноут деловский, о чём не жалею. Со временем прикуплю и блок тоже деловский)

    1. Деллыч делает народное железо, да, типа Сяёми. Щас это реально чуть ли не единственный выбор, потому что у Сяёми нет удобной гарантийки. Наебнется комп — в Китай что ли обратно отсылать? Потому Делл.

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

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *