The illustrations, diagrams, small visual assets and demonstration content across the page each get deliberate Wholeverb development. This map shows the actual starting pieces and the work ahead.
October 6: we now build the Home page one section at a time. For each section we develop its art, relevant motion and working composition, refine it together, then record the approved construction in DESIGN.md. The groups below are the inventory; they are not separate production batches. Current unit: the opening section. Both Website concepts are parked for Services.
4 · ComponentsApproved controls, cards and frames.
5 · Artwork & demonstrationsExplore, construct, refine and review each required visual.
6 · MotionMovement, timing and complete sequences.
7–8 · Sections & pageBring the work together and build the page.
We’re mapping the work before choosing a style for every piece. The screenshots below show the existing page. The written directions are development briefs; they are not pictures of finished replacements. Our two Website concepts remain unselected.
The same four steps for each visual
UnderstandWhat does the current idea explain well?
ExploreHow could Wholeverb express that meaning?
DevelopBuild and refine the chosen interpretation.
ReviewCheck its real size, details and phone use.
Some outputs will be illustrations; others will be readable, working interface demonstrations. A shared visual language does not require turning everything into a 3D picture.
01
Chapter 5 · demonstration
The opening workspace
On the existing page
See the individual pieces (5)
Website scenarioCare & SEO scenarioMarketing scenarioBusiness Systems scenarioScope matrix detail
What it means
A business need becomes prepared work: an offer, page outline, enquiry route and owner review. The front panel shows work, outputs and service scope.
What we develop
Develop the Wholeverb-specific scene and its internal visual language: the project panel, useful-output objects, scope matrix, work display and the four service scenarios. Decide which details tell the story clearly. A progress display must describe illustrative work states, not invented business results.
What carries forward
The service meanings, useful detail, owner review and the ability to explore the example. Approved controls and frames are reusable inputs.
Motion and integration work for this section
Chapter 6 develops the sequence and transitions; Chapter 7 fits the complete opening composition together.
02
Chapter 5 · small visual assets
The little icons, rows and status marks
On the existing page
See the individual pieces (1)
Inputs / Prepared work / Handoff — the rows you pointed to
What it means
The icons help distinguish services and outputs. The rows explain inputs, prepared work and handover. Their meaning matters even when they are small.
What we develop
Include these in the custom asset work: service/output symbols, connection cues and meaningful status marks. Explore a coherent Wholeverb drawing style and check it at small sizes. Refine the row content and presentation inside the demonstrations.
What carries forward
Readable labels, clear state differences, the selected logo and approved control behavior. Repeated icons can share one custom drawing; each row does not need an unrelated new design.
Motion and integration work for this section
Use the same selected assets consistently in the Chapter 4 controls and Chapter 7 sections. This is not a requirement to make every tiny icon a 3D object.
03
Chapter 5 · original illustrations
The five service-choice illustrations
On the existing page
See the individual pieces (4)
Business SystemsWebsite Care & SEOMarketingNot sure yet?
What it means
Each illustration explains a different need. There are four services and a separate “Not sure” entry.
What we develop
Develop a custom explanatory composition for each need. Website: useful information and a next action. Systems: request → shared record → staff review. Care & SEO: inspect → review → improve. Marketing: offer → destination → follow-up. Not sure: identify what needs attention.
What carries forward
The meaning of each service, useful specific detail and the separate Not Sure route. The Chapter 4 card shells and actions already have their own approval.
Motion and integration work for this section
Finish and check the art here. Chapter 7 places the finished collection in the complete service section.
04
Chapter 5 · demonstrations
The five everyday-work examples
On the existing page
See the individual pieces (5)
EnquiriesBookingsFollow-upHandoverOverview
What it means
An enquiry, booking, follow-up, handover or overview becomes easier to understand and act on.
What we develop
Develop the inner scene for all five examples: records, useful details, relationships and before/after states. Preserve real local interaction where we show it as interactive; clearly label examples and unsent actions. Explore the visual treatment before finishing it.
What carries forward
The existing scenario facts, complete result detail and staff decision boundary. Chapter 4 already developed the reusable task frames and local review controls.
Motion and integration work for this section
The full choreography, playback and transitions belong to Chapter 6. Section-wide composition belongs to Chapter 7.
05
Chapter 5 · connection artwork
The globe / shared working record
On the existing page
What it means
Enquiries, bookings, customer details, notes and preferences connect around shared information.
What we develop
Explore Wholeverb’s interpretation of this connection. One candidate could retain a globe with custom construction; another could use connected information pieces around a record. Compare compositions before choosing and developing one.
What carries forward
The information relationships and the shared-record meaning. The pictured globe is the current reference-built interpretation, not a newly selected Chapter 5 design.
Motion and integration work for this section
Rotation, moving connections and timed state changes are Chapter 6 work. Any alternative shown in words here is a proposal, not an approved replacement.
06
Chapter 5 · demonstration
The staff-controlled follow-up display
On the existing page
What it means
Information is connected and a draft is prepared, while important actions stay subject to staff review.
What we develop
Design the actual steps, draft object, connected-record detail and review boundary as a Wholeverb example. Make its ready, waiting and reviewed states understandable. It must show what is being reviewed, not just decorative progress ticks.
What carries forward
The distinction between preparation and sending. No illustration or local demo may imply that a real message was sent.
Motion and integration work for this section
Chapter 6 handles movement between steps; Chapter 7 combines this with the shared-record scene.
07
Chapter 5 · demonstration
The work overview / moving rows
On the existing page
What it means
Show what arrived, what needs attention and what is ready for review in one useful view.
What we develop
Develop the row composition, status symbols, record links and believable information density. Keep the full information available on phones. Build the meaningful states here.
What carries forward
Clear differences between new work, pending staff decisions and prepared drafts. Existing example records remain illustrative.
Motion and integration work for this section
Any scrolling, cycling or entry/exit motion is Chapter 6; the supporting-section layout is Chapter 7.
08
Chapter 5 · process artwork
The five working-relationship illustrations
On the existing page
See the individual pieces (4)
Agree the scopeBuild & connectTest, review & hand overDecide ongoing care
What it means
Explain what the owner contributes, what Wholeverb does and what is produced at each stage.
What we develop
Develop distinct scenes for understanding the need, agreeing scope, building and connecting, testing and handover, and optional ongoing care. Explore meaningful connection/puzzle construction where it helps these relationships.
What carries forward
The five step meanings, complete responsibility details and optional status of care. Chapter 4 process-card construction is already approved.
Motion and integration work for this section
Chapter 6 supplies useful motion if required; Chapter 7 evaluates the whole process section.
09
Chapter 5 · demonstration
The website-care review example
On the existing page
What it means
A small website change goes from an owner request to a proposed edit and review.
What we develop
Create Wholeverb’s detailed care scene: website preview, requested change, proposed wording, annotation markers, review notes and the owner decision. Compare current and proposed states clearly.
What carries forward
The example change from “Get in touch” to “Request service details”, and the fact that no real website is edited or published. Approved Chapter 4 care frames can be used.
Motion and integration work for this section
Chapter 6 handles the change sequence; Chapter 7 joins the scene with its surrounding explanation.
10
Keep real evidence · presentation already in Chapter 4
The real-work previews
On the existing page
What it means
Actual screenshots and recordings show the work that exists and its honest status.
What we develop
Check crops, posters, labels and how the media sits inside the approved presentation. If additional evidence is needed, capture the actual work. Do not invent a more impressive replacement project image.
What carries forward
The actual Alum, Flooring, GCC and Summer Program OS evidence and their different build/live/demo statuses. Public portfolio permission remains a separate question.
Motion and integration work for this section
Chapter 7 checks these previews beside the new brand artwork; Chapter 8 integrates them into the complete page.
11
Chapter 4 · approved component families
Navigation, buttons, cards, forms and FAQ
On the existing page
See the individual pieces (2)
Baseline project-request formBaseline FAQ
What it means
These help visitors move around, read details and prepare a project request.
What we develop
Use the custom component families already approved. In Chapter 5, develop the illustrations and demo content that go inside or alongside them. Include additional small visual assets identified in this map without claiming the whole component family is new again.
What carries forward
The approved action, navigation, card, form and frame behavior. The current baseline screenshot is not the approved Chapter 4 replacement.
Motion and integration work for this section
Chapter 7 tests their fit in sections; Chapter 8 assembles the complete page. Any specific new component gap discovered is named explicitly.
12
Chapter 5 · assess the visual need
Backgrounds, connecting marks and closing artwork
On the existing page
What it means
Create continuity and support the final invitation without competing with the content.
What we develop
Inspect the opening/closing motifs and any required background or connection art. Develop a custom asset where it has a clear purpose; record where a simple approved surface is sufficient. No decorative asset quota.
What carries forward
The selected logo, palette, smooth material language and the final invitation’s meaning. This does not reopen the approved brand identity.
Motion and integration work for this section
Full-page spacing, section transitions and the final combined composition are Chapters 7–8.
A concrete example / Only one part of the map
Existing Website illustration → two possible interpretations
These two concepts explore the Website service only. They do not decide the globe, task examples, process artwork, icons or care scene.
The starting piece
A desktop website, phone layout and enquiry route explain the Website service.
We carry that useful meaning into an original composition. Detail, materials and final phone framing still need refinement.
01
The making
A website coming together
“The right pieces, made to work together.”
Shows the content, structure and action becoming one useful website.
Emphasis
Custom construction and care.
Best use to explore
Introducing the Website service or explaining how we build.
02
The experience
A visitor’s path
“A clear path from interest to enquiry.”
Shows useful information helping someone understand the service and take the next step.
Emphasis
Clarity and the website’s purpose.
Best use to explore
Explaining the value of a website on Home or the Website page.
Concepts only · Neither selected · We return to this choice when developing the Services section.
