kumailht.com
Helping founders design & build stuff:
http://kumailht.com
184 posts
616 followers
1,610 following
Regular Contributor
Active Commenter
comment in response to
post
So much work goes into details
And details make user experience
comment in response to
post
This allows for 2 really nice things to happen:
- The gutters on the numerical columns can hug the numbers, making them easier to scan
- We can fit more numerical columns in this table without sacrificing breathing room in the first full-width column
comment in response to
post
The design system also works like "lego blocks" so it'll work really well into the future, even with new content and features that we cannot anticipate today!
comment in response to
post
I love the Swiss design style, and while I've learned from that style and used some version of it all of my work, whether it's strong grids, bold colors or crisp type, this one really excels at all of those.
comment in response to
post
The rest of the page for context
comment in response to
post
I think this will be a fresh start for Wealth Awesome and can't wait to see how far they take this brand.
I'm taking on more projects in June. Happy to get on a call and show you some of my past work if you're interested. DMs open.
comment in response to
post
This design has come out even better than I expected.
The swiss design style works exceptionally well for this personal finance brand. The red is bold, but not overwhelming.
The sections flow beautifully, and the design looks clean and authoritative.
comment in response to
post
The idea is that every section or piece of data or content may need to shown many times on different pages
So by having these reusable building blocks, we can make very complex web pages with lots of data & content, but also keeping the design and development process manageable.
comment in response to
post
The concept of "responsive blocks" is something I've had many years ago when I launched Responsive Elements.
And this is a similar idea. kumailht.com/responsive-e...
comment in response to
post
I also had an idea which I think worked REALLY well. The idea was to create these "responsive blocks" of data or content.
This personal finance website is a data+editorial website and the hard part was trying to map out how all the information should be presented to the user.
comment in response to
post
This time I wanted to lean in on the Swiss design style. A very strong grid. Maybe the grid even reveals itself to the user.
I wanted bold colors, but also sophistication in their use, which I felt was lacking in the last iteration.
comment in response to
post
Maybe the scale of the typography wasn't right, or the hierarchy of information. Maybe it was the grid or the colors, but I was just unhappy with it.
I knew I had to keep on experimenting.
So I went back to the drawing board and started thinking from square one again.
comment in response to
post
This is the ugly truth of the design process, you just have to keep on iterating until you find a version you like.
And have faith that you'll get there, even when you are not there yet and have clue if you'll ever get to a version you'll love.
comment in response to
post
I'm really liking it, but, as a designer I feel like I have more in the tank, like this isn't the most optimal design I can come up with.
So we're gonna give it another iteration and where we can take this!
comment in response to
post
Whats funny is that, after all the experimenting and trying out various combos, the one I liked the most was an iteration of something I started out with. The top left one.
I think the logo works really well for this use case and I'll share how I ended up using it tomorrow!
comment in response to
post
A mountain as a symbol works quite well.
WealthAwesome helps Canadians with their personal finances.
Vancouver, where I'm designing this for instance, is surrounded by mountains, is very inspirational.
But also, climbing a mountain feels like an apt metaphor for this product.
comment in response to
post
That's all for today, tomorrow we'll tackle the logo!
comment in response to
post
What the hell is a Humanist font anyways?
Well, imagine letters that feel like they were written by
a pen—warm, approachable, and super‑legible on screens. If Geometric is a ruler‑straight grid, Humanist is a handwritten note from a friend.
comment in response to
post
For the fonts, I wanted a Geometric font for the Headings and a very readable, approachable Humanist style font for the body copy.
Here is a paring I really liked, Geologica and Rosario.
I realize the letter width is a bit wider on Geologica than on Rosario but it still worked
comment in response to
post
I spent some type picking colors that I thought would work well together.
We may or may not use them, but with bespoke projects like this, we're trying to stand out, and it helps to think from first principles about the basics like colors, grids and typography
comment in response to
post
Thanks man! It def feels a bit ghost town-ish here vs X which sucks because I like the vibe here more than on X these days.
comment in response to
post
Stay tuned if you wanna see what the design direction turns out!
I'm taking on more design projects in April, DM me if you like my work and process!
comment in response to
post
Now we've got a bit of a starting point
Those words, are already painting a picture in my head
But we can't ship my imagination now can we?
It's time to roll into Figma and see if my ideas can be turned into a design direction!
comment in response to
post
Immediately, I'm thinking:
- Swiss Design
- Red on gray
- Large bold sans-serif
- Vertical grid lines
- Large-ish Serif body copy
- Canadian symbolism
- Trees, mountains, forrest, snow
- Graphite, blue, lines, grid
comment in response to
post
We knew we want to be serious, but not like Bloomberg or Financial Times serious.
A bit relaxed, but not Milk Road relaxed. The crypto scene I'd wager attracts a younger audience.
So we're going for a friendly tone, but also trustworthy and intelligent. ie. "brand voice".
comment in response to
post
Their business model will heavily rely on Ads, Affiliates and Subscriptions.
And the website is a data + editorial mix that helps everyday investors find the best credit cards, mortgages, loans, stocks, etfs, etc
Used by mostly 25-54 year olds, which seems about right.
comment in response to
post
I usually start with notes on the project to understand what the business model is and what the overall goals are
For WealthAwesome, a website that gets 50k+ uniques, targeting Canadians on their financial journey, I knew there were certain themes that will be important
comment in response to
post
It's kinda bland, but does the job.
We're gonna be taking it a level up.
If you wanna see how this turns out, follow me!
And if you're interested in taking your website up another level, hit me up in the DMs!
comment in response to
post
git commit -am "--" && git push
comment in response to
post
yeah seems like it!
comment in response to
post
Looks sick!
comment in response to
post
Hmm, thanks for that explanation!
Excited to so some more coffee experimentation at home. I love going down this rabbit hole haha :)
comment in response to
post
I never understood the difference between a pourover and an aeropress/frenchpress?
Aren't they both doing immersion brews, would assume it's the same flavor profile?
comment in response to
post
What grinder do you use?
comment in response to
post
I’ve never made one. What device do you use?
I’ve been making Aeropress for years, but wanna try something new.
comment in response to
post
I think so!
comment in response to
post
Manual testing IMO suffices for most apps
Integration once it gets a bit complex
Unit tests for mission critical parts only
Typescript if you REALLY cannot afford to fail ever along with unit+integration+manual
But I think very few orgs qualify for the nuclear option
comment in response to
post
Love the design Andy!
Haven't seen stuff like this in a while, reminds me of hlvticons.ch
comment in response to
post
I have done it both ways and failed at both, but I still think the theory is valid!