03 / 03
Visual Factories
Industrial software website redesign built mobile first.
SmartDesign case study
About the project
Visual Factories is an industrial software company whose website is read by plant and operations audiences, often on a phone on the factory floor.
The brief called for a materially more professional presentation. The existing site did not carry the precision expected of operational software.
A redesign that reads clearly at small sizes first, then expands into a confident desktop composition without losing that clarity.
Scope
- Website redesign
- Mobile first layout system
- Page structure and hierarchy
- Interface and component design
- Responsive behaviour
Design premise
Make operational software feel precise. The page is built from structured information bands, high contrast type, and a single signal colour used only where attention is required.
Inside the finished page
Visual system
- Page field#ffffff
- Band surface#f8f8f8
- Signal accent#f8d912
- Ink#1b1b1b
- Typography
- One sans family, tight display sizes for headline statements and a small measured body size for dense operational detail.
- Grid
- Full width horizontal bands. Each band holds a single idea, so the mobile stack is simply the same order at one column.
- Imagery
- Product interface and plant photography kept high contrast, cropped to the part of the frame that carries the point.
The full page, top to bottom
Motion concept
Grid line draw into a signal pulse
01 · Trigger. Section reaches the reading position and the frame is still.
The band grid draws in first as thin rules scaling from the left, then the interface is unmasked inside those bands, then the single signal colour pulses once on the action. Only transform and opacity animate, so the sequence stays cheap on a phone.
- 01TriggerSection reaches the reading position and the frame is still.
- 02ConstructionBand rules draw in from the left edge, one after another.
- 03MovementInterface and plant photography unmask inside the bands.
- 04Resolved stateFull contrast page, signal colour resting on the action only.
- 05PurposeThe page is built from structured bands and one signal colour. The movement shows that structure being laid down before anything decorative arrives, which is the same argument the static page makes about operational software.
How the page was built
01 · Structure
Bands and reading order set before any styling.
02 · Type and colour
Contrast set, signal colour restricted to actions.
03 · Live page
Interface and photography placed inside the bands.