Требования к дизайну школьного сайта

Для создании сайта, отвечающего всем художественным требованиям необходимо выполнить следующий алгоритм:

-создать банк изображений;

— выбрать цветовое решение (2-3 цвета);

— разработать логотип школы;

-создать шапку;

— создать банеры и кнопки в единой цветовой палитре и форме;

-сформировать целостный дизайн сайта.

 

Дизайн сайта

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

Цветовая гамма

Нынче не принято распыляться на множество цветов и раскрашивать сайт под стать радуге. Как раз, наоборот, в тенденциях веб-дизайна в последних лет учитывается скромность и спокойствие в этом отношении. За основу принимаются лишь 2-3 базовых цвета, в остальном используются лишь производные от них оттенки. Благодаря этому страницы приобретают более просторный и расслабленный вид.

Контрастность, понятность и умеренность — главные характеристики правильной цветовой палитры. Не стоит использовать в дизайне сайта заумных и замысловатых шрифтов, которые:

• сложно читаются;
• требуют дополнительного внимания от посетителя;
• сливаются с цветом фона;
• слишком малы;
• усложняют восприятие информации.

Что касается фотографий, то изображения не должно диссонировать с контентом или вызывать противоречивые эмоции. Объемные фотографии, анимационные ролики, графические элементы, картинки и изображения, — все это перегружает сайт, увеличивая скорость его загрузки, усложняя работу с виртуальным проектом. Важно также понимать, что пользователи, входящие в cеть через низкоскоростное соединение, отключают всю «красоту». Это означает, что «мобильные» посетители там, где должны быть анимационные и графические элементы, видят лишь подписи и названия, о наличии которых необходимо позаботиться заранее. Конечно, таких пользователей сейчас все меньше и меньше, однако совсем забывать про них не стоит, тем более в тех случаях когда вы точно знаете, что именно они — ваша целевая аудитория. Дорогой и качественный дизайн как правило — это не обилие разношерстной рисованной графики, а гармония стиля, идеи, тематики и реализации веб-проекта.

Ошибки веб-дизайна

.hiddenSpellError{border-bottom:2px solid red;cursor:default;}.hiddenGrammarError{border-bottom:2px solid green;cursor:default;}.hiddenSuggestion{border-bottom:2px solid blue;cursor:default;}.mce-content-body div.mce-resizehandle {position: absolute;border: 1px solid black;box-sizing: box-sizing;background: #FFF;width: 7px;height: 7px;z-index: 10000}.mce-content-body .mce-resizehandle:hover {background: #000}.mce-content-body img[data-mce-selected],.mce-content-body hr[data-mce-selected] {outline: 1px solid black;resize: none}.mce-content-body .mce-clonedresizable {position: absolute;outline: 1px dashed black;opacity: .5;filter: alpha(opacity=50);z-index: 10000}.mce-content-body .mce-resize-helper {background: #555;background: rgba(0,0,0,0.75);border-radius: 3px;border: 1px;color: white;display: none;font-family: sans-serif;font-size: 12px;white-space: nowrap;line-height: 14px;margin: 5px 10px;padding: 5px;position: absolute;z-index: 10001}
.mce-visual-caret {position: absolute;background-color: black;background-color: currentcolor;}.mce-visual-caret-hidden {display: none;}*[data-mce-caret] {position: absolute;left: -1000px;right: auto;top: 0;margin: 0;padding: 0;}
.mce-content-body .mce-offscreen-selection {position: absolute;left: -9999999999px;width: 100px;height: 100px;}.mce-content-body *[contentEditable=false] {cursor: default;}.mce-content-body *[contentEditable=true] {cursor: text;}
body {min-height: 150px}