Let the preview lead
A large visual preview with thumbnails sits beside package metadata, including credit cost, template count, dimensions and file size.
↳ Package detail← Selected work
UI design & frontend / 2023 presentation
Contentbase
A content marketplace interface, designed and built in HTML and CSS.
My role
UI design & HTML/CSS
The scope
Discovery · Credits · Package detail
Project status
Published interface work
The project, at a glance
- The challenge
- Finding the right content package is only part of the task: credits, access and account states also need to be clear.
- My contribution
- I designed and implemented the marketplace UI in HTML and CSS, including discovery, package detail, credits and account flows.
- What came out of it
- Responsive marketplace screens with verification, loading and recovery states alongside the main purchase journey.
UI & frontend / ContentbaseContent to discover.
Content to discover.
Choices that make sense.
01Discover02Inspect the package03Choose the next action
Original interface design and HTML/CSS work
ContentbaseOriginal project presentation
01 / The question behind the work
From browsing content to understanding the next action.
A useful way into the content
The discovery screen offers entry points by social media, category and topic. A package page then combines a prominent preview with the information needed to understand the download.
Making the model visible
Credit packages use a repeatable card pattern. The account view gives balance, expiry and daily-claim states their own place, including a cooldown variant.
Design into frontend
The original presentation explicitly describes UI screens made in HTML and CSS and optimized for responsive design. It shows the relationship between the layout and its implementation.
02 / Design decisionsThe thinking
The thinking
in the details.
Specific choices, connected to the work you can see.
Repeat the comparison pattern
Six credit tiers use consistent cards, allowing package information to be inspected within the same structure.
↳ Credits pageRepresent the state after the action
Balance, expiry, claim and cooldown states make the account view more than a purchase page.
↳ Account interface03 / Connecting the experience
How the pieces connect.
Select a stage to explore its purpose.
The moment
Browse by category, topic or social channel.
The design intention
Provide several relevant routes into the library.
New portfolio explanation based on the documented implementation and original project material.
04 / Inside the experienceThe details.
The details.
With a purpose.
Selected views, framed to explain the work. Complete original artifacts are available in the source collection below.
Inspect before deciding
The package view combines a preview, supporting metadata and its next action.
Give discovery useful starting points
Platform, category and topic provide different routes into the marketplace.
A repeated choice, a consistent pattern
Credit packages use one repeated visual structure so their options can be compared.
Keep availability visible
The original account state shows the available credits, claim action and cooldown information together. It connects the balance to what the person can do next.
Original presentation boards4 source artifacts +
The complete originals behind this case study. Open a board to inspect the source presentation.
05 / What this work brings togetherContentbase
Contentbase
in perspective.
The result
A set of responsive marketplace interfaces with documented HTML/CSS implementation.
Sources & presentation notes +
The original project explicitly attributes HTML/CSS implementation and responsive design. These selected screens do not establish an end-to-end tested application or measured business impact.
The journey diagrams and editorial explanations were prepared for this portfolio from the available project evidence. They are not additional historical research or measured outcomes.
Keep exploring / Next project
A liquid-staking frontend, from product introduction to dashboard and withdrawal states.