
Independent concept
Joina City
An interactive building that connects visitors to shops, floors and workspaces.
View case studyIndependent digital studio · Harare, Zimbabwe
Websites for service businesses, restaurants and growing shops. We design and build clear routes to enquiries, bookings and orders, plus the tools your team needs behind the scenes.
Agree the scope and USD quote before we build. Ongoing care is available.

FORME
Space to live well. An architecture website concept.
Selected work / 01—04
Explore concepts for places, hospitality, local services and architecture. See the brief, our contribution and what was delivered.

Independent concept
An interactive building that connects visitors to shops, floors and workspaces.
View case study
Independent concept
A growing tree, warm garden imagery, and a dedicated restaurant menu.
View case study
Independent concept
A valve-led introduction flows into clear services, work imagery and contact routes.
View case study
Fictional studio concept
An architecture portfolio that connects expressive imagery, individual project stories and a clear enquiry journey.
View case studyHave a similar project in mind?
Tell us about your projectIndependent portfolio concepts. The case studies describe delivered features and design decisions; commercial results have not been measured.
What We Solve
A place to explain your services, a way to take bookings, or a tool that saves your team time. Start with the task your customers or team need to complete.
01 / Presence
Explain your services, show your work and make it easy to send an enquiry. For service businesses and teams building their first online presence.
02 / Customer flow
Help restaurant guests, shoppers and service customers find what they need and take the next step. We agree the booking, payment or ordering tools your project needs.
03 / Operations
Bring information, repeat tasks and day-to-day work into a clearer workflow with a custom dashboard, connected form or internal tool.
How we work
You know what we are building, what it costs and where your feedback fits.
We discuss your business, the people using the site and the task you want to make easier.
You get the proposed pages, features, content needs, timeline and USD quote before work begins.
We plan the structure and copy, then review the visual direction with you before developing it.
We build the pages and flows, share progress and work through the feedback rounds in your quote.
We check mobile layouts, links and enquiry flows before you approve the site for publication.
We explain how to use and maintain your site. Hosting, updates and future improvements are available separately.
Have the idea, but need help with the scope?
Talk through your projectWays to Work Together
Choose a starting point. We’ll confirm the features, timeline and final quote together. All prices are in US dollars (USD).
Presence
From $150
A focused digital presence for businesses that need to look professional and be easy to find.
Growth
From $400
A conversion-focused experience built to generate enquiries, bookings or customers.
Systems
Custom quote
Custom digital systems for businesses that need more than a standard website.
*Starting prices are guides. Final pricing depends on scope, complexity and timeline. Every project begins with a no-obligation conversation.
Starter
$12/mo
Keeps a one-page site online, secure, and monitored.
Growth
$30/mo
For sites that need to stay fast and get looked after.
Custom
Custom quote
Ongoing care for custom apps and the business data they rely on.
*Hosting runs month-to-month, cancel any time. Custom hosting costs depend on traffic, data storage and the services your app needs. We confirm the cost before launch.
Before we start
Scope, costs and next steps, so you can decide whether we are a good fit.
Each plan lists its starting scope and feedback rounds. Your written quote confirms the pages, features, content, timeline and final price. Extra pages, integrations or work outside that scope are agreed separately.
The one-time build and monthly hosting plans are priced separately. Domain registration and any paid booking, payment or other services are confirmed in your quote before you commit.
It depends on the pages, features, available content and feedback. We agree milestones and what we need from you before work begins.
Bring a short description of your business, your goal and anything you already have: a logo, copy, photos or an existing website. We agree any additional content work as part of the scope.
The projects shown here are independent concepts. Each case study identifies its scope, design decisions and delivered features. FORME is a fictional architecture studio with AI-generated building imagery. Commercial results have not been measured.
Yes. We agree how you will manage content and what is included in the handover. Ongoing hosting, content updates and development can be arranged separately.
We prepare search basics such as page titles, descriptions and a sitemap. Search visibility also depends on your content, competition and other factors. A first-place ranking is not guaranteed.
We aim to reply by email within 1–2 business days to clarify your needs and suggest the next step. Sending an enquiry does not commit you to a project or add you to a mailing list.
Ready to talk about your business?
Start a projectStart a Conversation
Location
Harare, Zimbabwe
@thewebcozw
Web design & development · Harare, Zimbabwe
Get a Quote
A short brief is enough to get started. We aim to reply by email within 1–2 business days. Fields marked * are required.
Thanks, there. We aim to reply by email within 1–2 business days to discuss your brief. If you have not heard from us then, email thewebcozw@gmail.com.
Project 01 / Places & experiences
A city within a city. An interactive building, a searchable directory, and a clearer way to find your next destination.

Directory content was captured in September 2026. Visitor and leasing results have not been measured.
Floor exploration creates a sense of place; direct directory navigation serves people who already know what they need.
Search, floor filters and individual place details connect the building model to a practical visitor task.
Representative 3D spaces are labelled, while the leasing listing uses published information and photographs.
An interactive building that becomes a guide to the city inside.
Independent concept · Harare, Zimbabwe · September 2026
Joina City brings shopping, dining, offices and visitor services into one building. This project translates that physical structure into an interactive website: explore the exterior, choose a floor, travel through an elevator transition, then find the places and practical information on that level.
The result combines a navigable 3D model with a searchable directory of 61 published places. It is an independent design and development concept, not an official Joina City website or a claim of a commissioned engagement.
The central idea was to make the building itself useful as navigation. Visitors should be able to understand the different floors, find a shop and explore office enquiries without losing their sense of where they are.
The scope included the interactive exterior, interior environments, directory and search, leasing information, motion, responsive layouts and integration of the supplied Blender assets. The building and its interior layouts are illustrative models, not architectural plans.
The opening pairs large Joina City typography with the exterior model and its streetscape. Visitors can rotate the building or select Explore the floors. The exterior contains 21 independently animated sections, allowing the architecture to separate into destinations.
The streets, trees, vehicles and plaza stay in place while the building moves. This preserves a visual point of reference. A rendered image appears while the interactive geometry loads, so the introduction has a useful first frame.
Scrolling leads from the opening into normal page content. Visitors can also go directly to the directory, leasing information or offers through the main navigation.


Choosing a floor connects the exterior to an elevator transition. Doors close, the floor indicator counts to the destination and the interior loads before the doors reopen. Skip controls provide a direct route through the sequence.
Retail levels use the supplied mall model at their corresponding heights. The basements have a parking environment; office floors use a representative suite. Visitors can look around with pointer or keyboard controls, zoom and choose different views.
A directory window sits over the interior. It can switch between glass and solid surfaces or be hidden entirely to explore the room. The solid option protects readability when the environment behind the panel is visually busy.
The complete directory contains 61 places from Joina City's published listings, captured on 3 September 2026. Search, floor filters and categories give visitors several ways to find a destination.
Each place opens a detail panel with its floor, published description, directions and available contact information. Visitors can travel to that floor or copy a direct link. Missing or unverified information is identified rather than filled with invented details.
Search can reveal matching businesses on other floors. On narrow screens, horizontal shop cards and larger controls make better use of the available width. The visual building journey remains optional for visitors who already know what they need.
The leasing experience includes the published Office 4 listing on the 12th floor, its 12.97 square metre area and its actual listing photographs. Other office-floor views support enquiries without inventing available units.
The representative 3D suite is identified as illustrative and is not presented as the floor plan of Office 4. This distinction lets the model communicate atmosphere while the listing photographs communicate the specific published space.
The enquiry form validates entries and prepares an email for the leasing contact. It can also download the draft. It does not claim that an application has been submitted to a backend or automatically send a message.
Crimson actions, gold accents, charcoal navigation and off-white surfaces follow the supplied brand direction. Inter supports both large headings and dense directory information. The Joina City logo retains its proportions on a light surface.
React manages the interface, Three.js renders the models, Anime.js handles floor and elevator movement, and a scoped GSAP sequence supports the opening scroll reveal. Interior geometry loads when its environment is entered. Rendered-image fallbacks keep the experience usable if WebGL or model loading fails.
Reduced-motion controls, keyboard navigation, shareable floor links and browser Back/Forward behavior support visitors with different needs. Source checks and implementation notes describe these features; they do not amount to a formal accessibility certification.
The prototype demonstrates a complete path from building exploration to shop discovery and leasing enquiries. Its main achievement is connecting the spatial idea to everyday tasks: visitors can explore the model, but they can also bypass it and search immediately.
No conversion, leasing, revenue or visitor-satisfaction improvements have been measured. The project demonstrates implemented design and functionality, with commercial impact still to be tested.
Before an official launch, the business would need to confirm the tenant list, floor mapping, current office availability and final commercial content. Representative phone testing and visitor task testing would then establish how easily people find places and complete an enquiry.
The wider lesson is that an expressive interface earns its place when it gives visitors a clear route to practical information.
Screenshots in this portfolio show the prototype, captured in September 2026. Store and property imagery comes from the published Joina City listings; the underlying photography and trademarks remain with their owners.
Website screenshots captured 19 September 2026 · Live public prototype. This project is an independent concept.
Project 02 / Food & hospitality
Rooted in warmth. A growing tree leads into a restaurant experience built around food, gardens and gathering.

An independent concept. Current menu, prices and business details need restaurant approval before an official launch.
The growing tree sets the mood, with a direct entrance for visitors who want the menu immediately.
Food, drinks and gatherings have a clear structure rather than competing with the opening animation.
Garden imagery is supported by practical routes to the location and contact details.
An interactive restaurant website inspired by garden hospitality
13-15 September 2026 | Independent concept | Private prototype | Version 3
Theme: Rooted in warmth
The project turned a growing oak tree into an introduction to a restaurant website. Visitors can explore the animation, enter the landing page, browse food and event offerings, and contact the restaurant. Feedback led to a cleaner tree scene, a dedicated menu page and navigation that avoids a full page reload.
Scope: Public-source research, visual direction, content structure, interaction design, frontend development and functional checks.
The project requester supplied the concept and visual feedback. Research, design and implementation were developed with Codex.
This is an independent design concept based on public information, not a commissioned or official restaurant launch.
The screenshots below show the saved prototype. A public demo is not available yet.
Bring the feeling of the garden online, then make the essentials easy to find.
Oak Tree Restaurant in Rolf Valley, Harare, combines daytime dining with private and corporate occasions. The initial research found useful information across social profiles and restaurant directories. During the 13 September check, the restaurant's existing homepage and menu displayed error content; the cause and duration were not investigated.
The design needed to communicate the venue's warmth while giving visitors a clear route to food, events, location and enquiries. The tree could create a memorable entrance, but it also needed a direct way through to the restaurant content.
See the food selection, opening hours and location.
Explore occasions, venue hire and event enquiries.
Reach the menu or contact details without replaying the introduction.
These visitor needs are design hypotheses drawn from the brief and public offerings. No customer interviews or formal usability study were conducted.
Research the business, establish the visual direction, build the scroll interaction, organise the restaurant content, then refine the experience through direct feedback and checks.
Natural colour, expressive headings and a clear reading rhythm.
The proposed theme, Rooted in warmth, translates the garden setting into cream backgrounds, olive actions and restrained gold accents. Real venue and food photographs connect the interface to the restaurant. Generous spacing keeps the copy and menu easy to scan.
| Colour | Code | Role |
|---|---|---|
| Warm cream | #F5F0E7 | Background |
| Deep olive | #343D32 | Primary actions |
| Champagne gold | #D5C58F | Accent |
| Warm taupe | #7A7275 | Supporting tone |
| Charcoal | #292A25 | Body text |
Cormorant Garamond gives the headings an editorial character suited to dining and celebrations. Italic emphasis adds variation without introducing another typeface.
Montserrat supports navigation, descriptions and buttons. It also maintains continuity with the font configured in the existing restaurant website's navigation during the initial inspection.
The colour values and Cormorant pairing are proposed for this concept. The exact font used in the original restaurant logo was not verified.
Short, welcoming phrases lead into useful actions. Good food. Beautiful gatherings. is project copy, not a verified existing restaurant slogan.


An optional moment of discovery, followed by useful restaurant content.
The opening scene starts with branches and subtle pointer-following movement.
Leaves appear as the visitor scrolls. The tree expands by about 47% from its starting scale; scrolling upward reverses the growth.
The tree scene moves away and the landing page introduces dining, gatherings and visiting information. Navigation appears with this content.
The Menu page groups 30 food and drink entries across six categories, followed by nine event and service offerings.
Enter Oak Tree and a keyboard skip link provide a direct route to the restaurant. Reduced-motion mode presents a static mature tree, and the restaurant content remains available without JavaScript.
Call, email and directions links provide practical next steps. The prototype does not process bookings or orders; enquiries continue through the restaurant's contact channels.
The catalogue labels its content as a selection of published offerings. It asks visitors to confirm current availability, prices and dietary requirements instead of presenting historical dishes as a guaranteed current menu.
Each revision made the visual idea easier to use.
Removed the unwanted label, arrow controls and page-number navigation. Increased the tree's growth scale and cleared the scene.
The tree becomes the clear focus of the introduction.
Added a dedicated Menu route with category links, food and drink entries, and event and service offerings.
Visitors can browse the selection in one organised place.
Included the other page as an inert template and switched the active content locally on normal Menu and Home clicks.
Switching pages no longer waits for a new document request.
Used transform and opacity for link underlines, shorter button transitions and animation frames that stop when the tree settles.
Feedback has a consistent transition without changing text size or layout.
The site uses plain HTML, CSS and JavaScript with a canvas tree. Both routes remain directly addressable. Local navigation updates the URL, title and focus; Back and Forward restoration is implemented. The tree pauses when idle, off screen, hidden or detached on the Menu page.
Link underlines use 200 ms transitions and buttons use 180 ms transitions. These are configured animation durations, not measured page-response times.
A published private prototype with a distinctive entrance and a practical menu.
Version 3 brings together the growing tree, restaurant landing page and dedicated catalogue. The result demonstrates the intended browsing flow and the refinements requested during the project. It provides a foundation for an owner-approved restaurant website.
Tree checks covered desktop and mobile sizes, foliage growth and reversal, pointer response, reduced motion, and idle or hidden-tab pausing. Menu and keyboard checks passed during development. Static validation passed for both routes and 36 local asset and link references.
The main landing and Menu views were inspected during development. Further device and navigation regression checks remain useful before an official launch. No Lighthouse benchmark, formal accessibility audit, analytics study or booking uplift was measured.
Design assessment
The concept has a coherent identity and clear catalogue. Confirmed commercial content and further device testing would strengthen it.
A memorable introduction works best when visitors can choose how much time to spend with it and still reach the menu quickly.
Business and brand research was collected on 13 September 2026. These portfolio screenshots show the saved prototype build, captured on 19 September 2026. The underlying restaurant photography is credited to My Guide Zimbabwe.
Website screenshots captured 19 September 2026 · Saved prototype build. This project is an independent concept.
Project 03 / Services & trades
Make way for water. An interactive pipe journey introduces a practical website for plumbing services.

The reduction compares build files on disk. It is not a measured page-speed or enquiry improvement.
The pipe experience gives the concept character, then hands over to practical service information.
Dedicated service pages and contact routes support an enquiry without making the visitor explore everything.
Optimised assets reduce the public build footprint. This is an implementation measurement, not a measured business result.
An independent website redesign by TheWebCoZW Harare, Zimbabwe · Plumbing services · September 2026
A blue-lit valve opens a journey through a pipe and into green PVC before revealing the Waterways homepage. The finished five-page site preserves that distinctive introduction while reducing the public-file footprint by 84.0% compared with our first custom build.
This is an independent portfolio concept delivered as a private demonstration. It is not presented as a commissioned client engagement or a measured commercial success.
Waterways Plumbing Services is a plumbing business in Harare with an existing Wix website. Its public content provided the starting point for understanding the business, its services and its visual material.
The design brief was to give plumbing a memorable visual identity: an interactive handle, cool blue lighting, a journey inside the pipe and a reveal of green PVC. A layered menu took inspiration from the earlier Joina City project. The practical challenge was to connect that expressive opening to the information a visitor needs: services, price guidance, work imagery and a clear way to get in touch.
TheWebCoZW's scope covered the visual direction, Blender pipe assets, the interactive introduction, responsive pages, navigation, content refinement and performance improvements.
The pipe became the organising idea for the experience. Instead of beginning with a generic plumbing photograph, the site begins with an object visitors can operate.
The scene uses a 7700 K key light for the requested cool blue mood. The journey lasts roughly eight seconds, but visitors can choose Enter site immediately or leave the sequence with Escape. Reduced-motion and data-saving preferences receive a static entry experience.


The review concentrated on elements competing with the content. Decorative arrows and plus signs were removed, along with the lower introduction bar and scroll cue. Bloom was removed, reflections were softened and the footer became more compact.
The layered menu retained its staggered reveal, while plain action labels and more restrained styling made the interface easier to scan. Focus management and contrasting focus indicators support keyboard use. These changes were intended to make the journey feel deliberate and give the content more room.
The final information structure contains five pages:
The service information is presented as guidance. Published starting prices are not treated as guaranteed quotes, and listed times are not promised completion times. Gallery material is not labelled as verified completed projects where that cannot be established.
Phone and email links provide direct contact. The footer carries the legal-page links and TheWebCoZW copyright credit, while acknowledging third-party rights in the policy content.
The largest reduction came from the assets. The pipe model was deduplicated, welded and compressed with Meshopt while retaining all six interaction and camera markers. Four core images were resized and converted to WebP. The later gallery adds six images totalling approximately 99 KB.
The 3D experience is also loaded selectively. Dedicated content pages and direct content anchors do not request the scene runtime or model. When the introduction is used, its runtime and model load in parallel. Leaving the experience cancels the model request and prevents a delayed scene from appearing. Idle rendering is demand-driven, and animation pauses while the scene is hidden or the menu is open.
| Measure | Initial custom build | Finished asset / site | Reduction |
|---|---|---|---|
| Total public files | 8,004,802 bytes | 1,283,150 bytes | 84.0% |
| Pipe model | 1,457,012 bytes | 314,872 bytes | 78.4% |
| Four core images | 4,135,152 bytes | 75,068 bytes | 98.2% |
The first optimisation pass reached 1,136,992 bytes. Services, gallery and policy content brought the completed five-page version to 1,283,150 bytes across 25 public files. The homepage entry script and shared chunk total 8,347 bytes; the separate content-page script is 2,371 bytes.
These are file sizes on disk before transport compression. The comparison is between versions of this custom build, not against the original Wix website. It does not measure loading time or Core Web Vitals.
Seven automated tests passed, covering the turn interaction, lighting bias, journey stages and loading lifecycle. Static checks verified all five routes and 112 local references, including navigation, assets and footer links. The compressed model decoded successfully with the Three.js loader in Node. Camera framing calculations were checked at five desktop, tablet and mobile viewport sizes, and selected flat-colour text and focus combinations were checked for contrast.
The result is a cohesive website concept with a distinctive opening, practical service information, a gallery and direct contact routes. Its strongest demonstrated improvement is the smaller file footprint, together with the separation of the optional 3D experience from everyday content browsing.
There are no measured conversion, revenue or field-performance results. The recorded checks are not a full accessibility audit or a substitute for browser interaction and user testing. Those would be the next steps before assessing the experience in public use.
Design and development: TheWebCoZW Tools: Blender, Three.js, HTML, CSS, JavaScript and esbuild Status: Private demonstration; latest recorded deployment completed 13 September 2026 Case study prepared: 19 September 2026
The images in this portfolio are screenshots of the saved website build, captured on 19 September 2026.
View the private demonstration — access is restricted to the owner.
Source material: Waterways' existing website, services, booking listings and about page. Pricing and timing source checks were recorded on 13 September 2026.
The file-size comparisons are recorded in the project build, model and image reports. They compare versions of this custom build before transport compression.
Website screenshots captured 19 September 2026 · Saved prototype build. This project is an independent concept.
Project 04 / Architecture & interiors
Space to live well. An image-led architecture website with considered typography, a project gallery and room for the story behind each space.

FORME, the buildings and their projects are fictional. Architecture imagery is AI-generated. The demo enquiry sends and saves nothing.
Generous images establish the studio’s point of view, with clear links into each project story.
Individual pages explain the fictional spatial ideas, material palette and design intentions.
The studio and architecture are fictional, imagery is AI-generated and the prototype enquiry is a demonstration.
Architecture and interiors website concept · October 2026
FORME is a fictional architecture studio created to explore how a website can communicate a practice's point of view. A courtyard residence, a sculptural stair and a brick workspace establish three different settings for the same design language: generous imagery, considered typography and a clear route into each project's story.
The Web Co's contribution is the website concept, visual direction, image direction and frontend implementation. FORME, its buildings and all project descriptions are fictional. Architecture imagery is AI-generated and does not document completed buildings or commissioned architectural work.
An architecture portfolio needs to do more than display attractive photographs. A visitor should understand the studio's sensibility, see the thinking behind a project and know how to start a conversation.
The brief was to create an expressive website for architecture and interiors, with enough structure to support an actual browsing journey. Large images would make the first impression; individual project pages would explain the spatial ideas, material choices and design intentions behind them.
The homepage leads with a full-width courtyard residence. Large sans-serif type gives the opening clarity, while italic serif emphasis brings a softer contrast. Warm stone, timber and planting supply the colour; dark surfaces and restrained glass navigation frame the imagery.
The rest of the homepage develops the introduction through a studio outlook, selected projects, an interior study, a three-stage approach and an invitation to enquire. A large opening project is followed by smaller, offset compositions, giving the images a varied reading rhythm.
The Courtyard Residence story connects the exterior to a living-room study and a material detail. These views were generated as related illustrations so the website could explore one consistent material language inside and outside.


The website has seven distinct pages: Home, Projects, Studio, Enquiry and three individual project pages.
The spatial diagram is illustrative and not to scale. It is not an architectural plan, construction drawing or verified statement of building performance.
The interaction direction combines masked heading reveals, gentle image movement, a spring-based project gallery and transitions between pages. In supporting browsers, selecting a project image connects it to its destination page.
Pointer tilt and parallax are limited to suitable pointers. Touch scrolling remains native, and reduced-motion preferences disable the added movement. Ordinary links and visible content provide a fallback when optional motion features are unavailable.
The site uses original HTML, CSS and JavaScript. Its animation and scrolling libraries are bundled locally with their licences. Responsive WebP images provide smaller variants for narrow screens, and below-fold imagery loads lazily.
The design developed from a compact architecture concept into an editorial website with more room for each project. Refinements added clearer project navigation, dedicated pages, related interior and material views, and a more complete enquiry demonstration.
A later image-visibility correction removed an initial mask that could leave photographs hidden. The captured build is revision motion-7, including the restored images and visible gallery text controls.
The screenshots in this case study were captured from the saved build on localhost on 19 October 2026. Home-to-gallery and gallery-to-project navigation were exercised during capture. These checks do not amount to a full device or accessibility audit.
FORME demonstrates a complete architecture website journey: discover a visual identity, browse a collection, read the thinking behind a project and explore an enquiry flow. It adds an editorial, image-led direction to The Web Co's portfolio alongside the more interactive Joina City, Oak Tree and Waterways concepts.
The result is a working website concept, not a claim of architectural authorship or commercial impact. No client enquiries, conversion uplift or formal performance benchmark were measured. A real studio launch would require approved identity, project information, imagery and a connected enquiry service.
Website screenshots captured 19 October 2026 · Saved architecture demo · motion-7. This project is an independent concept.