featured projects

Native Squarespace Feature Hare Brained Design Studio Native Squarespace Feature Hare Brained Design Studio

Native Carousel Sections

This template makes creative & strategic use of the native Squarespace Carousel on both the About page and the Events page. Both instances exist to illustrate the history and identity of the business through featured business milestones (on the About page) as well as showcasing past events.

Read More
Custom CSS Hare Brained Design Studio Custom CSS Hare Brained Design Studio

Past Work Gallery

The past work gallery offers a chance to show off previous projects without the need for a full on portfolio page before you need one. With custom CSS, we transformed the native Squarespace gallery block into this beautiful slideshow, guiding visitors clearly through the examples of your past work to show off your skill, experience & demonstrate what you have to offer.

Read More
Custom CSS Hare Brained Design Studio Custom CSS Hare Brained Design Studio

Sideways Navigation & Text

For a simple style to set this template apart, we opted for a sideways header and select uses of sideways text throughout the template. This design choice makes use of the white space of the page, while making a big impact without having to overload the back-end of the website with CSS to have a distinct style. Since the site is only one page, we wanted to keep the coding simple without sacrificing style or legibility.

Read More
Native Squarespace Feature Hare Brained Design Studio Native Squarespace Feature Hare Brained Design Studio

Events & Classes Summary Block

This template is set up with an unlinked “blog” page where the individual posts will function as events or classes for the Events & Classes summary blocks to pull from. Posts are tagged as either “events” or “classes” so they will be filtered into the correct column automatically without needing to edit the “home” page. Users can then click into the event for further info, or to register, without ever being taken to the hidden “blog” page.

Read More
Native Squarespace Feature Hare Brained Design Studio Native Squarespace Feature Hare Brained Design Studio

Calendar Block Ft. This Month’s Events

This template is set up with an unlinked “blog” page where the individual posts will function as events or classes for the calendar block to pull from. Based on when the “posts” (events or classes) are scheduled, they will show up on the calendar block, with the post excerpt as the event preview. Users can then click into the event for further info, or to register, without ever being taken to the hidden “blog” page.

Read More
Native Squarespace Feature Hare Brained Design Studio Native Squarespace Feature Hare Brained Design Studio

Anchor Link Navigation

To give the illusion of a multi-page website, as well as allow for the same user interaction, we used the native Squarespace section anchor link feature to create a navigation bar with links to the different sections throughout the page, rather than different pages through the site.

With additional custom CSS, we also moved the header navigation from the top to the side to give it a sleek, custom look.

Read More
Plugin Required Hare Brained Design Studio Plugin Required Hare Brained Design Studio

Services Format Lightbox

Lightbox Anything Plugin

For The Learning Loop and the Shannon template, we used the Lightbox Anything Plugin to showcase the different formats that services are available as. By making use of the Lightbox Anything Plugin & the Universal Filter menu, we were able to organize the offerings in a way that helps website visitors narrow down available services based on their own needs.

Read More
Plugin Required Hare Brained Design Studio Plugin Required Hare Brained Design Studio

Lightbox Portfolio

Lightbox Anything Plugin

For Molly Snell-Larch Consulting (and the Molly template) we used the Lightbox Anything Plugin to showcase the past work done with individual cooperatives, organized by type of cooperative organization, without having to dedicate an entire page to each example or clutter the Past Work page with examples. This structure allows the consultant to show off their experience while keeping the page simple for the site visitor, as the key demographic is looking for simple, streamlined information.

Read More
Native Squarespace Feature Hare Brained Design Studio Native Squarespace Feature Hare Brained Design Studio

Featured Resources

Native Featured Post Function

For The Learning Loop, and the Shannon template, making use of the “featured post” function on the resource library (a blog page) allowed us to design a featured resources section on the home page without requiring constant reworking when new resources are added. By filtering them to “featured only” the owner of the website can add new resources to the resource library, mark them as featured, and have them show up on the featured resources section of the home page without having to worry about altering the design.

Read More
Native Squarespace Feature Hare Brained Design Studio Native Squarespace Feature Hare Brained Design Studio

Additional Product Info: Featured Posts Summary

product page: additional info function

While the provided prompts for products are a bit limited, you can expand your product page to include anything you want with the classic builder under the “additional info” section while editing your product. For our templates, we used it as a place to add summary blocks linked to our features page, to showcase the custom features that correspond with each template, since we’ve already featured them on our site in detail.

Read More
Native Squarespace Feature Hare Brained Design Studio Native Squarespace Feature Hare Brained Design Studio

Linking to Sections in the Same Page

Native Section Linking Function

For Molly Snell Larch Consulting and the Molly template, we made use of the native section linking function to link each expertise overview section to a more in-depth section covering that particular expertise. This allows site visitors to skip ahead to what is relevant to them, as well as helps to maintain the interactive feel we wanted throughout the site.

Read More
Plugin Required Hare Brained Design Studio Plugin Required Hare Brained Design Studio

About Us: Lightbox Pop-Up

Lightbox Anything Plugin

For Hare Brained Design Studio & the hare brained template we combined the Lightbox Anything Plugin and a CSS zoom on hover effect over our photos as a simple, interactive “about us” pop-up function. While the information included in the pop-ups are fun facts about our team members to help get to know us (the information we want to make sure folks read is in simple text blocks in the “meet our team” section), the interactive nature and the combined functions help show off the type of custom elements we can include in our projects.

Read More
Custom CSS Hare Brained Design Studio Custom CSS Hare Brained Design Studio

Simple Services Tabs

Accordion Block + Custom CSS

Using an accordion block and custom CSS, we designed our services to show up with this simple side tab menu. It is visually intuitive, so visitors can navigate it easily, and find what they need without having to guess. This function is meant to appeal to folks who need help but in looking for help are hoping for someone to keep it simple for them.

Read More
Custom CSS Hare Brained Design Studio Custom CSS Hare Brained Design Studio

Custom Features Summary Slides

Summary Block + Custom CSS

Using a summary block and custom CSS, we can feature our custom features posts throughout our site, making clear:

  • what the feature is

  • what technique was used

  • what that feature does

with a more intuitive slideshow design, to encourage interaction from site visitors.

Read More
Custom CSS Hare Brained Design Studio Custom CSS Hare Brained Design Studio

Side by Side Gallery Slideshow

Gallery Block + Custom CSS

Using gallery sections and custom CSS, we created two simple slideshows with number labels & captions. Then, with additional CSS, we moved the gallery sections to be side by side, since the information presented is mainly for fun & to get to know our small team. This also provides us a way to showcase a gallery block on our site, which we would otherwise have little use for at this stage. This shows off our skill in CSS and our understanding of Squarespace features beyond their native capabilities.

Read More
Custom CSS Hare Brained Design Studio Custom CSS Hare Brained Design Studio

Color Changing Text on Hover

Text Block + Custom CSS

Using a text block and custom CSS, we created the effect of specific header text changing color when hovered over. This being the first thing that site visitors get to interact with shows off our style and skill immediately. It helps make clear that while web design & development is something fun and playful for us, we have the design strategy and custom CSS skills to make a functional, impressive site that levels up Squarespace's native features.

Read More