37signals: Почему мы забили на Photoshop

Автор оригинала: Jason Fried
  • Перевод

Это перевод статьи «Why we skip Photoshop» Джейсона Фрайда (Jason Fried) из 37signals


При разработке UI мы обычно переходим от бумажного наброска сразу к HTML/CSS. Разработку макета в Photoshop мы пропускаем.


Вот почему мы это делаем:


  1. Макет не кликабельный. Это, наверное, причина № 1, по которой статические макеты не для нас. Они не настоящие. Бумажный набросок, конечно, тоже не настоящий, но от него этого и не ожидаешь. Макет отображается на экране. Раз он на экране, он должен работать. Но менюшку раскрыть нельзя, нельзя забить текст в поле, ссылку щелкнуть нельзя. А с HTML/CSS всё по-настоящему.
  2. В Фотошопе слишком много иструментов для проработки деталей. Когда им пользуешься, так и тянет заняться деталями. Выравнивание, нужный цвет, правильные фигуры — мелочи, которые в итоге важны, но бесполезны сейчас. В самом начале важен смысл, а не детали. Детали потом.
  3. Текст в Photoshop — это не то, что текст в сети. В статичном фотошоповском макете текст быстро не поменяешь — надо открыть Photoshop, изменить текст, сохранить файл, экспортировать в gif/png/jpg и т. д. Если выложить набросок в онлайн, не скажешь кому-то «обнови через 5 сек», как можно было бы сделать с HTML. Вместо этого приходится говорить «5 минут…». И еще, шрифт в Photoshop по размеру никогда не совпадает со шрифтом в HTML. Ни разу не похоже. Ни переходы строк, ни расстояния.
  4. Photoshop сфокусирован на производстве, а не продуктивности. В Фотошопе делают то, что выглядит, а не то, что работает. Если заботиться только о внешнем виде, много времени потратишь на производство. HTML/CSS позволяет быть продуктивным. С каждым изменением придвигаешься к чему-то всё более настоящему.
  5. Фотошопить — дважды делать одну работу. Ну потратили 3 дня на макет, дальше что? Беремся за HTML/CSS, повторяем всё заново. Пустая трата времени. Начали бы с HTML/CSS, лишнее время потратили бы на итерации, а не на повторное создание. Если с HTML/CSS тоже получается медленно — потрать еще немного времени на изучение более быстрых методов разработки на HTML/CSS. Эта трата времени не пустая.
  6. Photoshop не для совместной работы. Я уже вроде упоминал, но скажу еще раз: HTML/CSS позволяет изменить, сохранить и обновить. Так у нас строится сотрудничество. «Я тут поменяю. Обнови.» Считанные секунды. «Так, тут будет float: left, a не right. Обнови.» Пара секунд. Ни выбора инструмента, ни перемещений всяких штук, ни экспорта, ни выливания, ни новых имен файлов. HTML/CSS просто создан для скоростного прототипирования. А Photoshop —  нет.
  7. Photoshop сложен. Конечно, после 10-летнего опыта работы с ним всё удается само собой, но для меня некоторые вещи до сих пор сложны. С ручкой и то проще управляться, чем постоянно лазить в панель инструментов. Ручкой можно нарисовать что угодно, а в Фотошопе нужно использовать инструмент Text для текста, Shape для фигур, и всё настраивать через меню, и так без конца.

Мы не хотим сказать что Photoshop плохой или не стоит своих денег, просто у нас получается, что заниматься сразу HTML/CSS гораздо полезнее и для создания нового, и для улучшения существующего. HTML/CSS — реальная вещь, которой Photoshop никогда не станет.


Прим. пер.: Мысли в целом интересные, полностью укладывающиеся в фирменную концепцию 37signals под названием Getting Real. Как опытный верстальщик, с большинством вещей согласен, однако, тут и ежу понятно — не во всех случаях подобный подход прокатит, Пирогов, к примеру, вряд ли оценит:). Следует учитывать специфику 37signals — разработку простых и легких веб-приложений по собственной инициативе под текущие нужды рынка. Ребята не делают презентационные и имиджевые сайты на заказ, посему фотошоп действительно не у дел. Вот это — по нашему :)

Поделиться публикацией

Похожие публикации

Комментарии 170

    0
    Огромное человеческое спасибо всем минусователям кармы. Всего вам наилучшего!
      –1
      Тебя это так расстроило?
        +8
        Мне кармы не жалко, на зиму я ее не солю, и дети мои без нее не помрут. Просто уже который топик приходится закрывать через несколько минут после создания, ибо на них обрушивается водопад минусов, перетекающий немедленно в карму. Расстраивает. С этим топиком тоже так началосЬ, но щас стабилизируется.
          +6
          Таковы местные законы. Сначала идет вал тех, кто минусует все, что видит. Чуть позже подтягиваются адекватные и заинтересованные темой читатели.
            +1
            Да, печально, но факт. Я так понял, надо просто, как и в HTML, делать правильную разметку: несколько раз в разных местах тыкать носом, что это дже перевод (типа, DOCTYPE, ага), если что-то критикуешь - обязательно сделать вежливый реверанс в сторону критикуемого (мол, моё, конечно, не всем подходит), итп. Этакий validness топика, соотвествие стандартам сообщества. Как только всё поправишь - плюсы. Забьешь на это - забьют на тебя. Ну да и ладно, стоит различать всё-таки хабр и реальную жизнь.
              0
              Плюсанул ваш пост. Тем не менее считаю вы не правы, отвечая многим о том, что вы всего лишь переводчик. Читатели отождествляют вас с автором этой статьи, и очевидно, что вы согласны во многом с позицией автора. Поэтому, хотите вы или нет, вам придется отвечать здесь за него ;)
                +1
                У меня идея - все набросы отсюда я переведу в качестве комментов в на оригинальный топик (там, ксти, тоже борщ серьезный заварили уже). Пусть Джейсон ответит, тогда я его ответы приведу здесь :)
                  +1
                  Классная, кстати, идея - не выходя из Хабра, можно будет получить полноценные ответы от, собственно, автора на наши вопросы и критику, что на голову повышает полезность от вашего поста!
                  • НЛО прилетело и опубликовало эту надпись здесь
                  0
                  О! Кстати, очень интересное продолжение уже обсуждавшейся здесь мысли о том, что читатель проецирует положительность/отрицательность новости на автора, который не имеет ничего общего с фактами, описанными в опубликованном материале.
          0
          Не расстраивайтесь. Это идиоты клинические. Прыщавые подростки и сорокалетние девственники, для которых нет иных способов самоутверждения.

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

          И ничего, уплыл тот какашечник.
            0
            У меня вообще подозрение что кто-то написал бота, который управляя виртуалами ставит всем новым темам минусы. Паранойя?
            +1
            Не расстраивайтесь, перевод интересный и, что немаловажно, — качественный.
            Хотя я такие вещи предпочитаю в оригинале читать, но найти всё интересное среди огромного количества сайтов — невозможно ;)
            Со статьёй в целом согласен. Сам недавно пришёл к подобным выводам.
            Плюсанул карму, — лично я буду ждать ещё интересных переводов и статей.
            Желаю всего наилучшего!
              0
              Спасибо Вам за перевод. Идеи 37signals как и их подход Getting Real очень интересны.

              В своём обзоре инструментов прототипирования http://habrahabr.ru/blog/ui_design_and_u… я так же как и авторы статьи не рассматривал Photoshop, как полноценное средство создания прототипов.

              Тем, кто заинтересовался описанным подходом (прототипировать сразу же в HTML). Такой инструмент создан!
              Cистема прототипирования HolyGrail (http://www.amazedev.com/holygrail/) представляет собой организованный в программе Dreamweaver, процесс создания интерактивного HTML-прототипа c помощью заранее подготовленных сниппетов (паттернов проектирования). Кроме того, проектирующий менеджер не остаётся наедине с "белым полем"
              нового окна программы. Он получает типичный проект (связанные html
              страницы с использованием шаблонов), usability guidlines (появиться немножко позже), поддержку от использующих эту же систему (коммьюнити в ЖЖ http://community.livejournal.com/ru_holy…).
              Проектирующий менеджер оперирует паттернами проектирования, программист использует готовый, "чистый" код который можно вставить сразу в проект.

              Сейчас по адресу http://www.amazedev.com/files/holygrail_… для скачки доступна альфа версия.

              Приглашаю принять активное участие всех желающих.
              Презентация проекта IT-сообществу(в том числе и посредством Хабрахабра) будет в ближайшее время.
            • НЛО прилетело и опубликовало эту надпись здесь
                +1
                …а затем через slices…

                И что, и вся верстка?
                • НЛО прилетело и опубликовало эту надпись здесь
                    0
                    В принципе, это многое проясняет.
                  –1
                  Вротмненоги! Это такая уличная магия?
                  Без (хотя бы) подгонки отдельных мелких участков под компрессию/качество/цвета? SIC!!!
                  • НЛО прилетело и опубликовало эту надпись здесь
                      0
                      круто... :) и джипеги максимально ужатые выходят? :)
                      • НЛО прилетело и опубликовало эту надпись здесь
                        0
                        По-максимуму — не есть хорошо, не есть аккуратно. А как с резиновыми макетами?
                        0
                        А в ФШ есть средства для удобной подгонки по цвету? (я не веб-дизайнер, просто интересно)
                          0
                          Смотря что Вы имеете в виду под подгонкой.
                          В принципе - инструментов масса. Это некая даже проблема фотошопа, что для каждой задачи у него 3-4 пересекающихся инструмента, а поотключать неиспользуемое в меню нельзя.
                        0
                        Резину так и делаете, через слайсы?
                      • НЛО прилетело и опубликовало эту надпись здесь
                          –16
                          бред какой то написан.
                          если клиент попросит поменять тени в картинках и посмотреть несколько вариантов цветов плашек и др. вы будите плодить html страницы?
                          была бы у меня карма я бы тоже заминусовал.
                            +11
                            Уважаемый, обратите внимание на формат топика. Заметить это можно по иконке в заголовке, а также по таблице баллов и проч. в конце текста. Это, внимание, перевод. То есть выражаясь языком современной сети, мопед не мой. Мои лишь примечания в конце. Потому минусовать придется Джейсона Фрайда.

                            Предупреждая ваш вопрос, а почему я, собственно, перевел эту статью: ссылка на нее была приведена в сегодняшнем дайджесте Web Standarts Group, зарегистрированным членом русской секции которой я являюсь. Статья переведена, чтобы русские стандартисты могли более свобоно ее прочесть, только и всего. Выражением моих личных мыслей, описанием моих методик работы и навязыванием моего мнения эта статья не является.
                            • НЛО прилетело и опубликовало эту надпись здесь
                                +1
                                Зря вы оправдываетесь, хорошая статья, демонстрирующая аджильный подход к прототипированию. Это не визуальный дизайн описан, поэтому тени поменять, и варианты цветов тут абсолютно непричем. Это про ПРОЕКТИРОВАНИЕ и ПРОТОТИПИРОВАНИЕ написано.
                                  0
                                  Ксти, по хорошему, тени и цвета таки в HTML/CSS быстрее менять :). Никто не говорит, конечно, что тени можно нормально без фотошопа изобразить на HTML, но сначала ее один раз нарисуешь, а потом она на всем сайте меняется, опять таки дело секунд в случае HTML и минут в случае выкладывания PSD.

                                  У нас на фирме, конечно, далеко не всё так продвинуто, как у «сигналов», но с момента утверждения концепции клиент имеет дело с HTML-макетом, а не с тяжелым мертвым PSD. И изменения мы успеваем вносить оперативно.
                                0
                                несмотря на то что комментарий скрыт...

                                37signals не делают проекты на заказ, тоесть все сервисы они делают на свое усмотрение.Как говорил один знакомый - Если большинству пользователей нравится - мне без разницы какого цвета эта кнопка
                                0
                                Случайно нажал минус топику. Считайте что там +2 голоса.
                                  +1
                                  Сложнореализуемо на мой взгляд.

                                  Либо дизайнер должен знать HTML/CSS и получится дизайнер-верстальщик.
                                  Либо верстальщику нужно знать как дизайнить и получиться верстальщик-дизайнер.
                                  Либо садить их вместе и пусть дизайнер говорит верстальщику что и как бы он "хотел увидить", а до верстальщика пока "дойдет" креатив дизайнера...

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

                                    Вот честно, в 90% случаев при доработке проекта так и происходит. В последнее время у нас на фирме научились исключать дизайнера с его любимым графическим пакетом из рабочей цепочки поправок, ибо дизайнер рожает в течение дня, а верстальщику в итоге три строки поправить. Поставить диза за спиной у версталы и заставить повелевать: «Это влево, тут вправо, а тут шрифт крупнее» - гораздо быстрее.
                                      +1
                                      Если переделки до 30-40% — вот так и должно быть!
                                      Вообще считаю, что нужно все доделки просто согласовывать с дизайнером — сам он тут может работу только затормозить.
                                      Ещё отлично, когда дизайнер заведомо знает, что смена двух блоков местами обычно не вызывает трудностей — и разговор верстальщик и дизайнера идёт на одном и том же языке.
                                        0
                                        Что у вас за проекты, интересно, если дизайнер успевает рожать за день? Помоему, даже дизайн интерфейсов(если исключить иконки и иллюстрации всякие) требует немалых временных
                                        затрат... а если клипать ширпотреб, то там действительно дизайнер со своими пакетами не нужен, да и на верстальщика забить можно:)
                                          0
                                          Разговор именно о доработках и поправка.
                                          Если дизайнер ещё и не работает в офисе — то тем более: приехал, обсудили — результат работы привёз на следующий день.
                                        +1

                                        За рубежом давно поняли, что информационный дизайн существенно важнее визуального и именно визуальный дизайн «надевается» на информационный, а не наоборот.

                                        HTML/CSS просто создан для скоростного прототипирования.

                                        +3
                                        Для мастера инструмент не важен.
                                          +4
                                          "- А лестницу сделать можете?
                                          - Да, но долго копать придется"
                                          +7
                                          И еще, шрифт в Photoshop по размеру никогда не совпадает со шрифтом в HTML. Ни разу не похоже. Ни переходы строк, ни расстояния.

                                          Распечатать и повесить на стену, что бы заказчики видели.
                                            0
                                            Подтверждаю :( Хуже всего, что это творится не в макете, который можно выкинуть (эта стадия в провинциальных студиях отсутствует как класс, варианты дизайна всегда делаются в шопе), а в дизайне, который надо делать, и если что - все подряд спрашивают "а чо текст коряво выглядит?". Ещё добавлю: самое плохое, что сглаживание тоже не похоже - вааааще не похоже.
                                              0
                                              Сглаживание же отключаемо...
                                                0
                                                К счастью, в последнее время я тоже делаю дизайн из бумаги в html, но если придется снова работать с дизайнерами - уж не дам спуску. Скажу, чтобы отключали. Раньше как-то не получалось, может просто не до того было, а может - мне было очевидно, что всё будет не так, а другим, ясен пень, неочевидно. Знаю, что (был?) дурак :) сколько времени просрано.
                                                  0
                                                  У нас с дизайнерами гласное условие: если текст сглажен — он будет картинкой. Весь несглаженный — будет plaintext-ом.
                                                  В следующий раз и Вы огласите свои требования, чтобы потом не было мучительно больно :)
                                            +1
                                            Помоему не имеет большого значения как вы делаете, какими инструментами пользуетесь, главное результат
                                              0
                                              Так вот авторы пишут не о том, "что", а о том - "как". Как и с какими инструментами им продуктивнее работать. Кому-то этот опыт может оказаться ценным.
                                                0
                                                Да я нечего не имею против того что автор, привел тут свою методологию, я вобще о том, что вобще нет принципиальной разницы какими вы пользуетесь инструментами, главное что у вас из этого получается
                                            • НЛО прилетело и опубликовало эту надпись здесь
                                                +2
                                                Спасибо. Уже отвечал.
                                                • НЛО прилетело и опубликовало эту надпись здесь
                                                    +3
                                                    Простите, не удержался.
                                                    Вежливо пошлю и я вас.
                                                    Этот топик писал не посмотреть профиль rimmer333, он переводил статью с буржуйского. Откройте, блять, глаза.
                                                    • НЛО прилетело и опубликовало эту надпись здесь
                                                        0
                                                        придется мне Вас расстроить.
                                                        "женщина, неразборчивая в половых связях" именуется словом "бляДь"
                                                        а уважаемому "n1mnul" Вы так по-существу и не ответили...
                                                          +1
                                                          "Блядь" - определение схожее с "проституткой".
                                                          А блять, словарный оборот. Вот.
                                                          //Нет, амфетамины до добра не доведут.
                                                            0
                                                            Слово «блять» в данном контексте — вводное слово, и его нужно обособлять запятыми, а не кавычками.
                                                          +2
                                                          Еще раз. Я просто верстальщик. Я точно так же получаю макеты от дизайнера и превращаю их в HTML. Я лично НИЧЕГО не протоипирую. Я имею дело с готовым дизайном. Я имею дело с поправками к готовому дизайну, для который справедлив подход «не надо макета, тут одну строчку поменять».

                                                          Статья - перевод. Автор - Джейсон Фрайд из 37signals. Это ОН забил на фотошоп и прототипириет ручкой на бумаге, и HTML в блокноте. Не я. Я перевел его статью на русский язык.

                                                          За пожелания спасибо.
                                                          • НЛО прилетело и опубликовало эту надпись здесь
                                                            0
                                                            да откройте же вы глаза
                                                          +1

                                                          нормальные дизайнеры рисуют эскизы в иллюстраторе (AI) а затем конвертирую эскиз по слоям в PSD для передачи верстальщику.

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

                                                            0
                                                            Да, для меня что-то новенькое насчет AI. Вы уверенны в том что пишете?
                                                            0
                                                            А Expression Studio пробовали? Там идея как раз в совместной работе дизайнеров и разработчиков. И интерфейс там получается "кликабельный".
                                                          • НЛО прилетело и опубликовало эту надпись здесь
                                                              0
                                                              Спасибо. Уже отвечал.
                                                              • НЛО прилетело и опубликовало эту надпись здесь
                                                                0
                                                                Тоже предпочитаю прототипировать в этой программе — это проще, быстрее и удобнее, чем писать код
                                                                +1
                                                                А что случилось с инструментами для интерактивного прототипирования типа Axure?
                                                                Вы их из принципа не применяете?
                                                                +1
                                                                я покачто ничего лучше аксура не нашел...в графических редакторах (фотошоп, пеинт и что угодно еще) большие системы не прорисуешь, потому как каждый возникающий косяк нужно перерисовывать на десятках изображений,и не факт что завтра ничего не поменяется и не придется перерисовывать еще раз.

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

                                                                это имхо.
                                                                  +2
                                                                  Вот никак не могу понять почему все для прототипирования используют фотошоп или бумажку с ручкой?..

                                                                  Я всегда легко и быстро делаю макет в иллюстраторе. Имхо, все эти заморочки со слоями именно при прототипировании - лишнее.

                                                                  Предлагаю всем посмотреть в сторону редакторов векторной графики - это эконимит нервы и позволяет быстро прототипировать. Быстрее чем расчеркнутые бумажки.

                                                                  Оговорюсь: это удобно когда вы делаете веб-приложение, а не презентационный сайт.
                                                                    0
                                                                    Насчет вектора - абсолютно согласен. Я уже много лет верстаю все векторном редакторе (Xara), и не вижу других альтернатив. Причем, я не пользуюсь встроенными в него средствами нарезки а режу все "вручную".

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

                                                                    Отказываться от графического редактора вообще - IMHO глупо, да и в случае 37signals как-то не вериться, что они вообще не используют делают все в html/css: картинки-то откуда-то беруться.
                                                                    По мне быстрее в векторе накидать макет, чем карандашом. И нагляднее.
                                                                      0
                                                                      по-моему, это проистекает от незнания иллюстратора в должной степени.
                                                                      +3
                                                                      Не ну какието отдельные детали я думаю придется в шопе отрисовывать, но в принципе мысль здравая. к тому же сейчас идет тенденция к минимуму графики, просто красивая верстка куда круче выглядит, но это тоже надо уметь, это еще сложнее чем с графическими наворотами
                                                                        –1
                                                                        Меня больше всего удивляет, когда мне присылают шоповский или кореловский файл и говорят, что это дизайн сайта, который я должен сверстать в HTML и CSS, за что ествественно мне не платят. По моему мнению если говорить о дизайне сайта, то это не графический макет, а сверстанная страница(ы). Извиняюсь если не по теме, наболело.
                                                                          +2
                                                                          для рисования макета я предпочитаю Fireworks, который изначально был разработкой Macromedia, а сейчас входит в пакет Adobe Creative Suite
                                                                          программа очень нравится, достаточно простая, чтобы не отвлекать лишним функционалом и достаточно сложная, чтобы изобразить почти все хочешь
                                                                          также там удобный оптимизатор графики для Web
                                                                          Photoshop пробовал для рисования макетов - не понравилось, неудобно, слишком там много всего
                                                                            0
                                                                            У меня всё ровно наоборот - Fireworks непонятный. Сейчас качну и попробую Axure.
                                                                            +2
                                                                            Статья написана верстальщиком который не хочет заниматься нудным трудом дизайнера :-)

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

                                                                            Вообщем бред какой то.
                                                                              +1
                                                                              Есть доля правды. Фотошоп действительно слабо предназначен для дизайна сайтов. Если говорить о всякого рода небольших промосайтах, где минимум контента, зато много графики и прочих красивостей — тогда фотошоп незаменим, так как дает полный контроль за внешним видом каждого пикселя.
                                                                              Но я сейчас на практике столкнулся с необходимостью делать макет очень большого информационного сайта. Делаю по привычке в фотошопе и столкнулся с серьезной проблемой: количество слоев перевалило за 1000, из которых больше половины — текстовые. На моих далеко не слабых машинках, whatever mac or pc, фотошоп начинает тормозить на столько, что половина рабочего времени проходит за чтением хабры, пока в фотошопе папка слоя переместится из точки А в точку Б. И это проблема. Я уже не говорю о том, какой ад начинается, когда клиент захочет на уровне макетов посмотреть основыне ссылки в другом цвете, а еще хуже - в другом размере. В такой ситуации совершенно очевидно, что фотошоп ну совсем не предназначается для подобных задач. Тот же Visio, в котором у нас содержатся структурные схемы того же сайта — просто летает с тем же документом в своем формате.

                                                                              Вариант сразу делать в HTML/CSS — представляется, конечно, слегка хардкорным. Особенно в наших российских условиях, где веб-дизайнер и верстальщик — это две разные профессии.
                                                                              В рамках вышеописанного проекта я пока что принял решение разбить макет на пяток отдельных файлов и собирать потом в одном. Удовольствие нижне среднего. По сути, для наших вебовских дел фотошопу не хватает двух важных вещей: стилей (как CSS или как стили в inDesign) и объектов (как в flash).
                                                                              Это наводит на мысль попробовать адобовский Fireworks, там у них вроде бы это в некотором виде реализованно. Да и позиционируется этот продукт, как инструмент для быстрого прототипирования и дизайна веб-сайтов. Если будет удачный опыт — дам знать на хабре. Если у кого-то он уже есть, то делитесь обязательно.
                                                                                0
                                                                                Статья не о дизайнге сайтов, а о разработке пользовательского интрфейса.
                                                                                Да и на их сайтах кроме функциональных элементов, контента и рекламы и нет ничего — ни одного графического элемента дизайна не замечено (логотип только и тот можно было текстом сделать).
                                                                                В общем, и правда, зачем им Фотошоп, непоняно.
                                                                                  0
                                                                                  Но я сейчас на практике столкнулся с необходимостью делать макет очень большого информационного сайта. Делаю по привычке в фотошопе и столкнулся с серьезной проблемой: количество слоев перевалило за 1000, из которых больше половины — текстовые.

                                                                                  Просто вы не умеете их готовить :) Например в информационном дизайне зачастую полно повторяющихся текстовых элементов, в таком случае текстом оставляется только один, остальные склеиваются в растровый слой и цвет их легко меняется. Также можно объединять текст разных стилей в один слой, т.е. набирать в одном слое текст и применять к его кускам разные шрифты, цвета и начертания. Вобще группирование повторяющися элементов (не только шрифтовых) в один слой - очень хорошая практика, позволяющая изменять цвет либо стиль очень быстро и на всех объектах. 1000 слоев говорит лишь о том, что ваша работа неоптимизирована. У меня, на очень нагруженом информацией сайте, не более 200 слоев, и псд крутится очень шустро на не самой мощной машине.
                                                                                    0
                                                                                    Я думал об этом, но вариант абсолютно не рабочий в моем случае. Приходится часто менять объекты местами (читай: папки слоев), соответственно либо склеивать слои по типу/цвету либо держать все разложенным по папкам. Для меня второе сильно важнее. Опять же — если склеил текст, можешь только цвет менять, а покрупнее не сделать, и жирным не сделать и формулировку не поменять.
                                                                                    Насколько это возможно у меня все оптимизировано. Просто приходится иметь дело с ОЧЕНЬ большим объемом данных. :)
                                                                                  –3
                                                                                  Все хуйня, фотожоп рулит
                                                                                  • НЛО прилетело и опубликовало эту надпись здесь
                                                                                    +8
                                                                                    1. "Бумажный набросок, конечно, тоже не настоящий, но от него этого и не ожидаешь. Макет отображается на экране. Раз он на экране, он должен работать" — Неожиданная логика, смеялся )

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

                                                                                    3. "Текст в Photoshop — это не то, что текст в сети". — Эт да, нужно учитывать. Но это совсем не сложно, помнить, что текст _так_ выглядеть не будет. Более того, важно знать, что ты вообще не можешь знать как он будет выглядеть в каждом конкретном случае, т.к. даже одинаковые шрифты на одинаковых осях по часто по разному выглядят в разных браузерах.

                                                                                    4. "Photoshop сфокусирован на производстве, а не продуктивности. В Фотошопе делают то, что выглядит, а не то, что работает." - во-первых, сильно зависит от конкретного дизайна. Во-вторых все равно внешний вид сайта, как правило, делают дизайнеры, а не верстальщики. И как-бы не слишком логично заставить дизайнера чего-то верстать в CSS. Я, например, сверстаю, но кодер будет не слишком доволен.

                                                                                    5. "Фотошопить — дважды делать одну работу." — Ага, а делать эскизную визуализацию в архетектуре - три раза повторять одну и ту же работу. Сначала макет, потом эскиз, потом еще и визуализацию... Можно ж сразу строить. И у заказчика утверждать совсем не обязательно.

                                                                                    6. "Photoshop не для совместной работы" - может тут автор и прав, но я еще не разу не имел такого проекта, где нужна именно _совместная_ работа в фотошопе, а не "я делаю макет а ты - иконки".

                                                                                    7. "Photoshop сложен. Конечно, после 10-летнего опыта работы с ним всё удается само собой, но для меня некоторые вещи до сих пор сложны. С ручкой и то проще управляться, чем постоянно лазить в панель инструментов." - Хм. Задумался. Автор когда-нибудь видел планшет? Ctrl+shift+N, enter и пошел рисовать как ручкой.

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

                                                                                    Возможно еще причина в том, что сразу кодя, сложно себе представить все эти мелкие уголочки-градиентики-блики-рамочки.. Только автора статьи не минусуйте, он просто выложил перевод.
                                                                                      +1
                                                                                      Случайно нажал "минус", а хотел нажать "плюс". Дайте угадаю, в "суперхабре" можно будет все исправлять?
                                                                                        0
                                                                                        На мой личный взгляд список аргументов действительно мутноват. Впрочем, надо учитывать формат статьи-оригинала - это же заметка в их рабочем блоге, а не умная статья для журнала. В конце концов, это нужно им чтобы вызвать buzz, а не чтобы заставить всех работать, как они сами. И это им таки удается, смотрите, сколько я на них ссылок вывалил :).

                                                                                        Для меня основные проблемы фотошопа - это таки несоответствие типографики, искаженное понятие стилей, наличие режимов смешивания, которыми легко решать сложные проблемы (и создавать еще больше проблем для верстки), жесткий размер исходного макета (следствие растровой природы редактора - и фантастика в вебе) и отсутствие потока документа - основной вещи, на которую опирается верстка.
                                                                                          0
                                                                                          Хм... Может быть значительная часть этих проблем уходит, если дизайнер, в целом, владеет html+css, и представляет себе, что можно рисовать, а что нет. Про жесткий размер документа и отсутсвие потока, честно говоря, не понял. Это в смысле что нельзя тянуть, как вектор? Или отсутсвие хотя бы минимальной "резины"?

                                                                                          Да есть, на самом деле куча "но", программулина действительно не заточена под рисование сайтов. Но вообще, только вдуматся, это же photoshop. Photo-shop. Это творение изначально создано для обработки фотографий. И все его проблемы отсюда. Кстати, думаю в скором времени можно ожидать чего-то похожего, направленного именно на дизайн сайтов.
                                                                                            0
                                                                                            Про размер - это да, в смысле что резины не будет. В крайнем случае нарисуют два, ну три макета, и то не всегда помогает. Выполнял я тут тестовое от САЛ - и макетов две штуки, и помечено стрелками и палками, что тянуть и как. Но вот как это сверстать, чтоб работало - «зогатко» :). То есть диз старательно думал о «резине», но думал в Фотошопе, в итоге макет головоломный.

                                                                                            Поток - это я имею в виду любое автоматическое расположение последовательных объектов. В PS наличествует только в текстовом блоке (в пределах одного). Очевидно, основной прокол тут - в парадигдме слоев («кусков прозрачного стекла в размер документа»). Тот же Corel DRAW позволяет как минимум обтекание текстом объектов (объектов!), для Wordа понятие потока вообще родное, картинку например можно привязать к строчке текста, тут почти полный аналог HTML-ного потока (последний чуть проще). Отсутствие потока в PS заставляет дизайнера мыслить в простой двумерной системе координат, воспринимать объекты как области пикселов на разных слоях, а не блоки с зависимостями размеров, усложняет производство той же «резины», и т.д. То есть в общем смысле не позволяет дизу и верстальщику говорить на одном языке.

                                                                                            Отсутсвие автоматики положения блоков в PS (того, что я подразумеваю под потоком) порождает такие частые ошибки и помарки дизайнеров в макетах, как:
                                                                                            - сдвиг отдельных блоков на один-два пиксела (не замечают из-за гайдлайнов, которые по логике должны бы помогать в этой ситуации, этот баг всегда отлавливают только верстальщики)
                                                                                            - непостоянный вертикальный ритм, например, расстояния между текстовыми элементами, расстояния от края блоков до текста в них (на практике, на красивых, впечатляющих макетах ни разу не встретилось решение, помогающее верстальщику реализовать макет с пиксельной точностью. Расстояние от верха «плашки» до заголовка в ней в 99% случаев не совпадет с макетом).
                                                                                            - непостоянные расстояния в горизонтальных распределениях элементов (типа главного меню, которое часто бывает графическим).

                                                                                            Всё указанное вполне поддается ручному контролю, но это ж какая должна быть дотошность! При этом сроки, сами понимаете, не терпят. В итоге верстальщик, ругаясь под нос, реализует половину макета на графике, вырезая гифы с огромными пустыми областями, а относительно другой половины трясется, чтобы менеджеры не стали делать сравнение на точность.
                                                                                          0
                                                                                          Забавно не то, что они написали, а то, что ты принял текст буквально, и прокомментировал его буквально. Напирмер, 1-2-7 - имеется в виду, что если делать дизайн интерфейса прямо в HTML, концентрация происходит именно на интерфейсе, мозг думает только о том, как будет работать интерфейс. Это вовсе не значит, что буквально фотошоп плох, потому, что "в нём тянет..." и "он сложен..."
                                                                                          0
                                                                                          тогда что же, если не фотошоп?
                                                                                            0
                                                                                            Прочитал с большим удовольствием! Просто один к одному повторяет ход мыслей при создании нашего сайта. Мы тоже пропустили фотошоп, хотя я, например, его люблю.
                                                                                              +2
                                                                                              Что характерно, использование фотошопа тоже полностью укладывается в концепцию книжки Getting Real. Я думаю, что когда много занимаешься интерфейсами, то наступает момент, когда инструмент не важен. Кто-то на бумаге рисует, кто-то в фотошопе, кто-то в иллюстраторе, а кто-то в экселе (я видел такое).

                                                                                              Ну удобно чуваку в html — пусть делает в нем. Зачем такую теорию подбивать? Лично я работаю в фотошопе уже почти 15 лет. Я так привык думать "фотошопом", что работа происходит на уровне спинного мозга.

                                                                                              37signals, конечно, крутые чуваки, но они тоже много ошибаются. (говорю как опытный пользователь Basecamp)
                                                                                                0
                                                                                                У нас на фирме в ворде прототипы делают :) Весьма весело выглядит, и кстати, достаточно понятно. И контроль версий/комментирование вордовское родное помогает тут.

                                                                                                А я сам лично лет десять был глубоким приверженцем Corel и фотошопоненавистником, пока не купил графпланшет. С этого момента мои пристрастия кардинально поменялись.
                                                                                                  0
                                                                                                  >так привык думать "фотошопом"
                                                                                                  Думать в критериях html-ля лучше, про это и речь. Кузнец, конечно, может выковать деревянный сруб из железа, а потом по его образцу сделать настоящий деревянный сруб, но будут неучтены свойства дерева, да и делать придётся два раза всё (в т. ч. и более сложную и затратную работу с железом).
                                                                                                    0
                                                                                                    Ты прочитай внимательно мой коммент. Я говорю о том, что наступает момент, когда не важно в чем ты рисуешь или думаешь. Когда фантазия и опыт идут впереди инструмента.
                                                                                                • НЛО прилетело и опубликовало эту надпись здесь
                                                                                                    0
                                                                                                    а вы забивать шурупы напильником не пробовали?
                                                                                                    и вообще что значит фраза "делает сайты в Photoshop'е - ..." - в фотошопе максимум делают дизайн сайтов...
                                                                                                    и как это всё относится к данной статье - речь вообще о UI
                                                                                                      0
                                                                                                      а HTML-таблицы были придуманы для представления табличных данных и вы *никогда* не использовали их для позиционинования графических элементов. ;)
                                                                                                        0
                                                                                                        блин. коммент прицепился ваще к какому-то постореннему посту. (
                                                                                                        0
                                                                                                        как вы всем счас открыли глаза!
                                                                                                        0
                                                                                                        Здесь есть некоторые моменты:

                                                                                                        - верстка должна быть изначально html, это да.

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

                                                                                                        - дизайнер не должен делать сразу хороший с точки зрения верстки макет. у него для этого слабоваты знания html/css, но простой html/css он знать обязан.

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

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


                                                                                                        (кроме того, есть еще один момент: лучше сначала делать программирование с plain 3.2 html, а потом уже поверх этого накладывать дизайн - но это уже совсем редкое извращение)
                                                                                                          +1
                                                                                                          Боже какие только люди не понаоставляли тут комментариев..... ужос...
                                                                                                          Статья очень интересная, и ребята из этой студии её написавшие полностью правы. Я очень часто при дизайне сайтов сталкиваюсь с этим, и если в самом начале карьеры я был ярым фанатом макетов в фотошопе, то сейчас использую freworks либо рисую там отдельные элементы дизайна, всё остальное реализовываю с помощью вёрстки. А люди минусующие и бесстыдно ругающиеся матом мне кажется не заслуживают внимания хабрпользователей. Человек ради вас старался, перевёл статью с английского, если вы не согласны с мнением в данной статье, автор перевода в этом нисколько не виноват, ну право же, господа, либо прекратите нести чушь, либо дайте револьвер и я вас всех постреляю=)
                                                                                                            0
                                                                                                            Однако, земляк, да еще знакомый земляк! Что-то вы прибедняетесь насчет простого верстальщика...
                                                                                                              0
                                                                                                              С ручкой и то проще управляться, чем постоянно лазить в панель инструментов

                                                                                                              А хоткеи это конечно же не для нас... :)
                                                                                                                +1
                                                                                                                "Фотошопить — дважды делать одну работу."
                                                                                                                мда, все равно что сказать: "делать проект перед постройкой здания — фигня, лучше сразу кирпичей набросать (быстрее же), потом если надо можно подровнять, переделать.."
                                                                                                                  +1
                                                                                                                  Гы. В том-то и дело, что фотошоповские рисунки - это НЕ проект. Это отделка. "Дизайнеры", блин, которые здесь слюни-сопли пораспускали, занимаются сразу отделкой, не только не делая проект перед постройкой здания, но и не строя здание вообще :). Смеялсо.
                                                                                                                  Какой проект? Кучка графики? Это проект? Упал под стол.
                                                                                                                    –4
                                                                                                                    Я вообще никогда не понимал, какое отношение фотошоп имеет в принципе к сайтам, и на "макеты" в виде тяжёлых графических файлов смотреть отказывался. Это изображение сайта через какой браузер? С каким разрешением? На какой ОС? Покажите мне страницу с кодом.
                                                                                                                      0
                                                                                                                      макет это изкиз
                                                                                                                      выбери изкиз потом тебе сверстают страницу
                                                                                                                      а вообще все зависит т твоих денег
                                                                                                                      оплачивает с ходу верскиподгоны под бровзеры будут тебе нести варианты дизайна уже в верстке
                                                                                                                      каждя правка графики или престроения будут вести к потере времени
                                                                                                                      да и если мне такое заявили сазу бы был отказ работать с таким задротом
                                                                                                                      еслиб ты прнимал решение от компании
                                                                                                                      если ты там полуменеджер был бы разговор с другими людьми
                                                                                                                      я раскажу какое имеет отношение фотошоп
                                                                                                                      в наших странах много умником с вороваными кмпиями софта
                                                                                                                      для малейшей обработки фото они видешли имеют фотошоп а раз я могу глаза убрать красные с фото то что такое дизайнер с такимже фотошопом как у меян стоит?
                                                                                                                      также а какого хера поатить фотографу если у меян фотоапарат круче его .?
                                                                                                                      в фотошопе или в илюстраторе или в фаерворке готовятся макеты тоисть изкизы
                                                                                                                      мы готовим в илюстраторе
                                                                                                                      потом имеджи попиксельно гтовятся в фотошопе или в фаерворке
                                                                                                                      вот как фотошоп имеет отноение к вебу
                                                                                                                      если вы идиот нелезьте в тематические разделы
                                                                                                                        0
                                                                                                                        Если вы не умеете писать по-русски, лучше вообще не пишите.
                                                                                                                      0
                                                                                                                      Не согласен с парнями. При верстке с нуля тяжелой и нагруженой страницы может оказаться что для изменения несущественной мелочи придется переверстать половину макета. Также нелепыми выглядят заявления что фотошоп передает шрифт иначе чем броузер - нужно просто уметь его настраивать.
                                                                                                                        0
                                                                                                                        причем настраивать надо браузер))
                                                                                                                          +1
                                                                                                                          Раскройте секрет, что надо сделать, кроме отключения сглаживания?
                                                                                                                            –1
                                                                                                                            Просто взять и написать текст :) На самом деле фотошоп предлагает СТОЛЬКО инстументов по настройке что возможно все!
                                                                                                                            http://www.picamatic.com/show/2008/06/05/08/394280_947x272.gif

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

                                                                                                                            Вобще не представляю себе как можно делать информационный сложный дизайн без отрисовки каждого шрифта на макете...
                                                                                                                              0
                                                                                                                              Открою страшную тайну: размер шрифта в броузере у пользователя неизвестен, и от "программеров" не зависит.
                                                                                                                                0
                                                                                                                                Какая страшная тайна, аж страшно стало :) Только вот к чему это в вопросе фотошоп или хтмл? Кстати открою не менее страшную тайну - 90% использует стандартные установки, и еще одна очень страшная тайна - шрифт можно жестко задавать с помощью css.
                                                                                                                                  0
                                                                                                                                  с помощью css

                                                                                                                                  Только всё равно существует миллион случаев, когда внешний вид итоговой надписи в HTML не совпадет с макетом.
                                                                                                                                    0
                                                                                                                                    В firefox и opera не получится. Кроме того в пикселях его не задашь в любом случае - размер шрифтов на системном уровне задается не в пискелях, и броузер о пикселях только догадывается.
                                                                                                                                      0
                                                                                                                                      А вообще я это к тому что полагаться на какой-то размер изначально не стОит. А проверить разные размеры проще в html чем в фотошопе.
                                                                                                                              0
                                                                                                                              проблема может быть во врожденных наклонностях дизайнера. у меня есть знакомый дизайнер-художник, которому проще будет слепить макет из пластилина нежели в фотошопе, несмотря на многолетний опыт общения с последним.
                                                                                                                                0
                                                                                                                                Если учесть, что пишут это скорее программисты, всё становится понятно. Ну не работает PS через командную строку :) Меня самого плющит на тему автоматизации собственной деятельности через Photoshop Scripting :)
                                                                                                                                0
                                                                                                                                Никогда не пользовался фотошопом для создания макетов своих сайтов и не собираюсь, html и css это наше все. А еще я эти html и css только руками пишу, в основном в фаре.
                                                                                                                                Фотошопщики же (в применении к этой теме) это как секта - пользуются им где надо и не надо, считают что их мнение единственно правильное и все остальные, кто в шопе макеты не рисуют - "толстокожие термоизолированные бродячие недомерки". А на самом деле они боятся себе признаться, что им надо подучить html и css.
                                                                                                                                  –2
                                                                                                                                  )) вы большой талант
                                                                                                                                  ну вот тоже 37 сигнал вот ссылка http://www.basecamphq.com/?source=37s+home
                                                                                                                                  так вот в имедже недопустимо сверху иметь черные углы
                                                                                                                                  а вообще каждый имг должен быть вылизан на сайте хорошего уровня
                                                                                                                                  а вообще то что вы пишете руками и еще что-то ваша проблема
                                                                                                                                  неважно чем пишут жопой или руками важен сам код и его работа
                                                                                                                                  и все заголовкипишете постоянно сами? или по дибильному просто ?
                                                                                                                                  рисуют макеты обычно в илюстраторе а не в шопе
                                                                                                                                  но каждый себе доктор
                                                                                                                                  а можете мне показать совю работку хоть одну ?
                                                                                                                                  ну так чтоб вы в моих глазах немного выросли
                                                                                                                                  0
                                                                                                                                  чем постоянно лазить в панель инструментов

                                                                                                                                  тру-фотошоперы должны помнить хотя бы 10 клавиш быстрого доступа к инструментам.
                                                                                                                                    0
                                                                                                                                    10 клавиш должны помнить новички. А тру-фотошоперы должны помнить все команды хоткеями. Например Alt+I>A>C = Brightness & Contrast итп...
                                                                                                                                    0
                                                                                                                                    статья реально странная... не говоря об удобстве/оправданности применения шотошопа, если они получают добро на разработку по бумажным эскизам, то у них похоже, что весьма завидные заказчики. у нас регулярно заказчики пытаются оспаривать согласованный и подписанный макет полность прорисованный в JPEG. мне даже представлять не хочется, что они могут понапридумывать по бумажным эскизам.
                                                                                                                                      0
                                                                                                                                      Что тут говорить... Революционеры!
                                                                                                                                        0
                                                                                                                                        Не могу удержаться - откомменчу ещё раз. Даже всю статью не прочитал. Сидел и плакал. Знакомо до боли.
                                                                                                                                        Если буду воспитывать преемника-падавана, сразу скажу не париться с фотошопом. Сэкономлю ему годы жизни.
                                                                                                                                          0
                                                                                                                                          Статья понравилась...
                                                                                                                                          Главное, как мне кажется, что нельзя к этой проблеме подходить с точки зрения дизайнера или программиста. Понятно, что профи и в любимом редакторе нарисует и прототип сверстает.
                                                                                                                                          Но, встаньте на сторону менеджера, заказчика, короче, человека, у которого есть какая-либо идея - создать сайт...
                                                                                                                                          Реальных инструментов отработать логику, юзбилити, убедить клиента, интвестора - просто у него нет. Пока только Повер Поинт.
                                                                                                                                          Есть и обратная обычная ситуация.
                                                                                                                                          Рисуем дизайн в Фотошопе - клиент принял на УРА.
                                                                                                                                          Дальше в середине или в конце работы над интерфейсом получаем паочку "маленьких изменений", которые драматично сказываются и на юзабилити, и на логику, и на дизайн...

                                                                                                                                          После запуска сайта - получаем полный букет проблем и т.п..
                                                                                                                                            –4
                                                                                                                                            Полнейший бред и дебилизм. Автор пишет полное говно, которое неоправдано. Люди, работающие в студиях и знающие процесс - это поймут.

                                                                                                                                            Те, кто считают проблемы написанные выше действительными - профнепригодны.
                                                                                                                                            Не умеешь работать в Фотошопе - не работай.
                                                                                                                                              0
                                                                                                                                              сотрудники 37signals профнепригодны?
                                                                                                                                                –2
                                                                                                                                                Я не знаю про их профнепригодность, а говорю только то, что написанный текст - полный бред. Как можно согласиться с тем, что если работать в фотошопе, то надо обязательно начать прорисовывать мелочи, ну что за ху*ня, господа?
                                                                                                                                                Как можно согласиться, что макет заказчику надо показывать, сразу в сверстанном виде, а потом еще 500 раз переверстывать, ведь в фотошопе так тяжело это делать - не дебилизм?
                                                                                                                                                Фотошоп сложен? Ну так бл*ть не пользуйся им, если он сложен для тебя. Разве профессионал может сказать, что он сложен? :) Пусть значит в экселе делает сайты...
                                                                                                                                                Переводить такие статьи публиковать здесь - плодить таких же кретинов, как и автор статьи. Это лично мое мнение.
                                                                                                                                                  0
                                                                                                                                                  37signals не делает сайты для клиентов. И писали они исключительно про себя :)
                                                                                                                                                    –1
                                                                                                                                                    Если писали они этот бред исключительно для себя, нахрен было его публиковать на своем сайте? Пусть сами бы и руководствовались бы своей писюлькой. :)
                                                                                                                                                    Здесь многие люди, которые начиют верить в то, что написано написано и начинают соблюдать этому. Прочитал один, встретил друго и говорит ему "вот знаешь, я тут решил забить на фотошоп", - даа, а почему? "да потому что им сложно пользоваться, долго ставить, слишком много опций"... Такие люди - пациенты.
                                                                                                                                                      +1
                                                                                                                                                      фотошоп крайне медленная, неудобная и говяная программа для прототипирования..
                                                                                                                                                      тот же illustrator или indesign сделают его как бог черепаху.

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

                                                                                                                                                      есть такая доисторическая программа adobe image styler (потом она переродилась в imageready) дак вот, в ней делать первоначальный набросок гораздо быстрее. жаль что прикрыли лавочку (т.к. прога на данный момент времени тоже не идеальна)
                                                                                                                                                        0
                                                                                                                                                        Не для себя, а про себя...
                                                                                                                                                +1
                                                                                                                                                Мне кажется, что слово «skip» в названии оригинальной статьи означает именно «пропустить» — пропустить как этап создания прототипа сайта.
                                                                                                                                                  0
                                                                                                                                                  Возьмите дизайн информационного сайта, например http://www.usatoday.com/

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

                                                                                                                                                  Парням наверное лень так много рисовать в фотошопе, ну так это другой разговор ;)
                                                                                                                                                    0
                                                                                                                                                    Книгу прочел давно, книга хорошая. А методика без фотошопа мне не нравится. И текст там такой же как в сети можно сделать, главное этим фотошопом уметь пользоваться.
                                                                                                                                                      +1
                                                                                                                                                      1. Макет не кликабельный.
                                                                                                                                                      пожалуй, разумный довод. для флеша, в основном :)
                                                                                                                                                      2. В Фотошопе слишком много иструментов для проработки деталей.
                                                                                                                                                      да что вы? (это я авторам статьи, а не топика) серьезно? а если в макете НУЖНЫ детали? а если макет состоит из деталей, как и любое целое? :))
                                                                                                                                                      3. Текст в Photoshop — это не то, что текст в сети.
                                                                                                                                                      первый разумный аргумент. разлетающийся в пух и прах в связи с тем, что и в вебе гарнитуры отлисаются в разных осях и, иногда, браузерах.
                                                                                                                                                      4. Photoshop сфокусирован на производстве, а не продуктивности.
                                                                                                                                                      аргумент, которым может руководствоваться "интернет-студия" http://krevedko.biz, но не к-л серьезный разработчик.
                                                                                                                                                      5. Фотошопить — дважды делать одну работу. Ну потратили 3 дня на макет, дальше что? Беремся за HTML/CSS, повторяем всё заново.
                                                                                                                                                      заново? ой ли? а так - эмпирическим путем подбираем гарнитуры, отступы и пр? флаг в руки :)
                                                                                                                                                      6. Photoshop не для совместной работы.
                                                                                                                                                      дизайн интерфейса, вообще то, по большому счету, - работа одного человека. есть и исключения - не спорю, но там дифференцировка идет на уровне оформления блоков, но не на уровне всего макета. эффект "лебедь, рак и щука", описанный великим разработчиком басен Крыловым, еще никто не отменял.
                                                                                                                                                      7. Photoshop сложен. Конечно, после 10-летнего опыта работы...
                                                                                                                                                      жить вообще сложно. работать - еще сложнее.

                                                                                                                                                      резюме: соучасники! по-моему, это все - лажа.

                                                                                                                                                      п.с.: кому понра - подкинте кармы, а то я как то "на грани"...
                                                                                                                                                        0
                                                                                                                                                        1. для любых современных сайтов отличных от "большая картинка с контактной информацией на входе".
                                                                                                                                                        2. это макет печатной брошюры может состоять из деталей. а с таким подходом к вебсайтам получается унылое надизайненное говно, а не удобные информативные сайты.
                                                                                                                                                        3. в фотошопе они все равно отличаются сильнее
                                                                                                                                                        5. "гарнитуры, отступы и пр." можно подобрать и верстая сразу в хтмл.
                                                                                                                                                        резюме: нельзя подходить к веб-разработке как к традиционной верстке и дизайну. приверженцы рисования сайтов в фотошопе суть динозавры, зачастую просто не знакомые с современными технологиями, не умеющими и не желающие учиться.
                                                                                                                                                          0
                                                                                                                                                          1. г-н Пирогов, к примеру, я уверен, использует ФШ. равно как и Тема Лебедев TM и т.п. и т.д.
                                                                                                                                                          2. из деталей состоит любое ЦЕЛОЕ. из "отдельных частей" состоит УГ, которое Вы упомянули.
                                                                                                                                                          3. не соглашусь, ибо критерий отличия спорен. в моей практике, чеще всего, удается добиться очень четкого сходства фотошоповского макета и сверстаной стрнаницы (ишак, фф, опреа под виндой)
                                                                                                                                                          5. подбирать можно и при верстке, ктож впорит. на моя взгляд, в ФШ это делать намного удобнее (поправка на похожесть шрифтов)

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

                                                                                                                                                          п.с.: веб-дизайн вырос из традиционной верстки и дизайна. а кто не помнит прошлого - не имеет будущего.
                                                                                                                                                            0
                                                                                                                                                            а как вы в фотошопе собираетесь "подбирать" визуальные анимационные эффекты? или изменение страницы при разных разрешениях? или как будет вести себя верстка банально при увеличении и изменении текста в одном из блоков? или картинку загрузили не панорамную, а портрет? каждый день сталкиваюсь с такими макетами, нарисованными дизайнером ничего не знающим о html, зато считающим что "веб-дизайн вырос из традиционной верстки и дизайна" и, судя по всему, для нее там и оставшимся. а потом она смотрит на получившийся сайт и делает круглые глаза. для нее идеальный сайт это та картинка, которую она нарисовала в фотошопе. статичная, прилизанная, далекая от реальности веба - её только распечатать и на стенку повешать.
                                                                                                                                                            зы будущего уж точно не имеет тот, кто цепляется за прошлое.
                                                                                                                                                              0
                                                                                                                                                              по части любой интерактивности - вы правы, конечно.(про картинки, правда - не врубился...).
                                                                                                                                                              в ФШ есть такая штука, как варианты комбинирования слоев - то есть по клику можно увидеть изменения позиционирования, видимости и пр. в пределах одного документа - именно так я и отрабатываю интерактывность большинства элементов в своих макетах.
                                                                                                                                                              да, я уверен, что без типографики и дизайна в вебе делать нечего. и в HTML+CSS немного разбираюсь (см. мою статью http://nicothin.ru/10-priznakov-professionalnoj-verstki.html)
                                                                                                                                                              ФШ де факто - не прошлое, а очень даже настоящее веб-дизайна.

                                                                                                                                                              если же Вы, уважаемый, собираетесь оспаривать мое утверждение "веб-дизайн вырос из традиционной верстки и дизайна", мне Вас искренне жаль.
                                                                                                                                                                0
                                                                                                                                                                это веб-дизайнеры (те что в фотошопе рисуют) выросли из традиционной верстки и дизайна. веб-дизайн, знаете ли, несколько иные корни имеет, как то донести информацию до пользователя, а не "сделать красиво". отсюда и html и всё остальное.
                                                                                                                                                                  +1
                                                                                                                                                                  нус, укажите ка корни эти?
                                                                                                                                                                  в каких областях они?

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

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

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

                                                                                                                                                                      а про мое знакомство с HTML - дайте себе труд почитать мои ответы на Ваши дешевые пассажи - вопрос отпадет сам собой.
                                                                                                                                                                        0
                                                                                                                                                                        именно из ваших ответов я делаю однозначный вывод о том, что с html вы не знакомы. я же 2 года занимался версткой в газете и 2 года веб-программированием. разница между веб-дизайном и печатным дизайном колоссальная (хотя допускаю незаметная для веб-дизайнера, застрявшего на уровне фотошопа). конечно, есть сайты которые лепятся в фотошопе и вполне могут так и существовать - как статичные картинки или imagemap'ы, но такие сайты делаются исключительно для заказчиков, а не для посетителей. если вы этого не понимаете, а вы это НЕ понимаете - нам с вами нечего обсуждать.
                                                                                                                                                                          0
                                                                                                                                                                          если бы Вы читали мои ответы, то увидели бы ссылку на мою статью "10 признаков профессиональной верстки". собственно веб-дизайном и HTML и CSS версткой я занимаюсь с 2003 года, то есть поболее вашего.

                                                                                                                                                                          из какой именно части моих посылов Вам Вы сделали парадоксальный вывод о том, что с HTML я не знаком мне не понятно, но это не так уж важно.

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

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

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

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

                                                                                                                                                                          а вообще, содержание этого поста на хабре напоминает мне результаты мозгового штурма по теме "почему мы отказались от ФШ", если уж быть до конца честным.
                                                                                                                                                                            0
                                                                                                                                                                            обращение на "вы" в интернете - традиционный признак плохого отношения к собеседнику.
                                                                                                                                                                            динамичность сайта это не только "всякие рюшечки" из вашего понимания, но и банальное растяжение сайта при изменении разрешения или изменении контента. были бы вы знакомы хотя бы с основами веб-верстки - вы бы это понимали. за сим позвольте откланятся, что здесь еще можно обсуждать я не понимаю.
                                                                                                                                                                              0
                                                                                                                                                                              "Вы" - дистанцирует, согласен.
                                                                                                                                                                              а вообще то, говорить и писать "Вы" незнакомому Вам человеку - признак хорошего тона и внутренней культуры. (сам я - не выношу, когда мне говорят или пишут "ты" - с такими людьми я почти не общаюсь и если такой обращается ко мне за помощью, чаще всего, уходит ни с чем. полагаете, я одинок в таком отношении? спасибо, что обращаетесь ко мне именно на "вы".)

                                                                                                                                                                              тянущийся макет - кошмар юзабилити:
                                                                                                                                                                              - позиционирование блочных элементов в потоке текста нерегулируемо,
                                                                                                                                                                              - длинна строки нерегулируема (сильно влияет на читаемость текста),
                                                                                                                                                                              - сраный IE6 не позволяет без хаков ограничить максимальную ширину.
                                                                                                                                                                              вывод: редкоупотребимо и только в проектах, не подразумевающих серьезную текстовую информацию.
                                                                                                                                                                              попробуйте найти веб 2.0 - проект, рассчитанный на восприятие пользователем текста с резиновой версткой. (может и есть таких парочка, да только резиновость тут говорит о квалификации разработчика)
                                                                                                                                                                              если же Вы имели в вижу вертикальную растяжку (о, несомненно это именно так, ведь Вы разбираетесь в верстке - давно работаете в этой области), то ЛЮБОЙ веб-дизайнер предусматривает таковую в не-флеш (а иногда и во флеш) макетах. если это не так - то есть свидетельство полной некомпетентности "дизайнера".
                                                                                                                                                                              с необходимостью вертикальной растяжки приходится мириться, это неизбежное "зло", но, если честно, мне непонятно как сие относится к предмету дискуссии. Вы утверждаете, что создание страницы изначально в виде HTML облегчает дизайн? лично я, рисуя страницу сайта в ФШ, предуматриваю расширение контента и этого ВСЕГДА оказывается достаточно для хорошего внешнего вида страницы.

                                                                                                                                                                              вот что можно обсудить.

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

                                                                                                                                                                              с Вашего позволения, кланяться не буду.
                                                                                                                                                                                0
                                                                                                                                                                                то есть единственный аргумент, который я должен был почерпнуть из ваших пустых и пространных постов это что вы знакомы с вёрсткой? да сами ваши рассуждения показывают, что это не так, уж извините. с 2003 года, говорите? некоторые люди просто застряли в прошлом.
                                                                                                                                                                                  0
                                                                                                                                                                                  мдя... я вижу, у Вас все настолько запущено, что разговор с Вами - пустая трата времени.
                                                                                                                                                                                  мне очень халь, что я Вам его уделял - Вы не читали и не читаете мои ответы, уподобляясь глухарю, который когда поет - ничего вокруг не слышит. очень жаль, что диалога не получилось... хотя, учитывая Ваши "аргументы" и "понимание", сомневаюсь, что он мог получиться. жаль только, что ко мне это понимание пришло только сейчас. это мне минус.
                                                                                                                                                                                    0
                                                                                                                                                                                    вам минус только один - вы изначально взялись рассуждать о вещах, в которых ничего не понимаете. отсюда и бесконечные передергивания, и попытки перевести тему обсуждения - будь то с заглавной ли буквы пишется Вы или проблемы резиновой верстки... все это только подчеркивает вашу несостоятельность в теме обсуждения. ведь если бы вы хоть минимально в ней разбирались, вы бы знали что и тянущиеся макеты сделать уже давно не проблема и www возник далеко не из бумажной верстки, а из простого представления текстовой информации, gopher'а и пр...
                                                                                                                                                                                    совет вам только один - учитесь. и учитесь не только по теме www, но и простому общению, так как сейчас вы любое начинание сводите к попытке оскорбить собеседника, чуть стоит ему поставить вас на место, указав на ваши заблуждения. удачи.
                                                                                                                                                                                      0
                                                                                                                                                                                      спасибо, что подтвердили мое мнение о Вас как о самодовольном, некомпетентном и посредственном человеке, не умеющим читать.
                                                                                                                                                                                      мне жаль Вас.
                                                                                                                                                                                        0
                                                                                                                                                                                        про вашу некомпетентность уже было сказано выше. причем вы сами её не раз в ходе беседы подтвердили. если вам нечего сказать по теме - не утруждайте себя.
                                                                                                                                                        0
                                                                                                                                                        Защитники Фотошопа и HTML/CSS - успокойтесь. Никто не отнимает их у вас.
                                                                                                                                                        В статье речь идет СТРОГО о ПРОТОТИПИРОВАНИИ. То есть продумывании общения пользователя с интерфейсом, в данном случае - с интерфейсами сайта.

                                                                                                                                                        Так вот никакой HTML или Фотошоп не помогут вам сделать ИНТЕРАКТИВНОГО прототипа, с УСЛОВНЫМИ переходами, эмуляцией AJAX-функций и прочей байды, без которых современные сайты не делаются.

                                                                                                                                                        Подобный прототип создается специалистом по UI, который вообще в графдизайне может быть нулем и абсолютно не знать HTML/CSS/JavaScript. Зато он знает, как нужно сделать, чтоб было удобно.

                                                                                                                                                        Я относительно недавно начал пользоваться Axure и (как идиот в какой-нить рекламе) не понимаю, как жил без него раньше. Его структура темплейтов и мастеров максимально напоминает подобную фигню в современных крупных проектах. В нем имитируется полноценный браузинг по сайту, с кучей страниц, интерактивными формами (с проверками), слоями и прочей хренью. Тулза не без проблем - и баги есть и с десятками слоев на странице трудновато управляться (обещают как-то излечить), но только в Axure-е я смог за пять часов сделать полноценный рабочий макет сайты с примерно 10 типами страниц, имитациями действий зарегиных/незарегиных юзверей, пополнением контента, аяксовыми поисками и т.д. С НУЛЕМ кода - полный WYSIWYG.

                                                                                                                                                        Те, кто используют Axure RP в своей работе, думаю, меня поддержат. Пока лучшего инструмента для прототипирования нет. Уж больно рынок узок для множества конкурентных продуктов :(
                                                                                                                                                          –1
                                                                                                                                                          мля, как можно вообще скрещивать дизайнера и верстальщика?! это кощунство и богопротивное действо(ИМХО). Ещё б сантехника и гениколога скрестили, типо оба по дырам лазят.

                                                                                                                                                          Да и дизайнер за спиной у верстальщика тож не очень вариант. Пока верстка макета идет, дизайнер рисует следующий и так по кругу, мануфактура мля, Петр I шарил))
                                                                                                                                                            0
                                                                                                                                                            Знавал я отличного дизайнера-верстальщика, и то и другое он делал очень хорошо; просто он знал как можно сверстать то, что сам нарисовал. Этого качества нехватает многим дизайнерам — иногда становиться страшно, глядя на присланные макеты.
                                                                                                                                                            0
                                                                                                                                                            К счастью или к несчастью я использую метод описанный в статье, так как штатного дизайнера у нас нет, и приходиться все сразу прототипировать, отрисовывая нужные элементы в Photoshop'е. Естественно это не подходит под сложные и загруженные графикой проекты, но для легких и быстрых решений это самое оно.
                                                                                                                                                              0
                                                                                                                                                              Поздно заметил этот пост, но всё же сообщу, что небезызвестный Джеф Крофт написал пост "Почему мы НЕ забиваем на Фотошоп":
                                                                                                                                                              http://jeffcroft.com/blog/2008/jun/04/wh…

                                                                                                                                                              И кое с чем, я, например, согласен. Например, с непроизвольным "упрощением" макета в процессе вёрстки.
                                                                                                                                                                0
                                                                                                                                                                Я вот тоже упорно пытаюсь продвигать предварительную разработку на бумажке, и потом сразу xHTML\css, но дизайнеры почему то упорно сопротивляются. На самом деле причина в том что большиство дизайнеров у нас самоучки, да они умеет фотошопить и тд, но они не всегда знакомы с методологией развития и создания проекта, как уже отмечали выше слово прототипирования для многих ругательство, либо оскорбление их творческой натуры). Хотя конечно не всегда все так плохо, но в целом так.
                                                                                                                                                                  0
                                                                                                                                                                  я отношесь именно к описываемой Вами группе дизайнеров.
                                                                                                                                                                  лично для меня основные аргументы использования графического редактора - объективный (насколько это понятие тут применимо, вообще то...) выбор цветов, гарнитур шрифтов (немколько менее значимо, в связи с разницей шррифтов в осях и браузерах), отступов, размеров элементов.
                                                                                                                                                                  я не против прототипирования на бумаге - даже за. сам нередко его провожу в меру своих скромных возможностей, но прямо с бумаги, да в верстку...

                                                                                                                                                                  этот подход хорош в плане скорости разработки, а вот модифицируемость результата, на мой взгляд, несколько хуже. поэтому, в большинстве случаев, лично для меня, - лучше меньше, да лучше.
                                                                                                                                                                    0
                                                                                                                                                                    Смотри, я сча огрублю но все же.:
                                                                                                                                                                    1. Этап
                                                                                                                                                                    Верстальщик/программер+Дизайнер собираются и обсуждают будущую структуру сайта, всю семантику, элементы и тд. Вся фишка в том, что при правильном проэктировании прототип будет независим дизайна и серверного кода.
                                                                                                                                                                    2. Этап. Дизайнер начинает рисовать дизайн на основе протипа( в том же фотошопе), а верстальщик лепить вертску сайта(xHTML+css вполне помогают абстрагировтаься от дизайна).
                                                                                                                                                                    3. Этап Снова работа вместе, дизайнер и верстальщик/кодер совмещают свои детища.
                                                                                                                                                                    В итоге мы имеем довольно гибку систему, и главное при смене дизайна перерабатывать придется минимум, а если и верстальщик молодец, то даже мелкие и средние смены в протипы не должны серьезно сказаться на проекте.
                                                                                                                                                                    Вот примерно как то так. =)
                                                                                                                                                                    Но я вот чато сталкивался с непонятным упрямством, рисуем сразу в фотошопе, а потом чуть ли не табличная верстка... аргументы типа не запарно и все дела. Зато потом при поддержке и развитии сайта вылазит куча проблем и лишней работы.
                                                                                                                                                                      0
                                                                                                                                                                      да, в этом есть рациональное звено, полностью согласен.
                                                                                                                                                                      увы, мне пока встречаются клиенты, которые хотят сразу видеть как будет выглядеть сайт, так что я держусь за первоначальную отрисовку только по причине капризности (и глупочти - что чаще, синонимы) клиента... (это все оправдания, я понимаю)

                                                                                                                                                                Только полноправные пользователи могут оставлять комментарии. Войдите, пожалуйста.

                                                                                                                                                                Самое читаемое