Minimalizing Laravel Angular’s Landing Page
A case study on how I redesigned Laravel Angular’s landing page
I love redesigning stuff.
Redesigning something feels like giving someone a make over. From an unshaven homeless person to a good looking well dressed man.
It’s even better if you were the one who designed it first. You realize how much you used to suck at it, you get a second chance, and you see your self-taught skills in progress.
Minimal design is complicated.
I’m a big fan of minimalism. Some might think it’s easy to do minimal designs, I think it’s the complete opposite. You have to strip down a lot of things to create a minimal interface, and that’s not an easy task.
In short, minimalism is about:
- Stripping down to fundamental elements
- Simple functionality
- Plenty of white space
- Simple or little color for a purpose
- Less fonts
- Less design “tricks” (shadows, textures, etc)
So why redesign Laravel Angular?
Laravel Angular is an open source project created by Jad Joubran. It’s a package that lets you use Laravel’s APIs with an Angular’s front-end.
The first time I designed it, I did it kind of quickly. I created a logo in a few minutes, combined the colors of Laravel & Angular and tossed them into a brand identity. So it obviously needed a redesign.
I designed the new website in the browser directly through HTML/CSS, instead of predesigning it in a design tool, this gave me the ability to see the details immediately live in the browser and test it. I focused on redesigning the logo, make the page as light as possible, load less fonts & use much more white space.
1. More minimal logo
I changed the brand colors from the old orange & blue pair to a new material-inspired indigo monocolor.
In the old one, I used Lato (I was in a Lato phase) and a lowercase style. In the new one, I used San Fransisco (I’m now in a San Fransisco phase) and a normal uppercase typography, I also removed the “material starter”.
2. Less fonts
To keep things consistently minimal and to create the fastest load possible, I decided to use system fonts for this website.
Wait, before judging me: no, I don’t mean Arial or Times New Roman. I mean displaying the fonts equivalent to the user’s platform. In other words, showing San Fransisco for iOS users and showing Roboto for Android users, etc.
Can you really do that? Yes! You can stack system fonts for all platforms available. When the platform or browser sees its appropriate font family, it will ignore the rest — simple!
Here’s how I did it:
font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Oxygen, Ubuntu, Cantarell, “Fira Sans”, “Droid Sans”, “Helvetica Neue”, sans-serif-apple-systemtargets San Fransisco in Safari on Mac OSX and iOS, BlinkMacSystemFont is the equivalent for Chrome on Mac OS X, Segoe UI targets Windows and Windows Phone, etc.
Actually, Medium is using this approach in their interface fonts. You can read more about this approach here.
3. More white space
I decided to use a lot of white space in the landing page.
First, I ditched the hero “image” altogether. I stripped down all other details and I added a subtle grey animated background behind my title using particles.js.
For the rest of the sections, instead of the old two-column + three-column layout, I used a one-column + two-column layout instead and used more colorful trendy icons.
I ended the landing page with a bright indigo footer to create a contrast with the rest of the white sections.
As for the other pages, the documentation was previously linked to a separate website in the old website. Now, it’s in a page within the website and it has a minimal sidebar layout using white space for separation (you don’t really need lines to separate sections).
Done! You can browse the new design live here.
I hope I inspired you to redesign the thing you’ve always wanted to redesign that you’ve been postponing for years. And I hope I inspired you to design more minimally.
Happy designing! 🎨
🎁 By the way, you can get 20% off on and.co (an awesome app for invoicing, timetracking and payments) using my promocode NicoleYear or NicoleMonth!
Become a UX designer: The complete design course for non-designers
I made an online course for overwhelmed beginners who want to kickstart their design career. Want in? Sign up on Awwwards Academy!
