На данный момент - это итоговый вариант дизайна главной страницы Международного Информационно-Аналитического Центра (МИАЦ) расположенной по адресу info.anastasia.ru

Дизайн постепенно уточняется и дополняется.

Изменения от 07.05.06
- подправлены кнопки-дощечки
- сдвинут ствол кедра к краю страницы
- заменено солнце (восход)
- использована другая шапка сайта (вариант Varlenn)
- белое поле теперь непрозрачно

Изменения от 10.05.06
- исправлен размер страницы (под 1024*768)
- увеличена надпись "МИАЦ"
- исправлено положение белого поля

Изменения от 19.05.06
- первый образец тех. задания и создание итоговых макетов страниц

Тех. задание ещё сырое. Надо дописать про 2 варианта дизайна и про стандартный размер страницы + уточнения и дополнения.

Дописала про дизайн для первичного входа.
Уточнен дизайн по макету varlenn
Дописала про простой вариант дизайна.


Тех. Задание.
демоматериал
- макет полноцветного дизайна страницы с анимационными элементами
- схема макета полноцветного дизайна с пронумерованными секторами страницы
- макет дизайна страницы для первичного входа на ИНФО
- эмблема ЗКР (два варианта)
- эмблема МИАЦ не представлена (нужны предложения от веб-дизайнеров), описание в тексте.
- лента орнамента для разделения столбцов в варианте простого дизайна не представлена, описание в тексте


Размеры рисунка для полноцветного дизайна страницы.
1) Либо рисунок не масштабируется, делаем под стандартное разрешение мин. 1024х768.
2) либо рисунок должен быть масштабируемым, точнее, дизайн должен быть устойчивым к изменениям горизонтали окна от 800 до 1600 хотя бы.
Пожелание - сделать всё-таки рисунок масштабируемым.

Разрабатывается три макета с различными вариантами дизайна.

1). дизайн для первичного входа на страницу ИНФО. Этот вход служит исключительно для выбора пользователем двух дизайнов ИНФО и содержит эмблему ЗКР (ветка кедра на фоне солнца), эмблему МИАЦ (летящий, парящий орел) и два ссылочных поля на разные дизайны ИНФО. Данная страница позволяет пользователю, впервые зашедшему на ИНФО, выбрать в соответствии с возможностями его компьютера и интернет-трафика тот вариант дизайна, который будет загружаться в кэш быстрее. В дальнейшем этот пользователь будет попадать сразу в тот дизайн, который поставит себе по умолчанию, но с возможностью всегда его поменять на второй вариант.
Страница первичного входа оформляется в соответствии с предоставленным макетом. Основной фон - зеленый и голубой. В центре страницы помещено слово ВХОД (не активно). Справа и слева от него располагаются два ссылочных поля (кнопки, стилизованные под солнца), подписанные "Полная версия" и "Легкая версия" соответственно. Вверху страницы первичного входа дается надпись Международный Информационно-Аналитический Центр (шрифт повторяется из шапки дизайна ИНФО, см.ниже), под ним более мелким шрифтом надпись "Объединенные ресурсы под знаком ЗКР". и в ряд с этой надписью - эмблема МИАЦ - парящий орел. Слева от названия МИАЦ в шапке помещается эмблема ЗКР. Внизу страницы по центру под входами в два варианта дизайна ИНФО помещается краткий текст-приветствие с информацией о назначении МИАЦ.


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

4 основных поля: левый узкий столбец (с кнопками), большая правая область, «шапка» страницы и узкое нижнее горизонтальное поле.

Левый столбец (а также левая часть «шапки») представлен в виде ствола дерева (кедра), находящегося на переднем плане. На нём размещаются кнопки ( сектор 7), сделанные в виде дощечек, соединённых цветочной лианой. На дощечках будут находиться: текст ссылок и небольшие картинки-пиктограммы.



В «шапка» страницы изображён пейзаж (4,5,6) (стилизованный под векторное изображение): голубое небо (градиент), холмы покрытые лесом и луга.
На фоне неба расположено название страницы: «Международный Информационно-Аналитический Центр» и ниже, более мелкая надпись «Объединённые ресурсы под знаком «ЗКР».

В левой части «шапки» видна крона дерева с ветками, хвоёй и кедровой шишкой. (1,2)
Одна ветка отходит от ствола вправо и располагается на фоне солнца (3), образуя, таким образом, символ ЗКР (ветка кедра на фоне солнца).

Нижнее горизонтальное поле (17,18 ) состоит из изображения травы.

Большая правая область страницы состоит из двух частей:
1) узкая вертикальная область (10,11,12), на которой изображено продолжение пейзажа из «шапки» страницы. Таким образом, эта область визуально составляет одно целое с «шапкой».
2) Белое информационное поле (19), выделенные границы этого поля (16) а также небольшой элемент в виде загиба листа бумаги (8 )

Описание каждого сектора на странице:

1. Рисунок. Ствол кедра и часть кроны
2. Рисунок. Часть ствола, пейзаж, крупная ветка, хвоя и шишка. Возможно шишка будет отдельным изображением-ссылкой.
3. Анимированный объект (flash). Небольшое покачивание (на ветру) ветки и создающийся из-за этого эффект мерцание солнца (свет, проходящий через хвою).
При наведении курсора вокруг солнца появляется надпись «Звенящие Кедры России». При убирании курсора надпись исчезает. Этот элемент также является ссылкой, ведущей на сайт Anastasia.ru



4. 5. 6. Рисунки. В пятом секторе располагается заголовок страницы
7. Рисунок. Дощечка-кнопка
8. Рисунок. Загиб листа.
9. Рисунок. Изображение края ствола кедра. Это изображение повторяется на протяжении всего ствола (до сектора 2), чтобы уменьшить итоговый размер страницы. Однако, при этом должно сохраняться визуальное единство ствола.
10. 11. Рисунки. Являются продолжением пейзажа, изображённого в «шапке страницы».
12. Рисунок. Изображение травы. Является переходным от анимированного 18 сектора к 11-му. Создаёт визуальное единство секторов 11 и 18.
13. Рисунок. Изображение коры. Такой же принцип, что и в секторе 9.
14. Рисунок. Белый цветок, находящийся между дощечками. Это изображение повторяется на протяжении всего ствола кедра (как и секторы 9 и 13)
15. Рисунок. Кора дерева. Повторяется между всеми дощечками.
16. Граница белого поля (рисунок наверное?..)
17.18. Анимированные объекты (flash). Изображение травы, которая слегка покачивается (на ветру). Анимация интерактивная. При проведении по траве курсором, она (трава) пригибается и снова выпрямляется.
Сектор 18 может быть разделён на несколько одинаковых flash-элементов (для экономии трафика)

3). Дизайн страницы с минимальной графикой
Шапка страницы полностью берется из полноцветного дизайна. Убирается анимационный элемент с ветки. При этом сохраняется вход на Анастасию через солнышко.
Под шапкой основное поле страницы однотонное в цвет неба шапки.
Левый столбец отделен от правого узкой лентой орнамента. Орнамент состоит из переплетенных листьев (возможно виноградных, дубовых, кленовых и т.п.), выполнен в стиле рисунка черным пером, заливка орнамента может оставаться в тон общего фона страницы, может быть и в тон травяного поля шапки.
Содержание левого стобца подобно левому столбцу в полноцветном дизайне, и ссылочные поля прописываются в строчно-буквенном варианте. В начале каждого ссылочного поля может размещаться небольшая картинка-пиктограмма, взята с соответствующей дощечки также из варианта полноцветного дизайна. Правое основное поле содержит аналогичные варианту полноцветного дизайна страницы ссылки и информацию.

--
Исправлено мама Света Пт 19 Май 2006, 23:31

--
Исправлено мама Света Вс 21 Май 2006, 14:36

Текущий вариант дизайна сайта подходит скорее для сайтов-презентаций - где всего несколько разделов с информацией. Очень много места на экране будет занимать графика интерфейса и очень мало места остается для действительно полезной информации. Само информационное поле ведь содержит не только текстовую информацию, но и различные картинки/графику/рисунки, размеры которых могут больше, чем размер информационного поля.
Вообще, на мой взгляд, на сайте "Информационного центра" больше внимания должно уделяться именно информации - ее удобного представления, поиска, сортировки, добавления и т.п. Хороший пример - сайт poselenia.ru - графическая шапка только в верхней части страницы, меню - текстовое, а информационно поле, как и должно быть, занимает максимально большое пространство.
Представьте себе, какую газету или журнал вы бы стали покупать или постоянно читать? Ту, на страницах которой до 30% занимает одна и та же информация, или ту, которая оптимально использует пространство страницы для ее информационного наполнения?

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

Roman_Simukov, Elena_Piter,

Вы забываете, что это дизайн ТОЛЬКО главной страницы МИАЦ.
Т.е. это только парадный вход, который должен быть красивым и "дружелюбным".
Вся информация будет находиться на нескольких "внутренних" страницах МИАЦ, которые основаны на вики-движке (отсутствие графики и возможность простого редактирования содержимого). Белое поле на главной странице - для новостей (без графики), объявлений и ссылок (возможно в виде выпадающих меню)

Жалко, что половина верхнего пространства под названием с птицами от Варленна "ушла". Было красиво и свободнее пространство чувствовалось.
Вьюнки, по-моему не используют сосны в качестве опоры, а вот плющ может, правда, помню только про дубы и обвивающий их плющ.
Так что, удастся вытащить ветку с иголками из=за дерева?
И дерево отличается сейчас от общего фона. Небольшой дисбаланс получается. Может, его можно в такой же технике изобразить как Варлен рисовал поля с деревьями, ну, что ли четче прорисовать борозды, складки, выделить цветом фактуру коры?
И если ветка с иголками и шишкой будет пущена с переднего плана до неба, то солнце можно будет сместить немного влево, тогда, может, надпись можно будет оставить в одну строчку?

Первое впечатление, дерево слишком громоздкое, даже с моим разрешением 1280x1024 оно кажется большим. Главную надпись бы в идеале в центре сделать, но это не получится, ну хоть немного вытащить из правого угла. Дерево можно уменьшить, насколько это возможно, тогда и надпись расширится. Ещё основное инф. поле опустить бы вниз, а то кажется что нечто главное от нас скрывают (фоновую природу, шапку ведь можно сделать любой толщины, она же отвечает за пространство, как правильно отметила мама Света, вот.

Добавлено пользователем cпустя 5 мин., 21 сек.:

И кстати дерево можно овекторизировать как предложила мама Света, в стиле фона.

мама Света, varlenn,
Ещё одну ветку сделаю (выходящую из-за левого края) - посмотрим, как получится. Дерево действительно надо овекторизировать. Собственно - все изображения на странице должны быть векторизированными. Просто у меня были только растровые клипарты, в векторизировать я не умею
Варлен, ты ствол сможешь в вектор перевести? Могу выслать более крупный вариант.

Толстую ветку (которая справо от ствола) сдвину влево.
Ствол сделаю тоньше. Белое поле смещу вниз. Но сильно большую шапку лучше не делать - "вес" страницы будет расти.

Добавлено пользователем cпустя 13 мин., 36 сек.:

Ё-моё! 8O
Я тут вот обнаружил, что у меня картинка не соразмерная была (не 1024*768 а более "квадратная")
Сейчас всё исправлю! Теперь должно быть лучше.

Eco-Heretic, я имел ввиду сделать эффект вектора, ведь фон я сделал из фотографии, поработав в Фотошопе, так же можно и дерево, отощли мне, я попробую. Смысл в том, что не обязательно растр конвертить в вектор, а придать изображению малый вес.
Да кстати на счёт размера, забыл просто сказать тебе, что там или 1280x1024 или ещё больше.

На данный момент - это итоговый вариант дизайна главной страницы Международного Информационно-Аналитического Центра (МИАЦ) расположенной по адресу info.anastasia.ru

Дизайн постепенно уточняется и дополняется.

Изменения от 07.05.06
- подправлены кнопки-дощечки
- сдвинут ствол кедра к краю страницы
- заменено солнце (восход)
- использована другая шапка сайта (вариант Varlenn)
- белое поле теперь непрозрачно

Изменения от 10.05.06
- исправлен размер страницы (под 1024*768)
- увеличена надпись "МИАЦ"
- исправлено положение белого поля

Изменения от 19.05.06
- первый образец тех. задания и создание итоговых макетов страниц

Тех. задание ещё сырое. Надо дописать про 2 варианта дизайна и про стандартный размер страницы + уточнения и дополнения.

Дописала про дизайн для первичного входа.
Уточнен дизайн по макету varlenn
Дописала про простой вариант дизайна.


Тех. Задание.
демоматериал
- макет полноцветного дизайна страницы с анимационными элементами
- схема макета полноцветного дизайна с пронумерованными секторами страницы
- макет дизайна страницы для первичного входа на ИНФО
- эмблема ЗКР (два варианта)
- эмблема МИАЦ не представлена (нужны предложения от веб-дизайнеров), описание в тексте.
- лента орнамента для разделения столбцов в варианте простого дизайна не представлена, описание в тексте


Размеры рисунка для полноцветного дизайна страницы.
1) Либо рисунок не масштабируется, делаем под стандартное разрешение мин. 1024х768.
2) либо рисунок должен быть масштабируемым, точнее, дизайн должен быть устойчивым к изменениям горизонтали окна от 800 до 1600 хотя бы.
Пожелание - сделать всё-таки рисунок масштабируемым.

Разрабатывается три макета с различными вариантами дизайна.

1). дизайн для первичного входа на страницу ИНФО. Этот вход служит исключительно для выбора пользователем двух дизайнов ИНФО и содержит эмблему ЗКР (ветка кедра на фоне солнца), эмблему МИАЦ (летящий, парящий орел) и два ссылочных поля на разные дизайны ИНФО. Данная страница позволяет пользователю, впервые зашедшему на ИНФО, выбрать в соответствии с возможностями его компьютера и интернет-трафика тот вариант дизайна, который будет загружаться в кэш быстрее. В дальнейшем этот пользователь будет попадать сразу в тот дизайн, который поставит себе по умолчанию, но с возможностью всегда его поменять на второй вариант.
Страница первичного входа оформляется в соответствии с предоставленным макетом. Основной фон - зеленый и голубой. В центре страницы помещено слово ВХОД (не активно). Справа и слева от него располагаются два ссылочных поля (кнопки, стилизованные под солнца), подписанные "Полная версия" и "Легкая версия" соответственно. Вверху страницы первичного входа дается надпись Международный Информационно-Аналитический Центр (шрифт повторяется из шапки дизайна ИНФО, см.ниже), под ним более мелким шрифтом надпись "Объединенные ресурсы под знаком ЗКР". и в ряд с этой надписью - эмблема МИАЦ - парящий орел. Слева от названия МИАЦ в шапке помещается эмблема ЗКР. Внизу страницы по центру под входами в два варианта дизайна ИНФО помещается краткий текст-приветствие с информацией о назначении МИАЦ.


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

4 основных поля: левый узкий столбец (с кнопками), большая правая область, «шапка» страницы и узкое нижнее горизонтальное поле.

Левый столбец (а также левая часть «шапки») представлен в виде ствола дерева (кедра), находящегося на переднем плане. На нём размещаются кнопки ( сектор 7), сделанные в виде дощечек, соединённых цветочной лианой. На дощечках будут находиться: текст ссылок и небольшие картинки-пиктограммы.



В «шапка» страницы изображён пейзаж (4,5,6) (стилизованный под векторное изображение): голубое небо (градиент), холмы покрытые лесом и луга.
На фоне неба расположено название страницы: «Международный Информационно-Аналитический Центр» и ниже, более мелкая надпись «Объединённые ресурсы под знаком «ЗКР».

В левой части «шапки» видна крона дерева с ветками, хвоёй и кедровой шишкой. (1,2)
Одна ветка отходит от ствола вправо и располагается на фоне солнца (3), образуя, таким образом, символ ЗКР (ветка кедра на фоне солнца).

Нижнее горизонтальное поле (17,18 ) состоит из изображения травы.

Большая правая область страницы состоит из двух частей:
1) узкая вертикальная область (10,11,12), на которой изображено продолжение пейзажа из «шапки» страницы. Таким образом, эта область визуально составляет одно целое с «шапкой».
2) Белое информационное поле (19), выделенные границы этого поля (16) а также небольшой элемент в виде загиба листа бумаги (8 )

Описание каждого сектора на странице:

1. Рисунок. Ствол кедра и часть кроны
2. Рисунок. Часть ствола, пейзаж, крупная ветка, хвоя и шишка. Возможно шишка будет отдельным изображением-ссылкой.
3. Анимированный объект (flash). Небольшое покачивание (на ветру) ветки и создающийся из-за этого эффект мерцание солнца (свет, проходящий через хвою).
При наведении курсора вокруг солнца появляется надпись «Звенящие Кедры России». При убирании курсора надпись исчезает. Этот элемент также является ссылкой, ведущей на сайт Anastasia.ru



4. 5. 6. Рисунки. В пятом секторе располагается заголовок страницы
7. Рисунок. Дощечка-кнопка
8. Рисунок. Загиб листа.
9. Рисунок. Изображение края ствола кедра. Это изображение повторяется на протяжении всего ствола (до сектора 2), чтобы уменьшить итоговый размер страницы. Однако, при этом должно сохраняться визуальное единство ствола.
10. 11. Рисунки. Являются продолжением пейзажа, изображённого в «шапке страницы».
12. Рисунок. Изображение травы. Является переходным от анимированного 18 сектора к 11-му. Создаёт визуальное единство секторов 11 и 18.
13. Рисунок. Изображение коры. Такой же принцип, что и в секторе 9.
14. Рисунок. Белый цветок, находящийся между дощечками. Это изображение повторяется на протяжении всего ствола кедра (как и секторы 9 и 13)
15. Рисунок. Кора дерева. Повторяется между всеми дощечками.
16. Граница белого поля (рисунок наверное?..)
17.18. Анимированные объекты (flash). Изображение травы, которая слегка покачивается (на ветру). Анимация интерактивная. При проведении по траве курсором, она (трава) пригибается и снова выпрямляется.
Сектор 18 может быть разделён на несколько одинаковых flash-элементов (для экономии трафика)

3). Дизайн страницы с минимальной графикой
Шапка страницы полностью берется из полноцветного дизайна. Убирается анимационный элемент с ветки. При этом сохраняется вход на Анастасию через солнышко.
Под шапкой основное поле страницы однотонное в цвет неба шапки.
Левый столбец отделен от правого узкой лентой орнамента. Орнамент состоит из переплетенных листьев (возможно виноградных, дубовых, кленовых и т.п.), выполнен в стиле рисунка черным пером, заливка орнамента может оставаться в тон общего фона страницы, может быть и в тон травяного поля шапки.
Содержание левого стобца подобно левому столбцу в полноцветном дизайне, и ссылочные поля прописываются в строчно-буквенном варианте. В начале каждого ссылочного поля может размещаться небольшая картинка-пиктограмма, взята с соответствующей дощечки также из варианта полноцветного дизайна. Правое основное поле содержит аналогичные варианту полноцветного дизайна страницы ссылки и информацию.

--
Исправлено мама Света Пт 19 Май 2006, 23:31

--
Исправлено мама Света Вс 21 Май 2006, 14:36

Так и не могу разобраться с ещё одной веткой: как бы не сделал - получается не очень... Может "лиана" будет просто влево уходить?
Правда все вьющиеся растения (насколько я знаю) обвиваются всегда только в одну сторону (вокруг своей опоры, вот только не помню - в какую).
Значит надо обе лозы пускать в одном направлении.

И вот ещё одна мысль появилась. А насколько правильно у нас кедр изображён? В смысле - расположение толстой правой ветки. Кто знает - как у взрослых кедров расположены ветки на стволе?

Eco-Heretic,
а Вы вообще этот сук уберите, дощечки вверх подтяните.
Толщину дерева вровень по дощечкам сделайте.
Видно же будет, что там дерево, понятно, что кедр

Eco-Heretic,

Цитата:

И вот ещё одна мысль появилась. А насколько правильно у нас кедр изображён? В смысле - расположение толстой правой ветки. Кто знает - как у взрослых кедров расположены ветки на стволе?

Тимур, вот нашла (правда, без фотки) у нашей великолепной Шамбо
по ссылке http://www.anastasia.ru/forums/post_281045.html#281045 . Может, поможет.

"Кедр сибирский (Pinus sibirica) - дерево высотой до 40 метров, диаметр ствола до 1,5 - 2 м. Крона у молодых деревьев остропирамидальная, у взрослых - широкораскидистая, часто многовершинная. Ветвление мутовчатое. Верхние ветви канделябровидные, приподняты вверх. Кора на молодых стволах и ветвях пепельно-серебристая, с бурыми поперечными чечевичками, в дальнейшем трещиноватая, серо-коричневая. Хвоя длиной 5-12 см, мягкая, трехгранная в поперечном сечении, темно-зеленая с сизым налетом; сохраняется на дереве 3-7 лет. Мужские (пыльниковые колоски расположены обычно в средней части кроны, женские шишечки - на концах верхних побегов дерева по 2-3 возле вершинной почки. Плодоносит лишь верхняя часть кроны протяженностью 1-1,5 м (редко до 2 м). Зрелые шишки яйцевидные, длиной 6-13 см, шириной 5-8 см, светло-бурые, имеют плотно прижатые чешуи с утолщенными щитками; содержат 80-140 коричневых семян длиной 10-14 мм, шириной 6-10 мм. Корневая система стержневого типа с распростертыми боковыми корнями." И т.д.

Добавлено пользователем cпустя 8 мин., 25 сек.:

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

собственно, можно было и не фоткать.
Вот нашла тему с фотками, между прочим, varlenn. Чего молчишь-то, партизан? Такой материал красивый!
Смотри, Тимур.
Таежный мой край (фото)

Спасибо мама Света, я и забыл про эту тему. Кстати места недалеко от полянки Анастасии.
Eco-Heretic, получил моё ЛС? А ещё заметил, что фон я тебе выслал без птичек. Как думаете с птицами лучше будет?

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

мама Света,
Спасибо за описание кедра.

Цитата:

Плодоносит лишь верхняя часть кроны протяженностью 1-1,5 м

Вот это важно. Значит шишки не могут висеть на ветках в середине ствола (как у нас сейчас). Что будем делать?

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

varlenn, да, твоё письмо получил. Извиняюсь, что сразу не отправил. Отправлю в ближайший час. А ты мне птиц dragon-house[собака]yandex.ru

Shambo, Вариант не плохой Но при таком дизайне сильно возрастёт размер страницы - т.к. между дощечками будет просматриваться фон. А это ещё несколько дополнительных картинок...
Света, Варленн (и все, кто здесь бывает) - что думаете?