htmleater

Вот расскажу о проблеме с точки зрения профессионального художника, который в своё время самостоятельно освоил компьютер до нелюбительского уровня, заинтересовался вебом, который начал осваивать, освоил свободную вёрстку, умеющий сделать сайт под ключ и т.п.
Преамбула:
а) в "художестве" практически нет законов, но есть огромное кол-во правил, которые практически не сформулированы;
б) профессиональный художник (дизайнер) знает эти правила и умеет ими пользоваться;
в) хороший профессиональный художник (дизайнер) умееет эти правила нарушить так, что это сделает его работу лучше;
г) дизайнер - это художник, имеющий склонность к систематизации и точным наукам;
д) учёба художника (дизайнера) заключается в многолетнем дрочилове до состояния автоматизма, что даёт возможность в дальнейшем не заморачиваться всякой лабудой, забитой в подкорку.
Пути:
1. Сразу на йух тех, кто говорит, что дизайнер не должен уметь рисовать - результаты можно наблюдать в веб-дизайне конца 90-х - 2000-х, когда жил миф, что инженеры, ринувшиеся в нишу, используя шаблоны, покроют задачу;
2. Плохая новость: научиться быть дизайнером нельзя без природных задатков. Можно долго учиться цветоведению, типографике, композиции и её основам и т.п., и даже вроде бы начать чего-то понимать. но не уметь решить простейшую задачу;
3. Хорошая новость: самоучка с природными задатками может научиться делать серьёзную работу, но в несколько раз дольше, чем чел с профильным образованием;
4. Дрочка, дрочка и дрочка. Часов так по 8-16 в сутки. (Попутный вопрос: почему в худ. ВУЗах учат по 6 лет, как в медах, а в училищах по 4-5 лет?);
5. Учиться, учиться и ещё раз учиться. Всю жизнь. Ходить по музеям, листать альбомы, внимательно смотреть по сторонам, общаться, замечать мелочи - переформатировать мозги и взгляды на мир.

Насчёт сеток - вопрос не простой.
Самое полное описание, чтобы понять сам принцип, можно найти только в литературе по полиграфии (чаще всего, книжной). В 70-х-80-х издавалась даже отдельная прекрасная книга-альбом, по-моему, называлась «Модульная сетка».
Поискать в архивах дизайнерских и полиграфических журналов: Print Magazine, [КАК] и т.п. Встречалась проблематика и в книгах Кричевского (или статьях, не вспомню точно).

Давайте не будем смешивать в одну кучу мягкое, белое и холодное.
1. Рококко или барокко или готика отличаются только размерами и бантиками.
В основе всего лежит только сетка, сиречь Золотое сечение. Это общий принцип как для книг/газет, так и для сайтов, архитектуры и всего остального. Т.е. даже хреново сделанное по сетке будет восприниматься лучше, чем безошибочное, но как бог на душу положил. Это закон!
Опытный художник/дизайнер интуитивно раскидает всё по странице с допустимой ошибкой в 1-2 пиксела, если бы он пользовался сеткой. Но очень опытный после раскидки всё же проверит по сетке.
2. Закон №2. Хороший дизайнер точно знает как надо по правилам и следует этому. Всё будет ровно, без просиров и взлётов.
Очень хороший дизайнер знает все правила и умеет их грамотно нарушить, не ломая законы и осн. правила.
3. Закон № 3. ВСЕ САЙТЫ - ЭТО БИЗНЕС! И только это роднит лендинги, визитки, магазины, промо, корпоративные, порталы и всё остальное.
Но подходы ко всем должны быть разными, хотя и подчиняться общим правилам (Золотое сечение, поведение и ожидание пользователя, стандартам и пр.).
4. В ваших примерах первые два - очень грамотно сделанные лендинги с учётом трендов (большими пространствами, флэтом, картиночными бекграундами ковер, по разному окрашенному вьюпорту и т.п.).
В трёх остальных 2 лендинга-каталога. Не знаю как они смотрятся во вьюпорте, но думаю, что ни разу не мешают и не делают неудобными просмотр деталей.
Ещё один - магазин. Вот здесь мог бы поспорить с автором, т.к. считаю, что на странице покупки товара уже нет места горизонтам и хорошему виду из окна, только стимулировать нажать кнопарь "Купить".
5. По вашему вопросу: в нижний слой кидаете сетку (в зависимости от того какие пропорции выбрали), быстро накидываете прямоугольники в соответствии с вашими задумками. Это структура страницы.
А потом начинаем заполнять эти блоки.
Я делаю вообще по-другому (скорее всего оттого, что давно не начинающий): я не сажусь делать что-либо, пока у меня в голове не сложиться общая картинка, чего же я хочу получить. Потом делаю быстрый эскиз-концепт структуры в векторно программе (пользую для этого Корел, т.к. он несравненно для черчения лучше заточен).
Показали.
Опять же в векторе (т.к. на порядок быстрее, нежели в ФШ) добавляю детализацию: фоны, картинки, текстовые рыбы, мелочи. Сохраняю как картинку и сверху абсолютами довёрстываю активные элементы - меню, кнопки, селекты, попапы, аккордеоны, слайдеры и пр., всё то, чем заказчик сможет поиграться. Сохраняю как html, отправляю линк.
После правок начинаю верстать в чистую.
Заметьте, вообще без Фотошопа до последней стадии, когда нужна всякая мелочь, т.к. считаю использование ФШ для макетирования сайтов рудиментом.

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