Website for MF architects
Responsive website for an architectural practice.
The architectural work of this firm is best displayed through imagery. So the website idea is based on giving the images as much room as possible, with only minimal typography and a neutral colour scheme.
In order to stay consistent with the corporate identity guidelines, the layout for this website is always divided in the middle horizontally, into two equal parts.
The horizontally divided layout gives the opportunity for variation within the page layout, while still being visually consistent overall.
Concept Development
Design System
Design Templates
UX Design
UI Design
Page types, templates
This site contains different types of content; projects, text, CVs etc.
We wanted to find a consitent yet variable design system for displaying this varied content in a cohesive way, and so we developed 5 different page templates, each with a slightly different purpose.
These templete are then designed and adjusted to also work for desktop, tablet and phone sizes.
Sitemap
The templates are used troughout the site, for consistency and variation.
Navigation
News page template
In order to highlight the images, yet make sure the text is legible on any background, there are 3 color options for text and backgrounds: Black, white and a neutral beige.
All projecs page template
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 template
The project pages are blogposts so that the site can be easily updated and maintained.
The single project page is for presenting each project in detail. So there is a layout for presenting initial facts, social media links, and then a flexible layout for different types of content, including images, text and plans.
These layout options are also adjusted for desktop, tablet and phone sizes.
Text page template
The page template for content that is mainly text based has a typographic hierarchy for clarity, as well as the option of adding images.
CV Page template
As well as general info and contact details, for the CV page there is also the option of showing selected projects.
Similar projects
