I made this website for a store for a family member. I would love to get some feedback on the design, font, colors, or any other thing. I feel like there are some improvements that can be made. I also want to add some animations, but not sure where I should put them
In general I like it. I don’t think you need animation in the sense of things flying in from off screen. You have some UX animation which feels like it belongs there, that’s good.
My opinion is now that flex-box is so common who needs bootstrap. However there are some constraints that a grid would have given you that you must now take into account .
Now that large monitors are more common you need to account for what happens on a large screen. You have containers in the right places. Some of them now need a max-width to maintain good proportions in the design. The design looks good around 1200px wide.
I think it’s a matter of personal taste whether or not the background color and hero pictures have a max-width or fit the largest screens. Individual sections need smaller width limits. Most of you page stays centered and doesn’t get to wide . The paragraph, “Lighting can make a big difference…”, will expand to a single sentence. It needs a max-width to maintain the minimum number of lines that look good.
The row of 4 pictures stays together well but the alt-text is wrong.
When you deploy the site for real make sure you make multiple sizes of images for different size screens. You might use source set.
Add your media queries now and make adjustments to alignment for smaller screens.
The “Where to find us block”, should be centered as the screen size gets smaller. Also the block stretches bigger on larger screens even though the text stays put. Maybe put a max width so it doesn’t look too wide.
The footer text is spaced proportionally at wider widths but maybe limit it so the reader doesn’t have to scan such a wide distance making it quicker and easier to read (max-width). Also it needs adjusting for mobile. Either eliminate the pipes (vertical bars) or put them in their own elements so flex-box can space them evenly.
Personally I like to use pipes in horizontal menus but I put them between inline-block elements which lets me easily space them.
Never go live with
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
in your css. It’s shorthand for the Eric Meyer reset and a development convenience. Paste in the reset. It’s more performant.
Excellent start.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.