Логотип и фавикон

Результаты практической работы "Логотип":

Фамилия, имя	Оценка
Билык, Олейник	9
Святощук, Коваль	10
Сушкевич, Клемятин	7
Иванченко и Пивовар	9
Гольская, Хайрович	10
Момот, Школьная	10
Сытник, Шамаева	10
Лыжин, Бесценный	7
Малютенко, Панченко	11
Савчук, Дубохвост	8

Что такое логотип?

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

Пример заготовки логотипа для сайта IT-компании

Логотипы бывают трех типов:

•         Текстовые. Как правило, в этом случае в качестве лого используется графическое начертание названия

•         Символьные. В качестве logo выступает какая-то картинка или изображение, а порой и какой-нибудь зверек (котенок, собака и т.д.). Также в некоторых случаях логотипом может стать «оживший» предмет (например, как в ворде – скрепка-помощник с глазами)

•         Комбинированные. В этом случае logo комбинированный, он состоит и из графического текста, и из символа

Требования к логотипу:

•         Он должен быть легко запоминаемым

•         Он должен быть уникальным. Не стоит копировать чужие логотипы

•         Он должен быть оригинальным. Посетителей надо чем-то удивить, логотип должен остаться в памяти

•         Он должен быть ассоциативным, отображать характер сайта

•         Он не должен раздражать посетителей

Что такое фавикон?

Favicon (от  FAVorites ICON — «значок для избранного»)-   значок веб-сайта или веб-страницы. Отображается браузером в адресной строке перед URL страницы, а также в качестве картинки рядом с закладкой, во вкладках и в других элементах интерфейса. Как правило, фавикон копирует или дополняет логотип.

Как создать фавикон?

•         Использовать генератор фавиконов (например, http://favicon.by/)

•         Создать в графическом редакторе изображение размера 16×16 пикселей формата ICO, поместить в корневой каталог сайта под именем favicon.ico.

Примеры фавиконов в заголовке закладки браузера

Подключается фавикон с помощью тега 

<link rel=«icon» href=» http://путь к файлу с favicon.ico»>

Этапы создания лого:

1. Дизайнерские предпочтения

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

2. Исследование конкурентов

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

3.   Рисование эскизов и концептуализация

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

Эскизы лого для сайта Ultimate Potential

4. Воплощение на компьютере

У автора эскизов, которые вы можете видеть выше была идея использовать буквы U и P в логотипе и составить из них фигуру человека прыгающего или парящего в воздухе. После того как был выбран один наиболее подходящий эскиз автор экспериментировал создавая разные его варианты в  Adobe Illustrator. Ниже вы можете видеть шесть вариантов созданных авторам во время экспериментов. В результате был выбран левый нижний вариант. Данный логотип изображает абстрактного человека прыгающего или парящего в воздухе, символизирующего энергию, хорошее здоровье, жизненный баланс, подвижность, что соответствует тематике сайта.

5.   Выбор шрифта

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

6.   Цвет

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

7.   Заключительный вариант логотипа.

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

А вот так он выглядит на самом сайте:

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

Теги META. Поисковая оптимизация

Результаты практической работы "Метатеги":

Пивовар, Іванченко	7
Хайрович Еміна	9
Коваль Арина и Гольская Валерия	11
Білик, Олійник	9
Момот,Школьная	8
Святощук Р. Сушкевич Д.	11
Юдин, Матвиенко	6
Савчук Дубохвост	9
Сытник, СикорсьКий	7
Shamaeva and Shcerbina	11
Панченко,Малютенко	11
Мельник А.	11
Дурнева Лисовская	11

Read more publications on Calaméo

Поисковая оптимизация (search engine optimization, SEO) — комплекс мер по внутренней и внешней оптимизации для поднятия позиций сайта в результатах выдачи поисковых систем по определенным запросам пользователей с целью увеличения сетевого трафика (для информационных ресурсов) и потенциальных клиентов (для коммерческих ресурсов) и последующей монетизации (получения дохода) этого трафика.

Поисковые системы учитывают множество параметров сайта при вычислении его релевантности (степени соответствия введённому запросу):

• плотность ключевых слов (сложные алгоритмы современных поисковых систем позволяют производить  анализ текста, чтобы отсеять поисковый спам, в котором ключевое слово встречается слишком часто)
• индекс цитирования сайта («ИЦ»), зависящий от количества и авторитетности веб-ресурсов, ссылающихся на данный сайт; многими поисковиками не учитываются взаимные ссылки (друг на друга). Зачастую также важно, чтобы ссылки были с сайтов той же тематики, что и оптимизируемый сайт — тематический индекс цитирования (тИЦ)
• водность текста — показатель, определяющий наличие малозначимых слов, которые не несут никакой полезной информации и служат для разбавления текста
• поведенческие факторы (внутренние) — ряд всевозможных действий пользователей, которые они могут произвести на сайте: вход, просмотр страниц, клики на ссылки в тексте, меню.

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

Метатеги - это служебные элементы web-документа. На экране они не видны, но имеют важное значение при нахождении вашего сайта поисковыми системами.

Основное предназначение метатегов - представить несколькими словами содержание всего вашего сайта. Метатеги облегчают поиск поисковым машинам.

META-теги имеют два возможных атрибута:

• <META HTTP-EQUIV="имя" CONTENT="содержимое">
• <META NAME="имя" CONTENT="содержимое">

META-теги должны находиться в заголовке HTML-документа между <HEAD> и </HEAD> (особенно это важно для документов, использующих фреймы).

Стандартом HTML 4.01 значения и имена мета-тегов НЕ оговариваются, поэтому мы будем рассматривать те значения, которые уже устоялись в интернете и используются чаще других. 

Параметры атрибута NAME

Параметр	Назначение	Пример	Комментарий
Description	Текстовое описание (краткая аннотация) конкретной страницы вашего сайта. Не стоит создавать слишком длинное и подробное описание вашего сайта, рекомендуется ограничиться текстом до 100 символов, поскольку поисковые машины, в большинстве случаев, имеют ограничение на количество индексируемых символов.	<META NAME="description" CONTENT="Сайт содержит информацию для любителей старинных автомобилей, на нем вы можете найти описание с фотографиями редких и эксклюзивных автомобилей">	Самый широко используемый тег. Практически все поисковые системы учитывают его при индексации. Значение этого тега очень важно для раскрутки сайта, практически все поисковые системы опираются на этот  тег и выводят содержимое этого тега в результатах поиска (Google).
Keywords	Список ключевых слов, как правило, через запятую, соответствующих содержимому Вашего сайта. Это те слова, которые ваши клиенты могут использовать в поисковом запросе. Здесь также рекомендуется ограничиться списком до 30 слов. Можно поместить и наиболее частые опечатки ключевых слов. Также вы можете здесь записать и английские слова, соответствующие содержимому сайта.	<META NAME="keywords" CONTENT="реклама, дизайн, полиграфия">	Учитывается большинством поисковых систем.
Author	Автор, создатель сайта. Вряд ли используется поисковыми системами, и нужен скорее всего чтобы можно было показать что сайт сделан именно определенной персоной или фирмой.	<META NAME="AUTHOR" CONTENT="www.neo-systems.ru">

К группе метатегов относят и не имеющие обозначения "meta" стандартные теги и некоторые атрибуты web-документов:

• <title>...</title> . Название документа (сайта, раздела, страницы). Допускается использование от 60 до 100 символов.
• <img src=“”...alt="..."> . Подписи к графическим элементам.

Откройте форму "Теги META" и выполните задание.

Также рекомендую вам статью "Десять SEO-ошибок":

Тест для 2 группы 11Б класса

Тест "Основы HTML-2"

Цвета в web-дизайне

Пройдите курс "Основы CSS" на сайте HtmlAcademy.

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

Цветовая теория: основные принципы. Умение сочетать цвета

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

Рассмотрим цветовой круг.

Цветовой круг является непременным атрибутом многих дизайнеров и художников по всему миру. Это идеальное доказательства теории, что гениальное всегда просто. Круг позволяет вам выбрать цвета, которые гармонировали бы вместе. Он состоит из 6 основных цветов: красный, оранжевый, желтый, зеленый, синий, фиолетовый и дополнительных цветов.

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

Основные цвета

Есть три основных цвета: красный (# ff0000 в HTML или # F00 в CSS), желтый (# FFFF00 в HTML или # ff0 в CSS) и голубой (# 0000FF в HTML или # 00f в CSS). Нельзя их получить путем смешивания других цветов. Дополнительные цвета могут быть сформированы путем объединения этих трех цветов.

Составные цвета

Есть также три основных: оранжевый (# ff9900 в HTML или # F90 в CSS), зеленый (# 00FF00 в HTML или # 0f0 в CSS) и фиолетовый (# FF00FF в HTML или # f0f в CSS). Вы можете получить их путем смешивания красного и желтого(оранжевого), желтого и синего (зеленый) и синего и красного (фиолетовый).

Третичные цвета

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

Дополнительные цвета

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

Аналогичные цвета

Эти цвета расположены рядом друг с другом на цветовом круге. Они обычно смотрят очень хорошо вместе. Использование таких цветовых сочетаний вызывает чувство комфортa у посетителей Вашего сайта.

Значение цветов

Давайте посмотрим, какие чувства может вызвать каждый цвет и посмотрим на некоторые готовые решения.

Красный

В основном связан с азартом, смелостью и желанием. Красный цвет любви, силы, энергии, лидерства и волнения. Это сильный цвет, и вы должны знать о некоторых его негативных эмоциях: опасность, тревога.

Голубой

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

Желтый

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

Оранжевый

Бодрость и творчество. Ассоциируется с дружелюбием, уверенностью, игривостью, мужеством, стойкостью.

Фиолетовый

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

Зеленый

Цвет гармонии, природы, исцеления, жизни, питания и здоровья. Кроме того, часто связан с деньгами.

Коричневый.

Цвет релаксации и уверенности. Коричневый означает приземленность, природу, долговечность, комфорт, надежность.

Серый

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

Розовый

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

Черный

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

Белый

Белый связан с чистотой, простотой, свежестью, добротой, невинностью.

Если вы хотите, чтобы текстовое содержимое было легко читаемым, выбирайте контрастные цвета.

Оптимальное количество цветов. Не делайте из вашего сайта цирк.

Используйте необходимое количество цветов. Минимальное количество цветов может способствовать серости вашего сайта.

Если вам нужно привлечь посетителя, применяйте интенсивные цвета.

Тест на цветовосприятие:

http://xritephoto.com/cool-tools

Полезные ссылки по теме:

en.wikipedia.org/wiki/Color_theory

joehallock.com/edu/COM498/index.html

www.sibagraphics.com/colour.php

www.bwwsociety.org/feature/color.htm

colortheory.liquisoft.com

webdesign.about.com/od/color/Designing_With_Color.htm

www.webdesign.org/web-design-basics/color-theory

Проектирование структуры сайта

Результаты практической работы "Создание веб-страницы с табличной структурой":

Фамилия, имя	Оценка
Мельник, Лыжин, Бесценный	9
Панченко, Дубохвост, Савчук	9
Сытник	8
Шамаева	8
Щербина, Лисовская	9

Результаты практической работы "Сайт "Гороскоп":

Фамилия, имя	Оценка
Олейник, Билык	7
Момот, Школьная, Коваль	6
Юдин, Матвиенко	10
Клемятин, Сушкевич	9
Хайрович, Петрова	7
Гольская	11
Святощук Иванченко	8

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

Внутренняя и внешняя структура

Структуризация представляемой на сайте информации выполняется на двух уровнях: внутреннем и внешнем.

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

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

Типовые структуры

Линейная структура

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

Иерархия

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

«Паутина»

«Паутина» — это структура, практически идентичная концепции сервиса WWW, но в масштабах отдельно взятого сайта. Она основана на установлении таких связей между страницами, которые позволяют быстро перемещаться между ними, минуя какие-либо промежуточные страницы (стартовую или страницы разделов). Подобная структура избыточна, управление ей сильно затрудняется с ростом числа страниц, а пользователь может элементарно «увязнуть» на страницах такого сайта.

Решетка

БОльший порядок на сайте можно навести, если установить связи между страницами по принципу «решетки» 

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

Приведем концептуальный пример гибридной структуры сайта. На всех страницах имеется ссылка на стартовую страницу (т.н. «сквозная ссылка»). Страницы нижнего уровня ссылаются на страницу раздела и, линейно, на соседние тематические страницы. Страницы разделов связаны между собой и ссылаются на тематические страницы нижележащего уровня. Исходящие ссылки с главной страницы ведут на разделы и, возможно, на целевые страницы.

Есть одно «но» - какая-бы структура сайта не закладывалась на этапе проектирования, реальность вносит свои коррективы.

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