Hi all, I'm in the progress of building a new self-hosted blog site. I'm not really well-versed in web design, so I figured it will be better to gather feedback from the community. The first draft is shown below.
For context:
- This is my first (serious) try using Figma.
- My goal is to have a minimalistic website, while not being so bland. I'm not fond of excessive effects or animation.
- This is my first draft.
Here is some information regarding the current design:
- Font is Roboto.
- Font sizes are 32, 24, 16, and 12 depending on the content.
- Border radius is 24.
- Spacing is based on a 4 pt. grid. The common gap distance is 16, and 32.
Here are some of my questions/concerns:
- I use Roboto because it is a de facto choice for the initial design, but it is a bit generic to me. What are other alternatives?
- Is the Hero section kind of bland (waste of space)?
- What would be a way to make a smooth transition between sections (e.g., from Hero to All Articles)? At the moment, I feel like they are visually disconnected.
- I feel like the article section is clustered, or is it?
- For the article filter, how should the choices be presented when there are multiple of them (for visual, and a11y)? For example, 10-choice is 10-row, or drop box, or something else (like Tags filter)
- I prefer a website with a neutral theme, so there is no light/dark mode. Or do I still consider a light/dark version of a neutral theme?
These are on top of my head at the moment, any other feedback is greatly appreciated!
Top comments (9)
I took a quick look. I like it. I'm confused by one of your questions though. You mention preferring a neutral theme, so I was surprised to see a theme toggle. Anyway, both your light and dark modes look nice. I think I prefer the dark mode, but that is just me. If you keep the 2 theme options, in addition to the toggle, you might consider initially selecting based on users dark vs light mode preferences. I think that can be done with a CSS media query.
Overall, very nice.
Thanks for the feedback. I have a few questions.
There is a light/dark toggle button next to the follow button at the top right of the page.
I see, that is my current website hosted on Hashnode, not the one I designed. I should repharse the post to make it clearer.
The toggle button toggles between what appears to be a light and a dark mode (the button that looks like the moon).
Thanks for letting me know. That was not the website I intended to present. I did reorganize the post to resolve the confusion.
I'll check it out a bit later.
You mention preferring a neutral theme. What makes this neutral? I would think it is a light theme since it has dark text on a lighter background. It looks nice either way.
That makes sense, probably I use the wrong term to describe the color. By saying "neutral", I mean a theme that can be used in both light and dark environment without creating too much distraction. For example, a pure white theme in a dark room makes me feel like I'm looking at the sun. However, the perceived brightness can be toned down using something more "neutral" like grey.