New Site Design

If you’ve been here before, you may have noticed we just launched a brand new design of our entire site.

Our last design served us well, but it was time to make something newer, and faster.

Old site vs new site

Who Designed It?

While I’d like to think I’m an okay designer, there’s no way I could have designed this site! Those honors go to The Dickiebirds Studio, thanks to Paul Lacey and his business partner Peterย Wesoล‚owski (an incredible designer).

I was emailing with Paul one day and mentioned a re-design, but I hadn’t given it much thought yet. When he offered their services, I immediately accepted. I’ve been a big fan of their work for a long time, and I knew I would like what they would come up with.

Not long after that, they came to me with their first mockup of the homepage, which I immediately fell in love with.

The best part? They wouldn’t accept my money. Instead, Paul floated the idea of taking 100% of what I would have paid them, and donate it charity. We’ll be splitting it between a charity in Canada (where we’re located), and a charity in the UK (where they’re located).

Needless to say, I was blown away. I consider myself very lucky to be friends with such a talented and generous team.

I could go on about these two, but this post would get very long, very quickly!

Gutenberg

Once I received the design, it was time to code it. I toyed with the idea of using Sections, or even a page builder. Then I figured this would be the perfect way to get to know Gutenberg, so I dove right in.

Now to be fair, I’ve only used the HTML and Shortcode blocks on this site. However,ย  I loved every minute of it. Being able to write HTML without worrying about WordPress stripping my code or adding paragraphs was amazing.

I also took advantage of “Shared Blocks”, which allowed me to re-use the Premium and Testimonials block throughout the pages. The cool part? I update it on one page, and it updates site-wide. Very cool.

My takeaway? Gutenberg is going to be awesome. The more mature it gets, the more I’ll try to work with other blocks on this site.

Performance

One of the things I really focused on was performance. All of the big images are SVGs, which use a tiny JS fallback to PNGs if your browser doesn’t support them.

For a page with big images and lots of icons, I was very impressed. I managed to keep things around 300kb.

Animation Mode

I mentioned how talented Paul and Peter are, right? So once everything was basically done, they sent me these amazing animations of our hero images.

However, I was hesitant. These animations are somewhat heavy (not really, but I’m picky), and I really wanted to keep things as fast as possible.

So I thought why not approach it like we approach the theme? Start off as light as possible, and then give people the option to fancy things up a bit. That’s why you’ll see an “Animation mode” toggle in the footer of the website. Turn that option on, and take a look at our main hero images across the site. Pretty cool, right?

Back to Coding

Now that our site design is done, it’s time to get back to GeneratePress and GP Premium. GP Premium 1.7 will have a very exciting new module, which will replace two existing modules! More on that soon ๐Ÿ™‚

In closing, thank you again to The Dickiebirds Studio – you guys are both amazing. Not only did you deliver a beautiful design, but you did it extremely quickly. I’m blown away.

12 thoughts on “New Site Design

  1. GP – Always better. I definitely like the addition of more colours ๐Ÿ™‚
    It’s also nice to see GP placed next to Genesis, and other major players of WordPress on dickiebirds’ website.
    Excited about GP Premium 1.7 ๐Ÿ™‚

  2. The site really looks fantastic!
    @Paul Lacey:
    Please re-design my own site too. And you don’t need to take money from me…. i promise! ๐Ÿ˜‰

  3. Nice work on the site. Clean and lean.

    Two thoughts

    1. I would love to see a link to the blog in the menu. Not sure why the blog is so well hidden.

    2. The Submenus for “Help” and “Account” only open on click and not on hover. The latter being pretty much the standard on the web. Why going a different way here? What is the benefit.

    • Thanks!

      1. We don’t have much of a blog yet, so it’s not super public. We have plans for a more active blog soon.

      2. Just personal preference. The top level menu item doesn’t actually do anything, so we chose to make clicking it the action.

Leave a Comment