Let curiosity lead
Offer curated artwork, artist suggestions, search and category-led exploration without turning discovery into an endless feed.
UI/UX Design handout · v1.0Where art
Where art
meets soul.
A concise reference for the IrisArtSphere mobile experience—its visual language, reusable interface patterns, product journeys and complete screen set.
01 / Experience intent
01Art first. People always.
The app connects art, its creator and its audience through a discovery experience that also supports learning, community and confident purchasing.
Show the story behind the work
Bring artist profiles, process and artwork context close to each visual so appreciation can develop into connection.
Build confidence gently
Use transparent artwork details, an optional room preview and a clear checkout flow to support informed choices.
“The interface should frame the artwork, not overpower it.”
Positioning statement for this concept, not a research-participant quotation.
02 / Brand foundations
02A palette with room to breathe.
Six named colours from the supplied component library. Purple anchors the interface; coral adds warmth; sage and soft neutrals keep the canvas welcoming.
Primary actions, active states and brand accents
Warm emphasis and selective highlights
Supporting feature and nature cues
Quiet backgrounds and warm surfaces
Selected containers and gentle separation
Primary reading text and strong contrast
For production, test text/background combinations individually; palette values alone do not establish accessibility compliance.
03 / Typography
03Editorial warmth. Interface clarity.
The documented pairing is Playfair Display for expressive headings and Inter for functional reading and controls.
Art has a story
to tell.
to tell.
Use for hero statements, feature headings and editorial moments. Leave generous space around it.
Sample hierarchyDisplay · Regular
Discover original artwork and the people behind it. Explore the artist’s process, preview a piece in your space and save what speaks to you.
Use for descriptions, labels, prices, forms and navigation. Prioritise legibility over decorative styling.
Sample hierarchyBody · Regular / Semibold
If these fonts are not installed, this offline handout falls back to Georgia and a system sans-serif. The app typefaces remain Playfair Display and Inter.
04 / Layout tokens
04A small, consistent toolkit.
The component library shows a compact spacing scale, rounded corners and a fine line-icon style. These tokens are visual references for consistent UI construction.
4812243248
Use smaller steps within controls and larger steps between content groups.
48121624
Repeat radii by component role rather than choosing a new curve for each element.
Use clear, consistent line icons with labels where meaning may be ambiguous.
05 / Reusable UI
05Components that make the system feel familiar.
A compact demonstration of the button, navigation, search, filtering and content patterns documented in the component board.
Clear action hierarchy
Primary for one leading action; secondary and text treatments for lower-emphasis choices. Define default, pressed and disabled states.
Find by interest or intent
Search art, artists, styles...
AllPaintingsIllustrationsPhotography
Combine a prominent search field with simple, scannable category chips.
Five visible destinations
Home
Explore
Create
Shop
ProfileThe final screen board uses a five-item bottom bar. Collections and messages appear within the broader experience rather than as permanent tabs.
Art and artist information
Artwork cardArtist cardCommunity postMessage rowCart item
Reusable cards make discovery, commerce and community feel like parts of the same product, while the artwork remains visually dominant.
06 / Product structure
06Eight areas, one connected experience.
The information architecture supports both art lovers and artist-sellers, from first discovery to publishing, buying and managing activity.
Home / Discover
Search, featured artists, trending work, recommendations.
Explore
Categories, local artists, results and artwork details.
Create / Upload
Photos, story, category, tags, pricing and publishing.
Shop
Marketplace, cart, checkout and order details.
AI Room Preview
Optional photo upload, placement and artwork comparison.
Collections
Saved works, followed artists and purchases.
Messages
Artist chats, community activity and support.
Profile / Dashboard
Personal account, artworks, orders and artist insights.
07 / Journey & flow
07Designing the path from interest to action.
Three core flows connect the two-sided marketplace and the optional room visualisation feature.
Art lover · Discover → understand → visualise → buy
Home→Find artwork→Read story→Room preview→Save / cart→Checkout
Artist · Create → publish → sell → manage
Dashboard→Upload photos→Write story→Category / price→Draft / publish→Orders
AI room preview · Optional decision support
Select room→Upload photo→Detect wall→Compare art→Preview / save
08 / UX process
08From patterns to structure to screens.
The case-study assets show affinity mapping, journey and flow work, then sketch and low-fidelity wireframe exploration before the polished UI.
Six recurring themes
Discovery, artist story, trust, community, visualisation and transparent buying shape the concept’s opportunity areas.
Explore the hierarchy
Sketch boards compare the placement of artwork, stories, actions and navigation before visual polish is applied.
Make tasks testable
Low-fidelity screens define the key paths for onboarding, discovery, artwork detail, room preview and checkout.
Evidence noteThe shared boards document the design process, but they do not provide a verifiable sample size, usability-test results or live product metrics. This handout therefore presents process artefacts and intended design responses, not measured outcomes.
09 / Screen inventory
09Fourteen views, one visual language.
The supplied final screen board is designed on an iPhone 16 canvas (393 × 852 px) and spans the experience from welcome to artist management.
Brand introduction and visual tone.
Welcome and original-art proposition.
Account entry with multiple options.
Curated entry point, categories and artists.
Category filters and artwork browsing.
Artwork, maker, price and buying actions.
Identity, works, stories and follow action.
Visualise art in a space before deciding.
Add artwork imagery and description.
Browse work available to collect.
Review items, totals and next step.
Conversations and shared activity.
Sales, listings, followers and management.
Account and personal preferences.
10 / Visual exploration
10One concept, two atmospheres.
The source set includes both a dark gallery-like treatment and a light botanical treatment. This handout treats the light board as the primary final presentation and the dark board as a visual exploration.
Exploration
Dark / immersive
A cinematic frame that intensifies mood and rich artwork, with the risk of competing with some pieces and making dense pages heavier.
Primary handout direction
Light / art-led
Warm off-white surfaces, purple actions and soft botanical details create a quieter frame for different styles of art, longer stories and transactional content.
This designation follows the accompanying case-study narrative. It is not a claim that either direction was validated by user testing.
11 / Handoff guidance
11Preserve the feeling. Verify the details.
A practical set of recommendations for translating the concept boards into a working product.
Let the art lead
- Keep artwork imagery prominent and uncropped where possible.
- Pair each work with clear artist, title, medium, size and price information.
- Use concise story previews with a path to more detail.
Make actions unambiguous
- Distinguish save, follow, add to cart and buy now.
- Show feedback for pressed, loading, error and success states.
- Keep AI room preview optional and explain the photo-use step.
Validate before release
- Check text contrast across purple, coral and muted surfaces.
- Use readable type sizes and sufficiently large touch targets.
- Provide labels for icons and alt text for artwork.
What this handout is—and is not
It is a visual and UX reference based on the supplied case-study artwork and component library. It is not a coded production specification, accessibility certification or evidence of usability outcomes. Exact implementation values beyond the documented colours, fonts, spacing and radii should be finalised in Figma and checked in the target app.