LendingQB

• CMS: None (Static)
• Browser Support: IE10+, modern browsers
• Type: Responsive website

About This Project

This was a fun project to work on with a lot of interesting CSS challenges. The designer was encouraged to be creative with the design and to help make this site stand out with abstract imagery and a limited color palette.

Angled panels were a big part of the LendingQB design and were one of the first things I tackled with prototyping. I also needed to deal with how the header and footer were not supposed to be angled at all. I ended up accomplishing this with a mixture of transform: skew (container element with one skew and an inner container with an opposite skew) to cause the angles and using padding, negative margins, and z-index to help the header and footer sit as they were supposed to.

One of the most challenging pieces of the site was the natural language form at the bottom of the homepage - which will have a blog post coming soon to webadvanced.com to go more in depth!

I also got to write a mailer using the phpmailer library! There was no back end developer on this project so I decided to give it a shot myself. I did a lot of research (and consulted with our back end developers) to make sure it was a pretty solid form, and I'm really pleased that I made an effort to do something I wouldn't normally do.

Overall this project was an opportunity to utilize the tools I became accustomed to while working on Kevo on a brand new project, and I think the result is a beautiful and clean presentation.

Lessons Learned

• Building an intuitive natural language form may in some cases involve rebuilding standard form behavior, which in turn could make the form less intuitive. Definitely dealt with a lot of trade-offs.
• It turns out SVG is still fun!
• I got to build a PHP mailer for the first time.
• Learned about a number of quirks with using transform: skew in opposite directions, including finding at one point that the site text was all blurry and having to figure out how to combat that.