The New & Improved JAP Website!
It’s LIVE!! My new website has been live for a few days and I’ve gotten such great feedback on it! Thank you!! It’s been a long time coming and after over a month of back and forth design ideas, I’m finally really happy with this one. I didn’t hire a designer or a branding specialist to help me simply because I love the challenge of learning these pieces myself. Is it perfect? No. But it’s certainly a design that I can keep for a long time and maybe make a few small changes here and there if need be. But I’m loving it right now and I’m so proud of myself!
Today I thought I’d break down a few key elements on the site as well as some work arounds I had to use. For those of you who use Squarespace and are looking to grow with it, this post is for you! There are a lot of misconceptions about Squarespace but I’m here to tell you that if you’re willing to learn you can have a beautiful website for your business too. This isn’t to say that other platforms aren’t great. Everyone knows that you can build a gorgeous site on Showit 5 and Wordpress. Anyone who doubts that is crazy. But I’ve learned that this platform is my bread and butter when it comes to design.
The reason creating this site was such a challenge for me was because it’s on a template that I’ve never used before. I’d been using the Five template for 2-3 years and only dabbled in other templates. The more I read about the Brine family template features, the more I realized that I needed to build the new site on it in order to get a unique and more sophisticated look. Here are some of the key elements and work arounds I used to create this site!
Parallax Scrolling – A lot of templates have this feature. The key is using it the right way and understanding how it works. I’ll write a separate post about that but for this site I used it to break up what I considered to be long pages. Normally I would have just used a line graphic but I wanted to have very distinctive sections. The only way I was going to be able to do that was by using index pages. I think enabling the parallax scrolling was the best option rather than having the sections be still. I love that the site now has movement outside of just slideshows!
Blog Header Intro – I LOVED having a sidebar on my old site but this template doesn’t include it as an option and I really didn’t want to buy a plug-in just for that. Instead, I condensed the info I would have had on my sidebar to fit into the header of the blog page and the footer. Categories, search bar, a short bio and welcome, and social media links are all still easily accessible so this turned out to be a great alternative.
Custom Font – Learning CSS is by no means easy. I’m nowhere near being an expert but I did learn how to apply a custom font to my site!
It looks like this!
This was important because I didn’t want to have to make graphics of everything I wanted in a different font. I’ll write an in-depth post for how to add custom fonts to your site next week so check back on Thursday if you’d like to learn how to do this.
Detailed Footer - I don't normally have anything in my footer except for my Instagram feed but I had to create one for this template. With the five template I used a sticky navigation bar that flowed as you scrolled down the page. There is a CSS code for it for the this template but it doesn't work well when you have banners like I do... womp. So, in order to keep my site as user friendly as possible, I added a quick links section. I also decided to add social media links and a search bar because it would have been too distracting at the top of the site.
Neutral Color Scheme – I know that most times when creating a site, people tend to use their favorite colors. Sometimes it works, sometimes it doesn’t. My color scheme has always been neutral (except for in the summer when I thought I’d be a lifestyle blogger… no). The reason I changed everything back to neutral is because it’s not distracting. I like a lot of different colors but if I had to choose, I’d say my two favorites are burgundy and lavender. However, for my website, I felt that burgundy was too heavy to be a secondary color and too strong to be the primary. Lavender wouldn’t work well either as a secondary because it’s too light and it wouldn’t work for a primary because it didn’t give me that sophisticated design I was looking for. So, there were pros and cons to both but ultimately, I wanted a clean look without distracting colors. If you’re having this issue with your own design, one way to fix it would be to incorporate your favorite color by wearing it my bio photos like I will in a few weeks!
I’m so happy I can finally cross this off my list of goals for the year! I'll be back to my regularly scheduled blogging next week! In the mean time, explore the site and let me know what your favorite part is in the comments below! Happy Hump Day!!