• О блоге

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

    К его созданию подтолкнуло желание создать место для общения и обмена опытом в изучении компьютерной графики и дизайна.

    Уроки Blender 3d   Текстуры   Уроки Photoshop   3d max   html/css

 
 
В процессе
 
 

Опанасенко Сергей (sergey@opanasenko.com.ua / sadesign)
Пять шагов к улучшению модульной сетки – шаг 2
17 июля 2009

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

Относительные системы

Золотое сечение – это отношение которое именуется как число Фи. Можно смело проектировать сетку по этому закону. Используя золотое сечение можно быть уверенным, что вы достигнете эффекта естественной гармонии.
Это важный момент который обсуждался много веков. Эстетика измерима, и, что очень важно, эти законы можно использовать как угодно. Обязательное их использование не всегда приводит к желаемому эффекту, но знание принципов обязательно :)

Композинг методов

Эта теория называется «Эффект удобной красоты». Согласно этой теории все вещи, которые выглядят красивыми приводят к более удобному их использованию. Хорошо продуманная сетка делает дизайн не только более удобным и читабельным но и полезным.

Использование на практике

Как и в первой статье я постараюсь рассказать о применении метода на практике. Этот пример в первую очередь используется для печатной продукции, но ничто нам не мешает использовать это в вебе.
В этой статье я буду использовать метод двойного разворота, это называется симметричной сеткой.

Формирование страницы

Для формирования сетки мы будем использовать соотношение страницы для определения частей под контент. Построение происходит довольно простым способом.
grid_pt2_1
Мы получаем область необходимую для построение сетки.

Применение золотого сечения

Мы используем не метод разделения, а с использованием числа Фи. Получаем колонки А и В.
grid_pt2_2

Создание системы

Итак, у нас есть колонны, теперь мы должны конкретизировать сетки чтобы иметь возможность справиться с различным содержанием и типов страниц. Аналогичным способом отделяем части под колонки.
grid_pt2_3
Аналогичным способом определяем горизонт.

grid_pt2_4
Использование расширенных линий позволяют добавить области для структуры.
grid_pt2_5

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

Релативная сетка

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

Часть 1 Часть 2 Часть 3 Часть 4 Часть 5

              ,





2 комментария на “Пять шагов к улучшению модульной сетки – шаг 2”

  1. Если по тексту находите что-то не понятное — пишите в коменты, на почту всегда готов поправить — свои баги тяжело сразу выявлять :)

Оставить комментарий


    Перевод книги


    Скоро на сайте RenderMarket перевод книги Алекса Галузина
    «Создание игрового уровня за 11 дней»

В другом формате

Введите email для автоматического получения новых статей на почту:

Друзья и партнеры

sadesign — создание и поддержка
RenderStuff, бесплатная библиотека 3d полезностей
Умный блог
Система Orphus