remnevstas

[remnevstas]

[remnevstas]

[remnevstas]

[remnevstas]

Logo (ff) ferm concept 

[remnevstas]

Модульная сетка

Модульная сетка — универсальный инструмент организации визуального пространства, который используют и графические, и веб-дизайнеры.

Модульная сетка нужна для организации элементов на странице, помогает создать единство в подаче визуальной части страниц.С помощью модульной сетки плоскость делится на клетки, или пространственные зоны, получается сетка из модулей.

Модуль − прямоугольник с заданной высотой и шириной, который лежит в основе композиции страницы.

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

Преимущества модульной сетки

макет становится системным и логичным

элемент подчиняются ритмичной и внутренне единой композиции

снижается вероятность ошибки при переносе элементов с одной страницы на другую

адаптивный дизайн на основе сетки делать проще

задачи решаются быстрее чем без сетки

типичные задачи имеют единый стиль

Для чего нужен модуль? 

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

Создание модульной сетки

Модульная сетка в веб−дизайне имеет свои особенности, она более универсальная чем в принте, модули не имеют жестко заданных размеров, один и тот же элемент может изменяться в зависимости от разрешения экрана.

1. Определить ширину рабочей области − пространство, в рамках которого будет располагаться контент

2. Определить параметры наборного текста. (Выбрать размер основного штриха, обычно задаю размер в 16pt)

3. Определить межстрочный интервал (16 * 1,5 = 24 px ) 

Теперь у нас есть минимальная шрифтовая единица с его кеглем и межстрочным интервалом. 

4. Построить высоту строки, она соответственно будет равна  интерлиньяжу 24рх.

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

6. Определить количество колонок. (чаще всего для большинства задач достаточно 4 или 6 столбцов эти же 6 столбцов можно поделить на 2 чтобы получить 12 колонок. 12 — удобное число, так как оно кратно 2,3,4,6 и сетку можно легко преобразовать)

Далее в полученную рабочую область (с учётом боковых отступов 1024 px) нужно уместить колонки.

7. Определить расстояние между колонками (межколонники) оно должно быть чуть меньше, чем высота строки (то есть меньше 24 px) и не может быть меньше размера кегля базового шрифта (в моём случае 16px) 

для этого производим вычисления (1024-20*11)/12 = 67 px

1024 размер рабочей области

11 межколонники

12 количество колонок

получаем:

20px ширина межколонника

67px размер колонки

8. Добавить сами модули (модули будут получаться из ширины колонки и высоты нескольких строк к примеру 2 строки, остается расположить эти модули на сетки)

9. Добавить микромодуль 

Микромодуль—прямоугольник, который образуется между модулями, его удобно использовать для унификации небольших расстояний и для определения размера: отступа между абзацами, внутреннего поля в плашке, в списках и т.д.

10. Модули можно и нужно объединять в группы.

11. Кроме того в вебе есть такое понятие как „резиновая“ сетка. Особенность такой сетки заключается в том, что расстояния для неё задаются не в пикселах, а в процентах. За 100% принимается одна колонка. Для того что бы было легче рассчитать „резиновую“ сетку, ширину нужно сделать 1000px.

Сетка не должна диктовать, а помогать в дизайне, упорядочивать большое количество элементов на странице, привести их к той или иной зависимости.

Йозеф Мюллер-Брокманн:  «Сетка — это система помощи, но она не является гарантией, а всего лишь имеет ряд возможных применений, и каждый дизайнер сам может искать решение, соответствующее его индивидуальному стилю»

[remnevstas]

Дитер Рамс: 10 принципов хорошего дизайна

Дитер Рамс (нем. Dieter Rams; 20 мая 1932, Висбаден, Гессен) — немецкий промышленный дизайнер, ведущий дизайнер фирмы Braun с 1962 по 1995, представитель школы функционализма в промышленном дизайне.

«Дизайн не имеет ничего общего с искусством. Дизайн может помочь сделать продукты, которые мы используем каждый день меньше, но лучше. У нас достаточно продуктов. Если вы посмотрите, на рынке у вас есть 10 или 20 видов кофеварок, которые в основном похожи, делая все то же самое: они делают кофе. Мы не нуждаемся в 20 из этих вещей, нам нужна одна хорошая». Дитер Рамс

1. Хороший дизайн инновационен. Стремительное развитие технологий даёт новые возможности для инновационного дизайна. Он всегда развивается в тандеме с технологиями и не может быть самоцелью.

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

3. Хороший дизайн — эстетичен. Эстетика — неотъемлемая часть продукта. Продукты которые мы используем каждый день, влияют на нас и наше благополучие. Но только хорошо выполненные объекты могут быть красивыми.

4. Хороший дизайн — понятен для потребителя. Дизайн разъясняет структуру продукта. В свою очередь продукт должен был простым и интуитивно понятным в использовании.

5. Хороший дизайн — не навязчив. Продукт — это инструмент. Он не является декоративным объектом или объектом искусства. Поэтому его дизайн должен быть нейтральным и сдержанным.

6. Хороший дизайн — честен. Ничто не сможет сделает продукт более инновационным, сильным и ценным, если он им не является. Не манипулируйте потребителями и не используйте обещания, которые не можете сдержать.

7. Хороший дизайн — актуален. Не гонитесь за трендами — модный дизайн быстро устаревает. Особенно в современном обществе, где модные тенденции меняются слишком часто. 

8. Хороший дизайн — продуман до каждой детали. Ничто не должно быть случайным или оставленным на волю случая. Забота, точность и аккуратность в проектировании дизайна показывает уважение к потребителю.

9. Хороший дизайн — экологичен. Дизайн привносит важный вклад в защиту окружающей среды. Он должен способствовать сохранению природных ресурсов и сводить к минимуму физическое и визуальное загрязнение на протяжении всего жизненного цикла продукта.

10. Хороший дизайн — это как можно меньше дизайна. Меньше, но лучше. Концентрируйтесь на главных аспектах и задачах продукта и не «отягощайте» его множеством дополнительных мелких функций.