|
Читайте также: |
Ретро стиль взят из эпохи 50-80 годов с афиш, плакатов и прочей атрибутики того времени. Довольно часто дизайнеры, вдохновившись такой работой, рисуют сайт в ретро стиле. К популярным элементам оформления можно отнести:
1. Использование текстур (в частности, бумаги во всех её видах — типографская, рваная, пожелтевшая — или текстур, похожих на бумагу), а также использование всевозможных потертостей для придания старины;
2. Декоративные элементы (рамочки, узоры, флажки, ленточки, линии — двойные, тройные);
3. Ретро-цвета (не сочные, а приглушенные);
4. Характерная замысловатая типографика (шрифты плакатного типа).
Сайты Von Dutch, Kinder Forografie, Alex Peirce, Web Design Yorkshire, Rodolphe Célestin, Teixido отлично демонстрируют применение ретро стиля в дизайне.
Последнее, на чем хотелось бы остановиться, обсуждая тему основных направлений web-дизайна, — это характерные элементы, присутствующие на сайтах в 2013 году.
Не такая уж новая тенденция, но также достаточно распространенная в сегодняшней web среде — параллакс. Параллакс создает ощущение глубины сайта, благодаря чему возникает иллюзия трехмерного пространства: Spokes, iUtopi, Minerva. Подобный эффект достигается за счет движения нескольких слоев относительно друг друга с разной скоростью.
Фиксированное меню, является следствием распространения сайтов с вертикальным скроллингом: дизайнеры поняли, что пользователю будет неудобно каждый раз возвращаться вверх, чтоб перейти в другой раздел или совершить какие-либо ключевые действия. Именно поэтому основное меню стали закреплять сверху, на всем протяжении скроллинга по сайту. Кроме меню, фиксируются главные элементы сайта (например, в случае интернет магазина таким элементом будет корзина). Подобное меню использовано на сайтах Eyal Shahar, Engage Interactive и Ryan Scherf.
Полноразмерные фото и видео в качестве фона, в основном, оказывают wow-эффект, который привлекает внимание посетителя сайта: Fifty Three, thinkLuke.
Рассматривая видео на заднем фоне, пользователь может заинтересоваться и продолжить работу с сайтом: MediaBoom, Orange.com, The Power Inside.
Крупная дизайнерская типографика. Не так давно технологии еще не позволяли широко использовать нестандартные шрифты, и большинство сайтов ограничивалось Ариалом, Тахомой и Требушетом. C появлением шрифтов от Google, арсенал web-дизайнеров пополнился примерно на 30 шрифтов, которые оптимизировал сам Google, и которые, при желании, можно легко подключить к своему сайту. Однако времена меняются. Современные методы верстки позволяют подключить практически любой нестандартный шрифт. Причем шрифтовые сочетания используются как в виде шрифтов, так и в виде красиво нарисованных картинок. Примеры активного использования нестандартных шрифтов можно наблюдать здесь: Amazee Labs, Denise Chandler, Ryan Scherf.
Еще одна из тенденций, перешедших на web с мобильных устройств — большие кнопки интерфейса. «Нажатие и касание» среди различных гаджетов становится всё более и более популярным, именно поэтому большие кнопки «перебираются» в web-дизайн. Хотя огромные кнопки делают нажатие гораздо легче, они связаны с большим количеством графики, которая замедляет скорость загрузки страницы, поэтому сайтостроителям приходится искать пути решения своих задумок без потери качества картинки и скорости загрузки сайта. К использованию больших кнопок активно обращаются УльтраКлиника, The Online Gift Card, Precomposed Touch Gestured, KULT Studio, Simbolicons.
Ненавязчивые фоны. В 2013 году web-дизайнеры стали уделять большое внимание фону сайта, в частности, всевозможным текстурам: они минимальны и ненавязчивы с одной стороны, с другой причудливы. Примеры использования ненавязчивых фонов можете посмотреть на следующих сайтах: Mangrove, Teixido, 5Tailors.
QR-коды. Еще один элемент, перекочевавший из мобильной сферы в сферу web. Хотя не только в неё: сейчас эти коды можно видеть повсюду, в том числе и на сайтах. Основная функция кода — привлечь внимание посетителя.
Анимация с использованием CSS 3 и HTML 5. Теперь, с развитием данных технологий, дизайнеры могут с легкостью делать разные эффекты: деформация, перетекание, раскрытие, плоскости и многие другие, и творческий народ активно этим пользуется. В сети есть множество сайтов, на которых уже выложены готовые решения анимации с предпросмотром и кодом для вставки в свой сайт. Если хотите посмотреть, как выглядит анимация с использованием CSS 3 и HTML 5, вам сюда: WWF, Rule of Three, Inception, InTacto10, RailUp, Agent 008 Ball.
В заключение хотелось бы сказать о том, что влияние мобильных устройств на web-индустрию, безусловно, продолжится: с развитием интернет технологий появятся еще более интересные инструменты, которые дизайнеры активно будут применять. Но уже сейчас существующий набор инструментов позволяет дизайнерам создавать поистине уникальные и ни на что не похожие web-шедевры, привлекающие внимание тысяч пользователей.
Вопрос 26.Основы HTML
HTML представляет собой язык разметки гипертекста, который предназначен для создания веб-страниц. Когда такая страница открывается в браузере, он просматривает код HTML, находит специальные символы, называемые тегами, и использует их для создания элементов, таких как: рисунки, таблицы, ссылки и др.
Основные понятия
HTML (HyperText Markup Language) - язык разметки гипертекста - предназначен для создания Web-страниц.
Под гипертекстом в этом случае понимается текст, связанный с другими текстами указателями-ссылками.
HTML представляет собой достаточно простой набор кодов, которые описывают структуру документа. HTML позволяет выделить в тексте отдельные логические части (заголовки, абзацы, списки и т.д.), поместить на Web-страницу подготовленную фотографию или картинку, организовать на странице ссылки для связи с другими документами.
HTML не задает конкретные и точные атрибуты форматирования документа. Конкретный вид документа окончательно определяет только программа-броузер на компьютере пользователя Интернета.
HTML также не является языком программирования, но web-страницы могут включать в себя встроенные программы-скрипты на языках Javascript и Visual Basic Script и программы-апплеты на языке Java.
Даже, если вы не собираетесь в дальнейшем редактировать "вручную" текст HTML (предполагая использовать графические редакторы), знание языка HTML даст вам возможность как лучше использовать эти средства, так и увеличит ваши шансы сделать HTML-документ более доступным и "читаемым" при просмотре броузерами разных фирм.
Основными компонентами HTML являются:
Теги представляют собой зарезервированные последовательности символов, начинающиеся с < (знака меньше) и заканчивающиеся > (знаком больше).
Закрытие тега отличается от открытия только наличием символа '/'.
Предположим, у нас есть гипотетический атрибут форматирования текста, управляемый кодом <X>, и мы хотим применить его к словам "Это мой текст".
HTML-последовательность кодов и собственно текста будет выглядеть так:
Теги могут вкладываться друг в друга иерархически, но без пересечений, то есть допустимо вложение вида <teg1> <teg2></teg2> </teg1>, но не <teg1> <teg2> </teg1> </teg2>.
Действие вложенных тагов объединяется.Например, если внутрь тега, создающего жирное начертание шрифта, вложен тег курсива, то в результате получится жирный курсив.
Дата добавления: 2014-12-19; просмотров: 52 | Поможем написать вашу работу | Нарушение авторских прав |