Дизайн сайта: графическая вёрстка (текста и картинок) и модульная сетка, как лучше?

Здравствуйте. Я начинающий дизайнер сайтов.
Столкнулся с разными подходами к завёрстыванию (именно графическому, имею ввиду не html) текста и изображений разными дизайнерами сайтов и хочу определить для себя, в каком стиле стоит работать.

Предположим, надо сделать дизайн сайта-визитки.

1 подход - всё просто и линейно, как здесь, например,
https://dribbble.com/shots/1826549-ISPRIVE-Luxury-...
https://dribbble.com/shots/1541853-Two-Mountains/a...

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

2 подход - нестандартная вёрстка контента, например,
prntscr.com/6zg2em
prntscr.com/6zg2p5
prntscr.com/6zg2tb
На мой взгляд, смотрится красиво и необычно, но вроде как не слишком удобно. Непонятно, насколько удобно превращать такой дизайн в код, насколько такой дизайн адаптивен и т.п.

Также посоветуйте, что почитать/посмотреть по графической вёрстке сайта, пожалуйста. Читал про сетки много русскоязычных книг, но там акцент сделан на печатную продукцию, а не дизайн сайтов.
  • Вопрос задан
  • 2785 просмотров
Решения вопроса 1
@tef
lavanden:
>Предположим, надо сделать дизайн сайта-визитки". В этом случае какой вариант вёрстки актуальнее?

На самом деле, всем вообще похуй. В каком нравится в таком и работайте. Это дело субъективное. А читать про веб-дизайн не вижу смысла. В веб дизайне нет такого, как, допустим, в архитектуре барокко и рококко или чего-то такого, что требовало бы разных подходов, техпроцессов и инструментов. Тут у вас техпроцесс один, фотошоп и гугл. Чем раньше вы это поймёте и начнёте просто упорно рисовать, тем быстрее начнёт получаться.

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

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы