States are connected.
Micro-interactions show what changed: an item was added, a panel opened or a process finished. Timing and direction help retain context.
Design.Websites & digital products
Clarity that works.
Character that stays.
From research and a working prototype to a distinctive visual concept, a complex interface and a system ready to build.
F / 01
FORM & LOGIC
FORM & LOGIC
One form. Two ways of looking at design.
RESEARCH. DESIGN. EXPRESS.8 disciplines — one product
02 / OUR DISCIPLINES
From the first “why”
to the final pixel.
Eight disciplines working together. Choose one to see the challenge it addresses and what the team receives.
Find out what matters.
Understand the product, audience, constraints and reasons to choose. Compare interviews, sales enquiries and available analytics; separate evidence from assumptions.
DELIVERABLEPriorities, hypotheses and evaluation criteria.
Explore the exampleBuild a clear journey.
Structure, navigation, journeys and an interactive prototype. Check whether people can choose a product, make an enquiry or complete a work task.
DELIVERABLEJourney map and a prototype of key actions.
Explore the exampleMake the next action clear.
Hierarchy, tables, forms, navigation and states. Design for long content, an empty list, an error and a small phone—not only the ideal screen.
DELIVERABLELayouts, responsive rules and interaction states.
Explore the exampleFind a distinct visual voice.
Connect positioning with composition, typography and colour. Present the concept using real content and explain the key decisions.
DELIVERABLEVisual concept and principles for extending it.
Explore the exampleExplain the product visually.
Art direction for photography, illustration, icons, diagrams and image treatment. Agree the use of AI-generated assets and review their suitability.
DELIVERABLEAn approved set of visual assets for the website.
Explore the exampleShow what a still image cannot.
Interface motion, 3D objects and WebGL scenes. Plan loading, touch interaction and the option to stop motion.
DELIVERABLEMotion specification, assets and working prototypes.
Explore the exampleKeep quality as the product grows.
Tokens, components, variants and usage rules. A change should propagate consistently through the product instead of being patched across dozens of screens.
DELIVERABLEComponent library and documentation.
Explore the exampleBring the idea into the browser.
Prepare assets and behaviour specifications, align with developers and review the implementation. Development can be included in the project.
DELIVERABLEDevelopment-ready materials and a review checklist.
Explore the example03 / RESEARCH & STRATEGY
Understand first.
Then design.
A beautiful catalogue misses the point when a buyer cannot find a compatible part. Research helps us understand the task from the user’s point of view.
Start with the product, audience and business goals. Review competitors, existing analytics and customer questions. Include interviews and usability tests where a hypothesis needs evidence rather than a guess.
JTBD helps frame the task a person wants to accomplish. A journey map reveals the wider experience and friction. Information architecture turns these findings into navigation, page structure and content requirements.
DELIVERABLETask map, priorities, information architecture and hypotheses to test.
B2B / EXAMPLE DECISION MAP
- 01 / QUESTION
- Is there a compatible alternative with the right approval and lead time?
- 02 / FRICTION
- Information is spread across PDFs and needs a phone call to verify.
- 03 / PROPOSED SOLUTION
- Bring compatibility, availability and documents into the product page. Support comparison and a quote request from the selected items.
Task → Find → Compare → Request quote
B2B / EXAMPLE DECISION MAP
- 01 / QUESTION
- Will this material meet the conditions of my project?
- 02 / FRICTION
- Marketing copy does not answer the technical question.
- 03 / PROPOSED SOLUTION
- Separate the overview from specifications. Add an application filter, a technical file and a relevant example.
Conditions → Specifications → Documents → Consultation
Method demonstration. An example hypothesis, not findings from client research.
04 / UX & PROTOTYPING
Usability can
be put to the test.
One journey as a wireframe, a designed interface and an error state. Switch modes, change the viewport and try the next step.
01 / CONTACT DETAILS 02 / CONFIRMATION
Ready for
the next step.
Keep the order and total in view. Explain an error next to the field and preserve what has already been entered.
Use the example; do not enter personal data.
Demo completed. Nothing has been submitted or ordered.
01 / StructureTest the sequence before polishing the screens.
02 / InterfaceCreate hierarchy, readability and a clear next action.
03 / StatesDesign errors, loading and confirmation alongside the main view.
05 / CONCEPT & ART DIRECTION
One message.
Different character.
Composition, typography, colour and imagery change the tone. Here the fictional brand FORMA takes three visual directions, with the same content and a different approach.
FORMA®OBJECTS / SPACES / IDEAS01—03
A COLLECTION OF POSSIBILITIES
New forms
for familiar things.
Objects that change the space around us.
Explore the collectionFORM STUDY / BIG FISHART DIRECTION DEMONSTRATION
01 / 03
Quiet confidence. Focus on the object.
A warm palette, a serif and generous space. Leave room to study the image and read at a comfortable pace. A fitting direction for a story about materials, quality and detail.
02 / 03
Contrast and energy.
Dense typography, contrasting colour and bold scale. The composition commands attention; the message must support that intensity. A language for a launch, an event or a strong brand statement.
03 / 03
Precision and visible structure.
A modular grid, technical captions and a cool palette. The reader sees order, parameters and logic. A direction for a technical product with substantial specifications.
Extend the concept into a system: photography, illustrations, icons, diagrams, key screens and motion rules. Select tools, including AI, to suit the task; the designer remains responsible for the decisions and quality.
DELIVERABLEKey screens, visual principles and an approved set of assets.
06 / COMPLEX INTERFACES
Keep the complexity
behind the interface.
CRM, catalogues, customer portals and B2B services. Organise data around work: find, compare, change and review. Account for roles, permissions and exceptions.
F / WORKWORKSPACEProjectsDocumentsTeamDemonstration
data
data
WORK OVERVIEW
Projects4
| Project | Stage | Next step |
|---|---|---|
| Corporate website | Concept | Review direction |
| Product catalogue | Prototyping | Test the filters |
| Dealer portal | Design | Approve the states |
| Request service | Handover | Review responsive views |
Nothing found. Change the query or clear the search.
Projects will appear here
Explain what this area is for and what to do first.
Loading the list. Preserve the layout to prevent the interface from jumping.
!
The list could not be loaded
Saved information is safe. You can try again.
Search for a project or switch states. No data is sent anywhere.
Data & prioritiesPut essentials in the overview; reveal details when needed.
Roles & permissionsA viewer can read data without being offered unavailable actions.
Responsive behaviourInformation stays meaningful on a narrow screen.
07 / MOTION / 3D / WEBGL
Motion
explains.
Show volume, material, state changes and the relationship between actions. Give each effect a purpose: reveal a product, direct attention or clarify a transition.
F / 02
MATERIAL STUDY
MATERIAL STUDY
Procedural 3D form / interactive
A product can be explored.
A 3D scene reveals form, angle and material. Prepare geometry, textures, lighting and interaction for the web, with a static fallback.
The effect respects the task.
Load expensive assets when needed, stop scenes outside the viewport and respect reduced-motion preferences. Core content remains available without WebGL.
BIG FISH LABORATORY PROTOTYPES
SuardonProduct presentation / 3D experimentRedfish / BFD LabInteractive scenes and experiments08 / DESIGN SYSTEMS & PRODUCTION
One principle.
Many screens.
In Figma: components, variants and Auto Layout. In code: the same rules for colour, typography, spacing and states. A system helps the product grow consistently.
TYPE / SPACE / COLOUR
A hierarchy you can see.
Rules the team can use.
Display / 64Heading / 32Body / 16Caption / 12
DELIVERABLEComponent library, tokens, responsive rules and behaviour specification.
colour.accent
colour.surface
colour.text
colour.surface
colour.text
COMPONENT / CARD
Change it in one place.
Theme and density update every component in this example.
Keyboard focus is supported. Changes stay within this demo.
Layouts
Pages and journeys at the agreed viewport sizes.
Components
Variants, states, constraints and reuse guidelines.
Specification
Behaviour, responsiveness, asset exports and content requirements.
Design review
Browser review and a list of discrepancies to resolve.
09 / PROJECTS & CONCEPTS
Decisions.
In real context.
From the published portfolio: challenges, screens and visual decisions. Client projects and the authored concept are labelled separately.
Help people choose protective equipment.
Large product imagery works alongside the catalogue, selection and checkout.
Communicate architectural scale.
Imagery, space and typography connect the expression of façades with technical content.
Present a different way of living.
A visual concept about living on water. Original presentation credit: Vitali Zaharchenko / Uprock agency. Retained in the published portfolio.
Connect a material with its application.
Architectural presentation, information about glass and technology. The project includes English localisation.
10 / HOW WE WORK
A clear process.
A reviewable result.
Scope follows the challenge. Agree deliverables, stages and review points before starting. Each stage produces something tangible to review.
01Research & scope
Understand the product, users, constraints and success criteria. Agree what to investigate and which materials are needed.
DELIVERABLEBrief, task map, research findings and project boundaries.
02Structure & prototype
Create the information architecture and key journeys. Walk through them with the team and, where agreed, with users.
DELIVERABLESitemap, user flows and a clickable prototype.
03Visual concept
Define the direction on key screens using real content. Discuss the reasons behind it, not only personal preferences.
DELIVERABLEConcept, rationale and approved visual principles.
04Screens, assets & system
Extend the concept across the agreed pages, responsive views, assets, states and components.
DELIVERABLEFigma layouts, component library and prepared assets.
05Testing & refinement
Review journeys, long content, errors, keyboard interaction and small screens. Resolve the issues found.
DELIVERABLEReviewed states and a record of design decisions.
06Handover & design review
Deliver source files and specifications, then align on implementation. When supervision is included, review the result in the browser.
DELIVERABLEDevelopment package and design review findings.
11 / SCOPE & NEXT STEPS
What shall we
create for you?
Bring a new product, an existing website or a specific journey that needs rethinking. Start with the challenge and agree a suitable scope.
Research, prototypes, concept, layouts and materials for your development team. Agree the scope and depth of each stage.
One team handles the experience, visual language and implementation. Agree the CMS or stack, integrations and acceptance criteria.
Review the current product, keep what works and revisit weaker journeys. Plan content migration and a controlled transition.
Add journeys, pages and components within the existing system. Start with priorities and work in agreed iterations.
Your chosen format will be added to the enquiry. Cost and timing depend on scope, content and complexity.
What exactly will we receive?
The agreed package: editable Figma files, responsive views, components and states, visual assets and behaviour specifications. Development and design supervision are scoped separately.
How are cost and timing determined?
By the number of journeys and unique screens, visual and interaction complexity, content readiness and testing scope. After reviewing the challenge, agree stages, deliverables and review dates.
Can we start with part of the product?
Yes. Start with research, a concept, a key journey or a set of problematic screens. Define what the stage should validate and how its outcomes will be used.
Who prepares copy and imagery?
Assign responsibilities before starting. Use your materials or include content production in the project. Agree production and usage rights for photography, illustration, 3D and licensed assets separately.