architectural practice

from brand to web in a few months

capote marcondes longo is an architectural practice mostly recognized for their large, complex projects for industries and the likes.

by the end of 2023, they sought me to create the firm’s visual identity, design all their documents and, most importantly, their website.

from brand to web in a few months

capote marcondes longo is an architectural practice mostly recognized for their large, complex projects for industries and the likes.

by the end of 2023, they sought me to create the firm’s visual identity, design all their documents and, most importantly, their website.

from brand to web in a few months

capote marcondes longo is an architectural practice mostly recognized for their large, complex projects for industries and the likes.

by the end of 2023, they sought me to create the firm’s visual identity, design all their documents and, most importantly, their website.

from brand to web in a few months

capote marcondes longo is an architectural practice mostly recognized for their large, complex projects for industries and the likes.

by the end of 2023, they sought me to create the firm’s visual identity, design all their documents and, most importantly, their website.

what

visual id, ux/ui, no-code build

what

visual id, ux/ui, no-code build

when

2023–2024

when

2023–2024

logo as layout generator

the simple, minimal logo subtly refers to steps of a staircase or intersecting building blocks.

as shown on the business card grid, the logo position and size create an underling structure from which all layouts emanate, even the most complex ones.

this language was applied in templates for visual presentations, architectural drawings, text documents, cost tables and more.

it was also the starting point for the website.

logo as layout generator

the simple, minimal logo subtly refers to steps of a staircase or intersecting building blocks.

as shown on the business card grid, the logo position and size create an underling structure from which all layouts emanate, even the most complex ones.

this language was applied in templates for visual presentations, architectural drawings, text documents, cost tables and more.

it was also the starting point for the website.

logo as layout generator

the simple, minimal logo subtly refers to steps of a staircase or intersecting building blocks.

as shown on the business card grid, the logo position and size create an underling structure from which all layouts emanate, even the most complex ones.

this language was applied in templates for visual presentations, architectural drawings, text documents, cost tables and more.

it was also the starting point for the website.

logo as layout generator

the simple, minimal logo subtly refers to steps of a staircase or intersecting building blocks.

as shown on the business card grid, the logo position and size create an underling structure from which all layouts emanate, even the most complex ones.

this language was applied in templates for visual presentations, architectural drawings, text documents, cost tables and more.

it was also the starting point for the website.

no-code ftw

for me personally, the website was an extreme experiment in no-code – it was fully built in framer, using very little custom code.

this allowed me to design, implement and publish the website all on my own, in a short timeframe and with a significant lower budget for the client than the typical design + developer duo.

at times, the complexity of the content was challenging – just look at that project page! – and i had to be creative to overcome the tool limitations.

no-code ftw

for me personally, the website was an extreme experiment in no-code – it was fully built in framer, using very little custom code.

this allowed me to design, implement and publish the website all on my own, in a short timeframe and with a significant lower budget for the client than the typical design + developer duo.

at times, the complexity of the content was challenging – just look at that project page! – and i had to be creative to overcome the tool limitations.

no-code ftw

for me personally, the website was an extreme experiment in no-code – it was fully built in framer, using very little custom code.

this allowed me to design, implement and publish the website all on my own, in a short timeframe and with a significant lower budget for the client than the typical design + developer duo.

at times, the complexity of the content was challenging – just look at that project page! – and i had to be creative to overcome the tool limitations.

no-code ftw

for me personally, the website was an extreme experiment in no-code – it was fully built in framer, using very little custom code.

this allowed me to design, implement and publish the website all on my own, in a short timeframe and with a significant lower budget for the client than the typical design + developer duo.

at times, the complexity of the content was challenging – just look at that project page! – and i had to be creative to overcome the tool limitations.

super responsiveness

the interface is built in such a way that everything is responsive – not only images and font sizes but every detail like the grid, gutters, paddings, and margins.

one single breakpoint sets the desktop/tablet layout apart from the mobile one.

this fluid way in which the design deals with screen size relates a lot to the way i designed loebcapote, the partners’ previous practice, 12 years earlier.

super responsiveness

the interface is built in such a way that everything is responsive – not only images and font sizes but every detail like the grid, gutters, paddings, and margins.

one single breakpoint sets the desktop/tablet layout apart from the mobile one.

this fluid way in which the design deals with screen size relates a lot to the way i designed loebcapote, the partners’ previous practice, 12 years earlier.

super responsiveness

the interface is built in such a way that everything is responsive – not only images and font sizes but every detail like the grid, gutters, paddings, and margins.

one single breakpoint sets the desktop/tablet layout apart from the mobile one.

this fluid way in which the design deals with screen size relates a lot to the way i designed loebcapote, the partners’ previous practice, 12 years earlier.

super responsiveness

the interface is built in such a way that everything is responsive – not only images and font sizes but every detail like the grid, gutters, paddings, and margins.

one single breakpoint sets the desktop/tablet layout apart from the mobile one.

this fluid way in which the design deals with screen size relates a lot to the way i designed loebcapote, the partners’ previous practice, 12 years earlier.