SITE007
Brew Atlas
A learning site for finding information by brewing method
Split six extraction methods into three groups, each with its own comparison screen.
11
LVIV DesignA collection of websites
A collection of websites
we've built.
From product presentation and archives to information discovery and motion-led experiences — 11 projects exploring different ways a website can work.
Featured Work
FORM/01
Structure
Structured so pages as different as the home page, parts introduction, technical details, and journal still read as one consistent product.
Initial Approach
Started with a real-time 3D model, which never reached the quality we wanted.
What Changed
Switched to still imagery instead of the 3D model, and reorganized six pages so the product reads consistently across them.
Current Status
Six pages are complete; the mobile screens are still being refined.
The final version uses still imagery.
In short
FORM/01 shifted from a 3D model to still imagery.
Other Work
Six Featured Projects
These six projects differ the most from one another.
SITE007
SITE008
Lightscape Rooms
A lighting site that starts from the effect of light
Instead of listing products first, visitors choose the lighting effect they want.
SITE009
FORM/01
A site for a fictional modular audio product
Tried a real-time 3D model, then switched to still imagery when it didn't reach the quality we wanted.
SITE010
Deep Space Observatory
A site that conveys scale and distance through motion
Kept video and depth on the home page only, and let the other five pages read quietly.
SITE011
Material Library
A site for finding and comparing architecture and interior materials
Rebuilt the list from scratch because the original structure didn't work for finding and comparing materials.
SITE012
Vector Zero
A car site that reads as one continuous sequence
Split the page into five parts, each with its own role, so specs and copy stay readable even in motion.
Full List
All Work
11 projects in total.
Reference Directory
A reference site for finding materials by topic and year
Brought classification, search, and the path to individual entries together in a single first view.
View Work ↗
Section-Led Feature Grid
A magazine that changes feel through section structure alone, on the same foundation
Built on the same template, it feels completely different once the article order and section layout change.
View Work ↗
Field Notes
A site for reading field notes in sequence
Each note has to be finished before the next one opens.
View Work ↗
Seoul Move
A site that groups Seoul running courses by area
Brought together the conditions people weigh when choosing a course.
View Work ↗
Contemporary Culture Archive
A culture archive viewed by switching between multiple timelines
Different kinds of content, gathered around a single frame of time.
View Work ↗
Brew Atlas
A learning site for finding information by brewing method
Split six extraction methods into three groups, each with its own comparison screen.
View Work ↗
Lightscape Rooms
A lighting site that starts from the effect of light
Instead of listing products first, visitors choose the lighting effect they want.
View Work ↗
FORM/01
A site for a fictional modular audio product
Tried a real-time 3D model, then switched to still imagery when it didn't reach the quality we wanted.
View Work ↗
Deep Space Observatory
A site that conveys scale and distance through motion
Kept video and depth on the home page only, and let the other five pages read quietly.
View Work ↗
Material Library
A site for finding and comparing architecture and interior materials
Rebuilt the list from scratch because the original structure didn't work for finding and comparing materials.
View Work ↗
Vector Zero
A car site that reads as one continuous sequence
Split the page into five parts, each with its own role, so specs and copy stay readable even in motion.
View Work ↗
StrengthsWe compare directions first,
We compare directions first,
then review the actual pages.
Six ways we keep checking the work through to completion.
Compare Multiple Directions
We don't build a single direction right away. We compare different structures and layout approaches first, then choose the one to carry forward.
Comparing directions early reduces the risk of pushing the wrong one all the way through.Review the Actual Pages
We don't approve work from a description alone. We render the desktop view and any other pages that matter, look at them ourselves, and only then move on.
Check Mobile Separately
Mobile isn't an afterthought. We check separately whether small screens can still be read and used the same way, and adjust what's needed.
Check Motion Separately
Sites where motion matters get their own round of checks. We check that scroll, pointer, and transition effects don't conflict with the page structure, separately from the static pages.
Revise After Review
We don't force the original plan through. If the finished page doesn't match expectations, we record why and revise only what needs to change.
Keep a Record of the Work
We keep a record even after a project is finished. Documenting what changed and why makes it easier to pick up again for future edits or expansion.
What We DesignWe design a different structure
We design a different structure
depending on what the project needs.
Six directions drawn from work we've actually completed.
Product & Service Sites
We structure the site so a product's design and features can be understood in a single flow.
Information Discovery & Directories
We use classification, search, listing, and detail pages to make information easy to find.
Archives & Editorial Sites
We organize large amounts of content around reading order and information hierarchy.
Comparison & Selection Interfaces
We build ways to compare items and narrow down choices.
Motion-Led Landing / Presentation Sites
When motion is needed, we treat scroll and page transitions as part of the structure.
Portfolios & Work Records
We structure the site to show the process and reasoning, not just the results.
We don't apply the same structure or motion to every project. We adjust page layout and review scope to fit each project's purpose and content.
Deliverables & ReviewOnce the pages are built,
Once the pages are built,
we check that they're ready to use.
Listed in the order we work through them.
- Desktop review
- Mobile review
- Rendered review of key pages
- Image, link, and layout checks
- Motion checks when needed
- Deployment package preparation
- Work records for future changes and expansion
Review scope may vary depending on the project.
What Repeats Across Projects
Recurring Considerations
Even when sites differ in character, we've run into similar problems more than once.
Deciding the Reading Order
The more content there is, the more it matters where to start. We settled the first view and the next step first, then built the rest around them.
Learning order · page structureMaking Differences Visible
When there are many options, differences need to be visible right away. Information that requires comparison — extraction methods, lighting effects, materials — was placed side by side.
Extraction methods · lighting effects · materialsExplaining Through Motion
We used video and motion, but kept the copy and navigation paths intact.
Home page motion · continuous scrollChanging Approach
A real-time 3D model never reached the quality we wanted, so we switched to still imagery.
The final version uses still imagery.Checking Mobile Too
We also re-checked that the same content could be read and used on mobile.
3 reduced-motion checksRevising After Review
Some projects had their structure or presentation reworked after we reviewed the finished pages.
4 recorded revisionsBrowse by Topic
Frequently Asked Questions
Questions that came up often while we worked.
What should come first when there's a lot of content?
When there's a lot of content, we start by deciding the order. Brew Atlas built a learning order, Deep Space Observatory put the weight on the home page, and Vector Zero split a long screen into segments.
How do you show the difference between several options?
When there are many options, we show the differences side by side. Lightscape Rooms lets visitors choose the lighting effect first, and Material Library gave comparison its own screen.
Can content still be read while a video is playing?
Copy and information need to stay readable even while a video is in motion. Deep Space Observatory and Vector Zero each solved this a different way.
Do you need a 3D model to present a product?
Not necessarily. FORM/01 switched from a real-time 3D model to still imagery instead.
Can the same content be seen with reduced motion?
We made sure the same content is available with reduced motion turned on. Checked on Deep Space Observatory, Material Library, and Vector Zero.
What happens if the finished page doesn't match expectations?
Some projects had their structure or presentation reworked after we reviewed the finished pages.
Process
Roughly, this is the order we work in.
The order isn't fixed — we move back and forth depending on where things get stuck.
01 Read the Request
02 Look at Structure and Order
03 Review Previous Work
04 Build the Pages
05 Review and Revise
06 Check Mobile
07 Document the Work
Switched from a 3D model to still imagery.
Replaced an approach mid-project when it didn't reach the quality we wanted.
Kept motion on the home page only.
Let the other five pages read quietly, with copy taking priority.
Rebuilt the list from scratch.
Restructured the flow from listing to detail, comparison, and boards.
Split the page into five parts.
Divided one continuous page into five parts, each with its own role.
Next
Start with whatever project interests you.
Each site had a different problem to solve.
ContactTell us about a new website
Tell us about a new website
or improvements to an existing one.
Reach out directly by email or Telegram, or use the form below.