USE - Урок 01 (2015)

Юзабилити
и эргономика веб-страниц
Урок 1
Основы веб-дизайна
История и развитие веб-дизайна

Профессия веб-дизайнера
Процесс разработки сайта
Содержание
Введение . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .3
Краткая история и развитие Интернет и WWW . . . . . . .4
История и развитие веб‑дизайна . . . . . . . . . . . . . . . .9
Тренды развития веб-дизайна . . . . . . . . . . . . . 16
Профессия веб-дизайнера . . . . . . . . . . . . . . . . . . . 27
Процесс разработки сайта . . . . . . . . . . . . . . . . . . . 32
Урок 1 Основы веб-дизайна

Юзабилити и эргономика веб-страниц
Введение
Зная HTML и CSS — языки и технологии, с
которыми вы знакомитесь в курсе «Создание
статичных веб-страниц с помощью XHTML
и CSS», вы сможете создавать веб-страницы.
Достаточно ли этих навыков, чтобы счи-
таться веб-дизайнером и начинать професси-
ональную карьеру? Уверен, многие уже сейчас
задаются этим вопросом. Также, уверен, что
практически все могут сказать, что, конечно,
нет.
Но, тогда, возникает встречный вопрос:
«А что же нужно еще?» Вот с ответом на этот
и многие другие вопросы, мы и попробуем
разобраться в сегодняшнем уроке.
Введение
Как правильно – web или веб?
ядерную бомбу в любую точку Слово web, конечно же, английского про-
исхождения и означает «паутина». Та самая,
планеты через космос. которую плетет паук. Тем не менее, за годы
Такая система была постро- существования, это слов настолько прочно
вошло во все языки мира как имя собствен-
ена в 1969 году. Представляла ное, что нет никаких оснований не исполь-
она собой компьютерную про- зовать его русскую транслитерацию – веб.
Краткая история водную сеть, по которой мож- То же касается и термина Интернет. Впол-
не можно использовать его транслитера-
и развитие Интернет и WWW но передавать сигнал от одного
компьютера к другому. Эта сеть
цию (то есть написание по-русски), но с
большой буквы.
Для начала давайте разберемся с самим назва- получила название ARPANET.

нием — веб-дизайн, т.е., по сути, дизайн для Это – дедушка современной сети
web. Иными словами — это технологии, по- Интернет.
зволяющие оформлять, определять внешний Отличительная особенность
вид веб-страниц. этой сети в том, что она децен-
Вот тут, наверное, сразу возникает вопрос: трализована. Т.е. она способна
«А что такое веб?». А я сформулирую еще один: работать даже, если будет ча-
«А чем отличается веб (web) от интернета?». стично уничтожена, поскольку
Вот с этим и разберемся в первую очередь. каждый её узел равноправен.
Начать придется издалека. С 1957 года. В Далее эта сеть росла чрез-
1957 году в СССР был запущен искусственный вычайно быстрыми темпами и в Первый советский спутник
спутник Земли. середине 1970-х годов перешаг-
Это событие побудило Министерство нула через океан в Европу. Тем
Обороны США разработать и построить на- не менее, подчеркну, в то время
циональную систему оповещения о военной это была, прежде всего, военная
угрозе, поскольку, запустив спутник, СССР сеть, которая использовалась в
продемонстрировал способность доставить основном правительственными
и научными организациями в
Джозеф Линклайдер – один из главных теоре-

тиков разработки и построения ARPANET
Краткая история и развитие Интернет и WWW
разных странах. Хотя курировало деятель-
ность этой сети, все же, правительство США.
Ни о каких сайтах, интернет-торговле и т.д.
речь, конечно же, не шла и близко. Самым
«гражданским» способом применения сети
(сервисом сети) была электронная почта.
В начале 1980-х годов сеть претерпела ряд
технических изменений. В частности появи-
лись понятия IP-адрес, сервер, хост и т.д. К
Сеть ARPANET в 1969 году
этому времени, создатели сети – Министер- всем то, что сейчас. Во-первых персональное (слева) и пять лет спустя,
ство Обороны США — увидев её «живучесть» присутствие человека в сети было делом весь- в 1974 году (справа)
и эффективность, «отгородили» сегмент сети ма непростым, поэтому, по-прежнему, Ин-

для своих потребностей, оставив большую тернет использовался в те годы в научных це-
часть сети различным научным и учебным ор- лях, ну или, максимум, в интересах крупного
ганизациям: институтам, лабораториям и т.д. бизнеса. Это использование базировалось, в
За короткий период, по технологии ARPANET основном, на электронной почте и прямом об-
эти организации построили несколько десят- мене файлами, хотя в это время уже начинают
ков изолированных друг от друга сетей и заня- появляться такие вещи как доски объявлений,
лись исследованиями в области эксплуатации группы новостей и т.д.
и использования возможностей сетей. Последним важнейшим этапом стало по-
Но ближе к концу 1980-х начался период явление веба. Веб или, другими словами, Все-
объединения всех этих сетей в некую глобаль- мирная Паутина младше, чем Интернет на 20
ную мировую сеть. Эта сеть получила назва- лет. Веб – это один из сервисов сети Интер-
ние Internet, что означает, фактически, «сеть нет, т.е один из способов её использования.
сетей» или всемирная глобальная сеть. Важно На рубеже 1980-х и 1990-х годов в круп-
понимать, что Интернет 1989 года – это не со- нейшем научном учреждении Европы CERN

(«Conseil Européen pour la Recherche Nucléaire», Вот список основных понятий, кото-
«Европейский совет по ядерным исследова- рые были созданы и разработаны Тимом
ниям», Женева, Швейцария) возникла вполне Бернерсом-Ли, и которые легли в основу со-
банальная по нынешним временам идея – соз- временной WWW:
дать Единое Информационное Пространство
для обмена научной информацией. Нужно ◆◆ HTML – Hyper Text Markup Language
было упорядочить все научные наработки и (Язык гипертекстовой разметки). Этот
связать их в единую сеть. Это задачей занялся язык вы изучаете параллельно с нашим
сотрудник CERN англичанин Тим Бернерс-Ли. курсом.
В течении 2-х лет с 1989 по 1991 год Тим ◆◆ HTTP – Hyper Text Transport Protocol Тим Бернерс-Ли
Бернерс-Ли разработал концепцию Всемирной (Протокол передачи гипертекста). Набор
Паутины и, фактически, построил её фунда- принципов, по которым гипертекстовый
мент. документ «путешествует» по сети Интер-
Концепция World Wide Web («Всемирная нет от пользователя к пользователю.
Паутина») состоит в том, что любая информа- ◆◆ Веб-сервер – программа, которая способ-
ция может быть организована в виде огромно- на передавать в сеть данные по протоколу
го числа текстовых документов, которые могут HTTP.
храниться на любом компьютере, подключен- ◆◆ Веб-клиент – программа, бо-
HTML или XHTML?
ном к сети Интернет. Все эти документы свя- лее известная под названи- История развития HTML насчитывает уже
заны между собой посредством гиперссылок, ем браузер (browser, обозре- более 20 лет. Она изобилует довольно
т.е. специальных активных областей в тексте. ватель). Способен получать интересными поворотами, и достойна от-
дельного рассказа, который, уверен, вы уз-
Таким образом, начав чтение какого либо до- из сети данные по протоколу наете из курса, посвященного HTML. Здесь
кумента, пользователь сможет легко перейти HTTP и отображать их в удо- лишь замечу, что XHTML – это ответвление
стандарта HTML, которое развивалось с
к любому документу связанному с данным. бочитаемом виде. 1999 по 2009 год и в это время считалось
Текст, содержащий гиперссылки называется ◆◆ URL – Uniform Resource основным направлением в развитии язы-
ков разметки.
гипертекстом. Locator (универсальный обо- По разным причинам, после 2008 года
WWW Consortium – организация, которая
разрабатывает стандарты для Всемирной
Паутины – отказался от развития XHTML в
пользу возврата к основной версии стан-
дарта, т.е. HTML.
Современное понимание веб-сайта
значитель ресурса). Принцип, по которому ◆◆ 1998–2004 – В течении этого Стоит заметить, что современное понима-
ние понятия веб-сайт несколько отличает-
формируется адрес любого документа в периода была разработана ся от приведенного в тексте. Современный
Интернет. Благодаря URL, мы всегда знаем фактически вся современная веб-сайт имеет двоякую природу. С одной
стороны – это информационный ресурс,
где что лежит. технологическая база для похожий на журнал или книгу, а с другой
◆◆ Веб-сайт – набор гипертекстовых доку- создания сайтов: JavaScript, стороны – это клиент-серверное прило-
жение.
ментов, связанных между собой гиперс- DOM, CSS и т.д. Рынком без- Подробнее об этой двойственности мы
сылками, хранящихся, как правило, в раздельно правит Microsoft. будем говорить позже в нашем курсе. Пока
одном и том же месте и, как правило, те- Основной браузер – Internet главное, чтобы вы понимали, что сегодня,
спустя 20 лет, все уже не так просто, как
матически связанных между собой. Explorer версий 5 и 6. было изначально.
◆◆ 2004–2008 – Вторая бра-
Дальнейшая история развития Интер- узерная война. Эту войну
Что такое Web 2.0?
нет неразрывно связана именно с развитием Microsoft, по сути, проиграл. Относительно термина Web 2.0 существует
WWW, т.е. веба, изучением которого мы и бу- Набрали популярность брау- множество заблуждений и неточностей.
дем заниматься в течении всего этого семе- зеры Firefox от Mozilla Corp., Это понятие означает концепцию органи-
зации информации в WWW таким образом,
стра. Google Chrome. В эти годы что сайты (носители этой информации)
Стоит отметить лишь основные вехи: появляется концепция Web являются, по сути, представительствами
своих авторов в сети. Т.е. информация при-
2.0 – социальный веб. обретает личностный характер, а сайты
◆◆ 1991–1995 – время освоения веб. Появля- ◆◆ С 2008 – эпоха мобильного развиваются и улучшаются силами своих
пользователей.
ются коммерческие сайты. Появляются веба. Появление планшетов и Иными словами можно выстроить такую
браузеры Netscape Navigator и Microsoft смартфонов, что потребова- цепочку: Интернет – это сеть, которая свя-
Internet Explorer. ло разработки соответствую- зывает компьютеры, WWW – это сеть, объ-
единяющая документы и файлы, а Web 2.0 –
◆◆ 1995–1998 – «браузерная война». Конку- щих сайтов. сеть, предназначенная для коммуникации,
рентная борьба между Microsoft и Netscape т.е. объединяет людей.
Появление названия Web 2.0 принято свя-
за господство на рынке веб. Война выигра- Современный веб – это ка- зывать со статьей «Tim O’Reilly — What Is
на Microsoft. нал распространения информа- Web 2.0» от 30 сентября 2005 года.
ции, успешно конкурирующий с

телевидением и печатными изданиями (газе-
ты, журналы, книги).
Тем не менее, важно понять истоки воз-
никновения и проследить основные вехи раз-
вития этой технологии.

История и развитие
веб‑дизайна
Итак, давайте теперь более детально разберем-
ся с развитием непосредственно WWW, оста-
вив за скобками понятие Интернет. Теперь-
то вы уже хорошо различаете эти понятия,
верно? В первую очередь сегодня нас будут
волновать вопросы оформления веб-сайтов,
т.е. вопросы веб-дизайна.
Год рождения веб-дизайна, конечно, не
известен. Однако известен год рождения са-
мого веба – это 1991 год. Т. е. это время, ког-
да появились первые веб-страницы и первые
веб-сайты. Выглядели они, безусловно, очень Первая в истории веб-страница
скромно, поскольку технологии того време-
ни не позволяли большего. http://www.w3.org/
History/19921103-hypertext/hypertext/WWW/
TheProject.html — это адрес, по которому мож-
но найти первую в мире веб-страницу. Это,
конечно же, копия.
История и развитие веб‑дизайна

Все же, мы можем считать это отправ-
ной точкой в развитии дизайна веб-страниц.
Сформулируем основные отличительные чер-
ты дизайна той эпохи:
◆◆ Минимальное количество цветов. Объ-

ясняется несовершенством графической
системы тогдашних компьютеров, которые
могли использовать довольно ограничен-
ные палитры.
◆◆ Отсутствие качественной графики. Из
форматов растровой графики тогда под-
держивались только jpg и gif, которые, как
известно, не дают альфа-прозрачности. К
тому же технология фонового изображе-
ния появилась далеко не сразу.
◆◆ Отсутствие контроля за шрифтовым
оформлением. В разных операционных си-
стемах и браузерах, страницы отобража-
лись с разным шрифтом и разным кеглем.
◆◆ Преимущественная одномерность, т.е. рас-
положение текста в одну колонку сверху
вниз, поскольку какой-либо технологии
колоночной верстки или чего-то более
сложного просто не было в то время. Сайт Yahoo.com в 1996 году

В 1994 году веб проникает в русскоговоря-
щее пространство, а конкретно, конечно же, в
Россию. В этом году открыта доменная зона
.ru и до сих пор жив даже первый сайт в этой
доменной зоне (http://www.1-9-9-4.ru/):
Есть и ряд сайтов, сохраняющих «неповто-
римый шарм» тех лет, видимо из ностальгиче-
ских соображений, например, сайт Билиотеки
Максима Мошкова (http://lib.ru).
В 1996 началась новая эпоха, которая стала
во многом определяющей и, в то же время, по-
зорной. Отголоски этого времени дошли даже
до наших дней. В этом году появилась более Первый русскоязычный сайт в Интернете
широкая поддержка браузерами цветов и фо-
нов: активно начали появляться сайты с крас-
ным, розовым или желтым фоном, слишком
долгий просмотр которых, был практически
невозможным.
Этот этап также стал периодом ужасно-
го использования GIF-анимации, с помощью
которых, сайт, по идее, должен быть веселым
и интересным, но на деле становился раздра-
жающим и назойливым.
Обратите внимание на первый сайт ком-
пании McDonalds, созданный в 1996 году (на
нём также присутствовала gif-анимация, ко-
Сайт Библиотеки Максима Мошкова, который не менял дизайн на протяжении многих лет, и также
даёт хорошее представление о примитивности оформления первых веб-сайтов
торую, к сожалению, мы не можем показать
на иллюстрации).
Другим примером может служить сайт
1996-го года дизайнера Betsey Johnson. Цвет
фона больше, чем просто яркий — и это сайт
дизайнера (!). Сейчас сайт с подобными цве-
тами трудно даже воспринять всерьёз — соз-
даётся ощущение, что его делал ребёнок, но
никак не профессиональный дизайнер.
Все эти «перегибы» случались из-за того,

что люди не были полностью осведомлены,
как должен работает сайт, поэтому и не знали, Первая версия сайта компании McDonalds была выдержана в фирменных цветах компании, но
совершенно без учёта того, насколько комфортно будет посетителям сайта
как правильно проектировать сайты и оформ-
лять их.
Поэтому в эти годы появляются люди,
которые первыми задумываются над этими
вопросами. Одним из первых авторитетов в
этой области стал Якоб Нильсен, заложив-
ший основу такого направления как «usability»
(юзабилити). Именно usability и стала тем фак-
тором, который помог превратить веб-дизайн
90-х в то, что мы имеем сегодня.
Важнейшая веха в веб-дизайне – это появ-

ление поддержки браузерами HTML-таблиц.
Сайт дизайнера (!) Betsey Johnson выдержан в цветах, которые сейчас почти немыслимы
Это дало возможность контролировать макет Но, в начале 2000-х годов ситуация доволь-
страницы и создавать довольно разнообраз- но быстро меняется. Веб-технологии приобре-
ные по конструкции произведения. Появились тают все большую популярность и вовлекают в
эксперименты с размерами и цветом окон. процесс создания сайтов самых разных людей.
Фактически мы можем говорить о появлении Появление серьезных WYSIWYG-редакторов
такого процесса, как верстка веб-страницы. сильно облегчают работу с кодом и дают воз-
Сегодня, как, надеюсь, вы знаете, этот спо- можность создавать веб-страницы людям без
соб верстки не является не только основным, соответствующей подготовки. Это приводит
но и вообще действующим. Табличная верстка в область веб-дизайна профессиональных Якоб Нильсен — один из
господствовала в веб-дизайне практически графических дизайнеров, почувствовавших первых и, вероятно, до сих
пор крупнейший авторитет в
целое десятилетие на рубеже XX и XXI веков. потенциал этого нового направления. Внеш- области usability.
Однако уже в 1998 году появляется 2-я версия
стандарта CSS, который дает средства контро-
ля макета страницы без применения таблиц.
Это – блочная верстка. Эта технология прошла
долгий путь становления и достигла повсе-
местного распространения только в последние
6..7 лет.
Также нужно отметить такой факт, что в
первое десятилетие жизни веб был все таки
слабо распространен и не имел той привлека-
тельности как сейчас, поэтому и требования
к внешнему виду сайтов сложными не были.
По этой причине разработкой веб-страниц за-
нимались в основном люди, слабо знакомые с
графическим дизайном.
Пример «табличного» дизайна сайта. Невооружённым глазом видно, как информация, текст и изо-
бражения, организованы в отдельные колонки
ний вид сайтов начинает резко улучшаться. Веб-дизайн девяностых «переехал» в Китай
Специалисты отмечают явное отличие китайского веб-дизайна от западных тенденций. Ев-
Причем настолько резко, что пользователи ропеец, знакомящийся с популярными китайскими сайтами, может подумать, что оказался
Интернет со стажем не более 5 лет, сегодня от- снова в 1995 году. Здесь дело даже не в иероглифах, а в общей стилистике оформления.
кровенно недоумевают, как такой дизайн как Распространенным стилем в китайском интернете является огромное количество символов
текста при неправильном использовании графики или полном ее отсутствии.
на рубеже веков мог работать и зарабатывать.
Рассказывая о развитии веб-дизайна нель-
зя не упомянуть Flash. Эта технология приоб-
рела бешеную популярность в 2001-2004 году,
поскольку фактически была единственным на
тот момент средством создания впечатляющих
визуальных эффектов на веб-страницах и ин-
терактивных элементов.
Сегодня Flash уже не единственная техно-
логия для веб, даже более того, Flash даже вы-
тесняется из веба, но, в свое время, Flash стал
мощным толчком к развитию веб-дизайна.
После 2004 года наступает период, извест-
ный под названием эпоха Web 2.0. Глянцевые
кнопки, эффект отражения на блестящей по-
верхности, градиенты стали трендом этого
времени. Закругленные углы и градиенты ста-
ли доступны средствами CSS в современных
браузерах. Веб-сайты получают более функ-
циональный и привлекательный пользова-
тельский интерфейс. Обратная сторона этого
Сложно ответить на вопрос о причинах этого, тем не менее, это говорит нам о многоликости
этого направления графического дизайна.
явления – возрастающая сложность разработ-
ки и специализация направления веб-дизайн.
Обратите внимание на появление разра-
ботки самостоятельных элементов сайтов:
кнопок, меню, значков, иконок и т.д.
В последнее время эти тенденции следка
сместились в сторону природных оттенков в
цвете, более текстурных фонов и игры с полу-
прозрачностью. Это уже реалии наших дней.
2008 год характерен появлением мобиль-
ных веб-приложений. Это началось с появле-
нием iPhone в 2007 году. Профильные компа-
нии стали создавать мобильные веб-сайты и
разрабатывать приложения для различных
устройств. Большие социальные сети, устанав-
ливают виджеты для перехода на блоги, веб-
сайты – виджеты для перехода на социальные
сети.
Подойдя к современной эпохе развития
веб-дизайна, стоит остановиться на её рас-
смотрении поподробнее.
Примеры дизайна, ассоциирующегося с термином Web 2.0

Винтажный стиль на сайте
Тренды развития веб-дизайна

Ведущие интернет-журналы, посвященные
веб-дизайну — Smashing Magazine, Web Design
Ledger, Net Magazine, Creative Bloq и другие —
регулярно проводят обзоры тенденций в веб-
дизайне и делают пронозы.
Опираясь на их публикации, можно до-
Использование пятен,
вольно четко проследить развитие веб-дизайна скрепок, стикеров и прочего
последней пятилетки. канцелярского беспорядка
2008 год
Это довольно знаковый год в веб-дизайне.
Если говорить о технологии, то в это время
появился iPhone и браузер Google Chrome, а
социальные сети прошли своеобразную точку
невозврата, т.е. эти явления и стали опреде-
лять жизнь веба на будущие годы.
В 2008 году в веб-дизайне зародилась
устойчивая тенденция к стилю ретро и вин-
тажным элементам оформления. Это про-

являлось в имитации рукописных надписей, Сайт в стиле гранж
клякс, пятен и т.д., а также элементов в виде
пришпиленных кнопками или скрепками за-
меток. Также продолжилось использование
популярного и ранее стиля Гранж (Grunge).
Как видим еще совсем нет ориентации на
мобильные устройства, повсеместное исполь-
зование социальных сетей, их статусов и т.д.
Все это будет позже.
Все эти тенденции никуда не делись и
нашли свое продолжение и в 2009 году.
Элементы сайта в стиле

гранж

2009 год Приёмы веб-типографики, по-
лучившие распространение с
Помимо продолжения тенденций, 2009 год 2009 года
ознаменовался началом повсеместной под-
держки браузерами технологии @font-face в
CSS, что позволило использовать на страницах
любые гарнитуры. Раньше это вызывало опре-
деленные сложности и, при попытке исполь-
зования нестандартного шрифта в дизайне,
верстальщику приходилось заменять текст
растровым изображением. Использование @
font-face (и других возможностей CSS3) поро-
дило целый ряд трендов:
◆◆ Огромные надписи на сайтах

◆◆ Нестандартные шрифты
◆◆ Рельефный текст

Также именно в 2009 году начала явно
прослеживаться тенденция к усложнению и
совершенствованию пользовательских интер-
фейсов. Это, конечно же, стало возможным за
счет улучшения поддержки браузерами Java
Script. Сложные интерфейсы веб-
сайтов, создаваемые с помо-
Также стоит отметить еще один тренд 2009 щью JavaScript
года – колоночная модульная сетка и верстка
страниц по ней. Это понятие должно быть
вам знакомо с прошлого семестра, т.е. из кур-
са полиграфической верстки. Развитие CSS
позволило перенести эту технологию и в веб-
дизайн.
В это время стали очень популярны CSS-
фреймверки, которые как раз и помогают от-
носительно легко воссоздавать колоночные
макеты: например, 960.gs или blueprint.

2010 год
2010 отметился появлением тенденции к соз-
данию эмоционального дизайна (Design for
Delight). На страницах стали популярны при-
родные мотивы, мягкие формы, качественные
текстуры, имитирующие натуральные мате-
риалы.

В 2010 году влияние социальных сетей и
мобильных устройств привело к появлению
клавитурной навигации, а также к возникно-
вению социальных виджетов, которые демон-
стрируют активность владельца сайта в своем
сообществе или дает возможность поделиться
(sharing) публикацией сайта прямо в своем
аккаунте социальной сети.

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

Использование параллакс-
эффекта позволило сделать
сайты более реалистичными и
живыми, но это потребовало ис-
пользования более качественной
2011 год графики. Скорости соединения в
2011 год ознаменовался мощной поддержкой Интернет и стоимость трафика
тачскринов и повальным увлечением эффек- уже не были столь критичными
том параллакса. Передать этот эффект ил- как в былые годы и сайты резко
люстрацией невозможно. Поэтому приведу стали набирать в весе, что, без-
несколько ссылок (подсказка: используйте ко- условно, потребовало и допол-
лесико мыши (скроллинг)): нительных усилий по их опти-
мизации. Тем не менее, речь, в
◆◆ http://www.bagigia.com/ общем-то, не об этом. Оптимиза-
◆◆ http://cheesepleasegame.com/ ция – это головная боль отнюдь
◆◆ http://krystalrae.com/ не веб-дизайнера.
◆◆ http://www.nike.com/jumpman23/aj2012/ Итак, сайты стали исполь-
◆◆ http://titanic.q-music.be/ зовать еще более качественную
◆◆ http://www.noleath.com/noleath/ графику. Одно из проявлений
◆◆ http://www.putzengel.at/ этого – фотофон. Т.е. использо-
вание огромной качественной
Параллакс-эффект реализует динамиче- фотографии в качестве фона всей страницы.
ский объем, как бы прокладывая путь в буду- Этот фон может быть постоянным, а может
щее веб-дизайна – 3D. Реализуется параллакс быть и изменяющимся.
эффект с помощью JavaScript. Обратите внимание, что использование
фотографий вызвало к жизни еще одну тен-

денцию – простые цветовые схемы для соз-
дания остальных элементов страницы. Т.е.
используются довольно большие однотонные
плашки, а количество используемых в дизай-
не цветов сократилось до 3..4. В основном это
чистые глубокие цвета.
2012 год
Все эти тенденции не исчезли и в наше время,
хотя 2012 год привнес и нечто новое. Конечно
же главным трендом 2012 года стоит назвать
Responsive Web Design – Адаптивный (Отзыв-
чивый) веб-дизайн. Его суть состоит в том,
чтобы используя специальные синтаксиче-
ские конструкции в коде страниц, добиться
того, чтобы они самостоятельно перестраива-
лись исходя из возможностей экрана устрой-
ства, которое её отображает: нетбук, планшет,
iPhone и т.д.
Если же вести речь не столько о техно-
логии, а именно о трендах в оформлении, то
нельзя не упомянуть такое явление, как воз-
росшее использование округлых форм вме-
сто прямоугольных. Это, безусловно, стало
возможным благодаря распространению под-
держки CSS3 браузерами. Также тенденции

прошлых лет – ретро и натуральная тематика ◆◆ Адаптивный дизайн станет мэйнстри-
– продолжили свое развитие. Новым элемен- мом, т.е. то, что было предложено в 2012
том страниц стали ленты и разнообразные году как новинка, в 2013 году станет прак-
беджи. тически обязательным.
Гарнитура Lobster и подобные ей стали ◆◆ Универсальный дизайн. Отказ от разра-
очень популярными. Этот тренд длится уже ботки отдельного дизайн-макета под каж-
более года и использовать это нужно с опа- дое устройство. С каждым днём выходит
ской, поскольку скорее всего это скоро на- все больше новых устройств с разными
доест и использовать шрифт Lobster станет размерами экранов, и веб-дизайн в таких
моветоном. условиях станет в большей степени дизай-
Как видим, последнее десятилетие отме- ном динамически изменяющейся системы,
чено чрезвычайно бурным развитием веб- а не дизайном статичной страницы.
дизайна. Во многом это вызвано резким ро- ◆◆ Flash продолжит сдавать позиции. Но,
стом возможностей браузеров на основе новых следует четко понимать, что речь не идет
веб-технологий: о кончине этой технологии вообще. Flash
уходит из веб-дизайна, сохраняя при этом
◆◆ HTML5
◆◆ CSS3
◆◆ Анимационные возможности JavaScript и
его фреймворков
Что же ожидает нас в 2013 году? Предпо-

ложения уже делаются. Например в статье
http://www.netmagazine.com/features/20-top-
web-design-and-development-trends-2013 можно
четко увидеть эти тенденции:

довольно четкую коммерческую нишу, но По сути, профессия веб-
уже на рынке настольных приложений. дизайнер, востребованная на
◆◆ Сайты станут более лёгкими и произ- рынке труда, со своей школой и
водительными. В 2012-м году, средний спецификой стала реальностью
размер страницы сайта превысил 1Mb, именно в это время. Подчерки-
поэтому вопросы оптимизации и «облег- ваю: в полноценное направле-
чения» страниц становятся актуальными ние графического дизайна веб- Разница в отоборажении
иконок на обычным (слева) и
как никогда. дизайн оформился в последние пять-шесть retina-дисплее (справа)
◆◆ Больше видео. Интернет ускоряется, в том лет. И стоит сказать, что эта молодая профес-
числе и мобильный интернет. К тому же сия приобретает все большую популярность и
довольно мощные видеокамеры становят- востребованность. Несмотря на это, хороший
ся доступными все большему количеству веб-дизайнер все еще в дефиците на совре-
людей. менном рынке труда. Это, во многом связа-
◆◆ Масштабируемый веб-дизайн. Это мето- но с тем, что в веб-дизайн люди приходят из
дология разработки дизайна сайтов спо- смежных областей не всегда понимая отличий
собных отображаться на экранах как с веб-дизайна от других направлений.
высокой, так и с низкой плотностью пиксе- Давайте поговорим о том кто же такой
лей. Речь идет, безусловно, о новых retina- веб-дизайнер и что он должен знать и уметь.
дисплеях, которыми оснащаются iPhone 4
и др. Масштабируемый дизайн подразуме-
вает замену растровой графики на вектор-
ную, используя возможность формата SVG
изменять размер изображения без потери
качества.

за функционал и за внешний вид одновремен-
но. Более того, часто этот человек отвечал и за
прочие вопросы, связанные с работой сайта:
администрирование баз данных, защита дан-
ных и т.д. Тогда, в американской традиции,
Профессия веб-дизайнера этих людей и называли веб-дизайнерами. Ино-
гда использовали термин веб-мастер.
На рубеже веков сложилась весьма занятная Кто же был по образованию и подготовке
ситуация со смыслом термина веб-дизайн тогдашний веб-дизайнер? Вы удивитесь, но мно-
и, как следствие, с самой профессией веб- гие веб-дизайнеры были программистами или
дизайнер. просто самоучками, пришедшими в эту про-
Корень проблемы в оттенке семантики фессию совсем из другого направления. Главное
слова «дизайнер» в американской традиции и умение такого веб-дизайнера – это, безусловно,
в русскоязычной среде. По-английски designer HTML. Позднее добавились CSS, JavaScript, Flash
обозначает одновременно и художника-офор- и даже язык программирования PHP.
мителя, т.е. графического дизайнера, создаю- Прошло время. Сегодня совершенно оче-
щего, к примеру, печатную продукцию или видным является очень развитое и сложное
оформление чего-либо, и конструктора-про- оформление современных сайтов. Без соот-
ектировщика, т.е., по-сути, инженера. ветствующей подготовки и профессионализма
В первые годы существования веба, как мы именно в области классического графического
убедились, какой-то особой художественно- дизайна такие вещи не создать. Получается
стью оформление сайтов не отличалось. Это следующее двоякое трактование:
происходило в первую очередь не потому, что
тогда людям не нравилось красивое оформле- ◆◆ Веб-дизайнер – разработчик веб-страниц
ние, а из-за скудости технологий тех лет. Та- сайта, всего сайта в целом, т.е. человек, ко-
ким образом, разработчик веб сайта отвечал и торый, попросту говоря, делает сайты.
◆◆ Веб-дизайнер – это графический дизай- Разработка GUI (Graphic User Interface)
как отдельное направление в дизайне
нер, специализирующийся на проекти- Парадоксально, но большая часть пользователей ПК по-
ровании внешнего вида веб сайтов и эле- нимают о чем идет речь, когда разговор заходит о пользо-
ментов взаимодействия с пользователем, вательском интерфейсе. А знаете ли вы когда появились
такие знакомые и понятные вещи как кнопки, окна, меню
т.е. человек, входящий в состав команды и т.д., вещи, без которых невозможно представить себе
разработчиков веб-проектов. работу за компьютером сегодня.
Однако истоки этих вещей кроются в 1973 году, когда в
Xerox-PARC был построен первый пользовательский интерфейс на основе манипулятора
Кого же называть веб-дизайнером? Я на- мышь и графических элементов. Но главное – была разработана фундаметальная концеп-
ция WIMP (windows, icons, menus, point’n’click).
стаиваю на втором варианте. Первое опреде-
Наверное самый мощный толчок к развитию GUI совершила компания Apple в 1983-1984
ление сегодня устарело лет на 10. И это очень годах, изготовив то, что используется даже в современных Mac OS.
важно понимать, поскольку это определяет
что именно должен знать веб-дизайнер и ка-
ковы перспективы в этом направлении.
Итак, мы убедились, что в наши дни мож-
но говорить о существовании отдельного на-
правления графического дизайна – веб-дизайн
и, соответственно, отдельной профессии – веб-
дизайнер.
Веб-дизайн сформировался на стыке 2-х
основных направлений:
◆◆ Полиграфия – дизайн печатной продук-

ции: газеты, журналы, плакаты, листовки
и т.д.
◆◆ Дизайн графических пользовательских
интерфейсов программного обеспечения Нельзя обойти вниманием и достижения компании Microsoft, прежде всего в деле рас-
пространения графического интерфейса в том числе и на наших просторах. В 1985 году
появляется Windows 1.0 – графическая оболочка. В это время уже доступна работа с цветом.
В наши дни, разработка пользовательских интерфейсов – это полноценная отрасль, исполь-
зующая дизайнерскую мысль. Давно уже не удивляют сенсорные элементы управления,
элементы голографии и т.д.
Вобрав из этих направлений определен- бельности текста: его геометрии, контра-
ные условности, приёмы и закономерности, сте. Что касается цвета, то мы используем
тем не менее, веб-дизайн имеет кое-какие соб- модель RGB, а не CMYK как в печати.
ственные черты: 3. Информационное проектирование. Не-
обходимо проектировать не только ви-
1. Своеобразный формат композиции. Как зуальное представление страниц, но и
правило, фиксирован по ширине и не огра- структуру информации: категоризация,
ничен по высоте. Ширина веб-страницы взаимосвязь содержимого на сайте. Этот
определяется шириной экрана устройства, аспект работы веб-дизайнера будет под-
на котором она отображается. Вспомните робно рассмотрен в одном из следующих
законы блочного форматирования элемен- уроков.
тов в CSS. Элемент нужно ограничивать 4. Динамичность. Необходимо проекти-
по ширине, а по высоте он будет ограни- ровать реакцию элементов страницы на
чиваться автоматически. Это организует поведение пользователя и, как следствие,
формат веб-страницы похожий на рулон. прорисовывать их состояния при этом. В
Этому способствует колёсико мыши, кото- отличие от журнала или газеты, мы мо-
рое организует очень простое прокручи- жем нажимать на элементы содержимого,
вание контента по вертикали – скроллинг. перетаскивать их, изменять их размеры и
2. Своеобразные требования по колори- внешний вид. Все эти вещи нужно пред-
стике и типографике. Мы познакомим- усматривать.
ся с ними детально в следующих уроках. 5. Ориентация на пользователя, а не толь-
Как минимум, нужно помнить о том, что ко на потребителя. Т.е. больший упор на
продукт веб-дизайна не предназначен для аспекты психологии. Специфика рынка
печати, т.е. для бумаги и красок, а будет веб такова, что, поскольку, большинство
воспроизводиться только на экране. Это продуктов доступно потребителю бесплат-
меняет требования по оптической чита- но, то очень остро встает вопрос конкурен-
ции. Одним словом, нужно делать дизайн дизайна для сайтов, построенных на базе
таким удобным и привлекательным, чтобы каких-либо движков.
«влюбить» или хотя бы заинтересовать 8. Очень быстрое развитие технологий.
пользователя в считанные секунды. Наверное ни одна отрасль дизайна не
6. Работа с кодом. Необходимо разрабаты- развивается столь стремительно, как веб-
вать то, что можно эффективно вопло- дизайн. Особенно это заметно в последние
тить с помощью кода. Это требует соответ- 5 лет. В целом можно констатировать по-
ствующей подготовки и стиля мышления. явление каких-либо серьезных техноло-
Другими словами, веб-дизайнер, чуждый гических новшеств каждые 9-12 месяцев.
веб-программирования и всех его арте- 9. Ошибки обходятся дешевле, чем в поли-
фактов вряд ли будет конкурентоспособен графии. Возможно это вас повеселит, но
на рынке труда. Веб-дизайнер должен до- я встречал неоднократно веб-дизайнеров,
вольно четко представлять себе возмож- которые мигрировали в веб из полигра-
ности всех доступных веб-технологий: фии, поскольку устали перепечатывать
HTML, CSS, JavaScript, различные CMS, тираж из-за ошибки в допечатной под-
Adobe Flash. Подчеркиваю, речь идет не о готовке.
необходимости разработки собственных
программ, а, всего лишь об умении раз- Исходя из этого, мы можем сформулиро-
бираться в чужих и понимании того что вать требования к веб-дизайнеру. Т.е. что нуж-
можно реализовать, а чего нельзя. но знать и уметь:
7. Больше неопределенности. Частенько ◆◆ Векторный и растровый графический ин-
нужно визуализировать то, чего либо еще струментарий;
нет, либо его не видно. Т.е. работать с аб- ◆◆ Общая теоретическая подготовка в обла-
страктным контентом, «заглушками» и т.д. сти графического дизайна;
В особенности это относится в разработке ◆◆ Информационное проектирование;
◆◆ Психология пользователя и проектирова-
ние пользовательского опыта (UX);
◆◆ Знание базовых веб-технологий (HTML,
JavaScript, CSS), как минимум, на уровне
использования чужого кода и понимания
возможностей и ограничений;
◆◆ Знание возможностей систем управления
содержимым веб-сайтов (CMS);
◆◆ Понимание принципов работы веб-
платформы и базовые знания по админи-
стрированию веб-сайта на хостинге.
Итак, подводя итог, можно утверждать,

что результат работы современного веб-
дизайнера – это детально проработанная ви-
зуальная часть веб-проекта.
Самое время теперь, разобравшись с пред-
метом нашего изучения – веб-дизайном, за-
глянуть к соседям – смежным профессиям и
направлениям, благодаря которым и создается
полноценный коммерческий продукт – веб-
сайт.
сразу пытаться «нарисовать» сайт, не уделив
внимание организации содержимого в нем.
Документ, в котором отражается структура
сайта, называется информационной архитек-
турой. В реальных проектах этот мудреный
Процесс разработки сайта термин чаще всего заменяют понятием карта
сайта. На самом деле, это не совсем правиль-
В разработку веб-сайта обычно вовлечены но, поскольку существует еще, как минимум,
несколько специалистов. Довольно большое два аспекта в веб-разработке, которые тоже
влияние на процесс оказывает способ орга- можно назвать картой сайта. Это приводит к
низации команды разработчиков. Это может путанице.
быть работа в рамках веб-студии или же ра- Итак, первый шаг при разработке сайта –
бота вольнонаёмных фрилансеров. Однако это составление информационной архитекту-
общие обязательные шаги присутствуют в лю- ры или, другими словами, детальное описание
бом случае: его структуры и функционала. Делается это,
безусловно, с помощью интервью с заказчи-
1. Информационное проектирование и про- ком. Часто с помощью нескольких попыток.
тотипирование интерфейса; Если проект типовой или несложный, то мож-
2. Разработка дизайна; но предложить заказчику на выбор несколько
3. Разработка программной части; готовых вариантов исполнения структуры. В
4. Верстка и адаптация дизайна к движку; любом случае, полученный в итоге документ,
5. Наполнение; будет являться исходным для дальнейшей ра-
6. Продвижение. боты как над дизайном, так и над функциона-
лом.
Одна из наиболее общих ошибок начина- Кто занимается этим вопросом? В идеале,
ющих веб-дизайнеров состоит в том, чтобы специальный человек – информационный ар-

хитектор, но, на самом деле, этим занимается Прототип может служить предметом об-
тот человек из команды, кто достаточно ква- суждения с заказчиком, а также, предметом
лифицирован для этого. Однако веб-дизайнер его утверждения.
в любом случае должен участвовать в этом После этого, процесс разработки сайта
процессе. разветвляется и идет двумя путями: дизайн и
Следующий шаг заключается в создании программная основа (движок). Понятно, что
прототипов основных страниц будущего сай- созданием программной основы будет зани-
та. Главным на данном этапе является учет маться веб-программист. Очень часто может
особенностей использования этого проекта понадобиться не создание движка для сайта
людьми. Очень важно сделать интерфейс сай- с нуля, а, всего лишь, подбор существующего
та удобным, понятным и полезным. Все эти (даже бесплатного) решения и его настройка
вопросы называются UX — «User eXperience»
(пользовательский опыт) или просто Usability.
Существует отдельная профессия – специ-
алист по UX, но очень важно, чтобы дизайнер
сам владел этими принципами. Именно из-
учению вопросов, связанных с UX будет по-
священ курс, который мы начинаем сегодня
изучать.
Здесь, я думаю, уже очевидно, что прото-
типированием должен заниматься дизайнер.
Задача – создать ясное и четкое представление
о том, что, как, где и зачем будет отображаться
на странице. Подробно о прототипах мы еще
поговорим.
Прототипы главных страниц сайтов

и адаптация. В одном из последующих кур- Важно понимать, что эти три вопроса
сов «Системы управления содержимым для определяют дизайн в целом и их выбор должен
веб-сайтов» вы познакомитесь с несколькими делаться ответственно и профессионально.
такими движками и научитесь их настраивать Четко определив эти вещи, дизайнер мо-
для своих проектов. жет приступить к созданию графического ма-
Нас же больше занимает, конечно же, раз- кета. Чаще всего для этого используют Adobe
работка дизайна. Здесь дизайнеру предстоит Photoshop, хотя есть много веб-дизайнеров,
решить следующие основные вопросы: работающих в Adobe Illustrator.
Что конкретно должно выйти «из под
◆◆ Колористика. Подбор цветовой схемы для пера» веб-дизайнера? Давайте попробуем
оформления страниц, сообразно тематике определить состав продукта, который должен
сайта, его целевой аудитории и т.д. получиться:
◆◆ Типографика. Выбор используемых на
странице шрифтов, в соответствии с их ◆◆ PSD-файлы (или AI-файлы) каждой из ти-
читабельностью, эстетикой и правомерно- повых страниц сайта. Перечень этих стра-
стью использования. ниц смотрим в информационной архитек-
◆◆ Компоновка (сетка). Это один из самых туре, составленной на предыдущем шаге.
неочевидных и сложных моментов. Со- Подчеркну также важность правильной
временные средства предлагают доволь- структуры слоев этих файлов:
но широкий выбор способов размещения • не должно быть выключенных неис-
элементов на странице, их группировки. пользуемых слоев (оставшихся от пре-
Здесь огромную роль будет играть психо- дыдущего проекта, к примеру);
логия, т.е. нюансы восприятия всей кар- • слои должны быть объединены в груп-
тины и отдельных деталей пользователем. пы с ясными названиями, соответствен-
но тем частям страниц, которые они со-
держат;

• не должны быть в макете слои с проме-
жуточными вариантами работы;
• для того, чтобы показать несколько со-
стояний одного и того же динамиче-
ского объекта (раскрывающееся меню,
к примеру) можно использовать слои,
которые нужно будет включать по оче-
реди. Не поленитесь написать пояснение
по этому поводу.
◆◆ Файлы всех шрифтов, которые были ис-
пользованы в проекте;
◆◆ Исходные файлы всех заимствованных
фотографий, в особенности взятых из фо-
тобанков и т.д.
Также нельзя забывать о том, что за выбо-

ром тех или иных вариантов стоит необходи-
мость воплощения в жизнь посредством кода,
т.е. выполнение той работы, которую проще
всего назвать версткой веб-сайта. Человек,
занимающийся этим, соответственно, назы-
вается верстальщиком. Современная верстка
довольно многогранна для того чтобы ограни-
чиваться применением только HTML и CSS.
Поэтому уже около 10 лет верстка сайтов су-
ществует как отдельная профессия.
Пример правильной (слева) и неправильной (справа) организации слоёв в документе Photoshop

Один из главных острых моментов со- игру вступают другие участники
временной верстки сайтов – это реализация команды.
клиентского функционала, т.е. тех возможно- После верстк и са йта по
стей сайта, которые будут работать непосред- дизайну, нарисованному веб-
ственно в браузере без привлечения сервера дизайнером, наступает момент,
для этих целей. Для написания таких скрип- когда дизайн встречается с
тов используется язык программирования движком, который, как мы пом-
JavaScript. Исторически так сложилось, что ним, тем временем разрабатыва-
это – область ответственности верстальщика, ет команда программистов. Или
но, в последнее время, количество и сложность дорабатывает существующий. В
скриптов увеличиваются настолько, что уже данном случае это не существен- Выпадающее меню, сделан-
можно говорить о появлении отдельной про- но. Веб-дизайнер в этот момент может зани- ное с помощью JavaScript
фессии – JavaScript программист. маться совсем другими задачами, а мы, все же,
проследим дальнейшую судьбу проекта.
Вопрос, который интересует многих: дол-
жен ли дизайнер быть верстальщиком? Я скло-
няюсь к такому ответу: не обязан верстать
сам, но знать как это делается – обязан. Что
же касается знания основ JavaScript, то очень
неплохо, если дизайнер знает о том, что можно
сделать с его помощью, а чего нельзя.
В данном курсе мы не будем рассматривать

верстку. Для этого существует курс «HTML /
CSS», поэтому скажу лишь, что прямая работа
веб-дизайнера на этом заканчивается. Далее в
Слайдер-«карусель» , сделанный на JavaScript

После интеграции дизайна и движка, ◆◆ Внешний вид. Область ответственности
происходит наполнение сайта содержимым веб-дизайнера. Складывается из следую-
и тестирование. Теперь мы имеем готовый к щих основных направлений:
использованию сайт, который, в принципе, • компоновка (layout)
можно сдавать заказчику. Одна беда – этот • колористика
сайт известен только заказчику и исполни- • типографика.
телю. Поэтому теперь, конечно же, наступает ◆◆ Бизнес-модель. Продвижение в поискови-
этап продвижения или, другими словами, рас- ках и социальных сервисах, монетизация.
крутки. Эти задачи решаются не веб-дизайнером,
К этому процессу дизайнер или програм- но понимание этих вопросов также у ди-
мист не имеют прямого отношения, но основ- зайнера должно быть.
ные знания иметь лишним не будет, поэтому
мы займемся этим в отдельном курсе «Осно-
вы SEO и веб-маркетинга». На практике этим
должны заниматься специальные сотрудники,
а чаще всего этим занимается даже отдельная
организация.
Итак, подведем итог. Веб сайт – это раз-

работка на трёх логических уровнях:
◆◆ Функционал: серверный и клиентский.
Это задача программиста или даже не-
скольких программистов – серверного и
клиентского, но дизайнер должен пони-
мать цели и задачи на данном этапе.

Андрей Пилипенко

© Компьютерная Академия «Шаг», 2013

www.itstep.org

USE - Урок 01 (2015)

Загружено:

Сведения о документе

Авторское право

Доступные форматы

Поделиться этим документом

Поделиться или встроить документ

Параметры публикации

Этот документ был вам полезен?

Это неприемлемый материал?

Авторское право:

Доступные форматы

USE - Урок 01 (2015)

Загружено:

Авторское право:

Доступные форматы

Юзабилити

История и развитие веб-дизайна

Урок 1 Основы веб-дизайна

Для начала давайте разберемся с самим назва- получила название ARPANET.

Джозеф Линклайдер – один из главных теоре-

и эффективность, «отгородили» сегмент сети ма непростым, поэтому, по-прежнему, Ин-

Краткая история и развитие Интернет и WWW

Краткая история и развитие Интернет и WWW

Краткая история и развитие Интернет и WWW

История и развитие веб‑дизайна

◆◆ Минимальное количество цветов. Объ-

История и развитие веб‑дизайна

Все эти «перегибы» случались из-за того,

Важнейшая веха в веб-дизайне – это появ-

Примеры дизайна, ассоциирующегося с термином Web 2.0

Тренды развития веб-дизайна

История и развитие веб‑дизайна

Элементы сайта в стиле

История и развитие веб‑дизайна

◆◆ Огромные надписи на сайтах

История и развитие веб‑дизайна

История и развитие веб‑дизайна

История и развитие веб‑дизайна

История и развитие веб‑дизайна

История и развитие веб‑дизайна

История и развитие веб‑дизайна

История и развитие веб‑дизайна

Что же ожидает нас в 2013 году? Предпо-

История и развитие веб‑дизайна

История и развитие веб‑дизайна

◆◆ Полиграфия – дизайн печатной продук-

Итак, подводя итог, можно утверждать,

Процесс разработки сайта

Прототипы главных страниц сайтов

Процесс разработки сайта

Также нельзя забывать о том, что за выбо-

Пример правильной (слева) и неправильной (справа) организации слоёв в документе Photoshop

Процесс разработки сайта

В данном курсе мы не будем рассматривать

Слайдер-«карусель» , сделанный на JavaScript

Итак, подведем итог. Веб сайт – это раз-

Процесс разработки сайта

Юзабилити и эргономика веб-страниц

© Компьютерная Академия «Шаг», 2013

Вам также может понравиться