forum.anastasia.ru :: Дизайн страницы ИНФО (info.anastasia.ru)

Дизайн страницы ИНФО (info.anastasia.ru)

по

[^/[Печать]\]
На страницу Пред. 1, 2, 3, ... 12, 13, 14 След. Раскрыть всю тему
forum.anastasia.ru -> _Архив (Библиотека старых тем)

#16: Автор: Eco-Heretic, Населённый пункт: Казахстан, Семипалатинск

Добавлено: Ср 10 Май 2006, 12:39
—
На данный момент - это итоговый вариант дизайна главной страницы Международного Информационно-Аналитического Центра (МИАЦ) расположенной по адресу 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 (Сб 20 Май 2006, 19:58), всего редактировалось 11 раз(а)

Имя файла:

Дизайн-ИНФО.jpg

Просмотрено:

125386 раз(а)

Размер файла:

48.43 KB

Имя файла:

Дизайн-ИНФО---схема.jpg

Просмотрено:

125386 раз(а)

Размер файла:

42.05 KB

#17: Автор: Eco-Heretic, Населённый пункт: Казахстан, Семипалатинск

Добавлено: Чт 27 Апр 2006, 8:58
—
kartush,

Цитата:

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

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

#18: Автор: мама Света, Населённый пункт: Мытищи М.О.

Добавлено: Вс 30 Апр 2006, 0:11
—
----------------
выдержки из чат-встречи 29/04/2006 (ссылка на продолжение, начало см.выше)
----------------
(19:04:31) mama_Sveta_1: расскажи, что с твоими программерами? Ждут, ругаются?
(19:06:27) neo2003: Они привыкли уже. То как "ужаленный" их озадачиваю -срочно, быстро. То раскачиваемся как "черепахи"
(19:07:28 ) mama_Sveta_1: Жаль, что я помочь не могу ни с видением картинки, ни с этими плав.средствами-кнопками. Тимур - молодец, фонтанирует.
(19:08:34) neo2003: Эт точно, молодец. В принципе картинка вырисовывается - как и что. Осталось еще написать пару страниц текста (конкретное тех. задание)
(19:09:31) neo2003: Ты как раз вот это и можешь сделать (вместе с Тимуром, например). Я тока скажу - яволь,, натюрлих
(19:11:09) mama_Sveta_1: Знать бы, как тех.задание пишется, чтоб его программисты поняли.
...
(19:22:41) neo2003: ... тех задание просто списком (произвольная форма)
...
(20:01:16) krestik: Не секрет о каком тех. задании речь идет!?
(20:01:44) Eco_Heretic: krestik> задания для программистов, по дизайну страницы ИНФО
(20:04:53) Eco_Heretic: mama_Sveta> а почему другие то не подключаются?.. Может ты знаешь толковых дизайнеров на сайте?
(20:07:36) mama_Sveta: Я хочу по поводу дизайнеров вот что. Поговорить с Варленом, он появился в твоей теме, потом еще с Павлом Фейером можно и с ребятами, которые делали дизайн поселений. Я вообще не могу понять, почему Леонид, как организатор этой группы, не хочет их привлечь к этому оформлению. Понятно, что код писать не надо, это сделают программеры Андрея Гаскина. А вот насчет расположения полей для столбцов, мест для кнопок, каких кнопок ну и всего остального можно самим написать.
(20:08:59) Eco_Heretic: Значит осталось тех. задание. Правда перед этим хотелось бы, чтобы в теме по дизайну оставили бы своии мнения все ИАЦ'овцы - нравиться или нет.
...действительно... странно, что он не хочет подключать людей, которые уже делали очень неплохой дизайн для Поселения...
(20:12:06) mama_Sveta: Давай так. Скажем основную идею сейчас, я позвонюсь завтра своим ребятам программерам, спрошу, как грамотно писать тех.задание. ОК?
(20:13:59) Eco_Heretic: mama_Sveta> ОК, значит ты введешь их в курс дела?
(20:14:32) mama_Sveta: Я могу ввести своих ребят в курс дела, если смогу грамотно объяснить, чего хотим мы там видеть.
(20:16:41) Eco_Heretic: mama_Sveta> ...если ты затрудняешься, давай, я краткое описание по пунктам сделаю и тебе личкой отошлю...
(20:17:35) mama_Sveta: Eco_Heretic, Давай, было бы хорошо.
(20:18:03) mama_Sveta: Цветовая гамма основная - синий, желтый, зеленый, коричневый, так?
(20:19:25) Eco_Heretic: mama_Sveta> тогда сегодня ближе к вечеру тебе вышлю Цветовая гамма: тёмно-зелёная тайга и трава внизу, ярко-голубое небо, желтое солнце и светло-коричневый ствол кедра - всё верно!
(20:19:59) krestik: В дизайне текстового варианта (infoT), я чем-то смогу помочь, если конечно нужно ... у меня есть идея на счет оформления 1 страниц, высказать?...выполнить её с использованием фоновых цветов для раскраски страницы и потребления меньшего трафика и где-ниб. на видном месте использовать спин-бокс (штука c выпадающим списком) для выбора режима входа в дальнейшем текст , графика
(20:32:49) Eco_Heretic: krestik> можно. Например, небо - если делать одноцветное, то это будет просто заливка - т.е. минимум траффика... На счёт спин-бокса - а где его приместить-то, чтобы он не выбовался из общего природно-естественного фона?..
(20:33:07) krestik: Ну да, и выбор сохраняется в куках, с ним как я понял кто-то умеет работать
(20:36:21) Eco_Heretic: krestik> а может так - по умолчанию грузиться полная версия страницы - а потом пусть пользователь выбирает - через меню настроек, и этот выбор запоминается в кукисах... Ты это имел в виду?
(20:37:43) krestik: Eco_Heretic> наверно можно и так, что я имел в виду , я позже (точно к утру) выложу в ИАЦ

Последний раз редактировалось: мама Света (Вс 30 Апр 2006, 19:21), всего редактировалось 2 раз(а)

#19: Автор: Krestik, Населённый пункт: г.Пенза

Добавлено: Вс 30 Апр 2006, 10:33
—
<html>
<body bgcolor="008000">
<center>
<table cellspacing="0" cellpadding="1" border="1" width="50%" height=7 bgcolor="80FF00">
<tr>
<td><a href="http://www.kedrovka.ru/">&nbspkedrovka&nbsp</a></td>
<td><a href="http://www.rod-part.ru/">&nbspRodPartiya&nbsp</a></td>
<td><center><form name=f>
<select name=s>
<option value="http://infotext.anastasia.ru/"> Only Text
<option value="http://info.anastasia.ru/" selected> With Grafika
<option value=3>3
</select></form></center></td>
<td>
<script>
document.writeln(`<a href="`);
if (document.f.s.options[0].selected)
{ document.writeln(document.f.s.options[0].value); }
else
{ document.writeln(document.f.s.options[1].value); }
document.writeln(`">Link</a>`);
</script>
</td>
<td>&nbsp...&nbsp</td>
<td><a href="http://www.etc.ru/">&nbspEtc&nbsp</a></td>
</tr>
</table>
</center>
</body>
</html>

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

Это и есть то о чём я говорил.
Формируется таблица с ссылками
В середине список выбора, в зависимости от
выбора следующая ячейка (Link) ссылается на
соответсвующий сайт (info.anastasia.ru или infotext.anastasia.ru)

Для просмотра сохраните этот код в html странице Wink

#20: Автор: мама Света, Населённый пункт: Мытищи М.О.

Добавлено: Пн 01 Май 2006, 17:02
—
Выкладываю переписку. Наши пункты обозначены буквой А>, ответы на них выделены цветом. Я общалась со своим давним другом, он Очень давно занимается программированием, оформлением в том числе сайтов и вообще всем, что связано с компьютерами, начиная от сборки и заканчивая их тех.обеспечением. Так что его мнение адекватно.

А> Вот, собственно, ссылки и набросок тех.задания (внизу
А> письма). Собст-но, что еще нужно подробно описать в задании для того, чтобы программисты всё поняли?
А> ссылка на сообщение с макетом
А> http://www.anastasia.ru/forums/post_323243.html#323243
А> ссылка на сообщение со схемой секторов на макете
А> http://www.anastasia.ru/forums/post_327195.html#327195
А> сама тема о дизайне ИНФО
А> http://www.anastasia.ru/forums/topic_15014.html
А> а оформляется первая страница для http://info.anastasia.ru/

А> Наброски для тех.задания
А> "Вот набросок (первые несколько пунктов) тех. задания для программистов по дизайну страницы ИНФО (info.anastasia.ru)
А> 1. Дизайн основан на векторных изображениях. Ограниченное количество цветов и наличие флеш-анимации (или, как альтернатива – гиф-анимация изображения).
А> Разработать две версии - с простейшей графикой и с анимацией, для выбора пользователя. Определить мин.разрешение ??? какое

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

А> 2. На странице должны находиться 4 основных поля: левый узкий столбец, большая правая область, «шапка» страницы с её названием и элементом анимации и узкое нижнее горизонтальное поле (тоже анимация)
А> 3. Для удобства, эти основные области разбиты на отдельные сектора (см. схему) в каждом из которых находиться либо текстура, либо анимация и т.д. Однако при этом должна сохраняться визуальная целостность страницы.

Люди, которые будут делать страничку, не поймут, что в данном случае означает "текстура"

А> 4. Основные цвета страницы: небесно-голубой, тёмно-зелёный (нескольких оттенков), жёлто-оранжевый и коричневый (несколько оттенков)
А> 5. Фон страницы: 2 основные области – зелёная тайга - от низа страницы, и примерно до её середины. Перспектива кадра - вид на тайгу с небольшой высоты, тайга уходит до горизонта (середина страницы). Выше горизонта – вторая область фона – голубое небо. Скорее всего однотонное, но возможен и градиент (более светлое к горизонту и более тёмное к верху страницы)
А> 6. Левый столбец представлен в виде ствола дерева (кедра), находящегося на переднем плане. Цвета – оттенки коричневого (векторная текстура коры дерева)
А> 7. В правой области располагается белое полупрозрачное поле, на котором должна располагаться текстовая информация. (см. рисунок)
А> 8. ….(далее надо подробно описать каждый сектор, что в каком находится, …)"

Света, это, скорее, задание для того, кто будет рисовать картинку -
программистам же лучше дать готовый дизайн в виде картинки в фотошопе и, если необходимо, отдельные анимированные элементы. Я понимаю, что у вас уже есть прототип. А также схему, которая у вас тоже есть, только подписи попонятнее.
Также нужно определиться с разрешением - либо постоянным, либо
страница должна быть масштабируемой. Вашу картинку, правда, сделать масштабируемой не получится. Наиболее вострбованное сейчас - 1024х768, у кого 800х600 - на экран не поместится, у кого больше - будут поля по краям - красота требует жертв Smile

Есть еще замечания, полученные устно, выложу вечером в этом же сообщении.

Вопрос к Андрею Гаскину (neo2003)
Нужно составить тех.задание для программистов или для Web-дизайнеров? Или там есть и те и другие?

#21: Автор: varlenn,

Добавлено: Пн 01 Май 2006, 19:38
—
Всем Привет!
По схеме, думаю фон в области 6 и 8 на схеме будет, плохо сочетаться с текстом, поэтому там лучше сделать белое пространство для основной информации и новостей. Вообще думаю лучше будет шапку расширить и уместить всю иллюстрацию там. А также дерево слева. И кстати текстуры сейчас использовать уже не нужно, всё таки не 98 год. Вполне реально использовать векторные элементы. Нужно только найти хорошее изображение дерева.

Вот это нарисовал где-то месяц назад, когда ещё было ИАЦ а не МИАЦ

--
Исправлено Eco-Heretic Пн Май 01, 2006 11:56 pm

--
Исправлено Eco-Heretic Вт Май 02, 2006 12:08 am

#22: Автор: мама Света, Населённый пункт: Мытищи М.О.

Добавлено: Пн 01 Май 2006, 21:45
—
varlenn, спасибо, что появился! Насчет вставки изображения в свое сообщение,
либо записывайся в Хранители Каталога, тогда ты станешь модератором этого раздела форума и получишь в том числе возможность вставлять файлы непосредственно в сообщение, либо по этой подсказке действуй

Небольшая техническая "хитрость" - если вы хотите разместить здесь фотографии или файлы с изображением, воспользуйтесь темой "Добавление нужных изображений". Тогда в текст вашего сообщения в этой теме вы сможете вставить изображение, заключив его адрес (когда вы щелкнете правой клавишей мышки на вашей картинке после её размещения в указанной выше теме, то во всплывшем меню выберете пункт "Свойства" и увидите адрес вашей картинки на этом сайте) обязательно в теги [img]интернет-адрес изображения[/img].

Вопрос у меня - чем отличается растровое изображение от векторного? В смысле техники его кодирования (надеюсь, вопрос правильно задала, пока плохо в этом понимаю). Кажется мне, в понимании этого различия как раз и кроется "вес" желаемого изображения и легкость его загрузки. И исходя из этого понимания, уже можно точнее говорить о количестве и местах расположения на макете анимационных элементов, а ведь, наверняка, именно они влияют на тяжесть картинки.

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

Eco-Heretic, куда картинку Варленна спрятал?

#23: Автор: Eco-Heretic, Населённый пункт: Казахстан, Семипалатинск

Добавлено: Пн 01 Май 2006, 22:04
—
мама Света,
Когда я писал о "векторных изображениях", я имел в виду картинки, нарисованные в векторных графических редакторах. На странице они, естественно, будут растровыми. Но "весить" будут меньше, чем обычные растровые. И, к тому же, у страницы будет свой стиль.

Последний раз редактировалось: Eco-Heretic (Вт 02 Май 2006, 16:50), всего редактировалось 1 раз

#24: Автор: Eco-Heretic, Населённый пункт: Казахстан, Семипалатинск

Добавлено: Пн 01 Май 2006, 22:31
—
мама Света, картинку исправил.

В растровых картинках основой изображения является пиксель (точка). Координаты каждого пикселя кодируются отдельно (формат ".bmp") или кодируются группы пикселей (".jpg" - поэтому такой формат и занимает меньше места).

В векторных картинках основой изображения является линия (кажется так). Её координаты кодируются при помощи формул.

Более понятно сказать не смогу, т.к. сам не разбираюсь в этом Mr. Green

Для примера - векторной картинкой являются веточки кедра в шапке сайта (при дизайне "XGreen")
Или, например, Масяня - это тоже векторный персонаж, только ещё и анимированный.

Вектор легко превратить в растр. Просто программа (граф. редактор) делит изображение на пиксели.

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

На счёт комментариев - завтра напишу, сейчас у нас уже за полуночь, а мне вставать рано Smile

#25: Автор: мама Света, Населённый пункт: Мытищи М.О.

Добавлено: Вт 02 Май 2006, 2:52
—
Smile

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

*************************
Основные мысли, которые нужно закрепить перед утверждением макета для ИНФО
- Необходимо делать две версии сайта.
1). С простейшей графикой (имеется ввиду техника рисования, а не программирование). М.б., вариант основной картинки, но с цветовой гаммой по минимуму и схематично прорисованными основными элементами - левым столбцом-навигатором в контуре дерева, с отходящим от контура дерева контуром ветки на контур солнца, шапка с названием на однотонном фоне неба, контуры травы внизу страницы также с однотонной заливкой. Т.е. все контуры залиты цветом без всяких переливов, мало того, этот цвет предлагается сделать "нежным" - пастельным. между шапкой и травой внизу сделать белое поле, окаймленное простейшим цветочным узором.
2). Основная картинка - яркая с анимацией. Прототип картинки предложил Тимур (Eco-Heretic).
- обязательно заранее определиться с разрешением. (Еще раз цитирую замечание) - "либо постоянным, либо страница должна быть масштабируемой. Вашу картинку, правда, сделать масштабируемой не получится. Наиболее востребованное сейчас - 1024х768, у кого 800х600 - на экран не поместится, у кого больше - будут поля по краям - красота требует жертв".
(Хочу заметить, что у меня установлено разрешение 1024х768, и при этой величине я не смогла полностью увидеть картинку Варленна, она уехала за экран. Поэтому сейчас я текст набираю при разрешении экрана в 1280х1024, это к слову).

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

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

1. (Тимур) В растровых картинках основой изображения является пиксель (точка). Координаты каждого пикселя кодируются отдельно (формат ".bmp") или кодируются группы пикселей (".jpg" - поэтому такой формат и занимает меньше места).
(Запись) Растр очень хорошо сжимается. Степень сжатия зависит от самой картинки. Каждая точка в растре задана положением и цветом. Чтобы сжать изображение, пишут след.образом: "Точки такие-то таким-то цветом". Поэтому-то заливка в минимум цветов позволит сжать картинку до минимума килобайт.
2. (Тимур) В векторных картинках основой изображения является линия. Её координаты кодируются при помощи формул.
(Запись) Для прочтения векторного изображения нужны вспомогательные программы.
(Тимур) Вектор легко превратить в растр. Просто программа (граф. редактор) делит изображение на пиксели.

(Запись) Чтобы перевести растровые изображения в векторные, нужны "миллионы" формул (т.е. "каждую точку растра" следует описать кривой линией), это слишком и очень кропотливая работа, да и вес такого изображения, сама понимаешь, какой будет.
(Тимур) Растр. в вектор превратить сложнее, особенно, если это фоторгафия. Т.к. в векторной графике ограничено количество цветов. В итоге получится, как будто рисованное грубыми мазками изображение.

(Запись) Меню (навигацию) следует программировать с достаточным запасом для дальнейшего "безболезненного" добавления-изменения ссылочных полей.

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

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

Выводы у меня какие.
Поправляйте, кто может.

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

Мне понравился цвет неба и кедра (или это сосна?) у varlenn. И, кстати, неожиданно симпатичная надпись "объединенные ресурсы под знаком ЗКР". (см. его сообщение выше по странице)

И мне также не удалось посмотреть секретный код Krestik, хотя я и сохраняла его в формате HTML. Ну, не умею я пока эти премудрости разгадывать. Поэтому ничего сказать не могу по нему.

Пока вот всё, что надумалось по результам.

Повторяю вопрос к Андрею Гаскину: Нужно составить тех.задание для программистов или для Web-дизайнеров? Или там есть и те и другие?

Также надеюсь, что и love_harbinger, предложивший ручную работу по рисованию кнопок-ссылок и eye-of-universe, показавший хороший вариант для шапки страницы, и kartush, с идеей двух входов и много чего другого, заглядывают в эту тему.

#26: Автор: Eco-Heretic, Населённый пункт: Казахстан, Семипалатинск

Добавлено: Вт 02 Май 2006, 17:45
—
мама Света,

Цитата:

и схематично прорисованными основными элементами - левым столбцом-навигатором в контуре дерева, с отходящим от контура дерева контуром ветки на контур солнца,

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

Цитата:

Вашу картинку, правда, сделать масштабируемой не получится.

Да, скорее всего, не получится. Значит, будем брать стандартное разрешение - 1024*768

Цитата:

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

Всё верно. Smile

Цитата:

неожиданно симпатичная надпись "объединенные ресурсы под знаком ЗКР"

Мне тоже понравилась эта фраза. Very Happy

Мы как-то до этого не додумались. И шрифт для "заглавных" букв хорошо подобран. Wink

Цитата:

И мне также не удалось посмотреть секретный код Krestik

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

Имя файла:

untitled-1.jpg

Просмотрено:

12005 раз(а)

Размер файла:

13.03 KB

#27: Автор: Eco-Heretic, Населённый пункт: Казахстан, Семипалатинск

Добавлено: Вт 02 Май 2006, 18:18
—
Теперь на счёт "текстур".

Я имел в виду: чтобы не загружать полностью большое изображение, состоящее из одинаковых элементов (например - тайга, где одинаковые элементы - это группы деревьев), можно загрузить только один такой элемент и "размножить" его на всё поле.
Вот пример: есть кусочек изображения зелёной хвои (текстура - первая картинка). А мне (например) надо, чтобы весь фон страницы выглядел также. Но чтобы не грузить всю огромную картинку фона, можно загрузить эту текстуру и "размножить" её (при помощи HTML-кода).
В итоге получится более-менее равномерный фон. (вторая картинка)

Имя файла:

01.jpg

Просмотрено:

12320 раз(а)

Размер файла:

20.15 KB

Имя файла:

02.jpg

Просмотрено:

11997 раз(а)

Размер файла:

77.5 KB

#28: Автор: Eco-Heretic, Населённый пункт: Казахстан, Семипалатинск

Добавлено: Вт 02 Май 2006, 18:35
—
Так вот, я предлягаю сделать примерно так же для следующих объектов:
1) тайга, но только там текстура будет вытянутая по вертикале (ведь вблизи деревья выглядят крупнее, чем те, что дальше к горизонту)
2) ствол кедра - из одинаковых кусочков текстуры-коры (кроме края ствола)
3) Анимированная трава - из одинаковых флеш-кусочков (рисунок ниже), "размноженных" по горизонтале.

Имя файла:

Трава.jpg

Просмотрено:

12339 раз(а)

Размер файла:

5.66 KB

#29: Автор: Eco-Heretic, Населённый пункт: Казахстан, Семипалатинск

Добавлено: Вт 02 Май 2006, 18:47
—
neo2003, ? не вижу. Говорит, что неверный логин.

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

#30: Автор: Eco-Heretic, Населённый пункт: Казахстан, Семипалатинск

Добавлено: Вт 02 Май 2006, 20:21
—
мама Света,

Цитата:

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

Я немного о другом. Вот на прошлой странице я пример с текстурой вешал, вот он:

На нём видно, что картинка состоит из 4-х одинаковых элементов. А в дизайне ИНФО надо будет сделать так, чтобы этого почти не было видно. Только там у нас - тайга, ствол дерева и трава.

#31: Автор: мама Света, Населённый пункт: Мытищи М.О.

Добавлено: Вт 02 Май 2006, 20:42
—
love_harbinger, привет, Василий. С возвращением. Насчет кнопок. Вроде мысль о размещении кнопок на фоне ствола дерева и не оспаривалась с самого начала. Так что сами кнопки было бы логично сделать в виде дощечек, как ты видел на прототипе макета. только как там текст будет выглядеть, прикинуть бы, чтобы повиднее был.
Вопрос, а ты можешь их соединяющую прорисовать? Тимур вот веревку изобразил, а я предлагала их соединить цветочно-травяной гирляндой. Вот хотя бы фрагмент нарисовать, потом его просто повторять между дощечками. Щас цитату дам, как там было.

Вот Тимур говорил: "3) Деревянные таблички-кнопки, висящие на дереве должны выглядеть инече - я просто не смог подобрать подходящее изображение... "
А вот я: "Собственно, вид кнопок в виде стилизованных дощечек хорош и в тему дерева, на котором они располагаются. Единственно, что висеть они должны не на веревке и не за гвозди к дереву, а на вьющемся растении или гирлянде из цветов. Кнопки располагаются в левом узком столбце для навигации и всё, наверное. Сверху правого большого поля их делать пока не вижу смысла."
Остальные про кнопки не говорили, а был разговор про всплывающие панели. Тут я пас-с-с!
А! Вот еще Тимур:"Анимированные кнопки-таблички. Т.е. не сами таблички, а то, что ни них будет находиться.
Я думаю, что лучше сделать текст+картинка, где "текст" - это название кнопки (например "энциклопедия поместья"), а "картинка" - это какая-нибудь анимированное изображение, которое будет символизировать эту ссылку. Что-то вроде того, как сделано на сайте http://info.sotvorenie.kiev.ua/ с выпадающими менюшками - там каждая строка имеет свою картинку, правда статичную. Но у нас кнопок-дощечек не так много, поэтому можно сделать и анимированные картинки. "
В общем, Василий, вот все пожелания. Задавай вопросы, уточняй.

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

Ну, вот. Тимур уже и эскиз вроде набросал, пока я текст писала. Уже хорошо.

Последний раз редактировалось: мама Света (Вт 02 Май 2006, 20:52), всего редактировалось 1 раз

forum.anastasia.ru -> _Архив (Библиотека старых тем)

output generated using printer-friendly topic mod. Часовой пояс: GMT + 4

На страницу Пред. 1, 2, 3, ... 12, 13, 14 След. Раскрыть всю тему Страница 2 из 14