лаба. 2. Оформить отчет по найденному материалу какая поисковая система использовалась, сколько найдено ресурсов и привести в кратком виде материал по каждому разделу
 Скачать 49.5 Kb.
|
Лабораторная работа № 41. В Интернете найти информацию о цветовой схеме дизайна сайта, о шрифтах, модульной сетке, якорях и навигации. 2. Оформить отчет по найденному материалу: какая поисковая система использовалась, сколько найдено ресурсов и привести в кратком виде материал по каждому разделу. 3. С учетом рекомендаций по дизайну сайта и найденного в Интернете материала переработать выбор дизайна для своего сайта-визитки. 4. Проработать логотип, заголовки, выбор шрифтов, фон, структуру и цветовую гамму сайта, распределение материала, навигацию и использование разделителей. Задание 1-2. Поисковая система: Яндекс, найдено ресурсов: 6. 1) Цветовая схема сайта — это набор нескольких оттенков, которые будут использоваться в дизайне. Она поможет создать более продуманный и целостный дизайн, а еще — упростит и ускорит работу. Чаще всего дизайнеры используют уже готовую палитру, опираясь на фирменный стиль, но, если такового нет, нужно сделать схему самому. Лучше всего приступать к созданию цветовой схемы уже после того, как будет готов прототип — в этом случае будет известно, какие элементы будут присутствовать на страницах и сколько оттенков может понадобиться. Крупные компании не случайно выбирают ту или иную цветовую схему для сайта. Это осознанный выбор, являющийся частью брендинга и маркетинга. Красно-оранжевый, черный и ярко-синий привлекают импульсивных покупателей. Такие цветовые решения зачастую можно встретить в сетях быстрого питания, магазинах одежды и на дешевых распродажах. Тёмно-синий и бирюзовый привлекают покупателей с ограниченной суммой денег. Эти цвета можно встретить в банках и больших универмагах. Малиновый, лазурный и розовый привлекают классических покупателей. Распространены в магазинах одежды. Чтобы привлечь нужных вам покупателей, используйте комбинации различных цветов. Сервисы подбора цветовых схем для сайта Различных инструментов создания палитры существует много, например: Adobe Color CC — разработка компании Adobe, подарившей нам Photoshop, Illustrator и десяток других программ. Инструмент отличается гибкими настройками, а выбранные цветовые схемы для сайта можно сохранять в своей библиотеке. Colormind — продвинутый сервис для создания цветовой схемы для сайта. Онлайн-инструмент не только генерирует палитру, но и позволяет очень тонко настраивать каждый из оттенков, а также составляет подборку цветов на основе загруженного изображения. Colors — бесплатный генератор цветовой палитры, за считанные секунды создает хорошие варианты. Если предложенная системой подборка вам не нравится, то можно сгенерировать новую или задать определенные цвета и заменить какие-то оттенки. 2) О шрифтах. Большинство сайтов в сети используют стандартные шрифты. То есть те, которые присутствуют у пользователей на компьютере. При этом существует список так называемых безопасных шрифтов. Это те шрифты, которые с вероятностью 99% присутствуют на всех компьютерах в мире, а также на смартфонах и в планшетах. При использовании таких шрифтов текст будет выглядеть одинаково на Windows, Linux, iOS, Mac OS и Android. Безопасные шрифты для веб После прочтения не одной тонны страниц на эту тему я составил свой список 100% совместимости шрифтов между Windows и Mac. Windows fonts / Mac fonts / Font family Arial, Arial, Helvetica, sans-serif Arial Black, Arial Black, Gadget, sans-serif Courier New, Courier New, monospace Lucida Sans Unicode, Lucida Grande, sans-serif Tahoma, Geneva, sans-serif Times New Roman, Times New Roman, Times, serif Verdana, Verdana, Geneva, sans-serif 3) Модульная сетка в веб-дизайне является основополагающим решением, которое не только улучшит юзабилити сайта, но и существенно упростит жизнь разработчикам. Какие бывают сетки? 1. Блочная сетка — грубая разметка площади на блоки. 2. Колоночная — имеющая колонки в своей структуре. 3. Модульная — состоящая из пересекающихся прямых, которые образуют модули. 4. Иерархическая — сетка с интуитивным размещением блоков, без какой-либо логической структуры. В отличие от полиграфического дизайна, сетка в веб-дизайне может быть не только фиксированной, но и динамической. К примеру, вы можете сделать одну или несколько колонок макета растягиваемыми, резиновыми, задав их ширину в процентах, а размер остальных колонок зафиксировать. 4) Ссылка якорь простыми словами — это ссылка на определенный текст, находящийся на одной и той же странице (возможны якорные ссылки на другие страницы). Другими словами анхоры существуют для создания ссылки, которая прокрутит нашу страницу до определенного, выбранного текста, то-есть создает простую навигацию по странице. Якоря внедряются для того, что бы читатель сумел найти нужный ему участок текста в статье, не перечитывая все содержание. То-есть, навигация по странице сайта создаеться с помощью ссылки якоря, это в разы уменьшает время потраченное посетителем на прокрутку и поиск информации. Представьте себе большое руководство или какую нибудь инструкцию, символов эдак на несколько сотен тысяч, без якорей передвижения по ней станет просто немыслимым. Можно часами искать то что нужно. Именно в случаях наподобие этого и приходят на помощь якоря. Якорь работает следующим образом: В одном месте мы выделяем нужный нам фрагмент текста, делаем его ссылкой на нужный нам участок страницы. В нужном нам участке страницы ставим якорь, на котором остановиться страница при нажатии на ссылку созданной в предыдущем пункте. На практике все очень просто, находим на странице ссылку на нужный нам участок текста, нажимаем на нее и сразу же оказываемся на той позиции которую мы пожелали увидеть. 5) Навигация на сайте - один из важнейших инструментов управления поведением пользователя. Чем понятнее и удобнее навигация, тем выше вероятность того, что посетитель найдет нужную информацию, совершит целевое действие и впоследствии вернется на ресурс. Элементы навигации сайта Основная задача каждого элемента - помочь пользователю перейти на нужную страницу и получить информацию. Какие элементы можно и нужно использовать для организации навигации по сайту? Меню Главный элемент при создании навигации - меню сайта. Это панель, на которой расположены ссылки на Логотип и другие обозначения главной страницы Распространенная практика - добавить на логотип компании ссылку на главную страницу сайта. Например, при нажатии на логотип нашей студии вы сразу попадаете на главную.сновные разделы ресурса. Иконки Для облегчения восприятия клиентом информации на страницу добавляют не текстовые ссылки, а иконки. Самые распространенные иконки для навигации - лупа (поиск), дом (главная страница), сердце (избранное) и корзина (страница, где можно оформить заказ). Такие иконки разрабатываются в одном стиле и помещаются в шапку сайта. Текстовые ссылки Еще один элемент навигации - ссылки на страницы, встроенные в контент. «Хлебные крошки» «Хлебные крошки» - вспомогательная навигация для пользователей, которая представляет собой путь от главной страницы для текущего раздела. К примеру, до данной статьи путь выглядит так: Главная > Уютный блог о дизайне > Навигация в дизайне сайта: основные правила и примеры использования Все части данной строки, кроме текущей страницы - кликабельны и ведут на соответствующий раздел сайта. Иногда текущую страницу опускают и остаются только предыдущие разделы. Такой способ помогает пользователю понять, где он находится и как вернуться назад. Футер Футер или подвал сайта - область в самом конце страницы, на которой размещены ссылки на разделы сайта, контакты организации, а также ссылки на документы и правила использования ресурса. С помощью футера можно найти любую категорию на сайте. Футер оформляется отдельно, в некоторых случаях вразрез с общей стилистикой сайта. Кнопка для возврата При скроллинге возникает проблема - как пользователю быстро вернутся к началу страницы не прокручивая ее заново? Для решения этой задачи делают специальные кнопки для возврата в виде стрелок в положении «вверх». Этот прием отлично подходит для информационных сайтов, длинных лендингов, сайтов с бесконечной лентой. 1.1)https://skillbox.ru/media/design/kak_vybrat_i_sozdat_tsvetovuyu_skhemu_dlya_sayta/ - цветовая схема 1.2.) https://www.internet-technologies.ru/articles/kak-pravilno-vybrat-cvetovuyu-shemu-dlya-sayta.html - цветовая схема 2) https://moonback.ru/page/site-font - шрифты 3) https://webformyself.com/karkas-sajta-ili-modulnaya-setka-v-veb-dizajne/ - модульная сетка 4) https://yrokiwp.ru/cms-wordpress/osnovyi/navigaciya-po-stranice-wordpress/ - якоря 5) https://idbi.ru/blogs/blog/navigatsiya-v-dizayne-sayta - навигация |