Веб-дизайнеры, где вы делаете дизайн сайтов и приложений?

Question

[globuzer]

Любой гуглинг выдает ключевое - "Adobe Photoshop".
Можно узнать, где профессиональный дизайнер делает дизайн сайта\приложения\интерфейсов?
Действительно ли это все же фотошоп, который является классикой, или же некоторые используют и другие продукты - InDesign, Illustrator, Corel, прочее....??? Интересна статистика.

Answer 1

[Андрей Чернышев]

За 5 лет в роли верстальщика я видел всякое (Illustrator / inDesign / Sketch), но лидером остается photoshop. В этой сфере нет такого, что дизайнер делает как он хочет, над одним проектом работают разные специалисты, и инструменты должны быть известны всем, поэтому photoshop наиболее популярен.

Comments

[globuzer]

фотошоп лидер - а почему? он проще и легче чем иллюстратор? вот если поставить задачу перед начинающим студентом-дизайнером, что ему изучать первоочередным инструментом= фотошоп или иллюстратор? понятное дело что работают в комплексе, но что изучать первоочередным

[Андрей Чернышев]

globuzer: Если этот же дизайнер сам и сверстает / закодит свой же дизайн, то пусть хоть в пеинте рисует.

[globuzer]

Андрей Чернышев: хорошо, пусть кодит, даже на ассемблере можно попробовать

Answer 2

[Нерон Лордов]

Illustrator, Axure RP. Фотошоп для вебдиза использует старая гвардия наверное

Comments

[Андрей Чернышев]

В Ашкуре макеты для сайта... господи, откуда вы лезете такие ?!

[Нерон Лордов]

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

[globuzer]

Liquidos: чтобы делать в акшуре, все равно заготовки (слои, подложки, фото и др) нужно готовить в фотошопе и иллюстраторе? или это не так? то бишь - акшура самодостаточен?

[Нерон Лордов]

Графику надо готовить, да. И из нее уже лепить франкенштейна, подключать провода и кричать "Оно живо!!1"

[globuzer]

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

[Нерон Лордов]

globuzer: Понимаешь, есть инструменты, которые сидят в твоей руке, как влитые. Тебе с ними хорошо. Но чтобы работать - тебе придется рано или поздно познакомиться с большинством инструментов. И дай бог найдешь такую команду, которой придется по нраву твой любимый инструмент.

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

Короче, пробуй просто, что больше понравится - тому и посвящайся.

[globuzer]

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

[Нерон Лордов]

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

[Нерон Лордов]

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

[globuzer]

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

[Нерон Лордов]

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

[globuzer]

Liquidos: это да, вроде пытались в Adobe совместить и вектор и растр в Fw, но он с 2013 года вроде перестал поддерживаться. Все равно вектор не перекинеться в растр, без вектора никуда. Все делать в векторе, за исключением визуализации и фотографий. Тогда будет приемлемый результат. Без вектора никуда... Даже в веб-индустрии, тем более с развитием ретина и всех новинок что видим каждый день...

Answer 3

[Павел Радьков]

Основной рабочий инструмент на Маке это Sketch, на Винде — Adobe Fireworks. Photoshop использую только для создания коллажей, баннеров и обработки фотографий. Illustrator я так и не освоил: он мне видится монструозным и неудобным по сравнению со Скетчем и Файрворксом.

Comments

[globuzer]

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

[Павел Радьков]

globuzer да, именно потому, что не смог его освоить. Тут, вероятно, сыграло роль, что сначала я попробовал Fireworks. Тому, кто изучил сначала Illustrator, Fireworks может показаться простым и недоделанным. Порядок имеет значение.

Но могу точно сказать, что Fireworks выигрывает у Photoshop по скорости рисования и редактирования многостраничного интерфейса, несмотря на свою устарелость и тормознутость.

Я писал про плюсы и минусы Fireworks vs. Photoshop Есть ли более удобные инструменты для дизайна сайтов, чем фотошоп?

[globuzer]

Павел Радьков: да, тут много написано. есть о чем задуматься.

Answer 4

[Кирилл П.]

Сначала в голове, из головы в Photoshop или Sketch.
Дальше вёрстка – там дизайн дорабатывается или полностью изменяется.

Comments

[globuzer]

ну интересует именно графическая статичная картинка...
может быть ктото gimp использует или же photoshop lighroom или же Illustrator...
sketch я так понимаю только для маков?

[Кирилл П.]

А зачем вам такая статистика?
Если выбираете для себя, попробуйте всё и определитесь, что вам больше нравится.
Да, Sketch только для OS X.

[globuzer]

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

Answer 5

[Lorri]

Дизайнер. В фотошопе.

Верстальщикам отдается не "жыпэг", а псд со всеми слоями (проименованными и аккуратно разложенными по папкам) и направляющими. Все, что можно (в разумных пределах, разумеется) делается (rounded) rectangle tool и иже с ними и т.д. Это нужно для удобства верстальщика.

Comments

[globuzer]

Lorri Lorri , если дизайнер в фотошопе, то его результатом работы будет готовый дизайн с исходниками (все фотки и картинки, подложка и слои) в виде psd-файлов, в том числе где сохранены слои и вся структура, выравнивание. я правильно вас понимаю?
поясните по поводу rectangle tool and rounded tool пожалуйста.

[Lorri]

Именно.

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

[Нерон Лордов]

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

[Lorri]

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

[Нерон Лордов]

Lorri: да, наслышан о фаерворкс, но от его изучения остановил как раз факт пребывания на свалке истории. Хожу теперь вокруг Muse, есть мнение что это реинкарнация Фаерворкса.

[Lorri]

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

[Нерон Лордов]

Lorri: странно, постоянно сижу на фрилансим, не сказал бы что перевес в сторону фш - люстру требуют не реже.

[globuzer]

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

[Нерон Лордов]

globuzer: не очень понял (предложение ты странновато выстроил)), поясню - в 30% требуют фш, в 30% - люстру, в 30% - не уточняют вообще, в 5% требуют скеч, и в 5% - акшур. примерно так.

[Lorri]

Liquidos: я работаю на западных заказчиков, с требованием дизайна в люстре как-то вообще не доводилось сталкиваться.

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

[Нерон Лордов]

Lorri: если не секрет - как удалось выйти на западных заказчиков?

[Lorri]

Liquidos: иностранные фриланс-биржи (основная масса), знакомые "импортные" товарищи (какое-то количество) и знакомые программеры, работающие на иностранных заказчиков (очень небольшое количество заказов и заказчиков)

[Вячеслав]

Мы, в команде, вообще все в фотошопе делаем векторными инструментами. А если используем растровые изображения, то храним их в PSD в виде Смарт-объектов в 2-4 раза выше по разрешению, чем необходимо. Это позволяет гонять макеты из @1x в @2x без потерь туда и обратно сколько угодно раз + таким образом мы не делаем необратимых поступков и все остается быстро редактибельным.

[Вячеслав]

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

[Нерон Лордов]

Вячеслав: не устает команда копаться в смарт-объектах?)

[Вячеслав]

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

[Вячеслав]

Liquidos: Зато нет необратимых действий. Никого не беспокоишь в чатике вопросами "кто блин смержил эту штуку, где исходник в дропе? почему не в materials папке?" — cmd+T и ресайзнул вверх без понижения качества, например.

[Вячеслав]

Мы вообще дальше пошли — сейчас все, что только можно стараемся делать linked smart objects а не обычными :) тяп ляп, cmd+R (ну это я себе такой хоткей выбрал на update all smart) и заменил футер на всех скринах файла. cmd+R и опана, иконки обновились везде, видимо товарищь их наконец доделал... Как-то так.

[Вячеслав]

У меня в планах Git к Sketch подключить, я вообще извращенец :) Хочу что бы пока один человек продает и согласовывает гайды, другой продвигался по продукту по скринам вперед не заморачиваясь сильно по стилистике.

[Lorri]

Вячеслав: правильной дорогой идете, товарищ))

[Нерон Лордов]

Вячеслав: Lorri: но неужели не проще работать с вектором, не закапывая элементы в смарт-объекты? Владислав Турчинский давал хорошую ссылку: habrahabr.ru/company/turbomilk/blog/144770 - ни прибавить, ни убавить

[Вячеслав]

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

[Lorri]

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

Answer 6

[goandkill]

Photoshop и Sketch

Answer 7

[Miribia]

Всегда работала на PC,
начинала в Photoshop, потом InDesing, по необходимости Corel,
потом перешла на Illustrator, сейчас пробую Axure (для набросков)
от проги к проге разбираться труднее (лень) ... (мешает база полученных знаний и возможностей),

Для макетирования выбрала Illustrator, как самый оптимальный вариант:
1 картинки маштабировать можно без ограничений
2 понятно как работать с текстом
3 легко вносить правку и удобно готовить нарезку для верстальщика
4 Верстальщик, знающий фотошоп, вполне в состоянии определить
все нужные ему размеры для текста и отступов, а так же цвета
5 достаточно распространенная программа, которая многим знакома

И только какие-то отдельные вещи делаю в других программах

Answer 8

[NonameAcc]

По идеи понятие "дизайн сайтов" подразумевает 2 вещи: наглядную демнострацию/схему как размещать элементы верстальщику. В этом плане можно хоть на туалетной бумаге рисовать, все равно в html или c#/c для мобил все кодить ручками и на глаз. В силу кучи различных разрешений 100% позиционного соответствия макету/схеме добиться очень сложно, если не сказать невозможно/не нужно. То есть видно что блок новостей из 3 колон состоит, а фотки каруселью должны идти, потом центрированный блок с 3-мя иконки с перечислением фич. Каждое разрешение по своему отобразит все эти штуки, главное чтобы верстальщик прописал нужное количество колон, примерные падинги, выравнивание итд.. Каким образом донести мысль (layout) до верстальщика - через paint, photoshop, салфетку - не важно.

А вот вторая вещь - это сами графические элементы: фон, кнопки, название шрифта, картинки, иконочки итд - зависит от стиля. Либо вектор, либо растр. Для рисовки в векторе(flat, line, cartoon) удобен иллюстратор(также хорош для экспорта будущих анимаций в after effects). В растре с планшетиком хорошо рисует manga studio. Для creative retouch типа matte paint, фотоколлажей - фотошоп. Если какие-то сложные анимации объектов для игр то наверно в 3д пакете делается модель, затем двигается-дрыгается по шкале времени, и все состояния сохраняются в серию файлов , потом в фотошопе "как гиф" сохраняется или скрипт проигрывает серию файлов.

Фотошоп якобы ~среднеудобен/способен как для 1) и для всех возможных стилей 2). Лично я делаю разметку 1) в той проге в которой буду рисовать 2), чтоб туда сюда не метаться(разные форматы файлов), а это зависит от стиля. Либо illustrator, либо фотошоп, хотя отхожу от него. Скетч пока не так хорошо рисует, но очень годен для 1), и где не такой сложный 2)