Анализ дизайн макета, отображение веб-страниц в размерах рабочего пространства устройств для разных видов дизайн-макетов.
Процесс дизайна связан с процедурой «выделения» объекта из общей картины мира и преобразования его в некий другой художественный, индустриальный или информационный объект.
Из этого вытекает и трансформация понятия «дизайн» во времени – от предварительного наброска, мысленного плана, зафиксированного на бумаге, до современного понятия «проектирование».
Термин «дизайн», по мнению авторитетных историков дизайна, определяет одновременно два его состояния – то, что в нем уже есть, и то, что в нем еще только может стать.
Дизайн – это и деятельность, и продукт этой деятельности.
Выделяют следующие виды дизайна:
1. Индустриальный дизайн – промышленное производство, вид и качество представления изделия.
2. Интерактивный дизайн – разработка интерактивных цифровых изделий, систем, услуг.
3. Транспортный дизайн – проектирование и эргономика транспортных средств.
4. Веб-дизайн – проектирование и разработка веб-сайтов, электронных изданий, включая графический дизайн и пользовательский интерфейс.
5. Архитектурный дизайн – проектирование зданий и их строительство.
6. Дизайн интерьеров – проектирование пространственной среды, направленное на оформление внутреннего пространства помещений, создание удобной и эстетичной обстановки жилых и производственных помещений.
7. Световой дизайн – проектирование и оформление пространственной среды с использованием разнообразных источников света. Включает эмоциональную, эргономическую, энергоэффективную составляющие.
8. Дизайн церемоний – комплексное оформление празднеств и торжеств, включающее в себя различные виды дизайнерской деятельности, такие как интерьерный и экстерьерный дизайн, графический, световой, дизайн имиджа человека и т. д.
9. Ландшафтный дизайн – комплекс действий, направленных на благоустройство и озеленение территорий, сочетает в себе архитектуру, растениеводство и культурологию.
10. Футуродизайн – проектирование пространственной среды, образов, одежды будущего. Имеет широкое прикладное применение при
создании декораций, одежды для фильмов и игр в стиле «фэнтези».
11. Звуковой дизайн – создание специальных звуковых и акустических эффектов для использования в музыке и киноиндустрии.
12. Экологический дизайн – комплекс действий, направленный на формирование у общества бережного отношения к природным ресурсам, их целесообразному использованию, потреблению и утилизации.
13. Графический дизайн – процесс визуального воплощения образов с использованием типографики, фотографии и иллюстрации.
14. Полиграфический дизайн – процесс создания дизайн-макетов готовых к печати полиграфических изделий, таких как книги, журналы, визитки, бланки, плакаты, листовки и т. д.
15. Информационный дизайн – процесс приведения информации к структурированному виду с учетом эргономических и психологических факторов, в целях удобства и упрощения ее восприятия.
16. Дизайн имиджа человека – комплекс мероприятий по созданию образа человека в соответствии с заданными ключевыми позициями. За основу берутся такие составляющие: фактура – образ человека; история – возраст, пол, семейное положение, профессия; костюм; антураж – обстановка в которой находится и живет человек и в которую он должен гармонично вписываться; роль – голос, манеры, походка.
17. Арт-дизайн – проектирование различных пространственных форм, фактур, поверхностей с применением различных стилей в одном объекте, с высокой художественной детализацией различных элементов создаваемого объекта.
Список направлений в дизайне достаточно обширен, мы перечислили наиболее знаковые направления.
Определение веб-дизайна и задачи разработчика.
Термин «веб-дизайн» (от англ. web-design) имеет несколько определений:
– отрасль веб-разработки и разновидность дизайна, в задачи которой входит проектирование пользовательских веб-интерфейсов для сайтов или веб-приложений;
– процесс производства веб-сайтов, который включает техническую разработку, структурирование информации, визуальный (графический) дизайн и доставку по сети;
– разработка целого набора страниц, связанных взаимными ссылками для дальнейшего эффективного использования;
– решение сложных и взаимосвязанных задач, касающихся использования графики, программирования, верстки, разработки интерфейсов взаимодействия с пользователем.
В веб-дизайне различают понятия «фронтенд» (FrontEnd) и «бэкенд» (BackEnd).
Фронтенд – понятие, связанное с правилами отображения информации в браузере. В основе – использование таких инструментов, как HTML, CSS и JavaScript. HTML (HyperText Markup Language) содержит указания о разметке страницы, о взаимном расположении блоков, таких как «заголовок», «параграф», «список», «элемент списка». CSS (Cascading Style Sheets) задает свойства отображения элементов, такие как цвет, размер, обтекание, прозрачность и пр. JavaScript определяет механизмы взаимодействия веб-страниц с пользователем, предоставляя инструменты для анимации, обработки событий и пр. Другими словами, HTML определяет положение и расположение блоков информации на странице, CSS отвечает за их внешний вид, а JavaScript определяет их поведение.
Бэкенд – понятие, связанное с обработкой различных процессов на сервере. Для бэкенда используется множество разнообразных инструментов, доступных на серверах. Это могут быть универсальные среды программирования, такие как Ruby, PHP, Python, Java, JavaScript Node, bash. С серверной обработкой связаны и системы управления базами данных, такие как MySQL, PostgreSQL, MongoDB, Cassandra, Redis, Memcached и пр.
Веб-дизайнер должен:
– проектировать логическую структуру веб-страниц;
– продумывать наиболее удобные решения подачи информации;
– заниматься художественным оформлением веб-проекта.
Грамотный веб-дизайнер должен быть знаком с новейшими веб-технологиями и обладать соответствующими художественными знаниями и навыками.
История веб-дизайна и технологий, касающихся разработки сайтов и мультимедийных изданий, неразрывно связана с усовершенствованием технической и технологической составляющей интернета. Развивается элементная база компьютерной техники, совершенствуются технологии передачи данных по сети, появляются мониторы с различными технологиями отображения информации, разрешениями экранов. Технологии программирования и проектирования веб-ресурсов предоставляют разработчикам разнообразные возможности для усиления восприятия информации потенциальными пользователями сети.
За это время менялись и требования к квалификации вебдизайнера. Для первых дизайнеров необходимым умением считалось только знание HTML. Затем появляются требования к знаниям и умениям в графическом дизайне, создании мультипликации, обязательным становится умение работать в Photoshop и Flash, а также знание CSS.
Современный веб-дизайнер помимо вышеперечисленных знаний должен обладать коммуникативными навыками и аналитическим мышлением, чтобы понять и сформулировать пожелания заказчиков. Наличие большого количества самых разнообразных инструментов для веб-дизайна, с одной стороны, облегчает работу дизайнера, с другой стороны, накладывает некоторые ограничения на свободу художественного самовыражения. За исключением фрилансеров, сейчас разделена работа верстальщика и дизайнера. Это приводит к оптимизации процесса разработки веб-проекта, но все равно необходимо владение всем арсеналом возможностей HTML5, CSS3, JavaScript, Photoshop, Adobe Illustrator, умение работать с пакетами Figma, Axure, Sketch.
С развитием мобильного интернета появляются адаптивные сайты. Требование к дизайну сайта – сначала должна быть создана хорошая мобильная версия, затем десктопная. Как следствие, важно знать принципы мобильного дизайна. AppStore предлагает огромное количество мобильных приложений, и дизайнер мобильных приложений стал более востребованным специалистом.
Появление микроанимации добавило еще один пункт – дизайнеру нужно продумывать все: как и что будет двигаться, работать, сосуществовать.
Появляются инструменты создания сайтов без участия разработчиков. Это системы управления контентом, работающие на шаблонах и позволяющие генерировать HTML код практически без его знания.
Развитие технологий виртуальной и дополненной реальности ставит новые задачи перед дизайнерами в проектировании виртуальной реальности, 3D-интерфейсов. Сайтов под VR пока мало, но технологии развиваются стремительно. С развитием голосовых помощников прогнозируется, что исчезнут визуальные интерфейсы. А развитие нейроинтерфейсов хотя и в перспективе, но может привести к управлению действиями на сайте мыслями. Возможно, в ближайшем будущем пользователю не нужно будет ничего вводить и искать на сайте. Надев очки, достаточно будет сказать виртуальному помощнику, что нужно. Все остальное сделает программная среда. История веб-дизайна находится в стадии развития и совершенствования.
Сайт - как совокупность объектов.
Сайт можно рассматривать как совокупность объектов, а не целостный объект, другими словами, сайт – это составной объект.
Составными частями сайта могут быть:
– компьютерная программа (CMS, фреймворк, PHP и пр.);
– текстовые материалы;
– дизайн сайта;
– логотип;
– авторский шрифт;
– изображения, фотографии, рисунки, схемы;
– аудио- и видеоматериалы;
– слоган/девиз;
– скрипты, автоматизирующие какие-либо процессы на сайте.
Часть из них может быть создана самостоятельно, часть – заимствована из различных источников. Все они охраняются и, в случае нарушения имущественных прав на них, подлежат правовой защите лишь при определенных условиях.
Интернет-сайт – это совокупность самостоятельных материалов, систематизированных таким образом, чтобы эти материалы могли быть размещены в интернете. Так как интернет-сайт мы рассматриваем как составное произведение, то авторское право на сайт распространяется на него, как на иные составные произведения.
Современный веб-дизайн имеет разнообразные формы проявления, и чтобы соответствовать требованиям заказчика, необходимо четко понимать его потребности в создании сайта. Самые распространенные вопросы от менеджера проекта или дизайнера: «Цель создания сайта? Какие задачи вы пытаетесь решить через сайт?»
Определение целей создания сайта, круга функций, которые он должен выполнять, необходимо для лучшего понимания истинных задач, которые собираются решать с помощью сайта его владельцы. Правильные и конкретные цели позволят сделать сайт эффективным инструментом для заказчика, минимизировать затраты на его создание.
Создание сайта – это комплекс работ, и разработка дизайна как такового – это лишь один шаг в череде многих. Дизайн сайта напрямую зависит от целей его создания. Задачу формулирует заказчик, и часто ее формулировка ограничивается фразами «увеличить продажи», «привлечь больше клиентов», «привлечь больше абитуриентов», «рассказать о новом товаре». Проблема в том, что при указанных исходных данных требуется полное взаимодействие заказчика для проведения большой аналитической работы, особенно если область деятельности компании незнакома. Анализ позволит выделить конкурентоспособные запросы, недостатки конкурентов, скрытые возможности. Результатом станет определение путей достижения поставленных задач.
Как правило, представитель заказчика незнаком или малознаком с деятельностью дизайнеров, верстальщиков, иллюстраторов, программистов. Поэтому при определении цели сайта может быть множество уровней ее достижения. Так, сайт о моде может предлагать информацию о моде в конкретном городе, регионе, стране или общие тенденции моды, характерные для разных направлений. Чем больший охват темы задается, тем больше информации требуется разместить на сайте, что, соответственно, потребует больше затрат. Поэтому при формулировке цели по возможности необходимо давать конкретные вычисляемые и проверяемые цели: так, цель «привлечь как можно больше посетителей на сайт» заменить на «добиться посещаемости сайта не менее 50 человек в день», что позволит достигнуть цели гораздо быстрее и эффективнее.
Интернет упрощает процесс делового общения. Создание сайта позволяет избежать стандартных процедур ознакомления с деятельностью компании на ее территории.
Полноценный интернет-сайт компании предоставляет всем пользователям материалы (документы, аудио-, фото-, видеоматериалы), необходимые для формирования правильного представления о возможностях компании.
Можно выделить следующие цели создания сайта и их описания:
– осуществлять удаленную демонстрацию товара для его продвижения и увеличения продаж. На интернет-сайте компании можно разместить развернутую информацию о товарах и услугах. Помимо общего описания в рамках ресурса возможна публикация рейтингов и аналитических отчетов, организация консультаций клиентов, партнеров и дилеров;
– увеличить объем продаж, найти новых клиентов для компании. В сети расстояние не имеет принципиального значения, компания, при помощи интернет-сайта, может привлечь большее количество потенциальных клиентов и партнеров по всему миру, однако при условии изучения местных рынков и использования мультилингвистики;
– осуществлять информационную и сервисную поддержку клиентов и партнеров. При помощи сайта можно не только оперативно отвечать на вопросы, возникающие у пользователей, но и формировать базу часто задаваемых вопросов. Таким образом, можно избежать многократных разъяснений по решению одних и тех же задач, тем самым оптимизировав работу менеджеров;
– обеспечить круглосуточное предоставление услуг клиентам или партнерам. Сайт может функционировать круглосуточно;
– предоставить альтернативные способы обмена информацией между головным офисом и региональными представительствами, торговыми точками компании. Интернет обеспечит более скоростные, чем традиционные, каналы для передачи разного рода информации (документальной, аудио-, видеоинформации);
– обеспечить безотрывное от основной работы обучение или повышение квалификации сотрудников компании. Методики дистанционного корпоративного обучения зарекомендовали себя хорошо и обеспечивают живое общение между удаленными собеседниками;
– усилить маркетинговые исследования с целью корректировки работы компании с учетом удаленных рынков. Сайт позволяет компании проводить маркетинговые исследования, такие как анализ статистики посещений, результаты опросов и поисковых запросов, интерактивного общения, помогают максимально приблизить его информационное наполнение к запросам целевых аудиторий;
– сформировать положительный имидж в средствах массовой информации. СМИ во многом рассматривает интернет как источник первичной информации, поэтому сайт можно и нужно использовать как канал воздействия на журналистов;
– увеличить клиентскую базу за счет использования рекламных акций.
Необходимо понимать, какие действия пользователя и какие элементы сайта помогают посетителю и побуждают его оставаться на ресурсе, совершая целевые действия – заказ, переход, сообщение и т. д. Контактные данные должны присутствовать в доступности главной или продвигаемой страницы – скайп, телеграмм, почта и т. д.; наличие онлайн-консультанта, кнопки заказа обратного звонка, формы обратной связи. Оценивается удобство использования меню, количество всплывающих форм и их целесообразность.
Например, для интернет-магазинов это может быть:
– удобство наполнения корзины;
– количество шагов до завершения заказа;
– количество полей для заполнения;
– формат корзины;
– наличие и удобство использования фильтров;
– сортировка и выведение товара;
– удобство и наполнение карточек.
Для сайта учебного заведения необходимо обратить внимание на наличие следующих разделов:
– администрация;
– учащимся;
– сотрудникам;
– методический кабинет.
Связь с социальными сетями является одним из факторов ранжирования. Во многих тематиках именно социальные сети являются источником значительного объема целевого трафика.
Анализ юзабилити позволяет получить данные, которые положительно влияют на проектирование пользовательского интерфейса.
Как применить полученные данные?
1. Необходимо структурировать всю информацию. Показатели технических данных удобнее представить в табличной форме. На основе этого можно выделить наиболее сильные стороны конкурентов или конкретизировать слабые места, оптимизация которых даст преимущество в проектировании и дальнейшем продвижении разрабатываемого ресурса.
2. При систематизации данных необходимо исключить параметры, вносящие значительную погрешность. Это может быть сайт с большим объемом текста – по 30 000 знаков на странице, тогда как остальные конкуренты не выходят за пределы 4000 знаков. Рекомендуется убрать из анализа данные сайтов наподобие Википедии.
3. Проведя анализ дизайна, используемых технологий, функционала, ключевых слов для продвижения и поиска веб-сайта, необходимо указать их сильные и слабые стороны. Можно воспользоваться такими сервисами, как Яндекс.и Google. Это сервисы для поиска и выгрузки структуры сайтов, топ-выдачи по поиску и индекса качества сайта и многого другого.
Функциональные требования к веб-проекту.
Под функционалом веб-проекта понимается полезность и востребованность со стороны будущих посетителей. В этом пункте определяется и указывается, что должно быть на сайте.
Например:
– общая информация – сведения о компании, карта размещения, контактные данные, график работы;
– перечень услуг – в наглядном виде перечисляются услуги и их цена;
– персоналии – фото и персональные данные (фамилия, имя, номер кабинета, график приема, специализация).
В общем случае к функциональным элементам сайта относят следующие.
1. Новости, анонсы новостей. Новости создаются на основе стандартной страницы. Указывается, что должно содержаться в них (текст, фото, видео), количество новостей на странице. Публикуемые новости обязательно содержат дату публикации и автора. Указывается необходимость размещения ссылки на архив новостей, его вид (календарь, ссылка на страницы).
2. Импорт новостей. Импорт новостей подразумевает функцию автоматической публикации новостей с других сайтов. Указывается перечень сайтов, с которых импортируются новости, например, с вышестоящей или головной организации.
3. Отзывы, комментарии, голосования. Обратная связь важна практически для любого типа сайта. Указывается тип публикации (модерируемый или нет), а также способ отображения публикации – на отдельной странице, на главной странице, количество блоков на странице, возможность проставить оценку и ее вид (графический значок, цифровая оценка и т. д.).
4. Опросы. Указывается назначение и тип опроса, который должен быть размещен на сайте, его местоположение (на главной, на отдельной странице). Например, назначение опроса – «Степень удовлетворенности услугами ветеринарной клиники», а тип опроса – форма с одним ответом, с несколькими, со шкалой удовлетворенности (шкала Лайкерта). Отмечается возможность просмотра результатов этого и предыдущих опросов. Например, результаты опросов могут быть видимы всем или только зарегистрированным пользователям сайта.
5. Форма обратной связи. Обычно содержит несколько полей, в которых посетитель может представиться, оставить контакты и задать вопрос. Сообщение посетителя приходит на электронную почту, указанную владельцем сайта в настройках формы.
6. Одно окно для официальных сайтов.
7. Заявка / анкета. Указывается перечень полей, необходимых для формирования заявки или анкеты. Например, сайт конференции может содержать поля: ФИО, университет, должность, электронный адрес, название статьи, форма участия. Символом «*» отмечаются поля, обязательные для заполнения. Следующий пример: сайт ветеринарной клиники – заявка на посещение ветеринара с указанием животного и симптомами заболевания, или сайт логистической компании: начальный и конечные пункты, тип транспорта, тип груза, масса, габариты и т. д., на сайте предлагается рассчитать заранее ориентировочную стоимость перевозки грузов.
8. Вопрос – ответ. Этот раздел может иметь различные названия в зависимости от назначения сайта: например, «Задай вопрос специалисту» для ветеринарной клиники, магазина, поликлиники. Для учреждения образования можно использовать такие разделы: «Вопрос приемной комиссии», «Вопрос декану», «Свободный микрофон» и т. д. Фактически этот сервис представляет собой ленту вопросов и ответов. Данные функции можно реализовать с помощью блока для комментариев или создав отдельный блок.
9. Фотогалерея / виртуальный музей / виртуальная экскурсия. Указывается формат размещения (статические фото и их формат, галереи, способы размещения – отдельная страница, блоки). Необходимо указать, какое действие произойдет, если кликнуть по фотографии или виртуальному объекту: увеличение изображения, открытие в новом окне, переход на другую страницу с подробной информацией.
10. Слайдеры / карусели / скроллеры. Указывается желаемый тип элемента и возможное его расположение. Например, наличие не менее двух слайдеров на главной странице. Первый слайдер располагается в зоне основного контента или в хедере, содержит не менее 4 изображений. Второй слайдер размещается в футере или на отдельной странице с логотипами партнеров.
11. Загрузки. В зависимости от целей сайта можно загружать тексты, фото, видео, аудио, презентации, рекламные ролики. Указывается, какую информацию можно загружать, требования к формату, объему, размещению. Желательно предусмотреть модерацию. Здесь же может быть и подраздел «Загрузка документов». Учитывается, что иногда требуется загрузка официальных или личных документов – письмо, скан паспорта, требование и пр.
12. Скачивание документов. Дает возможность пользователям скачивать документы с сайта. Это может быть прайс-лист, типовой договор, каталог, расписание, анкета. Указывается перечень разрешенных документов или файлов с указанием максимального размера и формата для скачивания и раздел, в котором этот сервис должен находиться.
13. Регистрация. Необходима для доступа к закрытым разделам сайта: личный кабинет, корзина и т. д. Указывается, какие поля необходимы для заполнения формы регистрации, определяется процедура подтверждения регистрации (автоматически на электронную почту, по коду на мобильный телефон или др.), место расположения формы регистрации (отдельный пункт меню, блок, в хедере и т. д.). Можно предоставить возможность регистрации через социальные сети.
14. Доска объявлений. Этот сервис предполагает возможность публикации объявлений о продаже и покупке товаров и услуг, безвозмездной передаче имущества или животных, знакомствах и т. д. Определяется, какой тип доски будет использоваться – модерируемый, т. е. контролируемый администратором сайта, или немодерируемый, т. е. работающий автоматически. Также определяют способ размещения объявления – после регистрации или без регистрации, а также поля формы для внесения объявления.
15. Каталог товаров или услуг. Каталог с категориями и товарными страницами содержит текстовое описание, фото и при необходимости видео. В интернет-магазинах каталог дополняется возможностью сделать покупку онлайн. В этом случае можно предусмотреть требование об указании уровней цен, возможности отображения на сайте несколько вариантов цен на один товар, изменение цены для авторизованных и анонимных пользователей, сравнение товаров, которое по заданным параметрам поможет подобрать оптимальный вариант. Для интернет-магазинов предпочтительнее использовать фасетную организацию информации о товарах и соответствующие фильтры.
16. Спойлеры (аккордеон). Для экономии места или визуальной структуризации информации применяются спойлеры – своеобразные раскрывающиеся блоки, которые открывают спрятанный под ними контент.
17. Онлайн-калькулятор. Указывается тип калькулятора и его возможности, например, перевод одной валюты в другую, подсчет баллов, рейтинг и т. д. Здесь же дается алгоритм или формулы для расчетов.
18. Email-рассылка. Обычно реализуется сторонними сервисами. В этом случае дается указание на сервис, адрес для скачивания, способ встраивания в программный код сайта. Сайт выполняет только функции сбора подписок на рассылку. Указывается, кто имеет право на подписку – все пользователи или зарегистрированные.
19. Онлайн-консультант. Может реализоваться сторонним сервисом или иметь уникальное решение. Онлайн-консультант дает возможность посетителям в реальном времени пообщаться с представителем организации. В случае разработки уникального алгоритма консультанта необходимо дать описание алгоритма и технологий его реализации, иначе – указать источник заимствования.
20. Мультиязычность. Указывается, на каких языках сайт должен быть реализован и уровень раскрытия контента. Например, все страницы сайта должны быть продублированы на английском, китайском, русском, белорусских языках, или отдельные страницы дублируются на иностранных языках (указать, какие и в каком объеме). В случае использования автоматического переводчика указывается его источник.
21. Поиск. В случае внесения этого функционального элемента на сайт необходимо перечислить, что и по каким критериям допустимо искать. Это может быть простой поиск, расширенный, по ключевым словам и т. д. Также указывается, где находится блок поиска.
22. Личный кабинет / корзина / панель администратора / личная панель. Указывается степень доступа к разделам сайта, рекомендации по внешнему виду и разделам кабинетов, возможности доступных настроек.
23. Система платежей. Реализация возможности оплачивать заказы онлайн на сайте. Перечисляются возможные способы расчета с указанием реквизитов или платежных систем, или переходы на системы онлайн-оплаты с возможностью выбора банка, системы платежей и пр.
24. Форум / блог / тематическая конференция / обсуждение. Необходимо понимать, что отличие этого функционального блока на сайте состоит в его узкой практической направленности, обмене мнениями, помощи, общении с единомышленниками, публикации реального опыта. Перечисляется тематика тем форума, условия публикации (для зарегистрированных пользователей), условия модерации, степень ответственности за публикуемую информацию. Указывается расположение этого блока (отдельная страница с переходом из главного меню, ссылка в футере, блок на лендинге и т. д.).
25. Баннеры / партнеры / информационные ресурсы. Указывается, какие баннеры или ссылки на официальные ресурсы вышестоящих органов, партнеров могут быть размещены на сайте. При этом перечисляется, в каком виде и где размещаются указанные ссылки – в виде баннеров, например лента в футере, или отдельная страница со ссылками и логотипами организаций-партнеров и т. д.
26. Интеграции. В некоторых случаях возможна загрузка / выгрузка данных с сайта в автоматическом режиме. Необходимо указать алгоритм загрузки / выгрузки, периодичность, формат данных и используемые программы, например базы данных, и пр. Возможна интеграция с социальными сетями (указать, с какими).
27. Карта сайта. Представляет собой страницу-каталог, содержащую перечень страниц сайта с учетом их реальной вложенности. С его помощью посетители могут быстро ориентироваться по контенту сайта и находить интересующую их информацию. Как правило, такая карта оформляется на отдельной странице с применением пагинации (постраничной навигации). Ссылки на расположение карты могут размещаться в меню, футере, иметь графический символ-ссылку.
28. Печать. Указывается, где располагается кнопка «Печать» и перечень страниц / документов, которые возможно распечатать.
29. Счетчик посещений / скачиваний. Функция, показывающая, сколько раз посещали страницу или скачивали тот или иной файл.
30. Виджеты. Представляют собой небольшой информационный или функциональный блок, размещенный в узкой колонке сайта. Он может быть представлен в виде кнопки, баннера, строки поиска, текстового блока и т. п. Виджеты отображаются на всех страницах сайта и постоянно находятся на виду у пользователя.
31. Синемаграф. Художественное изображение с одной циклически анимированной деталью. Грамотно сделанный синемаграф способствует продвижению товара или услуги.
Перечень функциональных элементов сайта может быть расширен в зависимости от целей веб-сайта. Главное назначение – удобство и полезные сервисы для пользователя.
Размеры экрана и его компоновка
Дизайн интерфейса сайта и приложения, в отличие от простого графического дизайна, должен не только следовать общим художественным требованиям и последним трендам, но также быть в достаточно степени понятным и универсальным. Уровень технического развития на современном этапе позволяет выходить в интернет даже с телевизора и некоторых моделей холодильников.
Адаптивность дизайна пользовательского интерфейса заключается в универсальном визуальном отображении и адекватном расположении элементов интерфейса на большинстве устройств с доступом в интернет. В наше время, когда у всех пользователей самые различные мониторы, есть смысл разобраться в том, как будет отображаться та или иная информация на мониторах разного разрешения.
Существуют четыре типа экранной компоновки: фиксированной ширины, жидкая (или «резиновая»), эластичная и гибридная. Каждый тип имеет свои достоинства, ограничения и неоднозначности.
Фиксированная компоновка – применимая к компоновке этого типа ширина ограничена определенным количеством пикселов: в настоящее время чаще всего 960 пикселов. Это число лучше всего подходит для макетов на основе модульных сеток, так как оно делится на 3, 4, 5, 6, 8, 10, 12 и 15, а значит, обеспечивает разные варианты сеток. Компоновка с фиксированной шириной чаще всего реализуется в сети, так как она позволяет создавать графически насыщенные варианты дизайна, имеющие одинаковый вид на различных экранах. Однако в современной экосистеме устройств проблемы будут и у посетителей со слишком большими мониторами (у них справа появится незапланированное белое пространство), и у владельцев смартфонов и планшетов, которые уменьшают масштаб таких сайтов, чтобы поместить их на экране.
«Резиновая» компоновка – в этом варианте компоновки размеры задаются не в пикселах, а в процентах, что значительно увеличивает приспособляемость конечного результата. В результате не важно, какое устройство использует пользователь.
Эластичная компоновка – при этой компоновке ограничения определяются размером шрифта и измеряются в единицах em. 1 em равен высоте используемого по умолчанию шрифта. Предположим, размер основного текста – 16 пикселов. В этом случае 1 em равен 16 пикселов, а 2 em – 32 пиксела. Однако эластичная компоновка не гарантирует отсутствия горизонтальной прокрутки. Если при размере шрифта 16 пикселов вы задаете ширину контейнера 55 em, на любом экране с разрешением ниже 880 пикселов (16×55) появится горизонтальная прокрутка.
Гибридная компоновка – представляет собой комбинацию двух или трех ранее предложенных вариантов. Допустим, что под объявление выделено пространство в 300 пикселов. Можно сделать боковую панель фиксированной ширины 300 пикселов, а остальные столбцы можно задать в процентах. Это дает возможность поддерживать разработанную для объявления графику, остальная часть компоновки будет растягиваться.
Каждый из подходов имеет свои сильные стороны и свои ограничения. В конечном итоге все зависит от конкретного проекта. При использовании «резинового» дизайна необходимо учитывать следующее:
– общая композиция не должна нарушаться ни при каком разрешении монитора у пользователя;
– все элементы масштабируются в зависимости от размера экрана пользователя и размера шрифта;
– вся модульная сетка, блоки и прочие горизонтали масштабируются в процентах;
– все шрифты, отступы, вертикали масштабируются в единицах em (1 em – текущий размер шрифта). Можно выбрать любые пропорции от текущего шрифта: 2 em, 0,5 em и т. п.;
– исключение могут составлять изображения с ограничением в пикселах по вертикали.
Несмотря на то, какой вид компоновки выбран, необходимо позаботиться о том, чтобы целостная картина сайта не искажалась при отображении на различных экранах пользователей.
УЧЕНЬЕ - СВЕТ, А НЕУЧЕНЬЕ - ЧУТЬ СВЕТ И НА РАБОТУ!
