Створення адаптивного дизайну вебсайту кафе-кав’ярні "Eastern Coffee" за допомогою Figma

Abstract

Кваліфікаційна робота присвячена дослідженню теоретичних і практичних аспектів розробки користувацьких інтерфейсів та створенню адаптивного дизайну вебсайту кафе-кав’ярні «Eastern Coffee» за допомогою інструменту Figma. В першому розділі кваліфікаційної роботи описано теоретичні основи розробки ефективного UI/UX інтерфейсу. Висвітлено базові принципи адаптивного вебдизайну. Розглянуто та порівняно сайти-конкуренти. Проаналізовано предметну область та сформовано вимоги до майбутнього дизайну вебсайту. В другому розділі кваліфікаційної роботи визначено ключові вимоги до цифрового середовища розробки. Досліджено можливості актуальних графічних редакторів. Подано обґрунтування вибору платформи Figma для реалізації проєкту. В третьому розділі кваліфікаційної роботи описано формування візуальної концепції, типографіки та колористики інтерфейсу. Проаналізовано структуру десктопної версії та розроблено адаптивний макет для мобільних пристроїв. Проведено розробку інтерактивного прототипу та моделювання користувацьких сценаріїв. Об’єкт дослідження: процес проєктування та розробки адаптивного користувацького інтерфейсу для вебсайту.

The qualification work is dedicated to the research of theoretical and practical aspects of user interface development and the creation of an adaptive website design for the "Eastern Coffee" coffee shop using the Figma tool. The first section of the qualification paper describes the theoretical foundations of developing an effective UI/UX interface. The basic principles of adaptive web design are highlighted. Competitor websites are reviewed and compared. The subject area is analyzed, and the requirements for the future website design are formed. In the second section of the qualification work, the key requirements for the digital development environment are determined. The capabilities of current graphic editors are investigated. The rationale for choosing the Figma platform for the project implementation is presented. In the third section of the qualification work, the formation of the visual concept, typography, and color scheme of the interface is described. The structure of the desktop version is analyzed, and an adaptive layout for mobile devices is developed. The development of an interactive prototype and the modeling of user scenarios are carried out. Object of research: the process of designing and developing an adaptive user interface for a website.