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.
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.
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.
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
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
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
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.