How user interface theory, database architecture, responsive breakpoints, and checkout flow optimization intersect in ways design textbooks don't address, plus the performance implications of high-resolution artwork galleries on WordPress infrastructure.

Core insights:

GO STRAIGHT TO THE RESEARCH PAPER→

At 17, I built an e-commerce platform for selling art paintings as my state matura project. The research paper I submitted focused on web design principles — colour theory, typography hierarchy, user interface clarity. The actual implementation taught me something entirely different: design decisions are constrained by technical architecture in ways academic frameworks don't acknowledge.

WordPress was chosen for its "flexibility and wide usage." The documentation promised easy customization through themes and plugins. What it delivered was a series of technical compromises between aesthetic goals and performance reality.

Before any design work began, infrastructure decisions shaped everything that followed. Choosing DreamHost as a hosting provider wasn't just about server space — it determined database performance, SSL certificate implementation, and how quickly high-resolution artwork images could load for potential buyers.

Academic web design focuses on visual hierarchy and element placement. Production web design starts with: Can your hosting infrastructure handle WooCommerce database queries when 50 users browse your artwork gallery simultaneously? Will your MySQL configuration support inventory management without timeout errors?

The research paper mentioned "security plugins" as a checkbox item. The implementation revealed that SSL certificate configuration, PCI compliance for payment processing, and two-factor authentication aren't solved by installing plugins — they require understanding how HTTPS protocols interact with WordPress core, how payment gateway APIs handle encrypted data transmission, and why certain theme customizations break secure connections.

Integrating WooCommerce seemed straightforward in theory: install the plugin, connect PayPal and Stripe, configure shipping options. The reality exposed gaps between e-commerce functionality and actual transaction flow design.

Payment gateways don't just process transactions — they require business logic decisions. How do you handle failed payments when a customer has already received shipping confirmation? What happens when PayPal disputes occur after you've shipped physical artwork internationally? How do you structure database tables to track partial refunds across multiple payment methods?

The research paper cited "powerful reporting tools" for tracking sales and customer behavior. Implementation taught me that WooCommerce reporting is only useful if you understand database queries well enough to extract meaningful data from wp_postmeta tables where transaction details are stored inconsistently.

Here's the technical contradiction nobody mentions in design education: art e-commerce requires high-resolution images so buyers can examine brushwork details and color accuracy. But high-resolution images destroy page load performance, which destroys conversion rates.

The design principle of "high-quality images to allow visitors a detailed view" conflicts directly with the technical requirement of "optimize everything for sub-3-second load times." WordPress doesn't solve this paradox — it exposes it.

Solutions involved learning about:

None of this appeared in the theoretical research about "graphics as essential parts of web design."

The research paper stated: "The website was designed with a responsive layout that adjusts to different screen sizes." This sentence hides months of technical problem-solving.

Responsive design isn't just CSS media queries at 768px and 1024px breakpoints. It's reconciling how WooCommerce product grids behave on touch devices, how checkout forms handle autofill on iOS vs. Android, how artwork galleries maintain aspect ratios across viewport sizes without distortion.

The chosen WordPress theme had "responsive layout" built in. But "responsive" meant the navigation collapsed into a hamburger menu — it didn't mean the custom product image zoom functionality worked on mobile, or that payment form validation didn't break on tablets, or that shipping calculator dropdowns were accessible on smaller screens.

Fixing these issues required understanding how WordPress themes generate markup, how WooCommerce templates can be overridden, and why certain JavaScript libraries conflict with mobile browser rendering engines.

Academic design education treats checkout flows as UI/UX problems: minimize steps, maintain clear progress indicators, reduce form fields. Technical implementation reveals checkout flows as database transaction problems.

Every step in the checkout process triggers database writes: cart contents to session storage, shipping calculations to temporary tables, payment status to order meta. If any step fails, you need rollback logic. If users abandon carts, you need cleanup processes. If inventory depletes during checkout, you need real-time stock validation.

The "simple and logical" menu organization mentioned in the research paper becomes complex when you realize WordPress stores navigation in one table, product categories in another, and WooCommerce checkout steps in plugin-specific configuration — none of which talk to each other without custom integration code.

Here's what design textbooks miss: every aesthetic choice has technical implications. Dark background colors that make artwork "stand out prominently" affect readability and accessibility compliance. Serif fonts chosen for "aesthetic emphasis" impact page load if not properly subset. "Clean and simple layout" means nothing if the underlying HTML structure doesn't support semantic markup for SEO.

The theoretical research presented color palette selection and typography choices as design problems. Implementation revealed they're performance problems, accessibility problems, and browser compatibility problems simultaneously.

Building the platform taught me that commercial web development isn't design with technical execution added on top — it's technical architecture that constrains design possibilities from the start.

ARTWORK E-COMMERCE STORE | Research Paper & Project:

The purpose of this paper is to provide a detailed explanation of the design and development process of an artistic website using WordPress. Additionally, it includes general research and explanations about web design to offer further context for the creation process of my project assignment.

The project was created to showcase a collection of artworks and to provide a platform for potential buyers to view and purchase the paintings. This paper explains the theoretical concepts behind the project, the research conducted during the website design process, and the steps involved in creating the website using the WordPress platform.

DOWNLOAD PDF →

Until next time,