Зарисовки структуры на бумаге. Надо ли?

Иногда меня спрашивают почему я выбираю ту или иную структур верстки, почему строю структуру именно так… А я в общем-то и не знаю что ответить. Когда только начинал верстать, до делал по большей части методом проб и ошибок, по много раз переписываю один и тот же участок, пока не находил какого-то верного решения. Потом, в какой-то момент, глядя на новый макет я научился прорисовывать будущую структуру в голове, просто смотрел на картинку и думал как должен быть построен HTML. Сейчас для простого макета хватает 1-2 минуты, чтобы я уже точно знал, как будет выглядеть структура, нужно просто сесть и написать ее. Недавно у Мозилы появился плагин, который показывет структуру страницы в 3D, вот примерно тоже самое я вижу когда смотрю на макет, только без 3D )))

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

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

Вот кстати неполный код того, что получилось:

Кому-то возможно покажется, что наименования классов избыточны, но таких блоков уже наверстано множество. К тому же пост не о стилистике написания кода )

Коллеги, а вы как-нибудь структурируете свое видение макета в коде прежде чем начать писать HTML? Поделитесь своими методами, может быть мой способ далеко не самый оптимальный…

P.S.: Кругом конкурсы, купоны, розыгрыши… Короче, конкурс. Кто первый отгадает, что за хрень нарисована на картинке (используется на популярном сайте), получит от меня MP3-player! Круто? Ну не очень на самом деле, т.к. стоит он 3,5 бакса, наушники говно, ПО отстой, и сделан конечно же в Китает. Кстати, звук в нормальные наушники выдают хороший и заряд держат часов 5. Просто у меня их штук 5 завалялось, взял по случаю в каком-то магазине на распродаже )

Размещено в Разное.

В этом блоке кнопочки для кликания на случай, если пост оказался полезным :)
  • Форма обратной связи, не?

    • Ну это конкретная форма на конкретном сайте. Нет, не обратной связи 🙂

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

    • Шанс, что ты там не был, мизерный 🙂

  • Alexey

    Зачем такой сложный конкурс? Плеер жалко?

    • Нет, плеер не жалко совсем )
      Разве я стал бы давать описание какого-нибудь сайта МосГорВодоканал? 🙂
      Подсказка: не знаю, в каком он топе, но я думаю где-то примерно ТОП5 в мировом рейтинге. И многие на нем зависают постоянно.
      Блин, ну вот уже всё почти рассказал… Мой друг через полчаса после публикации уже ответ в скайп прислал, но мы решили, что он вне конкурса, у него такой плеер есть )

  • Alex Korotaev

    Страница с формой отправки сообщения пользователям для социального сайта)

  • Borisoff Denis

    Видимо Alex победил. Жаль я поздно пришел, а ведь так хотелось плеер) Как давно я не слышал музыки…
    Это ведь действительно всплывающая форма отправки сообщений на Facebook.

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

      • Borisoff Denis

        Написал Вам по ICQ.

    • Денис, продублируй плиз адрес на email, в аське хистори потерлась (

  • dfffdg

    ну структура она есть сама по себе просто её нужно правильно понять

  • Twirpool

    Это инспектор в 3D режиме в браузере Мозила Фаирфокс.

  • Наташа

    Я столкнулась с такой проблемой, не знаю, может вопрос глупым покажется, но я никак не могу найти на него ответ. Я сейчас пытаюсь сверстать страничку по картинке. У меня на картинке логотип размером 980х150пикс. Я вставляю его именно с этими размерами в коде, т.е. в css: width: 980px; height: 150px. Если открываю .htm файл просто из папки (в адресной строке «file:///D:/…..»), то в браузере он выглядит по-одному, а если открываю через localhost (в адресной строке «http://127.0.0.1/…….»), то он у меня уже выглядит чуть по другому. Отличие заключается в следующем: во-втором случае логотип выглядит больше, чем в первом. Я для обоих вариантов сделала снимок с экрана и этот снимок открыла в граф.программе, измерив при этом область логотипа. Так вот для первого случая она получилась 980х150пикс, а для второго 1070х164пикс. Хотя в css указано width: 980px; height: 150px. Почему так? Так и должно быть? Я так поняла, что вы профессионально версткой занимаетесь, поэтому очень надеюсь на ответ 🙂

    • Попробуйте в браузере ctrl+0 на обеих страницах )

      • Наташа

        Спасибо большое!!! А я себе всю голову сломала, что за чудеса такие))))))

  • Кирилл

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