СПОСОБ РЕАЛИЗАЦИИ ГРАФИЧЕСКОГО ИНТЕРФЕЙСА В КОНТЕКСТЕ РАЗЛИЧНЫХ ЦВЕТОВЫХ СХЕМ

WAY OF GRAPHIC INTERFACE IMPLEMENTATION IN DIFFERENT COLOR SCHEMES CONTEXT

Maxim Beryanov

student, PIKT faculty, ITMO University,

Russia, Saint-Petersburg

АННОТАЦИЯ

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

ABSTRACT

Web design is a branch of web development and a type of design whose goal is to implement web user interfaces for websites or web applications. This article proposes to consider an interesting approach to designing a web interface with a reference to the use of coloring the title part of a website with a specific HTML-tag especially in Safari browser on macOS.

Ключевые слова: дизайн, веб-интерфейс, веб-приложение, веб, Safari.

Keywords: design, web interface, web application, web, Safari.

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

Рисунок 1. Красная цветовая схема

Рисунок 2. Синяя цветовая схема

Рисунок 3. Зеленая цветовая схема

В данной статье предлагается посмотреть на подход к дизайну в некотором другом отношении – отличные друг от друга цветовые схемы в зависимости от страницы. Конечный результат можно увидеть на рисунках 1, 2 и 3. Определенно, присутствует карточный интерфейс, но сами карточки являются легкими, с небольшой послойной прозрачностью – примерно в 25-30% белого непрозрачного цвета без размытия, так как оно в данной концепции и не требуется.

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

Таким образом, имеется главная подложка, на которой размещаются элементы-карточки, в каждой карточке присутствует кнопка добавления в избранное. Быстрым способом это можно реализовать с помощью классов Tailwind CSS [2] (рисунок 4). 

Рисунок 4. Код карточки

Наиболее интересным вариантом использования подобного решения является браузер Safari [3] с недавним обновлением, где было добавлено компактное отображение вкладок. Дело в том, что теперь при открытии сайта верхняя панель навигации окрашивается в определенный акцентный цвет сайта. Благодаря использованию карточек описанным выше образом, можно подстроить этот цвет под сливаемый с фоном цвет нижней подложки с помощью тега ‘<meta name="theme-color" content="white"/>’ [4], где в атрибут content кладется нужный нам цвет. Происходит это добавление при первом открытии сайта, либо при переключении между вкладками с помощью использования императивных возможностей языка под названием JavaScript [5] (рисунок 5).

Рисунок 5. Изменение содержимого тега с помощью JS

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

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

Список литературы:

1. Что такое flat design или плоский дизайн [Электронный ресурс] URL: https://skillbox.ru/media/design/chto_takoe_flat_design/ (дата обращения: 04.12.2022).
2. Tailwind CSS [Электронный ресурс] URL: https://tailwindcss.com/ (дата обращения: 04.12.2022).
3. Safari [Электронный ресурс] URL: https://www.apple.com/ru/safari/ (дата обращения: 04.12.2022).
4. Theme-Color [Электронный ресурс] URL: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta/name/theme-color (дата обращения: 04.12.2022).
5. JavaScript [Электронный ресурс] URL: https://developer.mozilla.org/ru/docs/Web/JavaScript (дата обращения: 04.12.2022).