Website design for B&F Architects
The image concept for this website is based on the idea of showing different scale at the same time, both human scale and and building scale. The design adheres to the identity guidlines.
Concept Development
Design System
Design Templates
UX Design
UI Design
Page types, templates
This site contains different types of content; projects, text, CVs etc. So we wanted to find a consitent yet variable design system for displaying this varied content in a cohesive way.
So we developed 6 different page templates, each with a slightly different purpose.
Startpage
The website design is based on a grid system of 1, 2, 3 or 4 set columns, depending on browser size. The grid adjusts depending on browser size.
In order to maintain typographic integrity, the images scale continuously, while the type has fixed sizes, changing only at set breakpoints.
Navigation
All projects page
The all projects page is for presenting an overview of all the projects, including the most important information, in a consistent and effective way.
Single project page
In order to accommodate many different types of projects with different kinds of content, the layout for the single project page is flexible yet consistent with the overall design.
We developed 4 types of section templates (A-D), that can be stacked in any order, so potentially each project page can look slightly different while still adhering to the general structure of the site.
Text page
Template for text based content
CV page
Template for individual CVs
Sitemap
The templates are used throughout the site, for consistency and variation.
Startpage, overview
Similar projects
