Създаване на дизайн концепция, маркетингова стратегия и функционален уебсайт за e-commerce платформа

i

Увод

Дигитализацията в съвременния бизнес е ключов фактор за устойчиво развитие. Настоящият дипломен проект проследява цялостния процес (Full-Stack разработка) при създаването на съвременен електронен магазин за бранда ArtInnka Handmade Gifts. Проектът обхваща всички етапи – от първоначалната бизнес идея и маркетингова стратегия, през визуалното планиране, до сървърното програмиране и защитата на личните данни.

ArtInnka предлага уникални ръчно изработени артикули (макраме) и бижута от полускъпоценни камъни. Тъй като тези продукти носят силна емоционална стойност, стандартните масови шаблони за онлайн магазини не отразяват правилно идентичността на бранда. Затова е взето решение платформата да бъде изградена изцяло от нулата (Custom Development), поставяйки фокус върху персонализираното потребителско изживяване и визуалния Storytelling.

1

Проектиране на уеб страница

Проектирането започна с детайлно предварително проучване и анализ на пазара. Установено бе, че електронната търговия с ръчно изработени продукти бележи стабилен ръст, но изисква специфичен маркетингов подход. Бе съставен подробен SWOT анализ (визуализиран в секция "Графики"), който идентифицира уникалността на продуктите като основна сила на бранда.

Целева аудитория

Профилът на идеалния клиент обхваща предимно потребители (основно жени на възраст 20-50+ години), които избягват масовото фабрично производство. Те търсят продукти с енергийна и емоционална стойност, ценят личното отношение към детайла и имат афинитет към естествените материали.

Схематичен дизайн и Информационна архитектура

За да се предотврати объркването на потребителя, бе изградена изчистена информационна архитектура. Преди фазата на програмиране бяха създадени Wireframes (схематични модели), които дефинират разположението на основните елементи.

Начална страница (Home)
Каталог Продукти
Макраме / Камъни
Детайли
Продуктова страница
Количка
Финален Checkout
Админ Панел
Управление
Схематичен дизайн
2

Визуално оформяне на уеб сайт с CSS

За постигане на уникална визуална идентичност, дизайнът е реализиран изцяло чрез ръчно написан Custom Cascading Style Sheets (CSS). Този подход гарантира "чист" код, висока скорост на зареждане и пълна свобода при позиционирането на елементите.

Схематичен дизайн

В основата на дизайна стои CSS Box Model. За да се осигури перфектна адаптивност (Responsive Web Design) за мобилни устройства, таблети и десктоп монитори, са използвани съвременните структури Flexbox (за едномерно подреждане на навигации и менюта) и CSS Grid Layout (за изграждане на сложната продуктова решетка на каталога).

style.css — Пример за CSS Grid архитектура 
/* Адаптивна решетка за продуктовия каталог */
.product-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 2rem;
    padding: 2rem;
}
/* Flexbox за правилно центриране на съдържанието в картата */
.product-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    border-radius: 12px;
}
3

Проектиране и реализация на база данни (Back-end)

Красивият дизайн е подкрепен от стабилна и сигурна сървърна архитектура. Бизнес логиката е написана на Обектно-ориентиран PHP, което позволява обработката на потребителски сесии, пресмятане на цени в количката и валидация на форми.

Информацията се съхранява в нормализирана релационна база данни, изградена на MySQL. Структурата е проектирана така, че да се избегне дублирането на данни (Data Redundancy).

Таблица (MySQL) Описание на съдържанието Ключови полета
users Регистър на клиентите и администраторите в системата. id, email, password_hash, role
products Продуктов каталог с физически характеристики на артикулите. id, title, price, image_url, stock
inquiries Проследяване на постъпилите поръчки и запитвания. id, user_id, status, created_at

За да се осъществи сигурна комуникация между PHP и MySQL, е използван абстрактният слой PDO (PHP Data Objects). Този стандарт е задължителен за съвременните уеб приложения, тъй като позволява работа с "подготвени заявки" (prepared statements), блокирайки опитите за SQL инжекции.

Схематичен дизайн
4

Оценка и SEO оптимизация на уеб сайт

Техническата реализация на проекта е съобразена с най-високите съвременни стандарти за бързодействие и достъпност, зададени от Google (Core Web Vitals). Използван е правилен семантичен HTML5 код, както и динамични мета описания, които осигуряват отлично индексиране от търсачките (On-Page SEO).

За да се подобри потребителското изживяване, в платформата е внедрена сложна асинхронна JavaScript логика. Чрез Fetch API ключови операции (като преизчисляване на валута или добавяне в количка) се случват в реално време, без презареждане на страницата.

script.js — Асинхронна комуникация (AJAX / Fetch API) 
// Асинхронно добавяне на продукт в количката
function addToCart(productId, quantity) {
    fetch('backend/action_cart.php', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ action: 'add', id: productId, qty: quantity })
    })
    .then(response => response.json())
    .then(data => {
        // Динамично обновяване на DOM дървото в браузъра
        updateCartBadge(data.totalItems); 
    });
}
5

Сигурност в уеб

В контекста на електронната търговия, защитата на личните данни е от първостепенно значение. В архитектурата са интегрирани няколко слоя на защита:

Схематичен дизайн
!

Заключение

Разработката на този дипломен проект успешно премина през всички фази на софтуерното инженерство – от първоначалната маркетингова концепция, през визуалното планиране, до създаването на напълно функционален, сигурен и мащабируем Full-Stack дигитален продукт.

Платформата демонстрира отлично съчетание между стриктно спазване на законовите изисквания за електронна търговия (GDPR, защита на плащанията) и поддържане на висок стандарт за потребителско изживяване (UX). Изградената архитектура е напълно готова за внедряване в реална бизнес среда и позволява лесно бъдещо надграждане с допълнителни модули.