Веб-дизайн

Понятие сайта
Информация, доступная в Internet, располагается на компьютерах (Web-серверах), на которых установлено специальное ПО. Значительная часть этой информации организована в виде Web-сайтов. Для просмотра Web-сайтов используются специальные программы, которые называются браузерами (Internet Explorer и др.).

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

Web-сайты бывают
- личные (персональные)
- информационные (сайты учебных заведений)
- дистанционного образования
- коммерческие (internet-магазины)
- развлекательные

Web-страница представляет собой текстовый файл с расширением *.htm (*.html), который содержит текстовую информацию и специальные команды - HTML-коды, определяющие в каком виде эта информация будет отображаться в окне браузера.

Вся графическая, аудио- и видео информация непосредственно в Web-страницу не входит и представляет собой отдельные файлы:
*.gif, *.jpg - графика,
*.mid, *.mp3 - звук,
*.avi - видео.
В HTML-коде страницы содержатся только указания на такие файлы.

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

Создание сайта

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

Состав команды для создания сайта.
Администратор
. Организует совместную работу между членами группы. Следит за ходом выполнения работ. Дает необходимые указания и рекомендации. Следит за поступлением новой информации
Веб-дизайнер. Создает фирменный стиль и логотип учебного заведения. Реализует его в графических программах (Photoshop, CorelDraw, Flash)
Веб-программист. Занят в написании различных программ для веб-сайта. Например: написание форума, гостевой книги, скриптов для динамического обновления новостей
Веб-мастер. Объединяет в себе функции веб-дизайнера и веб-программиста. Отвечает за общее представление веб-сайта в Интернете.
Верстальщик. После того как создан фирменный стиль сайта и реализован дизайн одной из страниц веб сайта, необходимо сформировать основные страницы, создать структуру и наполнить страницы информацией
Наборщик. Набирает необходимую текстовую информацию для сайта используя редакторы Word, Excel (или другие)
Редактор. Проверяет подготовленный материал для размещения на сайте с литературной точки зрения. Исправляет ошибки, корректирует тексты
Менеджер. Занимается раскруткой и рекламой веб-сайта.

Планирование сайта
Решив создать свой сайт и разместить его в Интернет, вы в первую очередь определяете
- с какой целью он создается;
- его тематику;
- для кого он предназначен.

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

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

Советы по планированию содержания

На первой (титульной) странице размещать заголовок сайта, ссылки на страницы с основной информацией и некоторые общие сведения

Не подавайте весь текст на входной странице. Иногда кажется, что автор боится, что посетитель уйдет, не узнав главного. На первой странице в идеале должна быть зацепка — ключевое слово или фраза, которые “остановят” посетителя.

Ограничивать длину страниц 3-4 экранами, первая страница - 1 экран.

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

При планировании структуры Web-сайта основным критерием является то, насколько легко пользователи могут получить нужную информацию.

Время загрузки

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

50 Кб - 100Кб - это максимальный объем (вес), который может иметь страничка вместе со всей графикой, находящейся на ней

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

Оформление сайта

Дизайн – размещение и оформление элементов содержания и навигации

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

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

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

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

Шрифт

Оформление документа: выделение необходимых частей текста цветом, применением СТРОЧНЫХ символов, их курсивного и полужирного начертания, а также изменение размера шрифта.

Удобочитаемость: текст выполнен темным цветом на светлом фоне и быть контрастным (не брать пестрый фон).

Ширина строки документа: строка "идеальной ширины" должна умещать порядка 50-70 знаков. При их большем количестве скорость чтения замедляется и утомляемость наступает быстрее.

Мелкий текст, мелкие надписи на картинках делайте шрифтом без засечек.

Любая надпись - должна быть читаемой, то есть доносить до зрителя необходимую информацию.

На одной работе не должно быть очень много шрифтов разных стилей. Это раздражает зрителей.

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

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

Поменьше пользуйтесь так называемым пляшущим или разноуровневым текстом

Графика - это визуальное средство подчеркивания и выделения информации, раскрываемой текстом Web-страницы.

Внешний вид и привлекательность сайта в значительной мере зависит от наполняющей его графики

Пути получения графического изображения:
создание изображения в графическом редакторе ;
поиск в библиотеках графических изображений (ClipArt, Internet),
сканирование с печатного экземпляра.
Большая часть времени тратится на загрузку изображений. Не перегружайте страницу графикой не несущей смысловой нагрузки.

Наполнение сайта
Графические форматы

GIF (Graphic Interchange Format) - формат графического обмена. GIF-файлы - это файлы растровых изображений, в которых используется не более 256 цветов. (прозрачная, анимированная графика и рисунки).
JPEG (Joint Photographic Experts Group) - JPEG - файлы представляют собой растровые изображения, в которых может быть использовано до 16.7 млн. цветов. При каждом сохранении такого файла качество изображения ухудшается. (фотографии)

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

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

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

Звук имеет право на существование, если:
пользователю предоставлена возможность самому указать, хочет он звук, или нет;
он несет смысловую нагрузку
Нельзя использовать музыку в декоративных целях !!!


Ссылка на тест https://gb.ru/tests/13 

© Copyright 2025 Mobirise

Set up a site with Mobirise