Atelier Armonico

The Standard Package tailored to perfection

Join me in this walk through of the new website design for Atelier Armonico. A production company that works closely with communities and performers to create productions that raise awareness within the community. In this short video I will talk you through the standard and not-so-standard designs I’ve created to make this brand come to life.

CHAPTERS

00:00 Introduction
00:18 Cookies, facebook plugin and email lists
00:46 Home page
01:37 Footer
02:09 About page
02:43 Living Seams page with a clickable folder
03:13 Living Seams Introduction page
03:45 Digital Exhibition Page
04:23 Productions Page
04:45 Production Page (separate)
05:19 Donate button
05:52 Outro and work with me ☺️

READ THE TRANSCRIPT

Hi everyone, I'm Sarah from Photography and today I'm going to walk you through the new website for Atelier Armonico. Atelier Armonico is a charitable music production company and the brief was fairly simple. They wanted a five page website with a lot of room for images.

0:20

We'll dive straight in with the homepage. You can see the cookie policy here on the left hand side on the top. You can click that away and then you can see the chat plugin to Facebook chat here on the right which you can click away as well. It connects to your Facebook page and messages will show up in your Facebook business suite. Here's a pop up for joining the mailing list which you can click away as well.

0:48

And then here you are on the homepage. The Atelier Armonico logo is a huge inspiration for the rest of the website. We've used this rectangular shape that's open on one side to pop up around all the text boxes throughout the website. This is a tiny bit of custom code that is a huge inspiration for the rest of the website. And when you scroll through the website, you'll see them pop up everywhere. Here you can see some photos and links to Living Seams, which is their current production. What people are saying with a couple of reviews and quotes of people. A big quote for Kurt Weill and a link to their Instagram, which is their main social.

1:38

You can see a donation box here, which has a slight different colour and is also a tiny bit of custom code. Then it’s the footer here below with a sign up box for the newsletter, general information about Atelier Armonico and their contact information. And this will also link to the contact button in the general navigation at the top of the page.

2:13

Next up is the About page. You'll see an animation of the text here appearing. That's also a tiny bit of custom code that has been requested. And then again you'll see the frames around the text boxes. And who is who structured in an accordion which keeps the text centered and closes the other tabs as you click the next one. Again the donation box and the footer in the bottom.

2:48

Next up is living seems. You can see here that the folder is clickable. This isn't standard in Squarespace. I've put in a tiny bit of code that makes the folder clickable. I just think it's a tiny bit more intuitive to be able to click the folder. It can take you anywhere and to any link. I think the most logical thing for it to do is to take you to the first page in the folder. In this case, the introduction page.

3:25

So here we are on the introduction page of living seems. A lot of photography here again. The frame around the text. An overview of the partners and more information about the partners, which is in this case white on black to switch things up a little bit. And links to the performance and the digital exhibition space. The donate box box in the bottom.

3:51

We'll click the button for the digital exhibition space, which is a gallery that shows off all the artworks that have been made for Living Seams. This is a basic grid gallery from Squarespace with the added code that will give you a little overlay and show you a caption upon hover. When you click the artwork, you will see it in a lightbox in a bigger format. You can click through the pictures and can click the lightbox away with the button on the top right corner.

4:35

Next up is the productions page. This is a basic Squarespace blog that we've used for the productions. The reason we've used this is because the system of categories and tags works really well to show off the productions and makes it easier for people to find productions within a certain category.

4:53

When you click on one of the productions, you'll get into a separate page which will give you more information about the production, more photos which you can click through here, shows more information and here at the bottom you'll be able to see the tags grayed out and small which is also a tiny bit of custom code because that was made on request to make it less invasive. Usually it's a tiny bit bigger and black.

5:29

Lastly, there's the donate button here, which brings you to a donation page, which is linked up with Stripe, which is a fantastic payment service for online payments. There is Apple Pay available or donate with credit card, and it's all on a secure SSL checkout. Click back and you're back in the website. Your donations will show up into your Squarespace settings page on the left hand side, which will give you a great overview of your donations and who is donating.

6:04

That’s it for this roundup. I hope you found this interesting and if you've got any questions or comments feel free to use the comment section below. If you'd like to work with me feel free to get in touch.