Веб-дизайнер vs верстальщик. Разделение труда, или когда нужен менеджер проекта (из истории одного стартапа)

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

    image

    Статья может представлять определённый интерес для заказчиков веб-услуг (владельцев сайтов / бизнесменов, желающих открыть собственный стартап). Материал также может послужить полем для обсуждения всеми сторонами вопроса — веб-дизайнерами, проектными менеджерами, верстальщиками, владельцами сайтов. В статье рассказывается о процессе проектирования и разработки веб-дизайна (с логическими схемами) стартапа, о наблюдении за реализацией и последующей «жизнью» проекта и об итоговом его закрытии. Не наделённая достаточной информацией по объективным причинам закрытия данного стартапа, я постараюсь избежать домыслов, пересудов и необоснованных выводов. Цель моего рассказа — отразить взгляд со стороны веб-дизайнера на реализацию его дизайна на сайте. Статья содержит практические советы по контролю качества вёрстки.


    Предыстория


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

    На самом деле, речь пойдёт об одном сайте знакомств, для которого я разрабатывала веб-дизайн. Стартапом я его называю по той причине, что он нёс в своей основе уникальную идею, меняющую представления о возможностях знакомств. Идея эта была проста и оригинальна — выкупать размещение фото-ленты (т.н. «мордо-ленты») на множестве других сторонних сайтов и тем самым достигать массовой доступности (популярности) в интернете. Оговорюсь, что изначально я испытывала некое отторжение от самого названия сайта (МордаЛента.ру). Однако заказчик считал его вполне актуальным в свете того, что «в народе» для подобных лент используют именно это название. Безусловно, перечить мнению заказчика я не могла, и стала работать «с тем, что есть».

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

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

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

    Проектирование логической структуры главной страницы


    Нужно сказать, у моего заказчика уже был опыт запуска и развития стартапа, но предыдущий проект не задался. Те, кто были «вторыми», оказались «первыми». Заказчик находил объяснение в том, что всё делалось «тяп-ляп», и теперь рассчитывал пойти другим путём. Мне импонировало его стремление к качеству, поэтому когда он попросил перед встречей подготовить свои соображения по тому, как должен выглядеть проект, я обстоятельно подошла к вопросу. Собственно, на встрече я набросала логическую схему (структуру страницы — базовый эскиз), попутно поясняя роль каждой из задуманных областей. Мои идеи пришлись по вкусу заказчику и были утверждены. Изначально, логическая схема главной страницы сайта представляла следующий вид:

    image

    По моему вИдению, главная страница сайта знакомств должна непосредственно вовлекать посетителей к желанию знакомиться и вступать в контакты с уже зарегистрированными пользователями сайта. Этой цели и служили Карточки пользователей с интересными предложениями для знакомств (слайдшоу в правом верхнем блоке, под «меню»). Кроме того, они являлись своеобразными примерами для публикации собственных предложений. Дополнительным мотивированием должны были служить описание уникальности и преимуществ сервиса. Ниже следовала сама «МордаЛента» — собственно, демонстрация конкретной услуги: лента, в которую должны были подавать своё объявление участники сайта. Далее — поле регистрации, где тут же можно было зарегистрироваться, пополнить счёт и подать объявление (всего в три шага). Блок с отзывами служил всё той же задаче дополнительного мотивирования к пользованию услугой. Статистика давала общее представление об участниках (по сути, такая статистика — классика для сайтов знакомств). Информационная область («Что такое МордаЛента») могла быть востребована сео-оптимизаторами в будущем. Нужно сказать, текстов мне никто не предоставлял, и они писались мной «от и до». Веб-райтинг, по моему мнению, зачастую неотделим от концепции веб-дизайна, но это уже тема отдельной статьи. Вкупе с зоной информации, также обсуждалась возможность использования инфографики, которая войдёт в состав веб-дизайна в дальнейшем.

    Позже, логическая схема была несколько переопределена. По желанию заказчика, «Статистика» попала в правый верхний блок, выместив «Карточки пользователей». На место Статистики встали «7 причин, почему выбирают МордаЛента».

    проектирование логической структуры страницы сайта (логической схемы)

    Дизайн-макет


    Итоговый дизайн-макет:

    проектирование логической структуры страницы сайта (логической схемы)

    Логическая структура сохранялась общей для каждой тематики. В дизайн-макетах, подготовленных для каждого раздела, менялись только цветовые схемы. Так, для макета «Развлекательной ленты» это был зёленый (+фиолетовый), для «Эро-ленты» — красный (+фиолетовый), для «Лесби-ленты» — розовый (+фиолетовый), для «Гей-ленты» — голубой (+фиолетовый), для БДСМ-ленты — коричневый (+фиолетовый).

    Реализация дизайн-макета на сайте. «Что выросло, то выросло»


    Через некоторые время после сдачи дизайна, он появился на сайте, и мне стало не по себе. Будучи практикующим верстальщиком и веб-программистом, я знала, что дизайн в некоторых местах сложен для исполнения на веб-странице, однако вполне реализуем. Что же я увидела? Ряд градиентов (переливы цветов), а также тонкая обработка декоративных элементов были грубо нарушены. На странице появились новые кнопки, совершенно не вписывающиеся в заданную цветовую палитру веб-дизайна (розовый отлично гармонировал с одной из тематик, но не к каждой из них). В блоке Статистики не было никаких ссылок, а только текст (они не предусматривались системой?). А уж инфографика, вместо того, чтобы отражать реальные данные для каждой тематической ленты, была ничем иным, как статической картинкой, теряющей весь смысл и роль. Не было и намёка на кликабельность целей знакомств, что могло бы стать особенной «фишкой» этого сайта.

    Как могла, я рассказала свои соображения заказчику по поводу дизайна. Также особенно проговорила принцип и роль инфографики, которая должна быть динамичной, кликабельной и для каждой ленты — своя. А не статичной, дублируемой на каждой из тематик, картинкой. Он вроде бы понял, и даже эмоционально откликнулся в стиле «эврика!». Не знаю, что произошло в дальнейшем, и какие преграды не позволили произвести ожидаемых изменений, но за долгое время наблюдений, они так и не последовали. На главной странице менялись только отзывы. Трудно сказать, по какой причине модераторами пропускались неграмотные и примитивные (или они писались самими разработчиками намеренно «народно»?), но смотрелись они весьма неприглядно.

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

    От примера к практическим советам


    Следующие ниже небольшие советы помогут контролировать качество вёрстки:

    • Идеально, если веб-дизайнер и верстальщик — одно лицо (ещё лучше, когда он же — ещё и программист, но это, скорее, редкость, чем правило)
    • Сверяйте дизайн-макет со свёрстанным веб-дизайном. Он должен быть идентичен, за исключением типографики (всё-таки в макете используется растр)
    • Не удовлетворяйтесь ответом верстальщика, мол, что-то сделать «нельзя». Не спрашивайте «почему?» (причины найдутся всегда). Лучше спросите: «Что нужно, чтобы это стало возможным?». Помните: сверстать можно практически любой макет. Так, если в дизайн-макете используется сложное фоновое изображение, для того, чтобы оно удлинялось соответственно длине экрана, в большинстве случаев, достаточно сделать повторяющиеся «вставки» (фрагменты фона). Если в фоновом изображении невозможно выделить полоски-области, которые могли бы повторяться, однако у вас есть это изображение в хорошем разрешении, то «подгонять» его по размеру экранов можно js-скриптами. Если дизайнером запланирован фон под каждый знак в каком-то числе, а верстальщик просто кладёт под это число приближённый цвет фона, это неправильно. В этом случае, верстальщик должен сказать: «чтобы достичь точного соответствия с макетом, нужно разбить общее число на отдельные знаки, вложенные в теги». Эту задачу без труда выполнит программист. Если в веб-дизайне присутствует инфографика, и по замыслу она должна отображать процентное соотношение, попросите программиста подготовить модуль для фиксации этих значений, а верстальщик их сверстает надлежащим образом. Организуйте коллективную работу верстальщика и программиста. Дайте верстальщику возможность обращаться к программисту при необходимости.
    • Пусть вы уже рассчитались с веб-дизайнером за дизайн-макет, не стесняйтесь поинтересоваться, как он видит вёрстку тех или иных элементов веб-дизайна. Даже если веб-дизайнер не занимается вёрсткой, он должен иметь представление о возможных решениях реализации своего макета. В т.ч., это касается того момента, когда заказывался дизайн для сайта с «растяжкой» («резиновый» дизайн).
    • Если вы планируете введение новых кнопок или целых областей на страницах сайта, озаботьтесь, чтобы их оформление подходило к общему стилю и цветовой гамме веб-дизайна.

    Similar posts

    Ads
    AdBlock has stolen the banner, but banners are not teeth — they will be back

    More

    Comments 46

      +1
      >В блоке Статистики не было никаких ссылок, а только текст (они не предусматривались системой?). А уж инфографика, вместо того, чтобы отражать реальные данные для каждой тематической ленты, была ничем иным, как статической картинкой, теряющей весь смысл и роль. Не было и намёка на кликабельность целей знакомств, что могло бы стать особенной «фишкой» этого сайта.

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

        А слово «пипетка» Вам о чем-нибудь говорит? Или всегда «на глазок»?
          0
          Вы хоть поняли вообще о чем речь? Причем тут пипетка? Поставьте рядом два монитора и посмотрите. Залейте оба синим цветом, — на ипсе он будет синий на всём экране, на ТНке будет градиент сверху до низу. Плюс цветопередача на разных мониторах разная. Дизайнер выделил некоторые элементы СЕРЫМ на БЕЛОМ фоне, я у себя открываю — нету у меня серого, и то и то белое. Только одно FFF, другое f7f7f7. А как оно будет у заказчика смотреться? А как оно у клиентов будет смотреться? А на смартфонах как будет?
            0
            Если макет приходит к Вам в виде PSD или AI файла, то вопросы градиентов решаются открытием файла в редакторе и выяснением цветов у градиентов.
            Если пришла растровая картинка — помогает пипетка.
            А когда верстальщик подбирает градиенты «под свой монитор» — это какая-то кустарщина, простите.
            За цветопередачу отвечает дизайнер, и именно на его совести возможные траблы пользователей с разными мониторами. Если верстальщик наблюдает очевидную проблему, то его задача — аргументированно донести ее до дизайнера.
              0
              О чём и речь, — совместная работа. Одно дело если вы можете хоть что-то донести до дизайнера, другое дело, если пришёл уже готовый макет, а дизайнер за тридевять земель находится.
        +2
        Мне первый рисунок-схема по дизайну больше нравится чем то, что вышло… Признаться честно, ожидал в статье прочитать что-нибудь новое и интересное. Задачи, пути решения. Не вышло, переделали так и эдак. Не покатило, так как то-то и то-то, поэтому нашли такое решение. А вышло примерно так: решили сделать сайт, нарисовали схему, сделали дизайн, хорошо, когда работают профессионалы и все выходит красиво.
          +1
          (ещё лучше, когда он же — ещё и программист, но это, скорее, редкость, чем правило)


          Издеваетесь? :) Дизайнер-верстальщик-программист? С вероятностью 99% он будет два из этих пунктов делать на «более-менее», а третий — на «отвратительно».

          На моей памяти редко попадались даже те, кто на профессиональном уровне совмещал две из этих профессий, а уж все три — упаси бог от таких комбайнов.
            0
            PavlovM, являюсь комбайном. Жить и создавать хочется — не убивайте.
            Когда-то давно начинала как веб-дизайнер, но слыша «нельзя» верстальщиков, начала верстать и делать «можно».
              0
              Если жить и создавать хочется — это прекрасно :)

              Просто быть отличным профи в двух разных областях получается у очень немногих.
              Лучше сосредоточьтесь на том, что вам интереснее (дизайн, наверное?), развивайтесь, растите. А на верстку найдите человека, которому больше по душе верстка, чем дизайн. Вам просто попадались плохие верстальщики, такое бывает :)
                0
                так вы совмещаете все три качества?
                а можно примеры ваших работ, которыми гордитесь. Если не секрет
                  0
                  rapida, да, конечно. Вот пара работ: http://staroptic.ru, http://kursi-yazikov.ru, http://cck-ship.ru. Не сказать, чтобы горжусь-горжусь — гордиться вообще плохо. Просто работы. )
                    0
                    очень неплохо! спасибо
                      0
                      rapida, спасибо )
                0
                А что по-вашему комбайн? Вот я верстальщик, но могу сделать дизайн, если сроки не жмут и могу создать программную часть, даже cms. Но занимаюсь вёрсткой, т.к. это больше нравится. Опять же я считаю, что любой дизайнер должен знать основы и ограничения вёрстки этим и отличается веб-дизайнер от любого другого дизайнера.

                Ну, а последний довод — если такого комбайна покупают, значит он востребователен.
                  0
                  Люди, которые могут сделать «удовлетворительно» — существуют, не спорю, и даже в относительно больших количествах. А вот чтобы один человек делал и дизайн, и верстку, и программирование на «отлично» — сильно вряд ли. Мы ведь все хотим «отлично», правда? :)

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

                  Но верстальщик, который что-то понимает в дизайне — еще не дизайнер. Программист, который знает html-теги и может на основе бутстрапа сделать сайт — еще не верстальщик. И так далее.
                    0
                    dshster,

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

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

                    Ну, и — спасибо за доводы. )
                      0
                      PavlovM, если я занимаюсь веб-дизайном/программированием/вёрсткой, что же, мне теперь в волейбол и в шахматы не играть? Гроссмейстером не являюсь, но перворазрядников периодически обыгрываю. Волейбол пляжный — ростом не вымахала, но беру «сложные мячи». Это, конечно, отступление. Касательно профильности и профессионализма, в первую очередь, хочу поинтересоваться — какого уровня решение задач вы подразумеваете? И связанный вопрос: как вы думаете, какого уровня осуществление задач требуется для создания современного сайта для малого и среднего бизнеса? Вы считаете, что в большинстве проектов на сегодня стремятся использовать инновации и революционные коды/техники, требующие беспримерных навыков программирования/ вёрстки/ веб-дизайна? Что, по-вашему, «отлично», и на что опирается эта оценка? Например, я могу спрограммировать модуль Joomla, osCommerce на «отлично». Сделать дизайн и сверстать его. Если встанет такая задача, смогу разобраться в любом чужом коде других CMS. При достатке времени, могу написать с нуля CMS под нужные задачи (но не вижу смысла красть велосипед / прорубать окно в Америку). В веб-дизайне я не считаю себя Микеланджело, но это не значит, что все, кто занимается исключительно веб-дизайном — сразу Да Винчи. Равно, как и не каждый программист, занимающийся исключительно программированием, — пишет самый быстрый, гибкий и самый востребованный код. Моё увлечение шахматами совершенно не мешает мне играть в волейбол, и даже наоборот, хотя это совершенно разные виды спорта (я знаю, куда лучше посылать мяч, чтобы противник его не отбил, — или, какому союзнику его передать). Более того, в веб-разработке иногда полезно и выигрышно иметь более глубокие знания в разных спектрах, чем просто ознакомление с «соседними» видами деятельности. Расскажу пример. Небольшая московская фирма. В офисе сидят программист, верстальщик, дизайнер и сеошник. Творят над сайтом на Joomla. На сайте всего несколько прикрученных модулей. Творят более года, постоянный штаб. Сеошник говорит: «Что-то мы на второй странице Яндекса...». Смотрю код. Спрашиваю: «а почему у вас главный заголовок где-то за меню и шапкой влачится?». Сеошник отвечает: «У нас максимальная оптимизация при данном шаблоне». Немая сцена: оглядываю программиста, дизайнера и верстальщика. Поместить заголовок ближе к «боди» — дело 5ти минут, они сидят месяцами напролёт перевёрстывают / передизайнивают / перепрограммируют сайт (боюсь спросить, что вообще с сайтом можно делать годами — целым штабом?). А всё дело в том, что разделение труда воспето и прославлено, и вместо одного человека фирма кормит четырёх, которые даже согласоваться между собой не могут. Ответный пример с моей стороны: cck-ship.ru — тоже на joomla, прикручено и модернизировано также несколько модулей/компонентов, делался под ключ за месяц, периодически меняю баннеры и произвожу небольшие обновления, по ключевым запросам в поисковиках — в топ10 (по самым главным — в топ3). Работаю удалённо, обновляю по требованию. К чему всё это? Приведённый пример — демонстрирует типичный уровень задач современного интернет-проекта малого и среднего бизнеса. Он успешно осуществим одним человеком. Доказано прктикой. Однако если говорить о мега-проектах, мега-брендах и т.д. (включая мега-бюджеты), то, безусловно, здесь понадобятся не то что 3-4е человека, а целые отделы специалистов, и управлять ими лучше при чётком разделении ролей и обязанностей (иначе произойдёт топтание на месте).
                        0
                        Можно быть перворазрядником по шахматам и выигрывать районное первенство по волейболу, но стать одновременно гроссмейстером и чемпионом страны по волейболу — у вас уже вряд ли получится :)

                        Собственно, соглашусь, для малого бизнеса хороший «человек-комбайн» может сделать нормальный сайт. Просто «комбайнерство» мешает стать отличным профи в чем-то одном.

                        Но, как говорится, дело хозяйское :)
                          0
                          PavlovM, мне кажется, всё проще. ) Есть способности, физические и психические пределы развития. Чемпионами становятся единицы. Также, как не все упорные мастера становятся Микеланджело и Да Винчи. Кстати, Да Винчи не мешало быть одновременно анатомом, химиком, изобретателем и живописцем и мн. др. По вашей логике, он в «профи» уж никак не мог попасть. )
                            0
                            Хм. Один из величайших гениев в человеческой истории должен немного выбиваться из общей цепочки, не находите? :)

                            Я уже достаточно давно работаю, приходилось общаться/работать со многими людьми и опыт говорит, что в абсолютном большинстве случаев люди, которые «умеют все» — на деле умеют это все на не слишком высоком уровне. Даже если лично вы станете счастливым исключением, общей картины это не изменит.

                            И также я убежден, что если бы эти люди сконцентрировались на одной профессии, которая им больше по душе, они бы достигли в ней лучших результатов, чем пытаясь усидеть на трех табуретах сразу. И к черту «пределы развития» :)
                              0
                              Доброго дня. ) Один из величайших гениев выделяется отнюдь не этим, а своими способностями, талантами и открытиями. У вас есть укоренившееся мнение, и даже исторические факты его вряд ли опровергнут. Более того, все гении как раз и были похожи в своих обширных интересах и пытливом отношении к миру. Возьмите Наполеона, Ломоносова, Эйнштейна и др. Их увлечения не мешали им стать гениями в конкретной сфере (скорее — наоборот). Вы находите корреляционную зависимость там, где её нет, и совершенно игнорируете довольно очевидные связи.

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

                              Наверняка вы видели предшествующие работы «комбайнера-разнорабочего», прежде, чем начать сотрудничать (если такой опыт действительно имеется, и вы не «отсеяли» его, руководствуясь иными личными умозрительными «раскладами»). Значит, причину надо искать не в его мастерстве и способностях (ведь они успешно реализовывались до вас), а других обстоятельствах. Если этим человеком были достигнуты определённые результаты, вы не можете их так просто стереть/перечеркнуть — на основе лишь своего общения и впечатления.

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

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

                                Не будем переливать из пустого в порожнее, все равно каждый останется при своем :)
                                  0
                                  Спасибо ) Надеюсь, в прошествии диалога, ничем ненароком не обидела и не слишком занудствовала. )
                  +1
                  Так странно, так много статей такого рода, но ни одна из них даже близко не подошла к тому, чтобы действительно рассмотреть проблему со всех сторон. Наверное, это невозможно )

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

                  Я к чему — прикладное применение такого рода статей крайней сомнительно, по причине одностороннего подхода к вопросу: на каждый ваш пункт легко можно привести несколько контраргументов со стороны верстальщика. Лучше бы вы подумали над тем, как, наконец, сделать так, чтобы всем стало более лучше.

                  А то иначе ведь все мы знаем, как правильно и грамотно нужно работать, только вот почему-то говна на рынке не становится меньше )
                    0
                    superalesha, я верстаю. Все мои дизайн-макеты и свёрстанные страницы выглядят практически идентично. Я как-то даже не понимаю, как у верстальщика он может выглядеть как-то иначе, чем у дизайнера.
                      0
                      Да легко) Два разных человека и видят всё по-разному, и делают всё по-разному. Вот для вас страницы выглядят «практически» одинаково, а для кого-то совсем не одинаково, смотря как смотреть и как расставить акценты. Именно поэтому придумали вёрстку «пиксель в пиксель».
                        0
                        Anisotropic, вероятно, так и есть. Тогда другой вопрос: разве нельзя сверстать «пиксель в пиксель» по чужому макету, так же, как по своему? Отнестить к дизайну «пиксель в пиксель». Здесь правильно озвучили мысль о том, что за дизайн отвечает дизайнер (за цветопередачу и пр.). От верстальщика требуется повторить дизайн как можно ближе к «оригиналу». Это и есть его работа, если я верно понимаю (?).
                          0
                          От меня, например, не требуют вёрстки «пиксель в пиксель» ;)
                          Как правило не требуют, я и не стараюсь особо, показываю потом дизайнеру, и слушаю, что она скажет.
                            +1
                            Если показываете, и он одобряет, значит, всё классно. Я думаю, это даже можно назвать совместным творчеством.) В какой-то мере, вы можете чувствовать себя соавтором дизайна.)
                    0
                    Идеально, если веб-дизайнер и верстальщик — одно лицо

                    Еще года два назад я считала также и очень не любила отдавать свои творения на вёрстку другому человеку. Мне казалось, что правильно реализовать всё благолепие могу только сама).
                    Но по мере прокачки навыков дизайнера интерфейсов, я стала замечать интересную вещь — при создании графического макета я подсознательно делала некоторые вещи мене сложными и интересными, чем они могли бы быть, потому что «мне еще потом это верстать под IE».
                    Другой немаловажный момент — в некоторых случаях фронтенд-разработка занимает очень много времени, а я хотела всё больше заниматься дизайном, изучать новые инструменты, следить за трендами, основательно позалипать над скетчами и т.д.
                    И тогда я все-таки решила начать доверять верстальщикам). Главное — это диалог и по-возможности, приятельские отношения с фронтендером. Тогда сотрудничество получается продуктивным, а результат только радует.
                    Я люблю работать над фронтом и стараюсь следить за новыми веяними, но теперь не считаю это своей основной деятельностью. И это на порядок упростило мне жизнь. Чего и всем желаю).

                    Насчет
                    (ещё лучше, когда он же — ещё и программист, но это, скорее, редкость, чем правило)

                    Мне кажется, для дизайнера кодинг может быть только хобби, но никак не видом деятельности, которым он занимается наравне с основными обязанностями.
                    По себе знаю, что переход от фотошопа к IDE и наоборот — это как смена часовых или климатических поясов, ресурсов затрачивается огромное количество, а настроится на работу занимает очень много времени. Если я сегодня пишу код (без разницы, HTML, JS или PHP), то от души подизайнить я смогу, скорее всего, только завтра.

                    Мораль: дизайнеру в первую очередь нужно быть дизайнером, включать голову и уметь выстроить диалог с фронтед-технологом. И всё будет.
                      0
                      ZaiSL, спасибо за объёмный отзыв и за то, что поделились рассказом из личной практики. Согласна насчёт кода и дизайна — почти всегда приходятся на разные дни. Так получилось, что делаю всё — чаще всего, заказывают «сайт под ключ». Сначала — дизайн (неделя +), после утверждения дизайна начинается программирование и вёрстка (иногда попутно). Т.о., художественная и техническая части разделены. В целом, ваши мысли мне близки и понятны. Мой путь складывается иначе, но, как знать, может, всё переменится в дальнейшем. Более того, если бы я организовывала фирму, то, скорее всего, брала бы разных профильных специалистов (ими проще управлять). Мораль же из статьи почти такая и есть, как вы сказали, за небольшим исключением. Она обращена преимущественно к владельцам сайтов, которые нанимают фрилансеров отдельно и никак не связывают их, т.е. не дают возможности диалога.
                      0
                      Я так понял, что инфографика это вон та зелёная плашка? А теперь вопрос, как её верстать, если, к примеру, поле онлайн у вас всего 4 знака? Через год было бы 6 знаков в этом поле и строчка съехала бы вправо.

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

                      Картинка будет вам в портфолио, опыт на будущее. Не отчаивайтесь! И не надо ругать верстальщиков — и среди них есть профессионалы и гении и халявщики студенты.
                        0
                        Мне еще нравятся моменты наложения слоев с эффектом (вычитание, умножение и пр.). Выглядит отлично, но в реализации невозможно (или я чего то не знаю). И такое встречается довольно часто. Так что если дизайнер хочет чтобы макет выглядел один в один, то азы верстки и возможные применимые технологии в верстке
                          0
                          Если вы говорите об известных фильтрах-эффектах Photoshop, то при вёрстке, в этом случае, используется вырезанная из макета картинка/бэкграунд. Иногда достаточно вырезать достаточно небольшой участок. Когда же речь идёт не об умножении/вычитании, а просто полупрозрачности определённых элементов, то для этого в css есть такие инструменты как параметр opacity (-moz-opacity и т.д.). Для IE существуют ещё десятки интересных фильтров наложения (filter progid), однако они, по большинству, не в счёт, т.к. отсутсвуют аналоги обработки для других браузеров. Зачастую их применение ограничивается в создании полупрозрачности, теней и градиентов. В целом для веб-разработки, если вам интересно воплощать какие-то фильтры для картинок, могут использоваться фильтры php GD библиотек, однако их продуктом будут исключительно изображения (такие же, какие можно получить из PSD), поэтому для вёрстки их рассматривать не стоит.
                            0
                            Я о тех случаях когда фон один, а поверх слой с таким фильтром, на котором расположен текст, и этот слой с фильтром размножается, и фон можно быть разным или смещаться. Тогда уж никакие фокусы вырезания не получатся. Про прозрачность это как то уже не серьезно :)
                              0
                              А что именно смущает в тексте («на котором расположен текст»). Текст ставится на отдельный слой. Если фон может быть разным или смещаться, надо сделать так, чтобы не смещался / не был разным. Можно установить начало размножения фона с центра, или использовать хак. Если уж совсем гиблое дело (фон никак невозможно стабилизировать под картинкой, чтобы смотрелось слитно), тогда нужно сказать дизайнеру или заказчику, при каких условиях нужный эффект удастся передать в дизайне.
                                0
                                Ну вот собственно была такая задумка чтобы для каждой страницы был другой фоновый рисунок. Ну в общем так и сошлись, что сменили на прозрачность.
                                А смещался/не смещался, так это зависит куда фон (не повторяющийся) будет прикреплен — если к низу, тут как не крути не получится чтобы не смещался при слишком длинном тексте.
                                Ну да ладно, такие случаи встречаются не сильно часто, но вот использование этих фильтров — бывает часто, и для этого и надо иметь понятие что можно, и как можно использовать
                                  0
                                  Вы имеете в виду, фон фиксированный, а всё остальное движется? ну тогда это атас.
                                  Сменили на прозрачность — самое логичное решение) Поэтому про неё и упомянула выше. Эффект «наслойки» всё-таки более-менее сохраняется.
                                    0
                                    Ну как то так. На том и сошлись, что переделали под прозрачность
                          0
                          Если в фоновом изображении невозможно выделить полоски-области, которые могли бы повторяться, однако у вас есть это изображение в хорошем разрешении, то «подгонять» его по размеру экранов можно js-скриптами.


                          Т.е. верстальщик все таки программист по-любому? JS-программист? С кучей кривого медленного кода…

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


                          Если это отдельные знаки — значит они могут меняться, значит соответствие с макетом будем до следующего изменения.

                          Автор очень здорово переложил всю ответственность на верстальщика. Только проблема как раз таки чаще всего в том, что нужно заниматься проектированием дизайна и учитывать всю тонну факторов (от браузеров и экранов до специфики и данных сайта). А не рисовать в Photoshop линии и градиенты. Вначале пишется книга, а потом иллюстрации. А у вас получается — дай-ка я нарисую Гарри Поттера без очков, а ты весь сюжет 7 книг меняй — ведь написать, как и сверстать можно все.
                            0
                            Странный комментарий, но спасибо за внимание.) Вы поклонник Гарри Поттера? Про очки и 7мь книг вообще не поняла. При чём тут вёрстка? В статье говорится о том, что при надлежащих знаниях и управлении ими, всё возможно и всё достижимо. В обратном случае, всегда возникают неурядицы.
                              0
                              В статье говорится о том, что при надлежащих знаниях и управлении ими, всё возможно и всё достижимо. В обратном случае, всегда возникают неурядицы.


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

                              Ок, не понравился (или не поняли) Гарри Поттера — вот вам еще пример.

                              Я могу нарисовать машину или ракету как угодно хоть знаком вопроса — кому она нужна будет со скоростью 10 км/ч вот в чем вопрос.

                              Точно так же и сайты — можно нарисовать 10 слойные макеты с офигительными шрифтами, а потом любоваться на единственного пользователя у которого это заработала.
                                0
                                За компетентным специалистом и подразумеваются надлежащие знания, о которых я и говорю. Сайт ни в коем случае не должен быть перегружен. Но бедный и «быстрый» дизайн, — вроде пародии на вКонтакте или Яндекс, — тоже мало кого впечатлит и, в большинстве случаев, будет неприемлем. Давайте же не впадать в крайности, чем вы тут пытаетесь заниматься. Удачи!
                            0
                            Вообще самый простой и удобный интерфейс — это строка поиска: вбил, что нужно и вперед.
                              0
                              Как-то читала про исследования аудитории в этом вопросе. Существует 2 типа пользователя: те, для кого актуальна та самая строка поиска, и те, кто её не воспринимают в принципе.
                              0
                              Идеально, если веб-дизайнер и верстальщик — одно лицо (ещё лучше, когда он же — ещё и программист, но это, скорее, редкость, чем правило)

                              Как по мне то это плохая идея. Обычно это приводит к тому, что верстальщик начинает править дизайн, если что-то не выходит с версткой. В целом считаю, что нужно разделять максимум сферу обязанностей.
                              p.s Я вообще не представляю верстальщика который без IPS матрицы работает… Тоже самое, что детским совочком капать траншеи…

                              Only users with full accounts can post comments. Log in, please.