24
- October
2017
Comments Off on Preliminary Product Catalog Website
Preliminary Product Catalog Website
Date: 2017
Technology: HTML5/SCSS, Zurb Foundation, Ruby on Rails Custom CMS
Technology: HTML5/SCSS, Zurb Foundation, Ruby on Rails Custom CMS
Goals/Concept: The parent company needed a site to transition a new acquisition to, so in lieu of a complete product line, the goal was to display basic marketing information about the product line, have a slick, image-heavy look, and provide opportunity to generate potential leads and direct them to their Hubspot account.
Role: I designed, and developed front-end layouts and styling, as well as all content load. I also created marketing banners, the ‘did you know’ diagram, and a custom curated icon font. Project launched in roughly 2 months.
Project Gallery
Home - Desktop
Home - Laptop
Home - Tablet
Home - Phone
Products Grid
-
Home - Desktop
The design was meant to be mostly images; all images are responsively handled with Foundation. Different cropping for smaller screen sizes was also used. -
Home - Laptop
Responsive implementation keeps the look and feel similar for smaller screens. -
Home - Tablet
Continuing with the emphasis on images, the imagery was kept large at tablet size -
Home - Phone
A square proportioned image was used for phone sizes to shorten scrolling and decrease load time. -
Products Grid
With no product images and minimal content available, a grid display was used to fill up the page and the lead generation CTA was given priority.