Проект Бумеранг, лети и возвращайся/Исследование Web-Дизайн

Материал из Letopisi.Ru — «Время вернуться домой»
Перейти к: навигация, поиск

Содержание

Автор

Дарья Федянина, учащаяся, Лёвинская средняя школа посёлка Левинцы Оричевского района Кировской области. Медиастудия Лев-Кино.

Тема исследования

Web-Дизайн Проект Бумеранг, лети и возвращайся

Аннотация

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

Творческое название

SOS! SOE! Save Our Eyes!

Эпиграф

Что любо глазу, то любо сердцу.

Народная поговорка.

Проблема

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

Объект исследования

Web-Дизайн.

Предмет исследования

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

Цель исследования

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

Задачи исследования

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

Методы исследовательской деятельности

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

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

Форма представления результатов исследования

Wiki-статья в "Летописи".

Гипотеза

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

Ход исследования

Ход исследования(работа с информацией, наблюдение, эксперимент, анкетирование и анализ анкет, диагностика, обобщение)

  • Изучить требования к разработке сайта.
  • Познакомиться с основами цветоведения.
  • Изучить законы зрительного восприятия.
  • Привести примеры программ для разработки сайта.
  • Познакомиться с алгоритмом разработки и размещения сайта.
  • Привести примеры.

Обработка, анализ и систематизация материалов по теме исследования

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

Выводы

Итоги работы

Правила web-дизайна.


Главный критерий при разработке сайта - это удобство его будущих посетителей.

  • Сайт должен корректно отображаться при разных расшерениях экрана и на экранах с разным количеством цветов.
  • Страницы сайта должны выглядеть одинаково в разных браузерах. Так что при разработке сайта у вас в наличии должно быть несколько браузеров для проверки своей работы: FireFox, Opera 9, Internet Explorer - это минимальный набор самых популярный браузеров, который должен быть у каждого web-дизайнера.
  • Сами страницы должны быть минимальными по объему для большей скорости их загрузки.
  • Весь сайт должен быть оформлен в одном стиле. То есть неприемлимы оформления, где на одной странице, допустим, кошечки-собачки, а на следующей - готический замок.
  • На одной странице не должно быть использовано более трех различных шрифтов (для заголовка, для основного текста и для каких-либо пометок на протяжении самого текста).
  • При оформлении не должно быть использовано более трех различных цветов, причем они все должны сочетаться между собой.

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

Красный - это возбуждающий, согревающий, активный, энергичный, проникающий, тепловой цвет.

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

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

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

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

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

Фиолетовый - это соединяет эффект красного и синего цветов; производит угнетающее действие на нервную систему.


На основе этих утверждений можно представить следующий список наиболее приемлемых сочетаний цветов (в порядке ухудшения):

  • Синий по белому
  • Черный по бледно-желтому
  • Зеленый по белому
  • Черный по белому
  • Зеленый по красному
  • Красный по желтому
  • Красный по белому

Сочетания, которые использовать нежелательно:

  • Оранжевый по черному
  • Черный по пурпурному
  • Красный по зеленому


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

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

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

Цвет: Красный

Гармонирующие цвета: зеленый, серый


Цвет: Малиновый

Гармонирующие цвета: жемчужно-серый, розовато-лиловый


Цвет: Темно-красный (бардо)

Гармонирующие цвета: черный, голубой, беж


Цвет: Алый

Гармонирующие цвета: светло-голубой, зеленый


Цвет: Густо-розовый

Гармонирующие цвета: различные оттенки голубого


Цвет: Коричнево-розовый

Гармонирующие цвета: голубой, кремовый


Цвет: Бледно-розовый

Гармонирующие цвета: салатный, бледно-сиреневый, голубой


Цвет: Оранжевый

Гармонирующие цвета: фиолетовый, бледно-голубой, ярко-синий


Цвет: Соломенно-желтый

Гармонирующие цвета: бледно-розовый, серовато-голубой, зеленый


Цвет: Желтый

Гармонирующие цвета: фиолетовый, голубой, зеленый


Цвет: Бледно-желтый

Гармонирующие цвета: светло-лиловый, серовато-розовый, бледно-зеленый


Цвет: Золотистый

Гармонирующие цвета: светло-серый, зеленый, темно-красный


Цвет: Темно-зеленый

Гармонирующие цвета: коричневый, беж


Цвет: Серо-зеленый (цвет морской волны)

Гармонирующие цвета: васильковый, оранжевый


Цвет: Синий

Гармонирующие цвета: желтый, песочный, оранжевый, розовый


Цвет: Бледно-зеленый

Гармонирующие цвета: темно-зеленый, лиловато-розовый


Цвет: Серо-голубой

Гармонирующие цвета: бордо, серый


Цвет: Фиолетовый

Гармонирующие цвета: светлые и темные оттенки зеленого


Цвет: Бледно-сиреневый

Гармонирующие цвета: зеленый, серый, розовато-лиловый


Цвет: Розовато-лиловый

Гармонирующие цвета: изумрудно-зеленый, темно-красный, коричневый


Цвет: Коричневый

Гармонирующие цвета: оранжевый, красный, беж


Цвет: Серый

Гармонирующие цвета: фиолетовый, малиновый, бледно-сиреневый

Инструменты веб-дизайнера

Если вы уже пытались создавать HTML-страницы, используя соответствующие возможности Microsoft Word, забудьте об этом. Если начали изучать FrontPage -- также рекомендую забыть, он вам не пригодится... Вам понадобится... вот почитайте-ка ниже, что вам понадобится.

1. Adobe Photoshop

Мощное средство создания графики для Интернет и не только. Веб-дизайнера он интересует в особенности, т. к. оснащён развитыми средствами оптимизации графики, т. е. уменьшения размеров графических файлов без проигрыша в качестве или с мининальным проигрышем. Имейте в виду, что в Интернет используются два основных графических формата: GIF (для изображений с небольшим количеством цветов) и JPEG (для полноцветных фотографических изображений), с каждым из которых Photoshop справляется очень неплохо. Представьте: каждая веб-страница должна весить не более 50-100 килобайт в худшем случае... сами понимаете, без оптимизации не обойтись.

Сайт программы:

Adobe Systems Incorporated

2. Macromedia Dreamveaver

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

Существует мнение, что HTML должен писаться только руками и только в текстовом редакторе. Это чистейшей воды снобизм: при таком «профессиональном» подходе большой заказ переживёт заказчика... да и исполнителя, возможно. Другое дело, что вы должны уметь писать HTML руками без помощи визуальных редакторов, иначе какой же вы профессионал? Лично я, к сожалению, шёл к HTML от Word'а, что существенно замедлило прогресс.

Используйте версию 4.0, она предоставляет разработчику наибольшие возможности и снабжена прекрасной информационно-справочной системой по HTML, CSS и JavaScript. Сайт программы:

Macromedia


Эта же компания разрабатывает Flash и Shockwave.

3. Notepad

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

Microsoft

4. Perl

Если вы собираетесь изучать Perl в среде Windows, установите на своём компьютере Active Perl версии 5.6 или выше. Не волнуйтесь, практически все ваши скрипты будут работать и под Unix. Сайт программы:

ActiveState -- Programming for the People

5. Perl Builder

Так вот, если вы всё ещё собираетесь изучать Perl, вам понадобится соответствующий редактор-отладчик. Используйте версию 2.0, она значительно лучше первой. Сайт программы:

Solutionsoft Home Page

6. Apache Web-server

Этот сервер вы можете использовать для тестирования веб-страниц и скриптов, написанных на языке Perl. Используйте версию 1.3.14 или более современную. Сайт программы:

The Apache Software Foundation

7. Браузеры.

Для начала достаточно, если вы будете тестировать свои страницы на совместимость в двумя браузерами: Internet Explorer 4.0 (5.хх) и Netscape Navigator (Communicator) версии 4.хх. Сайты программ:

Internet Explorer Netscape Navigator

8. LeapFTP

Для загрузки файлов на сервер провайдера вы можете воспользоваться одним из множества FTP-клиентов. На мой взгляд, лучший из них -- LeapFTP версии 2.6 и выше. Сайт программы:

LeapWare

Основные теги


  • <title></title> - заголовок хтмл-документа
  • - центровка
  • <a атрибуты></a> - гиперссылка (атрибут href) или якорь (атрибут name)

  • - перенос каретки, по-нашенски переход на новую строку :)
  • <nobr></nobr> - по возможности разрывы не допускаются
  • - заключенный текст между тегами будет жирным
  • <form атрибуты></form> - форма
  • - текст между тегами будет отображаться как есть (с соблюдением строк, переносов и интервалов)
  • <img атрибуты> - изображение детской неожиданности :)
  • - нижний индекс (текст будет смещен вниз)
  • - верхний индекс (текст будет смещен вверх)
  • <basefont атрибуты> - указывает размер шрифта для последующего текста
  • - установка размера, цвета или гарнитуры заключенного в теги текста
  • - абзац
- элемент списка
  • - строка в таблице
Персональные инструменты
Инструменты
Акция ВЫХОДИ В ИНТЕРНЕТ 2015

организаторы проекта
PH International
www.Iteach.ru
Корпорация Intel
Компания ТрансТелеКом