Введение в web дизайн. Основные принципы web-дизайна

М.: СОЛОН-ПРЕСС, 2008. - 192 с. (Серия "Библиотека студента")

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

Основное внимание в пособии уделено языку программирования HTML, технологии CSS, языку программирования JavaScript, графическому редактору Adobe Photoshop, технологии мультимедиа.

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

Данное учебное пособие предназначено для студентов специальности 220400 (230105) - Программное обеспечение вычислительной техники и автоматизированных систем. Наличие электронного учебника позволяет педагогам просто решить проблему тиражирования методических указаний.
Книга незаменима для всех начинающих изучать Web-дизайн.

Формат: djvu

Размер: 5 ,7 Мб

Скачать: yandex.disk

СОДЕРЖАНИЕ
Введение 3
1. Глобальные вычислительные сети 6
2. Способы подключения к Internet 11I
3. Коммутация каналов, сообщений и пакетов. 13
4. Протоколы, службы, услуги 15
5. Браузеры 18
6. Поисковые системы и каталоги. 24
7. Основные понятия Web-дизайна 31
8. Структура Web-страницы 37
9. Сетевые технологии Web-дизайна 39
10. Язык HTML 46
10.1. Форматирование текста 51
10.2. Таблицы.. 55
10.3. Графика 61
10.4. Гиперссылки 67
10.5. Метатеги 71
10.6. Карты-ссылки 73
10.7. Мультимедиа 77
10.8. Фреймы 81
10.9. Каскадные таблицы стилей CSS 85
11. Язык JavaScript 91
11.1. Порядок запуска скриптов 95
11.2. Методы ввода информации 98
11.2.1. Ввод информации с помощью метода соп-firmO 99
11.2.2. Ввод информации с помощью метода promt().. 101
11.2.3. Ввод информации с помощью текстового поля 103
11.2.4. Ввод и вывод информации с помощью тексто¬вой области textarca 106
11.2.5. Интерактивные формы 108
11.3. Методы вывода информации 124
11.3.1. Вывод информации с помощью метода alert() 125
11.3.2. Вывод информации с помощью метода write() 126
11.3.3. Вывод информации с помощью текстового поля 127
11.3.4 Вывод информации с помощью созданных окон 129
11.4. События 132
11.5. Арифметические операции., 141
11.6. Логические операции и операции сдвига 143
11.7. Операции со строковыми переменными. 147
11.7.1. Перевод чисел из одной системы счисления в другую 150
11.8. Математические функции и константы 152
11.9. Регулярные циклы 158
11.10 Операторы условной передачи управления if-else(cond) Hswitch(x) 160
11.11 Примеры скриптов 167
11.11.1 Анимация в строке-заголовке браузера 168
11.11.2 Кнопка с подсветкой 169
11.11.3 Реализация итерационных циклов 171
Приложение 1: Перечень лабораторных работ и заданий, размещенных на оптическом диске 174
Приложение 2: Порядок запуска тестирующей программы 176
Приложение 3: Сайт «Самара сия - сама Россия»
Заключение 180
Список литературы 181

Пособие может использоваться для стационарного и дистанционного обучения при изучении следующих дисциплин: Программирование на языке высокого уровня. Человеко-машинное взаимодействие. Объектно-ориентированное программирование.
Основное внимание в пособии уделено языку программирования HTML, технологии CSS, языку программирования JavaScript, графическому редактору Adobe Photoshop, технологии мультимедиа.
К учебному пособию прилагается электронный учебник на компакт-диске, который содержит теоретический материал, примеры реализации различных задач (учебный сайт) и практическую часть (задания, контрольные вопросы и методические указания на выполнение лабораторных работ). Кроме того, на диске находится тестирующая программа, с помощью которой преподаватель может быстро и объективно оценить степень усвоения материала.
Любопытной особенностью электронного учебника является то, что каждый раздел сопровождается спокойной инструментальной музыкой, создающей хорошее настроение.
Данное учебное пособие предназначено для студентов специальности 220400 (230105) - Программное обеспечение вычислительной техники и автоматизированных систем. Наличие электронного учебника позволяет педагогам просто решить проблему тиражирования методических указаний.
Книга незаменима для всех начинающих изучать Web-дизайн.

1. Глобальные вычислительные сети.

Глобальные сети (как и локальные) состоят из компьютеров, соединенных каналами связи. Глобальные вычислительные сети (ГВС) всего мира объединены между собой с помощью Интернета.
Для работы в ГВС пользователю необходимо иметь соответствующее аппаратное и программное обеспечение. В простейшем случае из аппаратных средств нужно дополнительно установить модем, с помощью которого осуществляется связь по телефонной линии (например, из квартиры). Заметим, что современные ЭВМ оснащены сетевыми картами, и при подключении к сети но выделенному каналу не нужны дополнительные аппаратные средства.
Программное обеспечение делится на два класса:
программы-серверы, размещенные на том узле сети, который обслуживает компьютер пользователя;
программы-клиенты, которые находятся на компьютере пользователя и пользуются услугами сервера.
Глобальные сети предоставляют пользователям разнообразные услуги. ГВС позволяют работать с распределенными базами данных, обмениваться письмами с помощью электронной почты, сообщениями с помощью телеконференций, беседовать в реальном масштабе времени, пересылать файлы и т. д. Каждая услуга (иногда говорят: служба, сервис) работает по определенным правилам (протоколам).

Введение
1. Глобальные вычислительные сети
2. Способы подключения к Internet
3. Коммутация каналов, сообщений и пакетов
4. Протоколы, службы, услуги
5. Браузеры
6. Поисковые системы и каталоги
7. Основные понятия Web-дизайна
8. Структура Web-страницы
9. Сетевые технологии Web-дизайна
10. Язык HTML
10.1. Форматирование текста
10.2. Таблицы
10.3. Графика
10.4. Гиперссылки
10.5. Метатеги
10.6. Карты-ссылки
10.7. Мультимедиа
10.8. Фреймы
10.9. Каскадные таблицы стилей CSS
11. Язык JavaScript
11.1. Порядок запуска скриптов
11.2. Методы ввода информации
11.2.1. Ввод информации с помощью метода соп-firm()
11.2.2. Ввод информации с помощью метода promt()
11.2.3. Ввод информации с помощью текстового поля
11.2.4. Ввод и вывод информации с помощью текстовой области tcxtarca
11.2.5. Интерактивные формы
11.3. Методы вывода информации
11.3.1. Вывод информации с помощью метода alert()
11.3.2. Вывод информации с помощью метода write()
11.3.3. Вывод информации с помощью текстового поля
11.3.4 Вывод информации с помощью созданных окон
11.4. События
11.5. Арифметические операции
11.6. Логические операции и операции сдвига
11.7. Операции со строковыми переменными
11.7.1. Перевод чисел из одной системы счисления в другую.
11.8. Математические функции и константы
11.9. Регулярные циклы
11.10 Операторы условной передачи управления if-else(cond) и switch(x)
11.11 Примеры скриптов
11.11.1 Анимация в строке-заголовке браузера
11.11.2 Кнопка с подсветкой
11.11.3 Реализация итерационных циклов
Приложение 1: Перечень лабораторных работ и заданий, размещенных на оптическом диске
Приложение 2: Порядок запуска тестирующей программы
Приложение 3: Сайт «Самара сия - сама Россия»
Заключение
Список литературы

Бесплатно скачать электронную книгу в удобном формате, смотреть и читать:
Скачать книгу Введение в Web-дизайн, учебное пособие, Алексеев А.П., 2008 - fileskachat.com, быстрое и бесплатное скачивание.

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

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

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

1. Уникальность;
2. Одна из основных задач дизайна web-страниц, создание уникальности, отличия от других. Для достижения индивидуальности, web-дизайнеры прибегают к оригинальным цветовым и художественным решениям, ярким и привлекающим внимание логотипам, что представляют лицо компании, а также удобный и необычно размещенный контент сайта. При этом не стоит забывать, что интерфейс должен оставаться аналогичным по всему сайту, чтобы посетитель не путаясь, находил нужную для себя информацию.
3. Привлечение внимания;

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

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

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

Детальное рассмотрение процесса создания сайта, поможет нам точно знать, чем необходимо заняться на различным этапах разработки:

1. Техническое задание (ТЗ);

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

2. Структурирование информации;

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

3. Графическое оформление;

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

4. Верстка;

На данной стадии графическая картинка нарезается на отдельные элементы и с использованием формата HTML (Hyper Text Markup Language - язык разметки гипертекста).Язык трансформируется в код, который можно просматривать с помощью браузера.

5. Вебмастеринг.

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

При создании сайта мы также не должны придерживаться еще одному руководству по дизайну страниц:

1. Простота;
2. Центрированная разметка;
3. Небольшое количество колонок;
4. Отдельная верхняя секция;
5. Яркие цветные блоки;
6. Простая навигация;
7. Увеличенный размер шрифтов;
8. Вставки большого текста (обычно реализованы в виде графического элемента);
9. Индивидуальный логотип.

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

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

Работа над графическим Web-дизайном, представляет собой сложный вид деятельности. Ведь, только представьте, что перед разработчиком Web-сайта, стоит задача, упаковать огромный объем информации, в лаконичный, удобный для восприятия, единый интернет-ресурс.

HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов. Дронов Владимир

ГЛАВА 1 Введение в современный Web-дизайн. Web 2.0. Создание Web-страниц

Введение в современный Web-дизайн. Web 2.0. Создание Web-страниц

Всемирная паутина, WWW, Web-дизайн, Web-сайт, Web-страница - все знают, что это такое. Но что такое современная Всемирная паутина, современный Web- дизайн и современная Web-страница? Именно с ответов на все эти вопросы начнется данная книга. Далее мы немного по- говорим о принципах функционирования Интернета, Web-страницах и Web-сайтах, создадим нашу первую Web-страницу, начнем изучать язык HTML 5 и подберем программы, которые будем использовать в работе. Так сказать, с места в карьер…

Современный Web-дизайн. Концепция Web 2.0

Раньше доступ в Интернет можно было получить только с компьютеров. Потом в Интернет стали выходить с мобильных телефонов. Сейчас к Сети подключились мультимедийные плееры, устройства чтения электронных книг и телевизоры. А завтра - кто знает; может быть, мы будем выходить на Web-сайты с утюга или пылесоса…

"Я буду везде", - заявляет Интернет. - "Я стану вездесущим. Все готовьтесь к моему приходу!"

Что требуется от современного Web-сайта

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

1. Строго соблюдать все интернет-стандарты.

2. Тщательно продумать наполнение Web-страниц.

3. Позаботиться о доступности Web-страниц.

Рассмотрим их подробнее.

Интернет грозится прийти на самые разные устройства, которые могут быть основаны на разных аппаратных и программных платформах, зачастую сильно отличающихся друг от друга. Так, персональные компьютеры построены на аппаратной платформе Intel и программной платформе Microsoft Windows (по крайней мере, большинство). Мобильный телефон автора основан на аппаратно-программной платформе Samsung. А на чем будет работать интернет-пылесос, сейчас не может сказать никто.

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

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

Первое правило также требует отказа от устаревших и закрытых, фирменных интернет-технологий. С устаревшими технологиями все понятно: старье - не помощник новому. Закрытые же технологии неудобны тем, что зачастую контролируются единственной фирмой, которая единолично "заказывает музыку" и далеко не всегда прислушивается к мнению интернет-сообщества. К таким технологиям относятся, в частности, Adobe Flash и Microsoft ActiveX.

Открытыми интернет-стандартами, в том числе и Web-стандартами, занимается организация World Wide Web Consortium (Консорциум Всемирной паутины), или сокращенно W3C. Она разрабатывает стандарты, согласует их с требованиями участников рынка и публикует на своем Web-сайте http://www.w3.org . Все опубликованные там стандарты обязательны к применению.

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

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

Отсюда вытекает второе правило - Web-дизайнеры должны заботиться о полноте и удобстве наполнения Web-страниц.

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

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

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

Одним словом - все для удобства посетителя! (Пожалуй, это правило следовало бы поставить в начале списка…)

Интернет грозится прийти на самые разные устройства с различными характеристиками: быстродействием процессора, объемом памяти, разрешением экрана, скоростью доступа к Сети. Но все они должны обеспечивать единообразный вывод Web-страниц. Как этого достигнуть?

Вот и третье правило - Web-дизайнеры должны заботиться о доступности страниц.

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

Web-страницы не должны быть чересчур сложными. Чем сложнее Web- страница, тем больше времени и системных ресурсов требует ее обработка и вы- вод.

Web-страницы не должны требовать для отображения никакого дополнительно- го программного обеспечения. В идеале для их вывода достаточно только Web- обозревателя.

Но как эти правила реализуются на практике? Давайте откроем какой-нибудь со- временный Web-сайт, например, принадлежащий организации W3C (рис. 1.1). Как мы помним, его можно найти по интернет-адресу http://www.w3.org .

Рис. 1.1. Главная Web-страница Web-сайта организации W3C

Рис. 1.1. Главная Web-страница Web-сайта организации W3C

Что же мы здесь видим?

Web-сайт создан с учетом всех современных интернет-стандартов. Он отображается во всех Web-обозревателях практически одинаково.

Web-сайт не использует ни устаревших, ни закрытых интернет-технологий.

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

Web-страница прекрасно читается. Тонкий шрифт без засечек, спокойная серо- голубая цветовая гамма, тонкие рамочки со скругленными углами, минимум графики - ничто не бросается в глаза.

Есть даже видеоролик!

Web-страница быстро загружается и мгновенно выводится на экран.

Web-страница ничего не требует для своего вывода, кроме Web-обозревателя. Налицо и соблюдение стандартов, и наполнение, и доступность. Три из трех!

Именно такие Web-страницы мы и будем учиться создавать в данной книге.

Из книги Adobe InDesign CS3 автора Завгородний Владимир

Создание шаблонов страниц Прежде всего, нам потребуется выбрать (указать) формат страницы, создать новый документ и хотя бы предварительно оформить мастер-страницы.Предположим, что наша книга будет формата 60 ? 90/16. Как мы знаем из первой части книги, без консультации в

Из книги Microsoft Windows SharePoint Services 3.0. Русская версия. Главы 9-16 автора Лондер Ольга

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

Из книги Искусство оформления сайта. Практическое пособие автора Бердышев Сергей Николаевич

Глава 2. Веб-дизайн как технология

Из книги HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов. автора Дронов Владимир

ГЛАВА 1 Введение в современный Web-дизайн. Web 2.0. Создание Web-страниц Всемирная паутина, WWW, Web-дизайн, Web-сайт, Web-страница - все знают, что это такое. Но что такое современная Всемирная паутина, современный Web- дизайн и современная Web-страница? Именно с ответов на все эти вопросы

Из книги HTML 5, CSS 3 и Web 2.0. Разработка современных Web-сайтов автора Дронов Владимир

Из книги XSLT автора Хольцнер Стивен

Из книги Веб-Самоделкин. Как самому создать сайт быстро и профессионально автора Гладкий Алексей Анатольевич

ГЛАВА 16. Создание интерактивных Web-страниц В предыдущей главе мы изучили библиотеку Ext Core. От обилия объектов, свойств, методов и событий голова идет кругом… Как же применить все это богатство на практике?Этому будет целиком посвящена данная глава. Мы научимся создавать

Из книги Знакомьтесь, информационные технологии автора Воловник Аркадий Авральевич

Современный Web-дизайн. Концепция Web 2.0 Раньше доступ в Интернет можно было получить только с компьютеров. Потом в Интернет стали выходить с мобильных телефонов. Сейчас к Сети подключились мультимедийные плееры, устройства чтения электронных книг и телевизоры. А завтра -

Из книги Access 2002: Самоучитель автора Дубнов Павел Юрьевич

ГЛАВА 10. Контейнерный Web-дизайн В предыдущей главе мы рассматривали атрибуты стиля CSS, задающие параметры абзацев и отображения. Их было совсем немного, и глава получилась небольшой.Теперь мы займемся Web-дизайном. Согласитесь - наши Web-странички, несмотря на созданное

Из книги Цифровой журнал «Компьютерра» № 195 автора Журнал «Компьютерра»

Из книги автора

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

Из книги автора

Создание номеров страниц: Встроенный форматирующий объект создает встроенную область, отображающую номер текущей страницы. Например: You are now reading page .С элементом можно применять следующие

Из книги автора

Создание, открытие и сохранение веб-страниц С помощью программы вы можете создавать новые веб-страницы, а также редактировать созданные ранее.Чтобы создать новую веб-страницу, нужно выполнить команду главного меню Файл?

Из книги автора

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

Из книги автора

Глава 6 Создание страниц доступа к данным Страница доступа к данным – файл особого типа, предназначенный для просмотра и работы через Internet или intranet с данными, хранящимися в базах данных Microsoft Access или Microsoft SQL Server. Страница доступа к данным загружается в базу данных Access 2002

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

Атомный дизайн – это новая методология построения эффективных снизу вверх, построенная на аналогии с химией.

Вместо разработки коллекции веб-страниц, в концепции атомного дизайна сначала создаются простейшие компоненты интерфейса – атомы (кнопки, пункты меню и т.д.). Дополняется UI на четырех последующих этапах: молекулы, организмы, шаблоны и страницы .

Методология была разработана дизайнером Брэдом Фростом для создания успешных UI систем. Ей посвящена книга автора.

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

Иерархия атомного дизайна

Атомный дизайн – это ментальная модель восприятия веб-страниц как иерархии многократно используемых компонентов.

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

Ниже мы рассмотрим каждую из стадий более подробно.

1. Атомы

Так же как и в химии, атомы – наименьшие неделимые частицы дизайна. Это базовые HTML элементы: кнопки, ярлыки, поля форм.

Конечно, не все HTML элементы являются атомами. Например, article и section не могут быть мельчайшими элементами веб-страницы.К атомам относятся и такие элементы, как , цвета, разрешения и другие CSS правила. По словам автора концепции “атомы наглядно демонстрируют все базовые стили”.