Brex Landing Page
Brex is a front-end design project that I embarked on to help me further my responsive web design skills. Up to this point I’ve only developed my own designs into fully functional websites, so with this project I wanted to challenge myself and develop a fully responsive landing page based on another designer’s work.
Role: Web Developer, Interaction Designer
Original Design
I chose this beautiful redesign by the OWW team for it’s amazing use of color, illustration and clean layout giving me enough variations in each section to capture a strong and consistent landing page, and challenge my CSS skills. One of the challenges of using this piece is that there isn’t responsive version designed out so another personal challenge was to adapt the design and create a full responsive experience.
Original Design – More from OWW
Desktop
The initial challenges of translating a pixel perfect design is that when it’s rendered in the browser, different visual elements start to break-down. I had to adjust the font-size to be a bit larger for legibility and adjust the spacing of the entire layout, because translating straight from the original design would leave everything too congested.
Ipad
As the screen sizes starts to shrink I followed responsive design guidelines converting the navigation into a hamburger icon and adjusting the illustrations and font-sizes to have more breathing room in. As less horizontal space is available more the content transitions to a one column layout.
Mobile
The challenge for mobile is making sure the content is legible and easy to digest as you scroll. The layout also needed to be spaced out enough is so that the user is able to navigate easily to each section with out feeling overwhelmed.
Conclusion
As I continue to try and bridge the gap between design and engineering, this project gave me a lot of insight on the types of challenges a developer faces when translating a design into code.
With my background in visual design it was fairly easy to adjust to different visual challenges as they presented themselves, but an engineer usually doesn’t have the same skill-set forcing them to make guesses if the use-case isn’t readily available.
This project helped me identify just how detailed a design should be and how many edge-cases it needs to address to make sure the design ends up looking like the developed product.
Key Lessons: React.js, CSS, Flexbox, Responsive Design, Mobile Design, Git, Netilify