architecture practice website

an early responsive website

this one aged well!

loeb capote is one of brazil’s leading architecture practices, and in 2012 we designed their website.

one of loeb capote’s main specialties is to tackle large, complex industrial projects and come up with uniquely conceptual and problem solving designs.

we though the best way to highlight this was to show and tell, combining large images with bold headlines.

what

ux/ui design

what

ux/ui design

when

2012

when

2012

team

ilana tschiptschin

team

ilana tschiptschin

the responsive grid

one way i think this website stands the test of time is how it adapts to different screen sizes – a newish problem back then.

we used a very specific 7-column grid: 4 to the image, 2 to the headline, 1 to the navigation.

and all the sizes – columns, gutters, type – adapt to the screen in unit increments: in small screens the smallest grid unit is 7 px, which then grows to 8, 9, etc.

this system ended up been simplified to 3 sizes in implementation, but worked pretty well.

you can go check it live, as the website is still mostly unchanged since 2012: loebcapote.com

navigation and breadcrumb

as you can see, the projects page had gallery and table views, and the mobile version was built on a simpler, 3-column grid.

on the desktop, the navigation column is consistently used for filters and view options.

also, notice how as you navigate the ‘loeb capote’ heading becomes the first line of a breadcrumb, highlighting the active page, ‘projetos’.

in the image below, you can see how this breadcrumb progresses to the third level when you enter a specific project.

the show and tell project page

each project is introduced with a synthesis image and a headline that explains the main design direction.

using progressive disclosure, the navigation column houses a sub-menu for all the project content – photos, drawings, text, technical info, etc.

image gallery

when you open a project’s image gallery, the whole grid is used for the images, except for the navigation column.

the equivalent of the desktop breadcrumb on the mobile version is achieved with scrolling: when you open a project you automatically scroll down to have it’s title as the heading, but if you scroll back up you have the full navigation path there for you.

it was my first time working with the developers who built the website, and i had to make a significant number of concessions.

nevertheless, in an industry that changes so fast, the fact that it is still published after more than 10 years – and doesn’t look old – makes me really proud.