Основные понятия Web-дизайна. Термин Web-дизайн состоит из двух частей. Первая часть - Web - это сокращенное написание слов World Wide Web - Всемирная. - презентация

1 Основные понятия Web-дизайна

2 Термин Web-дизайн состоит из двух частей. Первая часть - Web - это сокращенное написание слов World Wide Web - Всемирная Паутина. Вторая часть термина - слово "дизайн" - происходит от английского слова design, что означает: проектировать, конструировать, планировать, чертить, создавать рисунок. Таким образом, предварительный перевод термина Web- design с английского языка на русский язык может быть таким: "проектирование для Интернета".

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

4 Web-дизайн - новый жанр изобразительного искусства, основанный на применении специфических инструментов (компьютера и программ-редакторов), специальных языков программирования (HTML, JavaScript, Java, Perl, C++, PHP и др.) и сетевых технологий (CGI, CSS, SSI и др.). Целью Целью Web-дизайна является проектирование (создание) объектов (Web-страниц, баннеров, апплетов, скриптов, отдельных элементов Web- страниц), размещаемых в Интернете.

5 Web-дизайнер Web-дизайнер – художник- программист, занимающийся Web-дизайном. Начинающие Web-дизайнеры (любители) размещают на своих домашних страничках собственные произведения, результаты научных исследований, фотографии, основные сведения о себе, о своих увлечениях и т. п. Более квалифицированные дизайнеры создают сайты, посвященные некоммерческим организациям: учебным заведениям, добровольным объединениям, политическим партиям, любимым спортивным командам и музыкальным группам. Профессиональные Web-дизайнеры разрабатывают коммерческие проекты, приносящие прибыль: виртуальные магазины, поисковые системы, каталоги, информационные сайты.

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

7 Основной задачей Основной задачей профессиональных Web- дизайнеров является привлечение большого числа посетителей на созданный ими сайт. Эспособствует Э тому способствует единство художественного оформления сайта и его предметного содержания. раскрутить Не последнюю роль в создании популярности играет умение " раскрутить " сайт.

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

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

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

11 Человеческий глаз воспринимает: красный, оранжевый, желтый цвета (и их оттенки) как теплые. синий, фиолетовый цвета и их оттенки воспринимаются человеком как холодные. Это связано с тем, что солнце и огонь содержат красные и желтые цвета, а снег, лед - голубые и синие цвета. Теплые тона на рисунке обладают свойством "приближаться", а холодные - "удаляться". Т.Е. предметы, нарисованные теплыми тонами, будут казаться расположенными ближе предметов, изображенных холодными тонами.

12 Рекомендации по созданию Web-сайта: Целесообразно не перегружать страницу большим числом деталей, т.к. человек за короткое время способен воспринять и запомнить не более 7-8 объектов. Чем меньше размер объекта, тем больше должна быть его контрастность. Четко выраженный фоновый рисунок на Web-странице повышает утомляемость глаз и снижает эффективность восприятия текста. Страницу рекомендуется создавать с использованием не более четырех основных цветов. На всех страницах одного сайта рекомендуется использовать одинаковые панели навигации, размещенные в одинаковых местах. Каждая Web-страница сайта должна иметь ссылку на главную страницу сайта В конце проектирования необходимо проверить работоспособность всех сделанных гиперссылок. Завершая проектирование, необходимо просмотреть его с помощью различных браузеров.

13 Оценка допустимого объема Web-страницы Считая, что предельно допустимое время ожидания загрузки Web-страницы составляет секунд, а средняя скорость поступления информации по коммутируемому каналу Кбит/с, получаем желательный объем проектируемой Web- страницы Кбит или 37,5-100 Кбайт.

14 Классификация сайтов 1. Сайт-визитка 1. Сайт-визитка состоит из нескольких страниц и имеет простой и функциональный дизайн; подходит для компаний, которые хотят разместить информацию о себе и своих услугах в Интернете; основные разделы сайта: «О компании», «Продукция или услуги», «Прайс-листы», «Контактная информация»; используется предприятиями, организациями и частными лицами.

15 Классификация сайтов 2. Корпоративный информационный сайт необходим для автоматизации внутреннего документооборота, учёта показателей компании, управления персоналом; может быть оснащён функциями обмена информацией между удалёнными филиалами; корпоративный сайт позитивно влияет на репутацию и имидж компании; дизайн должен соответствовать фирменному стилю компании; чаще всего, включает «администраторскую часть» для создания и изменения контента; используется минимум графики, основной упор идет на текст.

16 Классификация сайтов 3. Корпоративный имиджевый сайт 3. Корпоративный имиджевый сайт – подходит для обеспечения имиджевого присутствия в Сети предоставляет подробную информации о компании, истории торговой марки, сведений об оказываемых услугах или поставляемых товарах; содержит ленту новостей компании, средства публикации информации о рекламных и торговых акциях, информацию для прессы и другие сведения; может содержать каталог продукции; используется эксклюзивный оригинальный дизайн; используются нестандартные идеи в оформлении, процентное соотношение текст/графика = 50/50

17 Классификация сайтов 4. Интернет-магазин Рекламирует товар или услугу, Принимает заказы на покупку, Предлагает пользователю выбор варианта расчета, Выписывает счет на оплату, служащий одновременно подтверждением заказа; Администратор магазина обязан: o организовать доставку товара; o проконтролировать расчеты с покупателем за поставку.

18 Классификация сайтов 5. Информационный сайт Большой виртуальный массив информации Включает тематические разделы меньшего размера Может содержать некоторое количество самостоятельных проектов Является для клиента основным источником информации Напоминает энциклопедию или специализированный журнал

19 Классификация сайтов 6. Игровой портал 6. Игровой портал – сложный развлекательный интерактивный проект, предусматривающий большую посещаемость и ресурсоемкость. 7. Персональный проект 7. Персональный проект – личный проект, содержит все, что угодно и оформляется в любом стиле. 8. Контент-проект 8. Контент-проект – как правило, некоммерческой направленности представляет собой собрание текстов, статей и прочих материалов основная задача– привлечение посетителей по определенной тематике обычно перенаправляется на коммерческие сайты и используется как рекламная площадка.

20 Классификация сайтов 9. Промо-сайт 9. Промо-сайт – создается специально для продвижения какого-либо товара либо услуги или основного сайта компании. 10. Сайт-форум 10. Сайт-форум может быть самостоятельным сайтом, а может быть разделом сайта. 11. Блог 11. Блог – представляет собой интернет-дневник, на каждую тему блога посетители могут оставлять свои комментарии- сообщения, доступные с главной страницы соответствующей темы. Обычно очень часто обновляется, поэтому намного чаще индексируется поисковыми машинами, чем обычные сайты.

21 сайта Логическая и физическая структура сайта Cсылки на все разделы сайта с краткими анонсами их содержимого приводится на первой, так называемой стартовой странице, которой присваивается имя index.htm (.html). Если тематические рубрики содержат собственные подразделы, каждая из них также имеет свою стартовую страницу, называющуюся index.html. Набор тематических рубрик с распределенными и заранее спроектированными гиперсвязями между всеми страницами ресурса логической структурой сайта.

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

23 сайта Логическая и физическая структура сайта При создании физической структуры следует соблюдать несколько простых правил. Назначайте имена директорий, имена и расширения документов HTML и графических файлов с использованием символов только латинского алфавита и только в строчном регистре. Старайтесь, чтобы имена созданных файлов и директорий не превышали по длине восьми символов. При присвоении имен файлов документам HTML следите за тем, чтобы эти имена были "смысловыми«. Будет затруднительно работать с именами файлов l.htm, 2.htm, 3. htm и т. д. Для облегчения процесса обновления страниц, дополнения разделов или создания новых рубрик, заведите средство документирования проекта ( в Microsoft Excel, или просто разграфленную тетрадку, в ней записывайте соответствие элементов физической структуры вашего проекта его логической структуре).

24 Пример оформления средства документирования проекта

25 Заглавная страница Наличие заглавной страницы (splash) или ее отсутствие - один из критериев, по которому делятся сайты на две основные категории. Заглавная страница – это html-документ, который не включает в себя какую-либо содержательную информацию и элементы навигации. Файлу заглавной страницы присваивается имя index.html, при этом стартовая страница называется иначе и вызывается посредством организации гиперссылки с заглавной страницы, загружающейся при обращении к сайту первой. Заглавная страница содержит обычно логотип компании- владельца ресурса, счетчик посещений и предложение выбора кодировки кириллицы или выбора между английской и русской версиями сайта. Пример web-ресурса, оснащенного такой страницей, показан на рис.

26 Пример сайта с заглавной страницей

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

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

29 Верстка веб-страницы. Ширина документа Изначально разработчику сайта ширина окна браузера пользователя неизвестна, поскольку она может меняться в самых широких пределах. Ширина зависит от разрешения монитора, длины его диагонали, размера окна и еще некоторых варьируемых данных. Предугадать ширину заранее простыми средствами не представляется возможным. С учетом этой особенности утвердилось два способа верстки: фиксированный и «резиновый».

30 Верстка страницы. Фиксированный макет Ширина макета жестко задана и равна определенной величине. При ширине монитора в 800 пикс. общая ширина макета за вычетом вертикальной полосы прокрутки и рамки браузера будет 770–790 пикселов. Преимущество: можно легко подгонять под ширину дизайн и делать изображения уже известной ширины. Подобная верстка приближается к верстке печатного буклета, за счет чего частично упрощается. Недостаток: недостаточно эффективное использование свободной площади (для монитора с большо-о-о-й диагональю или высоким разрешением экрана документ будет смотреться по-другому, чем на предполагаемых 800 пикселах.) На рис. показано, как выглядит макет в таком случае.

31 Верстка страницы. Фиксированный макет

32 Верстка страницы. «Резиновый» макет В качестве одной из единиц измерения выступают проценты. Общая рабочая ширина окна браузера 100%, и колонки макета в сумме не должны ее превышать, Для удобства, как правило, везде применяют процентную запись. При изменении размеров окна происходит переформатирование данных страницы, чтобы они вписались в новую ширину.

33 Верстка страницы. «Резиновый» макет Недостатки: При достижении некоторой величины читать текст неудобно строки слишком длинные и глаза устают по ним бегать. Верстать «резиновый» макет сложнее, чем аналогичный фиксированной ширины. Популярные браузеры неоднозначно трактуют некоторые параметры такого макета. Любой макет имеет некоторую минимальную ширину, при достижении которой веб-страница «рассыпается» или появляется горизонтальная полоса прокрутки. Например, при рисунке шириной 600 пикселов при уменьшении окна до этой величины браузер начнет отображать полосу прокрутки. «Резиновый» дизайн характеризуется активным использованием фоновых изображений, которые по горизонтали собираются без швов встык. Изменить без потери качества ширину рисунков не получится, а вот «подложить» под них фон всегда пожалуйста.

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

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

36 Верстка веб-страницы Активное использование рисунков Рисунки не только применяются для иллюстрации текста, но и выполняют на сайте много различных ролей, например, используются для создания привлекательного дизайна, служат распоркой между ячейками таблицы, создают градиентные заливки, фоновые изображения и т.д. Разрезание изображения на фрагменты Рисунок может занимать слишком большую исходную площадь. Разрезав его на прямоугольники, получим замечательный конструктор, в котором одни фрагменты изображения допускается заменять текстом, другие анимацией, а третьи модифицировать «на лету». Таким образом, имеем в своем распоряжении средство для обхода прямоугольной природы изображений.

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

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

39

40 Одноколонная сетка Текст в одну колонку чаще всего встречается в академическом дизайне, при фиксированном макете и публикации большого текста Как правило, наблюдается четыре основных блока заголовок страницы, набор ссылок на другие страницы сайта (навигация), собственно сам текст и в самом низу контактная информация. Если высота страницы достаточно велика, то блок навигации дублируют внизу или делают ссылку «Наверх», которая перемещает к началу документа.

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

42 Модульная сетка для сайта victoriassecret.com: Вначале идет заголовок сайта с формой поиска, ниже следует навигация, а отдельные фотографии представляют собой саморекламу со ссылками на соответствующие разделы сайта. В самом низу расположены ссылки на информацию о сайте.

43 Двухколонная сетка - Один из самых распространенных вариантов при использовании на сайтах. - При данной модульной сетке используется две колонки одна отводится под основной текст, а вторая используется для навигации и другой полезной информации.

44 Удобны при создании самых разнообразных сайтов и не требуют особых знаний по верстке веб-страниц. Единственный недостаток - сайты выглядят достаточно однообразно. Но с другой стороны пользователям удобнее работать с сайтом привычного вида, без лишних «наворотов». Принципиального значения не имеет, слева или справа располагается колонка с навигацией, встречается и тот и другой вариант. Двухколонная сетка

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

46 Трехколонная сетка обеспечивает больше простора для дизайна, ведь в некоторых местах можно объединять колонки, разбивать материал на отдельные фрагменты и визуально отделять один блок от другого. Макет при этом может получиться достаточно сложным, но результат обычно того стоит. Трехколонная сетка

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

48 Принципы компоновки web-сайта Чтобы избежать "съезжания" элементов html-документа друг относительно друга и, как следствие, деформации web-страницы в целом при изменении параметров экрана, применяется достаточно простой и действенный прием: все компоненты web-страницы заключаются в соответствующие ячейки невидимой таблицы, при этом каждому объекту назначается одно, строго определенное положение. Таким образом, появляется второй критерий, по которому можно разделить все существующие web-сайты на две условные категории. Такой вариант компоновки сайта можно назвать СТАТИЧЕСКИМ, поскольку ширина таблицы не меняется в зависимости от экранного разрешения.

49 Принципы компоновки web-сайта. Статическая компоновка страницы Достоинства. Простота алгоритма верстки документа. Оптимизировав страницу для отображения с экранным разрешением 640x480 точек, вы можете быть уверены, что при изменении пользовательских экранных настроек элементы дизайна не "поплывут". Кроме того, данный вариант компоновки сайта в большинстве случаев (при соблюдении ряда дополнительных условий) позволяет добиться идентичности отображения html-документа в разных браузерах. Недостатки. При отображении документа на компьютере с высоким экранным разрешением по краям экрана или с правой его стороны остается заметное пустое поле.

50 Принципы компоновки web-сайта. Статическая компоновка страницы

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