LOGO ГУО «Гимназия № 39 г. Минска» ВЕБ-ДИЗАЙН Артюхова Инна Петровна, учитель информатики
Структура макета на все случаи жизни 1 Поля. Со всех четырех сторон задайте просторные поля 2 Колонки. Установите границы колонок 3 Визуальный объект. Разместите визуальный объект в самом верху страницы 4 Подрисуночная подпись. Расположите под визуальным объектом подпись, если она нужна 5 Заголовок. Разместите заголовок подрисуночной подписью 6 Текст. Вставьте текст в колонки под заголовком 7 Теги. Если необходимо, поместите информацию о фирме (логотип, контактную информацию) в правом нижнем углу
Грехи верстки: 13 основных ошибок 1. Все, что мигает. 2. Деформированные фото. 3. Открытые фото. 4. Громоздкие границы и рамки. 5. Зажатые поля. 6. Центрирование всего и вся. 7. Объекты во всех четырех углах. 8. Заблокированное отрицательное пространство. 9. Перегруженный фон. 10. Издевательства над шрифтом. 11. Неудачные буллиты. 12. Висячие строки. 13. Коридоры.
5 ШАГОВ К ВИЗУАЛЬНОМУ УСПЕХУ 1. Определите фокусную точку. 2. Сведите к минимуму количество блоков на странице. Вместо того, чтобы загромождать углы деталями, сгруппируйте их в четыре блока: иллюстрация и заголовок; маркированный список; текст; теги. 3. Дайте читателю визуальные ориентиры. 4. Правильно используйте шрифты. 5. Следуйте девизу «простота и сдержанность» .
Правила по выбору правильных шрифтов 1. Использование безопасных веб-шрифтов: v Arial Black v Arial v Comic Sans MS v Courier New v Georgia v Impact v Times New Roman v Trebuchet MS v Verdana
Правила по выбору правильных шрифтов 2. Использование шрифтов с засечками или без засечек для основного текста и заголовка. Для заголовков: 60 % - используют шрифты без засечек. В основном Arial, Verdana, Lucida Grande, Helvetica. Самые популярные шрифты с засечками Georgia и Baskerville Самые популярные шрифты без засечек Arial (28%), Helvetica (20%) и Verdana (8%). Для основного текста: Лишь 34% сайтов используют шрифт с засечками для основного текста. Самые популярные шрифты с засечками для основного текста являются Georgia (32%) и Times New Roman (4%). Самые популярные шрифты без засечек для основного текста являются Arial (28%), Verdana (20%) и Lucida Grande (10%). В основном дизайнеры продолжают использовать шрифты без засечек, потому что больше выбора этих шрифтов безопасных для веб.
Правила по выбору правильных шрифтов 3. Использование шрифта достаточно большого размера. Все больше используется больший размер шрифта. Популярнее всего размеры - 12 -14 пикселей. Самый популярный 13 пикселей. Пристальное внимание уделяется деталям - тире, кавычки, сноски, вводный текст, пункты, достаточно много пустого пространства и отбивка.
Выбор и использование цвета Цвет оказывает визуальное воздействие Цвет организует Цвет вызывает эмоции СИЛА ЦВЕТА: ВОЗДЕЙСТВИЕ, ОРГАНИЗАЦИЯ И ЭМОЦИИ
Выбор и использование цвета ТЕОРИЯ ЦВЕТА v Цвет - это свет, наблюдаем ли мы его как свет от наших мониторов или как отраженный свет на запечатанной поверхности, например на бумаге. v С технической точки зрения - возможно, это покажется парадоксом, - белый представляет собой смешение всех цветов видимой человеческому глазу части спектра, а черный - это отсутствие любого света, а значит, и цвета.
Классификация Первичные цвета. Это желтый, красный и синий. Вторичные и дополнительные цвета. Можно получить смешивая два первичных цвета. Если смешать желтый и синий, получится зеленый, расположенный на колесе между желтым и синим. Если смешать синий и красный, получится пурпурный, расположенный на колесе между синим и красным. Первичный Вторичный Дополнительные Желтый + Синий = Зеленый Красный и зеленый Синий + Красный = Фиолетовый Желтый и пурпурный Красный + Желтый = Оранжевый Синий и оранжевый
Температура цвета Теплее, теплее. . . Один и тот же дизайн реализован в теплой (слева) и холодной цветовой гамме (справа). Какой из них заметнее? Какой дизайн предпочли бы вы?
СОВЕТЫ ПО РАБОТЕ С ЦВЕТОМ 1. Черпайте вдохновение из природы, культуры, истории и цветового колеса. 2. Помните о первичных и дополнительных цветах. 3. Для яркости или интенсивности берите чистые насыщенные оттенки. 4. Для получения пастельных оттенков «разводите» краску белым. 5. Для получения более мрачных оттенков «разводите» краску черным. 6. Для соблюдения единства выбирайте аналогичные цвета на колесе и цвета одинаковой насыщенности и яркости. 7. Три основных «языка» работы с цветом - это: • СМУК, образующий цвет при наложении отдельных слоев (полноцветная печать); • Paпtone (PMS) - система подбора плашечных красок, в которой используется цифровая идентификация цветов; • RGB - система аддитивного цветообразования, передает цвета на экране в шестнадцатеричном представлении. 8. Работая с цветом: • не злоупотребляйте одной и той же палитрой – дополнительной, аналогичной или монохромной; • дизайн должен быть заметным и удобочитаемым; • используйте цветовые пятна для визуального выделения.
