About The Client

Content x Design is a new content design firm in Houston. To help build my portfolio and gain some more experience, I volunteered to build them a new website from the ground up. I knew, given their focus, that the site design should be simple and focus on clean typography and getting the message across.

Design Phase

As a new company, I didn’t have a lot of content to work with. Also, given COVID, there were not any images or other media to work with. Given little else than some basic content, I knew the site would be fine as a one-pager. In addition, the focus needed to be on the call to action and the services sections.

After some back-and-forth over basic layout, I decided on a simple single and split column alternating design. I also knew that I’d need something unique for the hero section to overcome the lack of images that might still convey or support the site’s message.

After some brushing up on css transitions to recall what was possible and some initial proofs, I was finally happy with the “flying papers” design.

Build Phase

After a refresher on bootstrap tags, the site construction was overall fairly easy. I ended up using a bootstrap starter template and building off it. It was smooth sailing until I realized the template didn’t include a mobile nav and I had to rip the collapse functions and styles off the general bootstrap file to get that to work.

Building the hero “papers” animations was a lot of fun! I experimented with a few things and overall I was really happy with how it came out. I had wanted to add a corner page “flip” to help give it a bit of depth - but the result actually detracted from the design and I decided to remove it.

We Need a Blog

Ahh my old pal Wordpress. This was fairly straightforward and I had enough experience with PHP and wordpress child themes to make sure I replicated the style and common elements on the blog without risking an overwrite during an update. The only headache here was matching the navigation styling since Bootstrap and the wordpress theme I built off used very different styling and structure.

The blog is currently not active to give the team a chance to write up some content but I am ready to connect them both when given the go-ahead.

Lessons Learned

The biggest time drain and lesson-learned was that I forgot about Bootstrap’s mobile-first hierarchy. I’m sure I will have to go back and clean some HTML class names before too long since I am positive there are some redundancies and overwriting going on.