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.

21 thoughts on “New Site Design”

  1. Nice. But text on this post is really hard to read. You should not have more than 6oo – 700px width of text. Coz after that it’s hard to find the next line.

    Reply
  2. 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 ๐Ÿ™‚

    Reply
  3. Wow, Paul and Peter, this is incredible. The site looks really fantastic. The Dickiebirds Studio is awesome..!!

    Reply
  4. Now the site looks modern.. i love the animation thanks.. keep going.
    Waiting for GP premium new version. ๐Ÿ‘

    Reply
  5. 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! ๐Ÿ˜‰

    Reply
  6. 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.

    Reply
    • 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.

      Reply
  7. Hi Tom,
    Love the new design. I loved the power that Gutenberg and GP provide. Thanks Tom. Every site I now build is based on GP.
    You mentioned using HTML, Shortcode and Shared Blocks. Is there risk in using Gutenberg before it has gone live?
    Cheers,
    Vj

    Reply
    • Glad you like it!

      There’s always a risk when using beta software, but I’m fairly confident in the blocks I chose to use with the new design. I don’t think they’ll be changing much ๐Ÿ™‚

      Reply
  8. I’m a big fan of Generatepress and Tom honestly you have answered all my questions in the forums as well. I’m promoting Generatepress like crazy to all my blog readers and fans.

    I love it when you add new features and make the theme more awesome. Keep up the good work. ๐Ÿ™‚

    Reply
  9. I love GeneratePress because of its fast loading speed and simple framework. ๐Ÿ™‚ Good work guys keep adding new features.

    Reply

Leave a Comment