Сервисы, позволяющие создавать мокапы

ü balsamiq.com;

ü mockupbuilder.com;

ü gomockingbird.com;

ü iphonemockup.lkmc.ch;

ü draw.io.

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

Рисунок 55 –Пример статичного макета

3) Интерактивные прототипы. Самым проработанным и детальным видом макета является интерактивный макет. Интерактивный макет позволяет полноценно вовлечь пользователя в работу, показать систему целиком и в действии.

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

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

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

ü axure.com (стоимость лицензии $300/месяц);

ü adobe.com (стоимость лицензии от $200/месяц);

ü flairbuilder.com (стоимость лицензии от $100/месяц);

ü foreui.com (стоимость лицензии от $150/месяц);

ü guimachine.ru (стоимость лицензии от $100/месяц);

ü proto.io (стоимость лицензии от $24/месяц);

ü pidoco.com (стоимость лицензии от $12/месяц);

ü protoshare.com (стоимость лицензии от $100/месяц);

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

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

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

Рисунок 56– Пример интерактивного макета страницы

Разработка макета сайта с использованием сервиса draw.io на примере макета сайта для дорожной клинической больницы

Рассмотрим процесс разработки статического макета главной страницы сайта для дорожной клинической больницы с использованием сервиса draw.io.

Сервис draw.io позволяет разработать достаточно детализированные макеты с последующей выгрузкой прототипа в формате HTML или в формате изображения jpg или png.

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

Рисунок 57 – Диалоговое окно выбора шаблона

Главное меню сервиса представлено на рисунке 58.

Рисунок 58– Главное меню сервиса draw.io

Рабочая область сервиса включает в себя несколько подменю.

Левое подменю содержит большое количество стандартных элементов интерфейса. Именно использование стандартных для системы элементов позволяет сделать макет максимально похожим на готовый продукт. Так, например, вместо рисования клавиатуры для интерфейса мобильного телефона, можно воспользоваться точным изображением реальной клавиатуры. Это помогает заказчику лучше представить себе будущий проект. Сервис draw.io имеет стандартные элементы для систем android и ios, последняя версия сервиса позволяет также использовать элементы в стиле популярного материального дизайна от компании GOOGLE.

Рисунок 59–Меню выбора интерфейса сервиса draw.io

Правое подменюсодержит общую информацию о макете (макеты в сервисе draw.io называются диаграммами). В данном подменю настраиваются следующие параметры: ü Включение/отключение сетки; ü Цвет фона (есть возможность установить фоновое изображение); ü Размер бумаги; ü Ориентация страницы; ü Кнопка сброса стилей до стиля по умолчанию.

Рисунок 60–Меню настроек сервиса draw.io

Пример.

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

В первый функциональный блок была выделена шапка сайта и верхнее меню.

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

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

Рисунок 61– Первый функциональный блок сайта ДКБ

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

Рисунок 62– Второй функциональный блок сайта ДКБ

В третий функциональный блок были вынесены новости сайта. Каждая новость состоит из краткого описания новости и соответствующей фотографии. Третий функциональный блок представлен на рисунке 63.

Рисунок 63– Третий функциональный блок сайта ДКБ

В четвертом функциональном блоке расположено видео о больнице, содержащее в себе обращение главного врача к пациентам. Кроме этого, в данном блоке часть места отведена под рекламный баннер. Четвертый функциональный блок представлен на рисунке 64.

Рисунок 64 – Четвертый функциональный блок сайта ДКБ

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

Рисунок 65 – Пятый функциональный блок сайта ДКБ

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

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

Рисунок 66– Дизайн главной страницы сайта ДКБ, разработанный на основе макета

Подведем итоги

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

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

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

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

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

Кроме того, подробно рассмотрен этап проектирования web-приложения. Мы ознакомились со стадиями проектирования сайта, дали определение понятию целевой аудитории, определили разницу между целями заказчика и целями проекта. Рассмотрели различные виды макетов, ознакомились с сервисами, позволяющими разрабатывать макеты. Рассмотрели процесс разработки прототипа сайта на примере макета сайта для дорожной клинической больницы. Научились разрабатывать прототипы сайта с использованием сервиса draw.io

Проверь себя:

1. В чем состоит отличие между блоковыми и внутристрочными элементами?

2. Как создать нумерованный, маркированный списки, список определений? Как изменить маркер списка?

3. Перечислите все элементы, образующие таблицу.

4. Перечислите все элементы, входящие в форму. Какие существуют атрибуты тега формы? Для чего они нужны?

5. Как открыть гиперссылку в новом окне? Что такое абсолютная и относительная адресация?

6. Сколько существует способов добавления стилей на веб-страницу?

7. Что такое псевдокласс? В чем отличие класса от идентификатора?

8. Что такое каскад?

9. Перечислите свойства, отвечающие за фон элемента.

10. Перечислите свойства, отвечающие за позиционирование элемента на странице.

11. Что такое плавающий блок?

12. Что такое целевая аудитория

13. Что такое прототип сайта?

14. Назовите типы прототипов

15. Назовите преимущества и недостатки бумажного прототипа.

Задания для самостоятельной работы

Задание 1

1. Скопировать в свою область файл Исходный вариант.html

2. Изменить цвет шрифта, размер шрифта и цвет фона, сославшись на отдельный файл.css. (например, цвет шрифта – зеленый, размер – 30px, фон – розовый).

3. Используя заголовочные стили, залить фон вначале тегов параграфа текстурой bfon1.jpg (или другой), затем тега body. Сделайте вывод о том, какой стиль приоритетнее (внешний, заголовочный? )

4. Измените цвет шрифта только 1-го куплета на красный.

5. В первом куплете фон слова зеленый сделайте зеленым. (С помощью стилей).

6. Каждый второй куплет (параграф) сделайте с отступом от левого края на 100px.

7. С помощью псевдоселекторов поменяйте цвета по умолчанию у ссылки.

Задание 2

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

Сделать несколько вариантов фонового изображения:

– одиночный по центру справа или в центре или слева;

– с вертикальным повторением слева или справа, начинающийся не с самого верха;

– с горизонтальным повторением;

– не прокручивающийся вместе с текстом;

- поэкпериментируйте с размерами фонового изображения;

- применить к элементу несколько фоновых изображений.

Задание 3

Создайте несколько фрагментов текста и, применив к ним классы CSS, получите, например, такой результат:

Задание 4

Оформите следующие таблицы с помощью стилей CSS:

Задание 5

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

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

Задание 6

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

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

Цель проекта:

ü предоставление информации о маршрутах путешествия

ü поиск попутчиков

ü объединение путешественников с общими интересами

1. Проанализируйте целевую аудиторию и конкурентов будущего проекта и заполните следующие таблицы

Целевая аудитория (группы пользователей)	Описание типичного представителя ЦА

Конкуренты на российском рынке	Краткая характеристика
Конкуренты на международном рынке	Краткая характеристика

Задание 7

Разработайте макет будущей социальной сети с использованием сервиса draw.io

⇐ Предыдущая 13 14 15 16 171819 20 21 22 Следующая ⇒