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, отправляю линк.
После правок начинаю верстать в чистую.
Заметьте, вообще без Фотошопа до последней стадии, когда нужна всякая мелочь, т.к. считаю использование ФШ для макетирования сайтов рудиментом.

Ну для этого существует 100500 фреймворков и практически для каждого шаблоны. Самый, наверное, распространённый - Bootstrap.
Пробовал разные, но, в конце концов, вернулся к тому, что создание с нуля мне ближе и контролируемость процесса несоизмеримо выше + отсутствие ненужного барахла

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