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

Сравнительный анализ дизайна интернет сайтов
https://y-chef.ru/
Сравнительный анализ дизайна интернет сайтов
Сравнительный анализ дизайна интернет сайтов
https://rocketbank.ru/
Сравнительный анализ дизайна интернет сайтов
Сравнительный анализ дизайна интернет сайтов
https://www.yota.ru/
Сравнительный анализ дизайна интернет сайтов
Сравнительный анализ дизайна интернет сайтов
https://www.amazon.com/
Сравнительный анализ дизайна интернет сайтов
https://parlament.tj/ru
Сравнительный анализ дизайна интернет сайтов
Сравнительный анализ дизайна интернет сайтов
Сравнительный анализ дизайна интернет сайтов
https://admkrai.krasnodar.ru/
Сравнительный анализ дизайна интернет сайтов
Сравнительный анализ дизайна интернет сайтов
Сравнительный анализ дизайна интернет сайтов
https://www.gov.spb.ru/
Сравнительный анализ дизайна интернет сайтов
Сравнительный анализ дизайна интернет сайтов
Сравнительный анализ дизайна интернет сайтов
https://www.state.gov/
Сравнительный анализ дизайна интернет сайтов
Сравнительный анализ дизайна интернет сайтов
https://pokraslampas.com/
Сравнительный анализ дизайна интернет сайтов
https://kirkorov.ru/
Кто-то скажет, слишком много черного, но таков цвет настроения.
http://www.robertwilson.com/
Сравнительный анализ дизайна интернет сайтов
https://college.harvard.edu/
Сравнительный анализ дизайна интернет сайтов
https://www.msu.ru/
Сравнительный анализ дизайна интернет сайтов
https:// точкабудущего.рф /
Сравнительный анализ дизайна интернет сайтов
https://2020.rukamifest.com/
Сравнительный анализ дизайна интернет сайтов
Сравнительный анализ дизайна интернет сайтов
http://24run.ru/
Сравнительный анализ дизайна интернет сайтов
1/44
Средняя оценка: 4.9/5 (всего оценок: 48)
Код скопирован в буфер обмена
Скачать (73381 Кб)
1

Первый слайд презентации: Сравнительный анализ дизайна интернет сайтов

Подготовила студентка ЖУР 3-19-01 Шилова Анна

Изображение слайда
2

Слайд 2: https://y-chef.ru/

ЯндексШеф - сервис доставки еды на дом, а конкретно продуктов и рецептов для их приготовления. Сам сайт представляет из себя лэндинг-страницу, с краткой информацией о работе сервиса, вариантах доставки и списке городов, в которых вы можете сделать заказ. Также есть ссылка на скачивание приложения посредством play market и app store

Изображение слайда
3

Слайд 3

Сайт имеет следующую структуру: Страница входа, раздел «Главная» Четыре страницы перехода: «Аналоги», «Пробный заказ», «Города» и «Контакты» С боку от «новостной ленты» есть картинки-ссылки на цифровые магазины

Изображение слайда
4

Слайд 4

Сайт оформлен в минималистичном стиле, с соответствующим количеством элементов геометрии. Основным цветом является белый, также присутствуют дополнительные цветовые элементы Прекрасный пример простого лэндинга — и информации достаточно, чтобы посетитель сразу понял, что ему предлагают. Контраст достигается за счет цвета — ничего лишнего. Уникальные авторские картинки — всегда хорошо: R : 255 G : 221 B : 41 R : 248 G : 65 B : 56 R : 255 G : 255 B : 255

Изображение слайда
5

Слайд 5: https://rocketbank.ru/

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

Изображение слайда
6

Слайд 6

Редкий пример «горизонтального» лендинга — контент скроллится не сверху внизу, а слева направо.  Много «воздуха», страница не перегружена ни текстовой, ни визуальной информацией. Удачный первый экран: крупно — объемное изображение и кнопка «Заказать карту»

Изображение слайда
7

Слайд 7

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

Изображение слайда
8

Слайд 8: https://www.yota.ru/

Сайт довольно крупного оператора на территории РФ. Является разноплановым сайтом, который выполняет сразу несколько функций: Содержит информацию о политике компании Имеет раздел с оплатой и переводом Позволяет онлайн оформлять сим-карты Информирует о уровне покрытия сети

Изображение слайда
9

Слайд 9

А это отличный пример вертикального лэндинга. Один экран, все что мы видим — 4 ссылки слева и большой голубой баннер справа, состоящий из трех слайдов: «Реклама интернета для планшета» — «Реклама скидки 50% за привязку карты» — «Реклама Wi-Fi роутера для YOTA».

Изображение слайда
10

Слайд 10

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

Изображение слайда
11

Слайд 11: https://www.amazon.com/

Все мы знакомы с этим интернет-магазином, но немногие знаю, что изначально на сайте продавались только книги. Придумывая название своему проекту, Джефф Безос просматривал словарь и остановился на слове « Amazon », поскольку Амазонка является экзотической, непохожей на другие и самой большой рекой в мире. Именно таким он хотел сделать и свой магазин и добился этого.

Изображение слайда
12

Слайд 12

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

Изображение слайда
13

Слайд 13: https://parlament.tj/ru

- Официальный сайт правительства Таджикистана. На нем содержится различная административная информация, последние новости и события, законы и постановления, а также имеется возможность записаться на прием в парламент или к депутату

Изображение слайда
14

Слайд 14

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

Изображение слайда
15

Слайд 15

Неотъемлемой частью сайта является его строка-навигатор. В данном случае она состоит из 6 разделов: Главная / Закон и постановление / Обзор законов / Встречи / Новости / Контакты В каждом из разделов находится неотъемлемая часть информации, которая помогает людям быстро и удобно ознакамливаться с информацией своей республики

Изображение слайда
16

Слайд 16

Изображение слайда
17

Слайд 17: https://admkrai.krasnodar.ru/

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

Изображение слайда
18

Слайд 18

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

Изображение слайда
19

Слайд 19

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

Изображение слайда
20

Слайд 20

Изображение слайда
21

Слайд 21: https://www.gov.spb.ru/

На официальном сайте Администрации Санкт‑Петербурга размещается информация о деятельности Губернатора Санкт‑Петербурга, Правительства Санкт‑Петербурга, Администрации Губернатора Санкт‑Петербурга и иных исполнительных органов государственной власти Санкт‑Петербурга.

Изображение слайда
22

Слайд 22

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

Изображение слайда
23

Слайд 23

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

Изображение слайда
24

Слайд 24

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

Изображение слайда
25

Слайд 25: https://www.state.gov/

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

Изображение слайда
26

Слайд 26

Главная страница оформлена в виде скопления картинок (ссылок) с набором текста, передающим суть раздела. Помимо основных разделов, представленных картинками, также есть дополнительные ссылки, представленные словом « more »

Изображение слайда
27

Слайд 27

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

Изображение слайда
28

Слайд 28: https://pokraslampas.com/

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

Изображение слайда
29

Слайд 29

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

Изображение слайда
30

Слайд 30: https://kirkorov.ru/

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

Изображение слайда
31

Слайд 31: Кто-то скажет, слишком много черного, но таков цвет настроения

Просто Удобно Лаконично Стильно Современно Кто-то скажет, слишком много черного, но таков цвет настроения.

Изображение слайда
32

Слайд 32: http://www.robertwilson.com/

Сайт американского театрального режиссёра, сценографа и драматурга, одного из крупнейших представителей театрального авангарда конца ХХ — начала XXI века На главной странице много свободного пространства, на котором появляются фотографии спектаклей, что является хорошим решением, однако оформление навигационной панели с мелким шрифтом разделов внизу страницы может показаться не вполне удобным для некоторых пользователей

Изображение слайда
33

Слайд 33

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

Изображение слайда
34

Слайд 34: https://college.harvard.edu/

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

Изображение слайда
35

Слайд 35

Изображение слайда
36

Слайд 36: https://www.msu.ru/

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

Изображение слайда
37

Слайд 37

Изображение слайда
38

Слайд 38: https:// точкабудущего.рф /

Это сайт самой современной средней общеобразовательной школы России «Точка Будущего» в городе Иркутск. Сайт тоже сделан в виде вертикального лэндинга. К плюсам можно отнести минималистичное, современное оформление, а так же удобство в интуитивном управлении – не нужно нажимать на кнопки, чтобы увидеть подразделы, достаточно навести курсор Из минусов можно выделить достаточно мелкий шрифт и отсутствие масшатаба некоторых фотографий на главной странице

Изображение слайда
39

Слайд 39

Изображение слайда
40

Слайд 40: https://2020.rukamifest.com/

Сайт всероссийского конкурса новаторский идей «Руками» был создан студией Артемия Лебедева специально к началу проведения данной олимпиады. Дизайна выполнен в виде «бесконечного» космоса, на которой расположены различные элементы – планеты, галактики и звезды (различные разделы: галерея работ, треки номинаций, различные мини-игры)

Изображение слайда
41

Слайд 41

Изображение слайда
42

Слайд 42

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

Изображение слайда
43

Слайд 43: http://24run.ru/

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

Изображение слайда
44

Последний слайд презентации: Сравнительный анализ дизайна интернет сайтов

Изображение слайда