Сравнивание аналогов сайтов и создание дизайна

Дата: 2025-06-02; Просмотры: 19
Оценка:
0.00 из 5.00 — оценок
Скачиваний: 0

1.5 Анализ сайтов конкурентов

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

Для поиска сайтов был создан запрос в нескольких популярных поисковых системах. Для наиболее эффективного ответа на запрос определено несколько словосочетаний, которые наиболее четко и исчерпывающе характеризуют суть моего поискового запроса. В качестве таких словосочетаний были определены «виртуальный тур», «3D тур». Данные запросы производились в поисковых системах: «yandex.ru», «google.ru».

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

Таким образом, среди просмотренных были выделены сайты, которые можно отнести к конкурирующим. Производим подробный анализ данных сайтов.

Сайт Российского университета дружбы народов «РУДН» - http://e-tour.rudn.ru/ Сайт рассчитан на пользователей, не только владеющих русским языком, но и иностранных граждан, что обеспечено возможностью выбора языка (русский, английский, итальянский, французский, китайский) на каждой странице сайта.

Содержание сайта более подробно и полно излагает деятельность университета, что заинтересует даже не посещающего ранее виртуальный тур пользователя. Контент размещен в верхней части страницы по центу, что благоприятно для восприятия. Дизайн сайта выполнен в классическом стиле. Но цветовая гамма отличается серыми, скудными цветами. Однако в самом виртуальном туре отличительной чертой является: водянистый логотип университета в левом верхнем углу, который обеспечивает возврат на главную страницу сайта, навигационная панель внизу экрана для передвижения и кнопка навигации в правом верхнем углу, при нажатии на которую можно вернуться к меню выбора локаций университета. Но при проверке на валидность данного сайта появляется семь предупреждений, что свидетельствует о не очень грамотной верстке сайта (проверка на валидность проводилась с помощью онлайн сервиса Markup Validation Service).

Сайт Санкт-Петербургский университет технологий управления и экономики(www.spbume.ru). Данный сайт в отличие от остальных рассмотренных привлекает пользователя возможностью прослушивания гида, который расскажет о преподавателях, интересных исторических справках, связанных с университетом. Так же имеется возможность переключения виртуального тура в режим VR и обратно. Имеется навигационная панель в шапке сайта с миниатюрными изображениями локаций университета и в подвале с возможностью перемещения (вверх, вниз, влево, вправо). Хорошо налажена интерактивность с посетителем сайта.

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

· построение удобной системы навигации;

· работа над оптимизацией структуры web-страниц;

· выбор удачной технологии верстки; определение шрифтовых размеров и их цветовых решений;

· качественная подготовка графических изображений;

· соблюдение «единого стиля» сайта;

· баланс «главного» и «второстепенного» на странице;

· активная работа над деталями; создание упора на функциональность сайта.

 

 

1.6 Онлайн-сервис для скетча сайта – Draw . io

Draw.io — это сервис, предназначенный для формирования диаграмм и схем. Сервис разделён на три части — меню, панель объектов и сам документ.

С помощью веб-сервиса Draw.io можно создавать:

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

В меню сервиса диаграмму или схему можно отформатировать следующими настройками:

Также доступен экспорт готовых схем в изображение (PNG, GIF, JPG, PDF), синхронизация полученных документов с Google Диском.

 

1.7 Текстовый редактор - Sublime Text

Sublime Text— проприетарный текстовый редактор. Поддерживает плагины на языке программирования Python.

Возможности :

· Некоторые возможности:

· Быстрая навигация (Goto Anything)

· Командная палитра (Command Palette)

· API плагинов на Python

· Одновременное редактирование (Split Editing)

· Высокая степень настраиваемости (Customize Anything)

Поддержка языков:

Sublime Text поддерживает большое количество языков программирования и имеет возможность подсветки синтаксиса для C, C++, C#, CSS, D, Dylan, Erlang, HTML, Groovy, Haskell, Java, JavaScript, LaTeX, Lisp, Lua, Markdown, MATLAB, OCaml, Perl, PHP, Python, R, Ruby, SQL, TCL и XML.

Особенности:

· Интерфейс. Редактор содержит различные визуальные темы, с возможностью загрузки дополнительных.

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

Есть несколько режимов экрана. Один из них включает от 1 до 4 панелей, с помощью которых можно показывать до четырёх файлов одновременно. Полноценный (free modes) режим показывает только один файл без каких-либо дополнительных меню вокруг него.

· Выделение столбцов и множественная правка. Выделение столбцов целиком или расстановка нескольких указателей по тексту, что делает возможным мгновенную правку. Указатели ведут себя, будто каждый из них — один в тексте. Команды типа перемещение на знак, перемещение на строку, выборка текста, перемещение на слово или его части (CamelCase, разделённый дефисом или подчёркиванием), перемещение в начало/конец строки и т. д., влияют на все указатели независимо и сразу, позволяя править сложноструктурированный текст быстро, без использования макрокоманд или регулярных выражений.

· Автодополнение. Когда пользователь набирает код, Sublime Text, в зависимости от используемого языка, будет предлагать различные варианты для завершения записи. Редактор также автоматически завершает созданные пользователем переменные.

· Подсветка синтаксиса и высокая контрастность. Тёмный фон Sublime Text предназначен для увеличения контрастности текста. Основные элементы синтаксиса выделены разными цветами, которые лучше сочетаются с тёмным фоном, нежели со светлым.

· Поддержка систем сборки. Sublime Text позволяет пользователю собирать программы и запускать их без необходимости переключаться на командную строку. Пользователь также может настроить свою систему сборки и включить автоматическую сборку программы каждый раз при сохранении кода.

· Заготовки (сниппеты). Сохранение фрагментов часто используемого кода, ключевые слова для их запуска.

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

Другие особенности

· Дополнительно реализована функция автосохранения, помогающая пользователям не потерять проделанную работу.

· Настраиваемые комбинации клавиш и инструмент навигации позволяют назначать свои комбинации клавиш для меню и панелей инструментов (только для первой версии, во второй и третьей — Command Palette).

· Возможность поиска по мере набора используется для поиска в документе.

· Функция проверки синтаксиса работает подобным же образом, проверяя корректность прямо во время ввода.

· Есть возможность автоматизации с помощью макросов и повтора последних действий.

· Команды редактирования, включая редактирование отступов, переформатирование параграфов и объединение строк.