Ingredients for the new Paystack site
A breakdown of how the new Paystack site was built
For a couple of weeks now, I’ve been working on a website refresh for Paystack. I got my friend Onyekachi to help, and it’s been quite interesting. I decided to write about the process, but couldn’t figure out how best to. So I decided to just write pointers. I’ll be sharing
- Optimizations: Decisions we made regarding code, conventions, plugins and best practices
- Cool Stuff: Particular design elements that I really like about the final product
- Inspiration: Sites I looked at endlessly, and learned from to make this a reality
- Source code for anyone who cares to learn from it
Optimizations
No jquery, no bootstrap
Eventually, we realized this wasn’t as crazy an idea. Most things we wrote were easily done in vanilla js.
Clean, “stressful” HTML with BEM
I decided we try some CSS architecture and we chose to use BEM. It’s the more popular choice.
Pro: The code is really nice. Con: Oh hell, it’s really stressful. And then I decided all the CSS code must be alphabetical. *sigh, stresss*
Animations in code — with AnimatePlus
I wrote all the animations with CSS transitions using AnimatePlus, created by Benjamin De Cock (From Stripe). Hopefully one day, I’ll make something so useful.
Iconography: the noun project, figma, svgs
I created an icon sheet myself! I have a Noun Project subscription, so I searched for icons myself, then recreated or optimized them.
I was going to use SVG code, but I couldn’t optimize it enough to keep the code clean. I don’t know enough about these things. So I just used SVG Sprites for most of the icons and loaded the others directly.
Overall, I’m really impressed with how I managed to create the site using the most minimal external dependencies. Stressful, but worth it.
Cool Stuff
- Homepage Animation: The animated storyboard on the homepage was written all with CSS animations. Storyboarding and timing it was rather interesting and took about a week to perfect.
- Stack animations: Weirdly, these never made it to the site. I used blocks to create shapes for each section, all using CSS. I’ll be sharing some gifs on Dribbble soon.
- Snapchat About Page: I had this weird idea to put a Snapchat-like video on our about page that would be updated every time someone has a birthday (while we’re still small) or when we hit milestones. Didn’t turn out too shabbily.
Inspiration
I decided to share all the sites I looked at endlessly to form my ideas in making this website a reality.
- Hero animation was inspired by universe.openai.com and bold.co.
- Dropdown styling was inspired by reuters.tv.
- The lines on the cards were inspired by Plaid.
- This is a link to all 25 or so sites I was inspired by.
The code
If you want to learn from it, all the code is open to peek here https://github.com/PaystackHQ/website
