Responses by ED.
Background: When we think about seafood, many of us are taken back to a memory of eating fish and chips by the beach with friends and family. Often these takeaway shops would wrap food in newspaper, so it felt natural to explore that as a visual idea. As part of the Sea Harvest brand identity, we designed a newsprint pattern that is used in the shop signage. When it came time to express the brand in the digital space, we thought, “why can’t the website function like a newspaper?” This opened the floodgates to a plethora of ideas for the Sea Harvest brand, and also kept users engaged and entertained while navigating the site.
Favorite details: To further the authentic newspaper experience, we also wanted to give users a feeling of ownership, as if it was their own personal copy. We did this by adding procedural elements and some fun interactive features. Some of the simpler touches were adding today’s date to the masthead and generating page numbers, which are unique per user and remain consistent as users navigate throughout the site. We also built a fully interactive wordsearch, which is dynamically populated with SeaHarvest’s products. It’s the smarts behind making the wordsearch work that are keeping the site UX nice and friendly.
Navigational features: The way users navigate throughout the site is by “drawing” around each of the menu items. This ability to “sketch” on certain aspects of the site led us to one of our favorite features: the ability to draw anywhere you like, which we achieved by covering the site with an HTML5 Canvas element, which was then used to draw the users’ drawings.
Technical features: Replicating a static, print layout on the web comes with a whole suite of challenges. We were able to leverage CSS Flexbox to help reposition content, while maintaining consistent spacing, regardless of screen size. We also based nearly every measurement on a responsive scale using REM units, which made it easier for us to maintain control over type and image proportions as the browser scales.
Another way we carried the characteristic of print into the web was by using monochrome images and illustrations to simulate a printing press look. However, because we’re working with the context of the web, all images were uploaded in color and made to look grayscale on load using CSS filters. This gave us the best of both worlds by revealing the colored version on hover. We also used WordPress and WooCommerce for the site.