The whole kit and caboodle

I finished the site in 2015 and am finally getting around to posting about it.

Song "Don't Love Me" by Stulp Fiction.

Daisycake is the first professional website I built. From concept and design to backend and frontend development. I love it, mainly because I feel it embodies the product, and secondly because I had the freedom to make exactly what I envisioned. You can view the live site here. I'm no longer the developer of the site so it could change at any time. The video above demonstrates what I built.

I was asked to redesign the old site and I ended up modernizing it as well. I started with the information architecture. The pages "Applications" and "Specifications" make up the bulk of the information. Split into how the product can be used and the details of the material and installation.

I wanted the design to be clean and modern, but also playful. Some of the elements that portray that are the "pixelated" header images that change based on what slide the carousel is on. These represent a closeup of the chain art construction. Another is the color slider that changes the color of the chain as you slide.

The backend is built with Node and Express. For the sample request form and contact form there is integration with SalesForce and Nodemailer. When a sample requet is sent it creates a new lead in SalesForce and assigns a task to the right user account. An email is also sent to the SalesForce user and the customer as well.

The frontend is a single page application built with Angular. It is fully responsive which is a major upgrade from the 960px fixed width site from before.

Here is an example of the responsive behavior.

Interesting details:

  • The silver chain background that adorns much of the pages is more complicated than it looks. The majority of it is a repeating SVG background with a transparent fill that weighs in at 10KB at 30px X 20px. The gray color is a linear gradient background which achieves the faded affect. The staggered bottom was the hardest bit. This is another repeating image in an :after pseudo element, but the hard part was aligning the chain with the dynamic repeat of the other background. It required calculating the size and position of the repeated background in JavaScript and then offsetting the top of the chain bottom. It's a subtle affect but pays dividends because it's dynamic and works with any sized content.
  • The changing header image is not part of the carousel, it's part of the header. As the carousel changes it updates state which triggers an image update on the header. The images are comprised of a sprite sheet made up of SVGs, and the state change simply moves the background position. The neat part about being a SPA is that the header image is maintained from page to page.
  • The color changing chain strand is a single photograph of just one brown chain link. I achieved the different chain colors through photo manipulation in PhotoShop.
  • The "Chain Styles" in the specifications page is made up of individual strands. They always stay the exact size and to specification. This also made making it responsive easy because I could just add or remove strands. The blue text that shows the spacing in inches is placed on the screen dynamically so that the vertical lines would be exactly center of the chain strands.
  • The thumbnails for the Colors section on the specifications page are made up of CSS gradients. I photographed and color corrected each chain sample for the hover preview and made a gradient representation for each one.
  • To prevent spammers from using the site's contact form to send emails, I made a security question that randomly asks a question about the information on the page.