Make room for small stories.
A fictional collection of places, walks and everyday observations.
SoraDesign Hinagata · 雛形
Interfaceontwerp · Geplande app · Voorgestelde naamcombinatie
Maak het scherm en de weg erdoorheen duidelijk.
Ontwerp schermen, herbruikbare componenten en verbonden stromen in een vertrouwde ontwerpruimte.
De gedetailleerde ontwerpconcepten hieronder zijn in het Engels.
Planned app. These original interface studies do not edit a project, run a prototype, generate code, export assets or publish a website. Engine, collaboration, accessibility and format acceptance remain separate.
Keep the frame and its structure together.
Named frames, readable layers and a compact inspector make the design easier to understand without hiding the canvas.
Home · Desktop · scaled 1440 × 900 design example
From individual screens to a connected experience.
Keep frames and properties close.
Use named frames, readable layers and compact inspectors around the design canvas. A canvas needs room; asset lists benefit from the shared compact library.
Reuse the elements that repeat.
Plan components and variants for common actions, cards and navigation, with clear named states.
Bring shared values into view.
Keep colours, spacing, typography and intended dimensions together, rather than hunting through unrelated screens.
Think across screen sizes.
Plan desktop/tablet/phone variants and layout constraints, keeping the same content and navigation intent visible.
Show the path through a design.
Plan screen connections, triggers and a clear route back. A flow diagram describes interaction intent; it is not a deployed application.
Review states deliberately.
Show focus, hover and disabled examples. Their appearance does not replace keyboard, contrast, touch or assistive-technology testing.
Keep assets organised.
Use a compact searchable component/asset library with names, usage and reviewed output choices as the app develops.
Make handoff understandable.
Plan measurements, notes and permission-aware review/export, while keeping generated code and production acceptance separate.
Use the right creative tool.
SoraDesign focuses on interfaces and flows. SoraDraw covers vector artwork, SoraImage image composition and SoraLayout multi-page publishing.
Make repeated elements easier to reason about.
Plan components, variants and shared values, with states that can be inspected deliberately.
Primary action · component states
Component and variant controls should keep repeated interface elements related while making each state visible.
These are inert spans, not clickable prototype buttons or an accessibility certification.
Design values · example
- Primary colour
- #006CD2
- Text on primary
- #FFFFFF
- Spacing scale
- 8 / 16 / 24 / 32 px
- Card padding
- 24 px
- Corner radius
- 12 px
- Action height
- 44 px · intended target
Plan shared colours, spacing, typography and component variants. Actual contrast, keyboard interaction, focus order and touch behaviour require accepted UI implementation.
Component propertiesShared valuesKeep the same idea across screen sizes.
The Home frame below has three variants using the same collection content. Each sample is a scaled design, not a running published website.
Desktop
1440 × 900 · 3 cards acrossMake room for small stories.
A fictional collection of places, walks and everyday observations.
Tablet
768 × 1024 · 2 cards acrossMake room for small stories.
A fictional collection of places, walks and everyday observations.
Phone
390 × 844 · 1 card acrossMake room for small stories.
A fictional collection of places, walks and everyday observations.
The same three collections appear in every variant. Constraints and responsive design controls are planned; this does not generate or publish a responsive application.
Show what happens next, and how to return.
A simple flow should explain the connection between screens as well as the appearance of one frame.
Field Notes
Collection card selected
Lakeside walks
Story selected
A slower afternoon
Story details
Prototype intent
| Source | Trigger / action | Target |
|---|---|---|
| Home | Select collection card | Collection |
| Collection | Select story | Story |
| Collection / Story | Terug | Previous frame |
Keep the route back clear.
Plan previewable screen connections, deliberate transitions and a clear Back route. The diagram shows intended interactions, not a running prototype or deployed navigation.
Preview sharing, account permissions and actual keyboard/pointer behaviour require separate acceptance.
Review connectionPreview intentKeep design intent available for review.
Bring components, assets and measurements together in a compact library, with clear boundaries around code and output claims.
Components & assets · 6 sample entries
| Name | Kind | Use / value | State |
|---|---|---|---|
| Primary action | Component | 4 state examples | Review |
| Collection card | Component | 3 Home instances | Review |
| Navigation | Component | Home / Collection / Story | Review |
| Primary colour | Shared value | #006CD2 | Review |
| Spacing | Shared value | 8 / 16 / 24 / 32 px | Review |
| Landscape artwork | Original illustration | Three collection variants | Review |
Searchable components, named assets and shared values should stay understandable as a design grows.
Inspect the intended design.
- Selected asset
- Primary action
- Achtergrond
- #006CD2
- Text colour
- #FFFFFF
- Height
- 44 px · intended
- Export choices
- SVG / PNG · to qualify
- Output state
- Not generated
Design measurements and notes help a developer review intent. They do not establish generated code quality, production behaviour or tested accessibility.
Native project files, imports, reviewed asset export, collaboration and handoff permissions remain planned. No code is copied, project uploaded or public share link created here.
Inspect valuesReview asset outputA few interface-design questions.
Does this create or publish a website?
No. These are interface-design concepts. A website builder and approved publishing workflows are separate capabilities.
Is this the same as SoraDraw or SoraImage?
No. SoraDraw focuses on vector artwork, SoraImage image composition and SoraLayout multi-page publishing. SoraDesign focuses on screen structure, components and flows.
Are prototypes, collaboration and code export live?
No. Those require accepted engines, permission-aware review/sharing and real workflow testing. A design value shown in a mockup is not tested production code.
Is SoraDesign the final name?
SoraDesign — Hinagata · 雛形 is the proposed English/Japanese pairing. Final naming, supported formats, packages and release details remain open.
A creative family with familiar ways to work.
Explore the other planned workspaces alongside the current previews.
Explore SoraSlides →