redesign idea for hospital service
Is there anyone know ideas to redesign this interface , and how it looks like for the future?
4 Replies
from top to bottom, my thoughts would be
1. major increase in title size
2. maxwidth of like 50ch on the title subtext that sits outside of the cards, but keep it centered
3. add images to the top of the cards instead of these tiny icons
4. relocate the icons on the same line with the card titles
5. make the amount of text in each card's description more uniform, they should all be 2 or 3 lines max
6. maybe add a gradietn or some other subtle bg shading either to the cards or the actual bg
7. and increase the gap between the cards so they have room to breathe
May i know how many inch for the gap between the cards?
Maybe is there any height & weight for card recommendation?
I would probably double it myself, but what I would suggest, is first get the card design locked down, and then once you have that, you can put 6 of them up in a grid and adjust the gap until it is the most pleasing to you
first decide if you want square or rectangular cards, then just lay them out so that 3 will fit in whatever the max container size you will have. You won't need a specific height or weight because it will resize responsively to fill all the various sizes.
If you are looking for a general guideline, I personally design down to a minimum screen size of 360px wide, and assume a card in a grid layout like this will be a single column. So I wouldn't make it any bigger than say 328px which still gives you enough wiggle room for a full sized card plus 16px on either side.
"inch" is not a suitable unit for screen design.
Screens aren't a fixed limited piece of paper. They vary a lot and your content design should adjust to this by being flexible.
Grid and Flexbox are two common CSS layout systems and techniques that can help control that flexibility plus the usage of
@media and more recently @container queries.
In this case a 1x6 (small screens), 2x3 and 3x2 (large screens) grid seems a reasonable approach. When to "flip" layouts however and the amount of whitespace between cards and inside them is totally up to you.
Values based on relative font size units (rem, em ex, ch) typically result in a nice harmonic typographic scale and white space rhythm.
As for the 360px value: there are many phones that go down to 320px and several recent iPhones actually have a 372/374px screen.
That's virtually one "M" more than 360px... let alone the many different Android devices where no standard screen sizes exist.
360 480 576 pixels are a thing of a long gone past.
I suggest to ditch fixed sizes completely when going into small screen territory and simply use sth. like calc(100vw - 2rem) for the page width/main wrapper once the screen sizes drops below i.e. 384px or 24rem. Make it centered horizontally, plus some nice padding for the cards.
There's no point in using fixed values for "portrait phone mode" where everything has be in a single column anyway.