Porta PRO
A separate Porta site for the people who specify doors in their designs.
Porta PRO continues our work with Porta. We started with a new identity standard: the logo stayed, and we built a new visual key around it. On that basis we built the Architect Zone, a site just for architects. Here they can download BIM files, find reference projects for inspiration and quickly show an investor what inspires them and how a given solution works.
See how it works- 53blocks the Porta team uses to build pages on its own
- 58knowledge base articles moved over automatically
- 2languages: Polish and Romanian
Doors by specification
Requirements first, model second
Architects look for doors by what they have to achieve: fire-rated, burglar-resistant, acoustic, interior or external entrance doors. That's how we organised the site. Doors can be chosen by specification or by building type, and downloads can be filtered by door type and technical features. We've recreated the specification table here, using models from the site.
| Model | Mechanical classResistance to loads, twisting and impacts. | Burglar resistanceResistance to break-in attempts, RC classes. | Fire and smokeFire resistance and smoke tightness. | Sound insulationAcoustic insulation in decibels. |
|---|---|---|---|---|
| Porta Decor, Basic, CPL Basic | class 1–2 | – | – | – |
| Porta Decor, CPL, Resist | class 1–3 | – | – | – |
| Mechanical class 4 | class 4 | – | – | – |
| Acoustic 27 dB | class 3 | – | – | 27 dB |
| Acoustic 32 dB | class 3 | – | – | 32 dB |
| Silence 37 dB, EI30 | class 4 | – | EI30 | 37 dB |
| Innovo 37 dB | class 3–4 | – | – | 37 dB |
| Innovo 42 dB | – | – | – | 42 dB |
| Acoustic 42 dB | class 3 | – | – | 42 dB |
| Fire-rated EI30 | class 3 | – | EI30 | 32 dB |
| Steel EI30 Plus | class 2 | – | EI30 | 32 dB |
| Fire-rated EI60 | class 3 | – | EI60 | 32 dB |
| Steel EI60 Plus | class 2 | – | EI60 | 32 dB |
| Agat | class 3 | – | – | 32 dB |
| Opal | class 3 | RC2 | – | 32 dB |
| Steel Secure RC3 | class 3 | RC3 | – | 37 dB |
| Extreme RC2, EI30 | class 4 | RC2 | EI30 | 37 dB |
| Extreme RC3, EI30 | class 4 | RC3 | EI30 | 37 dB |
| Extreme RC3, EI60 | class 4 | RC3 | EI60 | 37 dB |
| Granit class C | class 4 | RC3 | – | 32 dB |
| Extreme RC4, EI30 | class 4 | RC4 | EI30 | 37 dB |
Models and values from the table on the Porta PRO site.
Blocks
The whole site is built from blocks
Instead of a template for every page, we built a theme from 53 blocks. Each has its own fields, a mobile version and a language version. The Porta team uses them to build new pages and edit existing ones in the panel, without a developer, and new projects, events and news appear on the lists and the home page by themselves.
The data architects look for first.
- Door specifications
- Selection by specification
- Doors by building type
- Product filter
- Dimension tables
- Dimension drawings
- BIM files
- Veneers for CAD
- Catalogues to download
- Other files
- Door guide
The knowledge base blocks every article is built from.
- Text and media
- Gallery
- Comparison
- List with photos
- Feature cards
- Item list
- “Note” box
- Carousel
- Products in the text
- Files in the text
Content that grows every week and sorts itself.
- Projects
- Featured projects
- Events calendar
- Events
- Past events
- Webinars
- Past webinars
- News
- Product news
- Knowledge base cards
The start of every page and the way to the next one.
- Header with highlight
- Contact header
- Events header
- Investment solutions header
- Search header
- Header with media
- Knowledge panel
- Menu panel
- Menu categories
- Breadcrumbs
Blocks that turn a reader into a contact.
- Architect Zone
- Benefits of working together
- Certificates
- Technologies
- Choose an idea
- Call-to-action tiles
- Links to solutions
- Sticky cards
- Scrolling text
- Logo strip
- Contact and questions
- Database sign-up
Knowledge base
A knowledge base laid out like a guide
This is the biggest change in the new zone. Each of the 58 articles takes the architect through step by step: a table of contents, numbered sections, system comparisons, benefit cards, “Note” boxes, captioned drawings, recommended accessories and downloads. We designed ten block styles for this, so the editors match the form to the content, and the articles still look consistent.
- Room acousticsFire resistanceSmoke tightnessDoor mechanical classBurglar resistanceSound insulationDeclarations and certificatesAqua StopVentilation
- Measuring the wall openingDoor symbols in technical drawingsSample door scheduleDoor opening directionRegulationsDecorative elementsNo rebate in the opening, what now?
- Tall doorsWide door openingsDoors in plasterboard wallsJoining the threshold to the floorPeople with disabilitiesPets at homePainting doors yourself
The same article, before and after
The “Sliding doors” article in the old Architect Zone on porta.com.pl and in Porta PRO. The content is the same. A single column of text became a guide made of fifteen blocks in ten styles.
Languages
Strefa Architekta, Zona Arhitectului
The site was built in several languages from the start. We prepared the translations with Porta's glossary of terms, so that “door frame” and “mechanical class” mean the same in Bucharest as in Gdańsk. Each new language goes through the same steps: translation, review and publication. That's how we've already prepared the English version. Once translated, each version lives a life of its own, and the team in Romania edits its content independently of the Polish site.
UI/UX
From a project to a drawing in three clicks
We started the design with a functional wireframe, then came desktop and mobile views in Figma, and finally the WordPress theme. The look follows the visual key we developed for Porta, but it speaks the architect's language: calmly, with the data up front and room for every aspect of the offer. From the menu it's one click to 2D, 3D and BIM files, the knowledge base, reference projects, and events and trade fairs, and after signing up to the database, to webinars too.
Moving the content
We moved the entire old zone
The content was moved automatically. Every article, project, event and news item got a description in a migration file: old address, new address, categories, block order, captioned photos and files. The script that prepares this description understands the content and matches each fragment of the old page with a suitable block on the new one. An import script adds the entries to WordPress, and a checking script compares the result with the source. Running it again updates the same entry and creates no duplicates.
Every old address has its new counterpart on record. We re-pointed the links between articles to the new addresses, and the final check found not a single link to the old knowledge base in the 58 articles. The Romanian versions got their own translated addresses.
- 58knowledge base articles
- 87projects with galleries
- 786project photos, each in its own folder
- 24events
- 15product news items
- 31downloadable files
Old and new address
- porta.com.pl/strefa-architekta/baza-wiedzy/artykul/47 , new address: pro.portadoors.com/drzwi-przesuwne/
- porta.com.pl/strefa-architekta/baza-wiedzy/artykul/12 , new address: pro.portadoors.com/plyta-wiorowo-otworowa/
- porta.com.pl/strefa-architekta/baza-wiedzy/artykul/5 , new address: pro.portadoors.com/drzwi-szklane/
- porta.com.pl/strefa-architekta/baza-wiedzy/artykul/17 , new address: pro.portadoors.com/przepisy-prawne-drzwi-wewnatrzlokalowe/
- porta.com.pl/strefa-architekta/baza-wiedzy/artykul/19 , new address: pro.portadoors.com/antywlamaniowosc-drzwi/
- porta.com.pl/strefa-architekta/baza-wiedzy/artykul/22 , new address: pro.portadoors.com/dymoszczelnosc/
and 52 more articles, alongside the addresses of projects, events and news
The Architect Zone is no longer just a tab.
After launch we trained the Porta team to work in the panel and recorded a tutorial video they can come back to. We also made a film announcing the new zone to architects.
Porta PRO is part of our ongoing work with Porta. The workshops, identity, catalogue and porta.com.pl are shown on a separate page.
See all our work with Porta- Client
- Porta
- Scope
- Wireframe, UI/UX design for desktop and mobile, a WordPress theme with 53 blocks, automated content migration, translations, training and videos
- Online
- pro.portadoors.com
More projects
-
Design Optyk
A family-run chain of premium eyewear stores: an identity without gold, in-store materials and a new online shop linked to the stock of six of its seven stores.
-
Porta's 20 years in Romania
An identity and over 30 materials for Porta's three-day anniversary in Arad, from invitations in five languages to the gala.
-
Itrons
A system of five sub-brands built from a single hexagon, a visual identity and the itrons.pl website for an installation company from Kraków.
-
Itodi
A new made-to-measure furniture brand built from scratch: the name, a logo with a stretched “o”, the design of a shop with a configurator, an instruction leaflet and packaging.
-
Porta Drzwi
A design system for an existing logo: a frame taken from the logo, grids, icons, drawings, a catalogue, porta.com.pl, social media and sales materials for a door manufacturer.
-
Mily Group
A rebrand for a deer antler supplier: communication strategy, logo, logo guidelines, the milygroup.com website and trade fair materials.
-
Dawtona Group
All of Dawtona's communication beyond the shelf: over 90 projects, from posts and trade fair stands to four websites and animations.
-
Overmax
UX/UI design for the Overmax shop: RC cars in cinematic shots, a carefully worked-out product page, a category menu and a quiz that picks a model for you.
-
Fundacja MultiSport
An identity with a design system in Figma, a WCAG-compliant website and a brand hero duo that gets people moving.
-
PetCuisine
We built a brand from scratch for a pet food manufacturer in the Dawtona Group: from the name and tagline, through packaging in 12 flavours and the website, to trade fair stands across Europe.
-
Zippy Tail
We built the Zippy Tail brand from scratch: the name, strategy, labels for eight supplements for dogs and cats, the shipping box and the shop design.
-
Intima Clinic
Six medical brands in one group. Workshops, names, identity, clinic signage, print, animations and the intimaclinic.pl website.
Facing a similar challenge?
Tell us what you want to change. In a first, no-obligation call we will see whether and how we can help.