Модуль рабочей программы по технологии в соответствии с ФГОС "Дизайн". Модуль в дизайне в


4.2. Модульная сетка в дизайне.

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

Первый вариант применения модулей в дизайне - такой ж как в инете, то есть фоновый рисунок. В самых различных формах, как самостоятельный, так и в различных комбинация. И те же иллюстрации Эшера.

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

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

Еще Фидий (создатель Акрополя) и Иктин (Парфенон) продемонстрировали знание закона золотого сечения. Суть этого закона в том, что меньший отрезок относится к большему, как больший ко всей длине. Я не помню, изучают ли этот закон в школе, но в художественных училищах, художественннных и архитектурных институтах это как "Отче наш..." Одним числом это значение выражается как 1,618..... алгебраически выглядит a:b=b:(a+b). Суть в том, что подобное соотношение благоприятно глазу в силу психических и физических особенностей строения глаза, рабочих частот мозга и много, много...(Рисунок 4.2.)

Вторым активным элементом построениея каких-то зрительно благоприятных соотношений является квадрат. Путем построений из него легко получать соотношения 1:2, 2:3, 3:4.

Рисунок 4.2.

Рисунок 4.3.

Для веба модульное построение страницы может быть организовано с помощью таблиц. В качестве модуля можно принимать соотношение сторон экрана (при 800х600 это составляет 4:3) (Рисунок 4.3.). Стандартный размер листа бумаги A4 так же является модулем в черчении и типографике

Подавляющее число типографских сеток строится на базе формата листа бумаги, взятого за основу издания. Рисунок сетки зависит от содержания и замысла проекта, а так же индивидуального стиля того или иного художника. А если проектирование выполняется с помощью компьютера, то процесс становится достаточно быстрым, особенно в стадии реализации. Большинство графических (в основном - паблишерных) программ имеет встроенные опции построения модульной сетки, и почти все они же имеют достаточно большой набор заготовок модульных сеток под вполне обычными фамилиями "Буклет", "Календарь" и пр.

На рисунке 4.4. представлена модульная сетка первой полосы. Она немного отличается от общей модульной сетки верхним блоком. Для более четкого восприятия логотипа его пришлось выделить весьма значительными паузами. Но зато с его прочтением и выделением нет никаких проблем.

Рисунок 4.4.

Рисунок 4.5. Модульная сетка остальных полос

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

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

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

Рисунок 4.6.

В веб-дизайне модульная сетка применяется гораздо чаще, чем может показаться на первый взгляд. Если вы используете <table> для формирования элементов на странице - вы уже используете модульную сетку, особенно если вы повторяете эту сетку не на одной странице, а на нескольких. Иногда сетка может быть скрытой, иногда явной (когда вы в качестве фона ячейки используете другой цвет, отличный от основного фона) (Рисунок 4.6.)

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

Размеры экрана

С

Ширина канвы

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

Разрешение экрана

640х480

800х600

1024х768

1280х1024

Размеры канвы

600х290

760х410

984х578

?

Размер экрана можно определить с помощью простых программ (см. лабораторный практикум).

Рассмотрим пример модульной сетки и задания размеров, организованных с помощью таблицы

В HTML можно все содержание таблицы обозначить тегом <TBODY>. Тогда заголовок таблицы обозначается тегом <THEAD> а заключение тегом <TFOOT>.Все три тега закрывающееся и имеют атрибуты. Для ячеек заголовка таблицы используется тег <TH>.

<html>

<head>

<title>заготовка страницы</title>

</head>

<body text=blue>

<table align=center border=1 bordercolor=blue width=760 height=600>

<thead bgcolor=aqua>

<tr> <th colspan=3 height=100>заголовок</tr>

</thead>

<tbody>

<tr>

<td rowspan=3 width=150> меню</td>

<td colspan=2 height=100>модуль1</td>

</tr>

<tr>

<td width=150>модуль2</td>

<td width=400>модуль3</td>

</tr>

<tr>

<td colspan=2 height=100>модуль4</td>

</tr>

</tbody>

<tfoot bgcolor=aqua>

<tr> <th colspan=3 height=100>заключение</tr>

</table>

</body>

</html>

Тем не менее, самый простой способ не зависеть от размеров канвы – применять относительные размеры, то есть задавать размеры в %.

studfiles.net

Книга Йозефа Мюллера-Брокманна «Модульные системы в графическом дизайне. Пособие для графиков, типографов и оформителей выставок»

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

Книга в суперобложке и без нее

Издание адресовано широкому кругу дизайнеров и оформителей.

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

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

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

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

Из главы «Для чего нужен модуль»

www.artlebedev.ru

module - Дизайн модуля и компонентов

Компоненты и модули слишком часто смешиваются друг с другом. Oни однако, не одно и то же, а последствия одного - не обязательно для другого.

Модульность - это разбиение кода на модули связанных функциональность. Во многих языках программирования модуль - это просто исходный файл. Общепринято, что если исходный файл тоже растет большой, вы можете разбить его на два или более исходных файла и поместить их в новый каталог; в то время как каталог часто не называется модулем, этот вид разложения по-прежнему является модульным.

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

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

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

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

Если я знаю имя функции, мой редактор найдет ее достаточно скоро. С другой стороны, если по какой-то причине я не знаю названия функция (или класс в этом отношении), модульность становится больше важный.

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

qaru.site

Модуль рабочей программы по технологии в соответствии с ФГОС "Дизайн" - Документы - Технология

    1. Модуль «Основы дизайна»

5 класс (9часов)

Теоретические сведения.

  1. Определение понятия «дизайн», его классификация. Определение понятия «технологии дизайна». Роль дизайна в современном мире. История возникновения профессии дизайнер.

  2. Изучение особенностей стилевых направлений в дизайне. Простая стилизация геометрических фигур. Стилизация животных.

  3. Основы колористики. Использование основных законов колористики.

  4. Понятие композиции. Виды композиции. Геометрическая композиция. Определение понятий «эскиз» и «фор-эскиз». Художественные средства выразительности: точка, линия, пятно. Геометрический центр композиции.

  5. Формы развития цветоделительных технологий. Способы печати полиграфического исполнения графического оригинала. Дизайн в рекламе.

  6. Определение понятия «макетирование». Простые приемы макетирования. Определение понятий «композиция», «криволинейная фронтальная композиция» и др.

  7. Составление объемных композиций из бумаги и картона.

  8. Объёмно-пространственная композиция с элементамимакетирования. Основные понятия геометрических фигур в дизайне. Плоские и объемные фигуры в окружающем мире.

Лабораторно-практические и практические работы.

  1. Создание творческого рисунка на тему «Простая стилизация геометрических фигур. Стилизация животных».

  2. Выполнение цветового круга, цветовой растяжки.

  3. Работа цветными карандашами над геометрической композицией.

  4. Разработка фор-эскизов геометрической композиции.

  5. Разработка полиграфического материала для рекламы продукта.

  6. Выполнение криволинейной фронтальной композиции из бумаги.

  7. Выполнение панно в технике «Папертоль».

  8. Макетирование объемных геометрическихтел.

Варианты творческого проекта: Создание декоративного панно для интерьера.

Результаты освоения модуля.

По завершении учебного года обучающийся:

    • характеризует рекламу как средство формирования потребностей;

    • осуществляет сохранение информации в формах рисунка, схемы, эскиза, фотографии;

    • конструирует модель по заданному эскизу;

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

    • получил и проанализировал опыт изготовления информационного продукта по заданному алгоритму.

    6 класс (9 часов)

    Теоретические сведения.

    1. Понятие сюжетного центра композиции, акцента, доминанты, контраста, нюанса. Определение геометрического и сюжетного центра композиции. Использование основных законов композиции в дизайне.

    2. Роль цвета в создании художественного образа графического произведения. (контрастное нюансное сочетание объектов).

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

    4. Составление композиции из геометрических тел (куб, пирамида, шестигранная призма).

    5. Дизайн полиграфии, работа с текстом как объектом композиции.

    6. Определение понятий «индустриальное развитие», «промышленный дизайн» и др. Применение фронтальной композиции в производстве фактур из различных материалов.

    7. Дизайн рекламы в современном мире.

    8. Вторичное использование материалов. Изучение направления «треш-арт» в дизайне.

    9. Выбор материалов и техники их обработки для дизайн-проекта.

    Лабораторно-практические и практические работы.

    1. Составьте композицию из геометрических фигур в программе Paint на контрастном сочетании.

    2. Составление колористических карт по временам года в программе Paint

    3. Выполнить эскиз новой упаковки продукта.

    4. Макетирование сложных объектов из простых геометрических тел.

    5. Составление шрифтовой композиции из газетных вырезок. (Рекламное объявление, макет баннера).

    6. Изготовление декоративного аксессуара для интерьерав выбранной стилистике (карандашница, часы настенные, подставку для телефона и др.).

    7. Разработка эскиза этикетки.

    8. Создание объекта для ландшафтного дизайна из пластиковых бутылок.

    Варианты творческих проектов: Создание макета в стиле «треш-арт» для комнатных растений.

    Результаты освоения модуля.

    По завершении учебного года обучающийся:

      • называет и характеризует актуальные и перспективные информационные технологии, характеризует профессии в сфере информационных технологий;

      • следует технологии, в том числе, в процессе изготовления субъективно нового продукта;

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

      Модуль «Основы дизайна»

      5 класс (9 часов)

      Дизайн в жизни человека и общества (9 часов)

      Определение понятия «дизайн», его классификация. Определение понятия «технологии дизайна». Роль дизайна в современном мире. История возникновения профессии дизайнер.

      Изучение особенностей стилевых направлений в дизайне. Простая стилизация геометрических фигур. Стилизация животных.

      Основы колористики. Использование основных законов колористики.

      Понятие композиции. Виды композиции. Геометрическая композиция. Определение понятий «эскиз» и «фор-эскиз». Художественные средства выразительности: точка, линия, пятно. Геометрический центр композиции.

      Формы развития цветоделительных технологий. Способы печати полиграфического исполнения графического оригинала. Дизайн в рекламе.

      Определение понятия «макетирование». Простые приемы макетирования. Определение понятий «композиция», «криволинейная фронтальная композиция» и др.

      Составление объемных композиций из бумаги и картона.

      Объёмно-пространственная композиция с элементами макетирования. Основные понятия геометрических фигур в дизайне. Плоские и объемные фигуры в окружающем мире.

      Изучать понятия и определения.

      Изучить историю возникновения профессии.

      Изучить роль дизайна в современном мире.

      Изучить особенности стилевых направлений в дизайне.

      Посетить экскурсия в картинную галерею.

      Создать творческий рисунок.

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

      Изучать влияние цветов на человека.

      Изучить основные законы смешения цветов.

      Выполнять цветовую растяжку и нарисовать цветовой круг.

      Изучить виды композиции.

      Изучить понятия о композиции.

      Изучить понятия художественные средства выразительности.

      Изучить использование основных законов композиции.

      Выполнить рисунок геометрической композиции

      Выполнить фор-эскиз композиции из геометрических фигур в разных оттенках.

      Изучить понятия графического и полиграфического дизайна.

      Изучить способы печати в дизайне.

      Выполнить эскиз будущего полиграфического материала. Изучить технику бумагопластики «папертоль».

      Изучить основные приемы макетирования

      Изучить понятия и определения «макетирование», «композиция», «криволинейная фронтальная композиция».

      Выполнить эскиз криволинейной фронтальной композиции из бумаги.

      Изучить определения объёмно-пространственная композиция.

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

      Выполнить макет геометрической фигуры по заданному размеру.

      Проектная деятельность (1 час)

      Понятие о творческой проектной деятельности, индивидуальных и коллективных творческих проектах. Цель и задачи проектной деятельности в 5 классе. Составные части годового творческого проекта пятиклассников.

      Этапы выполнения проекта: поисковый (подготовительный), технологический (основной), аналитический (заключительный). Определение затрат на изготовление проектного

      изделия. Испытания проектных изделий.

      Подготовка презентации, пояснительной записки и доклада для защиты творческого проекта

      Творческий проект «Декоративное панно».

      Итоговая практическая работа

      «Изготовление декоративного панно для интерьера».

      Защита проекта в форме презентации.

      Знакомиться с примерами творческих проектов пятиклассников.

      Определять цель и задачи проектной деятельности.

      Изучать этапы выполнения проекта.

      Оформлять портфолио и пояснительную записку к творческому проекту. Подготавливать электронную презентацию проекта.

      Составлять доклад к защите творческого проекта.

      Защищать творческий проект

      6 класс (9 часов)

      Автоматизированное и неавтоматизированное управление технологически-

      ми системами в дизайне (7 часов)

      Автоматизированное и неавтоматизированное управление технологическими системами в дизайне. Информационные технологиивдизайне. Определение понятий «коллаж», виды коллажей. Информационно - коммуникационных технологий (ИКТ). Применение ИКТ в дизайне.

      Виды дизайна.

      Индустриальный (промышленный) дизайн

      Роль индустриального развития в дизайнерской практике. Определение понятий «индустриальное развитие», «промышленный дизайн» и др. Применение фронтальной композиции в производстве фактур из различных материалов.

      Макетирование. Макетирование рельефных и объёмных элементов

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

      Дизайн полиграфии, работа с текстом как объектом композиции.

      Определение понятий «индустриальное развитие», «промышленный дизайн» и др. Применение фронтальной композиции в производстве фактур из различных материалов.

      Дизайн рекламы в современном мире.

      Вторичное использование материалов. Изучение направления «треш-арт» в дизайне.

      Выбор материалов и техники их обработки для дизайн-проекта.

      Изучить понятия и определения «коллаж»

      Изучить понятия информационные технологии в дизайне.

      Экскурсия в типографию или рекламное агентство.

      Выполнить коллаж из различных материалов на заданною тему.

      Изучить понятия понятий «индустриальное развитие», «промышленный дизайн».

      Изучить определение фронтальная композиция

      Изучить декорирование аксессуаров для интерьера в выбранной стилистике

      Изучить разработку эскиза этикетки.

      Изучить создание объекта для ландшафтного дизайна из пластиковых бутылок.

      Проектная деятельность (1 час)

      Создание макета в стиле «треш-арт» для комнатных растений.

      Выполнять проект по модулю. Оформлять портфолио и пояснительную записку к творческому проекту. Подготавливать электронную презентацию проекта.

      Составлять доклад к защите творческого проекта.

      Защищать творческий проект

      pedsovet.su

      Модульная сетка в дизайне. — МегаЛекции

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

      Первый вариант применения модулей в дизайне - такой ж как в инете, то есть фоновый рисунок. В самых различных формах, как самостоятельный, так и в различных комбинация. И те же иллюстрации Эшера.

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

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

      Еще Фидий (создатель Акрополя) и Иктин (Парфенон) продемонстрировали знание закона золотого сечения. Суть этого закона в том, что меньший отрезок относится к большему, как больший ко всей длине. Я не помню, изучают ли этот закон в школе, но в художественных училищах, художественннных и архитектурных институтах это как "Отче наш..." Одним числом это значение выражается как 1,618..... алгебраически выглядит a:b=b:(a+b). Суть в том, что подобное соотношение благоприятно глазу в силу психических и физических особенностей строения глаза, рабочих частот мозга и много, много...(Рисунок 4.2.)

      Вторым активным элементом построениея каких-то зрительно благоприятных соотношений является квадрат. Путем построений из него легко получать соотношения 1:2, 2:3, 3:4.

      Рисунок 4.2.

      Рисунок 4.3.

      Для веба модульное построение страницы может быть организовано с помощью таблиц. В качестве модуля можно принимать соотношение сторон экрана (при 800х600 это составляет 4:3) (Рисунок 4.3.). Стандартный размер листа бумаги A4 так же является модулем в черчении и типографике

       

      Подавляющее число типографских сеток строится на базе формата листа бумаги, взятого за основу издания. Рисунок сетки зависит от содержания и замысла проекта, а так же индивидуального стиля того или иного художника. А если проектирование выполняется с помощью компьютера, то процесс становится достаточно быстрым, особенно в стадии реализации. Большинство графических (в основном - паблишерных) программ имеет встроенные опции построения модульной сетки, и почти все они же имеют достаточно большой набор заготовок модульных сеток под вполне обычными фамилиями "Буклет", "Календарь" и пр.

      На рисунке 4.4. представленамодульная сетка первой полосы. Она немного отличается от общей модульной сетки верхним блоком. Для более четкого восприятия логотипа его пришлось выделить весьма значительными паузами. Но зато с его прочтением и выделением нет никаких проблем.

      Рисунок 4.4.

       

      Рисунок 4.5. Модульная сетка остальных полос

       

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

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

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

       

      Рисунок 4.6.

      В веб-дизайне модульная сетка применяется гораздо чаще, чем может показаться на первый взгляд. Если вы используете <table> для формирования элементов на странице - вы уже используете модульную сетку, особенно если вы повторяете эту сетку не на одной странице, а на нескольких. Иногда сетка может быть скрытой, иногда явной (когда вы в качестве фона ячейки используете другой цвет, отличный от основного фона) (Рисунок 4.6.)

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

      Размеры экрана

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

       

       

      Разрешение экрана 640х480 800х600 1024х768 1280х1024
      Размеры канвы 600х290 760х410 984х578 ?

       

      Размер экрана можно определить с помощью простых программ (см. лабораторный практикум).

       

      Рассмотрим пример модульной сетки и задания размеров, организованных с помощью таблицы

      В HTML можно все содержание таблицы обозначить тегом <TBODY>. Тогда заголовок таблицы обозначается тегом <THEAD> а заключение тегом <TFOOT>.Все три тега закрывающееся и имеют атрибуты. Для ячеек заголовка таблицы используется тег <TH>.

      <html>

      <head>

      <title>заготовка страницы</title>

      </head>

       

      <body text=blue>

      <table align=center border=1 bordercolor=blue width=760 height=600>

      <thead bgcolor=aqua>

      <tr> <th colspan=3 height=100>заголовок</tr>

      </thead>

      <tbody>

      <tr>

      <td rowspan=3 width=150> меню</td>

      <td colspan=2 height=100>модуль1</td>

      </tr>

      <tr>

      <td width=150>модуль2</td>

      <td width=400>модуль3</td>

      </tr>

      <tr>

      <td colspan=2 height=100>модуль4</td>

      </tr>

      </tbody>

      <tfoot bgcolor=aqua>

      <tr> <th colspan=3 height=100>заключение</tr>

      </table>

      </body>

      </html>

       

      Тем не менее, самый простой способ не зависеть от размеров канвы – применять относительные размеры, то есть задавать размеры в %.

       

      Рекомендуемые страницы:

      Воспользуйтесь поиском по сайту:

      megalektsii.ru

      digital агентство red marketing

      В данной статье расскажется о том зачем нужны модульные сетки, как их создавать и как ими пользоваться, а также полезные советы по практической части из разряда "что делать если..." Будет очень полезна, как дизайнерам, которые начинают осваивать эту тему, так и тем, кто давно пользуется модульными сетками.

      Часть первая. «38 попугаев»

      1.1. Понятие модульности. Модуль

      Наше советское и постсоветское детство подарило нам замечательный мультфильм «38 попугаев». Как вы помните, у зверей стояла задача: измерить длину удава. Чем измерять — было не понятно. Инструментом измерения выбрали маленького по отношению к удаву попугая. Оказалось, что в удава «влезло» аж 38 попугаев. В этом примере попугай — это модуль.

      Таким образом, удава можно дискретизировать с частотой, равной единице, деленной на попугая )

      Разумеется, есть более серьезные примеры модульности в жизни. Со времен древней Греции к нам пришло выражение «Человек есть мера всего». Умные греки, когда строили свои чудеса света меряли двери плечами, а высоту помещения ростом человека.

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

      Сам человек есть модульная система. Если за модуль взять голову, то рост человека обыкновенного можно выстроить 7 головами. Причем на расстояниях, кратных такому модулю, мы можем определять ключевые точки построения человека.

      Метрическая система, которую мы используем, тоже является модульной. Один метр состоит из ста модулей «сантиметр», который тоже в свою очередь можно расчленить на более мелкие модули.

      Таким образом, модуль — это единица измерения, установленная для придания соразмерности, а сетка — система пропорций.

       

      1.2. Задачи сетки

      Ускорение работы: мы не тратим лишнего времени на поиск геометрического места элемента в макете. К тому же имеем обоснования в размещении элементов.

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

      Ускорение и шаблонирование, единообразность элементов: разработав сетку, мы делаем основу для решений на будущее. Грамотные гайды содержат детальное описание модульных сеток. Касательно веб-дизайна, мы можем с легкостью предусмотреть тривиальные макеты для всего сайта и сделать заготовку для единичных случаев.

      Рис 1.1. Примеры композиций и их сетки

      Рис 1.2. Пример сайта с сеткой и без нее 

      1.3. Виды сеток

      Самый простой вид сетки — блочная сетка. В западной литературе ее также называют «manuscript grid». Представляет собой грубо размеченную область — блок.

       

      Рис 1.4. Блочная сетка

       

      То, что называют модульной сеткой, например, 960.gs или blueprintcss.org и т. д. — совсем не модульная сетка. Вернее, она-то — сетка. Но она — колоночная. Потому что состоит только из вертикального членения на колонки. 

      Рис 1.5. Колоночная сетка

       

      Модульная сетка характеризуется наличием как вертикального членения, так и горизонтального. То, что образуется на пересечениях, есть модуль.

      Рис 1.6. Модульная сетка

       

      Есть еще один вид сетки. Называется иерархической сеткой. В иерархической сетки размещение блоков интуитивное и не поддается закономерностям.

      Рис 1.7. Иерархическая сетка

       

      1.4. Математика

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

      Имеет смысл поговорить о пропорциях. Например, о «золотом сечении». Тема «золотого сечения» не нуждается в еще одном пересказе. В Википедии можно найти больше подробной информации об этом соотношении, чем я здесь смогу пересказать.

      Внимания заслуживают другие пропорции, не такие популярные.

       

      1.5. Ряд Фибоначчи

      Итальянский математик Фибоначчи открыл ряд чисел, замечательный тем, что каждое последующее число оказывалось равным сумме двух предыдущих: 1, 2, 3, 5, 8, 1З, 21 и т. д. Он обладает тем свойством что, отношения между соседними членами по мере возрастания чисел ряда, все более приближаются к 0,618, то есть, к отношению «золотого сечения».

      Среди систем пропорционирования, используемых в архитектуре, дизайне, в прикладной графике следует упомянуть системы «предпочтительных чисел» и различные модульные системы.

       

      1.6. «Предпочтительные числа»

      «Предпочтительные числа» — ряд чисел геометрической прогрессии, где каждое последующее число образуется умножением предыдущего числа на какую-нибудь постоянную величину.

      Рис 1.8. Примеры сеток с нелинейными пропорциями между размерами модулей

       

      Разумеется, это не все популярные пропорции.

       

      Модульные сетки. Часть вторая. Алгоритм

      Разобравшись с определениями и понятиями можно приступить к практике — к построению модульной сетки. Мы препарируем сайт

       

      2.1. Начинаем с определения рабочей области

      В случае веба чаще всего ширина холста колеблется от 1024 до 1280 пикселей. Разумеется, ваша задача и идея может стереть эти рамки. А вот высота макета — величина непредсказуема в большинстве случаев. В отличие от полиграфии, веб-страница чаще всего не фиксирована по высоте, и ее собственный контент может ее же и увеличить. Мне кажется, что это совсем не страшно. Сферическая сетка в вакууме никому не нужна, а при больших сплошных объемах контента никто вертикального членения и не увидит, даже если оно соблюдено.

      Я ориентирую в своих макетах минимальную ширину на ~980 пикселей, оставляя место для скроллбара.

      Рис 2.1. Определяем рабочую область

       

      2.2. Делаем шрифтовую сетку

      Я уже раньше писал публикацию о вертикальном ритме. Она дополнит все то, о чем будет сказано в этом пункте. Напомню, что мы выбираем высоту строки единую для всего макета. Все элементы рубрикации с кеглем, отличным от кегля основного текста, должны иметь интерлиньяж кратный выбранной высоте строки; в сумме со всеми вертикальными полями высота каждого такого элемента должна содержать целое количество строк шрифтовой сетки.

      Здесь мы уже касаемся понятия модуля. Точнее микромодуля. Этим микромодулем мы будем обосновывать большинство небольших расстояний (и больших тоже).

      Таким образом, мы получаем прообраз будущей сетки — «зебру». На этой сетке будет лежать весь текст: абзацы, списки, заголовки, иллюстрации, плашки и проч.

      В своей практике я чаще всего использую такие параметры для шрифтовой сетки: кегль — 12 пикселей, высота строки — 18 пикселей.

      Рис 2.2. Шрифтовая сетка-«зебра»

       

      2.3. Дальше нам необходимо определиться с шириной модуля — той самой единицы измерения

      Исходя из чего мы можем вычислить размер модуля. Первое — это присутствие какого-то блока постоянной величины, от которого нам приходится отталкиваться. В вебе постоянными величинами чаще всего бывают баннеры, иллюстрации, видео-контент и проч. Такие константы могут содержать в своей ширине уже несколько модулей.

      Примером второго способа выбора ширины модуля — задача например, в размещении в ряд 9 элементов. Тогда, зная ширину всего холста и количество модулей (в этом примере 9) мы с легкостью определим размер модуля.

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

      С сеткой работать удобнее, если сразу определить расстояния между модулями — средники или канавки. На помощь с определением ширины средника приходит понятие микромодуля из предыдущего пункта. Ширина средника равна как минимум базовой высоте строки.

      Таким образом, расстояния между модулями делаем равным 18 писелям.

      Рассчитать ширину модуля теперь не составит труда. Есть все данные для этого.

      Сетка на 6 колонок очень неудобная и некомпактная. Увеличим количество модулей вдвое. Теперь зная то, что у меня 12 колонок, я рассчитал, что ширина колонки будет равна 65 пикселям.

       

      2.4. Строим вертикальное членение по полученному значению

      2.5. Делаем горизонтальное членение

      Высоту одного такого пояса берем кратной базовой высоте строки.

      Я объединю по 3 строки в один пояс. Просвет между поясами делаем в одну строку, тем самым сохраняем вертикальный ритм.

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

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

      2.7. Регионы

      Объединяем модули в регионы, создаем композицию, рисуем

       

       

      Модульные сетки. Часть третья. Оптика

      3.1. Микромодуль

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

      Существует много ситуаций, когда микромодуль может подсказать, как решить «микропроблему».

      1. Принимаем равным микромодулю расстояние между поясами и колонками. Тем самым закладываем фундамент ровного вертикального ритма.

      2. Используем микромодуль для отделения абзацов друг от друга — отбивка пустой строкой, или «швейцарский абзац» Йозефа Мюллера-Брокмана.

      3. Если мы не собираемся отбивать абзацы строкой, красную строку мы можем выделять отступами либо втяжкой, которые тоже равны микромодулю — высоте строки. (Брингхерст, «Основы стиля в типографике», русское издание, Аронов, 2006, стр. 45).

      4. Как и абзацы, списки могут быть набраны с отступом или наоборот — заступом, когда маркеры списка «свисают» за левую вертикальную границу колонки сетки.

      Использование второго способа выделения списков оправдано лишь тогда, когда это позволяет сделать пространство слева.

      5. Значения внутренних полей плашек делайте соразмерным с микромодулем.

      Об этом еще поговорим.

      Соблюдение значения микромодуля для малых величин позволяет нам держаться «зебры», а значит, не сбиваться с ритма, заданного нами во втором пункте алгоритма.

       

      3.2. Оптические компенсации

      Какими бы ни были продуманными правила построения сеток, она не может гарантировать отличный результат работы. Ведь цель дизайна совсем не сферическая сетка в Wacom’e )). Геометрия в голом виде никому не нужна. Это не цель. Сетка есть рабочий инструмент, один из рабочих инструментов. Это очень важно помнить. Картинка на выходе — цель. И главное то, как на картинку будет реагировать глаз.

      Например, обратите внимание на то, что округлые буквы по своей высоте больше букв, ровно лежащих на базовой линии.

      Так, круг и квадрат [...] одинаковы по ширине, но квадрат кажется немного шире из-за того, что он прилегает обеими вертикальными сторонами к прямым, ограничивающим его в горизонтальном направлении, тогда как круг касается каждой из этих прямых только в одной точке. Можно сказать, что квадрат или прямоугольник обладают максимальной компактностью в горизонтальном и вертикальном направлениях (самых важных в любой композиции), превосходя в этом отношении изотропный, «абстрактно компактный» круг. Из-за этого, например, во всех шрифтах буквы округлой формы (как «о» или «с») выступают вниз за базовую линию шрифта — только эта небольшая (2–3%) искусственная неправильность, называемая наплывом, позволяет создать впечатление равной высоты букв в строке.

      Дмитрий Кирсанов «Веб-дизайн» (СПб: Символ-Плюс, 2004)

      Слепое следование сетке не позволяет нам решить задачу. Поставленная задача первичнее инструмента, с помощью которого она решается.

      В Советском Союзе был такой «баян». Ветераны издательского дела упрекали молодежь, которая так охотно ею пользовалась модульными сетками в работе: «Сетка есть — ума не надо!».

      Ломайте сетку к чертовой матери, если так будет выглядеть лучше, если это решает вашу задачу!

      Выводы:

      1. Геометрия не так важна. Оптика решает.2. Сетка — это всего лишь инструмент. Причем ненавязчивый.

       

      3.3. Плашки

      Плашки — самый популярный и простой прием у дизайнеров, когда речь идет об акцентах. Плашки представляют собой боксовую модель. Те, кто верстает HTML знает, о существовании блочных элементов. Боксовая модель характерна наличием у элементов полей — внешних (margins) и внутренних (paddings). Если размеры этих полей понятны (микромодуль), то остается обратить на то, что эти поля сдвигают содержимое блоков. А значат ломают вертикали и сетку. Выход — сдвигать блоки на величину поля.

      Или не сдвигать?

      Все зависит от интенсивности цвета плашки (фона блока). Рассмотрим два примера.

       

      Рис 2.9. Примеры с плашками

       

       

      Рис 2.10. Примеры с плашками вместе с сеткой

      На что нужно обратить внимание.

      - Яркие по отношению к фону плашки никуда не выносятся.- Яркие плашки должны «вписаться» в сетку — их высота должна быть равна кратному количеству строк. Это достигается манипулированием вертикальными внутренними полями (padding-top и padding-bottom). Текст внутри такого блока не попадает в шрифтовую сетку — заботимся об оптике.- Выносятся плашки, которые обладают маленьким оптическим весом. Они не контрастны, поэтому не оказывают влияния на ритм.- В случае «легковесных плашек» текста не выбивается из потока. Плашка ненавязчиво обтекает содержимое блока.

       

      3.4. Висячая пунктуация

      Суть висячей пунктуации изложена в «Ководстве» Артемия Лебедева. Однако я не могу не упомянуть ее в разговоре об оптической компенсации. Дело в том, что такие графемы, как кавычки, скобки и прочие знаки препинания имеют меньший визуальный вес, нежели основной текст. Поэтому их принято «свешивать» за линию выключки. Техническая сторона висячей пунктуации будет рассмотрена в шестой части.

      Ввиду того, что висячая пунктуация не поддерживается браузерами по умолчанию, то технологи вынуждены искать способы-«велосипеды» поддержки висячей пунктуации в вебе. Из-за сложности исполнения висячая пунктуация пока остается опциональной. Но крайне желательно заботиться о ее соблюдении хотя бы в заголовках.

      3.5. Шрифты с засечками и крупные кегли

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

      Рис 2.11. Пример заголовка, набраного антиквой

      Во избежание этого заголовок нужно выносить на ширину засечки влево.

       

      3.6. Иллюстрации

      Главная особенность при работе с графическим контентом — понимание того, что иллюстрация есть не тупо прямоугольник, а набор пятен с разной интенсивностью. Пример:

       

      Рис 2.12. Горизонтальное выравнивание графики

       

      В примере серым цветом показана граница самого файла с картинкой. Фактически иллюстрация начинается не сразу самого графического файла. Первые 43 пикселя — дырка, от которой нужно избавляться. Разумеется, что на больших динамично развивающихся сайтах отсутствует возможность детальной подгонки каждого изображения, а тем более всех миниатюр (да и на маленьких сайтах какой-нибудь компании «Престиж Хауз» вряд ли будут за этим стрелять, но давайте говорить об идиллиях)). Выравнивание картинки не по виртуальным параметрам картинки, а по ее содержанию предпочтительнее.

      Рис 2.13. Вертикальное выравнивание графики

      Обратите внимание на то, где должны находится вертикальные границы графических вставок (обозначены красными линиями). Верхняя граница лежит на одной линии вместе с высотой строчного знака (x-height). Но, если вы набираете сопроводительный текст слева или справа капителью или прописными — верхняя граница картинки сместится соответственно.

      Автор: Черенкевич Алексей

      Источник: http://design-for-business.ru/

      www.redmarketing.by

      Дизайнерам. Объекты внутри модуля | Mirai Art Studio

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

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

      В этом посте я расскажу, как организовать объекты внутри модуля, чтобы макет не развалился и легко считывался.

      Эскизы макетов с использованием модульной сетки в 32 клетки. Иллюстрация из книги «Модульные системы в графическом дизайне» Йозефа Мюллер-Брокманна

      Модуль и объекты внутри него

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

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

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

      Правилу подвластны прямоугольные объекты. Если говорить о круге, то он может занимать любую позицию внутри модуля. Окружность приятна для глаз и легко воспринимается, она контрастирует с прямоугольниками и раньше привлекает внимание зрителя.

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

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

      Посмотрите на рисунок ниже:

      Прямоугольные объекты в модуле. Слабый вариант

      Тут две ошибки:

      1) Сверху и снизу есть незадействованное пространство — комозиция неустойчива:

      Незадействованное пространство

      2) Объекты разбросаны хаотично, как следствие образовалось много блоков отрицательного пространства. Композиция разваливается:

      Отрицательное пространство

      Чтобы улучшить модуль, нужно избавиться от первого и минимизировать второе. Тут и помогает правило расположения объектов в модуле.

      Хороший модуль

      Объекты организованны между собой в прямоугольники и тяготеют к углам и сторонам модуля. Отрицательное пространство приняло более простую форму:

      Отрицательное пространство хорошего модуля

      Композиция стала организованной, устойчивой и легкой для восприятия.

      Добавим в модуль круг. Помним, он может занимать любую позицию. Круг в первую очередь привлекает внимание, поэтому с его помощью можно направлять взгляд зрителя:

      miraispace.ru